/* ==========================================================================
   PopBites — design tokens & shared components
   Loaded after main.css so tokens are available site-wide.

   Goal: one accent colour, one type scale, one section-header pattern.
   Previously the site mixed 4 competing warm accents (#f03c02, #e63946,
   #e50914, #e57a18) which is the main reason it read as unpolished.
   ========================================================================== */

:root {
    /* ---- Brand ---- */
    --pb-accent:        #f03c02;   /* the ONE accent (matches logo) */
    --pb-accent-dark:   #c23202;   /* hover / pressed */
    --pb-accent-soft:   #fff1ec;   /* tinted backgrounds */
    --pb-breaking:      #c1121f;   /* reserved for Breaking/Live ONLY */

    /* Secondary brand green — from the logo. Used ONLY to mark the
       Editor's Desk section (rule + date pill), never for body text. */
    --pb-editor:        #1e9e54;
    --pb-editor-soft:   #e6f6ee;

    /* ---- Neutrals (editorial greyscale) ---- */
    --pb-ink:           #111827;   /* headlines */
    --pb-body:          #374151;   /* body copy */
    --pb-meta:          #6b7280;   /* dateline, byline, captions */
    --pb-line:          #e5e7eb;   /* hairline rules */
    --pb-surface:       #ffffff;
    --pb-surface-alt:   #f8f9fb;

    /* ---- Type scale (1.25 modular) ---- */
    --pb-fs-kicker:     11px;
    --pb-fs-meta:       12px;
    --pb-fs-sm:         13px;
    --pb-fs-base:       15px;
    --pb-fs-card:       16px;
    --pb-fs-h3:         20px;
    --pb-fs-h2:         26px;
    --pb-fs-hero:       32px;

    /* ---- Rhythm ---- */
    --pb-sp-1: 4px;  --pb-sp-2: 8px;  --pb-sp-3: 12px;
    --pb-sp-4: 16px; --pb-sp-5: 24px; --pb-sp-6: 32px;

    --pb-radius:        8px;
    --pb-shadow:        0 1px 2px rgba(16,24,40,.04), 0 4px 12px rgba(16,24,40,.06);
}

/* ==========================================================================
   Section header — small uppercase English kicker over the Telugu title.
   This is the "international portal" pattern (BBC/Reuters style eyebrow).
   ========================================================================== */

.pb-section-head {
    display: flex;
    flex-direction: column;
    gap: 2px;
    position: relative;
    padding-left: 12px;
}

/* The wrapper carries the accent bar so kicker + title align on one edge. */
.pb-section-head::before {
    content: "";
    position: absolute;
    left: 0; top: 3px; bottom: 3px;
    width: 4px;
    border-radius: 4px;
    background: var(--pb-accent);
}

/* The title's own bar/indent is redundant inside the wrapper.
   Two-class specificity beats the pages' single-class rules. */
.pb-section-head .section-title-main,
.pb-section-head .section-title { padding-left: 0; }
.pb-section-head .section-title-main::before,
.pb-section-head .section-title::before { display: none; }

/* Editor's Desk keeps its centered, bar-less treatment and green accent. */
.editor-header-stack .pb-section-head {
    padding-left: 0;
    align-items: center;
    text-align: center;
}
.editor-header-stack .pb-section-head::before { display: none; }
.editor-wrapper-card .pb-kicker { color: var(--pb-editor); }

.pb-kicker {
    display: inline-block;
    font-size: var(--pb-fs-kicker);
    font-weight: 700;
    letter-spacing: .10em;
    text-transform: uppercase;
    color: var(--pb-accent);
    line-height: 1;
}

/* Headline colour discipline: dark ink text, accent kept to the rule/bar.
   (Orange heading TEXT everywhere was a big part of the amateur look.) */
.pb-section-head .section-title-main,
.pb-section-head .section-title,
.section-title-main.pb-title,
.section-title.pb-title {
    color: var(--pb-ink);
    font-size: var(--pb-fs-h3);
    font-weight: 700;
    letter-spacing: -.01em;
    line-height: 1.25;
}

/* ==========================================================================
   Magazine — Weekly Issue Archive grid
   ========================================================================== */
.pb-issue-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: var(--pb-sp-3);
}
.pb-issue {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 14px;
    border: 1px solid var(--pb-line);
    border-radius: var(--pb-radius);
    text-decoration: none;
    background: var(--pb-surface);
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.pb-issue:hover {
    border-color: var(--pb-accent);
    box-shadow: var(--pb-shadow);
    transform: translateY(-2px);
}
.pb-issue-vol {
    font-size: var(--pb-fs-kicker);
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--pb-accent);
}
.pb-issue-range { font-size: var(--pb-fs-sm); font-weight: 600; color: var(--pb-ink); }
.pb-issue.is-selected {
    border-color: var(--pb-accent);
    background: var(--pb-accent-soft);
}

/* ==========================================================================
   Utilities
   ========================================================================== */

.pb-badge-breaking {
    display: inline-block;
    background: var(--pb-breaking);
    color: #fff;
    font-size: var(--pb-fs-kicker);
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 3px;
    line-height: 1;
}

/* Card kicker (category label) + relative timestamp — Discover-style meta */
.pb-card-kicker {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--pb-accent);
    margin-bottom: 4px;
}
.pb-card-time {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 8px;
    font-size: var(--pb-fs-meta);
    color: var(--pb-meta);
}
.pb-card-time i { font-size: 11px; }

/* Hero card: brand-accent category badge + light timestamp over the image */
.pb-hero-badge {
    background: var(--pb-accent) !important;
    color: #fff !important;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.hero-time {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 6px;
    font-size: var(--pb-fs-meta);
    color: rgba(255,255,255,.85);
}

/* Dateline / byline row used on article + cards */
.pb-meta {
    color: var(--pb-meta);
    font-size: var(--pb-fs-meta);
    display: inline-flex;
    align-items: center;
    gap: var(--pb-sp-2);
}

.pb-rule {
    border: 0;
    border-top: 1px solid var(--pb-line);
    margin: var(--pb-sp-5) 0;
}

/* ==========================================================================
   Three-tier masthead (international news-portal model)
   Tier 1: dark utility bar (date + quick links)
   Tier 2: white masthead (logo + leaderboard ad slot)
   Tier 3: sticky category navigation
   ========================================================================== */

.pb-header { position: relative; z-index: 1000; }
.pb-header .container { max-width: 1200px; }

/* ---- Tier 1: utility bar ---- */
.pb-topbar {
    background: var(--pb-ink);
    color: #cbd5e1;
    font-size: var(--pb-fs-meta);
}
.pb-topbar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 34px;
    gap: var(--pb-sp-4);
}
.pb-topbar-date { display: inline-flex; align-items: center; gap: 6px; letter-spacing: .01em; }
.pb-topbar-links { display: inline-flex; align-items: center; gap: var(--pb-sp-3); }
.pb-topbar-links a {
    color: #e5e7eb;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: color .15s ease;
}
.pb-topbar-links a:hover { color: #fff; }
.pb-sep { width: 1px; height: 14px; background: rgba(255,255,255,.2); }

/* ---- Tier 2: masthead ---- */
.pb-masthead { background: var(--pb-surface); border-bottom: 1px solid var(--pb-line); }
.pb-masthead-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--pb-sp-5);
    padding: var(--pb-sp-2) 0;
}
.pb-logo {
    display: inline-flex;
    align-items: center;
    /* Transparent logo → no box; sits directly on the masthead. */
}
.pb-logo img {
    height: 70px;                  /* larger, prominent masthead logo */
    width: auto;
    object-fit: contain;
    display: block;
    image-rendering: -webkit-optimize-contrast;
}

.pb-ad-slot {
    position: relative;
    flex: 0 0 auto;
    width: 728px;
    max-width: 60%;
    height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: repeating-linear-gradient(45deg, #fafafa, #fafafa 10px, #f3f4f6 10px, #f3f4f6 20px);
    border: 1px dashed #d1d5db;
    border-radius: var(--pb-radius);
    overflow: hidden;
}
.pb-ad-label {
    font-size: 10px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: #9ca3af;
}

/* ---- Tier 3: sticky category nav ---- */
.pb-mainnav {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: var(--pb-surface);
    border-top: 3px solid var(--pb-accent);
    box-shadow: 0 2px 6px rgba(16,24,40,.06);
}
.pb-mainnav-inner {
    display: flex;
    align-items: center;
    gap: var(--pb-sp-3);
}
.pb-nav-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: stretch;
    flex: 1 1 auto;
    overflow-x: auto;
    scrollbar-width: none;
}
.pb-nav-list::-webkit-scrollbar { display: none; }
.pb-nav-link {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    padding: 13px 14px;
    color: var(--pb-ink);
    font-size: var(--pb-fs-base);
    font-weight: 600;
    text-decoration: none;
    border-bottom: 3px solid transparent;
    transition: color .15s ease, border-color .15s ease;
}
.pb-nav-link:hover { color: var(--pb-accent); }
.pb-nav-link.is-active,
.pb-nav-link:focus-visible { color: var(--pb-accent); border-bottom-color: var(--pb-accent); }

/* nav search */
.pb-nav-search { position: relative; flex: 0 0 auto; }
.pb-nav-search input {
    height: 36px;
    width: 190px;
    max-width: 42vw;
    border: 1px solid var(--pb-line);
    border-radius: 999px;
    padding: 0 40px 0 14px;
    font-size: var(--pb-fs-sm);
    background: var(--pb-surface-alt);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.pb-nav-search input:focus {
    outline: none;
    border-color: var(--pb-accent);
    box-shadow: 0 0 0 3px rgba(240,60,2,.12);
    background: #fff;
}
.pb-nav-search button {
    position: absolute;
    right: 4px; top: 4px;
    height: 28px; width: 28px;
    border: 0; border-radius: 50%;
    background: var(--pb-accent);
    color: #fff;
    cursor: pointer;
}

.pb-nav-toggle {
    display: none;
    align-items: center;
    gap: 6px;
    background: transparent;
    border: 1px solid var(--pb-line);
    border-radius: 6px;
    padding: 7px 12px;
    font-weight: 600;
    color: var(--pb-ink);
    cursor: pointer;
}

/* ---- Responsive ---- */
@media (max-width: 991.98px) {
    .pb-ad-slot { display: none; }             /* hide leaderboard on tablet/phone */
    .pb-masthead-inner { justify-content: center; }
    .pb-nav-toggle { display: inline-flex; }
    .pb-mainnav-inner { flex-wrap: wrap; padding-top: 8px; padding-bottom: 8px; }
    .pb-nav-search { order: 2; margin-left: auto; }
    .pb-nav-list {
        order: 3;
        flex-basis: 100%;
        flex-direction: column;
        overflow: hidden;
        max-height: 0;
        transition: max-height .25s ease;
    }
    .pb-nav-list.is-open { max-height: 70vh; overflow-y: auto; }
    .pb-nav-link {
        padding: 12px 6px;
        border-bottom: 1px solid var(--pb-line);
        width: 100%;
    }
    .pb-nav-link.is-active { border-bottom-color: var(--pb-line); color: var(--pb-accent); }
}
@media (max-width: 575.98px) {
    :root {
        --pb-fs-h2:   22px;
        --pb-fs-hero: 26px;
        --pb-fs-h3:   18px;
    }
    .pb-topbar-date { display: none; }         /* keep the top bar compact */
    .pb-logo img { height: 52px; }
}