/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* Previously held leftover Blazor-template CSS (.page / .sidebar / .top-row /
   main) that matched nothing in MainLayout's markup, plus the #blazor-error-ui
   bar styling. The dead template rules were removed and the error bar is now
   styled with Tailwind utilities in MainLayout.razor. Kept as a placeholder so
   the component's scoped-CSS reference stays valid. */
/* /Components/Layout/NavMenu.razor.rz.scp.css */
/* Nav styling now lives in Styles/app.css (the .pheu-nav* component classes),
   built by Tailwind so it can use @apply + the design tokens. This scoped file
   previously held leftover Blazor-template CSS (.navbar-toggler / .nav-scrollable
   / .nav-item / .bi-*) that matched nothing in the markup — removed. Kept as a
   placeholder so the <NavMenu> scoped-CSS reference stays valid. */
/* /Components/Shared/AppDialog.razor.rz.scp.css */
/* All colours/fonts/sizes come from the global @theme (:root custom properties).
   No @import, no per-dialog font load — the site fonts are already global. */

/* ---------- CSS-only close (static SSR, no JS) — UNCHANGED mechanism ---------- */
.ad-dismiss-toggle[b-1k5fphdf7k] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}
.ad-dismiss-toggle:checked ~ .ad-overlay[b-1k5fphdf7k] {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    animation: none;
    transition: opacity 0.18s ease, visibility 0s linear 0.18s;
}

/* ---------- Overlay: flat ink scrim (no blur, no radial gradient) ---------- */
.ad-overlay[b-1k5fphdf7k] {
    position: fixed;
    inset: 0;
    z-index: 2147483000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: color-mix(in srgb, var(--color-ink) 48%, transparent);
    animation: ad-fade-in-b-1k5fphdf7k 0.2s ease both;
}
.ad-backdrop[b-1k5fphdf7k] {
    position: absolute;
    inset: 0;
    z-index: 1;
    cursor: default;
    margin: 0;
}

/* ---------- Card: surface, hairline --color-line, restrained shadow ---------- */
.ad-card[b-1k5fphdf7k] {
    --ad-accent: var(--color-ink);
    --ad-wash: var(--color-panel);

    position: relative;
    z-index: 2;
    width: min(420px, 100%);
    padding: 2.25rem 2rem 1.85rem;
    text-align: center;
    border-radius: 12px;                 /* matches the site cards (.cover-ph) */
    background: var(--color-surface);
    border: 1px solid var(--color-line);
    box-shadow: 0 24px 56px -28px color-mix(in srgb, var(--color-ink) 32%, transparent);
    animation: ad-pop-in-b-1k5fphdf7k 0.32s cubic-bezier(.22, 1, .36, 1) both;
}

/* ---------- Variants (rationed palette) ---------- */
.ad-success[b-1k5fphdf7k] { --ad-accent: var(--color-brand-ink); --ad-wash: var(--color-brand-wash); }                                  /* cyan */
.ad-error[b-1k5fphdf7k]   { --ad-accent: var(--color-error);     --ad-wash: color-mix(in srgb, var(--color-error) 4%, var(--color-surface)); } /* red + #fef5f5-ish wash, matching the form field */
.ad-warning[b-1k5fphdf7k] { --ad-accent: var(--color-ink-2);     --ad-wash: var(--color-panel); }   /* neutral — no on-palette amber */
.ad-info[b-1k5fphdf7k]    { --ad-accent: var(--color-ink-2);     --ad-wash: var(--color-panel); }   /* neutral */

/* ---------- Icon: flat wash + hairline, line-art mark in the accent ---------- */
.ad-icon[b-1k5fphdf7k] {
    width: 64px;
    height: 64px;
    margin: 0 auto 1.15rem;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--ad-wash);
    border: 1px solid color-mix(in srgb, var(--ad-accent) 28%, var(--color-line));
}
.ad-svg[b-1k5fphdf7k] { width: 40px; height: 40px; overflow: visible; }
.ad-ring[b-1k5fphdf7k] {
    stroke: var(--ad-accent);
    stroke-width: 2.5;
    opacity: 0.22;
    stroke-dasharray: 145;
    stroke-dashoffset: 145;
    animation: ad-draw-b-1k5fphdf7k 0.55s ease forwards 0.06s;
}
.ad-mark[b-1k5fphdf7k],
.ad-mark-2[b-1k5fphdf7k] {
    stroke: var(--ad-accent);
    stroke-width: 4;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 48;
    stroke-dashoffset: 48;
    animation: ad-draw-b-1k5fphdf7k 0.32s cubic-bezier(.22, 1, .36, 1) forwards 0.36s;
}
.ad-mark-2[b-1k5fphdf7k] { animation-delay: 0.48s; }
.ad-dot[b-1k5fphdf7k] {
    fill: var(--ad-accent);
    opacity: 0;
    animation: ad-fade-in-b-1k5fphdf7k 0.25s ease forwards 0.5s;
}

/* ---------- Text: Bricolage title / Schibsted message on the --text-* ramp ---------- */
.ad-title[b-1k5fphdf7k] {
    margin: 0 0 0.5rem;
    font-family: var(--font-display);
    font-size: var(--text-display-s);
    line-height: var(--text-display-s--line-height, 1.15);
    letter-spacing: var(--text-display-s--letter-spacing, -0.02em);
    font-weight: var(--text-display-s--font-weight, 600);
    color: var(--color-ink);
}
.ad-message[b-1k5fphdf7k] {
    margin: 0 auto 1.6rem;
    max-width: 36ch;
    font-family: var(--font-body);
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height, 1.55);
    color: var(--color-ink-3);
}

/* ---------- Actions: reuse the global .btn .btn-ink (no bespoke button) ---------- */
.ad-actions[b-1k5fphdf7k] { display: flex; gap: 0.7rem; justify-content: center; }

/* ---------- Keyframes ---------- */
@keyframes ad-fade-in-b-1k5fphdf7k { from { opacity: 0; } to { opacity: 1; } }
@keyframes ad-pop-in-b-1k5fphdf7k {
    0%   { opacity: 0; transform: translateY(10px) scale(0.97); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes ad-draw-b-1k5fphdf7k { to { stroke-dashoffset: 0; } }

/* ---------- Reduced motion — UNCHANGED ---------- */
@media (prefers-reduced-motion: reduce) {
    .ad-overlay[b-1k5fphdf7k], .ad-card[b-1k5fphdf7k], .ad-ring[b-1k5fphdf7k], .ad-mark[b-1k5fphdf7k], .ad-mark-2[b-1k5fphdf7k], .ad-dot[b-1k5fphdf7k] {
        animation-duration: 0.001s !important;
        animation-delay: 0s !important;
    }
}
/* /Components/Shared/Hero.razor.rz.scp.css */
/* Home hero — CSS-isolated (Blazor scoped; every selector is component-local).
   Ported from the approved single-layer preview, re-scoped under .pf-* and onto
   production's design tokens (--color-* / --font-*) and .wrap container. The dead
   preview tuning-control rules (.controls/.tune/.seg/.ctrl-toggle, backdrop blur)
   are intentionally NOT carried over. The shared global .hero is never referenced.

   Dimensions follow production, not the preview: no 100vh and no 1320px — the
   section is padding-based (top pad clears the fixed nav) inside the 1200px .wrap.
   The canvas + decorative layers are absolute within .pf-hero (overflow:hidden),
   so they are confined to the hero and cannot bleed behind the page. */

.pf-hero[b-gwmayl4lec] {
    position: relative;
    overflow: hidden;
    background: var(--color-paper);
    padding-block: clamp(96px, 12vw, 160px) var(--section-y);
}

/* node-network canvas — confined to the hero box (sized by hero-network.js) */
.pf-scene[b-gwmayl4lec] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    z-index: 0;
}

/* legibility: lighten the left where the headline sits */
.pf-overlay[b-gwmayl4lec] {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    background: linear-gradient(90deg, rgba(252, 252, 253, 0.9) 0%, rgba(252, 252, 253, 0.55) 36%, rgba(252, 252, 253, 0) 66%);
}

/* faint film grain (decorative) */
.pf-grain[b-gwmayl4lec] {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.04;
    mix-blend-mode: multiply;
    z-index: 1;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* brand swoosh watermark — faint + crisp (NO blur), grayscale, bleeding off the
   right and clipped by the hero's overflow:hidden */
.pf-wm[b-gwmayl4lec] {
    position: absolute;
    right: -8vw;
    top: 46%;
    transform: translateY(-50%) rotate(-8deg);
    width: min(860px, 56vw);
    opacity: 0.045;
    filter: grayscale(1);
    z-index: 1;
    pointer-events: none;
    user-select: none;
}

/* content sits in production's .wrap; this only lifts it above the canvas */
.pf-inner[b-gwmayl4lec] {
    position: relative;
    z-index: 2;
}

/* ---- meta rule row ---- */
.pf-metarow[b-gwmayl4lec] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--color-line);
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-ink-4);
}
.pf-metarow .r[b-gwmayl4lec] { display: flex; gap: 1.4rem; }

/* ---- main content ---- */
.pf-main[b-gwmayl4lec] { margin-top: clamp(40px, 6vw, 72px); }

.pf-kicker[b-gwmayl4lec] {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    font-family: var(--font-mono);
    font-size: 0.74rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--color-brand-ink);
    font-weight: 600;
    margin-bottom: 1.5rem;
}
.pf-kicker[b-gwmayl4lec]::before { content: ""; width: 32px; height: 2px; background: var(--color-brand); }

.pf-title[b-gwmayl4lec] {
    /* The global legacy @layer base rule (h1…h6) forces Montserrat + UPPERCASE;
       opt out explicitly so the headline renders as authored — mixed-case
       Bricolage 700, matching the preview's h1. */
    font-family: var(--font-display);
    font-weight: 700;
    text-transform: none;
    font-size: clamp(2.6rem, 6.6vw, 5.8rem);
    line-height: 0.99;
    letter-spacing: -0.035em;
    max-width: 15ch;
    color: var(--color-ink);
}
.pf-title .u[b-gwmayl4lec] { position: relative; white-space: nowrap; }
.pf-title .u[b-gwmayl4lec]::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0.07em;
    height: 0.085em;
    background: var(--color-brand);
    border-radius: 2px;
}

/* FocusOnNavigate (Routes.razor) programmatically focuses the <h1> after navigation for
   screen readers. Chrome matches :focus-visible on that post-nav focus, so an earlier
   :not(:focus-visible) skipped exactly the case we meant to hide. The <h1> is tabindex="-1"
   (focused ONLY programmatically, never Tab-reachable), so suppressing the UA focus ring on
   plain :focus is safe — no sighted keyboard user lands here, and every OTHER element keeps
   its :focus-visible ring. */
.pf-title:focus[b-gwmayl4lec] { outline: none; }

.pf-sub[b-gwmayl4lec] {
    margin-top: 1.8rem;
    font-size: clamp(1rem, 1.4vw, 1.2rem);
    line-height: 1.5;
    max-width: 44ch;
    color: var(--color-ink-3);
}

.pf-cta[b-gwmayl4lec] { margin-top: 2.4rem; display: flex; gap: 1.4rem; align-items: center; flex-wrap: wrap; }
.pf-btn[b-gwmayl4lec] {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 1rem;
    padding: 1rem 1.7rem;
    border-radius: 999px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    cursor: pointer;
    border: 1px solid transparent;
    transition: transform 0.25s ease, color 0.2s ease, background 0.2s ease;
}
.pf-btn-ink[b-gwmayl4lec] { background: var(--color-ink); color: #fff; }
.pf-btn-ink:hover[b-gwmayl4lec] { transform: translateY(-2px); }
.pf-btn-text[b-gwmayl4lec] { color: var(--color-ink); }
.pf-btn-text:hover[b-gwmayl4lec] { color: var(--color-brand-ink); }
.pf-btn .arw[b-gwmayl4lec] { transition: transform 0.3s cubic-bezier(.22, 1, .36, 1); }
.pf-btn:hover .arw[b-gwmayl4lec] { transform: translateX(4px); }

/* ---- bottom strip ---- */
.pf-strip[b-gwmayl4lec] {
    margin-top: clamp(48px, 6vw, 80px);
    padding-top: 22px;
    border-top: 1px solid var(--color-line);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}
.pf-strip ul[b-gwmayl4lec] { display: flex; gap: clamp(1rem, 2.4vw, 2.2rem); list-style: none; flex-wrap: wrap; margin: 0; padding: 0; }
.pf-strip li[b-gwmayl4lec] { font-size: 0.94rem; color: var(--color-ink-2); display: flex; align-items: center; gap: 0.5rem; }
.pf-strip li[b-gwmayl4lec]::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--color-brand); }
.pf-strip .all[b-gwmayl4lec] { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-ink-4); }

/* ---- mobile: map the preview's 720px rule onto prod's breakpoint
   (hide the meta row, tighten the strip) ---- */
@media (max-width: 720px) {
    .pf-metarow[b-gwmayl4lec] { display: none; }
    .pf-strip ul[b-gwmayl4lec] { gap: 1rem; }
}

/* ---- first-paint entrance (pure CSS; visible by default, JS-independent;
   removed entirely under reduced-motion) — mirrors the site's hero rise ---- */
@media (prefers-reduced-motion: no-preference) {
    @keyframes pf-rise-b-gwmayl4lec {
        from { opacity: 0; transform: translateY(18px); }
        to   { opacity: 1; transform: none; }
    }
    .pf-metarow[b-gwmayl4lec],
    .pf-kicker[b-gwmayl4lec],
    .pf-title[b-gwmayl4lec],
    .pf-sub[b-gwmayl4lec],
    .pf-cta[b-gwmayl4lec],
    .pf-strip[b-gwmayl4lec] { animation: pf-rise-b-gwmayl4lec 0.7s cubic-bezier(.22, 1, .36, 1) both; }
    .pf-kicker[b-gwmayl4lec] { animation-delay: 0.06s; }
    .pf-title[b-gwmayl4lec]  { animation-delay: 0.13s; }
    .pf-sub[b-gwmayl4lec]    { animation-delay: 0.21s; }
    .pf-cta[b-gwmayl4lec]    { animation-delay: 0.29s; }
    .pf-strip[b-gwmayl4lec]  { animation-delay: 0.37s; }

    @keyframes pf-underline-b-gwmayl4lec {
        from { transform: scaleX(0); }
        to   { transform: scaleX(1); }
    }
    .pf-title .u[b-gwmayl4lec]::after {
        transform-origin: left center;
        animation: pf-underline-b-gwmayl4lec 0.6s cubic-bezier(.22, 1, .36, 1) both;
        animation-delay: 0.5s;
    }
}