/* Shared navigation and editorial subpage header. Campaign heroes keep their own composition. */
.site-header__main { border-bottom: 0; }
.site-header__inner { width: min(calc(100% - 4rem), var(--content-width)); min-height: 5rem; grid-template-columns: 1fr auto; gap: var(--space-6); }
.site-header__actions { grid-column: 2; }
.brand img { width: clamp(11rem, 18vw, 14rem); }
.site-header .brand img { filter: brightness(0) invert(1); }
.site-menu summary { gap: .75rem; background: transparent; border: 1px solid rgb(255 255 255 / .4); }
.site-menu summary::after { content: none; }
.site-menu[open] summary::after { content: none; }
.site-menu summary:hover, .site-menu[open] summary { background: var(--color-paper); color: var(--color-ink); }
.site-menu__icon { width: 1rem; height: .65rem; border-block: 2px solid currentColor; position: relative; }
.site-menu[open] .site-menu__icon { height: 2px; border-bottom: 0; transform: rotate(45deg); }
.site-menu[open] .site-menu__icon::after { position: absolute; inset: -2px 0 0; border-top: 2px solid currentColor; content: ''; transform: rotate(90deg); }
.site-menu__panel { inset-inline: 0; max-height: calc(100dvh - 5.1rem); overflow-y: auto; overscroll-behavior: contain; padding: var(--space-6) max(2rem, calc((100% - 88rem) / 2)); background: var(--color-paper); color: var(--color-ink); border-top: 0; border-bottom: 1px solid var(--color-border); border-radius: 0; box-shadow: none; }
.site-menu__intro { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); padding-bottom: var(--space-5); margin-bottom: var(--space-5); border-bottom: 1px solid var(--color-border); }
.site-menu__intro > p { font-size: var(--text-xl); font-weight: 800; margin: 0; }
.site-menu .site-header__notice { display: flex; max-width: none; white-space: normal; color: var(--color-brand); }
.site-menu .site-header__notice-text { overflow: visible; }
.site-menu h2 { color: var(--color-brand); letter-spacing: .04em; }
.site-menu h2 svg { display: none; }
.site-menu section { gap: 0; }
.site-menu section a { display: block; width: 100%; padding-block: .55rem; color: var(--color-ink); font-weight: 550; line-height: 1.4; }
.site-menu section a.site-menu__featured::after { content: ''; display: inline-block; width: .8em; height: .8em; margin-inline-start: .35rem; background: var(--color-highlight); vertical-align: .02em; mask: url('/assets/icons/fontawesome/star.svg') center / contain no-repeat; -webkit-mask: url('/assets/icons/fontawesome/star.svg') center / contain no-repeat; }
.site-menu section a:hover, .site-menu section a[aria-current] { color: var(--color-brand); text-decoration: underline; text-underline-offset: .25em; }
.site-menu section a[aria-current] { font-weight: 800; }
.site-menu__panel :focus-visible { outline-color: var(--color-brand); }
.site-menu__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); column-gap: clamp(1.5rem, 2.2vw, 2.5rem); row-gap: var(--space-6); }
.site-menu section a { overflow-wrap: normal; hyphens: none; }
/* At smaller desktop widths the four primary groups span both secondary rows. */
@media (min-width: 64rem) and (max-width: 79.99rem) {
    .site-menu__grid { grid-template-columns: repeat(5, minmax(0, 1fr)); grid-template-rows: auto auto; row-gap: var(--space-5); }
    .site-menu__grid > section:not(.site-menu__about):not(.site-menu__help) { grid-row: 1 / span 2; }
    .site-menu__about { grid-column: -2; grid-row: 1; }
    .site-menu__help { grid-column: -2; grid-row: 2; }
}
.page-home .site-header { margin-bottom: -5rem; }

.hero.hero--compact { height: auto; min-height: var(--hero-min-height); align-items: end; padding-block: 5rem 3.5rem; background: var(--color-ink); color: var(--color-paper); border: 0; }
.hero.hero--compact::before { inset: 0; width: 100%; opacity: 1; mask-image: none; -webkit-mask-image: none; }
.hero.hero--compact::after { display: block; background: linear-gradient(0deg, rgb(16 21 51 / .65), transparent 85%), linear-gradient(90deg, rgb(16 21 51 / .92), rgb(16 21 51 / .64) 48%, rgb(16 21 51 / .18)); }
.hero.hero--compact .hero__content { padding-right: 0; }
.hero.hero--compact h1 { font-family: var(--font-profile); font-weight: 900; max-width: 18ch; margin-bottom: var(--space-5); color: var(--color-paper); font-size: clamp(2.75rem, 1.7rem + 4vw, 5.5rem); line-height: 1.04; letter-spacing: 0; text-wrap: balance; overflow-wrap: normal; }
.hero.hero--compact .hero__lead { max-width: 36rem; margin-bottom: 0; color: var(--color-paper); font-size: clamp(1rem, .95rem + .35vw, 1.2rem); line-height: 1.6; }
.hero.hero--compact .guide-eyebrow { color: var(--color-highlight); }
.page-contact .hero { --hero-image: image-set(url('/assets/images/kontakt-frivillig-1600.avif') type('image/avif'), url('/assets/images/kontakt-frivillig-1600.webp') type('image/webp')); --hero-position: center 43%; }

.site-footer-transition { background: var(--footer-surround-background, transparent); display: flow-root; }
.page-concert { --footer-surround-background: var(--color-paper); }
.page-fort { --footer-surround-background: var(--color-paper); }

/* Keep the source at full page width, but expose a 23vw-high crop above the footer. */
.site-footer-crowd { position: relative; isolation: isolate; aspect-ratio: 2172 / 500; overflow: hidden; margin-bottom: -4px; background: none; mask-image: none; -webkit-mask-image: none; filter: url('#footer-crowd-solid'); }
.site-footer-crowd::before { content: ''; position: absolute; inset: -27.6% 0 auto; height: 144.8%; background: var(--color-brand-strong); mask: url('/assets/images/fredrikstad-cup-footer-crowd.png') center top / 100% auto no-repeat; -webkit-mask: url('/assets/images/fredrikstad-cup-footer-crowd.png') center top / 100% auto no-repeat; }
.site-footer { padding-block-start: var(--space-8); }
.site-footer__meta { border-top: 0; background: var(--color-highlight); color: var(--color-ink); }
.site-footer__meta a, .site-footer__meta a:hover { color: var(--color-ink); }
.site-footer__meta :focus-visible { outline-color: var(--color-ink); }

@media (max-width: 63.99rem) {
    .site-menu__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 48rem) {
    .site-header__inner { width: calc(100% - 2rem); min-height: 4.5rem; gap: var(--space-3); }
    .brand img { width: clamp(8rem, 29vw, 11rem); }
    .site-header__registration { display: inline-flex; padding-inline: .65rem; font-size: .8rem; }
    .site-menu summary { padding-inline: .65rem; gap: .5rem; font-size: .8rem; }
    .site-menu__panel { padding: var(--space-5) var(--space-4); max-height: calc(100dvh - 4.6rem); }
    .site-menu__intro { display: block; }
    .site-menu .site-header__notice { margin-top: .5rem; }
    .site-menu__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); }
    .page-home .site-header { margin-bottom: -4.5rem; }
    .hero.hero--compact { min-height: var(--hero-min-height); padding-block: 3rem 2.5rem; }
    .hero.hero--compact::before { inset: 0; width: 100%; height: 100%; background-position: var(--hero-position, center); }
    .hero.hero--compact::after { background: linear-gradient(0deg, rgb(16 21 51 / .94), rgb(16 21 51 / .45)); }
    .hero.hero--compact .hero__content { padding-right: 0; }
    .hero.hero--compact h1 { font-size: clamp(2.25rem, 8.5vw, 3.5rem); hyphens: auto; }
    .page-contact .hero { --hero-image: image-set(url('/assets/images/kontakt-frivillig-720.avif') type('image/avif'), url('/assets/images/kontakt-frivillig-720.webp') type('image/webp')); }
    .site-footer__meta-inner { padding-block: var(--space-5); }
}
@media (max-width: 34rem) { .site-menu__grid { grid-template-columns: 1fr; } }
@media (max-width: 23rem) { .site-header__actions { gap: .4rem; } .brand img { width: 7.8rem; } }
@media (max-width: 26rem) { .site-header__registration { display: none; } .brand img { width: 10.5rem; } }

/* The statistics pages use distinct markup but share the same hero rhythm. */
@media screen {
    .stats26 .stats26-hero, .stats26 .stats26-hero-inner, .history26 .history-hero-inner { min-height: var(--hero-min-height); }
    .stats26 .stats26-hero h1, .history26 .history-hero h1 { font-family: var(--font-profile); font-weight: 900; letter-spacing: 0; }
}
:is(p, ul, ol) + .button-row,
:is(p, ul, ol) + .button { margin-top: var(--space-6); }

/* Mobile navigation: clear primary action and a roomier two-column index. */
.site-menu__mobile-actions { display: none; }
@media (max-width: 48rem) {
    .site-menu__panel { padding: var(--space-6) clamp(1.5rem, 6vw, 2.5rem) var(--space-7); }
    .site-menu__mobile-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-6); }
    .site-menu__mobile-actions .button { flex: 1 1 10rem; min-height: 48px; justify-content: center; background: var(--color-highlight); color: var(--color-ink); }
    .site-menu__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-5); row-gap: var(--space-6); }
    .site-menu h2 { font-size: .85rem; margin-bottom: var(--space-2); }
    .site-menu section a { display: flex; align-items: center; min-height: 44px; font-size: 1rem; padding-block: .65rem; }
}
@media (max-width: 22.49rem) {
    .site-menu__grid { grid-template-columns: minmax(0, 1fr); }
}
