/* ==========================================================================
   Tech Mansion — Site 1.18.2
   --------------------------------------------------------------------------
   One clean design system for every page type, plus the reworked header /
   nav and the slide-in mobile menu. Loaded LAST in the child cascade
   (after tm-device-surfaces). It deliberately does NOT restyle the
   plugin comparison app internals on /devicedetails/ (#tm-comparison-root
   owns its own styles) — only the theme chrome around it.
   ========================================================================== */

:root {
    --tm18-navy: #003366;
    --tm18-navy-deep: #0a2547;
    --tm18-ink: #12263c;
    --tm18-ink-2: #3d546e;
    --tm18-muted: #6d8299;
    --tm18-line: #e3eaf1;
    --tm18-line-soft: #eef2f7;
    --tm18-bg: #f5f8fb;
    --tm18-surface: #ffffff;
    --tm18-tint: #eef4fb;
    --tm18-accent: #ff6600;
    --tm18-accent-dark: #b34d00;
    --tm18-accent-tint: #fff1e5;
    --tm18-green: #15803d;
    --tm18-amber: #f59e0b;
    --tm18-red: #dc2626;
    --tm18-r-sm: 10px;
    --tm18-r-md: 14px;
    --tm18-r-lg: 18px;
    --tm18-shadow: 0 1px 2px rgba(10, 37, 71, .05), 0 10px 30px -18px rgba(10, 37, 71, .22);
    --tm18-shadow-lift: 0 2px 4px rgba(10, 37, 71, .06), 0 18px 38px -18px rgba(10, 37, 71, .32);
    --tm18-max: 1440px;
    --tm18-gutter: clamp(1rem, 3vw, 2rem);
    --tm18-header-h: 68px;
}

@media (min-width: 1024px) {
    :root { --tm18-header-h: 76px; }
}

/* ---------- Base rhythm ---------- */

body { background: var(--tm18-bg); color: var(--tm18-ink); }

.ast-container,
.tm-section-container {
    max-width: var(--tm18-max);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--tm18-gutter);
    padding-right: var(--tm18-gutter);
}

/* The plugin app on /devicedetails/ breaks out to its own 1440px inner
   width; keep the theme container from double-padding that page. */
.page-template-default .entry-content > #tm-comparison-root { max-width: none; }

h1, h2, h3, h4 { color: var(--tm18-navy-deep); letter-spacing: -.015em; }

.tm-section-header h2,
.tm-section-title {
    font-size: clamp(1.35rem, 2.4vw, 1.75rem);
    font-weight: 800;
    line-height: 1.2;
}

a:focus-visible,
button:focus-visible,
input:focus-visible {
    outline: 2px solid var(--tm18-accent);
    outline-offset: 2px;
}

/* ---------- Header / nav (rework) ----------
   Same structure and links as 1.16.x — flatter, calmer, matte.
   The glass gradients, shine sweeps, floating social icons and lift
   transforms from header.css / modern-nav-enhancements.css are
   neutralised here. */

.tm-site-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: var(--tm18-surface);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom: 1px solid var(--tm18-line);
    box-shadow: none;
    padding: 0 var(--tm18-gutter);
    transition: box-shadow .2s ease;
}
.tm-site-header.scrolled { box-shadow: 0 8px 28px -14px rgba(10, 37, 71, .28); }
body.admin-bar .tm-site-header { top: 32px; }
@media screen and (max-width: 782px) { body.admin-bar .tm-site-header { top: 46px; } }

.tm-header-container {
    max-width: var(--tm18-max);
    height: var(--tm18-header-h);
}

.tm-site-branding a { transition: none; }
.tm-site-branding a:hover { transform: none; }
.tm-site-branding img { max-height: 40px; filter: none; }
@media (min-width: 1024px) { .tm-site-branding img { max-height: 44px; } }

@media (min-width: 1024px) {
    .tm-main-navigation ul { gap: .25rem; }
    .tm-main-navigation a {
        padding: .55rem .95rem;
        font-size: .95rem;
        font-weight: 600;
        color: var(--tm18-ink-2);
        border-radius: 999px;
        overflow: visible;
        transition: background .15s ease, color .15s ease;
    }
    .tm-main-navigation a::before,
    .tm-main-navigation a::after { display: none; }
    .tm-main-navigation a:hover,
    .tm-main-navigation li.current-menu-item > a,
    .tm-main-navigation li.current-menu-ancestor > a {
        background: var(--tm18-tint);
        color: var(--tm18-navy);
        transform: none;
        box-shadow: inset 0 -3px 0 var(--tm18-accent);
    }
    .tm-main-navigation li.current-menu-item > a,
    .tm-main-navigation li.current-menu-ancestor > a {
        background: var(--tm18-accent-tint);
        color: var(--tm18-navy);
    }
    .tm-main-navigation .sub-menu {
        background: var(--tm18-surface);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        border: 1px solid var(--tm18-line);
        border-radius: var(--tm18-r-md);
        box-shadow: var(--tm18-shadow-lift);
        padding: .5rem;
        min-width: 230px;
        transform: translateY(6px);
        transition: opacity .16s ease, transform .16s ease, visibility .16s;
    }
    .tm-main-navigation li:hover > .sub-menu,
    .tm-main-navigation li:focus-within > .sub-menu { transform: translateY(0); }
    .tm-main-navigation .sub-menu a { padding: .6rem .8rem; border-radius: var(--tm18-r-sm); }
    .tm-main-navigation .sub-menu a:hover { box-shadow: none; }
}

.tm-header-actions { gap: .5rem; }
.tm-header-action-btn {
    width: 44px;
    height: 44px;
    border-radius: 999px;
    background: var(--tm18-surface);
    border: 1px solid var(--tm18-line);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    color: var(--tm18-navy);
    transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.tm-header-action-btn:hover {
    transform: none;
    box-shadow: none;
    border-color: var(--tm18-navy);
    background: var(--tm18-tint);
    color: var(--tm18-navy);
}

/* Socials: present on wide screens, still — no floating animation. */
.tm-desktop-socials a {
    animation: none;
    background: transparent;
    border: 0;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    padding: .5rem;
}
.tm-desktop-socials a:hover { transform: none; box-shadow: none; color: var(--tm18-accent-dark); }

/* Hamburger exists exactly where the desktop nav does not. In 1.16.x
   it stayed visible from 1024–1199px alongside the desktop menu. */
.tm-mobile-menu-toggle { position: relative; z-index: 1001; }
@media (min-width: 1024px) { .tm-mobile-menu-toggle { display: none; } }

/* Search panel */
.tm-search-bar {
    top: calc(var(--tm18-header-h) + 1px);
    background: var(--tm18-surface);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom: 1px solid var(--tm18-line);
    border-radius: 0;
    box-shadow: var(--tm18-shadow-lift);
    padding: 1rem var(--tm18-gutter);
    z-index: 999;
}
.tm-search-bar input[type="search"] {
    background: var(--tm18-surface);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 1.5px solid var(--tm18-line);
    border-radius: 999px;
    box-shadow: none;
    animation: none;
    font-size: 1rem;
    padding: .8rem 1.25rem;
}
.tm-search-bar input[type="search"]:focus {
    border-color: var(--tm18-accent);
    box-shadow: 0 0 0 3px rgba(255, 102, 0, .18);
    transform: none;
    animation: none;
}

/* ---------- Mobile menu: slide-in panel ----------
   1.16.x made the whole overlay a full-screen gradient page. 1.18
   makes the overlay a scrim and slides a white panel in from the
   left — native-app feel, 48px+ tap targets, quick links to Phones /
   Laptops / Devices / Compare first (the sections he taps most). */

.tm-mobile-nav-overlay {
    background: rgba(9, 24, 43, .52);
    backdrop-filter: none;
    overflow: hidden;
    z-index: 1100;
    transition: opacity .25s ease, visibility .25s;
}
.tm-mobile-nav-overlay::before { display: none; }
body.admin-bar .tm-mobile-nav-overlay { top: 0; }

.tm-mobile-nav-panel {
    position: absolute;
    top: 0;
    left: 0;
    height: 100dvh;
    width: min(360px, 88vw);
    background: var(--tm18-surface);
    box-shadow: 24px 0 48px -24px rgba(9, 24, 43, .5);
    transform: translateX(-102%);
    transition: transform .28s cubic-bezier(.32, .72, 0, 1);
    overflow-y: auto;
    overscroll-behavior: contain;
    display: flex;
    flex-direction: column;
}
.tm-mobile-nav-overlay.is-open .tm-mobile-nav-panel { transform: translateX(0); }
.tm-mobile-nav-overlay.is-open .tm-mobile-nav-menu li { animation: none; }

.tm-mobile-nav-header {
    height: var(--tm18-header-h);
    padding: 0 1rem 0 1.25rem;
    background: var(--tm18-surface);
    border-bottom: 1px solid var(--tm18-line);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    flex: 0 0 auto;
}
.tm-mobile-nav-header .tm-mobile-nav-logo img { max-height: 38px; filter: none; }
.tm-mobile-nav-close {
    width: 44px; height: 44px;
    display: flex; align-items: center; justify-content: center;
    background: var(--tm18-tint);
    border: 1px solid var(--tm18-line);
    color: var(--tm18-navy);
    border-radius: 999px;
    font-size: 1.15rem;
}
.tm-mobile-nav-close:hover { transform: none; background: var(--tm18-accent-tint); color: var(--tm18-accent-dark); }

.tm-mobile-nav-content { padding: 1.1rem 1.25rem 2rem; }
.tm-mobile-nav-search { margin-bottom: 1rem; }
.tm-mobile-nav-search input[type="search"] {
    background: var(--tm18-surface);
    border: 1.5px solid var(--tm18-line);
    color: var(--tm18-ink);
    border-radius: 999px;
    padding: .75rem 1.1rem;
    font-size: 1rem;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
.tm-mobile-nav-search input[type="search"]::placeholder { color: var(--tm18-muted); }
.tm-mobile-nav-search input[type="search"]:focus { border-color: var(--tm18-accent); box-shadow: 0 0 0 3px rgba(255,102,0,.16); background: var(--tm18-surface); }

.tm-mobile-quick-links {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .55rem;
    margin-bottom: 1.1rem;
}
.tm-mobile-quick-link {
    display: flex; align-items: center; gap: .55rem;
    min-height: 48px;
    padding: .6rem .8rem;
    border: 1px solid var(--tm18-line);
    border-radius: var(--tm18-r-md);
    background: var(--tm18-tint);
    color: var(--tm18-navy);
    font-weight: 700;
    font-size: .95rem;
    text-decoration: none;
}
.tm-mobile-quick-link i { color: var(--tm18-accent-dark); }
.tm-mobile-quick-link:active { background: var(--tm18-accent-tint); }

.tm-mobile-nav-menu li a {
    color: var(--tm18-ink);
    font-size: 1.06rem;
    font-weight: 600;
    padding: .85rem .25rem;
    min-height: 48px;
    border-bottom: 1px solid var(--tm18-line-soft);
    margin: 0;
    border-radius: 0;
    display: flex; align-items: center;
}
.tm-mobile-nav-menu li a:hover {
    color: var(--tm18-navy);
    background: transparent;
    transform: none;
    padding-left: .25rem;
}
.tm-mobile-nav-menu li.current-menu-item > a { color: var(--tm18-accent-dark); }
.tm-mobile-nav-menu .sub-menu {
    background: var(--tm18-tint);
    border-left: 3px solid var(--tm18-accent);
    border-radius: 0 var(--tm18-r-md) var(--tm18-r-md) 0;
    padding-left: 1rem;
}
.tm-mobile-nav-menu .sub-menu a { font-size: .98rem; padding: .7rem .25rem; }
.tm-mobile-nav-menu .submenu-toggle {
    background: var(--tm18-tint);
    border: 1px solid var(--tm18-line);
    color: var(--tm18-navy);
    min-width: 40px; min-height: 40px;
}

.tm-mobile-socials { border-top: 1px solid var(--tm18-line-soft); margin-top: 1.6rem; padding-top: 1.2rem; }
.tm-mobile-socials a {
    color: var(--tm18-navy);
    background: var(--tm18-tint);
    border: 1px solid var(--tm18-line);
    font-size: 1.25rem;
    padding: .7rem;
    margin: 0 .3rem;
}
.tm-mobile-socials a:hover { transform: none; box-shadow: none; color: var(--tm18-accent-dark); background: var(--tm18-accent-tint); }

@media (prefers-reduced-motion: reduce) {
    .tm-mobile-nav-panel, .tm-mobile-nav-overlay { transition: none; }
}

/* ---------- Homepage ---------- */

.home .ast-container { max-width: none; }
.tm-main-grid { max-width: var(--tm18-max); margin: 0 auto; padding: 1.75rem 0 3rem; }
.tm-category-section { padding: 1.6rem 0 .4rem; }
.tm-category-section + .tm-category-section { border-top: 1px solid var(--tm18-line-soft); }

.tm-card,
.tm-content-card,
.tm-icymi-list-item,
.tm-laptop-secondary-card {
    background: var(--tm18-surface);
    border: 1px solid var(--tm18-line);
    border-radius: var(--tm18-r-lg);
    box-shadow: var(--tm18-shadow);
}
.tm-card:hover,
.tm-content-card:hover { box-shadow: var(--tm18-shadow-lift); }

.tm-view-all-link { color: var(--tm18-accent-dark); font-weight: 700; text-decoration: none; }
.tm-view-all-link:hover { text-decoration: underline; }

.tm-load-more-btn {
    border-radius: 999px;
    border: 1.5px solid var(--tm18-navy);
    background: var(--tm18-surface);
    color: var(--tm18-navy);
    font-weight: 700;
    min-height: 48px;
    padding: .7rem 1.6rem;
}
.tm-load-more-btn:hover { background: var(--tm18-navy); color: #fff; }

/* ---------- News archive / category / search (Astra loop markup) ---------- */

.blog .ast-container,
.archive .ast-container,
.search .ast-container { max-width: var(--tm18-max); }

.ast-archive-description { margin-bottom: 1.25rem; }
.ast-archive-title,
.page-title {
    font-size: clamp(1.6rem, 3.4vw, 2.3rem);
    font-weight: 800;
    color: var(--tm18-navy-deep);
}

.blog .ast-row,
.archive .ast-row,
.search .ast-row { row-gap: 1.4rem; }

.ast-article-post {
    background: var(--tm18-surface);
    border: 1px solid var(--tm18-line);
    border-radius: var(--tm18-r-lg);
    box-shadow: var(--tm18-shadow);
    overflow: hidden;
}
.ast-article-post .post-content { padding: 1.1rem 1.25rem 1.3rem; }
.ast-article-post .entry-title { font-size: 1.18rem; line-height: 1.32; font-weight: 750; }
.ast-article-post .entry-title a { color: var(--tm18-ink); text-decoration: none; }
.ast-article-post .entry-title a:hover { color: var(--tm18-navy); }
.ast-article-post .entry-meta,
.ast-article-post .entry-meta * { color: var(--tm18-muted); font-size: .83rem; }
.ast-article-post .ast-blog-featured-section img { aspect-ratio: 16/10; object-fit: cover; width: 100%; }
.ast-article-post .read-more a,
.ast-article-post .ast-read-more a {
    color: var(--tm18-accent-dark);
    font-weight: 700;
    text-decoration: none;
}

.ast-pagination .page-numbers {
    border: 1px solid var(--tm18-line);
    border-radius: 999px;
    background: var(--tm18-surface);
    color: var(--tm18-navy);
    min-width: 42px; min-height: 42px;
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 650;
}
.ast-pagination .page-numbers.current { background: var(--tm18-navy); color: #fff; border-color: var(--tm18-navy); }

/* Search results emphasise the matched story list, same card language. */
.search .ast-article-post .entry-header { margin-bottom: .4rem; }
.search-no-results .ast-404-layout-1,
.search .no-results { background: var(--tm18-surface); border: 1px solid var(--tm18-line); border-radius: var(--tm18-r-lg); padding: 2rem; }

/* ---------- Single article (reading experience) ---------- */

.single-post .tm-single-post-container { width: 100%; max-width: var(--tm18-max); }
.tm-single-post-article {
    border: 1px solid var(--tm18-line);
    border-radius: var(--tm18-r-lg);
    box-shadow: var(--tm18-shadow);
    max-width: 1060px;
    margin: 0 auto;
}
.tm-single-post-article .entry-header { max-width: 760px; }
.tm-single-post-article .entry-title {
    font-size: clamp(1.75rem, 4.2vw, 2.6rem);
    line-height: 1.14;
    font-weight: 820;
    color: var(--tm18-navy-deep);
}
.tm-entry-dek { font-size: 1.08rem; line-height: 1.55; color: var(--tm18-ink-2); }
.tm-single-post-article .entry-content {
    max-width: 760px;
    font-size: 1.05rem;
    line-height: 1.78;
    color: var(--tm18-ink);
}
.tm-single-post-article .entry-content p { margin-bottom: 1.35em; }
.tm-single-post-article .entry-content h2 {
    font-size: 1.5rem; line-height: 1.25; margin: 1.9em 0 .6em; color: var(--tm18-navy-deep);
}
.tm-single-post-article .entry-content h3 { font-size: 1.22rem; margin: 1.6em 0 .5em; }
.tm-single-post-article .entry-content img { border-radius: var(--tm18-r-md); }
.tm-single-post-article .entry-content a { color: var(--tm18-navy); text-decoration-color: rgba(255, 102, 0, .55); text-underline-offset: 3px; }
.tm-single-post-article .entry-content blockquote {
    border-left: 4px solid var(--tm18-accent);
    background: var(--tm18-tint);
    border-radius: 0 var(--tm18-r-md) var(--tm18-r-md) 0;
    padding: 1rem 1.25rem;
    margin: 1.6em 0;
}
/* Daily-post styled blocks (.tm-wrap and friends) are content-owned:
   1.18 only guarantees they never overflow the reading column. */
.tm-single-post-article .entry-content .tm-wrap,
.tm-single-post-article .entry-content table { max-width: 100%; }
.tm-single-post-article .entry-content table { display: block; overflow-x: auto; }

.tm-post-thumbnail img { border-radius: var(--tm18-r-lg); aspect-ratio: 16/9; object-fit: cover; width: 100%; }
.tm-entry-meta-category {
    background: var(--tm18-accent-tint);
    border: 1px solid rgba(255, 102, 0, .35);
    color: var(--tm18-accent-dark);
    border-radius: 999px;
    font-weight: 700;
}
.tm-share-btn {
    border: 1px solid var(--tm18-line);
    background: var(--tm18-surface);
    color: var(--tm18-navy);
    border-radius: 999px;
    min-height: 42px;
    font-weight: 650;
}
.tm-author-box {
    max-width: 1060px; margin: 1.4rem auto 0;
    background: var(--tm18-surface);
    border: 1px solid var(--tm18-line);
    border-radius: var(--tm18-r-lg);
    box-shadow: var(--tm18-shadow);
}
.tm-related-posts { max-width: 1060px; margin-left: auto; margin-right: auto; }
.tm-related-posts h3 { font-size: 1.3rem; font-weight: 800; }

/* ---------- Single device page (refine, on top of device-surfaces) ---------- */

.tm-device-page .ast-container { max-width: var(--tm18-max); }
.tm13-hero {
    background: var(--tm18-surface);
    border: 1px solid var(--tm18-line);
    border-radius: var(--tm18-r-lg);
    box-shadow: var(--tm18-shadow);
}
.tm13-title { color: var(--tm18-navy-deep); letter-spacing: -.02em; }
.tm13-pill { border-radius: 999px; }
.tm13-btn--primary { background: var(--tm18-navy); border-radius: 999px; }
.tm13-btn--primary:hover { background: var(--tm18-navy-deep); }
.tm13-btn--ghost { border-radius: 999px; }

/* Score bars take the matte band colours (same set as the listing
   chips): green >= 7, amber 6–6.9 with dark text, red < 6. The fill
   colour is applied by band class added in device-surfaces markup
   order; value chip keeps AA contrast. */
.tm14-score-fill { background: var(--tm18-navy); }
.tm14-score-row[data-band="good"] .tm14-score-fill { background: var(--tm18-green); }
.tm14-score-row[data-band="mid"] .tm14-score-fill { background: var(--tm18-amber); }
.tm14-score-row[data-band="low"] .tm14-score-fill { background: var(--tm18-red); }
.tm14-scores-overall strong { color: var(--tm18-navy); }

.tm13-spec-card {
    background: var(--tm18-surface);
    border: 1px solid var(--tm18-line);
    border-radius: var(--tm18-r-lg);
    box-shadow: var(--tm18-shadow);
}
.tm13-side-card {
    background: var(--tm18-surface);
    border: 1px solid var(--tm18-line);
    border-radius: var(--tm18-r-lg);
    box-shadow: var(--tm18-shadow);
    position: sticky;
    top: calc(var(--tm18-header-h) + 14px);
}
/* The Amazon affiliate retailer links keep their sponsored markup and
   behaviour; 1.18 only gives the price card's CTA the primary style. */
.tm13-side-card a[rel~="sponsored"] { font-weight: 700; }

.tm13-subnav {
    position: sticky;
    top: var(--tm18-header-h);
    background: rgba(255, 255, 255, .96);
    z-index: 40;
    border-bottom: 1px solid var(--tm18-line-soft);
}

/* Devices archive + Phone/Laptop category grids share the listing
   card language: equal media stage, one key-spec line, matte chip. */
.tm-dcard {
    background: var(--tm18-surface);
    border: 1px solid var(--tm18-line);
    border-radius: var(--tm18-r-lg);
    box-shadow: var(--tm18-shadow);
    overflow: hidden;
}

/* ---------- Static pages & 404 ---------- */

.page .entry-content { max-width: 860px; line-height: 1.75; }
.page .entry-title { font-size: clamp(1.7rem, 3.6vw, 2.4rem); font-weight: 820; color: var(--tm18-navy-deep); }

.tm-404 { max-width: 720px; margin: 0 auto; text-align: center; padding: 3.5rem 1rem 4.5rem; }
.tm-404-code { font-size: clamp(3.4rem, 10vw, 5.5rem); font-weight: 850; color: var(--tm18-navy); line-height: 1; }
.tm-404-code span { color: var(--tm18-accent); }
.tm-404 h1 { font-size: clamp(1.4rem, 3vw, 1.9rem); margin: .8rem 0 .5rem; }
.tm-404 p { color: var(--tm18-ink-2); }
.tm-404-actions { display: flex; gap: .7rem; justify-content: center; flex-wrap: wrap; margin-top: 1.4rem; }
.tm-404-actions a {
    min-height: 48px; display: inline-flex; align-items: center;
    padding: .65rem 1.4rem; border-radius: 999px; font-weight: 700; text-decoration: none;
    border: 1.5px solid var(--tm18-navy); color: var(--tm18-navy); background: var(--tm18-surface);
}
.tm-404-actions a.tm-404-primary { background: var(--tm18-navy); color: #fff; }

/* ---------- Small screens ---------- */

@media (max-width: 544px) {
    .tm-site-header { padding: 0 .9rem; }
    .tm-single-post-article { border-radius: var(--tm18-r-md); }
    .tm13-side-card { position: static; }
    .ast-article-post .post-content { padding: .95rem 1rem 1.1rem; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}

/* Device layout children must be allowed to shrink inside the grid. */
.tm13-main, .tm13-side { min-width: 0; }

/* ---------- Sidebar feature widgets (1.18.1 contrast fix) ----------
   design-system.css flattens every .tm-sidebar-widget to a white
   surface (background: var(--tm15-surface), specificity 0-1-0,
   loaded after style.css), which removed the dark gradient cards
   style.css designed for .tm-trending-widget / .tm-newsletter-widget
   — but every colour inside those two widgets was designed for a
   dark card and survived: the variant titles (white, 0-2-0 in
   style.css) measured 1.08:1 on the title's own near-white band
   (#f4f7f8, from style.css), and the bodies were the same bug —
   .tm-trending-title white, .tm-trending-meta inheriting white,
   newsletter copy rgba(255,255,255,.9) and white-text glass buttons,
   all invisible on the flattened white card.
   These two are feature/spotlight widgets (Trending + signup), so
   instead of flattening their text like the plain widgets, restore
   them as flat NAVY feature cards (#003366 — the old purple/pink
   gradients stay gone, off-brand) and let the white design work as
   designed, with #FF6600 accents. All rules below sit in this
   last-loaded sheet at 0-2-0 or higher, so each one beats the rule
   it replaces on specificity, order, or both (noted per rule). */

/* The card itself. 0-2-0 beats design-system's flattened white
   .tm-sidebar-widget background (0-1-0) and style.css's gradient
   rules for the variants (0-1-0). */
.tm-sidebar-widget.tm-trending-widget,
.tm-sidebar-widget.tm-newsletter-widget {
    background: var(--tm18-navy);
    color: #fff;
    border-color: #00264d;
}

/* Titles stay WHITE on the navy card (this supersedes the
   titles-only navy-text approach for these two variants). 0-2-0
   ties style.css's variant title rules and wins on sheet order;
   the near-white title band from style.css (.tm-sidebar-widget-title
   background-color, 0-1-0) is removed with transparent so the title
   sits on the card; underline and icon take the orange accent —
   #FF6600 on #003366 is 4.29:1, fine for a large bold heading's
   decoration and a glyph, and the white heading text is 12.61:1. */
.tm-trending-widget .tm-sidebar-widget-title,
.tm-newsletter-widget .tm-sidebar-widget-title {
    color: #fff;
    background-color: transparent;
    border-bottom-color: var(--tm18-accent);
}
.tm-trending-widget .tm-sidebar-widget-title i,
.tm-newsletter-widget .tm-sidebar-widget-title i {
    color: var(--tm18-accent);
}

/* Trending body. Post titles are already white in style.css
   (0-1-0, unopposed) and the meta row inherits the widget's white
   at its designed 0.8 opacity — both read correctly on navy with
   no override. Only the item divider needs help: the generic
   .tm-sidebar-list li border (0-1-1, light --tm-border-color)
   outranks .tm-trending-item's designed rgba(255,255,255,.1)
   divider (0-1-0), so restate it at 0-2-0. */
.tm-trending-widget .tm-trending-item {
    border-bottom-color: rgba(255, 255, 255, 0.14);
}

/* Trending link hover/focus: orange. Pure #FF6600 text on #003366
   measures 4.29:1 — a hair under the 4.5:1 AA line for 0.95rem
   text — so the hover TEXT uses the lightest brand-orange tint
   that clears it (#ff8a3d, 5.38:1); the exact accent hex carries
   the underline. The designed opacity fade (style.css
   .tm-trending-title:hover, 0-2-0) is replaced at 0-3-0. */
.tm-trending-widget .tm-trending-title:hover,
.tm-trending-widget .tm-trending-title:focus-visible {
    color: #ff8a3d;
    opacity: 1;
    text-decoration: underline;
    text-decoration-color: var(--tm18-accent);
    text-underline-offset: 3px;
}

/* Newsletter body. The copy rule (style.css, rgba(255,255,255,.9))
   already measures 10.51:1 on navy — untouched. The dormant form
   styles (no template ships the form today) also already work on
   navy — the input keeps its near-white field with dark text — so
   they are left alone too. Only the two action buttons need work:
   their glass-white treatment (style.css 0-1-0 / theme-refresh
   0-1-0) was designed for a dark card but the white CARD made their
   white labels invisible; on navy the primary becomes an
   orange-tinted glass button with an orange border and a white
   label (10.24:1 — a solid orange fill cannot carry text: white on
   #FF6600 is 2.94:1, navy on it 4.29:1), and the secondary keeps
   its quieter white-glass design, which measures 8.94:1 on navy.
   Rules at 0-2-0; hovers at 0-3-0 beat style.css's .tm-newsletter-btn:hover
   (0-2-0). Secondary rules follow the primary's — equal specificity,
   later wins. */
.tm-newsletter-widget .tm-newsletter-btn {
    background: rgba(255, 102, 0, 0.25);
    border-color: var(--tm18-accent);
    color: #fff;
}
.tm-newsletter-widget .tm-newsletter-btn:hover,
.tm-newsletter-widget .tm-newsletter-btn:focus-visible {
    background: rgba(255, 102, 0, 0.4);
    border-color: var(--tm18-accent);
}
.tm-newsletter-widget .tm-newsletter-btn-secondary {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.35);
    color: #fff;
}
.tm-newsletter-widget .tm-newsletter-btn-secondary:hover,
.tm-newsletter-widget .tm-newsletter-btn-secondary:focus-visible {
    background: rgba(255, 255, 255, 0.22);
    border-color: rgba(255, 255, 255, 0.55);
}