/* ============================================================
   DID YOU KNOW TICKER — Unified Glass v2
   Connects visually with .search-bar-composite above it.
   ============================================================ */

.dyk-bar {
    display: flex;
    align-items: flex-start; /* changed from center so multi-line text aligns top */
    flex-wrap: wrap; /* let the fact text drop to its own full-width row when the
                        column is narrow (split panel / tablet) instead of the
                        text cell starving to one-word-per-line */
    row-gap: 4px;
    gap: 10px;
    padding: 8px 14px; /* vertical padding so multi-line text breathes */
    background: rgba(255, 255, 255, 0.82);
    backdrop-filter: saturate(200%) blur(24px);
    -webkit-backdrop-filter: saturate(200%) blur(24px);
    border: 1.5px solid rgba(255, 255, 255, 0.95);
    border-top: 1.5px solid rgba(255, 255, 255, 0.85);
    /* Top corners flat — visually "connects" to the search bar/qf-row above */
    border-radius: 0 0 20px 20px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.07), 0 2px 6px rgba(0, 0, 0, 0.04), inset 0 -1px 0 rgba(0, 0, 0, 0.03);
    font-size: 0.75rem;
    color: #4A5568;
    flex-shrink: 0;
    min-height: 42px;
    height: auto; /* allow to grow with content */
    /* Children may render past the bar (focus glow on a control button etc.).
       overflow: visible allows the bar to grow with wrapped text. */
    overflow: visible;
    position: relative;
    /* Sit flush below search bar / qf-row — negative margin pulls it tight */
    margin-top: -2px;
    transition: all 0.3s ease;
    /* IMPORTANT: do NOT set z-index here — keeping dyk-bar out of a stacking context
       ensures .qf-price-panel (z-index 20200) from the search-console above floats over it */
}

/* Subtle orange accent line on the left — ties to brand */
/* .dyk-bar::before {
        content: '';
        position: absolute;
        left: 0;
        top: 20%;
        height: 60%;
        width: 3px;
        background: linear-gradient(180deg, #F58220 0%, #ffb347 100%);
        border-radius: 0 3px 3px 0;
        opacity: 0.7;
    }*/

.dyk-icon {
    flex-shrink: 0;
    font-size: 0.95rem;
    line-height: 1;
    animation: dyk-float 3s ease-in-out infinite;
    filter: drop-shadow(0 2px 4px rgba(245, 130, 32, 0.25));
    margin-top: 2px; /* align with first line of multi-line text */
}

@keyframes dyk-float {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-2px);
    }
}

.dyk-label {
    flex-shrink: 0;
    font-weight: 900;
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    white-space: nowrap;
    background: linear-gradient(135deg, #F58220, #ffb347);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-top: 3px; /* align with first text line */
}

.dyk-divider {
    width: 1.5px;
    min-height: 16px;
    align-self: stretch;
    background: rgba(0, 0, 0, 0.09);
    border-radius: 2px;
    flex-shrink: 0;
    margin-top: 2px;
}

.dyk-text {
    /* flex-basis 200px (was flex:1 => basis 0): the text now PREFERS ~200px, so
       on a wide bar it sits inline in one row (desktop, unchanged), and on a
       narrow bar it wraps to its own full-width row (two-plus readable lines)
       rather than being squeezed to one word per line. min-width:0 still lets it
       fill whatever line it lands on without forcing horizontal overflow. */
    flex: 1 1 200px;
    color: #1A1D20;
    font-weight: 500;
    font-size: 0.78rem;
    line-height: 1.4;
    transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    min-width: 0;
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    word-break: break-word;
}

    .dyk-text.dyk-fading {
        opacity: 0;
        transform: translateY(5px);
    }

.dyk-controls {
    display: flex;
    align-items: center;
    gap: 3px;
    flex-shrink: 0;
    margin-top: 2px; /* align with first text line */
    align-self: flex-start;
}

.dyk-btn {
    background: rgba(255, 255, 255, 0.65);
    border: 1.5px solid rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    width: 24px;
    height: 24px;
    font-size: 0.78rem;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #6C757D;
    transition: all 0.22s cubic-bezier(0.25, 1, 0.5, 1);
    padding: 0;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

    .dyk-btn:hover {
        background: rgba(245, 130, 32, 0.12);
        border-color: rgba(245, 130, 32, 0.5);
        color: #F58220;
        transform: scale(1.18);
        box-shadow: 0 3px 10px rgba(245, 130, 32, 0.18);
    }

.dyk-btn-pause.dyk-paused {
    background: rgba(245, 130, 32, 0.15);
    border-color: rgba(245, 130, 32, 0.5);
    color: #F58220;
}

/* ── When search bar is focused, DYK glows in sympathy ── */
.search-bar-composite:focus-within ~ .dyk-bar,
.search-input-stack:focus-within .dyk-bar {
    border-color: rgba(86, 196, 248, 0.45);
    box-shadow: 0 0 0 3px rgba(86, 196, 248, 0.10), 0 8px 24px rgba(0, 0, 0, 0.07);
}

/* ── Responsive ── */
@media (max-width: 767px) {
    .dyk-bar {
        border-radius: 0 0 3px 3px;
        padding: 7px 12px;
        min-height: 38px;
        height: auto;
        align-items: flex-start;
    }

    .dyk-text {
        font-size: 0.73rem;
        white-space: normal;
        word-break: break-word;
    }
}

@media (max-width: 480px) {
    .dyk-label,
    .dyk-divider {
        display: none;
    }

    .dyk-bar {
        gap: 8px;
        padding: 8px 10px 8px 14px;
        min-height: 36px;
        height: auto; /* unlocked — grows with wrapped content */
        align-items: flex-start; /* keeps controls aligned to top of multi-line text */
    }

    .dyk-text {
        font-size: 0.70rem;
        line-height: 1.45; /* a touch more breathing room for wrapped lines on tiny screens */
        white-space: normal;
        word-break: break-word;
        /* v10.4 — line clamp removed.
           Previously this block applied `-webkit-line-clamp: 3` which truncated
           the ticker to 3 lines and hid the rest behind an ellipsis. Mobile users
           reported losing the tail of every fact. The bar's `min-height` (not
           `height`) and `overflow: visible` already permit vertical growth, so
           dropping the clamp lets the bar wrap into as many rows as the fact
           needs. The previous companion rule (`.dyk-bar.dyk-expanded .dyk-text`)
           was never wired to a tap handler, so removing it has no behavioural
           cost. */
    }

    .dyk-btn {
        width: 22px;
        height: 22px;
        font-size: 0.72rem;
    }

    /* Icon nudges down a hair to align with the first line of multi-line text
       at the new mobile font size. */
    .dyk-icon {
        margin-top: 1px;
    }
}

@media (max-width: 360px) {
    .dyk-icon {
        display: none;
    }

    .dyk-text {
        font-size: 0.68rem;
    }
}

/* ============================================================
   v10.5 — LAYOUT-STABILITY PATCH (burger clickability)
   ────────────────────────────────────────────────────────────
   Why this exists:
   v10.4 removed the `-webkit-line-clamp: 3` from .dyk-text so
   the full fact is readable on mobile. That part works. But
   the now-taller DYK packs the search column tighter inside
   the `h-100` flex panel that holds it, and reports came in
   that the burger menu (top-right of the header) feels
   unclickable at times.

   The DYK itself never overlaps the header — the dyk-bar is
   not z-index'd and lives below it in normal flow. What was
   actually intersecting the burger's hit-area was the
   search-bar-composite's `:focus-within` outer halo (a 3.5px
   spread box-shadow) which, when the column is squeezed
   close to the header, paints up into the burger's row.

   The patch keeps v10.4's full-fact visibility (no clamp, no
   max-height) and only does two surgical things:

     1. Promotes the burger trigger to its own paint layer
        with an explicit z-index and a transparent hit-area
        extender, so a near-miss tap still registers.

     2. Tames the search-bar focus halo on mobile (smaller
        spread, no upward bleed) — the visible cyan tint on
        the border is preserved, only the leaking outer
        shadow is dampened.

   These rules live in dyk.css purely because dyk.css loads
   after search.css and site.css in _Layout.cshtml, so the
   patch wins specificity without touching the other files.
   ============================================================ */

/* 1) Burger trigger always on top of any reflowed sibling */
.header-burger-btn,
#headerBurgerBtn {
    position: relative;
    z-index: 11000;
    pointer-events: auto;
}

@media (max-width: 991px) {
    /* Transparent hit-area extender — adds an invisible 8px halo around
       the burger so a near-miss tap on small screens still registers.
       Sits behind the visible button so it doesn't change the look. */
    .header-burger-btn::before,
    #headerBurgerBtn::before {
        content: '';
        position: absolute;
        inset: -8px;
        border-radius: 18px;
        background: transparent;
        pointer-events: auto;
        z-index: -1;
    }
}

/* 2) Constrain the search-bar focus halo on mobile so its outer
      shadow can't bleed up into the burger's row when the search
      column packs tight. */
@media (max-width: 767px) {
    .search-bar-composite:focus-within {
        box-shadow: 0 0 0 2px rgba(86, 196, 248, 0.15), 0 6px 18px rgba(0, 0, 0, 0.08);
    }
}

/* ============================================================
   v10.6 — DYK OWNERSHIP / CASCADE FIX
   ────────────────────────────────────────────────────────────
   omni-search also defines `.dyk-bar` / `.dyk-text` and, at
   runtime, its stylesheet wins the cascade over dyk.css (it is
   applied later / at equal specificity). DevTools confirmed our
   plain-class `.dyk-text { flex: 1 1 200px }` was being beaten
   by omni-search's `.dyk-text`, so the fact text kept starving
   to one-word-per-line whenever the bar got narrow (split panel,
   docked DevTools, tablet) even though `flex-wrap` was applying.

   The bar carries id="dykBar", so we escalate ONLY the two
   properties that matter to `#dykBar` specificity (1,1,0) — that
   beats any plain class/element rule from omni-search without
   touching anything else it owns, and without !important.

     • bar wraps  → the fact can drop to its own full-width row
     • text basis → it prefers ~200px, so one row on a wide bar,
                     and a readable two-plus-row block when narrow
   ============================================================ */
#dykBar.dyk-bar {
    flex-wrap: wrap;
    row-gap: 4px;
}

#dykBar .dyk-text {
    flex: 1 1 200px;
    min-width: 0;
}