/* ==========================================================================
   Csokonai — szerkezet: konténer, szekció, fejléc, navigáció, lábléc
   ========================================================================== */

/* --- Konténer és szekció -------------------------------------------------- */

.csk-container {
	width: 100%;
	max-width: var(--csk-container);
	margin-inline: auto;
	padding-inline: var(--csk-gutter);
}

.csk-container--wide { max-width: var(--csk-container-wide); }
.csk-container--text { max-width: calc(var(--csk-container-text) + 2 * var(--csk-gutter)); }

.csk-section {
	padding-block: var(--csk-section-y);
}

.csk-section--tight { padding-block: calc(var(--csk-section-y) * 0.6); }
.csk-section--alt   { background-color: var(--csk-bg-alt); }

/* Szekciófejléc: cimke + cím + felvezető, egységes ritmussal */
.csk-section-head {
	max-width: var(--csk-container-text);
	margin-bottom: var(--csk-space-xl);
}

.csk-section-head--center {
	margin-inline: auto;
	text-align: center;
}

/* --- Rácsok --------------------------------------------------------------- */

.csk-grid {
	display: grid;
	gap: var(--csk-space-lg);
	grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
}

.csk-grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr)); }
.csk-grid--tight { gap: var(--csk-space-md); }

/* Kéthasábos, aszimmetrikus elrendezés (szöveg + kép) */
.csk-split {
	display: grid;
	gap: var(--csk-space-xl);
	align-items: center;
}

@media (min-width: 900px) {
	.csk-split {
		grid-template-columns: 1fr 1fr;
		gap: var(--csk-space-2xl);
	}

	.csk-split--wide-left  { grid-template-columns: 1.35fr 1fr; }
	.csk-split--wide-right { grid-template-columns: 1fr 1.35fr; }

	/* Képcsere: a média vizuálisan a másik oldalra kerül, a DOM-sorrend marad
	   (így a képernyőolvasó és a mobil nézet logikus sorrendet lát). */
	.csk-split--media-first > :first-child { order: 2; }
	.csk-split--media-first > :last-child  { order: 1; }
}

/* --- Fejléc --------------------------------------------------------------- */

.csk-header {
	position: sticky;
	top: 0;
	z-index: var(--csk-z-header);
	background-color: color-mix(in srgb, var(--csk-cream) 92%, transparent);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid transparent;
	transition: background-color var(--csk-dur) var(--csk-ease),
	            border-color var(--csk-dur) var(--csk-ease),
	            box-shadow var(--csk-dur) var(--csk-ease);
}

/* Görgetés közben tömörebb, elválasztott fejléc */
.csk-header.is-scrolled {
	background-color: color-mix(in srgb, var(--csk-cream) 97%, transparent);
	border-bottom-color: var(--csk-line);
	box-shadow: var(--csk-shadow-sm);
}

.csk-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--csk-space-md);
	min-height: var(--csk-header-h);
}

.csk-brand {
	display: inline-flex;
	align-items: center;
	gap: var(--csk-space-2xs);
	text-decoration: none;
	flex-shrink: 0;
}

.csk-brand__logo {
	max-height: 46px;
	width: auto;
}

.csk-brand__text {
	font-family: var(--csk-font-display);
	font-size: 1.35rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	line-height: 1;
	color: var(--csk-dark);
}

.csk-brand__text small {
	display: block;
	font-family: var(--csk-font-accent);
	font-style: italic;
	font-size: 0.62em;
	letter-spacing: 0.02em;
	text-transform: none;
	color: var(--csk-gold);
	margin-top: 2px;
}

/* --- Fő navigáció (asztali) ----------------------------------------------- */

.csk-nav {
	display: none;
}

@media (min-width: 1100px) {
	.csk-nav {
		display: flex;
		align-items: center;
		gap: var(--csk-space-md);
	}
}

.csk-nav ul {
	display: flex;
	align-items: center;
	gap: var(--csk-space-md);
	list-style: none;
	margin: 0;
	padding: 0;
}

.csk-nav li {
	margin: 0;
	position: relative;
}

.csk-nav a {
	display: inline-block;
	padding: 0.35em 0;
	font-family: var(--csk-font-ui);
	font-size: var(--csk-fs-small);
	font-weight: 600;
	letter-spacing: 0.02em;
	text-decoration: none;
	color: var(--csk-dark);
}

/* Aláhúzás, ami a hover irányából nő ki */
.csk-nav a::after {
	content: "";
	display: block;
	height: 2px;
	width: 0;
	margin-top: 3px;
	background-color: var(--csk-gold);
	transition: width var(--csk-dur) var(--csk-ease);
}

.csk-nav a:hover::after,
.csk-nav .current-menu-item > a::after,
.csk-nav .current-menu-ancestor > a::after {
	width: 100%;
}

/* Almenü */
.csk-nav .sub-menu {
	position: absolute;
	top: 100%;
	left: calc(-1 * var(--csk-space-sm));
	min-width: 220px;
	display: block;
	flex-direction: column;
	gap: 0;
	padding: var(--csk-space-2xs);
	background: var(--csk-white);
	border: 1px solid var(--csk-line);
	border-radius: var(--csk-radius);
	box-shadow: var(--csk-shadow);
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity var(--csk-dur) var(--csk-ease),
	            transform var(--csk-dur) var(--csk-ease),
	            visibility var(--csk-dur);
}

.csk-nav li:hover > .sub-menu,
.csk-nav li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.csk-nav .sub-menu a {
	display: block;
	padding: 0.5em 0.75em;
	border-radius: var(--csk-radius-sm);
}

.csk-nav .sub-menu a::after { display: none; }
.csk-nav .sub-menu a:hover { background-color: var(--csk-cream); }

/* --- Felső információs sáv -------------------------------------------------
   A fejléc fölött fut: nyitvatartás, cím, telefon, és jobb oldalt a nyelvek.
   Így a nyelvváltó nem az asztalfoglalás gomb mellett szorong, és a sáv olyan
   adatokat mutat, amit egy étteremnél amúgy is elsőként keresnek. A sáv a
   <header> előtt áll, ezért görgetéskor egyszerűen kifut a képből — a ragadós
   fejléc egysorosra húzódik össze magától. */

.csk-topbar {
	background-color: var(--csk-dark, #1B1917);
	color: #CFC7B8;
	font-family: var(--csk-font-ui);
	font-size: 0.8125rem;
	line-height: 1.2;
}

.csk-topbar__inner {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.5rem 0.9rem;
	min-height: 40px;
	padding-block: 0.5rem;
}

.csk-topbar__sep { color: #6E655A; }

.csk-topbar__phone {
	color: #E9DCC0;
	text-decoration: none;
}

.csk-topbar__phone:hover,
.csk-topbar__phone:focus-visible { color: #FFFFFF; }

/* A nyelvsor a sötét sávban: sima szöveg, az aktív arany aláhúzással. */
.csk-topbar .csk-lang {
	display: inline-flex;
	margin-left: auto;
	gap: 1rem;
	font-weight: 500;
	letter-spacing: 0.1em;
}

.csk-topbar .csk-lang a {
	padding: 0.2em 0;
	border-radius: 0;
	border-bottom: 2px solid transparent;
	color: #9A9184;
}

.csk-topbar .csk-lang a:hover,
.csk-topbar .csk-lang a:focus-visible { color: #F5F0E6; }

.csk-topbar .csk-lang .current-lang a,
.csk-topbar .csk-lang a[aria-current="true"] {
	color: #F5F0E6;
	background-color: transparent;
	border-bottom-color: var(--csk-gold, #B8965A);
}

/* Kis képernyőn a sáv lekerül: a nyelvek a mobil fiókban maradnak. */
@media (max-width: 860px) {
	.csk-topbar { display: none; }
}

/* --- Fejléc jobb oldali eszközök ------------------------------------------ */

.csk-header__actions {
	display: flex;
	align-items: center;
	gap: var(--csk-space-2xs);
}

.csk-lang {
	display: none;
	list-style: none;
	margin: 0;
	padding: 0;
	gap: var(--csk-space-3xs);
	font-family: var(--csk-font-ui);
	font-size: var(--csk-fs-micro);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

@media (min-width: 1100px) {
	.csk-lang { display: inline-flex; }
}

.csk-lang li {
	margin: 0;
}

.csk-lang a {
	padding: 0.25em 0.45em;
	border-radius: var(--csk-radius-sm);
	text-decoration: none;
	color: var(--csk-muted);
}

.csk-lang .current-lang a,
.csk-lang a[aria-current="true"] {
	color: var(--csk-dark);
	background-color: color-mix(in srgb, var(--csk-gold) 22%, transparent);
}

/* Az elsődleges CTA végig látszik — étteremnél ez a legfontosabb tett —,
   de kis képernyőn rövidebb felirattal és szűkebb kitöltéssel. */
.csk-header__cta {
	padding-inline: 1.05em;
	letter-spacing: 0.03em;
}

/* Mélyebb arany a gomb alatt, hogy a fehér felirat olvasható maradjon:
   a #B8965A-n a fehér 2,8:1, a #9C7B42-n 4,0:1. A világos arany mindenhol
   máshol változatlan marad. */
/* --- Fejléc: ne tudjon kilógni semmilyen felirattól --- */
.csk-header__inner { min-width: 0; }
.csk-brand { min-width: 0; }
.csk-header__cta { white-space: nowrap; }
.csk-hand { max-width: 100%; }

@media (max-width: 400px) {
	.csk-header__inner { gap: 12px; }
	.csk-header__cta { padding-inline: 14px; }
}

@media (max-width: 380px) {
	.csk-header__inner { gap: 8px; padding-left: 14px; padding-right: 14px; }
	.csk-header__cta { padding-inline: 10px; font-size: 14px; }
	.csk-brand__logo { max-width: 128px; height: auto; }
	.csk-brand__text { font-size: 14px; }
}

/* --- Nyelvváltó: sima szöveg a sötét sávban, a nyitólapon is --- */
.csk-topbar .csk-lang,
body.home .csk-topbar .csk-lang { height: auto; border: 0; background: transparent; }
body.home .csk-topbar .csk-lang a,
body.home .csk-topbar .csk-lang span { color: #9A9184; }
body.home .csk-topbar .csk-lang .current-lang { background-color: transparent; }
body.home .csk-topbar .csk-lang .current-lang a { color: #F5F0E6; }

.csk-header__cta,
.csk-drawer__foot .csk-btn--primary {
	background-color: var(--csk-gold-deep, #9C7B42);
	color: #FFFFFF;
}

.csk-header__cta .csk-cta-long { display: none; }

@media (min-width: 620px) {
	.csk-header__cta {
		padding-inline: 1.6em;
		letter-spacing: 0.06em;
	}

	.csk-header__cta .csk-cta-long  { display: inline; }
	.csk-header__cta .csk-cta-short { display: none; }
}

/* --- Hamburger és mobil fiók ---------------------------------------------- */

.csk-nav-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	padding: 0;
	border: 1px solid var(--csk-line);
	border-radius: var(--csk-radius);
	background: transparent;
	cursor: pointer;
}

@media (min-width: 1100px) {
	.csk-nav-toggle { display: none; }
}

.csk-nav-toggle__bars,
.csk-nav-toggle__bars::before,
.csk-nav-toggle__bars::after {
	display: block;
	width: 20px;
	height: 2px;
	background-color: var(--csk-dark);
	transition: transform var(--csk-dur) var(--csk-ease),
	            opacity var(--csk-dur-fast) var(--csk-ease);
}

.csk-nav-toggle__bars::before,
.csk-nav-toggle__bars::after {
	content: "";
	position: relative;
}

.csk-nav-toggle__bars::before { top: -6px; }
.csk-nav-toggle__bars::after  { top: 4px; }

.csk-nav-toggle[aria-expanded="true"] .csk-nav-toggle__bars {
	background-color: transparent;
}

.csk-nav-toggle[aria-expanded="true"] .csk-nav-toggle__bars::before {
	transform: translateY(6px) rotate(45deg);
}

.csk-nav-toggle[aria-expanded="true"] .csk-nav-toggle__bars::after {
	transform: translateY(-4px) rotate(-45deg);
}

.csk-drawer {
	position: fixed;
	inset: var(--csk-header-h) 0 0;
	z-index: var(--csk-z-drawer);
	display: flex;
	flex-direction: column;
	padding: var(--csk-space-lg) var(--csk-gutter) var(--csk-space-2xl);
	background-color: var(--csk-cream);
	overflow-y: auto;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-8px);
	transition: opacity var(--csk-dur) var(--csk-ease),
	            transform var(--csk-dur) var(--csk-ease),
	            visibility var(--csk-dur);
}

.csk-drawer.is-open {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

@media (min-width: 1100px) {
	.csk-drawer { display: none; }
}

.csk-drawer ul {
	list-style: none;
	margin: 0 0 var(--csk-space-lg);
	padding: 0;
}

.csk-drawer li {
	margin: 0;
	border-bottom: 1px solid var(--csk-line);
}

.csk-drawer a {
	display: block;
	padding: var(--csk-space-sm) 0;
	font-family: var(--csk-font-display);
	font-size: 1.5rem;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	text-decoration: none;
}

.csk-drawer .sub-menu {
	margin: 0 0 var(--csk-space-sm) var(--csk-space-sm);
}

.csk-drawer .sub-menu a {
	font-family: var(--csk-font-body);
	font-size: var(--csk-fs-body);
	text-transform: none;
	letter-spacing: 0;
	padding: var(--csk-space-2xs) 0;
}

.csk-drawer__foot {
	margin-top: auto;
	display: flex;
	flex-direction: column;
	gap: var(--csk-space-sm);
}

/* A nyelvváltó a fejlécben csak asztali méretben látszik — a fiókban viszont
   mindig kell, különben mobilon nem lehet nyelvet váltani. */
.csk-drawer .csk-lang {
	display: inline-flex;
	align-self: flex-start;
	font-size: var(--csk-fs-small);
}

/* Ha nyitva a fiók, a háttér ne görögjön. */
body.csk-nav-open {
	overflow: hidden;
}

/* --- Lábléc --------------------------------------------------------------- */

.csk-footer {
	background-color: var(--csk-dark);
	color: var(--csk-text-invert);
	padding-block: var(--csk-space-2xl) var(--csk-space-lg);
}

.csk-footer a { color: inherit; }
.csk-footer a:hover { color: var(--csk-gold-soft); }

.csk-footer__grid {
	display: grid;
	gap: var(--csk-space-xl);
	grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
	padding-bottom: var(--csk-space-xl);
	border-bottom: 1px solid var(--csk-line-invert);
}

.csk-footer__brand {
	grid-column: 1 / -1;
}

@media (min-width: 900px) {
	.csk-footer__brand {
		grid-column: auto;
		max-width: 320px;
	}
}

.csk-footer h2,
.csk-footer h3 {
	font-family: var(--csk-font-ui);
	font-size: var(--csk-fs-micro);
	font-weight: 600;
	letter-spacing: var(--csk-ls-caps);
	text-transform: uppercase;
	color: var(--csk-gold-soft);
	margin-bottom: var(--csk-space-sm);
}

.csk-footer ul {
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: var(--csk-fs-small);
}

.csk-footer li + li { margin-top: var(--csk-space-2xs); }

.csk-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--csk-space-sm);
	padding-top: var(--csk-space-md);
	font-size: var(--csk-fs-micro);
	color: var(--csk-muted-invert);
}

.csk-social {
	display: flex;
	gap: var(--csk-space-2xs);
	list-style: none;
	margin: var(--csk-space-sm) 0 0;
	padding: 0;
}

.csk-social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: 1px solid var(--csk-line-invert);
	border-radius: 50%;
	transition: background-color var(--csk-dur) var(--csk-ease),
	            border-color var(--csk-dur) var(--csk-ease),
	            color var(--csk-dur) var(--csk-ease);
}

.csk-social a:hover {
	background-color: var(--csk-gold);
	border-color: var(--csk-gold);
	color: var(--csk-dark);
}

.csk-social svg {
	width: 18px;
	height: 18px;
	fill: currentColor;
}