/*
Theme Name: TVZoom Rotocalco
Theme URI: https://www.tvzoom.it
Author: TVZoom
Description: Editorial magazine theme for TVZoom - Italian TV, entertainment and sport. Paper-white masthead, Playfair Display headlines, hairline rules, no gradients.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.9
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: tvzoom
Tags: news, magazine, editorial, italian, responsive
*/

/* ==========================================================================
   1. FONTS (self-hosted - no third-party requests, no GDPR exposure)
   ========================================================================== */
@font-face {
    font-family: 'Playfair Display';
    font-style: normal;
    font-weight: 600 800;
    font-display: swap;
    src: url('fonts/playfair-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Playfair Display';
    font-style: normal;
    font-weight: 600 800;
    font-display: swap;
    src: url('fonts/playfair-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'InterVar';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('fonts/inter-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'InterVar';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('fonts/inter-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ==========================================================================
   2. DESIGN TOKENS
   ========================================================================== */
:root {
    /* Ink & paper */
    --ink:        #141821;
    --navy:       #0A1B3D;   /* brand carry-over: masthead type, footer, rules */
    --navy-soft:  #22375F;
    --muted:      #616B7C;
    --paper:      #FFFFFF;
    --wash:       #F6F7F9;
    --rule:       #E4E7ED;
    --rule-2:     #CBD1DB;

    /* Spot colour. Single hot accent, used sparingly: kickers, section rules,
       link hover, current nav item. Swap this one value to re-tune the site. */
    --accent:      #C40D22;
    --accent-dark: #9C0A1B;

    /* Action colour, used only for affiliate CTA buttons. Kept separate from the
       editorial accent so the two can be tuned independently. White on this
       green measures ~5.6:1, above the 4.5:1 floor for the small bold label. */
    --cta:      #0C6E36;
    --cta-dark: #085127;

    /* Type */
    --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
    --font-ui: 'InterVar', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;

    /* Metrics */
    --wrap: 1180px;
    --gutter: 20px;
    --topbar-h: 34px;
    --masthead-h: 68px;
    --measure: 720px;      /* article reading column */
    --measure-wide: 1040px; /* money / review pages */
}

/* ==========================================================================
   3. RESET & BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    font-family: var(--font-ui);
    font-size: 1.0625rem;
    line-height: 1.65;
    color: var(--ink);
    background: var(--paper);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-synthesis-weight: none;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--navy); text-decoration: none; }
a:hover { color: var(--accent); }
h1, h2, h3, h4, h5, h6 { margin: 0 0 .6em; font-weight: 700; line-height: 1.18; color: var(--navy); }
p { margin: 0 0 1.15em; }
ul, ol { margin: 0 0 1.15em; padding-left: 1.3em; }
button { font: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.screen-reader-text {
    position: absolute !important; width: 1px; height: 1px; overflow: hidden;
    clip: rect(1px,1px,1px,1px); white-space: nowrap;
}
.skip-link:focus {
    position: fixed; top: 8px; left: 8px; z-index: 2000; width: auto; height: auto;
    clip: auto; padding: .6rem 1rem; background: var(--navy); color: #fff;
}

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }

/* ==========================================================================
   4. MASTHEAD
   ========================================================================== */
.topbar {
    background: var(--navy);
    color: rgba(255,255,255,.72);
    font-size: .75rem;
    letter-spacing: .04em;
    height: var(--topbar-h);
}
.topbar .wrap { display: flex; align-items: center; justify-content: space-between; height: 100%; }
.topbar-date { text-transform: capitalize; }
.topbar-tag { color: rgba(255,255,255,.55); }

.masthead {
    background: var(--paper);
    border-bottom: 1px solid var(--rule);
    position: sticky;
    top: 0;
    z-index: 900;
}
.masthead-inner {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    height: var(--masthead-h);
    max-width: var(--wrap);
    margin: 0 auto;
    padding: 0 var(--gutter);
}
.brand { flex: 0 0 auto; display: flex; align-items: center; }
.brand img { height: 38px; width: auto; }
.brand .brand-text {
    font-family: var(--font-display);
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--navy);
    letter-spacing: -.02em;
}

.nav { margin-left: auto; }
.nav ul { display: flex; align-items: center; gap: 1.6rem; margin: 0; padding: 0; list-style: none; }
.nav a {
    display: block;
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--navy);
    padding: .45rem 0;
    border-bottom: 2px solid transparent;
}
.nav a:hover { color: var(--accent); border-bottom-color: var(--accent); }
.nav .current-menu-item > a,
.nav .current_page_item > a { color: var(--accent); border-bottom-color: var(--accent); }

.search-toggle {
    flex: 0 0 auto; background: none; border: 0; cursor: pointer;
    color: var(--navy); padding: .4rem; line-height: 0;
}
.search-toggle:hover { color: var(--accent); }
.search-toggle svg { width: 19px; height: 19px; fill: currentColor; }

.search-panel { display: none; border-bottom: 1px solid var(--rule); background: var(--wash); }
.search-panel.open { display: block; }
.search-panel form { display: flex; gap: .5rem; max-width: var(--wrap); margin: 0 auto; padding: .9rem var(--gutter); }
.search-panel input[type="search"] {
    flex: 1; font: inherit; padding: .6rem .8rem;
    border: 1px solid var(--rule-2); background: var(--paper); color: var(--ink);
}
.search-panel button[type="submit"] {
    border: 0; background: var(--navy); color: #fff; padding: .6rem 1.3rem;
    font-size: .8rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; cursor: pointer;
}
.search-panel button[type="submit"]:hover { background: var(--accent); }

.menu-toggle { display: none; background: none; border: 0; cursor: pointer; padding: .5rem; margin-left: auto; }
.menu-toggle span { display: block; width: 22px; height: 2px; background: var(--navy); margin: 4px 0; transition: .2s; }
.menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ==========================================================================
   5. SHARED EDITORIAL PIECES
   ========================================================================== */
/* Category kicker. NOT named .post-category - the site's Additional CSS hides
   that class on single posts. */
.kicker {
    display: inline-block;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: .5rem;
}
.kicker a { color: inherit; }
.kicker a:hover { color: var(--accent-dark); }

.meta {
    font-size: .78rem;
    color: var(--muted);
    letter-spacing: .01em;
}
.meta > * + *::before { content: "\00b7"; margin: 0 .5em; color: var(--rule-2); }

/* Section header: label + hairline + "all articles" link */
.sec-head {
    display: flex;
    align-items: baseline;
    gap: 1rem;
    margin: 0 0 1.9rem;
    border-top: 3px solid var(--navy);
    padding-top: .7rem;
}
.sec-head h2 {
    margin: 0;
    font-family: var(--font-ui);
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--navy);
    white-space: nowrap;
}
.sec-head .sec-rule { flex: 1; height: 1px; background: var(--rule); }
.sec-head .sec-more {
    font-size: .76rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--muted);
    white-space: nowrap;
}
.sec-head .sec-more:hover { color: var(--accent); }

.site-main { padding: 2.6rem 0 0; }

/* Homepage H1, set as an editorial strap rather than a hero banner. */
.home-strap { border-top: 3px solid var(--navy); padding-top: .8rem; margin: 0 0 2.4rem; }
.home-strap h1 {
    margin: 0;
    font-family: var(--font-ui);
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;
    line-height: 1.4;
    color: var(--navy);
}

/* ==========================================================================
   6. HOME - LEAD BLOCK
   ========================================================================== */
.lead-block {
    display: grid;
    grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr);
    gap: 2.4rem;
    padding-bottom: 3.4rem;
    border-bottom: 1px solid var(--rule);
    margin-bottom: 3.6rem;
}
.lead .lead-figure { margin: 0 0 1.1rem; overflow: hidden; background: var(--wash); }
.lead .lead-figure img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; transition: transform .45s ease; }
.lead .lead-figure:hover img { transform: scale(1.03); }
.lead h2 {
    font-family: var(--font-display);
    font-size: clamp(1.85rem, 3.5vw, 2.75rem);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -.015em;
    margin: 0 0 .5rem;
}
.lead h2 a { color: var(--navy); }
.lead h2 a:hover { color: var(--accent); }
.lead .lead-standfirst {
    font-size: 1.075rem;
    line-height: 1.55;
    color: var(--muted);
    margin: 0 0 .8rem;
}

.lead-list { list-style: none; margin: 0; padding: 0; }
.lead-list li { padding: 1rem 0; border-bottom: 1px solid var(--rule); }
.lead-list li:first-child { padding-top: 0; }
.lead-list li:last-child { border-bottom: 0; padding-bottom: 0; }
.lead-list .li-inner { display: flex; gap: .9rem; align-items: flex-start; }
.lead-list .li-thumb { flex: 0 0 84px; overflow: hidden; background: var(--wash); }
.lead-list .li-thumb img { width: 84px; height: 62px; object-fit: cover; }
.lead-list h3 {
    font-family: var(--font-display);
    font-size: 1.02rem;
    font-weight: 700;
    line-height: 1.28;
    margin: 0 0 .3rem;
}
.lead-list .kicker { font-size: .64rem; margin-bottom: .3rem; }

/* ==========================================================================
   7. HOME - CATEGORY BLOCKS
   ========================================================================== */
.cat-block { margin-bottom: 4.2rem; }
.cards { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 2rem 1.8rem; }
.card { display: flex; flex-direction: column; }
.card .card-figure { margin: 0 0 .75rem; overflow: hidden; background: var(--wash); }
.card .card-figure img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; transition: transform .45s ease; }
.card:hover .card-figure img { transform: scale(1.04); }
.card h3 {
    font-family: var(--font-display);
    font-size: 1.06rem;
    font-weight: 700;
    line-height: 1.26;
    margin: 0 0 .4rem;
}
.card .kicker { font-size: .66rem; margin-bottom: .35rem; }
.card .meta { margin-top: auto; padding-top: .4rem; }

/* ==========================================================================
   8. RIVER (main loop: home "Ultimi articoli", archives, search)
   ========================================================================== */
.river { margin: 0; }
.river-item {
    display: grid;
    grid-template-columns: 210px minmax(0, 1fr);
    gap: 1.4rem;
    padding: 1.9rem 0;
    border-bottom: 1px solid var(--rule);
    align-items: start;
}
.river-item:first-of-type { padding-top: .4rem; }
.river-figure { margin: 0; overflow: hidden; background: var(--wash); }
.river-figure img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; transition: transform .45s ease; }
.river-item:hover .river-figure img { transform: scale(1.04); }
.river-item h3 {
    font-family: var(--font-display);
    font-size: 1.32rem;
    font-weight: 700;
    line-height: 1.24;
    margin: 0 0 .45rem;
}
.river-item .river-excerpt { font-size: .95rem; color: var(--muted); margin: 0 0 .5rem; line-height: 1.55; }
.river-item .river-excerpt p { margin: 0; }
.river-item.no-thumb { grid-template-columns: 1fr; }

/* ==========================================================================
   9. INJECTED EDITORIAL COPY (tvzoom-category-intros plugin)
   The plugin echoes hard-coded inline styles it is not worth reinstalling to
   change, so the type is re-asserted here. Inline styles win on specificity,
   hence !important - deliberate and scoped to injected blocks only.
   ========================================================================== */
/* Kept full-width rather than a centred reading column: that is the house rule
   for these intro blocks. */
.home-copy,
.archive-intro {
    font-size: 1.0625rem;
    line-height: 1.7;
    margin: 0 0 1.5rem !important;
}
/* Short strapline intro under the H1 - separated from the lead story by a rule. */
.home-copy--lead {
    padding-bottom: 2.4rem;
    margin-bottom: 3.4rem !important;
    border-bottom: 1px solid var(--rule);
}
.home-copy--lead > *:first-child { margin-top: 0 !important; }
/* Continuation copy and FAQ, below the article blocks. */
.home-copy--rest { margin-top: 2.6rem !important; }
.home-copy--faq { margin-bottom: 3.6rem !important; }

/* Matches both the plugin's inline-styled headings and the theme's own added
   one, so the continuation band's H2 sits in the same type scale. */
.home-copy h2:not([data-tvz-listing]),
.archive-intro h2:not([data-tvz-listing]) {
    font-family: var(--font-display) !important;
    font-size: clamp(1.4rem, 2.4vw, 1.7rem) !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    letter-spacing: -.012em !important;
    color: var(--navy) !important;
    margin: 1.7em 0 .5em !important;
}
.home-copy h3,
.archive-intro h3 {
    font-family: var(--font-ui) !important;
    font-size: 1.02rem !important;
    font-weight: 700 !important;
    letter-spacing: .005em !important;
    color: var(--navy) !important;
    margin: 1.5em 0 .35em !important;
}

/* The "Ultimi Articoli" listing title, wherever the plugin drops it, is
   restyled into the same section header as the rest of the page. */
h2[data-tvz-listing] {
    font-family: var(--font-ui) !important;
    font-size: .82rem !important;
    font-weight: 700 !important;
    letter-spacing: .14em !important;
    text-transform: uppercase;
    color: var(--navy) !important;
    border-top: 3px solid var(--navy);
    padding-top: .7rem !important;
    margin: 3.6rem 0 1.6rem !important;
}

/* FAQ accordions: square them off and align the palette. */
.tvz-faq details {
    border-radius: 0 !important;
    border-color: var(--rule) !important;
}
.tvz-faq details[open] { background: var(--wash) !important; }
.tvz-faq summary { font-family: var(--font-ui); color: var(--navy) !important; }

/* ==========================================================================
   10. ARCHIVE HEADER
   ========================================================================== */
.archive-head { padding: .6rem 0 1.9rem; border-bottom: 1px solid var(--rule); margin-bottom: 2.6rem; }
.archive-head h1 {
    font-family: var(--font-display);
    font-size: clamp(1.7rem, 3.2vw, 2.4rem);
    font-weight: 800;
    letter-spacing: -.015em;
    margin: 0 0 .5rem;
}
.archive-eyebrow {
    font-size: .72rem; font-weight: 700; letter-spacing: .14em;
    text-transform: uppercase; color: var(--accent); margin-bottom: .55rem;
}
.archive-intro { color: var(--ink); }

/* ==========================================================================
   11. SINGLE POST / PAGE
   ========================================================================== */
.entry-head { max-width: var(--measure); margin: 0 auto 1.6rem; }
.entry-head h1 {
    font-family: var(--font-display);
    font-size: clamp(1.8rem, 3.4vw, 2.65rem);
    font-weight: 800;
    line-height: 1.13;
    letter-spacing: -.018em;
    margin: 0 0 .7rem;
}
.entry-meta {
    display: flex; flex-wrap: wrap; gap: .5rem 1.2rem; align-items: center;
    font-size: .8rem; color: var(--muted);
    padding: .7rem 0;
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
}
.entry-meta .by { font-weight: 600; color: var(--navy); }

.entry-content { max-width: var(--measure); margin: 0 auto; font-size: 1.09rem; line-height: 1.75; }
.has-wide-content .entry-content,
.has-wide-content .entry-head { max-width: var(--measure-wide); }
.entry-content > h2 {
    font-family: var(--font-display);
    font-size: clamp(1.4rem, 2.4vw, 1.75rem);
    font-weight: 700;
    letter-spacing: -.012em;
    margin: 2.1em 0 .5em;
}
.entry-content > h3 {
    font-family: var(--font-ui);
    font-size: 1.12rem;
    font-weight: 700;
    margin: 1.7em 0 .4em;
}
.entry-content a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
.entry-content a:hover { color: var(--accent-dark); }
.entry-content img { margin: 1.6em auto; }
.entry-content figure { margin: 1.6em 0; }
.entry-content blockquote {
    margin: 1.8em 0; padding: .2em 0 .2em 1.3em;
    border-left: 3px solid var(--accent);
    font-family: var(--font-display); font-size: 1.2rem; line-height: 1.4; color: var(--navy);
}
/* The money page and the operator reviews ship their own .scm-table system,
   including its own responsive wrap - leave those alone. */
.entry-content table:not(.scm-table) { width: 100%; border-collapse: collapse; margin: 1.6em 0; font-size: .95rem; }
.entry-content table:not(.scm-table) th,
.entry-content table:not(.scm-table) td { border: 1px solid var(--rule); padding: .6rem .7rem; text-align: left; }
.entry-content table:not(.scm-table) th { background: var(--wash); font-weight: 700; color: var(--navy); }

.entry-foot { max-width: var(--measure); margin: 2.4rem auto 0; }
.has-wide-content .entry-foot { max-width: var(--measure-wide); }
.tags { margin: 0 0 1.2rem; font-size: .8rem; }
.tags a {
    display: inline-block; padding: .25rem .7rem; margin: 0 .3rem .4rem 0;
    border: 1px solid var(--rule-2); color: var(--muted);
}
.tags a:hover { border-color: var(--accent); color: var(--accent); }

.share { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; padding-top: 1.1rem; border-top: 1px solid var(--rule); }
.share .share-label { font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-right: .3rem; }
.share a {
    font-size: .78rem; font-weight: 600; padding: .35rem .85rem;
    border: 1px solid var(--rule-2); color: var(--navy);
}
.share a:hover { background: var(--navy); border-color: var(--navy); color: #fff; }

.post-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; max-width: var(--measure); margin: 2.4rem auto 0; }
.post-nav a { display: block; padding: 1rem 1.1rem; border: 1px solid var(--rule); }
.post-nav a:hover { border-color: var(--navy); }
.post-nav .nav-dir { display: block; font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); margin-bottom: .35rem; }
.post-nav .nav-title { font-family: var(--font-display); font-size: .98rem; font-weight: 700; line-height: 1.3; color: var(--navy); }
.post-nav .to-next { text-align: right; }

.related { margin: 4.2rem 0 0; }

/* Reading progress */
.reading-progress { position: fixed; top: 0; left: 0; width: 100%; height: 3px; z-index: 1000; background: transparent; }
.reading-progress span { display: block; height: 100%; width: 0; background: var(--accent); }

/* ==========================================================================
   12. LOAD MORE
   ========================================================================== */
/* Centred single control. Rendered as a <button>, so it can never navigate;
   the crawlable /page/N/ link lives in the <noscript> beside it. */
.load-more-wrap {
    display: flex; justify-content: center; align-items: center;
    margin: 2.6rem 0 0; padding-top: 2rem;
    border-top: 1px solid var(--rule);
    text-align: center;
}
.load-more {
    display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
    min-width: 280px; margin: 0 auto; padding: 1rem 2.2rem;
    border: 1px solid var(--navy); border-radius: 0;
    color: var(--navy); background: var(--paper);
    font-family: var(--font-ui);
    font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
    line-height: 1; text-decoration: none; -webkit-appearance: none; appearance: none;
    cursor: pointer; transition: background .2s, color .2s;
}
.load-more:hover,
.load-more:focus-visible { background: var(--navy); color: #fff; }
.load-more[disabled] { cursor: default; }
.load-more.is-loading { opacity: .65; }
.load-more.is-loading::after {
    content: ""; width: 13px; height: 13px; border-radius: 50%;
    border: 2px solid currentColor; border-top-color: transparent;
    animation: tvzr-spin .7s linear infinite;
}
@keyframes tvzr-spin { to { transform: rotate(360deg); } }
.river-item.is-new { animation: tvzr-fade .4s ease both; }
@keyframes tvzr-fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ==========================================================================
   13. FOOTER
   ========================================================================== */
.site-footer { background: var(--navy); color: rgba(255,255,255,.74); margin-top: 4rem; padding: 3rem 0 1.4rem; font-size: .9rem; }
.footer-cols { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: 2.2rem; padding-bottom: 2rem; border-bottom: 1px solid rgba(255,255,255,.14); }
.footer-col h3 {
    color: #fff; font-family: var(--font-ui); font-size: .76rem; font-weight: 700;
    letter-spacing: .14em; text-transform: uppercase; margin: 0 0 1rem;
}
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col li { margin-bottom: .5rem; }
.footer-col a { color: rgba(255,255,255,.74); }
.footer-col a:hover { color: #fff; text-decoration: underline; }
/* The wordmark PNG has a white ground and no alpha, so it gets a white plate
   on the navy footer instead of sitting straight on the dark background. */
.footer-brand .footer-logo {
    display: inline-block; background: #fff;
    padding: 10px 14px; margin: 0 0 1rem; line-height: 0;
}
.footer-brand .footer-logo img { height: 34px; width: auto; }
.footer-brand .brand-mark { font-family: var(--font-display); font-size: 1.5rem; font-weight: 800; color: #fff; margin: 0 0 .6rem; }
.footer-brand p { color: rgba(255,255,255,.62); line-height: 1.6; margin: 0; }

.footer-rg {
    margin: 1.4rem 0 0; padding: .9rem 1rem;
    border: 1px solid rgba(255,255,255,.16);
    font-size: .78rem; line-height: 1.55; color: rgba(255,255,255,.62);
}
.footer-rg strong { color: #fff; }

.footer-bottom {
    display: flex; flex-wrap: wrap; gap: .6rem 1.4rem; justify-content: space-between;
    padding-top: 1.3rem; font-size: .8rem; color: rgba(255,255,255,.5);
}

/* ==========================================================================
   14. BACK TO TOP
   ========================================================================== */
.to-top {
    position: fixed; right: 1.4rem; bottom: 1.4rem; z-index: 800;
    width: 42px; height: 42px; border: 1px solid var(--rule-2); background: var(--paper);
    color: var(--navy); cursor: pointer; opacity: 0; visibility: hidden; transition: opacity .25s, visibility .25s;
    display: flex; align-items: center; justify-content: center;
}
.to-top.on { opacity: 1; visibility: visible; }
.to-top:hover { background: var(--navy); color: #fff; border-color: var(--navy); }
.to-top svg { width: 16px; height: 16px; fill: currentColor; }

/* ==========================================================================
   15. MISC
   ========================================================================== */
.no-posts { padding: 3rem 0; text-align: center; color: var(--muted); }
.page-links { margin: 1.5rem 0; font-size: .9rem; }

/* ==========================================================================
   17. BETTING CLUSTER  (/migliori-siti-scommesse/ + the 10 operator reviews)
   One system for the hub and its children, scoped to body.scm-page. The hub
   adds .money-hub, the reviews add .operator-review, for the few bits that
   differ. Nothing here can reach editorial pages.
   ========================================================================== */
.scm-page .scm-wrap { --scm-line: var(--rule); }
.scm-page .scm-wrap > h2 {
    font-family: var(--font-display);
    font-size: clamp(1.4rem, 2.4vw, 1.8rem);
    font-weight: 700;
    letter-spacing: -.012em;
    color: var(--navy);
    margin: 3.2rem 0 1.1rem;
    padding-top: 1.6rem;
    border-top: 1px solid var(--rule);
    scroll-margin-top: 90px;
}
.scm-page .scm-wrap > h3 { font-size: 1.15rem; margin: 2rem 0 .6rem; }

.scm-page .scm-crumb { font-size: .78rem; color: var(--muted); margin: 0 0 1.2rem; }
.scm-page .scm-eyebrow {
    font-size: .68rem; font-weight: 700; letter-spacing: .14em;
    text-transform: uppercase; color: var(--accent); margin: 0 0 .6rem;
}
.scm-page .scm-byline { font-size: .82rem; color: var(--muted); margin: 1rem 0 0; }

/* ---- above-the-fold verdict ---- */
.scm-page .scm-verdict {
    display: grid; grid-template-columns: minmax(0,1.6fr) minmax(0,1fr);
    gap: 2rem; align-items: start;
    padding: 2rem 0 2.4rem; margin: 0 0 3rem;
    border-top: 3px solid var(--navy); border-bottom: 1px solid var(--rule);
}
.scm-page .scm-verdict-main p { font-size: 1.075rem; line-height: 1.65; margin: 0 0 .6rem; }
.scm-page .scm-toppick {
    background: var(--wash); border: 1px solid var(--rule);
    padding: 1.2rem 1.2rem 1.3rem; text-align: center;
}
.scm-page .scm-toppick .scm-chip { margin: 0 auto .5rem; }
.scm-page .scm-toppick-hi { font-size: .86rem; color: var(--muted); margin: .5rem 0 .9rem; }

/* ---- podium ---- */
.scm-page .scm-podium { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.5rem; margin: 0 0 3rem; }
.scm-page .scm-pod {
    border: 1px solid var(--rule); border-top: 3px solid var(--rule-2);
    padding: 1.1rem 1rem 1.2rem; text-align: center;
    display: flex; flex-direction: column; align-items: center;
}
.scm-page .scm-pod-1 { border-top-color: var(--accent); }
.scm-page .scm-pod-2 { border-top-color: var(--navy); }
.scm-page .scm-pod-rank {
    font-family: var(--font-display); font-size: 1.7rem; font-weight: 800;
    color: var(--navy); line-height: 1; margin-bottom: .5rem;
}
.scm-page .scm-pod-hi { font-size: .84rem; color: var(--muted); margin: .5rem 0 .9rem; flex: 1; }
.scm-page .scm-pod-score,
.scm-page .scm-score { font-family: var(--font-display); color: var(--navy); line-height: 1; }
.scm-page .scm-pod-score strong,
.scm-page .scm-score strong { font-size: 1.6rem; font-weight: 800; }
.scm-page .scm-pod-score span,
.scm-page .scm-score span { font-size: .85rem; color: var(--muted); }
.scm-page .scm-stars { color: var(--accent); font-size: .95rem; letter-spacing: .06em; margin: .25rem 0 0; }

/* ---- jump nav ---- */
.scm-page .scm-jump {
    display: flex; gap: .4rem; overflow-x: auto; -webkit-overflow-scrolling: touch;
    padding: .8rem 0; margin: 0 0 3.2rem;
    border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
}
.scm-page .scm-jump a {
    flex: 0 0 auto; padding: .4rem .85rem;
    border: 1px solid var(--rule-2); color: var(--navy);
    font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
    text-decoration: none;
}
.scm-page .scm-jump a:hover,
.scm-page .scm-jump a.is-active { background: var(--navy); border-color: var(--navy); color: #fff; }

/* ---- brand wordmark chips ----
   Typography plus a brand-coloured accent bar, not an imitation of a logo.
   Swapping in real logo files later is one <img> against the same class. */
.scm-page .scm-chip {
    display: inline-flex; align-items: center;
    border: 1px solid var(--rule); border-left: 4px solid var(--bc, var(--navy));
    background: var(--paper); padding: 3px 9px;
    font-weight: 700; color: var(--navy); font-size: .88rem; white-space: nowrap;
}
.scm-page .scm-chip-lg { padding: 6px 13px; font-size: 1.05rem; }

/* ---- ranking cards ---- */
.scm-page .scm-ranking { margin: 0 0 3.4rem; border-top: 1px solid var(--rule); }
.scm-page .scm-card {
    display: grid; grid-template-columns: 54px minmax(0,1fr) 220px;
    gap: 1.2rem; align-items: center;
    padding: 1.7rem 0; border-bottom: 1px solid var(--rule);
}
.scm-page .scm-card.is-top { background: var(--wash); padding-inline: 1rem; border-left: 3px solid var(--accent); }
.scm-page .scm-rank {
    font-family: var(--font-display); font-size: 2rem; font-weight: 800;
    color: var(--rule-2); text-align: center; line-height: 1;
}
.scm-page .scm-card.is-top .scm-rank { color: var(--accent); }
.scm-page .scm-head { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .7rem; margin-bottom: .45rem; }
.scm-page .scm-badge {
    font-size: .62rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
    background: var(--accent); color: #fff; padding: .2rem .5rem;
}
.scm-page .scm-group { font-size: .76rem; color: var(--muted); }
.scm-page .scm-hi { font-size: .92rem; color: var(--ink); margin-bottom: .5rem; }
.scm-page .scm-feats { list-style: none; margin: 0 0 .5rem; padding: 0; display: flex; flex-wrap: wrap; gap: .3rem 1.1rem; }
.scm-page .scm-feats li { position: relative; padding-left: .95rem; font-size: .84rem; color: var(--muted); }
.scm-page .scm-feats li::before { content: "✓"; position: absolute; left: 0; color: var(--accent); font-size: .8rem; }
.scm-page .scm-revlink { font-size: .8rem; font-weight: 600; color: var(--accent); text-decoration: none; }
.scm-page .scm-revlink:hover { text-decoration: underline; }
.scm-page .scm-ctawrap { text-align: center; }

/* ---- CTA ---- */
.scm-page .scm-cta {
    display: inline-flex; align-items: center; justify-content: center;
    width: 100%; max-width: 220px; margin: .7rem auto 0; padding: .85rem 1.1rem;
    background: var(--cta); color: #fff; border: 1px solid var(--cta);
    font-size: .76rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    text-decoration: none; transition: background .2s, color .2s;
}
.scm-page .scm-cta:hover,
.scm-page .scm-cta:focus-visible { background: var(--cta-dark); border-color: var(--cta-dark); color: #fff; }
.scm-page .scm-rgmini { font-size: .64rem; color: var(--muted); margin-top: .55rem; line-height: 1.45; }

/* ---- operator logos ----
   Used automatically once all ten brand files exist; until then the wordmark
   chips render instead (see gen_scommesse.py). */
.scm-page .scm-logo {
    display: inline-flex; align-items: center; justify-content: center;
    height: 30px; width: auto; max-width: 150px; object-fit: contain;
}
.scm-page .scm-logo-lg { height: 42px; max-width: 190px; }

/* ---- comparison table ---- */
.scm-page .scm-tools {
    display: flex; flex-wrap: wrap; gap: .8rem 1.2rem;
    align-items: center; justify-content: space-between; margin: 0 0 1.4rem;
}
.scm-page .scm-filters { display: flex; flex-wrap: wrap; gap: .35rem; }
.scm-page .scm-filter {
    padding: .35rem .8rem; border: 1px solid var(--rule-2); background: var(--paper);
    color: var(--navy); font-size: .72rem; font-weight: 700; letter-spacing: .06em;
    text-transform: uppercase; cursor: pointer;
}
.scm-page .scm-filter:hover { border-color: var(--navy); }
.scm-page .scm-filter.is-on { background: var(--navy); border-color: var(--navy); color: #fff; }
.scm-page .scm-sort { display: flex; align-items: center; gap: .5rem; font-size: .74rem; color: var(--muted); }
.scm-page .scm-sort select { font: inherit; padding: .35rem .5rem; border: 1px solid var(--rule-2); background: var(--paper); color: var(--navy); }
.scm-page .scm-table-wrap { overflow-x: auto; margin: 0 0 .8rem; }
.scm-page .scm-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.scm-page .scm-table th, .scm-page .scm-table td { border: 1px solid var(--rule); padding: .6rem .7rem; text-align: left; }
.scm-page .scm-table thead th {
    background: var(--navy); color: #fff; font-size: .7rem;
    letter-spacing: .1em; text-transform: uppercase; border-color: var(--navy);
}
.scm-page .scm-table tbody tr:nth-child(even) { background: var(--wash); }
.scm-page .scm-tablenote { font-size: .85rem; color: var(--muted); }

/* ---- payments, RG, bridge ---- */
.scm-page .scm-method ul { margin: .6rem 0 0; padding-left: 1.2rem; }
.scm-page .scm-method li { margin-bottom: .35rem; }
.scm-page .scm-pay { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.2rem 0 0; }
.scm-page .scm-pay span {
    border: 1px solid var(--rule-2); padding: .3rem .7rem;
    font-size: .78rem; color: var(--muted);
}
.scm-page .scm-rg {
    border-left: 3px solid var(--accent); background: var(--wash);
    padding: 1.2rem 1.4rem; margin: 3rem 0 0; font-size: .86rem; line-height: 1.6;
}
.scm-page .scm-bridge { margin: 1.4rem 0 0; font-size: .9rem; color: var(--muted); }

/* ---- top-3 mini reviews ---- */
.scm-page .scm-review {
    display: grid; grid-template-columns: 150px minmax(0,1fr); gap: 1.4rem;
    align-items: center; border: 1px solid var(--rule); padding: 1.3rem; margin: 0 0 1.4rem;
}
.scm-page .scm-review-l { text-align: center; }
.scm-page .scm-score-lg { font-family: var(--font-display); font-size: 2rem; font-weight: 800; color: var(--navy); line-height: 1; }

/* ---- sticky mobile CTA ---- */
.scm-page .scm-sticky {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 850;
    display: none; align-items: center; justify-content: space-between; gap: .8rem;
    padding: .6rem .9rem calc(.6rem + env(safe-area-inset-bottom, 0px));
    background: var(--paper); border-top: 1px solid var(--rule-2);
    box-shadow: 0 -2px 10px rgba(10,27,61,.08);
}
.scm-page .scm-sticky.is-on { display: flex; }
.scm-page .scm-sticky-l { display: flex; align-items: center; gap: .6rem; min-width: 0; }
.scm-page .scm-sticky-score { font-family: var(--font-display); font-weight: 800; color: var(--navy); }
.scm-page .scm-sticky .scm-cta { margin: 0; width: auto; max-width: none; padding: .7rem 1.1rem; }

@media (min-width: 861px) {
    .scm-page .scm-sticky { display: none !important; }
}

@media (max-width: 860px) {
    .scm-page .scm-verdict { grid-template-columns: 1fr; gap: 1.4rem; }
    .scm-page .scm-card { grid-template-columns: 40px minmax(0,1fr); row-gap: .8rem; }
    .scm-page .scm-ctawrap { grid-column: 1 / -1; text-align: left; display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; }
    .scm-page .scm-ctawrap .scm-cta { margin: 0; max-width: none; flex: 1 1 180px; }
    .scm-page .scm-rgmini { width: 100%; margin-top: 0; }
    .scm-page .scm-review { grid-template-columns: 1fr; gap: .8rem; }
}

@media (max-width: 620px) {
    .scm-page .scm-podium { grid-template-columns: 1fr; }
    /* Stack the comparison table into cards. An overflow-x wrapper alone does
       not save a six-column table on a phone. */
    .scm-page .scm-table,
    .scm-page .scm-table thead,
    .scm-page .scm-table tbody,
    .scm-page .scm-table tr,
    .scm-page .scm-table td { display: block; width: 100%; }
    .scm-page .scm-table thead { display: none; }
    .scm-page .scm-table tr { border: 1px solid var(--rule); margin-bottom: .8rem; padding: .3rem .6rem; }
    .scm-page .scm-table tbody tr:nth-child(even) { background: var(--paper); }
    .scm-page .scm-table td { border: 0; border-bottom: 1px dotted var(--rule); padding: .5rem 0; display: flex; gap: 1rem; }
    .scm-page .scm-table td:last-child { border-bottom: 0; }
    .scm-page .scm-table td::before {
        content: attr(data-th); flex: 0 0 42%;
        font-size: .68rem; font-weight: 700; letter-spacing: .08em;
        text-transform: uppercase; color: var(--muted);
    }
}


/* ---- review: at-a-glance (th/td pairs) ---- */
.scm-page .scm-glance th {
    background: var(--wash); color: var(--navy); width: 34%;
    font-size: .8rem; letter-spacing: 0; text-transform: none; font-weight: 700;
    border-color: var(--rule);
}

/* ---- review: rating breakdown as bars ---- */
.scm-page .scm-bars { margin: 1.2rem 0 0; }
.scm-page .scm-bar {
    display: grid; grid-template-columns: minmax(120px, 30%) 1fr 46px;
    align-items: center; gap: 1rem; padding: .55rem 0;
    border-bottom: 1px solid var(--rule);
}
.scm-page .scm-bar:last-child { border-bottom: 0; }
.scm-page .scm-bar-label { font-size: .88rem; color: var(--ink); }
.scm-page .scm-bar-track { height: 8px; background: var(--wash); border: 1px solid var(--rule); }
.scm-page .scm-bar-track i { display: block; height: 100%; background: var(--navy); }
.scm-page .scm-bar-val { font-family: var(--font-display); font-weight: 800; color: var(--navy); text-align: right; }

/* ---- review: pros and cons ---- */
.scm-page .scm-pc { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; margin: 1.2rem 0 0; }
.scm-page .scm-pc h3 {
    font-family: var(--font-ui); font-size: .78rem; font-weight: 700;
    letter-spacing: .12em; text-transform: uppercase; margin: 0 0 .7rem;
}
.scm-page .scm-pros, .scm-page .scm-cons { border: 1px solid var(--rule); padding: 1.1rem 1.2rem; }
.scm-page .scm-pros { border-top: 3px solid var(--cta); }
.scm-page .scm-cons { border-top: 3px solid var(--rule-2); }
.scm-page .scm-pc ul { list-style: none; margin: 0; padding: 0; }
.scm-page .scm-pc li { position: relative; padding-left: 1.4rem; margin-bottom: .5rem; font-size: .9rem; }
.scm-page .scm-pros li::before { content: "+"; position: absolute; left: 0; color: var(--cta); font-weight: 700; }
.scm-page .scm-cons li::before { content: "\2212"; position: absolute; left: 0; color: var(--muted); font-weight: 700; }

/* ---- review: closing CTA ---- */
.scm-page .scm-finalcta {
    text-align: center; border: 1px solid var(--rule); background: var(--wash);
    padding: 1.6rem 1.2rem; margin: 1.6rem 0 0;
}
.scm-page .scm-finalcta .scm-cta { margin-top: 0; }

@media (max-width: 620px) {
    .scm-page .scm-pc { grid-template-columns: 1fr; gap: 1rem; }
    .scm-page .scm-bar { grid-template-columns: 1fr 44px; gap: .5rem 1rem; }
    .scm-page .scm-bar-track { grid-column: 1 / -1; order: 3; }
    /* the at-a-glance table is two columns; keep it tabular, don't stack it */
    .scm-page .scm-glance,
    .scm-page .scm-glance tbody,
    .scm-page .scm-glance tr,
    .scm-page .scm-glance th,
    .scm-page .scm-glance td { display: revert; }
    .scm-page .scm-glance td::before { content: none; }
}

/* ==========================================================================
   16. RESPONSIVE
   ========================================================================== */
@media (max-width: 1000px) {
    .lead-block { grid-template-columns: 1fr; gap: 1.8rem; }
    .cards { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1.4rem 1.5rem; }
    .footer-cols { grid-template-columns: 1fr 1fr; gap: 1.8rem; }
}

@media (max-width: 782px) {
    /* WordPress admin bar stops being fixed below 782px, so the sticky
       masthead must not sit under it. */
    .admin-bar .masthead { top: 0; }
}

@media (max-width: 860px) {
    .menu-toggle { display: block; order: 3; }
    .search-toggle { order: 2; margin-left: auto; }
    .nav {
        order: 4; flex: 1 0 100%; margin-left: 0;
        display: none; border-top: 1px solid var(--rule);
    }
    .nav.open { display: block; }
    .masthead-inner { flex-wrap: wrap; height: auto; min-height: var(--masthead-h); padding-top: .5rem; padding-bottom: .5rem; }
    .nav ul { flex-direction: column; align-items: stretch; gap: 0; padding: .4rem 0 .6rem; }
    .nav li { border-bottom: 1px solid var(--rule); }
    .nav li:last-child { border-bottom: 0; }
    .nav a { padding: .85rem 0; border-bottom: 0; }
    .nav a:hover { border-bottom-color: transparent; }
    .masthead { position: static; }

    .topbar-tag { display: none; }

    .river-item { grid-template-columns: 120px minmax(0,1fr); gap: 1rem; }
    .river-item h3 { font-size: 1.08rem; }
    .river-item .river-excerpt { display: none; }

    .post-nav { grid-template-columns: 1fr; }
    .post-nav .to-next { text-align: left; }
}

@media (max-width: 560px) {
    :root { --gutter: 16px; }
    .cards { grid-template-columns: 1fr; gap: 1.5rem; }
    .footer-cols { grid-template-columns: 1fr; gap: 1.6rem; }
    .lead-list .li-thumb { flex-basis: 72px; }
    .lead-list .li-thumb img { width: 72px; height: 54px; }
    .entry-content { font-size: 1.05rem; }

    /* Editorial tables must not force the page itself to scroll sideways.
       .scm-table is excluded: it already sits in its own overflow-x wrapper. */
    .entry-content table:not(.scm-table) { display: block; overflow-x: auto; }
}

@media (prefers-reduced-motion: reduce) {
    * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}