/* =====================================================================
   Header, footer, hero og fælles sidelayout
   ===================================================================== */

.site-header {
    position: sticky;
    top: 0;
    z-index: var(--z-header);
    background: rgba(255,255,255,0.92);
    backdrop-filter: blur(10px);
    box-shadow: var(--shadow-header);
}
.site-header__inner {
    display: flex;
    align-items: center;
    gap: var(--space-6);
    height: var(--header-height);
    /* The header carries more content (logo + full nav + action icons) than
       the --container width comfortably fits, so it gets its own, wider cap
       instead of the page-content container width - this keeps the full nav
       visible without an internal scroll on ordinary desktop screens, while
       .site-nav's own overflow-x:auto (above) is the safety net below that.
       Since this box is wider than .container (1440px vs 1280px), centering
       it independently (the .container class's own margin-inline:auto)
       would shift its left edge - and therefore the logo - away from where
       the page content (h1s, .container-based sections) starts on wide
       viewports. Anchoring margin-left to the same offset .container uses
       keeps the logo flush with the heading below it, while the extra width
       still opens up on the right for the nav/actions. */
    max-width: 1440px;
    margin-left: max(0px, calc((100% - 1280px) / 2));
    margin-right: 0;
}
.site-header__logo { display: flex; align-items: center; flex-shrink: 0; }
.site-header__logo img { height: 22px; width: auto; }

.site-nav {
    display: flex; align-items: center; gap: var(--space-5); flex: 1;
    /* Flex items default to min-width:auto (content-based). With 8 nowrap
       category links this can need more room than the viewport has even
       inside the desktop container — min-width:0 + its own scroll lets the
       nav itself scroll horizontally instead of forcing the whole header
       (and page) wider. */
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.site-nav::-webkit-scrollbar { display: none; }
.site-nav a {
    font-size: var(--fs-body-sm);
    font-weight: 600;
    color: var(--color-text);
    padding: var(--space-2) 0;
    position: relative;
    white-space: nowrap;
}
.site-nav a::after {
    content: "";
    position: absolute; left: 0; right: 0; bottom: -2px;
    height: 2px; background: var(--color-accent);
    transform: scaleX(0); transform-origin: left;
    transition: transform var(--transition-fast);
}
.site-nav a:hover::after, .site-nav a.is-active::after { transform: scaleX(1); }

.site-header__actions { display: flex; align-items: center; gap: var(--space-3); margin-left: auto; }
.header-icon-btn {
    display: flex; align-items: center; gap: var(--space-2);
    font-size: var(--fs-body-sm); font-weight: 600;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-pill);
    color: var(--color-text);
    /* .js-header-search-toggle is a real <button> (the others are <a>), so
       without this reset it shows the browser's native button chrome
       (its own border/background) instead of matching the plain icon-links
       next to it. */
    background: none;
    border: 1px solid transparent;
    font-family: inherit;
}
.header-icon-btn:hover { background: var(--color-background-alt); }
/* Den synlige søge-"boks" i hjørnet, før man åbner den - samme border-stil
   som Log ind-knappen (.btn--outline), så den reelt ligner en søgeboks. */
.js-header-search-toggle { border-color: var(--color-border-strong); }
.js-header-search-toggle:hover { border-color: var(--color-ink); background: var(--color-background-alt); }
.header-icon-btn svg { width: 19px; height: 19px; stroke: currentColor; fill: none; stroke-width: 2; }
.header-icon-btn .count {
    background: var(--color-accent); color: #fff;
    font-size: 10px; font-weight: 700;
    min-width: 16px; height: 16px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    padding: 0 3px;
}

.hamburger { display: none; background: none; border: none; padding: var(--space-2); }
.hamburger svg { width: 24px; height: 24px; stroke: var(--color-ink); fill: none; stroke-width: 2; }

/* ---- Header-søgning: udvider sig mod venstre fra søge-ikonet ---- */
.header-search { position: relative; display: flex; align-items: center; }
.header-search__field {
    position: absolute;
    top: 50%; right: 0;
    transform: translateY(-50%);
    display: flex; align-items: center; gap: var(--space-2);
    width: 0;
    padding: var(--space-2) var(--space-2) var(--space-2) 0;
    background: #fff;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-pill);
    box-shadow: none;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    transition: width var(--transition-base), opacity var(--transition-fast), padding var(--transition-base);
    z-index: var(--z-dropdown);
}
.header-search.is-open .header-search__field {
    width: min(400px, calc(100vw - var(--space-8)));
    padding-left: var(--space-4);
    opacity: 1;
    pointer-events: auto;
}
.header-search.is-open .js-header-search-toggle { opacity: 0; pointer-events: none; }
.header-search__field > svg {
    flex-shrink: 0; width: 18px; height: 18px;
    stroke: var(--color-text-muted); fill: none; stroke-width: 2;
}
.header-search__field input {
    flex: 1; min-width: 0;
    border: none; outline: none; background: transparent;
    font-size: var(--fs-body-sm); color: var(--color-text);
}
.header-search__close {
    display: flex; flex-shrink: 0;
    background: none; border: none; padding: var(--space-1);
    color: var(--color-text-muted);
}
.header-search__close svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 2; }
/* Højere specificitet end den generelle .hero-search__suggestions-regel
   (som sætter left:0/right:0), så dropdown'en reelt højrestilles og lægger
   sig præcis under det udfoldede søgefelt i stedet for under hele
   .header-search-beholderen (som kun er så bred som søge-ikonet). */
.header-search .header-search__suggestions {
    left: auto; right: 0;
    width: min(400px, calc(100vw - var(--space-8)));
}
@media (max-width: 480px) {
    /* Feltet er ellers positioneret "right:0" i forhold til selve
       søge-ikonet, som IKKE sidder helt ude i skærmkanten (der er både
       sidepadding på headeren og en hamburger-knap til højre for det på
       mobil) - kombineret med en bredde beregnet ud fra hele viewportet
       fik boksen derfor til at rage ud over venstre skærmkant, når den
       blev udvidet. Løsningen er at "løsrive" feltet fra ikonets snævre
       placering og i stedet fastgøre det direkte til viewportet med lige
       margen i begge sider. */
    .header-search.is-open .header-search__field {
        position: fixed;
        top: calc(var(--header-height) + var(--space-2));
        left: var(--space-4);
        right: var(--space-4);
        width: auto;
        transform: none;
    }
    .header-search .header-search__suggestions {
        position: fixed;
        top: calc(var(--header-height) + 64px);
        left: var(--space-4);
        right: var(--space-4);
        width: auto;
        max-height: calc(100vh - var(--header-height) - 80px);
    }
}

/* Mobile off-canvas nav */
.mobile-nav {
    position: fixed; inset: 0; z-index: var(--z-modal);
    background: var(--color-background);
    padding: var(--space-5);
    display: flex; flex-direction: column; gap: var(--space-2);
    transform: translateX(100%);
    transition: transform var(--transition-base);
    overflow-y: auto;
}
.mobile-nav.is-open { transform: translateX(0); }
.mobile-nav__top { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-5); }
/* Samme størrelse som logoet i selve headeren (18px på mobil) - uden dette
   arver billedet bare sine width/height-attributter fra <img> og bliver
   synligt mindre, end når menuen er lukket. */
.mobile-nav__top img { height: 18px; width: auto; }
/* ">" (kun direkte børn) er bevidst - ellers rammer denne regel også
   Gemte/Min rejse/Log ind-knapperne inde i .mobile-nav__actions og
   overskriver deres .btn-styling (display, padding, skriftstørrelse),
   så ikon og tekst ikke længere flex-justeres og knapperne mister deres
   udseende. */
.mobile-nav > a { display: block; padding: var(--space-4) 0; font-family: var(--font-display); font-weight: 700; font-size: 1.35rem; border-bottom: 1px solid var(--color-border); }
.mobile-nav .mobile-nav__actions { margin-top: var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); }

@media (max-width: 980px) {
    .site-nav { display: none; }
    .hamburger { display: flex; }
    .header-icon-btn span.label { display: none; }
    /* Gemte/Min rejse/Log ind er allerede tilgængelige i mobilmenuen (.mobile-nav) —
       skjul dem i selve header-baren på mobil, så den ikke løber over kanten. */
    .site-header__actions > a { display: none; }
    /* Logoet er et bredt wordmark (~10:1) — ved smalle skærme (helt ned til
       360px) skal det og header-mellemrummet skrumpes lidt, ellers presser
       logo + søgeikon + hamburger tilsammen headeren bredere end viewporten. */
    .site-header__inner { gap: var(--space-3); }
    .site-header__logo img { height: 18px; }
}

/* ---- Hero ---- */
.hero {
    position: relative;
    /* Fremtrædende, men ikke for høj — billedet skal bære siden uden at
       skubbe indholdet for langt ned. */
    min-height: clamp(480px, 62vh, 640px);
    display: flex;
    align-items: flex-end;
    color: #fff;
    overflow: hidden;
}
.hero__bg {
    position: absolute; inset: 0;
    /* Toppen af billedet skal altid være synlig — når højden skæres ned,
       skal beskæringen ske i bunden, ikke i toppen. */
    background-position: center top;
    background-size: cover;
    z-index: 0;
}
.hero__scrim {
    position: absolute; inset: 0;
    /* Let scrim foroven, så billedet selv dominerer — kun mørkere nederst,
       hvor teksten skal kunne læses. */
    background: linear-gradient(180deg, rgba(10,12,18,0.05) 0%, rgba(10,12,18,0.09) 45%, rgba(10,12,18,0.52) 100%);
    z-index: 1;
}
.hero__content {
    position: relative; z-index: 2;
    width: 100%;
    padding-block: var(--space-8) var(--space-8);
}
.hero__eyebrow {
    font-size: var(--fs-caption); font-weight: 700; letter-spacing: 0.14em;
    text-transform: uppercase; color: rgba(255,255,255,0.85); margin-bottom: var(--space-3);
}
.hero h1 {
    color: #fff;
    max-width: 16ch;
    margin-bottom: var(--space-4);
}
.hero p.lead {
    font-size: var(--fs-body-lg);
    color: rgba(255,255,255,0.92);
    max-width: 46ch;
    margin-bottom: var(--space-6);
}

.hero-search {
    max-width: 640px;
    position: relative;
}
.hero-search__box {
    display: flex; align-items: center; gap: var(--space-3);
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: var(--radius-pill);
    padding: var(--space-2) var(--space-2) var(--space-2) var(--space-5);
    transition: background var(--transition-base), backdrop-filter var(--transition-base), border-color var(--transition-base);
}
/* Når man klikker ind i feltet, "matteres" boksen (mere uigennemsigtig +
   slørring), så det er let at se hvad man skriver - resten af tiden er
   den så gennemsigtig som tag-pillerne nedenunder. */
.hero-search__box:focus-within {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-color: rgba(255, 255, 255, 0.6);
}
.hero-search__box svg { width: 20px; height: 20px; stroke: rgba(255,255,255,0.9); fill: none; stroke-width: 2; flex-shrink: 0; transition: stroke var(--transition-base); }
.hero-search__box:focus-within svg { stroke: var(--color-text-muted); }
.hero-search__input-wrap { position: relative; flex: 1; min-width: 0; display: flex; align-items: center; }
.hero-search__box input {
    border: none; outline: none;
    width: 100%;
    font-size: var(--fs-body); color: #fff;
    padding: var(--space-3) 0;
    background: transparent;
    transition: color var(--transition-base);
}
.hero-search__box input::placeholder { color: rgba(255,255,255,0.8); }
.hero-search__box:focus-within input { color: var(--color-text); }
.hero-search__box:focus-within input::placeholder { color: var(--color-text-muted); }
.hero-search__box .btn { flex-shrink: 0; }

/* Animeret placeholder - kun på mobil, hvor den fulde placeholder-tekst
   ("Søg efter sted eller oplevelse - fx Empire State Building") fylder
   for meget. Skjult som standard (desktop/tablet beholder den almindelige
   placeholder); main.js skifter teksten med en blød fade/slide hvert par
   sekund. Forsvinder automatisk når feltet har fokus eller indhold. */
.hero-search__animated-placeholder {
    display: none;
    position: absolute; inset: 0;
    align-items: center;
    font-size: var(--fs-body); color: rgba(255,255,255,0.8);
    pointer-events: none;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    opacity: 1; transform: translateY(0);
    transition: opacity 250ms var(--ease), transform 250ms var(--ease), color var(--transition-base);
}
.hero-search__animated-placeholder.is-swapping { opacity: 0; transform: translateY(4px); }
.hero-search__box:focus-within .hero-search__animated-placeholder { color: var(--color-text-muted); }
@media (max-width: 720px) {
    /* Den rigtige placeholder-tekst gøres usynlig (men er der stadig for
       skærmlæsere/no-JS), så den ikke ligger oven i den animerede tekst. */
    .hero-search__box input::placeholder { color: transparent; }
    .hero-search__animated-placeholder { display: flex; }
    .hero-search__box input:focus ~ .hero-search__animated-placeholder,
    .hero-search__box input:not(:placeholder-shown) ~ .hero-search__animated-placeholder {
        display: none;
    }
}

.hero-search__suggestions {
    position: absolute; top: calc(100% + var(--space-2)); left: 0; right: 0;
    background: #fff; border-radius: var(--radius-md);
    box-shadow: var(--shadow-float);
    overflow: hidden;
    z-index: var(--z-dropdown);
    color: var(--color-text);
    max-height: 420px;
    overflow-y: auto;
}
.hero-search__group-label {
    font-size: var(--fs-caption); font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.06em; color: var(--color-text-muted);
    padding: var(--space-3) var(--space-4) var(--space-1);
}
.hero-search__item {
    display: flex; align-items: center; gap: var(--space-3);
    padding: var(--space-2) var(--space-4);
}
.hero-search__item:hover { background: var(--color-background-alt); }
.hero-search__item img { width: 42px; height: 42px; border-radius: var(--radius-sm); object-fit: cover; flex-shrink: 0; background: var(--color-background-alt); }
.hero-search__item .title { font-weight: 600; font-size: var(--fs-body-sm); }
.hero-search__item .meta { font-size: var(--fs-caption); color: var(--color-text-muted); }

.hero-tags { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-5); }
.hero-tags a {
    font-size: var(--fs-caption); font-weight: 600;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-pill);
    background: rgba(255,255,255,0.14);
    border: 1px solid rgba(255,255,255,0.3);
    color: #fff;
    white-space: nowrap;
}
.hero-tags a:hover { background: rgba(255,255,255,0.24); }

@media (max-width: 720px) {
    .hero { min-height: 440px; }
    .hero__content { padding-block: var(--space-7) var(--space-6); }
    /* Empire State Building sidder til højre for midten i billedet - på
       brede skærme er der plads til at vise bygningen alligevel, men på
       en smal mobilskærm beskærer "center" den helt væk. Ved at rykke
       fokuspunktet til højre kommer et glimt af bygningen med i det
       udsnit, der reelt er synligt. */
    .hero__bg { background-position: 78% top; }
    /* Maks to rækker søgeforslag på mobil - en enkelt pille er ca. 37px høj
       (tekst + lodret padding + kant), så to rækker plus mellemrummet
       imellem dem er den grænse, vi skjuler resten bag. white-space:nowrap
       ovenfor sikrer at hver pille altid er præcis én linje høj, så
       rækkerne aldrig er højere end beregnet, og tredje rækkes pilller
       forsvinder derfor helt (aldrig kun halvt synlige). */
    .hero-tags { max-height: calc(2 * 37px + var(--space-2)); overflow: hidden; }
}

/* ---- Category tiles ---- */
.category-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: var(--space-4);
}
.category-tile {
    display: flex; flex-direction: column; align-items: center; gap: var(--space-3);
    text-align: center; padding: var(--space-5) var(--space-3);
    background: var(--color-card);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.category-tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-card-hover); }
.category-tile__icon {
    width: 56px; height: 56px; border-radius: 50%;
    background: var(--color-accent-soft);
    display: flex; align-items: center; justify-content: center;
    color: var(--color-accent-hover);
    overflow: hidden;
}
.category-tile__icon svg { width: 24px; height: 24px; stroke: currentColor; fill: none; stroke-width: 1.8; }
.category-tile__icon img { width: 100%; height: 100%; object-fit: cover; display: block; }
.category-tile__name { font-weight: 700; font-size: var(--fs-body-sm); color: var(--color-ink); }

/* ---- Horizontal scroll row (cards) ---- */
.card-row {
    display: flex;
    gap: var(--space-5);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: var(--space-3);
    margin: 0 calc(var(--space-5) * -1);
    padding-inline: var(--space-5);
    scrollbar-width: thin;
}
.card-row > * { scroll-snap-align: start; flex: 0 0 280px; }
.card-row.card-row--grid-fallback { display: grid; grid-template-columns: repeat(4, 1fr); overflow: visible; margin: 0; padding: 0; }

.card-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-5);
}
@media (max-width: 1100px) { .card-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 780px) { .card-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-3); } }
@media (max-width: 480px) { .card-grid { grid-template-columns: 1fr 1fr; } }

/* ---- Areas grid ---- */
.area-card {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    aspect-ratio: 4/5;
    color: #fff;
    display: flex; align-items: flex-end;
    box-shadow: var(--shadow-card);
}
.area-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 500ms var(--ease); }
.area-card:hover img { transform: scale(1.06); }
.area-card::after { content:""; position:absolute; inset:0; background: linear-gradient(180deg, transparent 40%, rgba(10,10,12,0.78) 100%); }
.area-card__label { position: relative; z-index: 1; padding: var(--space-4); }
.area-card__label .name { font-family: var(--font-display); font-weight: 800; font-size: 1.15rem; }
.area-card__label .count { font-size: var(--fs-caption); opacity: 0.85; }

/* ---- Trip CTA banner ---- */
.trip-cta {
    background-color: var(--color-ink);
    background-image: url('/assets/img/hero-1920.webp');
    background-size: cover;
    background-position: center;
    color: #fff;
    border-radius: var(--radius-lg);
    padding: var(--space-8);
    display: flex; align-items: center; justify-content: space-between; gap: var(--space-6);
    overflow: hidden;
    position: relative;
}
/* Samme billede som hero'en foroven, men med en overlay der er markant
   (mørk, lav gennemsigtighed) hen over teksten i venstre side og gradvist
   bliver meget mere gennemsigtig mod højre, så billedet selv får lov at
   bære resten af boksen. */
.trip-cta::before {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(90deg, rgba(10,12,18,0.92) 0%, rgba(10,12,18,0.82) 30%, rgba(10,12,18,0.4) 60%, rgba(10,12,18,0.1) 100%);
    z-index: 0;
}
.trip-cta > * { position: relative; z-index: 1; }
.trip-cta h2 { color: #fff; margin-bottom: var(--space-2); }
.trip-cta p { color: rgba(255,255,255,0.75); max-width: 46ch; }
.trip-cta__art { font-size: 5rem; opacity: 0.9; }
@media (max-width: 720px) {
    .trip-cta { flex-direction: column; text-align: center; padding: var(--space-6); }
    /* Teksten er centreret og fylder hele bredden på mobil, så den
       venstre-til-højre gradient erstattes af en jævn, markant overlay. */
    .trip-cta::before { background: rgba(10,12,18,0.82); }
}

/* ---- Footer ---- */
.site-footer {
    background: var(--color-ink);
    color: rgba(255,255,255,0.78);
    padding-block: var(--space-8) var(--space-6);
    margin-top: var(--space-9);
}
.site-footer a:hover { color: #fff; }
.footer-grid {
    display: grid;
    grid-template-columns: 1.4fr repeat(3, 1fr);
    gap: var(--space-6);
    padding-bottom: var(--space-7);
    border-bottom: 1px solid rgba(255,255,255,0.12);
}
.footer-brand img { height: 20px; filter: brightness(0) invert(1); margin-bottom: var(--space-3); }
.footer-brand p { color: rgba(255,255,255,0.6); font-size: var(--fs-body-sm); max-width: 32ch; }
.footer-col h4 { color: #fff; font-size: var(--fs-body-sm); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: var(--space-3); }
.footer-col ul li { margin-bottom: var(--space-2); font-size: var(--fs-body-sm); }
.footer-bottom {
    display: flex; justify-content: space-between; align-items: center;
    padding-top: var(--space-5);
    font-size: var(--fs-caption);
    color: rgba(255,255,255,0.5);
    flex-wrap: wrap;
    gap: var(--space-3);
}
@media (max-width: 900px) {
    .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
    .footer-grid { grid-template-columns: 1fr; }
}

/* ---- Breadcrumbs ---- */
.breadcrumbs { display: flex; flex-wrap: wrap; gap: var(--space-2); font-size: var(--fs-caption); color: var(--color-text-muted); margin-bottom: var(--space-4); }
.breadcrumbs a:hover { color: var(--color-ink); text-decoration: underline; }
.breadcrumbs .sep { opacity: 0.5; }