/*!
 * Switzer text-size control + reader-mode improvements
 * v1.0 - 2026-05-11
 *
 * Adds 4-step text scaling, bumps default body to 19px, fixes expert name
 * hyphenation, tightens homepage section spacing, hides date on homepage,
 * hides read-time + share + save buttons on mobile article views.
 */

/* ============================================================
   FONT SCALE — affects all text via root + variable cascade
   ============================================================ */
:root { --font-scale: 1; }
html[data-text-size="step2"] { --font-scale: 1.105; font-size: 110.5%; }
html[data-text-size="step3"] { --font-scale: 1.21;  font-size: 121%; }
html[data-text-size="step4"] { --font-scale: 1.316; font-size: 131.6%; }

/* Bump default body to 19px (was 17px) — scaled by --font-scale */
body { font-size: calc(19px * var(--font-scale)) !important; }

/* Override px-based selectors with calc() so they scale too.
   Selector list deliberately broad — covers SR + SD class names.
   The !important keeps us above theme defaults without rewriting them. */
.article-title { font-size: calc(40px * var(--font-scale)) !important; }
.article-excerpt { font-size: calc(18px * var(--font-scale)) !important; }
.article-content p,
.article-content li,
.article-content blockquote { font-size: calc(19px * var(--font-scale)); }
.article-meta .author-name,
.article-meta .meta-item,
.article-meta .meta-item span { font-size: calc(13px * var(--font-scale)) !important; }
.masthead, .masthead-heading, .masthead-sub { font-size: calc(56px * var(--font-scale)) !important; }
.tagline, .edition-date { font-size: calc(12px * var(--font-scale)) !important; }
.byline, .author-byline { font-size: calc(13px * var(--font-scale)) !important; }
.top-bar, .top-bar a { font-size: calc(12px * var(--font-scale)) !important; }
.expert-name, .expert-name a { font-size: calc(14px * var(--font-scale)) !important; }
.content-box-title, .sidebar-header { font-size: calc(22px * var(--font-scale)) !important; }
.content-box-meta { font-size: calc(13px * var(--font-scale)) !important; }
nav a, .nav-account, .nav-subscribe-btn,
.header-utility a, .header-utility-btn { font-size: calc(13px * var(--font-scale)) !important; }
.view-all-link, .experts-all-btn { font-size: calc(14px * var(--font-scale)) !important; }

/* ============================================================
   EXPERT NAME — split first / last on separate lines
   ============================================================ */
.expert-name {
    hyphens: none !important;
    word-break: normal;
    line-height: 1.25;
}
.expert-name-first,
.expert-name-last {
    display: block;
}

/* ============================================================
   TEXT-SIZE PILL — desktop (lives in top-bar / article-meta)
   ============================================================ */
.text-size-control {
    display: inline-flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    padding: 3px;
    gap: 1px;
    margin-left: 12px;
    font-family: 'Inter', Arial, sans-serif;
}
.text-size-control[data-on-light="true"] {
    background: rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(0, 0, 0, 0.08);
}
.text-size-control .text-size-label {
    font-size: 10px !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: rgba(255, 255, 255, 0.65);
    padding: 0 8px 0 6px;
    font-weight: 600;
}
.text-size-control[data-on-light="true"] .text-size-label {
    color: #555;
}
.text-size-btn {
    width: 28px;
    height: 26px;
    padding: 0;
    border: none;
    background: transparent;
    color: rgba(255, 255, 255, 0.85);
    border-radius: 999px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: inherit;
    font-weight: 600;
    line-height: 1;
    transition: all 0.15s;
}
.text-size-control[data-on-light="true"] .text-size-btn {
    color: #555;
}
.text-size-btn:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
}
.text-size-control[data-on-light="true"] .text-size-btn:hover {
    background: rgba(0, 0, 0, 0.06);
    color: #222;
}
.text-size-btn[aria-pressed="true"] {
    background: #1d93bd;
    color: #fff;
}
.text-size-btn:focus-visible {
    outline: 2px solid #1d93bd;
    outline-offset: 2px;
}
.text-size-btn[data-size="default"] span { font-size: 11px !important; }
.text-size-btn[data-size="step2"]   span { font-size: 13px !important; }
.text-size-btn[data-size="step3"]   span { font-size: 15px !important; }
.text-size-btn[data-size="step4"]   span { font-size: 17px !important; }

/* ============================================================
   TEXT-SIZE MOBILE TRIGGER + POPOVER
   Hidden by default; shown on mobile near the search icon
   ============================================================ */
/* Ensure the entire site-header sits ABOVE later content (like the
   homepage video banner) so the text-size popover doesn't get hidden
   beneath stacking contexts created by video/transform elements below. */
.site-header,
header.site-header {
    position: relative;
    z-index: 50;
}

.text-size-mobile-wrapper {
    position: relative;
    z-index: 10;
    display: none;
}
.text-size-trigger {
    width: 38px;
    height: 38px;
    border: none;
    background: transparent;
    color: #222;
    cursor: pointer;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: 'Inter', Arial, sans-serif;
    font-weight: 700;
}
.text-size-trigger:hover { background: rgba(0, 0, 0, 0.04); }
.text-size-trigger .a-lower { font-size: 13px !important; line-height: 1; }
.text-size-trigger .a-upper { font-size: 18px !important; line-height: 1; margin-left: 1px; }
.text-size-trigger:focus-visible { outline: 2px solid #1d93bd; outline-offset: 2px; }
.text-size-trigger[aria-expanded="true"] {
    background: rgba(29, 147, 189, 0.12);
    color: #1d93bd;
}
.text-size-popover {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    background: #fff;
    border: 1px solid #E5E5E5;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12);
    border-radius: 8px;
    padding: 12px 14px;
    min-width: 220px;
    display: none;
    z-index: 99999;
}
.text-size-popover.is-open { display: block; }
.text-size-popover .text-size-pop-label {
    font-family: 'Inter', Arial, sans-serif;
    font-size: 11px !important;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #555;
    font-weight: 600;
    margin-bottom: 8px;
    display: block;
}
.text-size-popover .text-size-pop-pill {
    display: flex;
    align-items: center;
    background: rgba(0, 0, 0, 0.04);
    border-radius: 999px;
    padding: 3px;
    gap: 2px;
}
.text-size-popover .text-size-pop-pill .text-size-btn {
    color: #555;
    width: 40px;
    height: 32px;
    flex: 1;
}
.text-size-popover .text-size-pop-pill .text-size-btn[aria-pressed="true"] {
    background: #1d93bd;
    color: #fff;
}
.text-size-popover .text-size-pop-pill .text-size-btn:hover {
    background: rgba(0, 0, 0, 0.06);
    color: #222;
}
.text-size-popover .text-size-pop-pill .text-size-btn[aria-pressed="true"]:hover {
    background: #1d93bd;
    color: #fff;
}

/* ============================================================
   HOMEPAGE — tighten section spacing
   ============================================================ */
.sidebar-section + .sidebar-section { margin-top: 20px; }
.switzer-report-section { margin-top: 16px; margin-bottom: 28px; }

/* ============================================================
   MOBILE adjustments
   ============================================================ */
@media (max-width: 768px) {
    /* On mobile: top-bar already hidden (per existing theme rule) -
       show compact aA trigger instead */
    .text-size-control { display: none !important; }
    .text-size-mobile-wrapper { display: inline-flex !important; align-items: center; }

    /* Article meta: hide share buttons, save/reading-list button, AND read time */
    .article-meta .share-buttons,
    .article-meta .reading-list-btn,
    .article-meta .meta-item--read-time { display: none !important; }
    .article-meta .meta-divider { display: none !important; }
}

/* SD home-hero section: kill 60px bottom padding so gap above yellow box = 32px
   (Our Experts margin-bottom only). Was contributing 60px extra on mobile. */
@media (max-width: 900px) {
    .hero {
        padding-bottom: 0 !important;
    }
}

@media (max-width: 768px) {
    /* SD mobile nav: override existing absolute positioning of .nav-search so
       the text-size aA button + search icon sit side-by-side, not stacked.
       Existing rule at style.css:1997 absolutely-positions nav-search. */
    .main-navigation .nav-search {
        position: static !important;
        transform: none !important;
        top: auto !important;
        right: auto !important;
        margin-left: 0 !important;
    }
    .main-navigation .text-size-mobile-wrapper {
        margin-left: auto;
        margin-right: 6px;
    }

    /* SD experts grid on mobile: existing rule turns it into a horizontal-scroll
       flex container which makes Rudi run off the edge. Force it back to a
       3-column 2-row grid that fits within the viewport. */
    .sidebar-section .experts-grid,
    .home .experts-grid {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 14px 8px !important;
        overflow-x: visible !important;
        flex-wrap: wrap !important;
        padding-bottom: 0 !important;
    }
    .sidebar-section .expert-card,
    .sidebar-section a.expert-card,
    .home .expert-card,
    .home a.expert-card {
        flex: unset !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }
    .sidebar-section .expert-avatar,
    .home .expert-avatar {
        width: 62px !important;
        height: 62px !important;
    }
}