/* ============================================================================
   Hugsa public brand foundation.

   This file is the shared design layer for the two public sites:

       hugsa.fo            wwwroot/css/brand.css
       support.hugsa.fo    wwwroot/css/brand.css   (Hugsa.Support repository)

   The two repositories are separate applications and stay separate. There is
   no shared package, build step or service between them; this one file is kept
   byte-identical in both, so the palette, the type scale, the spacing rhythm,
   the content width, the focus treatment, the buttons, the form controls and
   the theme switches cannot drift apart. Change it in one repository, copy it
   to the other, and keep the header above intact. Site-specific layout belongs
   in app.css (hugsa.fo) or site.css (support.hugsa.fo).

   Theme model: the light palette is on :root, the dark palette is declared
   twice (an explicit choice and the automatic system case), and every rule
   reads the tokens, so no component style is duplicated per theme. The mode
   lives in the data-theme attribute ("light", "dark" or "auto") and is applied
   before the first paint by js/theme.js, which is shared in the same way.
   ========================================================================= */

/* Source Sans 3 - variable weight axis (200-900), self-hosted, subset to
   Latin-1 plus the punctuation and arrow glyphs the sites use. Licensed under
   the SIL Open Font License 1.1; see fonts/OFL.txt.
   Upstream: adobe-fonts/source-sans. */
@font-face {
    font-family: "Source Sans 3";
    font-style: normal;
    font-weight: 200 900;
    font-display: swap;
    src: url("../fonts/source-sans-3-variable.woff2") format("woff2");
    unicode-range: U+0020-007E, U+00A0-00FF, U+2013-2014, U+2018-2019, U+201C-201D, U+2026,
        U+20AC, U+2122, U+2190-2199, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    color-scheme: light;

    /* Brand colours. Used as a palette, not as a requirement to paint every
       element in every colour. */
    --brand-deep: #082d3d;
    --brand-blue: #6393b1;
    --brand-pale: #d4eefc;
    --brand-mist: #eef8fd;
    --brand-white: #ffffff;

    /* Semantic surfaces and text. */
    --background: #ffffff;
    --surface: #f4f9fc;
    --surface-strong: #e8f3fa;
    --text: #082d3d;
    --muted-text: #4a6b78;
    --border-color: rgba(8, 45, 61, 0.16);
    --border-strong: rgba(8, 45, 61, 0.3);
    --focus-color: #275b73;
    --link-color: #1f5065;
    --link-hover: #275b73;
    --accent: #3f7391;
    --accent-strong: #275b73;
    --accent-soft: #9cc3dc;

    --button-bg: #082d3d;
    --button-bg-hover: #275b73;
    --button-text: #ffffff;

    --danger: #8c2f2f;
    --danger-surface: #fdf1f1;
    --success: #2f6b4f;
    --success-surface: #eef7f1;
    --warning: #7a5a10;
    --warning-surface: #fdf7e7;

    --badge-business-bg: #e3eef8;
    --badge-business-text: #1f4a63;
    --badge-private-bg: #efe9f7;
    --badge-private-text: #4a3a66;

    /* Atmosphere. Subtle by design: the composition carries the page, these
       only keep the large areas from reading as flat white. */
    --page-gradient: linear-gradient(135deg, rgba(255, 255, 255, 0.85), rgba(238, 248, 253, 0.7));
    --ambient-glow:
        radial-gradient(circle at 84% 10%, rgba(212, 238, 252, 0.95), transparent 30rem),
        radial-gradient(circle at 8% 88%, rgba(238, 248, 253, 0.95), transparent 32rem),
        radial-gradient(circle at 56% 42%, rgba(255, 255, 255, 0.9), transparent 34rem);
    --grid-color: rgba(99, 147, 177, 0.09);
    --header-gradient: linear-gradient(90deg, rgba(212, 238, 252, 0.55), rgba(238, 248, 253, 0.2));
    --footer-surface: rgba(212, 238, 252, 0.45);
    --heading-gradient: linear-gradient(115deg, var(--text) 22%, #2f6a86 68%, #6393b1 100%);

    /* The knowledge graph on hugsa.fo. */
    --graph-edge: #6393b1;
    --graph-node: #3f7391;
    --graph-glow: #9cc3dc;

    /* Segmented controls in the header (theme and language). */
    --control-track: rgba(8, 45, 61, 0.055);
    --control-border: rgba(8, 45, 61, 0.1);
    /* Deeper than --muted-text so option labels clear 4.5:1 on the track. */
    --control-text: #3f5d6b;
    --control-hover: rgba(8, 45, 61, 0.07);
    --control-active: #ffffff;
    --control-active-text: #082d3d;
    --control-active-shadow: 0 1px 2px rgba(8, 45, 61, 0.18);
    --control-selected: #082d3d;
    --control-selected-text: #f2fafd;

    /* Layout rhythm shared by both sites. */
    --content-max-width: 72rem;
    --text-measure: 64ch;
    --page-gutter: clamp(1.25rem, 4vw, 3.5rem);
    --radius-sm: 0.4rem;
    --radius: 0.75rem;
    --radius-pill: 999px;

    --space-1: 0.5rem;
    --space-2: 1rem;
    --space-3: 1.5rem;
    --space-4: clamp(2rem, 5vw, 3.5rem);
    --space-5: clamp(3.5rem, 9vw, 6.5rem);

    /* Type. One family, one scale, one rhythm on both sites. */
    --font-body: "Source Sans 3", "Corbel", "Segoe UI", system-ui, sans-serif;
    --font-heading: "Source Sans 3", "Corbel", "Segoe UI", system-ui, sans-serif;
    --font-size-body: 1.0625rem;
    --font-size-small: 0.875rem;
    --font-size-title: clamp(2.15rem, 5.5vw, 3.8rem);
    --font-size-h2: clamp(1.4rem, 2.6vw, 1.95rem);
    --line-height-body: 1.6;
    --line-height-heading: 1.12;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    background: var(--background);
    overflow-x: clip;
}

body {
    background: var(--background);
    color: var(--text);
    font-family: var(--font-body);
    font-size: var(--font-size-body);
    line-height: var(--line-height-body);
    margin: 0;
    min-height: 100vh;
    overflow-x: clip;
}

/* ---------------------------------------------------------------- type */

h1,
h2,
h3 {
    color: var(--text);
    font-family: var(--font-heading);
    font-weight: 700;
    line-height: var(--line-height-heading);
    margin: 0 0 var(--space-2);
    text-wrap: balance;
}

h1 {
    font-size: var(--font-size-title);
    letter-spacing: -0.02em;
    max-width: 24ch;
}

h2 {
    font-size: var(--font-size-h2);
    letter-spacing: -0.01em;
}

h3 {
    font-size: 1.075rem;
    letter-spacing: 0;
}

h1:focus {
    outline: none;
}

p {
    margin: 0 0 var(--space-2);
    max-width: var(--text-measure);
    text-wrap: pretty;
}

a {
    color: var(--link-color);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-thickness: 0.09em;
    text-underline-offset: 0.16em;
}

a:hover {
    color: var(--link-hover);
    text-underline-offset: 0.22em;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
    outline: 0.2rem solid var(--focus-color);
    outline-offset: 0.2rem;
    border-radius: 0.15rem;
}

:where(a, button, input, select, textarea, summary):focus:not(:focus-visible) {
    outline: none;
}

strong {
    font-weight: 700;
}

/* ---------------------------------------------------------------- helpers */

.visually-hidden {
    border: 0;
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

.skip-link {
    background: var(--text);
    color: var(--background);
    font-weight: 700;
    left: var(--page-gutter);
    padding: 0.6rem 1rem;
    position: absolute;
    top: 0;
    transform: translateY(-160%);
    z-index: 100;
}

.skip-link:focus {
    color: var(--background);
    transform: translateY(0.75rem);
}

.eyebrow {
    color: var(--accent);
    font-size: var(--font-size-small);
    font-weight: 700;
    letter-spacing: 0.1em;
    margin-bottom: var(--space-2);
    text-transform: uppercase;
}

.lede {
    font-size: clamp(1.075rem, 1.5vw, 1.25rem);
    max-width: 52ch;
}

/* ---------------------------------------------------------------- wordmark
   Shared so the two headers cannot drift. The name stays on one line; when the
   header runs out of room the row wraps rather than shrinking or clipping it. */

.brand {
    align-items: baseline;
    color: var(--text);
    display: inline-flex;
    font-size: 1.25rem;
    font-weight: 700;
    gap: 0.45rem;
    letter-spacing: -0.03em;
    text-decoration: none;
    white-space: nowrap;
}

.brand:hover {
    color: var(--text);
}

.brand__suffix {
    color: var(--muted-text);
    font-size: 0.60rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

/* ---------------------------------------------------------------- buttons */

.button {
    align-items: center;
    background: var(--button-bg);
    border: 1px solid var(--button-bg);
    border-radius: var(--radius-sm);
    color: var(--button-text);
    cursor: pointer;
    display: inline-flex;
    font: inherit;
    font-weight: 700;
    gap: 0.5rem;
    justify-content: center;
    line-height: 1.2;
    min-height: 2.75rem;
    padding: 0.7rem 1.25rem;
    text-align: center;
    text-decoration: none;
    transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease;
}

.button:hover,
.button:focus-visible {
    background: var(--button-bg-hover);
    border-color: var(--button-bg-hover);
    color: var(--button-text);
}

.button--quiet {
    background: transparent;
    border-color: var(--border-strong);
    color: var(--text);
}

.button--quiet:hover,
.button--quiet:focus-visible {
    background: var(--surface-strong);
    border-color: var(--accent-soft);
    color: var(--text);
}

/* ---------------------------------------------------------------- forms */

.form {
    margin-top: var(--space-3);
}

.form fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

.form legend {
    color: var(--muted-text);
    font-size: var(--font-size-small);
    font-weight: 700;
    letter-spacing: 0.1em;
    margin-bottom: var(--space-2);
    padding: 0;
    text-transform: uppercase;
}

.field {
    margin-bottom: var(--space-3);
}

.field label {
    display: block;
    font-weight: 600;
    margin-bottom: 0.35rem;
}

.field__required {
    color: var(--accent);
}

.field input,
.field select,
.field textarea {
    background: var(--background);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    color: var(--text);
    font: inherit;
    padding: 0.6rem 0.7rem;
    width: 100%;
}

.field textarea {
    line-height: 1.55;
    resize: vertical;
}

.field input:hover,
.field select:hover,
.field textarea:hover {
    border-color: var(--accent-soft);
}

.field__hint {
    color: var(--muted-text);
    font-size: var(--font-size-small);
    margin: 0.35rem 0 0;
}

.field__error {
    color: var(--danger);
    font-size: var(--font-size-small);
    font-weight: 600;
    margin: 0.35rem 0 0;
}

.field--invalid input,
.field--invalid select,
.field--invalid textarea {
    border-color: var(--danger);
    border-width: 2px;
}

.field-row {
    display: grid;
    gap: 0 var(--space-3);
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
}

.field--inline {
    align-items: center;
    display: flex;
    gap: 0.5rem;
}

.field--inline label {
    margin-bottom: 0;
}

.field--inline input {
    height: 1.15rem;
    margin: 0;
    width: 1.15rem;
}

.form__warning {
    background: var(--warning-surface);
    border-left: 4px solid var(--warning);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-small);
    font-weight: 600;
    margin: var(--space-3) 0;
    padding: var(--space-2) var(--space-3);
}

.form__actions {
    align-items: baseline;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-3);
}

.form__note {
    color: var(--muted-text);
    font-size: var(--font-size-small);
    margin: 0;
}

/* ------------------------------------------------- segmented controls
   The theme and language switches share one track and one option style. The
   active theme option is a soft raised chip; the current language is a solid
   pill, so the two controls stay visually distinct. The active theme option
   follows the document attribute, so the correct highlight is painted before
   any script runs. */

.segmented {
    align-items: center;
    background: var(--control-track);
    border: 1px solid var(--control-border);
    border-radius: var(--radius-pill);
    display: inline-flex;
    flex: 0 0 auto;
    gap: 0.15rem;
    padding: 0.15rem;
    white-space: nowrap;
}

.segmented__option {
    align-items: center;
    background: none;
    border: 0;
    border-radius: var(--radius-pill);
    color: var(--control-text);
    cursor: pointer;
    display: inline-flex;
    font: inherit;
    font-size: var(--font-size-small);
    font-weight: 700;
    justify-content: center;
    line-height: 1;
    min-height: 2rem;
    min-width: 2rem;
    padding: 0 0.6rem;
    text-decoration: none;
    transition: background-color 160ms ease, color 160ms ease, box-shadow 160ms ease;
}

.segmented__option:hover {
    background: var(--control-hover);
    color: var(--text);
}

.segmented__option:focus-visible {
    outline: 0.2rem solid var(--focus-color);
    outline-offset: 0.15rem;
}

.theme-switcher .segmented__option {
    padding: 0;
}

/* On a touch screen the utility controls get a little more room, without
   changing the compact desktop header. */
@media (pointer: coarse) {
    .segmented__option {
        min-height: 2.5rem;
        min-width: 2.5rem;
    }
}

.segmented__icon {
    display: block;
    height: 1.05rem;
    width: 1.05rem;
}

:root[data-theme="light"] .theme-switcher [data-theme-option="light"],
:root[data-theme="dark"] .theme-switcher [data-theme-option="dark"],
:root:not([data-theme="light"]):not([data-theme="dark"]) .theme-switcher [data-theme-option="auto"] {
    background: var(--control-active);
    box-shadow: var(--control-active-shadow);
    color: var(--control-active-text);
}

.language-switcher .segmented__option[aria-current="page"] {
    background: var(--control-selected);
    color: var(--control-selected-text);
    text-decoration: none;
}

/* Dark palette. The same declarations appear twice: once for an explicit
   choice and once for the automatic (system) case, because a media query
   cannot be combined with the attribute selector. Keep both blocks in sync.
   :where() keeps both at the specificity of :root so that the forced-colors
   palette below, which must win for every mode, is not overridden. */
:root:where([data-theme="dark"]) {
    color-scheme: dark;

    --background: #0b1f29;
    --surface: #122e3c;
    --surface-strong: #17384a;
    --text: #e6f2f8;
    --muted-text: #a3bcc8;
    --border-color: rgba(196, 224, 238, 0.22);
    --border-strong: rgba(196, 224, 238, 0.34);
    --focus-color: #a6cbe2;
    --link-color: #a6cbe2;
    --link-hover: #c2dceb;
    --accent: #8fb4cc;
    --accent-strong: #c2dceb;
    --accent-soft: #5b849e;

    --button-bg: #c2dceb;
    --button-bg-hover: #ffffff;
    --button-text: #082d3d;

    --danger: #f0a8a8;
    --danger-surface: #331d1d;
    --success: #9fd3b6;
    --success-surface: #14291f;
    --warning: #e8cf8f;
    --warning-surface: #2e2611;

    --badge-business-bg: #1b3b4f;
    --badge-business-text: #cfe6f4;
    --badge-private-bg: #2d2540;
    --badge-private-text: #ded3f2;

    --page-gradient: linear-gradient(135deg, rgba(20, 52, 68, 0.8), rgba(8, 24, 32, 0.92));
    --ambient-glow:
        radial-gradient(circle at 84% 10%, rgba(99, 147, 177, 0.28), transparent 28rem),
        radial-gradient(circle at 8% 88%, rgba(156, 195, 220, 0.16), transparent 30rem),
        radial-gradient(circle at 56% 42%, rgba(70, 105, 124, 0.18), transparent 34rem);
    --grid-color: rgba(166, 203, 226, 0.06);
    --header-gradient: linear-gradient(90deg, rgba(166, 203, 226, 0.22), rgba(166, 203, 226, 0.06));
    --footer-surface: rgba(166, 203, 226, 0.14);
    --heading-gradient: linear-gradient(115deg, #eef7fc 22%, #a6cbe2 68%, #8fb4cc 100%);

    --graph-edge: #8fb4cc;
    --graph-node: #c2dceb;
    --graph-glow: #a6cbe2;

    --control-track: rgba(8, 24, 32, 0.5);
    --control-border: rgba(196, 224, 238, 0.16);
    --control-text: #b6cfdc;
    --control-hover: rgba(230, 242, 248, 0.12);
    --control-active: rgba(230, 242, 248, 0.18);
    --control-active-text: #f2f9fc;
    --control-active-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
    --control-selected: #dcecf5;
    --control-selected-text: #08222e;
}

/* Automatic mode, and the no-JavaScript fallback: follow the operating
   system. Any explicit choice above excludes this block. */
@media (prefers-color-scheme: dark) {
    :root:where(:not([data-theme="light"]):not([data-theme="dark"])) {
        color-scheme: dark;

        --background: #0b1f29;
        --surface: #122e3c;
        --surface-strong: #17384a;
        --text: #e6f2f8;
        --muted-text: #a3bcc8;
        --border-color: rgba(196, 224, 238, 0.22);
        --border-strong: rgba(196, 224, 238, 0.34);
        --focus-color: #a6cbe2;
        --link-color: #a6cbe2;
        --link-hover: #c2dceb;
        --accent: #8fb4cc;
        --accent-strong: #c2dceb;
        --accent-soft: #5b849e;

        --button-bg: #c2dceb;
        --button-bg-hover: #ffffff;
        --button-text: #082d3d;

        --danger: #f0a8a8;
        --danger-surface: #331d1d;
        --success: #9fd3b6;
        --success-surface: #14291f;
        --warning: #e8cf8f;
        --warning-surface: #2e2611;

        --badge-business-bg: #1b3b4f;
        --badge-business-text: #cfe6f4;
        --badge-private-bg: #2d2540;
        --badge-private-text: #ded3f2;

        --page-gradient: linear-gradient(135deg, rgba(20, 52, 68, 0.8), rgba(8, 24, 32, 0.92));
        --ambient-glow:
            radial-gradient(circle at 84% 10%, rgba(99, 147, 177, 0.28), transparent 28rem),
            radial-gradient(circle at 8% 88%, rgba(156, 195, 220, 0.16), transparent 30rem),
            radial-gradient(circle at 56% 42%, rgba(70, 105, 124, 0.18), transparent 34rem);
        --grid-color: rgba(166, 203, 226, 0.06);
        --header-gradient: linear-gradient(90deg, rgba(166, 203, 226, 0.22), rgba(166, 203, 226, 0.06));
        --footer-surface: rgba(166, 203, 226, 0.14);
        --heading-gradient: linear-gradient(115deg, #eef7fc 22%, #a6cbe2 68%, #8fb4cc 100%);

        --graph-edge: #8fb4cc;
        --graph-node: #c2dceb;
        --graph-glow: #a6cbe2;

        --control-track: rgba(8, 24, 32, 0.5);
        --control-border: rgba(196, 224, 238, 0.16);
        --control-text: #b6cfdc;
        --control-hover: rgba(230, 242, 248, 0.12);
        --control-active: rgba(230, 242, 248, 0.18);
        --control-active-text: #f2f9fc;
        --control-active-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
        --control-selected: #dcecf5;
        --control-selected-text: #08222e;
    }
}

@media (prefers-reduced-motion: reduce) {
    .segmented__option,
    .button {
        transition: none;
    }
}

@media (forced-colors: active) {
    :root {
        --background: Canvas;
        --surface: Canvas;
        --surface-strong: Canvas;
        --text: CanvasText;
        --muted-text: CanvasText;
        --border-color: ButtonText;
        --border-strong: ButtonText;
        --focus-color: Highlight;
        --link-color: LinkText;
        --link-hover: LinkText;
        --accent: LinkText;
        --accent-strong: LinkText;
        --accent-soft: ButtonText;
        --button-bg: ButtonFace;
        --button-bg-hover: ButtonFace;
        --button-text: ButtonText;
        --danger: CanvasText;
        --danger-surface: Canvas;
        --success: CanvasText;
        --success-surface: Canvas;
        --warning: CanvasText;
        --warning-surface: Canvas;

        --control-track: Canvas;
        --control-border: ButtonText;
        --control-text: CanvasText;
        --control-hover: Canvas;
        --control-active: Highlight;
        --control-active-text: HighlightText;
        --control-active-shadow: none;
        --control-selected: Highlight;
        --control-selected-text: HighlightText;
    }

    .button {
        border: 1px solid ButtonText;
    }
}