/* ==========================================================================
   ORGScanner — local overrides to the supplied design system
   --------------------------------------------------------------------------
   Two things live here, both cases where the shipped design system needed
   adapting to the real site rather than replacing:

     1. Real brand logo sizing (below)
     2. The beta notice, restoring the hover-to-reveal message the previous
        landing page had (further down)

   Kept out of orgscanner.css so that stylesheet stays replaceable.
   ==========================================================================

   --------------------------------------------------------------------------
   1. Real brand logo
   --------------------------------------------------------------------------
   The supplied design system shipped placeholder SVG wordmarks at a 4.21
   aspect ratio and sized them with `width: 170px; height: auto`.

   The production logo (assets/logo/orgscanner.png) is 223x73 — ratio 3.05,
   because it carries the "fueled by Deloitte." lockup beneath the wordmark.
   Left on `width: 170px` it would render 56px tall and push the 72px sticky
   header out of shape, so both slots are pinned by HEIGHT here and allowed to
   derive their own width.

   Load after orgscanner.css. Kept separate so the vendor stylesheet stays
   replaceable.
   ========================================================================== */

/* Header: 52px + the header's 10px vertical padding = the 72px min-height the
   design already reserves, so the sticky bar keeps its intended proportions. */
.orgscanner-app .org-brand img,
.orgscanner-app .org-form-header .org-brand img {
    width: auto;
    height: 52px;
    /* Guard against the intrinsic width overflowing a narrow grid column. */
    max-width: 100%;
    object-fit: contain;
}

/* The footer has a 170px min-height, so the mark can sit slightly larger. */
.orgscanner-app .org-footer__brand img {
    width: auto;
    height: 56px;
    max-width: 100%;
    object-fit: contain;
}

/* The anchor's min-width was tuned for the 170px-wide placeholder; the real
   mark is narrower at matched height, so release it and let content decide. */
.orgscanner-app .org-brand {
    min-width: 0;
}

@media (max-width: 820px) {
    .orgscanner-app .org-brand img,
    .orgscanner-app .org-form-header .org-brand img {
        height: 46px;
    }

    .orgscanner-app .org-footer__brand img {
        height: 50px;
    }
}

@media (max-width: 520px) {
    .orgscanner-app .org-brand img,
    .orgscanner-app .org-form-header .org-brand img {
        height: 40px;
    }

    .orgscanner-app .org-footer__brand img {
        height: 44px;
    }
}

/* --------------------------------------------------------------------------
   2. Beta notice
   --------------------------------------------------------------------------
   The design system shipped .org-beta-rail: a fixed vertical "Beta" tab with
   no message. The previous landing page instead had a 240px panel parked
   off-screen at right:-240px that slid in on hover (#slide/#toggle/.box),
   carrying an explanatory sentence. This restores that behaviour in the new
   visual language, and adds keyboard support the original lacked — the old tab
   was a plain <div>, so the message was unreachable without a mouse.

   Reveal is driven by :hover and :focus-within, so no JavaScript is involved.
   -------------------------------------------------------------------------- */

.orgscanner-app .org-beta {
    position: fixed;
    top: 154px;               /* the rail's original offset, kept */
    right: 0;
    z-index: 95;              /* above content, below the sticky header (100) */
    display: flex;
    align-items: flex-start;
    margin: 0;
    /* Slid off to the right by the panel's own width; only the tab shows. */
    transform: translateX(var(--org-beta-panel, 268px));
    transition: transform 380ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.orgscanner-app .org-beta:hover,
.orgscanner-app .org-beta:focus-within {
    transform: translateX(0);
}

/* The always-visible vertical tab. */
.orgscanner-app .org-beta__tab {
    flex: 0 0 auto;
    align-self: flex-start;
    min-width: 38px;
    height: 82px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-right: 0;
    border-radius: 14px 0 0 14px;
    appearance: none;
    cursor: pointer;
    color: #fff;
    background: linear-gradient(180deg, #0b274d, #133f6d);
    box-shadow: 0 10px 24px rgba(8, 36, 72, 0.20);
    font-family: inherit;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
}

.orgscanner-app .org-beta__tab:focus-visible {
    outline: 3px solid rgba(134, 188, 37, 0.75);
    outline-offset: -3px;
}

/* The message panel. */
.orgscanner-app .org-beta__note {
    flex: 0 0 auto;
    width: 268px;
    margin: 0;
    padding: 18px 20px;
    border: 1px solid rgba(255, 255, 255, 0.88);
    border-right: 0;
    border-radius: 18px 0 0 18px;
    color: var(--org-ink);
    background: rgba(255, 255, 255, 0.94);
    box-shadow: var(--org-shadow-lg);
    -webkit-backdrop-filter: blur(18px) saturate(1.1);
    backdrop-filter: blur(18px) saturate(1.1);
    font-size: 13px;
    line-height: 1.55;
}

/* Retire the unused shipped rail so it cannot double up with the tab above. */
.orgscanner-app .org-beta-rail {
    display: none;
}

@media (max-width: 820px) {
    .orgscanner-app .org-beta {
        --org-beta-panel: 232px;
        top: 132px;
    }

    .orgscanner-app .org-beta__note {
        width: 232px;
        font-size: 12.5px;
    }
}

/* On touch viewports there is no hover, so present the notice as a plain
   inline strip under the header instead of a drawer that cannot be opened. */
@media (max-width: 520px) {
    .orgscanner-app .org-beta {
        position: static;
        transform: none;
        display: block;
        margin: 0 auto 18px;
        width: min(1240px, calc(100% - 40px));
    }

    .orgscanner-app .org-beta__tab {
        min-width: 0;
        height: auto;
        padding: 6px 12px;
        border-right: 1px solid rgba(255, 255, 255, 0.22);
        border-radius: 999px;
        writing-mode: horizontal-tb;
        transform: none;
        margin-bottom: 8px;
        /* Nothing to toggle here - the note is already visible. */
        pointer-events: none;
    }

    .orgscanner-app .org-beta__note {
        width: auto;
        border-right: 1px solid rgba(255, 255, 255, 0.88);
        border-radius: var(--org-radius-sm);
    }
}

@media (prefers-reduced-motion: reduce) {
    .orgscanner-app .org-beta {
        transition: none;
    }
}

/* --------------------------------------------------------------------------
   3. Sticky header — stop content showing through
   --------------------------------------------------------------------------
   The shipped header is a floating pill: .org-header (the sticky wrapper) has
   no background at all, and only .org-header__inner is frosted. That leaves
   three paths for scrolling content to stay visible:

     a) the 12px strip above the pill  (top: 12px + padding-top: 12px)
     b) the gutters either side        (the pill is capped at min(1240px, 100% - 40px))
     c) through the pill itself        (rgba(255,255,255,.76), .91 when scrolled)

   Worst case is the dark sections (.org-feature-card--dark, .org-practice-band,
   .org-closing) sliding under a 91%-white pill and reading as muddy smears.

   Fix: a full-bleed gradient scrim on the wrapper that covers (a) and (b) and
   fades out at its lower edge so there is no hard line, plus a near-opaque pill
   for (c). The scrim only appears once .is-scrolled is set, so at the top of the
   page the header still floats cleanly over the hero as designed.

   The scrim carries its own blur, so content behind is blurred regardless of
   colour — but it also stands on its own at 0.98 alpha, so browsers without
   backdrop-filter still get a solid, legible header.
   -------------------------------------------------------------------------- */

.orgscanner-app .org-header::before {
    content: "";
    position: absolute;
    /* -12px pulls the scrim over the strip above the pill; 0 left/right makes it
       full-bleed so the side gutters are covered too. */
    inset: -12px 0 auto 0;
    height: calc(100% + 26px);
    pointer-events: none;
    opacity: 0;
    transition: opacity 220ms ease;
    background: linear-gradient(
        180deg,
        rgba(247, 250, 252, 0.98) 0%,
        rgba(247, 250, 252, 0.96) 52%,
        rgba(247, 250, 252, 0.78) 76%,
        rgba(247, 250, 252, 0.34) 90%,
        rgba(247, 250, 252, 0) 100%
    );
    -webkit-backdrop-filter: blur(14px) saturate(1.08);
    backdrop-filter: blur(14px) saturate(1.08);
}

.orgscanner-app .org-header.is-scrolled::before {
    opacity: 1;
}

/* Keep the pill above the scrim. Neither had a z-index, so paint order was
   doing the work; make it explicit rather than incidental.

   The mobile nav needs the same treatment for a subtler reason: it is a static
   block inside .org-header, so it paints at step 3 of the stacking order while
   the absolutely-positioned scrim paints at step 6 — the scrim would cover it.
   And because the nav is in normal flow, opening it grows .org-header, which
   grows the scrim's `100%` height to match and would blanket the whole menu. */
.orgscanner-app .org-header__inner,
.orgscanner-app .org-mobile-nav {
    position: relative;
    z-index: 1;
}

/* (c) near-opaque once scrolled, so dark sections cannot show through. */
.orgscanner-app .org-header.is-scrolled .org-header__inner {
    background: rgba(255, 255, 255, 0.98);
    border-color: rgba(255, 255, 255, 0.96);
    box-shadow: 0 14px 38px rgba(24, 58, 94, 0.13);
}

@media (prefers-reduced-motion: reduce) {
    .orgscanner-app .org-header::before {
        transition: none;
    }
}