/* =================================================================
 * studenten-frankfurt.de — theme stylesheet
 * -----------------------------------------------------------------
 * Brand palette is taken from the logo (pink → cyan gradient on
 * black). The site keeps a light content card on a muted page
 * background, with the brand colors used for accents (hero band,
 * active nav, links, product prices, gradient borders).
 *
 * Structure:
 *   1. Design tokens (CSS custom properties)
 *   2. Self-hosted Work Sans (no Google Fonts → no third-party
 *      request → no GDPR cookie banner for fonts)
 *   3. Base elements + UIkit overrides
 *   4. Layout: page wrapper, content card, sections
 *   5. Banner + hero band (dark, gradient accent)
 *   6. Navigation (primary + mobile toggle + offcanvas)
 *   7. Content typography (prose)
 *   8. Markdown callout (markdown-callout plugin)
 *   9. Product cards (katalog plugin)
 *  10. Contact form
 *  11. Footer
 *  12. Cookie modal
 *  13. css.gg icon helpers (used by _tpls.php pagination + alerts)
 * ================================================================= */


/* 1 — Design tokens ------------------------------------------------ */

:root {
	/* Brand palette — sampled from the logo */
	--brand-pink:        #e91e63;
	--brand-pink-soft:   #ec407a;
	--brand-cyan:        #00bcd4;
	--brand-cyan-soft:   #4dd0e1;
	--brand-purple:      #7c4dff;  /* gradient midpoint */
	--brand-gradient:    linear-gradient(90deg, var(--brand-pink) 0%, var(--brand-purple) 50%, var(--brand-cyan) 100%);
	--brand-gradient-diag: linear-gradient(135deg, var(--brand-pink) 0%, var(--brand-cyan) 100%);

	/* Surfaces */
	--surface-page:      #f4f5f7;     /* page background outside the content card */
	--surface-card:      #ffffff;     /* main content card */
	--surface-dark:      #0d0d0f;     /* banner / hero / nav strip */
	--surface-dark-2:    #18181c;     /* slightly lifted dark (footer, secondary nav) */
	--surface-muted:     #f8f9fb;     /* very subtle bg (product card alt, etc.) */

	/* Text */
	--text:              #1a1a22;
	--text-muted:        #5b5f6b;
	--text-dim:          #8a8f9c;
	--text-on-dark:      #ffffff;
	--text-on-dark-muted: rgba(255, 255, 255, 0.72);

	/* Borders */
	--border:            #e6e8ee;
	--border-strong:     #cbd0d8;
	--border-on-dark:    rgba(255, 255, 255, 0.12);

	/* Links */
	--link:              var(--brand-pink);
	--link-hover:        var(--brand-cyan);

	/* Radii + shadows */
	--radius-sm:         6px;
	--radius:            10px;
	--radius-lg:         18px;
	--shadow-card:       0 1px 2px rgba(0, 0, 0, 0.04), 0 8px 30px rgba(20, 20, 30, 0.08);
	--shadow-card-hover: 0 4px 8px rgba(0, 0, 0, 0.06), 0 14px 40px rgba(20, 20, 30, 0.12);

	/* Type scale */
	--font-sans:         'Work Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	--font-size-base:    16px;
	--font-size-sm:      14px;
	--font-size-lg:      18px;
	--leading:           1.6;
	--leading-tight:     1.25;

	/* Spacing rhythm */
	--space-1:           4px;
	--space-2:           8px;
	--space-3:           12px;
	--space-4:           16px;
	--space-5:           24px;
	--space-6:           32px;
	--space-7:           48px;
	--space-8:           64px;
}


/* 2 — Self-hosted Work Sans --------------------------------------- */

@font-face {
	font-family: 'Work Sans';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/work-sans-v18-latin-regular.woff2') format('woff2'),
		 url('../fonts/work-sans-v18-latin-regular.woff')  format('woff');
}
@font-face {
	font-family: 'Work Sans';
	font-style: italic;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/work-sans-v18-latin-italic.woff2') format('woff2'),
		 url('../fonts/work-sans-v18-latin-italic.woff')  format('woff');
}
@font-face {
	font-family: 'Work Sans';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('../fonts/work-sans-v18-latin-600.woff2') format('woff2'),
		 url('../fonts/work-sans-v18-latin-600.woff')  format('woff');
}
@font-face {
	font-family: 'Work Sans';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('../fonts/work-sans-v18-latin-700.woff2') format('woff2'),
		 url('../fonts/work-sans-v18-latin-700.woff')  format('woff');
}
@font-face {
	font-family: 'Work Sans';
	font-style: normal;
	font-weight: 900;
	font-display: swap;
	src: url('../fonts/work-sans-v18-latin-900.woff2') format('woff2'),
		 url('../fonts/work-sans-v18-latin-900.woff')  format('woff');
}


/* 3 — Base elements + UIkit overrides ----------------------------- */

html {
	scroll-behavior: smooth;
}
body {
	font-family: var(--font-sans);
	font-size:   var(--font-size-base);
	line-height: var(--leading);
	color:       var(--text);
	background:  var(--surface-page);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* UIkit's .uk-background-muted has a different grey — align it with
 * our surface-page token so the body stays consistent. */
.uk-background-muted { background: var(--surface-page) !important; }

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-sans);
	color:       var(--text);
	font-weight: 700;
	line-height: var(--leading-tight);
	letter-spacing: -0.01em;
	margin:      0 0 var(--space-4);
}
h1 { font-size: clamp(1.9rem, 4vw, 2.6rem); font-weight: 900; }
h2 { font-size: clamp(1.5rem, 2.8vw, 2.0rem); }
h3 { font-size: clamp(1.2rem, 2.2vw, 1.5rem); }
h4 { font-size: 1.15rem; }

p { margin: 0 0 var(--space-4); }

a {
	color: var(--link);
	text-decoration: none;
	transition: color 0.15s ease;
}
a:hover { color: var(--link-hover); }

strong, b { font-weight: 700; }

/* Selection: brand pink */
::selection {
	background: var(--brand-pink);
	color:      var(--text-on-dark);
}


/* 4 — Layout ------------------------------------------------------ */

main { display: block; }

/* The site-wide content card sits on the muted page background and
 * caps at 1020px (same constraint default.php had inline). The card
 * itself is the white surface; sections inside flow edge-to-edge. */
.uk-container-small { max-width: 1020px; }

.uk-card.uk-card-default {
	background:    var(--surface-card);
	border-radius: var(--radius-lg);
	box-shadow:    var(--shadow-card);
	overflow:      hidden;       /* clip the banner image to the radius */
}


/* 5 — Banner + hero band ----------------------------------------- */

/* Banner section sits flush at the top of the content card. The image
 * stays at its natural ratio; the logo overlay lives on it. */
.uk-cover-container {
	position: relative;
	background: var(--surface-dark);
}
.uk-cover-container > img {
	display: block;
	width:   100%;
	height:  auto;
	/* Slight darkening + brand-tinted overlay so the warm party-photo
	 * banner integrates with the dark/brand palette. */
	filter: brightness(0.78) saturate(1.05);
}
/* Subtle gradient veil from the brand colours across the bottom edge
 * of the banner — visually ties the photo to the dark nav strip
 * underneath. */
.uk-cover-container::after {
	content: '';
	position: absolute;
	inset: auto 0 0 0;
	height: 35%;
	background: linear-gradient(180deg, transparent 0%, rgba(13,13,15,0.55) 60%, rgba(13,13,15,0.85) 100%);
	pointer-events: none;
}

/* Logo overlay. The logo.png ships with a solid black background baked
 * in; `mix-blend-mode: screen` dissolves that black into the banner
 * photo behind it (screen of #000 = no change → the black vanishes),
 * while the bright logo artwork (white wordmark + pink/cyan mic icon)
 * stays. Result: the logo floats on the banner with no black box. */
.uk-logo-overlay.uk-overlay-default {
	background: transparent !important;
	padding: clamp(6px, 1vw, 12px) clamp(8px, 1.5vw, 16px);
	z-index: 2;
}
.uk-logo-overlay .uk-logo img {
	display: block;
	max-width: 190px;
	width: 100%;
	height: auto;
	mix-blend-mode: screen;
	/* Lighter single glow — just enough to lift the wordmark off a
	 * busy banner area without reading as a halo. */
	filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.45));
}
@media (max-width: 639px) {
	.uk-logo-overlay .uk-logo img { max-width: 140px; }
}

/* Hero band underneath the banner. Pulls in the brand gradient as
 * a thin accent line above. */
.hero-band {
	background: var(--surface-card);
	text-align: center;
	padding: var(--space-5) var(--space-4);
	border-top: 3px solid transparent;
	background-image:
		linear-gradient(var(--surface-card), var(--surface-card)),
		var(--brand-gradient);
	background-origin: border-box;
	background-clip:   padding-box, border-box;
}
.hero-band h1 {
	background: var(--brand-gradient-diag);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	margin: 0 auto var(--space-2);
	max-width: 720px;
}
.hero-band .hero-subtitle {
	color: var(--text-muted);
	font-size: var(--font-size-lg);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	margin: 0;
}


/* 6 — Navigation -------------------------------------------------- */

/* Primary nav strip — sits below banner. Dark surface; the brand
 * accent is reserved for the per-link underline on hover/active. The
 * bottom of the strip stays clean (no gradient bar) — the body of
 * the content area follows directly. Slimmer than UIkit's default:
 * the inner wrapper's vertical padding is removed and the link
 * padding does the (reduced) height. */
.uk-navbar.uk-background-secondary {
	background: var(--surface-dark) !important;
	padding: 0 var(--space-5) !important;
	min-height: 0 !important;
}
.uk-navbar.uk-background-secondary .uk-navbar-center,
.uk-navbar.uk-background-secondary .uk-navbar-right {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

.uk-navbar-nav > li > a {
	color: var(--text-on-dark-muted) !important;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: var(--font-size-sm);
	font-weight: 600;
	padding: 11px 15px !important;
	min-height: 0 !important;
	position: relative;
	transition: color 0.15s ease;
}
.uk-navbar-nav > li > a:hover {
	color: var(--text-on-dark) !important;
}
.uk-navbar-nav > li > a::after {
	content: '';
	position: absolute;
	left: 15px;
	right: 15px;
	bottom: 6px;
	height: 2px;
	background: var(--brand-gradient-diag);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.2s ease;
}
.uk-navbar-nav > li > a:hover::after,
.uk-navbar-nav > li.uk-active > a::after {
	transform: scaleX(1);
}
.uk-navbar-nav > li.uk-active > a {
	color: var(--text-on-dark) !important;
}

/* Mobile menu button — visible but understated: a slim outlined
 * "Menü" pill (burger + label) on the dark bar. Clearly tappable
 * without the loud gradient fill; the cyan burger bars carry the
 * only brand accent. */
.mobile-menu-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 6px 0;
	padding: 7px 16px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.22);
	color: var(--text-on-dark) !important;
	font-weight: 600;
	font-size: 13px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background 0.15s ease, border-color 0.15s ease;
	min-height: 38px;
}
.mobile-menu-btn:hover,
.mobile-menu-btn:focus {
	color: var(--text-on-dark) !important;
	background: rgba(255, 255, 255, 0.1);
	border-color: var(--brand-cyan);
}
/* Burger bars drawn in pure CSS — crisp at any DPR. Cyan accent. */
.mobile-menu-btn .burger {
	position: relative;
	width: 17px;
	height: 12px;
	flex: 0 0 auto;
}
.mobile-menu-btn .burger::before,
.mobile-menu-btn .burger::after,
.mobile-menu-btn .burger span {
	content: '';
	position: absolute;
	left: 0;
	width: 100%;
	height: 2px;
	border-radius: 2px;
	background: var(--brand-cyan);
}
.mobile-menu-btn .burger::before { top: 0; }
.mobile-menu-btn .burger span    { top: 5px; }
.mobile-menu-btn .burger::after  { top: 10px; }

/* Offcanvas drawer (mobile nav) */
.uk-offcanvas-bar {
	background: var(--surface-dark) !important;
	color: var(--text-on-dark);
	padding-top: var(--space-7);
}
.uk-offcanvas-bar .uk-nav > li > a {
	color: var(--text-on-dark-muted);
	font-weight: 600;
	font-size: var(--font-size-lg);
	padding: var(--space-3) 0;
	transition: color 0.15s ease;
}
.uk-offcanvas-bar .uk-nav > li > a:hover,
.uk-offcanvas-bar .uk-nav > li.uk-active > a {
	color: var(--text-on-dark);
}


/* 7 — Content typography ------------------------------------------ */

.content {
	padding: var(--space-6) var(--space-5);
}
@media (min-width: 960px) {
	.content { padding: var(--space-7) var(--space-7); }
}

.content > h2:first-of-type {
	margin-top: 0;
	color: var(--text);
}

.content ul, .content ol {
	padding-left: 1.2em;
	margin: 0 0 var(--space-4);
}
.content li { margin: var(--space-1) 0; }

.content img {
	max-width: 100%;
	height: auto;
	border-radius: var(--radius);
	margin: var(--space-4) 0;
}

.content a {
	border-bottom: 1px solid transparent;
	transition: color 0.15s ease, border-color 0.15s ease;
}
.content a:hover {
	border-bottom-color: currentColor;
}


/* 8 — Markdown callout (markdown-callout plugin) ------------------ */

.callout {
	background: var(--surface-muted);
	border-left: 4px solid var(--brand-cyan);
	border-radius: var(--radius);
	padding: var(--space-5);
	margin: var(--space-5) 0;
}
.callout > :last-child { margin-bottom: 0; }


/* 8b — FAQ accordion (catalog pages, _faq.php) -------------------- */

.faq-section {
	margin-top: var(--space-7);
}
.faq-heading {
	margin-bottom: var(--space-4);
}
.faq-accordion {
	list-style: none;
	margin: 0;
	padding: 0;
}
.faq-accordion > li {
	border: 1px solid var(--border);
	border-radius: var(--radius);
	margin-bottom: var(--space-3);
	overflow: hidden;
	background: var(--surface-card);
}
.faq-accordion .uk-accordion-title {
	display: block;
	font-size: 1.05rem;
	font-weight: 600;
	color: var(--text);
	padding: var(--space-4) var(--space-5);
	padding-right: 2.6rem;   /* room for the chevron */
	position: relative;
	text-decoration: none;
	transition: color 0.15s ease, background 0.15s ease;
}
.faq-accordion .uk-accordion-title:hover {
	color: var(--brand-pink);
	background: var(--surface-muted);
}
/* Chevron marker drawn in CSS; rotates when the item is open. */
.faq-accordion .uk-accordion-title::after {
	content: '';
	position: absolute;
	right: var(--space-5);
	top: 50%;
	width: 9px;
	height: 9px;
	border-right: 2px solid var(--brand-cyan);
	border-bottom: 2px solid var(--brand-cyan);
	transform: translateY(-65%) rotate(45deg);
	transition: transform 0.2s ease;
}
.faq-accordion > .uk-open .uk-accordion-title::after {
	transform: translateY(-35%) rotate(-135deg);
}
.faq-accordion > .uk-open .uk-accordion-title {
	color: var(--brand-pink);
}
.faq-accordion .uk-accordion-content {
	margin: 0;
	padding: 0 var(--space-5) var(--space-4);
	color: var(--text-muted);
	line-height: var(--leading);
}
.faq-accordion .uk-accordion-content > :last-child { margin-bottom: 0; }


/* 9 — Product cards (katalog plugin) ------------------------------ */

.product-card.uk-card {
	border: 1px solid var(--border);
	border-radius: var(--radius);
	box-shadow: none;
	padding: var(--space-5);
	background: var(--surface-card);
	transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
	/* Hover affordance restored — every card now carries an explicit
	 * "Reservierung anfragen" CTA, so a subtle lift + brand-pink border
	 * signals "there's an action here" rather than miseducating
	 * visitors into clicking nothing. */
}
.product-card.uk-card:hover {
	transform: translateY(-2px);
	box-shadow: var(--shadow-card-hover);
	border-color: var(--brand-pink);
}

.product-card img {
	max-width: 100%;
	height: auto;
	border-radius: var(--radius-sm);
}
.product-card .uk-card-title {
	color: var(--text);
	font-weight: 700;
	margin-bottom: var(--space-3);
}
.product-price {
	font-size: 1.35em;
	font-weight: 700;
	margin: 0 0 var(--space-1);
	background: var(--brand-gradient-diag);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.product-price strong {
	background: var(--brand-gradient-diag);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.product-deposit {
	color: var(--text-muted);
	margin: 0 0 var(--space-3);
	font-size: var(--font-size-sm);
}
.product-deposit em { font-style: normal; font-weight: 600; }

.product-equipment {
	padding-left: 1.2em;
	margin: 0 0 var(--space-3);
	color: var(--text);
}
.product-equipment li { margin: 2px 0; }

/* "Reservierung anfragen" link rendered as a brand-gradient button
 * inside each product card. Hover lifts subtly so it reads as an
 * interactive control (unlike the card itself, which stays static). */
.product-reserve {
	margin: var(--space-3) 0 0;
}
.product-reserve-btn {
	display: inline-block;
	background: var(--brand-gradient-diag);
	color: var(--text-on-dark) !important;
	border: none;
	border-radius: var(--radius);
	padding: var(--space-3) var(--space-5);
	font-weight: 700;
	letter-spacing: 0.03em;
	font-size: var(--font-size-sm);
	text-transform: uppercase;
	text-decoration: none !important;
	box-shadow: 0 3px 10px rgba(233, 30, 99, 0.22);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.product-reserve-btn:hover {
	transform: translateY(-1px);
	box-shadow: 0 6px 18px rgba(0, 188, 212, 0.32);
	color: var(--text-on-dark) !important;
}


/* 10 — Contact form ----------------------------------------------- */

/* When jumping in via #reservierung anchor (from product card CTA),
 * leave a bit of breathing room above so the block doesn't slam
 * against the viewport edge after the smooth-scroll lands. */
.reservation-block { scroll-margin-top: var(--space-5); }

/* Cost-free reservation note above the form. Brand-cyan left border
 * matches the markdown-callout treatment so it reads as an
 * informational aside rather than an alert. */
.reservation-note {
	background: var(--surface-muted);
	border-left: 4px solid var(--brand-cyan);
	border-radius: var(--radius);
	padding: var(--space-4) var(--space-5);
	margin: 0 0 var(--space-5);
	color: var(--text);
	font-size: var(--font-size-base);
}
.reservation-note strong { color: var(--text); }

.scriptor-forms .uk-input,
.scriptor-forms .uk-textarea,
.scriptor-forms .uk-select {
	border-radius: var(--radius);
	border: 1px solid var(--border);
	padding: var(--space-3) var(--space-4);
	background-color: var(--surface-card);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
	font-family: var(--font-sans);
	width: 100%;
	box-sizing: border-box;
}
/* Product multi-select on the Kontakt page: a checkbox grid, not
 * a <select multiple>. Reason: <select multiple> on mobile needs
 * ctrl/cmd+click which doesn't exist on touch, and option labels
 * get clipped in the field. The checklist scales from one column
 * on phones to two on wider viewports. */
.product-checklist {
	list-style: none;
	padding: 0;
	margin: var(--space-2) 0 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-2) var(--space-4);
	background: var(--surface-card);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: var(--space-3) var(--space-4);
}
@media (min-width: 640px) {
	.product-checklist { grid-template-columns: 1fr 1fr; }
}
.product-checklist li { margin: 0; }
.product-checkitem {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	padding: var(--space-2) 0;
	cursor: pointer;
	font-weight: 400;
	color: var(--text);
	line-height: 1.35;
}
.product-checkitem input[type="checkbox"] {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	margin: 0;
	accent-color: var(--brand-pink);
}
.product-checkitem:hover { color: var(--brand-pink); }
.scriptor-forms .uk-input:focus,
.scriptor-forms .uk-textarea:focus,
.scriptor-forms .uk-select:focus {
	border-color: var(--brand-cyan);
	box-shadow: 0 0 0 3px rgba(0, 188, 212, 0.15);
	outline: none;
}
.scriptor-forms .uk-form-label {
	font-weight: 600;
	color: var(--text);
	margin-bottom: var(--space-1);
	display: block;
}
.scriptor-forms .form-required {
	color: var(--brand-pink);
	font-weight: 700;
}
.scriptor-forms .form-optional {
	color: var(--text-muted);
	font-weight: 400;
	font-size: 0.85em;
}
.scriptor-forms .form-required-hint {
	color: var(--text-muted);
	font-size: var(--font-size-sm);
	margin: var(--space-2) 0 0;
}

.uk-button.uk-button-primary,
.scriptor-forms button[type="submit"] {
	background: var(--brand-gradient-diag);
	color: var(--text-on-dark);
	border: none;
	border-radius: var(--radius);
	padding: var(--space-3) var(--space-6);
	font-weight: 700;
	letter-spacing: 0.04em;
	cursor: pointer;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
	box-shadow: 0 4px 14px rgba(233, 30, 99, 0.25);
}
.uk-button.uk-button-primary:hover,
.scriptor-forms button[type="submit"]:hover {
	transform: translateY(-1px);
	box-shadow: 0 6px 20px rgba(0, 188, 212, 0.35);
}


/* 11 — Footer ----------------------------------------------------- */

.uk-card > footer {
	background: var(--surface-dark);
	color: var(--text-on-dark-muted);
	border-top: 3px solid transparent;
	background-image:
		linear-gradient(var(--surface-dark), var(--surface-dark)),
		var(--brand-gradient);
	background-origin: border-box;
	background-clip:   padding-box, border-box;
	padding: var(--space-6) var(--space-5);
	margin-top: var(--space-6);
}
.uk-card > footer a {
	color: var(--text-on-dark-muted);
	border-bottom: 1px solid transparent;
	transition: color 0.15s ease, border-color 0.15s ease;
}
.uk-card > footer a:hover,
.uk-card > footer a.uk-active {
	color: var(--text-on-dark);
	border-bottom-color: var(--brand-cyan);
}


/* 12 — Cookie modal (id #cookie-message) -------------------------- */

#cookie-message {
	position: fixed;
	left: var(--space-4);
	right: var(--space-4);
	bottom: var(--space-4);
	max-width: 720px;
	margin: 0 auto;
	background: var(--surface-dark-2);
	color: var(--text-on-dark);
	border-radius: var(--radius);
	padding: var(--space-5);
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
	z-index: 1000;
	border-top: 3px solid transparent;
	background-image:
		linear-gradient(var(--surface-dark-2), var(--surface-dark-2)),
		var(--brand-gradient);
	background-origin: border-box;
	background-clip:   padding-box, border-box;
}
#cookie-message .container { max-width: none; padding: 0; }
#cookie-message a.button {
	display: inline-block;
	background: var(--brand-gradient-diag);
	color: var(--text-on-dark);
	padding: var(--space-2) var(--space-5);
	border-radius: var(--radius);
	font-weight: 700;
	margin: var(--space-2) var(--space-1);
	transition: transform 0.15s ease;
}
#cookie-message a.button:hover { transform: translateY(-1px); }
#cookie-message .subnav {
	list-style: none;
	padding: 0;
	margin: var(--space-3) 0 0;
	font-size: var(--font-size-sm);
}
#cookie-message .subnav li { display: inline; margin-right: var(--space-3); }
#cookie-message .subnav a {
	color: var(--text-on-dark-muted);
}
#cookie-message .subnav a:hover {
	color: var(--brand-cyan-soft);
}


/* 13 — css.gg icon helpers (legacy, used by _tpls.php) ------------ */
/* Kept verbatim from previous styles.css so pagination chevrons and
 * alert close still work. These are tiny CSS-only icons. */

.gg-menu {
	box-sizing: border-box;
	position: relative;
	display: block;
	transform: scale(var(--ggs, 1));
	width: 20px;
	height: 16px;
	border-top: 2px solid;
	border-bottom: 2px solid
}
.gg-menu, .gg-menu::after, .gg-menu::before {
	display: block;
	box-sizing: border-box;
	position: relative;
	width: 20px;
	height: 2px;
	background: currentColor;
	border-radius: 3px
}
.gg-menu::after, .gg-menu::before {
	content: "";
	position: absolute;
	top: 5px
}
.gg-menu::after { top: -5px }

.gg-close {
	box-sizing: border-box;
	position: relative;
	display: block;
	transform: scale(var(--ggs, 1));
	width: 22px;
	height: 22px;
	border: 2px solid transparent;
	border-radius: 40px
}
.gg-close::after, .gg-close::before {
	content: "";
	display: block;
	box-sizing: border-box;
	position: absolute;
	width: 16px;
	height: 2px;
	background: currentColor;
	transform: rotate(45deg);
	border-radius: 5px;
	top: 8px;
	left: 1px
}
.gg-close::after { transform: rotate(-45deg) }

.gg-chevron-right {
	box-sizing: border-box;
	position: relative;
	display: block;
	transform: scale(var(--ggs, 1));
	width: 22px;
	height: 22px;
	border: 2px solid transparent;
	border-radius: 100px
}
.gg-chevron-right::after {
	content: "";
	display: block;
	box-sizing: border-box;
	position: absolute;
	width: 10px;
	height: 10px;
	border-bottom: 2px solid;
	border-right: 2px solid;
	transform: rotate(-45deg);
	left: 4px;
	top: 4px
}
.gg-chevron-left {
	box-sizing: border-box;
	position: relative;
	display: block;
	transform: scale(var(--ggs, 1));
	width: 22px;
	height: 22px;
	border: 2px solid transparent;
	border-radius: 100px
}
.gg-chevron-left::after {
	content: "";
	display: block;
	box-sizing: border-box;
	position: absolute;
	width: 10px;
	height: 10px;
	border-bottom: 2px solid;
	border-left: 2px solid;
	transform: rotate(45deg);
	left: 6px;
	top: 4px
}