/* ==========================================================================
   1. EGYEDI FONT (Butler) BEHÚZÁSA HELYILEG
   ========================================================================== */

/* 1. Light (300) - OTF formátum! */
@font-face {
	font-family: 'Butler';
	src: url('../fonts/Butler_Light.otf') format('opentype');
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}

/* 2. Roman / Regular (400) */
@font-face {
	font-family: 'Butler';
	src: url('../fonts/Butler-Free-Rmn.ttf') format('truetype');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

/* 3. Medium (500) */
@font-face {
	font-family: 'Butler';
	src: url('../fonts/Butler-Free-Med.ttf') format('truetype');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

/* 4. Semi-Bold (600) */
@font-face {
	font-family: 'Butler';
	src: url('../fonts/Butler-Free-SBd.ttf') format('truetype');
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}

/* 5. Extra-Bold (800) */
@font-face {
	font-family: 'Butler';
	src: url('../fonts/Butler-Free-XBd.ttf') format('truetype');
	font-weight: 800;
	font-style: normal;
	font-display: swap;
}

/* 6. Black / Extra nagy súly (900) */
@font-face {
	font-family: 'Butler';
	src: url('../fonts/Butler-Free-Blk.ttf') format('truetype');
	font-weight: 900;
	font-style: normal;
	font-display: swap;
}

/* ==========================================================================
   2. GLO BÁLIS VÁLTOZÓK
   ========================================================================== */
:root {
	/* Butler a címekhez (Elegáns serif megjenés) */
	--font-heading: 'Butler', Georgia, serif;

	/* Open Sans a kenyérszöveghez (Jól olvasható sans-serif) */
	--font-body: 'Open Sans', sans-serif;
}

/* ==========================================================================
   3. TIPOGRÁFIAI ALAPOK
   ========================================================================== */
body {
	font-family: var(--font-body), serif;
	font-size: 16px;
	line-height: 1.3;
	color: var(--sziv-black);
}

h1, h2, h3, h4, h5, h6, p, a {
	color: var(--sziv-black);
}

h1 {
	font-family: var(--font-heading), serif;
	font-weight: 800;
	font-size: 50px;
	@media (max-width: 768px) {
		font-size: 32px;
	}
}

h2 {
	font-family: var(--font-heading), serif;
	font-weight: 700;
	font-size: 30px;
	@media (max-width: 768px) {
		font-size: 24px;
	}
}

h3 {
	font-family: var(--font-heading), serif;
	font-weight: 500;
	font-size: 22px;
	@media (max-width: 768px) {
		font-size: 17px;
	}
}

h4 {
	font-family: var(--font-heading), serif;
	font-weight: 500;
	font-size: 22px;
	@media (max-width: 768px) {
		font-size: 17px;
	}
}

p {
	font-size: 16px;
	line-height: 1.6;
}

a {
	text-decoration: none;
	&:hover, &:focus {
		color: var(--sziv-black);
		text-decoration: underline;
		text-decoration-color: var(--sziv-burgundy);
	}
	&:active {
		color: var(--sziv-grey);
		text-decoration: underline;
		text-decoration-color: var(--sziv-burgundy);
	}
}