/* ---------------------------------------------------------------------------
   Delay subscription popup (esf/changes/2026-09-28-delay-subscription-popup, T-06)

   Bottom fixed panel on the News / Insights / Newsletter detail pages. Measured
   against the approved Figma reference recorded in spec.md 5 (four breakpoints).
   This is the only place the panel may influence shared surfaces: the FAB shift
   below is scoped to a body state class and never touches bottom_right_navigation.css
   (SYS-008).
   --------------------------------------------------------------------------- */

:root {
    /* Panel palette (spec.md 5.5) */
    --delay-panel-text: #27201f;
    --delay-panel-bg: #ffffff;
    --delay-panel-border: #d9d9d9;
    --delay-panel-shadow: 0 0 20px rgba(0, 0, 0, 0.10);
    /* CTA */
    --delay-panel-cta-border: #27201f;
    --delay-panel-radius-cta: 8px;
    --delay-panel-cta-width: 208px;
    --delay-panel-cta-height: 40px;
    /* Hover fill: the same circular sweep the homepage Global Network search button
       uses (.btn-fill-hover in style.css), with its reversed palette and its own
       0.5s ease-out - the shared class hard-codes both and cannot be reused as-is
       without erasing this button's 1px outline and 8px radius. */
    --delay-panel-cta-fill: #27201f;
    --delay-panel-cta-fill-duration: 0.5s;
    /* Geometry (spec.md 5.1 / 5.2) */
    --delay-panel-max-width: 1220px;
    --delay-panel-illustration-width: 186px;
    --delay-panel-illustration-height: 124px;
    --delay-panel-transition: 160ms ease;
    /* FAB shift amount - recalculated by the script from the measured panel height;
       this value is only the fallback used before the script runs. */
    --delay-panel-fab-shift: 279px;
}

/* ---------------------------------------------------------------------------
   Container: full-width bar pinned to the viewport bottom, no overlay/mask
   (this is a bottom bar, not a blocking modal).
   --------------------------------------------------------------------------- */

.delay-panel {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 60;
    background: var(--delay-panel-bg);
    border-top: 1px solid var(--delay-panel-border);
    box-shadow: var(--delay-panel-shadow);
    color: var(--delay-panel-text);
}

/* The container ships hidden so a no-JS visitor sees an empty shell; re-assert the
   flex layout here because the UA stylesheet's [hidden] rule would otherwise win. */
.delay-panel[hidden] {
    display: none;
}

/* ---------------------------------------------------------------------------
   Cascade containment against the host page's legacy stylesheets.
   News_Content_Page / Insights_Content_Page carry style.css, whose global reset
   (html/body margins, box-sizing, heading/paragraph margins) would otherwise
   apply — and Newsletter_Summary_Page carries newsletter_summary.css, a
   Bootstrap-3 remnant whose bare `html { font-family }`, `body { overflow-x }`,
   `a { color:#fff }`, `a:focus,a:hover { color:#d9d9d9; text-decoration:underline }`
   and `img { vertical-align:middle }` all out-rank a single-class rule.
   Scope the reset to the panel subtree so the controls are identical on every
   trigger template, whatever stylesheets that template pulls in.
   --------------------------------------------------------------------------- */

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

.delay-panel a,
.delay-panel a:link,
.delay-panel a:visited,
.delay-panel a:hover,
.delay-panel a:focus,
.delay-panel a:focus-visible,
.delay-panel a:active {
    text-decoration: none;
}

.delay-panel img {
    vertical-align: middle;
}

.delay-panel-inner {
    max-width: var(--delay-panel-max-width);
    margin: 0 auto;
    padding: 20px 30px 60px 50px;
    box-sizing: border-box;
}

/* ---------------------------------------------------------------------------
   Header row: design carries an empty left zone plus the 24x24 close target.
   --------------------------------------------------------------------------- */

.delay-panel-head {
    display: flex;
    align-items: center;
    gap: 8px;
}

.delay-panel-head-left {
    flex: 1 1 auto;
}

.delay-panel-head-right {
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
}

.delay-panel-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--delay-panel-text);
    cursor: pointer;
    border-radius: 50%;
    transition: background-color var(--delay-panel-transition), opacity var(--delay-panel-transition);
}

.delay-panel-close:hover {
    background-color: rgba(39, 32, 31, 0.06);
}

.delay-panel-close-icon {
    display: block;
    width: 16px;
    height: 16px;
}

.delay-panel-close:focus-visible,
.delay-panel-cta:focus-visible {
    outline: 2px solid var(--delay-panel-text);
    outline-offset: 2px;
}

/* Keep the label readable whenever the CTA holds focus. newsletter_summary.css
   (Newsletter listing page) ships a bare `a:focus { color: #d9d9d9 }` rule, which
   is why focusing the CTA used to drop the label to a 1.41:1 grey-on-white. The
   discriminator also out-ranks that rule's specificity so idle/keyboard focus are
   unaffected. */
.delay-panel .delay-panel-cta:focus {
    color: var(--delay-panel-text);
}

/* Colour contract: the label is dark on the white bar at rest, and white on the
   dark sweep while hovered. ============================================== */
.delay-panel .delay-panel-cta:hover {
    color: var(--delay-panel-bg);
}

/* ---------------------------------------------------------------------------
   Content row: text column (with equal side slots) then the illustration.
   --------------------------------------------------------------------------- */

.delay-panel-row {
    display: flex;
    align-items: center;
    gap: 40px;
    padding: 0 30px;
    box-sizing: border-box;
}

.delay-panel-text {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 34px;
    min-width: 0;
}

.delay-panel-copy {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.delay-panel-title {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.5;
}

.delay-panel-desc {
    margin: 0;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
}

/* ---------------------------------------------------------------------------
   CTA: 208x40 outlined pill with the arrow icon on the right.
   --------------------------------------------------------------------------- */

.delay-panel-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    align-self: flex-start;
    width: var(--delay-panel-cta-width);
    height: var(--delay-panel-cta-height);
    padding: 12px 29px;
    box-sizing: border-box;
    border: 1px solid var(--delay-panel-cta-border);
    border-radius: var(--delay-panel-radius-cta);
    background: transparent;
    color: var(--delay-panel-text);
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    text-decoration: none;
    white-space: nowrap;
    /* Contain the hover sweep (::before) inside the 8px radius and give that pseudo's
       negative z-index a stacking context so it paints behind the label and arrow. */
    position: relative;
    overflow: hidden;
    isolation: isolate;
    transition: color var(--delay-panel-transition);
}

.delay-panel-cta:hover {
    color: var(--delay-panel-bg);
}

/* Circular fill sweeping in from the bottom-right corner on hover - the same
   interaction as the homepage Global Network search button. Geometry, timing and
   easing mirror .btn-fill-hover (style.css) so the two read identically; it is
   re-declared rather than reused because that class sets `background: transparent
   !important` plus `border-radius: 0`, which would flatten this button's outline
   and radius. Hover-only, matching the reference class, which has no focus rule. */
.delay-panel-cta::before {
    content: "";
    position: absolute;
    z-index: -1;
    width: max(300px, calc(100% + 160px));
    height: max(300px, calc(100% + 160px));
    border-radius: 50%;
    background: var(--delay-panel-cta-fill);
    top: calc(100% + 4px);
    left: calc(100% + 4px);
    -webkit-transition: all var(--delay-panel-cta-fill-duration) ease-out;
    -moz-transition: all var(--delay-panel-cta-fill-duration) ease-out;
    -o-transition: all var(--delay-panel-cta-fill-duration) ease-out;
    transition: all var(--delay-panel-cta-fill-duration) ease-out;
}

.delay-panel-cta:hover::before {
    top: -80px;
    left: -80px;
}

.delay-panel-cta:active {
    opacity: 0.85;
}

.delay-panel-cta[aria-disabled="true"] {
    opacity: 0.5;
    pointer-events: none;
}

.delay-panel-cta-label {
    overflow: hidden;
    text-overflow: ellipsis;
}

.delay-panel-cta-arrow {
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
}

.delay-panel-illustration {
    flex: 0 0 auto;
    width: var(--delay-panel-illustration-width);
    height: var(--delay-panel-illustration-height);
}

/* ---------------------------------------------------------------------------
   FAB coordination (FR-11(b) / AC-32): lift the shared bottom-right navigation
   while the panel is open. Scoped to a body state class so the 20+ other pages
   that consume bottom_right_navigation.css are unaffected (SYS-008 / AC-29).
   --------------------------------------------------------------------------- */

body.oll-delay-panel-open .bottom-right {
    bottom: var(--delay-panel-fab-shift);
    transition: bottom var(--delay-panel-transition);
}

/* ---------------------------------------------------------------------------
   Breakpoint 768-1023px (spec.md 5.4).
   --------------------------------------------------------------------------- */

@media (max-width: 1023px) {
    .delay-panel-inner {
        padding: 10px 30px 50px 50px;
    }

    .delay-panel-title {
        font-size: 18px;
    }

    .delay-panel-desc {
        font-size: 14px;
    }
}

/* ---------------------------------------------------------------------------
   Breakpoint below 768px (spec.md 5.4): stacked layout, full-width CTA and the
   illustration is not rendered.
   --------------------------------------------------------------------------- */

@media (max-width: 767px) {
    .delay-panel-inner {
        padding: 10px 20px 26px 20px;
    }

    .delay-panel-title {
        font-size: 16px;
    }

    .delay-panel-desc {
        font-size: 14px;
    }

    .delay-panel-row {
        flex-direction: column;
        align-items: stretch;
        gap: 24px;
        padding: 0;
    }

    .delay-panel-text {
        gap: 24px;
    }

    .delay-panel-cta {
        align-self: stretch;
        width: 100%;
    }

    .delay-panel-illustration {
        display: none;
    }
}

/* ---------------------------------------------------------------------------
   Motion preference (IS-008 / NFR-07 / AC-26): drop decorative motion but keep
   the panel visible and operable.
   --------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .delay-panel,
    .delay-panel-close,
    .delay-panel-cta,
    .delay-panel-cta::before,
    body.oll-delay-panel-open .bottom-right {
        transition: none;
    }
}