/* ==========================================================================
   Aurum design system (SPEC 7)
   --------------------------------------------------------------------------
   Loaded after bootstrap.min.css. The look is driven by Bootstrap's own
   --bs-* custom properties instead of rewriting components.

   CSP note: style-src/img-src/font-src are 'self' only. Never use data: URIs
   or external URLs in this file (see section 9 for the navbar toggler icon).

   Contents
     1. Font face
     2. Design tokens
     3. Bootstrap variable overrides
     4. Base
     5. Typography
     6. Links
     7. Buttons
     8. Focus
     9. Navbar (CSP-safe toggler icon)
    10. Layout helpers (.section, .measure, .skip-link, .surface-ink)
    11. Motion
    12. Status pages (404 and error)
   ========================================================================== */


/* 1. Font face
   --------------------------------------------------------------------------
   Schibsted Grotesk Variable (SIL OFL 1.1, see /fonts/LICENSE), from
   @fontsource-variable/schibsted-grotesk via LibMan. Weight axis 400-900.
   The latin subset covers Norwegian (æ ø å); latin-ext is only fetched when
   a character in its unicode-range is used.
   The latin file is preloaded in App.razor - keep these URLs in sync with it. */

@font-face {
    font-family: "Schibsted Grotesk Variable";
    font-style: normal;
    font-display: swap;
    font-weight: 400 900;
    src: url("../fonts/schibsted-grotesk-latin-ext-wght-normal.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "Schibsted Grotesk Variable";
    font-style: normal;
    font-display: swap;
    font-weight: 400 900;
    src: url("../fonts/schibsted-grotesk-latin-wght-normal.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* 2. Design tokens
   --------------------------------------------------------------------------
   Colours exactly per SPEC 7.1. Contrast (WCAG 2.1):
     ink on paper 15.65:1, ink on mist 13.81:1
     slate on paper 7.58:1, slate on mist 6.69:1
     gold-deep on paper 6.37:1, gold-deep on mist 5.62:1
     gold on paper 3.16:1 -> never text on light backgrounds, accents only
     gold on ink 4.96:1 -> OK for text, links and focus ring on dark surfaces */

:root {
    --aurum-ink: #1B2430;
    /* Deeper ink for the site header, so the navigation stands apart from the dark hero. */
    --aurum-ink-deep: #10161E;
    --aurum-paper: #FFFFFF;
    --aurum-mist: #EEF1F4;
    --aurum-slate: #4A5563;
    --aurum-gold: #B8892B;
    --aurum-gold-deep: #7A5A12;

    /* RGB triplets for Bootstrap's rgba(var(--bs-*-rgb), alpha) pattern. */
    --aurum-ink-rgb: 27, 36, 48;
    --aurum-paper-rgb: 255, 255, 255;
    --aurum-mist-rgb: 238, 241, 244;
    --aurum-slate-rgb: 74, 85, 99;
    --aurum-gold-rgb: 184, 137, 43;
    --aurum-gold-deep-rgb: 122, 90, 18;

    /* Interaction shades (not in the brand palette; derived for hover/active).
       white on gold-darker 9.28:1; ink on gold-light 6.09:1. */
    --aurum-gold-darker: #5C430D;
    --aurum-gold-darkest: #4A360A;
    --aurum-gold-light: #C99A3C;
    --aurum-gold-lighter: #D4A84E;

    --aurum-line: #D5DBE1;

    --aurum-font-sans: "Schibsted Grotesk Variable", system-ui, -apple-system, "Segoe UI", sans-serif;

    /* Spacing */
    --aurum-section-space: clamp(3.5rem, 8vw, 6.5rem);
    --aurum-heading-gap: clamp(1.5rem, 3vw, 2.5rem);
    --aurum-measure: 70ch;
    /* Set this (e.g. to the header height) if the header becomes sticky, so
       in-page anchors are not hidden behind it. */
    --aurum-scroll-offset: 0px;

    /* Focus ring colour. Gold everywhere except on mist, where gold is only
       2.79:1 and gold-deep (5.62:1) is used instead - see section 8. */
    --aurum-focus-color: var(--aurum-gold);
    --aurum-focus-width: 3px;
    --aurum-focus-offset: 3px;
}


/* 3. Bootstrap variable overrides
   -------------------------------------------------------------------------- */

:root,
[data-bs-theme=light] {
    --bs-font-sans-serif: var(--aurum-font-sans);
    --bs-body-font-family: var(--aurum-font-sans);
    --bs-body-font-size: clamp(1.0625rem, 1rem + 0.25vw, 1.125rem);
    --bs-body-font-weight: 400;
    --bs-body-line-height: 1.6;

    --bs-body-color: var(--aurum-ink);
    --bs-body-color-rgb: var(--aurum-ink-rgb);
    --bs-body-bg: var(--aurum-paper);
    --bs-body-bg-rgb: var(--aurum-paper-rgb);
    --bs-emphasis-color: var(--aurum-ink);
    --bs-emphasis-color-rgb: var(--aurum-ink-rgb);
    /* Headings inherit the surrounding text colour, so they turn white on .surface-ink. */
    --bs-heading-color: inherit;

    --bs-secondary-color: var(--aurum-slate);
    --bs-secondary-color-rgb: var(--aurum-slate-rgb);
    --bs-secondary-bg: var(--aurum-mist);
    --bs-secondary-bg-rgb: var(--aurum-mist-rgb);
    --bs-tertiary-bg: var(--aurum-mist);
    --bs-tertiary-bg-rgb: var(--aurum-mist-rgb);

    /* Primary = gold-deep: the only gold that passes 4.5:1 as text on light backgrounds. */
    --bs-primary: var(--aurum-gold-deep);
    --bs-primary-rgb: var(--aurum-gold-deep-rgb);
    --bs-primary-text-emphasis: var(--aurum-gold-darker);
    --bs-primary-bg-subtle: #F6EEDC;
    --bs-primary-border-subtle: #E3CF9F;
    --bs-secondary: var(--aurum-slate);
    --bs-secondary-rgb: var(--aurum-slate-rgb);
    --bs-light: var(--aurum-mist);
    --bs-light-rgb: var(--aurum-mist-rgb);
    --bs-dark: var(--aurum-ink);
    --bs-dark-rgb: var(--aurum-ink-rgb);

    --bs-link-color: var(--aurum-gold-deep);
    --bs-link-color-rgb: var(--aurum-gold-deep-rgb);
    --bs-link-hover-color: var(--aurum-ink);
    --bs-link-hover-color-rgb: var(--aurum-ink-rgb);
    --bs-link-decoration: underline;

    --bs-border-color: var(--aurum-line);
    --bs-border-radius: 0.25rem;
    --bs-border-radius-sm: 0.1875rem;
    --bs-border-radius-lg: 0.375rem;

    /* Bootstrap's focus box-shadows are replaced by the outline in section 8. */
    --bs-focus-ring-color: var(--aurum-focus-color);
    --bs-focus-ring-width: 0;
    --bs-focus-ring-opacity: 1;

    /* No card shadows (SPEC 7.3). */
    --bs-box-shadow: none;
    --bs-box-shadow-sm: none;
    --bs-box-shadow-lg: none;
}


/* 4. Base
   -------------------------------------------------------------------------- */

html {
    scroll-padding-top: var(--aurum-scroll-offset);
}

body {
    font-optical-sizing: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

::selection {
    background-color: rgba(var(--aurum-gold-rgb), 0.35);
    color: var(--aurum-ink);
}

img {
    max-width: 100%;
    height: auto;
}

hr {
    border-color: var(--aurum-line);
    opacity: 1;
}

/* The skip link targets <main tabindex="-1">. The whole page area does not need a ring. */
main[tabindex="-1"]:focus {
    outline: none;
}

.card {
    --bs-card-box-shadow: none;
    box-shadow: none;
}


/* 5. Typography
   --------------------------------------------------------------------------
   One family, hierarchy through size and weight. h1 is the most prominent
   element on the page (hero). No uppercase eyebrow labels. */

h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6 {
    margin-bottom: 0.5em;
    font-family: var(--aurum-font-sans);
    text-wrap: balance;
}

h1, .h1 {
    font-size: clamp(2.5rem, 1.6rem + 3.6vw, 4.25rem);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.025em;
}

h2, .h2 {
    font-size: clamp(1.75rem, 1.35rem + 1.6vw, 2.5rem);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.015em;
}

h3, .h3 {
    font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
    font-weight: 650;
    line-height: 1.25;
    letter-spacing: -0.005em;
}

h4, .h4 {
    font-size: 1.125rem;
    font-weight: 650;
    line-height: 1.35;
}

h5, .h5,
h6, .h6 {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.4;
}

p,
ul,
ol,
dl {
    margin-bottom: 1.25em;
}

.lead {
    font-size: clamp(1.1875rem, 1.05rem + 0.55vw, 1.375rem);
    font-weight: 400;
    line-height: 1.5;
}

small, .small {
    font-size: 0.875em;
}

strong, b {
    font-weight: 650;
}


/* 6. Links
   --------------------------------------------------------------------------
   gold-deep, underlined with offset; hover goes to ink with a thicker line. */

a {
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
    transition: color 0.15s ease, text-decoration-thickness 0.15s ease;
}

a:hover {
    text-decoration-thickness: 2px;
}


/* 7. Buttons
   --------------------------------------------------------------------------
   Contrast:
     .btn-primary           white on gold-deep 6.37:1, hover white on #5C430D 9.28:1
     .btn-outline-primary   gold-deep on paper 6.37:1 / on mist 5.62:1
     .btn-outline-secondary ink on paper 15.65:1, hover white on ink 15.65:1
   On .surface-ink (section 10):
     .btn-primary           ink on gold 4.96:1, hover ink on #C99A3C 6.09:1
     outline buttons        white on ink 15.65:1 / gold on ink 4.96:1 */

.btn {
    --bs-btn-font-family: var(--aurum-font-sans);
    --bs-btn-font-weight: 600;
    --bs-btn-focus-box-shadow: none;
    --bs-btn-active-shadow: none;
}

/* Padding only for the default size, so .btn-lg/.btn-sm keep their own. */
.btn:not(.btn-lg):not(.btn-sm) {
    --bs-btn-padding-x: 1.25rem;
    --bs-btn-padding-y: 0.625rem;
}

.btn-primary {
    --bs-btn-color: var(--aurum-paper);
    --bs-btn-bg: var(--aurum-gold-deep);
    --bs-btn-border-color: var(--aurum-gold-deep);
    --bs-btn-hover-color: var(--aurum-paper);
    --bs-btn-hover-bg: var(--aurum-gold-darker);
    --bs-btn-hover-border-color: var(--aurum-gold-darker);
    --bs-btn-active-color: var(--aurum-paper);
    --bs-btn-active-bg: var(--aurum-gold-darkest);
    --bs-btn-active-border-color: var(--aurum-gold-darkest);
    --bs-btn-disabled-color: var(--aurum-paper);
    --bs-btn-disabled-bg: var(--aurum-gold-deep);
    --bs-btn-disabled-border-color: var(--aurum-gold-deep);
}

.btn-outline-primary {
    --bs-btn-color: var(--aurum-gold-deep);
    --bs-btn-border-color: var(--aurum-gold-deep);
    --bs-btn-hover-color: var(--aurum-paper);
    --bs-btn-hover-bg: var(--aurum-gold-deep);
    --bs-btn-hover-border-color: var(--aurum-gold-deep);
    --bs-btn-active-color: var(--aurum-paper);
    --bs-btn-active-bg: var(--aurum-gold-darker);
    --bs-btn-active-border-color: var(--aurum-gold-darker);
    --bs-btn-disabled-color: var(--aurum-gold-deep);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--aurum-gold-deep);
}

.btn-outline-secondary {
    --bs-btn-color: var(--aurum-ink);
    --bs-btn-border-color: var(--aurum-ink);
    --bs-btn-hover-color: var(--aurum-paper);
    --bs-btn-hover-bg: var(--aurum-ink);
    --bs-btn-hover-border-color: var(--aurum-ink);
    --bs-btn-active-color: var(--aurum-paper);
    --bs-btn-active-bg: var(--aurum-ink);
    --bs-btn-active-border-color: var(--aurum-ink);
    --bs-btn-disabled-color: var(--aurum-slate);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--aurum-slate);
}


/* 8. Focus
   --------------------------------------------------------------------------
   One visible gold ring on every interactive element (SPEC 10). Bootstrap
   removes the outline and draws a blue box-shadow on several components;
   the component selectors below match its specificity and replace that.
   Ring contrast (non-text, needs 3:1):
     gold on paper 3.16:1, gold on ink 4.96:1,
     gold-deep on mist 5.62:1 (gold on mist is only 2.79:1, hence the switch). */

:focus-visible,
.btn:focus-visible,
.btn-check:focus-visible + .btn,
.nav-link:focus-visible,
.navbar-brand:focus-visible,
.navbar-toggler:focus-visible,
.dropdown-item:focus-visible,
.btn-close:focus-visible,
.accordion-button:focus-visible,
.page-link:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible,
.form-check-input:focus-visible,
.focus-ring:focus-visible {
    outline: var(--aurum-focus-width) solid var(--aurum-focus-color);
    outline-offset: var(--aurum-focus-offset);
    box-shadow: none;
}

/* Mouse focus on the toggler / accordion should not draw Bootstrap's ring either. */
.navbar-toggler:focus,
.accordion-button:focus,
.btn-close:focus,
.page-link:focus {
    box-shadow: none;
}

.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: var(--aurum-gold-deep);
    box-shadow: none;
}

.section--mist {
    --aurum-focus-color: var(--aurum-gold-deep);
}


/* 9. Navbar
   --------------------------------------------------------------------------
   Bootstrap draws .navbar-toggler-icon with a data: SVG, which CSP
   (img-src 'self') blocks. The hamburger is drawn with pure CSS instead:
   one 2px bar in ::before plus two box-shadow copies, in currentColor.
   Dark navbar text is raised from Bootstrap's 55 % white to 85 % white
   (#DDDEE0 on ink, 11.6:1). */

.navbar,
.navbar-dark,
.navbar[data-bs-theme=dark],
[data-bs-theme=dark] .navbar-toggler-icon,
.navbar-toggler-icon {
    --bs-navbar-toggler-icon-bg: none;
}

.navbar-dark,
.navbar[data-bs-theme=dark] {
    --bs-navbar-color: rgba(255, 255, 255, 0.85);
    --bs-navbar-hover-color: #FFFFFF;
    --bs-navbar-active-color: #FFFFFF;
    --bs-navbar-brand-color: #FFFFFF;
    --bs-navbar-brand-hover-color: #FFFFFF;
    --bs-navbar-toggler-border-color: rgba(255, 255, 255, 0.35);
}

.navbar {
    --bs-navbar-toggler-focus-width: 0;
}

.navbar-dark .navbar-toggler,
.navbar[data-bs-theme=dark] .navbar-toggler {
    color: #FFFFFF;
}

.navbar-toggler-icon {
    position: relative;
    background-image: none;
}

.navbar-toggler-icon::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0.1875em;
    right: 0.1875em;
    height: 2px;
    margin-top: -1px;
    border-radius: 1px;
    background-color: currentColor;
    box-shadow: 0 -0.4em 0 currentColor, 0 0.4em 0 currentColor;
}


/* 10. Layout helpers
   --------------------------------------------------------------------------
   Shared contract with the section components. Do not rename. */

/* Page section with generous vertical rhythm. */
.section {
    padding-block: var(--aurum-section-space);
}

/* Alternating background (every other section). */
.section--mist {
    background-color: var(--aurum-mist);
}

/* Section heading: spacing under it and a short gold rule above it.
   Works on the h2 itself or on a wrapper around h2 (+ intro text).
   Add .section__heading--plain to drop the rule. */
.section__heading {
    margin-bottom: var(--aurum-heading-gap);
}

.section__heading > :last-child {
    margin-bottom: 0;
}

.section__heading::before {
    content: "";
    display: block;
    width: 2.5rem;
    height: 3px;
    margin-bottom: 1rem;
    background-color: var(--aurum-gold);
}

.section__heading--plain::before {
    content: none;
}

/* Comfortable line length for running text (SPEC 7.2). */
.measure {
    max-width: var(--aurum-measure);
}

/* Skip link: visually hidden until focused, then top-left on ink.
   White on ink 15.65:1, gold ring on ink 4.96:1. */
.skip-link {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1090;
    padding: 0.75rem 1.25rem;
    color: #FFFFFF;
    background-color: var(--aurum-ink);
    font-weight: 600;
    text-decoration: underline;
}

.skip-link:not(:focus):not(:focus-within) {
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.skip-link:focus,
.skip-link:focus-visible {
    top: 1rem;
    left: 1rem;
    color: #FFFFFF;
    outline: var(--aurum-focus-width) solid var(--aurum-gold);
    outline-offset: 2px;
}

/* Dark surface (header, footer, emphasis blocks): ink background, white text.
   Links white, gold on hover (4.96:1). Also re-applied inside nested
   data-bs-theme="dark" elements, since Bootstrap resets link colours there. */
.surface-ink,
.surface-ink [data-bs-theme=dark],
.surface-ink[data-bs-theme=dark] {
    --aurum-focus-color: var(--aurum-gold);
    --bs-body-color: #FFFFFF;
    --bs-body-color-rgb: 255, 255, 255;
    --bs-body-bg: var(--aurum-ink);
    --bs-body-bg-rgb: var(--aurum-ink-rgb);
    --bs-emphasis-color: #FFFFFF;
    --bs-emphasis-color-rgb: 255, 255, 255;
    /* 75 % white on ink, ~10:1. */
    --bs-secondary-color: rgba(255, 255, 255, 0.75);
    --bs-secondary-color-rgb: 255, 255, 255;
    --bs-link-color: #FFFFFF;
    --bs-link-color-rgb: 255, 255, 255;
    --bs-link-hover-color: var(--aurum-gold);
    --bs-link-hover-color-rgb: var(--aurum-gold-rgb);
    --bs-border-color: rgba(255, 255, 255, 0.2);
}

.surface-ink {
    color: #FFFFFF;
    background-color: var(--aurum-ink);
}

.surface-ink a:not(.btn):hover {
    text-decoration-color: var(--aurum-gold);
}

.surface-ink ::selection {
    background-color: rgba(var(--aurum-gold-rgb), 0.5);
    color: #FFFFFF;
}

.surface-ink .btn-primary {
    --bs-btn-color: var(--aurum-ink);
    --bs-btn-bg: var(--aurum-gold);
    --bs-btn-border-color: var(--aurum-gold);
    --bs-btn-hover-color: var(--aurum-ink);
    --bs-btn-hover-bg: var(--aurum-gold-light);
    --bs-btn-hover-border-color: var(--aurum-gold-light);
    --bs-btn-active-color: var(--aurum-ink);
    --bs-btn-active-bg: var(--aurum-gold-lighter);
    --bs-btn-active-border-color: var(--aurum-gold-lighter);
    --bs-btn-disabled-color: var(--aurum-ink);
    --bs-btn-disabled-bg: var(--aurum-gold);
    --bs-btn-disabled-border-color: var(--aurum-gold);
}

.surface-ink .btn-outline-primary {
    --bs-btn-color: var(--aurum-gold);
    --bs-btn-border-color: var(--aurum-gold);
    --bs-btn-hover-color: var(--aurum-ink);
    --bs-btn-hover-bg: var(--aurum-gold);
    --bs-btn-hover-border-color: var(--aurum-gold);
    --bs-btn-active-color: var(--aurum-ink);
    --bs-btn-active-bg: var(--aurum-gold-light);
    --bs-btn-active-border-color: var(--aurum-gold-light);
}

.surface-ink .btn-outline-secondary {
    --bs-btn-color: #FFFFFF;
    --bs-btn-border-color: #FFFFFF;
    --bs-btn-hover-color: var(--aurum-ink);
    --bs-btn-hover-bg: #FFFFFF;
    --bs-btn-hover-border-color: #FFFFFF;
    --bs-btn-active-color: var(--aurum-ink);
    --bs-btn-active-bg: var(--aurum-mist);
    --bs-btn-active-border-color: var(--aurum-mist);
}


/* 11. Motion
   --------------------------------------------------------------------------
   No load or scroll animations (SPEC 7.3). Smooth anchor scrolling only when
   the user has not asked for reduced motion. */

@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        /* 0.01ms rather than 0 so Bootstrap's collapse still gets transitionend. */
        transition-duration: 0.01ms !important;
        transition-delay: 0s !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
    }
}


/* Front page rhythm
   --------------------------------------------------------------------------
   Every other front page section gets the mist background (SPEC 7.1). Counted
   with :nth-of-type so the alternation stays right when a section (e.g. the
   cases in Production) is not rendered. Gold focus ring is too weak on mist
   (2.79:1), so gold-deep is used there, as in .section--mist. */
.home > section.section:nth-of-type(even) {
    background-color: var(--aurum-mist);
    --aurum-focus-color: var(--aurum-gold-deep);
}


/* 12. Status pages (404 and error)
   --------------------------------------------------------------------------
   Shared by Pages/NotFound and Pages/Error, hence global rather than CSS
   isolation. Same calm treatment as the hero: paper background, a short
   gold hairline above the heading, slate lead text, two buttons. */

.status-page {
    padding-block: clamp(3.5rem, 2rem + 6vw, 7rem);
}

.status-page h1 {
    max-width: 18ch;
    margin-bottom: 1.5rem;
}

.status-page h1::before {
    content: "";
    display: block;
    width: 3rem;
    height: 2px;
    margin-bottom: 2rem;
    background-color: var(--aurum-gold);
}

.status-page__lead {
    max-width: 60ch;
    margin-bottom: 2.5rem;
    font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
    line-height: 1.55;
    color: var(--aurum-slate);
}

.status-page__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 0;
}

.status-page__meta {
    margin: 2.5rem 0 0;
    font-size: 0.875rem;
    color: var(--aurum-slate);
}