/* ============================================================================
   DispHub site header + shared foundation, used by every client-portal page
   (templates/_site_header.html): the public landing page, the auth pages and
   the signed-in portal. Self-contained: it does not rely on landing.css,
   portal.css or auth.css, and scopes its own reset to the header so it can sit
   on top of either of them. landing.css builds on the tokens and buttons here.
   ============================================================================ */

/* --- Typeface --------------------------------------------------------------- */
@font-face {
    font-family: 'Schibsted Grotesk';
    font-style: normal;
    font-weight: 400 900;
    font-display: swap;
    src: url('../fonts/schibsted-grotesk/SchibstedGrotesk-latin-ext.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';
    font-style: normal;
    font-weight: 400 900;
    font-display: swap;
    src: url('../fonts/schibsted-grotesk/SchibstedGrotesk-latin.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;
}
@font-face {
    font-family: 'Schibsted Grotesk';
    font-style: italic;
    font-weight: 400 900;
    font-display: swap;
    src: url('../fonts/schibsted-grotesk/SchibstedGrotesk-Italic-latin-ext.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';
    font-style: italic;
    font-weight: 400 900;
    font-display: swap;
    src: url('../fonts/schibsted-grotesk/SchibstedGrotesk-Italic-latin.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;
}

/* --- Tokens ----------------------------------------------------------------- */
:root {
    --lp-navy: #0F172A;
    --lp-navy-2: #172238;
    --lp-navy-3: #243352;
    --lp-ink: #0F172A;
    --lp-ink-2: #4B5873;
    --lp-ink-3: #5F6B86;
    --lp-line: #DCE1EC;
    --lp-line-2: #C9D0DF;
    --lp-tint: #F4F6FB;
    --lp-tint-2: #E9EDF6;
    --lp-white: #FFFFFF;
    --lp-orange: #F97316;
    --lp-orange-2: #EA580C;
    --lp-green: #22C55E;
    --lp-pink: #EC4899;
    --lp-blue: #3B82F6;
    --lp-on-navy: #E6EAF3;
    --lp-on-navy-2: #AEB8CE;
    --lp-font: 'Schibsted Grotesk', 'Segoe UI', system-ui, -apple-system, sans-serif;
    --lp-gutter: 20px;
    --lp-container: 1200px;
    --lp-r-sm: 8px;
    --lp-r: 12px;
    --lp-r-lg: 16px;
    --lp-shadow: 0 14px 36px -18px rgba(15, 23, 42, 0.30);
    --lp-shadow-sm: 0 6px 18px -10px rgba(15, 23, 42, 0.25);
    --lp-ease: cubic-bezier(0.23, 1, 0.32, 1);
    --lp-ease-io: cubic-bezier(0.77, 0, 0.175, 1);
    --lp-fast: 160ms;
    --lp-normal: 240ms;
    --lp-header-h: 68px;
    accent-color: var(--lp-orange);
    color-scheme: light;
}

/* --- Header-scoped base (the portal and auth pages bring their own reset) ---- */
.lp-header, .lp-header *, .lp-header *::before, .lp-header *::after { box-sizing: border-box; }
.lp-header {
    font-family: var(--lp-font); font-size: 1.0625rem; line-height: 1.6;
    -webkit-font-smoothing: antialiased; text-align: left;
}
.lp-header img { display: block; max-width: none; }
.lp-header :focus-visible { outline: 2px solid var(--lp-white); outline-offset: 3px; border-radius: 2px; }


.lp-container { width: 100%; max-width: var(--lp-container); margin-inline: auto; padding-inline: var(--lp-gutter); }

/* --- Skip link -------------------------------------------------------------- */
.lp-skip {
    position: absolute; left: 12px; top: -100px; z-index: 100;
    background: var(--lp-white); color: var(--lp-ink); padding: 10px 16px; border-radius: var(--lp-r-sm);
    box-shadow: var(--lp-shadow-sm); text-decoration: none; font-weight: 600;
}
.lp-skip:focus { top: 12px; }

/* --- Buttons ---------------------------------------------------------------- */
.lp-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    min-height: 48px; padding: 0 22px; border-radius: var(--lp-r);
    font-weight: 600; font-size: 1rem; line-height: 1; text-decoration: none; white-space: nowrap;
    border: 1px solid transparent;
    transition: background-color var(--lp-fast) ease, border-color var(--lp-fast) ease, color var(--lp-fast) ease, transform var(--lp-fast) var(--lp-ease);
}
.lp-btn:active { transform: scale(0.97); }
.lp-btn--primary { background: var(--lp-orange); color: var(--lp-navy); }
.lp-btn--primary:hover { background: var(--lp-orange-2); }
.lp-btn--ghost { color: var(--lp-ink); border-color: var(--lp-line-2); background: transparent; }
.lp-btn--ghost:hover { border-color: var(--lp-ink); }
.lp-btn--on-navy { color: var(--lp-white); border-color: rgba(255, 255, 255, 0.28); }
.lp-btn--on-navy:hover { border-color: rgba(255, 255, 255, 0.7); }
.lp-btn--sm { min-height: 40px; padding: 0 16px; font-size: 0.9375rem; border-radius: var(--lp-r-sm); }
.lp-btn--block { width: 100%; }

/* --- Header ----------------------------------------------------------------- */
.lp-header {
    position: sticky; top: 0; z-index: 50;
    background: var(--lp-navy); color: var(--lp-white);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.lp-header__inner { display: flex; align-items: center; gap: 16px; min-height: var(--lp-header-h); }
.lp-brand { display: inline-flex; align-items: center; margin-right: auto; }
.lp-brand__logo { height: 34px; width: auto; }
.lp-nav { display: none; }
.lp-nav a { color: var(--lp-on-navy); text-decoration: none; font-weight: 500; font-size: 0.9375rem; padding: 8px 12px; border-radius: var(--lp-r-sm); transition: color var(--lp-fast) ease, background-color var(--lp-fast) ease; }
.lp-nav a:hover { color: var(--lp-white); background: rgba(255, 255, 255, 0.08); }
.lp-header__actions { display: flex; align-items: center; gap: 8px; }
.lp-lang { display: flex; gap: 2px; padding: 3px; border-radius: var(--lp-r-sm); background: rgba(255, 255, 255, 0.08); }
.lp-lang__btn {
    padding: 6px 10px; border-radius: 6px;
    color: var(--lp-on-navy-2); font-size: 0.8125rem; font-weight: 600; text-decoration: none;
    transition: color var(--lp-fast) ease, background-color var(--lp-fast) ease;
}
.lp-lang__btn:hover { color: var(--lp-white); }
.lp-lang__btn.is-active { background: var(--lp-white); color: var(--lp-navy); }
.lp-header .lp-btn--primary { display: none; }

/* Signed-in extras: the account name and the sign-out link */
.lp-header__user { display: none; color: var(--lp-on-navy-2); font-size: 0.875rem; max-width: 16ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lp-header__link {
    color: var(--lp-on-navy); font-size: 0.9375rem; font-weight: 500; text-decoration: none;
    padding: 8px 10px; border-radius: var(--lp-r-sm); white-space: nowrap;
    transition: color var(--lp-fast) ease, background-color var(--lp-fast) ease;
}
.lp-header__link:hover { color: var(--lp-white); background: rgba(255, 255, 255, 0.08); }

/* Portal and auth pages: the header spans the portal's 1280 px content column */
.lp-header--app .lp-container { max-width: 1280px; padding-inline: 24px; }

/* --- Breakpoints ------------------------------------------------------------ */
@media (max-width: 479px) {
    .lp-brand__logo { height: 30px; }
    .lp-header__actions { gap: 6px; }
    .lp-lang__btn { padding: 6px 8px; }
    .lp-header .lp-btn--sm { padding: 0 12px; font-size: 0.875rem; }
    .lp-header--app .lp-container { padding-inline: 16px; }
    /* inside the portal the nav bar under the header already links to the screens */
    .lp-header--app .lp-header__dash { display: none; }
    /* on the landing page a signed-in phone keeps the way into the portal; sign out lives there */
    .lp-header:not(.lp-header--app) .lp-header__link { display: none; }
}

/* the header's quote button needs the room a tablet has; on phones the hero's orange button
   is already inside the first viewport, so the header keeps only the login link */
@media (min-width: 640px) {
    .lp-header .lp-btn--primary { display: inline-flex; }
}

@media (min-width: 900px) {
    :root { --lp-gutter: 32px; }
    .lp-header__user { display: block; }
}

@media (min-width: 1100px) {
    .lp-nav { display: flex; gap: 2px; margin-right: 8px; }
}