/*
 * Jochim Márk téma – alapok.
 * Arculat: II. Zsálya és Tölgy (elfogadva 2026-08-19).
 *
 * Tokenek, tipográfia, elrendezés. Komponens ide nem kerül.
 */

/* ---------------------------------------------------------------- Tokenek */

:root {
	/* Az arculati terv öt színe */
	--zsalya: #5a7268;          /* alap, címsorok */
	--zsalya-halvany: #c3cfc5;  /* szekció-háttér */
	--tolgy: #9c7247;           /* kiemelés, dekoráció */
	--kagylo: #faf8f3;          /* oldalháttér */
	--pala: #2b322e;            /* szövegszín */

	/* Származtatott árnyalatok – ugyanaz a két szín, más mélységben */
	--zsalya-sotet: #3d4c45;    /* lábléc, sötét szekció */
	--zsalya-halk: #e8ede7;     /* leghalványabb zöld felület */
	--tolgy-gomb: #956d44;      /* gombháttér: fehér felirattal AA (4.6:1) */
	--tolgy-melyt: #7c5734;     /* szöveglink és hover (6.0:1) */
	--pala-halk: #5e6b63;       /* másodlagos szöveg */
	--vonal: #e3ded2;
	--feher: #ffffff;

	/* Betűk */
	--betu-cim: 'EB Garamond', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
	--betu-szoveg: 'Lora', Georgia, 'Times New Roman', serif;

	/* Ritmus */
	--sav: 1200px;
	--sav-szuk: 760px;
	--keret: clamp(1.25rem, 5vw, 3rem);
	--szekcio-ter: clamp(4rem, 9vw, 7.5rem);
	--radius: 4px;
	--radius-nagy: 10px;

	/* Árnyék – halvány, papírszerű, nem "webes" */
	--arnyek: 0 1px 2px rgba(43, 50, 46, 0.04), 0 8px 24px -12px rgba(43, 50, 46, 0.16);
	--arnyek-eros: 0 2px 4px rgba(43, 50, 46, 0.05), 0 18px 40px -18px rgba(43, 50, 46, 0.26);

	--atmenet: 180ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ------------------------------------------------------------ Alaphelyzet */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: 6rem;
}

body {
	margin: 0;
	background: var(--kagylo);
	color: var(--pala);
	font-family: var(--betu-szoveg);
	font-size: 1.0625rem;
	line-height: 1.75;
	font-weight: 400;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

img,
svg,
video {
	max-width: 100%;
	height: auto;
	display: block;
}

/* ----------------------------------------------------------- Tipográfia */

h1,
h2,
h3,
h4 {
	font-family: var(--betu-cim);
	font-weight: 500;
	color: var(--zsalya-sotet);
	line-height: 1.15;
	letter-spacing: -0.005em;
	margin: 0 0 0.6em;
	text-wrap: balance;
}

h1 {
	font-size: clamp(2.4rem, 6.4vw, 4.1rem);
	line-height: 1.08;
}

h2 {
	font-size: clamp(1.95rem, 4.4vw, 2.9rem);
}

h3 {
	font-size: clamp(1.3rem, 2.4vw, 1.6rem);
	line-height: 1.25;
}

h4 {
	font-size: 1.1rem;
	line-height: 1.35;
}

p {
	margin: 0 0 1.2em;
	text-wrap: pretty;
}

p:last-child {
	margin-bottom: 0;
}

a {
	color: var(--tolgy-melyt);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.22em;
	transition: color var(--atmenet);
}

a:hover,
a:focus-visible {
	color: var(--zsalya-sotet);
}

strong {
	font-weight: 600;
	color: var(--zsalya-sotet);
}

em {
	font-style: italic;
}

ul,
ol {
	margin: 0 0 1.2em;
	padding-left: 1.3em;
}

li {
	margin-bottom: 0.4em;
}

blockquote {
	margin: 2rem 0;
	padding-left: 1.4rem;
	border-left: 2px solid var(--tolgy);
	font-family: var(--betu-cim);
	font-size: 1.3rem;
	line-height: 1.5;
	color: var(--zsalya-sotet);
	font-style: italic;
}

hr {
	border: 0;
	border-top: 1px solid var(--vonal);
	margin: var(--szekcio-ter) 0;
}

::selection {
	background: var(--zsalya-halvany);
	color: var(--zsalya-sotet);
}

:focus-visible {
	outline: 2px solid var(--tolgy-melyt);
	outline-offset: 3px;
	border-radius: 2px;
}

/* -------------------------------------------------------------- Elrendezés */

.sav {
	width: 100%;
	max-width: var(--sav);
	margin-inline: auto;
	padding-inline: var(--keret);
}

.sav--szuk {
	max-width: var(--sav-szuk);
}

.szekcio {
	padding-block: var(--szekcio-ter);
}

.szekcio--halk {
	background: var(--zsalya-halk);
}

.szekcio--zsalya {
	background: var(--zsalya-halvany);
}

.szekcio--sotet {
	background: var(--zsalya-sotet);
	color: rgba(255, 255, 255, 0.9);
}

.szekcio--sotet h2,
.szekcio--sotet h3 {
	color: var(--feher);
}

.szekcio--feher {
	background: var(--feher);
}

.racs {
	display: grid;
	gap: clamp(1.5rem, 3vw, 2.25rem);
}

@media (min-width: 720px) {
	.racs--2 {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 900px) {
	.racs--3 {
		grid-template-columns: repeat(3, 1fr);
	}

	.racs--4 {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* Segédosztályok */

.rejtett {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.kihagyo-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 200;
	background: var(--zsalya-sotet);
	color: var(--feher);
	padding: 0.75rem 1.25rem;
	border-radius: var(--radius);
}

.kihagyo-link:focus {
	left: 1rem;
	top: 1rem;
	color: var(--feher);
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}