/*
Theme Name: PitchReporter
Theme URI: https://pitchreporter.com
Author: PitchReporter
Author URI: https://pitchreporter.com
Description: A Cricbuzz-inspired cricket news WordPress theme with pixel-perfect layout, typography, and spacing. Dense, utilitarian sports-news design optimized for rapid content consumption.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: pitchreporter
Tags: news, sports, cricket, three-columns, custom-menu, featured-images, translation-ready
*/

/* ==========================================================================
   DESIGN SYSTEM — Extracted from Cricbuzz screenshots
   
   DEVIL'S ADVOCATE ANALYSIS:
   ─────────────────────────
   Font: Cricbuzz uses a system sans-serif stack dominated by "Open Sans"
         for body text and relies on bold weight (700) for headlines rather
         than a separate display face. Article titles use Georgia/serif for
         editorial contrast on article pages.
   
   Colors: Extremely restrained — near-white (#f5f5f5) page bg, pure white
           (#fff) card bg, dark charcoal (#333) body text, green (#00834c)
           as primary accent (Cricbuzz green), red (#d0021b) for live
           indicators, and #999 for metadata/timestamps.
   
   Layout: Classic 3-column grid — left sidebar (~300px), main content
           (~540px), right sidebar (~300px) on a ~1200px max container.
           Columns separated by light borders (#e4e4e4), NOT gaps.
   
   Spacing: Extremely dense. Padding inside cards: 12px-16px. Gaps between
            news items: 0 (separated by 1px borders). Section headers have
            8px-12px padding. The whole design is about information density.
   
   Borders: 1px solid #e4e4e4 everywhere — column separators, card
            separators, section separators. No box-shadows. No rounded
            corners (0px border-radius on content cards).
   
   Images: Article thumbnails are edge-to-edge within their container
           (no padding around images). Featured images span full content
           width on article pages.
   ========================================================================== */

/* --------------------------------------------------------------------------
   CSS CUSTOM PROPERTIES (Design Tokens)
   -------------------------------------------------------------------------- */
:root {
    /* ── Colors ── */
    --pr-green:             #00834c;
    --pr-green-dark:        #006b3e;
    --pr-green-light:       #e8f5ee;
    --pr-red-live:          #d0021b;
    --pr-red-light:         #fde8ea;
    --pr-blue-link:         #0077cc;
    --pr-blue-link-hover:   #005fa3;

    --pr-text-primary:      #333333;
    --pr-text-secondary:    #555555;
    --pr-text-tertiary:     #999999;
    --pr-text-inverse:      #ffffff;

    --pr-bg-page:           #f1f1f1;
    --pr-bg-card:           #ffffff;
    --pr-bg-header:         #1a1a2e;
    --pr-bg-nav:            #00834c;
    --pr-bg-subnav:         #f7f7f7;
    --pr-bg-footer:         #1a1a2e;

    --pr-border:            #e4e4e4;
    --pr-border-light:      #eeeeee;
    --pr-border-dark:       #cccccc;

    /* ── Typography ── */
    --pr-font-body:         'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
    --pr-font-heading:      'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
    --pr-font-article-title: 'Source Serif 4', Georgia, 'Times New Roman', Times, serif;
    --pr-font-article-body: 'Source Serif 4', Georgia, 'Times New Roman', Times, serif;
    --pr-font-mono:         'Source Code Pro', 'Courier New', monospace;

    /* ── Font Sizes — Cricbuzz is notably small/dense ── */
    --pr-fs-xs:             11px;
    --pr-fs-sm:             12px;
    --pr-fs-base:           13px;
    --pr-fs-md:             14px;
    --pr-fs-lg:             16px;
    --pr-fs-xl:             18px;
    --pr-fs-2xl:            20px;
    --pr-fs-3xl:            24px;
    --pr-fs-4xl:            30px;
    --pr-fs-5xl:            36px;

    /* ── Font Weights ── */
    --pr-fw-normal:         400;
    --pr-fw-medium:         500;
    --pr-fw-semibold:       600;
    --pr-fw-bold:           700;

    /* ── Line Heights — tight for headlines, relaxed for body ── */
    --pr-lh-tight:          1.2;
    --pr-lh-snug:           1.3;
    --pr-lh-normal:         1.5;
    --pr-lh-relaxed:        1.6;

    /* ── Spacing — deliberately dense ── */
    --pr-space-2:           2px;
    --pr-space-4:           4px;
    --pr-space-6:           6px;
    --pr-space-8:           8px;
    --pr-space-10:          10px;
    --pr-space-12:          12px;
    --pr-space-14:          14px;
    --pr-space-16:          16px;
    --pr-space-20:          20px;
    --pr-space-24:          24px;
    --pr-space-32:          32px;
    --pr-space-40:          40px;

    /* ── Layout ── */
    --pr-max-width:         1200px;
    --pr-sidebar-width:     300px;
    --pr-content-width:     calc(var(--pr-max-width) - var(--pr-sidebar-width) * 2);
    --pr-header-height:     50px;
    --pr-nav-height:        40px;

    /* ── Border Radius — Cricbuzz uses almost none ── */
    --pr-radius-none:       0;
    --pr-radius-sm:         2px;
    --pr-radius-md:         4px;
    --pr-radius-btn:        3px;
}


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

html {
    font-size: 100%;
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    font-family: var(--pr-font-body);
    font-size: var(--pr-fs-base);
    font-weight: var(--pr-fw-normal);
    line-height: var(--pr-lh-normal);
    color: var(--pr-text-primary);
    background-color: var(--pr-bg-page);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a {
    color: var(--pr-text-primary);
    text-decoration: none;
    transition: color 0.15s ease;
}

a:hover {
    color: var(--pr-green);
}

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

ul, ol {
    list-style: none;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--pr-font-heading);
    font-weight: var(--pr-fw-bold);
    line-height: var(--pr-lh-tight);
    color: var(--pr-text-primary);
}


/* --------------------------------------------------------------------------
   HEADER
   Cricbuzz: Dark header bar, logo left, search + hamburger right.
   Height ~50px, padding 0 20px, bg very dark navy/charcoal.
   -------------------------------------------------------------------------- */
.site-header {
    background-color: var(--pr-bg-header);
    height: var(--pr-header-height);
    position: sticky;
    top: 0;
    z-index: 1000;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.header-inner {
    max-width: var(--pr-max-width);
    margin: 0 auto;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--pr-space-16);
}

.site-logo {
    display: flex;
    align-items: center;
    gap: var(--pr-space-8);
}

.site-logo img {
    height: 28px;
    width: auto;
}

.site-logo .logo-text {
    font-family: var(--pr-font-heading);
    font-size: var(--pr-fs-xl);
    font-weight: var(--pr-fw-bold);
    color: var(--pr-text-inverse);
    letter-spacing: -0.3px;
}

.site-logo .logo-text span {
    color: var(--pr-green);
}

.header-right {
    display: flex;
    align-items: center;
    gap: var(--pr-space-16);
}

.header-search {
    position: relative;
}

.header-search input {
    width: 220px;
    height: 32px;
    padding: 0 var(--pr-space-12) 0 var(--pr-space-32);
    font-family: var(--pr-font-body);
    font-size: var(--pr-fs-sm);
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: var(--pr-radius-sm);
    color: var(--pr-text-inverse);
    outline: none;
    transition: background 0.2s, border-color 0.2s;
}

.header-search input::placeholder {
    color: rgba(255, 255, 255, 0.5);
    font-size: var(--pr-fs-sm);
}

.header-search input:focus {
    background: rgba(255, 255, 255, 0.15);
    border-color: var(--pr-green);
}

.header-search svg {
    position: absolute;
    left: var(--pr-space-10);
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    color: rgba(255, 255, 255, 0.5);
}

.header-account {
    display: inline-flex;
    align-items: center;
    gap: var(--pr-space-6);
    padding: var(--pr-space-6) var(--pr-space-10);
    font-size: var(--pr-fs-sm);
    font-weight: var(--pr-fw-semibold);
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: var(--pr-radius-sm);
    transition: background-color 0.15s, border-color 0.15s, color 0.15s;
    white-space: nowrap;
}

.header-account:hover,
.header-account:focus {
    background-color: rgba(255, 255, 255, 0.08);
    border-color: var(--pr-green);
    color: var(--pr-text-inverse);
}

.header-account svg {
    flex-shrink: 0;
    color: rgba(255, 255, 255, 0.7);
}

.header-account:hover svg,
.header-account:focus svg {
    color: var(--pr-text-inverse);
}

@media (max-width: 480px) {
    .header-account span {
        display: none;
    }
    .header-account {
        padding: var(--pr-space-6);
    }
}

.header-hamburger {
    display: none;
    width: 32px;
    height: 32px;
    background: none;
    border: none;
    cursor: pointer;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.header-hamburger span {
    display: block;
    width: 20px;
    height: 2px;
    background: var(--pr-text-inverse);
    border-radius: 1px;
    transition: transform 0.2s;
}


/* --------------------------------------------------------------------------
   PRIMARY NAVIGATION
   Cricbuzz: Green bg bar, white text, horizontal nav items.
   font-size ~13px, font-weight 600, text-transform uppercase,
   letter-spacing 0.5px. Padding: 0 12px per item, height 40px.
   Active item has white bottom border (3px).
   -------------------------------------------------------------------------- */
.primary-nav {
    background-color: var(--pr-bg-nav);
    height: var(--pr-nav-height);
    border-bottom: 1px solid var(--pr-green-dark);
}

.primary-nav-inner {
    max-width: var(--pr-max-width);
    margin: 0 auto;
    height: 100%;
    display: flex;
    align-items: center;
    padding: 0 var(--pr-space-16);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.primary-nav-inner::-webkit-scrollbar {
    display: none;
}

.primary-nav ul {
    display: flex;
    align-items: center;
    height: 100%;
    gap: 0;
}

.primary-nav li {
    height: 100%;
}

.primary-nav a {
    display: flex;
    align-items: center;
    height: 100%;
    padding: 0 var(--pr-space-14);
    font-size: var(--pr-fs-sm);
    font-weight: var(--pr-fw-semibold);
    color: var(--pr-text-inverse);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
    border-bottom: 3px solid transparent;
    transition: border-color 0.15s, background-color 0.15s;
}

.primary-nav a:hover,
.primary-nav a:focus {
    background-color: rgba(255, 255, 255, 0.08);
    color: var(--pr-text-inverse);
}

.primary-nav li.current-menu-item a,
.primary-nav li.current_page_item a {
    border-bottom-color: var(--pr-text-inverse);
}


/* --------------------------------------------------------------------------
   MAIN LAYOUT — 3-Column Grid
   Cricbuzz: Left sidebar (300px) | Content (~540px) | Right sidebar (300px)
   Columns touch each other separated only by 1px borders.
   Content area has white bg. Sidebars have white bg too.
   Outer wrapper has page bg (#f1f1f1) visible as a thin frame.
   -------------------------------------------------------------------------- */
.site-content {
    max-width: var(--pr-max-width);
    margin: 0 auto;
    display: grid;
    grid-template-columns: var(--pr-sidebar-width) 1fr var(--pr-sidebar-width);
    min-height: calc(100vh - var(--pr-header-height) - var(--pr-nav-height));
    background-color: var(--pr-bg-card);
    border-left: 1px solid var(--pr-border);
    border-right: 1px solid var(--pr-border);
}

.sidebar-left {
    border-right: 1px solid var(--pr-border);
    background-color: var(--pr-bg-card);
    overflow: hidden;
}

.content-main {
    background-color: var(--pr-bg-card);
    min-width: 0;
}

.sidebar-right {
    border-left: 1px solid var(--pr-border);
    background-color: var(--pr-bg-card);
    overflow: hidden;
}

.site-content.site-content--full {
    grid-template-columns: 1fr;
}


/* --------------------------------------------------------------------------
   SECTION HEADERS
   Cricbuzz: Colored section titles like "FEATURED VIDEOS", "LATEST PHOTOS",
   "IPL 2026". These are ALL-CAPS, color varies (green or red/orange),
   font-size 13px, font-weight 700, letter-spacing 0.8px,
   padding 10px 16px, border-bottom 1px solid #e4e4e4.
   Some have a colored left border (3px).
   -------------------------------------------------------------------------- */
.section-header {
    padding: var(--pr-space-10) var(--pr-space-16);
    border-bottom: 1px solid var(--pr-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.section-header h2,
.section-header h3 {
    font-size: var(--pr-fs-base);
    font-weight: var(--pr-fw-bold);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--pr-green);
    line-height: 1;
}

.section-header--accent {
    border-left: 3px solid var(--pr-green);
}

.section-header--red h2,
.section-header--red h3 {
    color: var(--pr-red-live);
}

.section-header .see-all {
    font-size: var(--pr-fs-xs);
    font-weight: var(--pr-fw-semibold);
    color: var(--pr-blue-link);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.section-header .see-all:hover {
    color: var(--pr-blue-link-hover);
}


/* --------------------------------------------------------------------------
   NEWS LIST — Left Sidebar
   Cricbuzz: Stacked headlines with no images. Each item:
   - padding: 12px 16px
   - border-bottom: 1px solid #e4e4e4
   - headline: font-size 14px, font-weight 600, color #333, line-height 1.3
   - timestamp: font-size 11px, color #999, margin-top 4px
   - hover: headline turns green
   -------------------------------------------------------------------------- */
.news-list-item {
    padding: var(--pr-space-12) var(--pr-space-16);
    border-bottom: 1px solid var(--pr-border);
    transition: background-color 0.1s;
}

.news-list-item:hover {
    background-color: #fafafa;
}

.news-list-item a {
    display: block;
}

.news-list-item .headline {
    font-size: var(--pr-fs-md);
    font-weight: var(--pr-fw-semibold);
    color: var(--pr-text-primary);
    line-height: var(--pr-lh-snug);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.news-list-item:hover .headline {
    color: var(--pr-green);
}

.news-list-item .timestamp {
    font-size: var(--pr-fs-xs);
    font-weight: var(--pr-fw-normal);
    color: var(--pr-text-tertiary);
    margin-top: var(--pr-space-4);
    line-height: 1;
}

/* "More News" button */
.more-news-btn {
    display: block;
    width: calc(100% - 32px);
    margin: var(--pr-space-16);
    padding: var(--pr-space-8) var(--pr-space-16);
    background-color: var(--pr-green);
    color: var(--pr-text-inverse);
    font-size: var(--pr-fs-sm);
    font-weight: var(--pr-fw-semibold);
    text-align: center;
    border: none;
    border-radius: var(--pr-radius-btn);
    cursor: pointer;
    transition: background-color 0.15s;
}

.more-news-btn:hover {
    background-color: var(--pr-green-dark);
    color: var(--pr-text-inverse);
}


/* --------------------------------------------------------------------------
   FEATURED ARTICLE CARD — Main Content Area
   Cricbuzz: Large image (full-width within content column, no padding),
   below it: section label ("IPL 2026") in small green text,
   title in bold ~20px, teaser text ~13px gray, author in blue link.
   padding: 0 for image, 16px for text content below.
   -------------------------------------------------------------------------- */
.featured-article {
    border-bottom: 1px solid var(--pr-border);
}

.featured-article .article-category {
    padding: var(--pr-space-12) var(--pr-space-16) 0;
    font-size: var(--pr-fs-xs);
    font-weight: var(--pr-fw-semibold);
    color: var(--pr-green);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.featured-article .article-image {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    display: block;
    /* No padding — edge to edge as in Cricbuzz */
}

.featured-article .article-body {
    padding: var(--pr-space-12) var(--pr-space-16) var(--pr-space-16);
}

.featured-article .article-title {
    font-size: var(--pr-fs-2xl);
    font-weight: var(--pr-fw-bold);
    line-height: var(--pr-lh-snug);
    color: var(--pr-text-primary);
    margin-bottom: var(--pr-space-8);
}

.featured-article .article-title a:hover {
    color: var(--pr-green);
}

.featured-article .article-excerpt {
    font-size: var(--pr-fs-base);
    font-weight: var(--pr-fw-normal);
    line-height: var(--pr-lh-relaxed);
    color: var(--pr-text-secondary);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}


/* --------------------------------------------------------------------------
   CONTENT CARD — Standard news card in main column
   Cricbuzz: Horizontal layout — thumbnail left (120x80), text right.
   padding: 12px 16px. Gap between thumb and text: 12px.
   Title: 14px bold, teaser: 12px #555, timestamp: 11px #999.
   -------------------------------------------------------------------------- */
.content-card {
    display: flex;
    gap: var(--pr-space-12);
    padding: var(--pr-space-12) var(--pr-space-16);
    border-bottom: 1px solid var(--pr-border);
    transition: background-color 0.1s;
}

.content-card:hover {
    background-color: #fafafa;
}

.content-card .card-thumb {
    flex-shrink: 0;
    width: 120px;
    height: 80px;
    border-radius: var(--pr-radius-sm);
    overflow: hidden;
}

.content-card .card-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.content-card .card-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.content-card .card-title {
    font-size: var(--pr-fs-md);
    font-weight: var(--pr-fw-semibold);
    line-height: var(--pr-lh-snug);
    color: var(--pr-text-primary);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: var(--pr-space-4);
}

.content-card:hover .card-title {
    color: var(--pr-green);
}

.content-card .card-excerpt {
    font-size: var(--pr-fs-sm);
    font-weight: var(--pr-fw-normal);
    line-height: var(--pr-lh-normal);
    color: var(--pr-text-secondary);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: var(--pr-space-4);
}

.content-card .card-meta {
    font-size: var(--pr-fs-xs);
    color: var(--pr-text-tertiary);
}


/* --------------------------------------------------------------------------
   RIGHT SIDEBAR — Featured Videos
   Cricbuzz: Video cards stacked vertically. Each card:
   - Full-width thumbnail with duration badge (bottom-right)
   - Title below: 13px semibold, line-height 1.3, 2-line clamp
   - No border-radius on thumbnails
   - Padding: 0 for image, 10px 16px for title
   - Duration badge: absolute positioned, bg rgba(0,0,0,0.75),
     color white, font-size 10px, padding 2px 4px
   -------------------------------------------------------------------------- */
.video-card {
    border-bottom: 1px solid var(--pr-border);
}

.video-card .video-thumb {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

.video-card .video-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.video-card .video-duration {
    position: absolute;
    bottom: var(--pr-space-6);
    right: var(--pr-space-6);
    background: rgba(0, 0, 0, 0.75);
    color: var(--pr-text-inverse);
    font-size: 10px;
    font-weight: var(--pr-fw-semibold);
    padding: var(--pr-space-2) var(--pr-space-6);
    border-radius: var(--pr-radius-sm);
    line-height: 1;
    letter-spacing: 0.3px;
}

.video-card .video-play-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 40px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s;
}

.video-card:hover .video-play-icon {
    opacity: 1;
}

.video-card .video-play-icon svg {
    width: 16px;
    height: 16px;
    color: var(--pr-text-inverse);
    margin-left: 2px;
}

.video-card .video-title {
    padding: var(--pr-space-10) var(--pr-space-16) var(--pr-space-12);
    font-size: var(--pr-fs-base);
    font-weight: var(--pr-fw-semibold);
    line-height: var(--pr-lh-snug);
    color: var(--pr-text-primary);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.video-card:hover .video-title {
    color: var(--pr-green);
}


/* --------------------------------------------------------------------------
   PHOTO GALLERY SECTION — Left Sidebar
   Cricbuzz: "LATEST PHOTOS" header, then a photo card:
   full-width image, caption below in 12px, date in 11px gray.
   -------------------------------------------------------------------------- */
.photo-card {
    border-bottom: 1px solid var(--pr-border);
}

.photo-card .photo-image {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.photo-card .photo-caption {
    padding: var(--pr-space-10) var(--pr-space-16);
}

.photo-card .photo-title {
    font-size: var(--pr-fs-sm);
    font-weight: var(--pr-fw-semibold);
    line-height: var(--pr-lh-snug);
    color: var(--pr-text-primary);
    margin-bottom: var(--pr-space-4);
}

.photo-card .photo-date {
    font-size: var(--pr-fs-xs);
    color: var(--pr-text-tertiary);
}


/* --------------------------------------------------------------------------
   SINGLE ARTICLE PAGE
   Cricbuzz article: Full-width content area (no sidebars on some views),
   but typically same 3-col layout. Article area uses:
   - Title: font-family Georgia/serif, font-size 30px, font-weight 700,
     line-height 1.2, color #333
   - Author: avatar circle 36px, name in blue link 13px
   - Social buttons: bg blue (#3b5998 FB, #1da1f2 Twitter), white text,
     font-size 12px, padding 6px 14px, border-radius 3px
   - Featured image: full-width, no border-radius
   - Body text: 15px, line-height 1.7, color #333, max-width ~680px
   - Paragraphs: margin-bottom 16px
   -------------------------------------------------------------------------- */
.single-article-header {
    padding: var(--pr-space-24) var(--pr-space-16);
    border-bottom: 1px solid var(--pr-border);
}

.single-article-header .article-title {
    font-family: var(--pr-font-article-title);
    font-size: var(--pr-fs-4xl);
    font-weight: var(--pr-fw-bold);
    line-height: var(--pr-lh-tight);
    color: var(--pr-text-primary);
    margin-bottom: var(--pr-space-16);
}

.article-author {
    display: flex;
    align-items: center;
    gap: var(--pr-space-10);
    margin-bottom: var(--pr-space-16);
}

.article-author .author-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
}

.article-author .author-name {
    font-size: var(--pr-fs-base);
    font-weight: var(--pr-fw-normal);
    color: var(--pr-blue-link);
}

.article-author .author-name:hover {
    text-decoration: underline;
}

.article-author-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.article-dates {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--pr-space-6);
    font-size: var(--pr-fs-sm);
    color: var(--pr-text-tertiary);
    line-height: 1.4;
}

.article-date {
    color: var(--pr-text-secondary);
    font-weight: var(--pr-fw-medium);
}

.article-date-sep {
    color: var(--pr-text-tertiary);
}

.article-updated {
    color: var(--pr-text-secondary);
    font-weight: var(--pr-fw-medium);
}

.article-updated time {
    color: inherit;
}

.article-share {
    display: flex;
    gap: var(--pr-space-8);
}

.share-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--pr-space-6);
    padding: var(--pr-space-6) var(--pr-space-14);
    font-size: var(--pr-fs-sm);
    font-weight: var(--pr-fw-semibold);
    color: var(--pr-text-inverse);
    border: none;
    border-radius: var(--pr-radius-btn);
    cursor: pointer;
    transition: opacity 0.15s;
}

.share-btn:hover {
    opacity: 0.85;
    color: var(--pr-text-inverse);
}

.share-btn--facebook {
    background-color: #3b5998;
}

.share-btn--twitter {
    background-color: #1a1a1a;
}

.share-btn--whatsapp {
    background-color: #25d366;
}

.share-btn svg {
    width: 14px;
    height: 14px;
}

.single-article-image {
    width: 100%;
}

.single-article-image img {
    width: 100%;
    display: block;
}

.single-article-body {
    padding: var(--pr-space-24) var(--pr-space-16);
}

.single-article-body .entry-content {
    font-family: var(--pr-font-article-body);
    font-size: 17px;
    font-weight: var(--pr-fw-normal);
    line-height: 1.7;
    color: var(--pr-text-primary);
}

.single-article-body .entry-content h2,
.single-article-body .entry-content h3 {
    font-family: var(--pr-font-article-title);
    font-weight: var(--pr-fw-bold);
}

.single-article-body .entry-content p {
    margin-bottom: var(--pr-space-16);
}

.single-article-body .entry-content h2 {
    font-size: var(--pr-fs-2xl);
    margin-top: var(--pr-space-32);
    margin-bottom: var(--pr-space-12);
}

.single-article-body .entry-content h3 {
    font-size: var(--pr-fs-xl);
    margin-top: var(--pr-space-24);
    margin-bottom: var(--pr-space-10);
}

.single-article-body .entry-content blockquote {
    border-left: 3px solid var(--pr-green);
    padding: var(--pr-space-12) var(--pr-space-20);
    margin: var(--pr-space-20) 0;
    background: var(--pr-green-light);
    font-style: italic;
    color: var(--pr-text-secondary);
}

.single-article-body .entry-content a {
    color: var(--pr-blue-link);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.single-article-body .entry-content a:hover {
    color: var(--pr-blue-link-hover);
}


/* --------------------------------------------------------------------------
   MATCH SCORECARD WIDGET
   Cricbuzz: bg white, border 1px solid #e4e4e4.
   Team row: flex between team name + score. font-size 13px.
   Team name: semibold. Score: bold. Status: 11px green or red.
   Padding 10px 16px per row. Top row has a colored strip (2px).
   -------------------------------------------------------------------------- */
.match-widget {
    border: 1px solid var(--pr-border);
    margin: var(--pr-space-16);
    border-radius: var(--pr-radius-sm);
    overflow: hidden;
}

.match-widget .match-header {
    background: var(--pr-green-light);
    padding: var(--pr-space-6) var(--pr-space-12);
    font-size: var(--pr-fs-xs);
    font-weight: var(--pr-fw-semibold);
    color: var(--pr-green);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    border-bottom: 1px solid var(--pr-border);
}

.match-widget .team-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--pr-space-10) var(--pr-space-12);
    border-bottom: 1px solid var(--pr-border-light);
}

.match-widget .team-row:last-of-type {
    border-bottom: none;
}

.match-widget .team-name {
    font-size: var(--pr-fs-base);
    font-weight: var(--pr-fw-semibold);
    color: var(--pr-text-primary);
    display: flex;
    align-items: center;
    gap: var(--pr-space-8);
}

.match-widget .team-flag {
    width: 20px;
    height: 14px;
    object-fit: cover;
    border-radius: 1px;
}

.match-widget .team-score {
    font-size: var(--pr-fs-base);
    font-weight: var(--pr-fw-bold);
    color: var(--pr-text-primary);
}

.match-widget .match-status {
    padding: var(--pr-space-8) var(--pr-space-12);
    font-size: var(--pr-fs-xs);
    font-weight: var(--pr-fw-semibold);
    border-top: 1px solid var(--pr-border-light);
}

.match-widget .match-status--live {
    color: var(--pr-red-live);
}

.match-widget .match-status--result {
    color: var(--pr-green);
}


/* --------------------------------------------------------------------------
   PAGINATION
   Cricbuzz-style: centered, current page green bg, others bordered.
   -------------------------------------------------------------------------- */
.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--pr-space-4);
    padding: var(--pr-space-20) var(--pr-space-16);
    border-top: 1px solid var(--pr-border);
}

.pagination a,
.pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    padding: 0 var(--pr-space-10);
    font-size: var(--pr-fs-sm);
    font-weight: var(--pr-fw-semibold);
    border: 1px solid var(--pr-border);
    border-radius: var(--pr-radius-sm);
    transition: background-color 0.15s, border-color 0.15s;
}

.pagination a:hover {
    background-color: var(--pr-green-light);
    border-color: var(--pr-green);
    color: var(--pr-green);
}

.pagination .current {
    background-color: var(--pr-green);
    border-color: var(--pr-green);
    color: var(--pr-text-inverse);
}


/* --------------------------------------------------------------------------
   FOOTER
   Cricbuzz: Dark bg matching header, multi-column links.
   font-size 12px, color rgba(255,255,255,0.6), padding 32px 16px.
   Link columns: About, Cricket, Company etc. All-caps headers 11px bold.
   -------------------------------------------------------------------------- */
.site-footer {
    background-color: var(--pr-bg-footer);
    color: rgba(255, 255, 255, 0.6);
    border-top: 3px solid var(--pr-green);
}

.footer-inner {
    max-width: var(--pr-max-width);
    margin: 0 auto;
    padding: var(--pr-space-32) var(--pr-space-16);
}

.footer-columns {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--pr-space-32);
    margin-bottom: var(--pr-space-32);
}

.footer-column h4 {
    font-size: var(--pr-fs-xs);
    font-weight: var(--pr-fw-bold);
    text-transform: uppercase;
    letter-spacing: 1px;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: var(--pr-space-12);
}

.footer-column li {
    margin-bottom: var(--pr-space-8);
}

.footer-column a,
.footer-column span {
    font-size: var(--pr-fs-sm);
    color: rgba(255, 255, 255, 0.5);
    transition: color 0.15s;
}

.footer-column a:hover {
    color: var(--pr-green);
}

.footer-bottom {
    padding-top: var(--pr-space-20);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.footer-copyright {
    font-size: var(--pr-fs-xs);
    color: rgba(255, 255, 255, 0.4);
}

.footer-social {
    display: flex;
    gap: var(--pr-space-12);
}

.footer-social a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.5);
    transition: background 0.15s, color 0.15s;
}

.footer-social a:hover {
    background: var(--pr-green);
    color: var(--pr-text-inverse);
}

.footer-social svg {
    width: 16px;
    height: 16px;
}


/* --------------------------------------------------------------------------
   RESPONSIVE
   Cricbuzz collapses to 2-col then 1-col.
   Breakpoints: 1024px (2-col), 768px (1-col), 480px (compact).
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
    .site-content {
        grid-template-columns: 1fr var(--pr-sidebar-width);
    }

    .sidebar-left {
        display: none;
    }

    .footer-columns {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    :root {
        --pr-header-height: 48px;
    }

    .site-content {
        grid-template-columns: 1fr;
    }

    .sidebar-right {
        border-left: none;
        border-top: 1px solid var(--pr-border);
    }

    .header-search input {
        width: 160px;
    }

    .header-hamburger {
        display: flex;
    }

    .primary-nav a {
        padding: 0 var(--pr-space-10);
        font-size: var(--pr-fs-xs);
    }

    .single-article-header .article-title {
        font-size: var(--pr-fs-3xl);
    }

    .featured-article .article-title {
        font-size: var(--pr-fs-xl);
    }

    .footer-columns {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--pr-space-24);
    }
}

@media (max-width: 480px) {
    .content-card {
        flex-direction: column;
        gap: var(--pr-space-8);
    }

    .content-card .card-thumb {
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 9;
    }

    .header-search {
        display: none;
    }

    .footer-columns {
        grid-template-columns: 1fr;
    }

    .footer-bottom {
        flex-direction: column;
        gap: var(--pr-space-12);
        text-align: center;
    }
}


/* --------------------------------------------------------------------------
   UTILITY CLASSES
   -------------------------------------------------------------------------- */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

.text-green  { color: var(--pr-green); }
.text-red    { color: var(--pr-red-live); }
.text-gray   { color: var(--pr-text-tertiary); }
.text-bold   { font-weight: var(--pr-fw-bold); }
.text-upper  { text-transform: uppercase; letter-spacing: 0.5px; }
.text-sm     { font-size: var(--pr-fs-sm); }
.text-xs     { font-size: var(--pr-fs-xs); }

.bg-green-light { background-color: var(--pr-green-light); }
.bg-red-light   { background-color: var(--pr-red-light); }

.border-b      { border-bottom: 1px solid var(--pr-border); }
.p-16          { padding: var(--pr-space-16); }
.px-16         { padding-left: var(--pr-space-16); padding-right: var(--pr-space-16); }
.py-12         { padding-top: var(--pr-space-12); padding-bottom: var(--pr-space-12); }
.mb-8          { margin-bottom: var(--pr-space-8); }
.mb-16         { margin-bottom: var(--pr-space-16); }
.mt-16         { margin-top: var(--pr-space-16); }


/* --------------------------------------------------------------------------
   WORDPRESS-SPECIFIC: wp-block alignments, gallery, etc.
   -------------------------------------------------------------------------- */
.wp-block-image,
.wp-block-embed {
    margin: var(--pr-space-20) 0;
}

.wp-block-image img {
    width: 100%;
}

.alignwide {
    margin-left: calc(-1 * var(--pr-space-16));
    margin-right: calc(-1 * var(--pr-space-16));
}

.alignfull {
    margin-left: calc(-1 * var(--pr-space-16));
    margin-right: calc(-1 * var(--pr-space-16));
    max-width: none;
    width: calc(100% + var(--pr-space-16) * 2);
}

.has-text-align-center {
    text-align: center;
}

/* WordPress admin bar fix */
body.admin-bar .site-header {
    top: 32px;
}

@media (max-width: 782px) {
    body.admin-bar .site-header {
        top: 46px;
    }
}


/* ==========================================================================
   SUPPLEMENTAL STYLES — Templates (archive, search, page, 404, comments)
   Added for pr-* prefixed class names used across all templates.
   These map to identical metrics from the base design system above.
   ========================================================================== */

/* --------------------------------------------------------------------------
   PR-GRID — Core layout system
   3-column: left sidebar (300px) | main (flex) | right sidebar (300px)
   2-column variant (.pr-grid--two-col): main (flex) | right sidebar (300px)
   Matches Cricbuzz's grid precisely at 1200px max-width.
   -------------------------------------------------------------------------- */
.pr-container {
    max-width: var(--pr-max-width);
    margin: 0 auto;
    background-color: var(--pr-bg-white);
}

.pr-grid {
    display: grid;
    grid-template-columns: var(--pr-sidebar-width) 1fr var(--pr-sidebar-width);
    border-left: 1px solid var(--pr-border);
    border-right: 1px solid var(--pr-border);
}

.pr-grid--two-col {
    grid-template-columns: 1fr var(--pr-sidebar-width);
}

.pr-grid.pr-grid--full {
    grid-template-columns: 1fr;
}

.pr-main {
    border-left: 1px solid var(--pr-border);
    border-right: 1px solid var(--pr-border);
    min-height: 60vh;
}

.pr-main--page {
    max-width: 840px;
    margin: 0 auto;
    border: none;
    padding: 0 var(--pr-space-16);
}

.pr-sidebar {
    padding: 0;
}

.pr-sidebar--left {
    border-right: 1px solid var(--pr-border);
}

.pr-sidebar--right {
    border-left: 1px solid var(--pr-border);
}

.pr-page-wrapper {
    border-left: 1px solid var(--pr-border);
    border-right: 1px solid var(--pr-border);
    padding: var(--pr-space-24) 0;
}


/* --------------------------------------------------------------------------
   PR-SECTION-HEADER / PR-SECTION-TITLE
   Green uppercase section labels (exact Cricbuzz: 13px bold uppercase,
   color #00834c, 10px 16px padding, bottom border 1px #e4e4e4).
   -------------------------------------------------------------------------- */
.pr-section-header {
    padding: var(--pr-space-10) var(--pr-space-16);
    border-bottom: 1px solid var(--pr-border);
}

.pr-section-title {
    font-size: var(--pr-fs-base);
    font-weight: var(--pr-fw-bold);
    text-transform: uppercase;
    color: var(--pr-green);
    letter-spacing: 0.5px;
}

.pr-section-label,
.article-category {
    display: inline-block;
    padding: 4px 10px;
    background-color: var(--pr-green);
    color: var(--pr-text-inverse);
    font-size: var(--pr-fs-xs);
    font-weight: var(--pr-fw-bold);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: 2px;
    text-decoration: none;
    line-height: 1.4;
    margin-bottom: var(--pr-space-8);
}

.pr-section-label:hover,
.article-category:hover {
    background-color: var(--pr-green-dark);
    color: var(--pr-text-inverse);
}

.pr-section-label--small {
    padding: 2px 8px;
    font-size: 10px;
}


/* --------------------------------------------------------------------------
   PR-NEWS-ITEM — Left sidebar news list items
   Cricbuzz: 14px semibold title, 11px gray timestamp, 12px vertical padding,
   16px horizontal, bottom border, no image. Identical to .news-item above.
   -------------------------------------------------------------------------- */
.pr-news-item {
    padding: var(--pr-space-12) var(--pr-space-16);
    border-bottom: 1px solid var(--pr-border);
}

.pr-news-item__link {
    display: block;
}

.pr-news-item__title {
    font-size: var(--pr-fs-md);
    font-weight: var(--pr-fw-semibold);
    line-height: var(--pr-lh-snug);
    color: var(--pr-text-primary);
    margin-bottom: var(--pr-space-4);
}

.pr-news-item__link:hover .pr-news-item__title {
    color: var(--pr-green);
}

.pr-news-item__time {
    font-size: var(--pr-fs-xs);
    color: var(--pr-text-tertiary);
}


/* --------------------------------------------------------------------------
   PR-MORE-BTN — "More News" button
   Cricbuzz: green bg, white text, centered, 12px bold, rounded 3px,
   padding 8px 28px. We add 16px margin for breathing room.
   -------------------------------------------------------------------------- */
.pr-more-btn {
    display: block;
    width: fit-content;
    margin: var(--pr-space-16) auto;
    padding: var(--pr-space-8) 28px;
    background: var(--pr-green);
    color: var(--pr-text-inverse);
    font-size: var(--pr-fs-sm);
    font-weight: var(--pr-fw-bold);
    border-radius: var(--pr-radius-btn);
    text-align: center;
    transition: background-color 0.15s;
}

.pr-more-btn:hover {
    background: var(--pr-green-dark);
    color: var(--pr-text-inverse);
}


/* --------------------------------------------------------------------------
   PR-FEATURED-ARTICLE — Main column hero card
   Full-width image, section label, 20px title, excerpt 13px.
   -------------------------------------------------------------------------- */
.pr-featured-article {
    border-bottom: 1px solid var(--pr-border);
}

.pr-featured-article__image-link {
    display: block;
}

.pr-featured-article__image {
    width: 100%;
    display: block;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.pr-featured-article__title {
    font-size: var(--pr-fs-xl);
    font-weight: var(--pr-fw-bold);
    line-height: var(--pr-lh-snug);
    color: var(--pr-text-primary);
    padding: var(--pr-space-12) var(--pr-space-16) var(--pr-space-4);
}

.pr-featured-article__title a {
    color: inherit;
}

.pr-featured-article__title a:hover {
    color: var(--pr-green);
}

.pr-featured-article__excerpt {
    font-size: var(--pr-fs-base);
    line-height: var(--pr-lh-normal);
    color: var(--pr-text-secondary);
    padding: 0 var(--pr-space-16) var(--pr-space-16);
}

.pr-featured-article .pr-section-label {
    padding: var(--pr-space-12) var(--pr-space-16) 0;
}


/* --------------------------------------------------------------------------
   PR-CONTENT-CARD — Thumbnail + text card (used in main + sidebars)
   Cricbuzz: 120×80 thumb (4:3 crop) on left, text on right.
   Title 13px semibold, excerpt 12px, time 11px gray.
   Flex row, gap 12px, padding 12px 16px.
   -------------------------------------------------------------------------- */
.pr-content-card {
    display: flex;
    gap: var(--pr-space-12);
    padding: var(--pr-space-12) var(--pr-space-16);
    border-bottom: 1px solid var(--pr-border);
}

.pr-content-card__thumb-link {
    flex-shrink: 0;
}

.pr-content-card__thumb {
    width: 120px;
    height: 80px;
    object-fit: cover;
    display: block;
}

.pr-content-card--small .pr-content-card__thumb {
    width: 100px;
    height: 67px;
}

.pr-content-card__body {
    flex: 1;
    min-width: 0;
}

.pr-content-card__title {
    font-size: var(--pr-fs-base);
    font-weight: var(--pr-fw-semibold);
    line-height: var(--pr-lh-snug);
    color: var(--pr-text-primary);
    margin-bottom: var(--pr-space-4);
}

.pr-content-card__title a {
    color: inherit;
}

.pr-content-card__title a:hover {
    color: var(--pr-green);
}

.pr-content-card__excerpt {
    font-size: var(--pr-fs-sm);
    line-height: var(--pr-lh-normal);
    color: var(--pr-text-secondary);
    margin-bottom: var(--pr-space-4);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.pr-content-card__time {
    font-size: var(--pr-fs-xs);
    color: var(--pr-text-tertiary);
}

.pr-content-card__meta {
    display: flex;
    gap: var(--pr-space-12);
    align-items: center;
}

.pr-content-card__author {
    font-size: var(--pr-fs-xs);
    color: var(--pr-text-secondary);
}


/* --------------------------------------------------------------------------
   PR-PAGINATION — WordPress pagination wrapper
   -------------------------------------------------------------------------- */
.pr-pagination {
    padding: var(--pr-space-20) var(--pr-space-16);
    border-top: 1px solid var(--pr-border);
}

.pr-pagination .nav-links {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--pr-space-4);
}

.pr-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    padding: 0 var(--pr-space-10);
    font-size: var(--pr-fs-sm);
    font-weight: var(--pr-fw-semibold);
    border: 1px solid var(--pr-border);
    border-radius: var(--pr-radius-sm);
    color: var(--pr-text-primary);
    transition: background-color 0.15s, border-color 0.15s;
}

.pr-pagination a.page-numbers:hover {
    background-color: var(--pr-green-light);
    border-color: var(--pr-green);
    color: var(--pr-green);
}

.pr-pagination .page-numbers.current {
    background-color: var(--pr-green);
    border-color: var(--pr-green);
    color: var(--pr-text-inverse);
}


/* --------------------------------------------------------------------------
   PR-ARCHIVE-HEADER — Category/tag/search archive header
   -------------------------------------------------------------------------- */
.pr-archive-header {
    margin-bottom: 0;
}

.pr-archive-header__desc {
    padding: var(--pr-space-8) var(--pr-space-16) var(--pr-space-16);
    font-size: var(--pr-fs-sm);
    line-height: var(--pr-lh-normal);
    color: var(--pr-text-secondary);
    border-bottom: 1px solid var(--pr-border);
}

.pr-archive-header__count {
    padding: var(--pr-space-8) var(--pr-space-16);
    font-size: var(--pr-fs-sm);
    color: var(--pr-text-tertiary);
    border-bottom: 1px solid var(--pr-border);
}


/* --------------------------------------------------------------------------
   PR-NO-RESULTS — Empty state (no posts, 404, empty search)
   -------------------------------------------------------------------------- */
.pr-no-results {
    padding: var(--pr-space-32) var(--pr-space-16);
    text-align: center;
}

.pr-no-results--404 {
    padding-top: 48px;
}

.pr-no-results__title {
    font-size: var(--pr-fs-2xl);
    font-weight: var(--pr-fw-bold);
    color: var(--pr-text-primary);
    margin-bottom: var(--pr-space-8);
}

.pr-no-results__desc {
    font-size: var(--pr-fs-md);
    color: var(--pr-text-secondary);
    margin-bottom: var(--pr-space-24);
}

.pr-no-results__search {
    max-width: 400px;
    margin: var(--pr-space-16) auto;
}


/* --------------------------------------------------------------------------
   PR-SINGLE-ARTICLE — page.php title variant
   Same Georgia serif as single post, but no author/share bar.
   -------------------------------------------------------------------------- */
.pr-single-article__title--page {
    font-family: var(--pr-font-article-title);
    font-size: var(--pr-fs-4xl);
    font-weight: var(--pr-fw-bold);
    line-height: var(--pr-lh-tight);
    color: var(--pr-text-primary);
    margin-bottom: var(--pr-space-24);
}

.pr-single-article__featured-image {
    margin-bottom: var(--pr-space-24);
}

.pr-single-article__featured-image img {
    width: 100%;
    display: block;
}


/* --------------------------------------------------------------------------
   COMMENTS — pr-comments
   Minimal, dense styling. 11px timestamps, 13px body text, 36px avatars.
   Thin borders only, no card shadows.
   -------------------------------------------------------------------------- */
.pr-comments {
    padding: var(--pr-space-24) var(--pr-space-16);
    border-top: 1px solid var(--pr-border);
}

.pr-comments__list {
    list-style: none;
    padding: 0;
    margin: var(--pr-space-16) 0 0 0;
}

.pr-comment {
    padding: var(--pr-space-12) 0;
    border-bottom: 1px solid var(--pr-border);
}

.pr-comment .children {
    list-style: none;
    padding-left: 36px;
    margin: 0;
}

.pr-comment__header {
    display: flex;
    align-items: center;
    gap: var(--pr-space-8);
    margin-bottom: var(--pr-space-8);
}

.pr-comment__avatar img {
    width: 36px;
    height: 36px;
    border-radius: 50%;
}

.pr-comment__author a {
    font-size: var(--pr-fs-base);
    font-weight: var(--pr-fw-semibold);
    color: var(--pr-blue-link);
}

.pr-comment__time {
    font-size: var(--pr-fs-xs);
    color: var(--pr-text-tertiary);
}

.pr-comment__moderation {
    font-size: var(--pr-fs-sm);
    color: var(--pr-text-tertiary);
    font-style: italic;
    margin-bottom: var(--pr-space-8);
}

.pr-comment__content {
    font-size: var(--pr-fs-base);
    line-height: var(--pr-lh-normal);
    color: var(--pr-text-primary);
    margin-bottom: var(--pr-space-8);
}

.pr-comment__content p {
    margin-bottom: var(--pr-space-8);
}

.pr-comment__actions {
    display: flex;
    gap: var(--pr-space-12);
}

.pr-comment__reply a,
.pr-comment__edit a {
    font-size: var(--pr-fs-xs);
    font-weight: var(--pr-fw-semibold);
    color: var(--pr-green);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.pr-comment__reply a:hover,
.pr-comment__edit a:hover {
    text-decoration: underline;
}

.pr-comments__nav {
    display: flex;
    justify-content: space-between;
    padding: var(--pr-space-12) 0;
    font-size: var(--pr-fs-sm);
}

.pr-comments__nav a {
    color: var(--pr-green);
    font-weight: var(--pr-fw-semibold);
}

.pr-comments__closed {
    font-size: var(--pr-fs-sm);
    color: var(--pr-text-tertiary);
    font-style: italic;
    padding: var(--pr-space-12) 0;
}


/* --------------------------------------------------------------------------
   COMMENT FORM — pr-comment-form
   -------------------------------------------------------------------------- */
.pr-comment-form label {
    display: block;
    font-size: var(--pr-fs-sm);
    font-weight: var(--pr-fw-semibold);
    color: var(--pr-text-primary);
    margin-bottom: var(--pr-space-4);
}

.pr-comment-form input[type="text"],
.pr-comment-form input[type="email"],
.pr-comment-form input[type="url"],
.pr-comment-form textarea {
    width: 100%;
    padding: var(--pr-space-8) var(--pr-space-12);
    font-size: var(--pr-fs-base);
    font-family: var(--pr-font-body);
    border: 1px solid var(--pr-border);
    border-radius: var(--pr-radius-sm);
    margin-bottom: var(--pr-space-12);
    transition: border-color 0.15s;
}

.pr-comment-form input:focus,
.pr-comment-form textarea:focus {
    outline: none;
    border-color: var(--pr-green);
}

.pr-comment-form textarea {
    min-height: 120px;
    resize: vertical;
}

.pr-comment-form__submit {
    display: inline-block;
    padding: var(--pr-space-8) var(--pr-space-24);
    background: var(--pr-green);
    color: var(--pr-text-inverse);
    font-size: var(--pr-fs-sm);
    font-weight: var(--pr-fw-bold);
    border: none;
    border-radius: var(--pr-radius-btn);
    cursor: pointer;
    transition: background 0.15s;
}

.pr-comment-form__submit:hover {
    background: var(--pr-green-dark);
}


/* --------------------------------------------------------------------------
   SEARCH FORM — WordPress default search form styling
   -------------------------------------------------------------------------- */
.search-form {
    display: flex;
    gap: 0;
}

.search-form .search-field {
    flex: 1;
    padding: var(--pr-space-8) var(--pr-space-12);
    font-size: var(--pr-fs-md);
    font-family: var(--pr-font-body);
    border: 1px solid var(--pr-border);
    border-right: none;
    border-radius: var(--pr-radius-sm) 0 0 var(--pr-radius-sm);
}

.search-form .search-field:focus {
    outline: none;
    border-color: var(--pr-green);
}

.search-form .search-submit {
    padding: var(--pr-space-8) var(--pr-space-16);
    background: var(--pr-green);
    color: var(--pr-text-inverse);
    font-size: var(--pr-fs-sm);
    font-weight: var(--pr-fw-bold);
    border: 1px solid var(--pr-green);
    border-radius: 0 var(--pr-radius-sm) var(--pr-radius-sm) 0;
    cursor: pointer;
    transition: background 0.15s;
}

.search-form .search-submit:hover {
    background: var(--pr-green-dark);
}


/* --------------------------------------------------------------------------
   MOBILE NAV — off-canvas slide-down
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    .primary-nav-inner {
        display: none;
    }

    .primary-nav.primary-nav--open {
        height: auto;
    }

    .primary-nav.primary-nav--open .primary-nav-inner {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        padding: 0;
        overflow: visible;
    }

    .primary-nav.primary-nav--open ul {
        flex-direction: column;
        align-items: stretch;
        height: auto;
        width: 100%;
    }

    .primary-nav.primary-nav--open li {
        height: auto;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    .primary-nav.primary-nav--open a {
        padding: var(--pr-space-12) var(--pr-space-16);
        height: auto;
        border-bottom: none;
    }

    /* 2-col grid falls to 1-col */
    .pr-grid--two-col {
        grid-template-columns: 1fr;
    }
}


/* --------------------------------------------------------------------------
   STICKY NAV — class toggled by JS
   -------------------------------------------------------------------------- */
.primary-nav--sticky {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}


/* --------------------------------------------------------------------------
   HEADER SEARCH — expand/collapse
   -------------------------------------------------------------------------- */
.pr-header__search-form {
    display: flex;
    align-items: center;
    overflow: hidden;
    max-width: 0;
    transition: max-width 0.25s ease;
}

.pr-header__search-form--active {
    max-width: 250px;
}

.pr-header__search-input {
    width: 220px;
    padding: var(--pr-space-6) var(--pr-space-10);
    font-size: var(--pr-fs-sm);
    font-family: var(--pr-font-body);
    border: none;
    border-radius: var(--pr-radius-sm);
    outline: none;
}

.pr-header__search-toggle {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    padding: var(--pr-space-8);
}

.pr-header__search-toggle:hover {
    color: var(--pr-text-inverse);
}

.pr-header__search-toggle svg {
    width: 18px;
    height: 18px;
}


/* --------------------------------------------------------------------------
   RESPONSIVE OVERRIDES for pr-* classes
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
    .pr-grid {
        grid-template-columns: 1fr var(--pr-sidebar-width);
    }

    .pr-sidebar--left {
        display: none;
    }
}

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

    .pr-sidebar--right {
        border-left: none;
        border-top: 1px solid var(--pr-border);
    }

    .pr-single-article__title--page {
        font-size: var(--pr-fs-3xl);
    }
}

@media (max-width: 480px) {
    .pr-content-card {
        flex-direction: column;
    }

    .pr-content-card__thumb {
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 9;
    }
}


/* --------------------------------------------------------------------------
   AUTHOR PAGE
   -------------------------------------------------------------------------- */
.pr-author-card {
    display: grid;
    grid-template-columns: 96px 1fr;
    gap: var(--pr-space-16);
    align-items: start;
    background-color: var(--pr-bg-card);
    border: 1px solid var(--pr-border);
    border-top: 3px solid var(--pr-green);
    padding: var(--pr-space-16);
    margin-bottom: var(--pr-space-20);
}
.pr-author-card__img {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}
.pr-author-card__role {
    font-family: var(--pr-font-heading);
    font-size: var(--pr-fs-xs);
    font-weight: var(--pr-fw-semibold);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--pr-green);
    margin: 0 0 var(--pr-space-4);
}
.pr-author-card__name {
    font-family: var(--pr-font-article-title);
    font-size: var(--pr-fs-3xl);
    font-weight: var(--pr-fw-bold);
    line-height: var(--pr-lh-tight);
    color: var(--pr-text-primary);
    margin: 0 0 var(--pr-space-8);
}
.pr-author-card__note {
    font-family: var(--pr-font-body);
    font-size: var(--pr-fs-xs);
    color: var(--pr-red-live);
    margin: 0 0 var(--pr-space-8);
}
.pr-author-card__beats {
    list-style: none;
    margin: 0 0 var(--pr-space-10);
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--pr-space-4) var(--pr-space-6);
}
.pr-author-card__beats li {
    font-family: var(--pr-font-body);
    font-size: var(--pr-fs-xs);
    padding: 2px 8px;
    background-color: var(--pr-green-light);
    color: var(--pr-green-dark);
    border-radius: var(--pr-radius-sm);
}
.pr-author-card__bio {
    font-family: var(--pr-font-body);
    font-size: var(--pr-fs-base);
    line-height: var(--pr-lh-relaxed);
    color: var(--pr-text-secondary);
    margin: 0 0 var(--pr-space-10);
    max-width: 640px;
}
.pr-author-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--pr-space-12);
    align-items: center;
    font-family: var(--pr-font-body);
    font-size: var(--pr-fs-sm);
    color: var(--pr-text-tertiary);
}
.pr-author-card__count {
    color: var(--pr-text-tertiary);
}
.pr-author-card__link {
    color: var(--pr-blue-link);
    text-decoration: none;
}
.pr-author-card__link:hover {
    color: var(--pr-blue-link-hover);
    text-decoration: underline;
}
@media (max-width: 600px) {
    .pr-author-card { grid-template-columns: 1fr; gap: var(--pr-space-10); }
    .pr-author-card__img { width: 72px; height: 72px; }
}


/* ==========================================================================
   PHASE B — Homepage rebuild (hero grid + right rail + newsletter)
   ========================================================================== */

/* --------------------------------------------------------------------------
   Layout modifiers
   -------------------------------------------------------------------------- */
.site-content.site-content--with-rail {
    grid-template-columns: 1fr var(--pr-sidebar-width);
}

@media (max-width: 768px) {
    .site-content.site-content--with-rail {
        grid-template-columns: 1fr;
    }
}

.content-main.content-main--article {
    max-width: 840px;
    margin: 0 auto;
    width: 100%;
}


/* --------------------------------------------------------------------------
   Utility: screen-reader-only
   -------------------------------------------------------------------------- */
.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;
}


/* --------------------------------------------------------------------------
   PILL CHIPS — replaces text-only CAPS category labels
   -------------------------------------------------------------------------- */
.pr-chip {
    display: inline-block;
    padding: 4px 10px;
    background-color: var(--pr-green);
    color: var(--pr-text-inverse);
    font-size: var(--pr-fs-xs);
    font-weight: var(--pr-fw-bold);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: 2px;
    text-decoration: none;
    line-height: 1.4;
}

.pr-chip:hover,
.pr-chip:focus {
    background-color: var(--pr-green-dark);
    color: var(--pr-text-inverse);
}

.pr-chip--small {
    padding: 2px 8px;
    font-size: 10px;
}


/* --------------------------------------------------------------------------
   HERO GRID — 1 lead (60%) + 2 stacked secondary cards (40%)
   -------------------------------------------------------------------------- */
.pr-hero {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    border-bottom: 1px solid var(--pr-border);
    background-color: var(--pr-bg-card);
}

.pr-hero__lead {
    border-right: 1px solid var(--pr-border);
    display: flex;
    flex-direction: column;
}

.pr-hero__lead-media {
    display: block;
    overflow: hidden;
}

.pr-hero__lead-image,
.pr-hero__lead-media img {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.pr-hero__lead-media:hover img {
    transform: scale(1.02);
}

.pr-hero__lead-body {
    padding: var(--pr-space-16) var(--pr-space-20, 20px);
    flex: 1;
}

.pr-hero__lead-title {
    font-family: var(--pr-font-article-title);
    font-size: var(--pr-fs-3xl);
    line-height: var(--pr-lh-tight);
    font-weight: var(--pr-fw-bold);
    margin: var(--pr-space-10) 0 var(--pr-space-8);
}

.pr-hero__lead-title a {
    color: var(--pr-text-primary);
    text-decoration: none;
}

.pr-hero__lead-title a:hover {
    color: var(--pr-green);
}

.pr-hero__lead-excerpt {
    font-size: var(--pr-fs-md);
    color: var(--pr-text-secondary);
    line-height: var(--pr-lh-normal);
    margin: 0 0 var(--pr-space-12);
}

.pr-hero__meta {
    font-size: var(--pr-fs-xs);
    color: var(--pr-text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.pr-hero__dot {
    margin: 0 var(--pr-space-6);
}

.pr-hero__secondary {
    display: flex;
    flex-direction: column;
}

.pr-hero__card {
    flex: 1;
    display: flex;
    flex-direction: column;
    border-bottom: 1px solid var(--pr-border);
    background-color: var(--pr-bg-card);
}

.pr-hero__card:last-child {
    border-bottom: none;
}

.pr-hero__card-media {
    display: block;
    overflow: hidden;
}

.pr-hero__card-image,
.pr-hero__card-media img {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    display: block;
}

.pr-hero__card-body {
    padding: var(--pr-space-10) var(--pr-space-16) var(--pr-space-12);
}

.pr-hero__card-title {
    font-size: var(--pr-fs-md);
    line-height: var(--pr-lh-snug);
    font-weight: var(--pr-fw-semibold);
    margin: var(--pr-space-6) 0 var(--pr-space-4);
}

.pr-hero__card-title a {
    color: var(--pr-text-primary);
    text-decoration: none;
}

.pr-hero__card-title a:hover {
    color: var(--pr-green);
}

.pr-hero__card-time {
    font-size: var(--pr-fs-xs);
    color: var(--pr-text-tertiary);
}

@media (max-width: 768px) {
    .pr-hero {
        grid-template-columns: 1fr;
    }
    .pr-hero__lead {
        border-right: none;
        border-bottom: 1px solid var(--pr-border);
    }
    .pr-hero__lead-title {
        font-size: var(--pr-fs-2xl);
    }
}


/* --------------------------------------------------------------------------
   RIGHT RAIL — Trending / Editor's Picks / Newsletter
   -------------------------------------------------------------------------- */
.pr-rail {
    background-color: var(--pr-bg-card);
    border-left: 1px solid var(--pr-border);
}

.pr-rail__section {
    padding: var(--pr-space-16);
    border-bottom: 8px solid var(--pr-bg-page);
}

.pr-rail__section:last-child {
    border-bottom: none;
}

.pr-rail__heading {
    font-size: var(--pr-fs-base);
    font-weight: var(--pr-fw-bold);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--pr-text-primary);
    margin: 0 0 var(--pr-space-12);
    padding-bottom: var(--pr-space-8);
    border-bottom: 2px solid var(--pr-green);
    display: inline-block;
}

.pr-rail__list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.pr-rail__item {
    padding: var(--pr-space-10) 0;
    border-bottom: 1px solid var(--pr-border-light);
}

.pr-rail__item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.pr-rail__item:first-child {
    padding-top: 0;
}

.pr-rail__link {
    display: block;
    text-decoration: none;
    color: var(--pr-text-primary);
}

.pr-rail__title {
    display: block;
    font-size: var(--pr-fs-md);
    line-height: var(--pr-lh-snug);
    font-weight: var(--pr-fw-semibold);
    color: var(--pr-text-primary);
}

.pr-rail__link:hover .pr-rail__title {
    color: var(--pr-green);
}

.pr-rail__time {
    display: block;
    font-size: var(--pr-fs-xs);
    color: var(--pr-text-tertiary);
    margin-top: var(--pr-space-4);
}

/* Ranked variant (Trending) */
.pr-rail__list--ranked {
    counter-reset: rank;
    list-style: none;
}

.pr-rail__list--ranked .pr-rail__item {
    counter-increment: rank;
    position: relative;
    padding-left: 28px;
}

.pr-rail__list--ranked .pr-rail__item::before {
    content: counter(rank);
    position: absolute;
    left: 0;
    top: var(--pr-space-10);
    color: var(--pr-green);
    font-weight: var(--pr-fw-bold);
    font-size: var(--pr-fs-lg);
    line-height: 1;
}

.pr-rail__list--ranked .pr-rail__item:first-child::before {
    top: 0;
}

/* With-thumb variant (Editor's Picks) */
.pr-rail__item--with-thumb .pr-rail__link {
    display: flex;
    gap: var(--pr-space-10);
    align-items: flex-start;
}

.pr-rail__thumb {
    flex: 0 0 96px;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 2px;
    display: block;
}

.pr-rail__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.pr-rail__body {
    flex: 1;
    min-width: 0;
}


/* --------------------------------------------------------------------------
   NEWSLETTER SIGNUP
   -------------------------------------------------------------------------- */
.pr-newsletter {
    background-color: var(--pr-bg-subnav);
}

.pr-newsletter__heading {
    font-size: var(--pr-fs-lg);
    font-weight: var(--pr-fw-bold);
    color: var(--pr-text-primary);
    margin: 0 0 var(--pr-space-4);
}

.pr-newsletter__lede {
    font-size: var(--pr-fs-base);
    color: var(--pr-text-secondary);
    line-height: var(--pr-lh-normal);
    margin: 0 0 var(--pr-space-12);
}

.pr-newsletter__form {
    display: flex;
    flex-direction: column;
    gap: var(--pr-space-8);
}

.pr-newsletter__input {
    padding: var(--pr-space-10) var(--pr-space-12);
    font-size: var(--pr-fs-md);
    font-family: var(--pr-font-body);
    border: 1px solid var(--pr-border-dark);
    border-radius: 2px;
    background-color: var(--pr-bg-card);
    color: var(--pr-text-primary);
}

.pr-newsletter__input:focus {
    outline: 2px solid var(--pr-green);
    outline-offset: -1px;
    border-color: var(--pr-green);
}

.pr-newsletter__submit {
    padding: var(--pr-space-10) var(--pr-space-16);
    background-color: var(--pr-green);
    color: var(--pr-text-inverse);
    border: none;
    border-radius: 2px;
    font-size: var(--pr-fs-base);
    font-weight: var(--pr-fw-bold);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: background-color 0.15s;
}

.pr-newsletter__submit:hover,
.pr-newsletter__submit:focus {
    background-color: var(--pr-green-dark);
}


/* --------------------------------------------------------------------------
   PHOTO OF THE DAY (rail module)
   -------------------------------------------------------------------------- */
.pr-potd__link {
    display: block;
    text-decoration: none;
    color: var(--pr-text-primary);
}

.pr-potd__image,
.pr-potd__link img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
    border-radius: 2px;
}

.pr-potd__caption {
    display: block;
    font-size: var(--pr-fs-md);
    font-weight: var(--pr-fw-semibold);
    color: var(--pr-text-primary);
    line-height: var(--pr-lh-snug);
    margin-top: var(--pr-space-10);
}

.pr-potd__link:hover .pr-potd__caption {
    color: var(--pr-green);
}

.pr-potd__date {
    display: block;
    font-size: var(--pr-fs-xs);
    color: var(--pr-text-tertiary);
    margin-top: var(--pr-space-4);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}


/* --------------------------------------------------------------------------
   POLISH — Card hover-lift + tabular numerals
   -------------------------------------------------------------------------- */
.content-card,
.pr-content-card,
.pr-hero__card,
.video-card,
.photo-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.content-card:hover,
.pr-content-card:hover,
.pr-hero__card:hover,
.video-card:hover,
.photo-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
    position: relative;
    z-index: 1;
}

/* Tabular numerals on every numeric / time element */
time,
.timestamp,
.card-meta,
.pr-rail__time,
.pr-hero__card-time,
.pr-hero__meta,
.pr-content-card__time,
.pr-news-item__time,
.score-teams,
.score-result,
.video-duration,
.article-date,
.article-updated,
.pr-potd__date {
    font-variant-numeric: tabular-nums;
}