/*
 * atvesmir — header + primary navigation (block 02)
 * Sticky brand bar, SVG wordmark, dropdown nav, accent pill CTA, header theme
 * toggle and mobile hamburger panel. Values are 1:1 with the design prototype
 * (tests/design/Astronomický tábor.dc.html, header lines 56–173). Colours come
 * from the design tokens (tokens.css) so the whole header follows light/dark.
 */

/* ---------------------------------------------------------------- *
 * 1. Sticky brand bar
 * ---------------------------------------------------------------- */
.at-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: color-mix(in srgb, var(--bg) 88%, transparent);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	border-bottom: 1px solid var(--line);
}

/* Solid fallback where backdrop-filter is unsupported (avoids unreadable text). */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
	.at-header { background: var(--bg); }
}

.at-header__bar {
	max-width: var(--at-content);
	margin-inline: auto;
	padding: 14px var(--at-gutter);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
}

/* ---------------------------------------------------------------- *
 * 2. Brand / logo
 * ---------------------------------------------------------------- */
.at-header__brand {
	display: flex;
	align-items: center;
	flex-shrink: 0;
	color: var(--ink);
}
.at-header__logo {
	height: clamp(48px, 9vw, 62px);
	width: auto;
	display: block;
}
.at-header__brand:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 4px;
	border-radius: 4px;
}

/* ---------------------------------------------------------------- *
 * 3. Desktop navigation
 * ---------------------------------------------------------------- */
.at-nav {
	display: flex;
	align-items: center;
	gap: clamp(14px, 2vw, 26px);
	font-size: 16px;
	font-family: var(--font-serif);
}
.at-nav__list {
	display: flex;
	align-items: center;
	gap: clamp(14px, 2vw, 26px);
	margin: 0;
	padding: 0;
	list-style: none;
}
.at-nav__item {
	position: relative;
	margin: 0;
	padding: 0;
}
.at-nav__item.at-haschild { padding: 6px 0; }

.at-nav__link {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	line-height: 1.65;
}
.at-nav__caret {
	font-size: 9px;
	opacity: .6;
	transition: transform .16s ease;
}
.at-haschild:hover .at-nav__caret,
.at-haschild:focus-within .at-nav__caret {
	transform: translateY(1px);
}
.at-nav__link:focus-visible,
.at-drop__link:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 3px;
	border-radius: 4px;
	color: var(--ink);
}

/* CTA pill (Přihláška) */
.at-nav__cta {
	display: inline-block;
	background: var(--accent);
	color: var(--at-on-accent);
	padding: 9px 18px;
	border-radius: var(--at-radius-pill);
	font-size: 15px;
	font-weight: 500;
	line-height: 1.65;
}
.at-nav__cta:hover { background: var(--accent2); color: var(--at-on-accent); }
.at-nav__cta:focus-visible {
	outline: 2px solid var(--ink);
	outline-offset: 2px;
}

/* ---------------------------------------------------------------- *
 * 4. Dropdown panels
 * ---------------------------------------------------------------- */
.at-drop {
	position: absolute;
	top: 100%;
	left: -14px;
	padding-top: 10px;
	z-index: 10;
}
.at-drop__panel {
	display: block;
	background: var(--bg2);
	border: 1px solid var(--line);
	border-radius: 12px;
	padding: 8px;
	min-width: 220px;
	max-width: min(340px, 86vw);
	box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .4);
}
.at-drop__list,
.at-drop__sublist {
	margin: 0;
	padding: 0;
	list-style: none;
	/* Expand fully — no inner scrollbar. The "O táboře" submenu (10 items) and the
	 * other standard dropdowns now reveal every item at once. The long year list
	 * (Archiv) keeps its own scroll via .at-drop__panel--archive below. */
	max-height: none;
	overflow: visible;
}
.at-drop__item { margin: 0; }
.at-drop__link {
	display: block;
	padding: 9px 12px;
	border-radius: 8px;
	font-size: 15px;
	color: var(--ink2);
	line-height: 1.65;
}

/* ---- Year / archive dropdown variants (Blog, Archiv) ---------------- *
 * Modifiers on .at-drop__panel: a serif "view all" head, a hairline
 * divider, then either a 2-column mono year grid (Blog) or scrolling rows
 * of a mono accent year + serif title (Archiv). 1:1 with the prototype
 * (header lines 99–131): years panel = 268px/12px pad, archive = 308px/8px
 * pad with max-height 360 + scroll. */
.at-drop__panel--years {
	width: 268px;
	min-width: 0;
	max-width: 86vw;
	padding: 12px;
}
.at-drop__panel--archive {
	width: 308px;
	min-width: 0;
	max-width: 86vw;
	max-height: 360px;
	overflow: auto;
}

.at-drop__head {
	display: block;
	padding: 9px 12px;
	border-radius: 8px;
	font-size: 15px;
	color: var(--ink2);
	line-height: 1.65;
}
.at-drop__div {
	display: block;
	height: 1px;
	background: var(--line);
	margin: 7px 4px;
}

.at-drop__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2px;
}
.at-drop__year {
	display: block;
	padding: 8px 12px;
	border-radius: 8px;
	font-family: var(--font-mono);
	font-size: 13px;
	color: var(--ink2);
}

.at-drop__rows { display: block; }
.at-drop__row {
	display: flex;
	align-items: baseline;
	gap: 10px;
	padding: 8px 12px;
	border-radius: 8px;
	color: var(--ink2);
}
.at-drop__rowyear {
	flex-shrink: 0;
	min-width: 38px;
	font-family: var(--font-mono);
	font-size: 12px;
	color: var(--accent);
}
.at-drop__rowtitle {
	flex: 1;
	font-size: 14px;
	line-height: 1.3;
}

/* Right-align the dropdowns closest to the viewport edge (e.g. Archiv) so the
 * panel opens inward instead of overflowing. The archive panel is always
 * right-anchored to match the prototype (right:-14px). */
.at-nav__list > .at-nav__item:nth-last-child(-n+3).at-haschild > .at-drop {
	left: auto;
	right: -14px;
}
.at-drop:has(.at-drop__panel--archive) {
	left: auto;
	right: -14px;
}

/* ---------------------------------------------------------------- *
 * 5. Round icon toggle (theme switch)
 * ---------------------------------------------------------------- */
.at-toggle {
	cursor: pointer;
	background: none;
	border: 1px solid var(--line2);
	color: var(--ink2);
	/* Reset the refur theme's global button padding (11px 30px) which, under
	 * box-sizing:border-box, was inflating the 38px circle into a ~62px oval. */
	padding: 0;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	font-size: 15px;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	transition: color .18s ease, border-color .18s ease;
}
.at-toggle:hover { color: var(--ink); border-color: var(--accent); }
.at-toggle:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}
.at-toggle--mobile { width: 40px; height: 40px; font-size: 16px; }

/* ---------------------------------------------------------------- *
 * 6. Mobile cluster (hamburger) — hidden on desktop
 * ---------------------------------------------------------------- */
.at-header__mobile {
	display: none;
	align-items: center;
	gap: 10px;
}
.at-burger {
	cursor: pointer;
	background: var(--ink);
	color: var(--bg);
	border: none;
	padding: 0;
	width: 44px;
	height: 44px;
	border-radius: 11px;
	font-size: 18px;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
.at-burger:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}

/* ---------------------------------------------------------------- *
 * 7. Mobile slide-down panel
 * ---------------------------------------------------------------- */
.at-mnav {
	border-top: 1px solid var(--line);
	background: var(--bg2);
	padding: 10px var(--at-gutter) 22px;
	font-size: 19px;
	font-family: var(--font-serif);
}
.at-mnav[hidden] { display: none; }
.at-mnav__list {
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.at-mnav__link,
.at-mnav__summary {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 13px 4px;
	color: var(--ink);
}
/* The hairline divider sits on the link / on the <details> wrapper — never on
 * the summary itself (matches the prototype, avoids a double border + keeps the
 * collapsed disclosure the same height as a plain row). */
.at-mnav__link { border-bottom: 1px solid var(--line); }
.at-mnav__details { border-bottom: 1px solid var(--line); }
.at-mnav__summary {
	cursor: pointer;
	list-style: none;
}
.at-mnav__summary::-webkit-details-marker { display: none; }
.at-mnav__plus {
	color: var(--accent);
	font-size: 1.3rem;
}

.at-mnav__sub {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding: 4px 4px 16px;
}
.at-mnav__sublink {
	padding: 8px 14px;
	border: 1px solid var(--line2);
	border-radius: var(--at-radius-pill);
	font-family: var(--font-mono);
	font-size: 13px;
	color: var(--ink2);
}

.at-mnav__cta {
	display: block;
	margin-top: 14px;
	background: var(--accent);
	color: var(--at-on-accent);
	padding: 15px;
	border-radius: 12px;
	text-align: center;
	font-weight: 500;
}
.at-mnav__cta:hover { background: var(--accent2); color: var(--at-on-accent); }

.at-mnav__link:focus-visible,
.at-mnav__sublink:focus-visible,
.at-mnav__cta:focus-visible,
.at-mnav__summary:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}

/* ---------------------------------------------------------------- *
 * 8. Breakpoint: < 900px → mobile (matches prototype isMobile = vw < 900)
 * ---------------------------------------------------------------- */
@media (max-width: 899px) {
	.at-nav { display: none; }
	.at-header__mobile { display: flex; }
}
@media (min-width: 900px) {
	.at-mnav { display: none !important; }
}

/* ---------------------------------------------------------------- *
 * 9. Link state pins (kill refur's a:visited / a:focus / a:active leak)
 * Every header anchor keeps its own colour in the visited / focus / active
 * states (the prototype never recolours them). class+pseudo = (0,2,0) beats
 * refur's a:visited/a:focus/a:active (0,1,1). :focus-visible rules above keep
 * the keyboard outline (they're later + equal specificity). The top-level
 * nav links carry `.at-navlink`, pinned in tokens.css.
 * ---------------------------------------------------------------- */
.at-drop__link:visited, .at-drop__link:focus, .at-drop__link:active,
.at-drop__head:visited, .at-drop__head:focus, .at-drop__head:active,
.at-drop__year:visited, .at-drop__year:focus, .at-drop__year:active,
.at-drop__row:visited,  .at-drop__row:focus,  .at-drop__row:active,
.at-mnav__sublink:visited, .at-mnav__sublink:focus, .at-mnav__sublink:active { color: var(--ink2); }

.at-header__brand:visited, .at-header__brand:focus, .at-header__brand:active,
.at-mnav__link:visited, .at-mnav__link:focus, .at-mnav__link:active { color: var(--ink); }

.at-nav__cta:visited, .at-nav__cta:focus, .at-nav__cta:active,
.at-mnav__cta:visited, .at-mnav__cta:focus, .at-mnav__cta:active { color: var(--at-on-accent); }

.at-drop__rowyear:visited, .at-drop__rowyear:focus, .at-drop__rowyear:active { color: var(--accent); }

/* Lock body scroll while the mobile panel is open. */
body.at-nav-open { overflow: hidden; }