/*
Theme Name: Guardian News
Theme URI: https://github.com/prasadgujar22/prasweb-wordpress1
Author: PrasWeb
Author URI: https://github.com/prasadgujar22
Description: A WordPress theme inspired by The Guardian newspaper, using the exact Guardian Source design system tokens — fonts, colours, and typography scale.
Version: 3.2.1
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: guardian-news
Tags: news, blog, two-columns, custom-menu, featured-images, full-width-template
*/

/* ============================================================
   GUARDIAN FONT-FACE DECLARATIONS
   (Exact Guardian Source font stacks; files served from theme)
   ============================================================ */
@font-face {
    font-family: "GH Guardian Headline";
    src: local("GH Guardian Headline"),
         local("GuardianHeadline");
    font-weight: 300 700;
    font-style: normal;
    font-display: swap;
}

/* ============================================================
   CSS CUSTOM PROPERTIES — Guardian Source Design Tokens
   ============================================================ */
:root {
    /* Prevent Safari/iOS from applying its own automatic dark-mode
       border/colour adaptations — the dark-mode plugin handles theming */
    color-scheme: light;

    /* Brand / Navy */
    --brand-100:       #001536;
    --brand-300:       #041F4A;
    --brand-400:       #052962;  /* primary brand */
    --brand-600:       #506991;
    --brand-800:       #C1D8FC;

    /* Brand Alt / Yellow */
    --brand-alt-200:   #F3C100;
    --brand-alt-300:   #FFD900;
    --brand-alt-400:   #FFE500;  /* CTA yellow */

    /* News / Red */
    --news-400:        #C70000;
    --news-500:        #FF5943;
    --news-600:        #FFBAC8;
    --news-800:        #FFF4F2;

    /* Opinion / Orange */
    --opinion-450:     #E05E00;
    --opinion-800:     #FEF9F5;

    /* Sport / Blue */
    --sport-300:       #005689;
    --sport-400:       #0077B6;

    /* Culture / Brown */
    --culture-300:     #6B5840;
    --culture-400:     #866D50;
    --culture-800:     #FBF6EF;

    /* Lifestyle / Pink */
    --lifestyle-300:   #7D0068;
    --lifestyle-400:   #BB3B80;
    --lifestyle-800:   #FEEEF7;

    /* Neutral */
    --neutral-0:       #000000;
    --neutral-7:       #121212;
    --neutral-10:      #1A1A1A;
    --neutral-20:      #333333;
    --neutral-46:      #707070;
    --neutral-60:      #999999;
    --neutral-86:      #DCDCDC;
    --neutral-93:      #EDEDED;
    --neutral-97:      #F6F6F6;
    --neutral-100:     #FFFFFF;

    /* Semantic aliases */
    --color-bg:              var(--neutral-100);
    --color-text:            var(--neutral-7);
    --color-text-muted:      var(--neutral-46);
    --color-border:          var(--neutral-86);
    --color-header-bg:       var(--brand-400);
    --color-header-dark:     var(--brand-300);
    --color-cta:             var(--brand-alt-400);
    --color-live:            var(--news-400);
    --color-section-default: var(--brand-400);

    /* Guardian Source font stacks — exact order from source/data.ts */
    --font-titlepiece: "GT Guardian Titlepiece", Georgia, serif;
    --font-headline:   "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif;
    --font-body:       "GuardianTextEgyptian", "Guardian Text Egyptian Web", Georgia, serif;
    --font-sans:       "GuardianTextSans", "Guardian Text Sans Web", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;

    /* Typography scale — from Guardian Source data.ts (px → rem @ 16px base) */
    --text-sans-xs:    0.75rem;   /* 12px */
    --text-sans-s:     0.875rem;  /* 14px */
    --text-sans-m:     0.9375rem; /* 15px */
    --text-sans-l:     1.0625rem; /* 17px */
    --text-sans-xl:    1.25rem;   /* 20px */
    --text-sans-xxl:   1.5rem;    /* 24px */

    --text-body-s:     0.875rem;  /* 14px */
    --text-body-m:     0.9375rem; /* 15px */
    --text-body-l:     1.0625rem; /* 17px */

    --text-headline-xs:  1.0625rem; /* 17px */
    --text-headline-s:   1.25rem;   /* 20px */
    --text-headline-m:   1.5rem;    /* 24px */
    --text-headline-l:   1.75rem;   /* 28px */
    --text-headline-xl:  2.125rem;  /* 34px */
    --text-headline-xxl: 2.625rem;  /* 42px */
    --text-headline-3xl: 3.125rem;  /* 50px */

    /* Line heights */
    --lh-tight:   1.15;
    --lh-regular: 1.35;
    --lh-loose:   1.5;

    /* Layout */
    --max-width:     1300px;
    --content-width: 700px;
    --sidebar-width: 300px;
    --gutter:        20px;
}

/* ============================================================
   GOOGLE FONTS → GUARDIAN FONT-STACK ALIASES
   Playfair Display  → GH Guardian Headline (serif display)
   Lora              → GuardianTextEgyptian (body serif)
   Source Sans 3     → GuardianTextSans     (UI sans)
   ============================================================ */

/* Headline alias */
@font-face {
    font-family: "GH Guardian Headline";
    src: local("Playfair Display Bold"),
         local("PlayfairDisplay-Bold");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "GH Guardian Headline";
    src: local("Playfair Display ExtraBold"),
         local("PlayfairDisplay-ExtraBold");
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Guardian Egyptian Web";
    src: local("Playfair Display Bold"),
         local("PlayfairDisplay-Bold");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* Body serif alias */
@font-face {
    font-family: "GuardianTextEgyptian";
    src: local("Lora Regular"),
         local("Lora-Regular");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "GuardianTextEgyptian";
    src: local("Lora Bold"),
         local("Lora-Bold");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Guardian Text Egyptian Web";
    src: local("Lora Regular"),
         local("Lora-Regular");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* Sans alias */
@font-face {
    font-family: "GuardianTextSans";
    src: local("Source Sans 3 Regular"),
         local("SourceSans3-Regular");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "GuardianTextSans";
    src: local("Source Sans 3 SemiBold"),
         local("SourceSans3-SemiBold");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "GuardianTextSans";
    src: local("Source Sans 3 Bold"),
         local("SourceSans3-Bold");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Guardian Text Sans Web";
    src: local("Source Sans 3"),
         local("SourceSans3");
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
}

/* ============================================================
   RESET & BASE
   ============================================================ */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--font-sans);
    color: var(--color-text);
    background: var(--color-bg);
    line-height: var(--lh-loose);
}

a {
    color: inherit;
    text-decoration: none;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* ============================================================
   GLOBAL OVERFLOW PROTECTION
   Prevents any wide child element (pre, table, iframe) from
   pushing the page wider than the viewport and clipping text.
   ============================================================ */

/* overflow-x:clip stops horizontal scroll without creating a scroll
   container — unlike hidden, it does NOT break position:sticky */
html, body {
    max-width: 100%;
    overflow-x: clip;
}

/* Code blocks: scroll internally rather than break layout */
pre {
    overflow-x: auto;
    max-width: 100%;
    white-space: pre;
    word-wrap: normal;
}

code {
    word-break: break-word;
    overflow-wrap: break-word;
}

/* Tables: scroll internally */
table {
    max-width: 100%;
}

.article-content table,
.entry-content table,
.wp-block-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
}

/* Iframes / embeds */
iframe, embed, object {
    max-width: 100%;
}

/* Article container never exceeds viewport */
.article-content,
.entry-content {
    max-width: 100%;
    overflow-x: hidden;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

ul, ol { list-style: none; }

/* ============================================================
   LAYOUT
   ============================================================ */
.container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 var(--gutter);
}

.screen-reader-text {
    border: 0;
    clip: rect(1px,1px,1px,1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    word-wrap: normal !important;
}


/* ============================================================
   SITE HEADER — Navy block with The Guardian logotype
   ============================================================ */
.site-header {
    background: var(--color-header-bg);
    padding: 8px 0 0;
    border-bottom: 1px solid var(--brand-300);
}

.site-header .container {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding-bottom: 10px;
}

.site-branding {
    text-align: left;
}

/* WordPress custom logo output: <a class="custom-logo-link"><img class="custom-logo"></a> */
.custom-logo-link {
    display: inline-block;
    margin: 0;
}

.custom-logo {
    max-height: 98px;  /* 78px × 1.25 */
    width: auto;
    display: block;
}

/* The Guardian wordmark — large, bold, white, serif (Guardian Headline font) */
.site-title {
    font-family: var(--font-headline);
    font-size: clamp(1.6rem, 4vw, 2.75rem); /* reduced from 70px max to ~44px */
    font-weight: 700;
    color: var(--neutral-100);
    letter-spacing: -0.02em;
    line-height: var(--lh-tight);
}

.site-title a {
    color: inherit;
    text-decoration: none;
    display: block;
}


/* ============================================================
   PRIMARY NAVIGATION BAR
   ============================================================ */
.site-nav-wrapper {
    background: var(--color-header-bg);
    border-top: 1px solid rgba(255,255,255,0.12);
}

.site-nav-wrapper .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.primary-navigation {
    display: flex;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.primary-navigation::-webkit-scrollbar { display: none; }

.primary-navigation ul { display: flex; }

.primary-navigation ul li a {
    display: block;
    padding: 11px 14px;
    color: var(--neutral-100);
    font-family: var(--font-sans);
    font-size: var(--text-sans-m);
    font-weight: 700;
    white-space: nowrap;
    position: relative;
    letter-spacing: 0.01em;
    transition: opacity 0.1s;
}

.primary-navigation ul li a:hover {
    opacity: 0.8;
    text-decoration: none;
}

/* Active yellow underline — 3px, flush to bottom */
.primary-navigation ul li.current-menu-item > a::after,
.primary-navigation ul li.current_page_item > a::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 14px;
    right: 14px;
    height: 4px;
    background: var(--color-cta);
    border-radius: 2px 2px 0 0;
}


/* ============================================================
   SUB-NAVIGATION (section bar below primary nav)
   ============================================================ */
.sub-navigation {
    background: var(--brand-300);
    border-top: 1px solid rgba(255,255,255,0.08);
}

.sub-navigation .container {
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.sub-navigation .container::-webkit-scrollbar { display: none; }

.sub-navigation ul { display: flex; }

.sub-navigation ul li a {
    display: block;
    padding: 8px 12px;
    color: var(--neutral-100);
    font-family: var(--font-sans);
    font-size: var(--text-sans-s);
    font-weight: 400;
    white-space: nowrap;
    opacity: 0.8;
    transition: opacity 0.1s;
}

.sub-navigation ul li a:hover {
    opacity: 1;
    text-decoration: none;
}

/* ============================================================
   LIVE / BREAKING BADGE
   ============================================================ */
.live-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: var(--color-live);
    color: var(--neutral-100);
    font-family: var(--font-sans);
    font-size: var(--text-sans-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 2px 7px 2px 5px;
    border-radius: 2px;
    margin-bottom: 5px;
}

.live-badge::before {
    content: "";
    width: 7px;
    height: 7px;
    background: var(--neutral-100);
    border-radius: 50%;
    animation: pulse-dot 1.4s ease-in-out infinite;
}

@keyframes pulse-dot {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%       { opacity: 0.4; transform: scale(0.75); }
}

/* ============================================================
   DATE / EDITION HEADER
   ============================================================ */
.date-edition-header {
    display: flex;
    align-items: baseline;
    gap: 12px;
    border-bottom: 1px solid var(--color-border);
    padding-bottom: 10px;
    margin-bottom: 20px;
}

.date-edition-header .edition-name {
    font-family: var(--font-sans);
    font-size: var(--text-sans-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-header-bg);
}

.date-edition-header .current-date {
    font-family: var(--font-sans);
    font-size: var(--text-sans-s);
    color: var(--color-text-muted);
}

/* ============================================================
   MAIN LAYOUT
   ============================================================ */
.site-main {
    padding: 16px 0 48px;
}

.content-area {
    display: grid;
    grid-template-columns: 1fr var(--sidebar-width);
    gap: 32px;
    align-items: start;
}

/* Grid children default to min-width:auto which lets them expand
   beyond their track when content (tables/pre) is wide.
   min-width:0 allows them to shrink, so overflow:auto on inner
   elements actually works. */
.content-area > * {
    min-width: 0;
}

@media (max-width: 900px) {
    .content-area { grid-template-columns: 1fr; }
}

/* ============================================================
   SECTION HEADER (divider above grids)
   ============================================================ */
.section-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    border-top: 3px solid var(--color-header-bg);
    padding-top: 6px;
    margin-bottom: 14px;
}

.section-title {
    font-family: var(--font-headline);
    font-size: var(--text-headline-m);      /* 24px */
    font-weight: 700;
    line-height: var(--lh-tight);
    color: var(--color-header-bg);
}

.section-more-link {
    font-family: var(--font-sans);
    font-size: var(--text-sans-s);
    color: var(--color-header-bg);
    border-bottom: 1px solid currentColor;
}

.section-more-link:hover { border-bottom-color: transparent; }

/* ============================================================
   HERO ARTICLE
   ============================================================ */
.hero-section {
    border-bottom: 1px solid var(--color-border);
    margin-bottom: 20px;
    padding-bottom: 20px;
}

/* Section kicker above hero headline */
.hero-kicker {
    font-family: var(--font-sans);
    font-size: var(--text-sans-s);
    font-weight: 700;
    color: var(--color-header-bg);
    text-transform: none;
    letter-spacing: 0;
    margin-bottom: 4px;
}

.hero-kicker a:hover { text-decoration: underline; }

/* Hero headline — Guardian Headline, bold, tight */
.hero-section h2 {
    font-family: var(--font-headline);
    font-size: clamp(var(--text-headline-l), 3.5vw, var(--text-headline-xxl)); /* 28–42px */
    font-weight: 700;
    line-height: var(--lh-tight);
    color: var(--neutral-7);
    margin-bottom: 8px;
}

.hero-section h2 a { color: inherit; }
.hero-section h2 a:hover { text-decoration: underline; }

.hero-image { margin-bottom: 8px; }

.hero-image img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* Standfirst — GuardianTextEgyptian (body serif), regular weight */
.hero-standfirst {
    font-family: var(--font-body);
    font-size: var(--text-body-l);          /* 17px */
    line-height: var(--lh-loose);
    color: var(--neutral-20);
    margin-top: 6px;
}

.hero-timestamp {
    font-family: var(--font-sans);
    font-size: var(--text-sans-xs);
    color: var(--color-text-muted);
    margin-top: 6px;
}

/* ============================================================
   ARTICLE CARD GRID
   ============================================================ */
.articles-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    margin-bottom: 28px;
}

@media (max-width: 768px) {
    .articles-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 480px) {
    .articles-grid { grid-template-columns: 1fr; }
}

.article-card {
    border-top: 1px solid var(--color-border);
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
    padding: 10px 12px 12px 0;
}

.article-card + .article-card {
    border-left: 1px solid var(--color-border);
    padding-left: 12px;
}

/* Every 3rd card: reset left border */
.article-card:nth-child(3n+1) {
    border-left: none;
    padding-left: 0;
}

.article-card-image {
    margin-bottom: 8px;
    overflow: hidden;
}

.article-card-image img {
    width: 100%;
    height: 160px;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.article-card:hover .article-card-image img {
    transform: scale(1.02);
}

/* Section label — small, bold, sans, coloured by section */
.article-card-section {
    font-family: var(--font-sans);
    font-size: var(--text-sans-xs);
    font-weight: 700;
    margin-bottom: 3px;
    letter-spacing: 0.01em;
}

.article-card-section a { text-decoration: none; }
.article-card-section a:hover { text-decoration: underline; }

/* Card headline — Guardian Headline serif */
.article-card h3 {
    font-family: var(--font-headline);
    font-size: var(--text-headline-xs);     /* 17px */
    font-weight: 700;
    line-height: var(--lh-tight);
    color: var(--neutral-7);
    margin-bottom: 5px;
}

.article-card h3 a { color: inherit; }
.article-card h3 a:hover { text-decoration: underline; }

/* Standfirst on card — body serif, smaller */
.article-card-standfirst {
    font-family: var(--font-body);
    font-size: var(--text-body-s);          /* 14px */
    line-height: var(--lh-regular);
    color: var(--neutral-20);
    margin-bottom: 6px;
}

.article-card-meta {
    font-family: var(--font-sans);
    font-size: var(--text-sans-xs);
    color: var(--color-text-muted);
}

/* ============================================================
   SINGLE ARTICLE
   ============================================================ */
.single-article { max-width: var(--content-width); }

/* Section label bar — coloured left border, small caps */
.article-section-label {
    font-family: var(--font-sans);
    font-size: var(--text-sans-s);
    font-weight: 700;
    border-left: 4px solid currentColor;
    padding-left: 8px;
    margin-bottom: 8px;
    line-height: 1;
}

.article-section-label a { text-decoration: none; color: inherit; }
.article-section-label a:hover { text-decoration: underline; }

/* Article headline — Guardian Headline, largest scale */
.article-title {
    font-family: var(--font-headline);
    font-size: clamp(var(--text-headline-l), 4vw, var(--text-headline-xxl)); /* 28–42px */
    font-weight: 700;
    line-height: var(--lh-tight);
    color: var(--neutral-7);
    margin-bottom: 10px;
}

/* Standfirst — GuardianTextEgyptian, 17–20px, regular, slightly muted */
.article-standfirst {
    font-family: var(--font-body);
    font-size: var(--text-headline-xs);     /* 17px — body large */
    font-weight: 400;
    line-height: var(--lh-loose);
    color: var(--neutral-20);
    margin-bottom: 14px;
}

/* Byline — avatar + name + date */
.article-byline {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 2px;
}

.byline-avatar {
    width: 42px !important;
    height: 42px !important;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 2px solid var(--color-border);
}

.byline-meta {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.byline-name {
    font-family: var(--font-sans);
    font-size: var(--text-sans-m);
    font-weight: 700;
    color: var(--brand-400);
    line-height: 1.2;
}

.byline-name a { color: var(--brand-400); }
.byline-name a:hover { text-decoration: underline; }

.byline-date {
    font-family: var(--font-sans);
    font-size: var(--text-sans-xs);   /* 12px */
    color: var(--color-text-muted);
    line-height: 1.2;
}

/* Date — sans, xs, muted */
.article-date {
    font-family: var(--font-sans);
    font-size: var(--text-sans-xs);
    color: var(--color-text-muted);
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--color-border);
}

.article-featured-image { margin-bottom: 4px; }
.article-featured-image img { width: 100%; }

.article-image-caption {
    font-family: var(--font-sans);
    font-size: var(--text-sans-xs);
    color: var(--color-text-muted);
    margin-bottom: 20px;
    line-height: var(--lh-regular);
}

/* Body copy — GuardianTextEgyptian at 17px, loose leading */
.article-content {
    font-family: var(--font-body);
    font-size: var(--text-body-l);          /* 17px */
    line-height: var(--lh-loose);
    color: var(--neutral-7);
}

.article-content p { margin-bottom: 16px; }

.article-content h2 {
    font-family: var(--font-headline);
    font-size: var(--text-headline-m);      /* 24px */
    font-weight: 700;
    line-height: var(--lh-tight);
    margin: 24px 0 10px;
    color: var(--neutral-7);
}

.article-content h3 {
    font-family: var(--font-headline);
    font-size: var(--text-headline-s);      /* 20px */
    font-weight: 700;
    line-height: var(--lh-tight);
    margin: 20px 0 8px;
    color: var(--neutral-7);
}

/* Blockquote — left blue border, italic, body serif */
.article-content blockquote {
    border-left: 4px solid var(--brand-400);
    padding: 10px 18px;
    margin: 20px 0;
    font-style: italic;
    font-size: var(--text-headline-xs);     /* 17px */
    color: var(--brand-400);
    background: var(--neutral-97);
}

.article-content a {
    color: var(--brand-400);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.article-content a:hover { text-decoration: none; }

/* ============================================================
   SIDEBAR
   ============================================================ */
.sidebar {
    border-left: 1px solid var(--color-border);
    padding-left: 20px;
    /* Outer column stays in the grid — never repositioned */
}

/* Inner wrapper scrolls with the page and sticks below the header.
   --sticky-top is set in px by JS after measuring .site-header-wrapper */
.sidebar-sticky {
    position: sticky;
    top: calc(var(--sticky-top, 80px) + 16px);
}

.sidebar-widget {
    margin-bottom: 24px;
    border-top: 3px solid var(--brand-400);
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
    padding-top: 8px;
}

.sidebar-widget-title {
    font-family: var(--font-headline);
    font-size: var(--text-headline-s);      /* 20px */
    font-weight: 700;
    color: var(--brand-400);
    margin-bottom: 12px;
    line-height: var(--lh-tight);
}

/* Most Popular numbered list */
.popular-list { counter-reset: popular; }

.popular-list li {
    counter-increment: popular;
    display: flex;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid var(--color-border);
    align-items: flex-start;
}

.popular-list li::before {
    content: counter(popular);
    font-family: var(--font-headline);
    font-size: 2rem;
    font-weight: 700;
    color: var(--neutral-86);
    line-height: 1;
    min-width: 26px;
}

.popular-list li a {
    font-family: var(--font-sans);
    font-size: var(--text-sans-s);
    font-weight: 700;
    line-height: var(--lh-regular);
    color: var(--neutral-7);
}

.popular-list li a:hover {
    color: var(--brand-400);
    text-decoration: underline;
}

/* ============================================================
   PAGINATION
   ============================================================ */
.posts-navigation,
.page-navigation {
    margin: 28px 0;
    padding-top: 20px;
    border-top: 1px solid var(--color-border);
}

.posts-navigation .nav-links,
.page-navigation .nav-links {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

.posts-navigation a,
.page-navigation a {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: var(--brand-400);
    color: var(--neutral-100);
    font-family: var(--font-sans);
    font-size: var(--text-sans-s);
    font-weight: 700;
    padding: 9px 16px;
    border-radius: 3px;
    transition: background 0.15s;
}

.posts-navigation a:hover,
.page-navigation a:hover {
    background: var(--brand-300);
    text-decoration: none;
}

/* ============================================================
   SEARCH FORM
   ============================================================ */
.search-form {
    display: flex;
    margin-bottom: 20px;
}

.search-field {
    flex: 1;
    border: 2px solid var(--brand-400);
    border-right: none;
    padding: 8px 12px;
    font-family: var(--font-sans);
    font-size: var(--text-sans-m);
    outline: none;
    border-radius: 3px 0 0 3px;
    color: var(--neutral-7);
}

.search-field:focus { border-color: var(--sport-400); }

.search-submit {
    background: var(--brand-400);
    color: var(--neutral-100);
    border: none;
    padding: 8px 16px;
    font-family: var(--font-sans);
    font-size: var(--text-sans-s);
    font-weight: 700;
    cursor: pointer;
    border-radius: 0 3px 3px 0;
    transition: background 0.15s;
}

.search-submit:hover { background: var(--brand-300); }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
    background: var(--brand-400);
    color: var(--neutral-100);
    padding: 36px 0 20px;
}


.footer-bottom {
    border-top: 1px solid rgba(255,255,255,0.15);
    padding-top: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
}

.footer-copyright {
    font-family: var(--font-sans);
    font-size: var(--text-sans-xs);
    color: rgba(255,255,255,0.45);
}


/* ============================================================
   ENTRY FOOTER / TAGS
   ============================================================ */
.entry-footer {
    margin-top: 24px;
    padding-top: 14px;
    border-top: 1px solid var(--color-border);
}

.entry-tags {
    font-family: var(--font-sans);
    font-size: var(--text-sans-xs);
    color: var(--color-text-muted);
}

.entry-tags a {
    display: inline-block;
    background: var(--neutral-97);
    border: 1px solid var(--color-border);
    color: var(--brand-400);
    padding: 3px 8px;
    border-radius: 2px;
    margin: 2px;
    font-weight: 700;
    font-size: var(--text-sans-xs);
    text-decoration: none;
    transition: background 0.12s, color 0.12s;
}

.entry-tags a:hover {
    background: var(--brand-400);
    color: var(--neutral-100);
}

/* ============================================================
   ARCHIVE HEADER
   ============================================================ */
.archive-header {
    margin-bottom: 20px;
    border-left: 4px solid var(--brand-400);
    padding-left: 10px;
}

.archive-description {
    font-family: var(--font-sans);
    font-size: var(--text-sans-m);
    color: var(--color-text-muted);
    margin-top: 5px;
}

/* ============================================================
   CATEGORY COLOUR SECTION LABELS (utility)
   ============================================================ */
.section--news       { color: var(--news-400); }
.section--opinion    { color: var(--opinion-450); }
.section--sport      { color: var(--sport-300); }
.section--culture    { color: var(--culture-400); }
.section--lifestyle  { color: var(--lifestyle-300); }
.section--world      { color: var(--news-400); }
.section--technology { color: var(--brand-400); }
.section--science    { color: var(--brand-400); }
.section--business   { color: var(--sport-300); }

/* ============================================================
   STICKY HEADER WRAPPER — logo + nav stick together
   ============================================================ */
.site-header-wrapper {
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 2px 10px rgba(0,0,0,0.25);
}

/* Keep old .nav-sticky class harmless (JS still adds it but wrapper handles sticking) */
.nav-sticky { box-shadow: none; }

/* ============================================================
   NAV ACTIONS (search toggle + hamburger grouped on the right)
   ============================================================ */
.nav-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    margin-left: auto;
}

/* ── Search toggle button ── */
.search-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 8px;
    border-radius: 50%;
    transition: background 0.15s;
}

.search-toggle:hover { background: rgba(255,255,255,0.12); }

.search-toggle svg {
    width: 20px;
    height: 20px;
    fill: var(--neutral-100);
}

/* Active state when panel is open */
.search-toggle[aria-expanded="true"] {
    background: rgba(255,255,255,0.15);
}

/* ── Search panel — slides down from nav bar ── */
.site-search-panel {
    background: var(--brand-300);
    border-top: 1px solid rgba(255,255,255,0.1);
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s ease, padding 0.25s ease;
}

.site-search-panel.search-open {
    max-height: 80px;
    padding: 10px 0;
}

.site-search-form {
    display: flex;
    align-items: center;
    gap: 0;
    background: var(--neutral-100);
    border-radius: 4px;
    overflow: hidden;
    max-width: 640px;
}

.site-search-input {
    flex: 1;
    border: none;
    outline: none;
    padding: 10px 14px;
    font-family: var(--font-sans);
    font-size: var(--text-sans-m);
    color: var(--neutral-7);
    background: transparent;
    min-width: 0;
}

.site-search-input::placeholder { color: var(--neutral-60); }

.site-search-submit {
    background: var(--brand-400);
    border: none;
    cursor: pointer;
    padding: 10px 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
}

.site-search-submit:hover { background: var(--brand-300); }

.site-search-submit svg {
    width: 18px;
    height: 18px;
    fill: var(--neutral-100);
}

.site-search-close {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 10px 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
}

.site-search-close:hover { background: var(--neutral-93); }

.site-search-close svg {
    width: 18px;
    height: 18px;
    fill: var(--neutral-46);
}

/* ============================================================
   HAMBURGER BUTTON — hidden on desktop, shown on mobile/tablet
   ============================================================ */
.menu-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    background: var(--color-cta);
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    min-width: 40px;
    cursor: pointer;
    margin: 6px 0 6px 10px;
    flex-shrink: 0;
    transition: background 0.15s;
}

.menu-toggle:hover { background: var(--brand-alt-300); }

.menu-toggle-bar {
    display: block;
    width: 18px;
    height: 2px;
    background: var(--neutral-0);
    border-radius: 2px;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

/* Animate to X when open */
.menu-toggle[aria-expanded="true"] .menu-toggle-bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}
.menu-toggle[aria-expanded="true"] .menu-toggle-bar:nth-child(2) {
    opacity: 0;
}
.menu-toggle[aria-expanded="true"] .menu-toggle-bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* ============================================================
   RESPONSIVE — TABLET  (≤ 900px)
   ============================================================ */
@media (max-width: 900px) {

    /* ── Global ── */
    :root {
        --gutter: 16px;
    }

    html { font-size: 15px; } /* slightly scale down base */

    /* Prevent horizontal overflow */
    body { overflow-x: hidden; }
    .container { padding: 0 var(--gutter); }

    /* ── Header ── */
    .site-header { padding: 10px 0; }

    .custom-logo { max-height: 83px; }  /* 64px × 1.30 */

    /* ── Hamburger ── */
    .menu-toggle { display: flex; }

    .site-nav-wrapper .container {
        flex-wrap: wrap;
        align-items: center;
        padding-top: 4px;
        padding-bottom: 4px;
    }

    /* Nav collapsed by default */
    .primary-navigation {
        width: 100%;
        order: 3;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.28s ease;
    }

    .primary-navigation.nav-open { max-height: 500px; }

    .primary-navigation ul {
        flex-direction: column;
        width: 100%;
        padding-bottom: 6px;
    }

    .primary-navigation ul li a {
        padding: 11px 16px;
        border-bottom: 1px solid rgba(255,255,255,0.08);
        font-size: var(--text-sans-m);
    }

    .primary-navigation ul li.current-menu-item > a::after,
    .primary-navigation ul li.current_page_item > a::after { display: none; }

    /* ── Layout ── */
    .content-area {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    /* ── Hero ── */
    .hero-section h2 {
        font-size: var(--text-headline-l);   /* 28px fixed on tablet */
    }

    /* ── Article cards: 2 columns ── */
    .articles-grid { grid-template-columns: 1fr 1fr; }

    /* Reset border logic for 2-col grid */
    .article-card + .article-card { border-left: none; padding-left: 0; }
    .article-card:nth-child(odd)  { padding-right: 10px; border-right: 1px solid var(--color-border); }
    .article-card:nth-child(even) { padding-left: 10px; }

    /* ── Single article ── */
    .single-article { max-width: 100%; }

    .article-title {
        font-size: var(--text-headline-l);   /* 28px */
    }

    .article-standfirst { font-size: var(--text-body-m); }

    /* ── Sidebar ── */
    .sidebar {
        border-left: none;
        padding-left: 0;
        border-top: 3px solid var(--brand-400);
        padding-top: 20px;
    }

    /* Disable sticky on sidebar inner wrapper — on mobile sidebar is below article */
    .sidebar-sticky {
        position: static;
        top: auto;
    }

    /* ── Footer ── */
    .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
    }

    /* ── WordPress content tables: scroll horizontally ── */
    .article-content table,
    .entry-content table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        max-width: 100%;
        font-size: var(--text-sans-s);
    }

    /* ── WordPress blocks ── */
    .wp-block-table { overflow-x: auto; }
    .wp-block-image img,
    .wp-block-cover  { max-width: 100%; height: auto; }

    /* ── Code blocks ── */
    pre, code {
        font-size: 0.8rem;
        overflow-x: auto;
        white-space: pre;
        word-break: normal;
    }
}

/* ============================================================
   RESPONSIVE — MOBILE  (≤ 600px)
   ============================================================ */
@media (max-width: 600px) {

    :root { --gutter: 12px; }

    html { font-size: 14px; }

    /* ── Header ── */
    .custom-logo { max-height: 62px; }  /* 48px × 1.30 */

    /* ── Hero headline ── */
    .hero-section h2 {
        font-size: var(--text-headline-m);   /* 24px */
        line-height: var(--lh-regular);
    }

    .hero-standfirst { font-size: var(--text-body-s); }  /* 14px */

    /* ── Article cards: single column ── */
    .articles-grid { grid-template-columns: 1fr; gap: 0; }

    .article-card,
    .article-card + .article-card {
        border-left: none;
        border-right: none;
        padding: 12px 0;
    }

    /* Section label: strip any residual border so stacked single-column
       cards don't produce a continuous vertical line */
    .article-card-section { border: none; padding-left: 0; }

    .article-card-image img { height: 200px; }

    /* ── Single article ── */
    .article-title {
        font-size: var(--text-headline-m);   /* 24px */
        line-height: var(--lh-regular);
    }

    .article-standfirst {
        font-size: var(--text-body-s);
        line-height: var(--lh-regular);
    }

    .article-content {
        font-size: var(--text-body-m);       /* 15px — easier on small screens */
        line-height: 1.6;
    }

    .article-content h2 { font-size: var(--text-headline-s); }  /* 20px */
    .article-content h3 { font-size: var(--text-headline-xs); } /* 17px */

    .article-content blockquote {
        padding: 8px 14px;
        font-size: var(--text-body-m);
    }

    /* ── Section header ── */
    .section-title { font-size: var(--text-headline-s); }       /* 20px */

    /* ── Date bar ── */
    .date-edition-header { flex-wrap: wrap; gap: 6px; }

    /* ── Sidebar widget titles ── */
    .sidebar-widget-title { font-size: var(--text-headline-xs); }

    /* ── Footer ── */
    .site-footer { padding: 20px 0 14px; }

    /* ── Tables ── */
    .article-content table,
    .entry-content table {
        font-size: 0.75rem;
    }

    /* ── Images always full width ── */
    img { max-width: 100%; height: auto; }

    /* ── No horizontal scroll on page ── */
    .site-main,
    .content-area,
    .article-content {
        overflow-x: clip;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

    /* ── Long URLs/strings in article body ── */
    .article-content a,
    .article-content p {
        word-break: break-word;
        overflow-wrap: break-word;
    }
}

/* ============================================================
   WPDISCUZ COMMENT SECTION ALIGNMENT
   Align wpDiscuz (#wpdcom) with the article column width/position
   ============================================================ */
#wpdcom,
.wpdiscuz-comment-form,
.wpdiscuz-form-section {
    max-width: var(--content-width) !important;  /* matches .single-article */
    margin-left: 0 !important;
    margin-right: auto !important;
    box-sizing: border-box;
}

/* Ensure the comments wrapper itself starts flush left */
#comments,
.comments-area {
    max-width: var(--content-width);
    margin-left: 0;
    padding-left: 0;
}

/* ============================================================
   PRINT
   ============================================================ */
@media print {
    .site-nav-wrapper,
    .sub-navigation,
    .sidebar,
    .site-footer { display: none !important; }

    .site-header { background: none; padding: 0; }
    .site-title  { color: #000; font-size: 2rem; }
    .article-content a { text-decoration: none; color: #000; }
}