/*
 * tnt-news.css
 * TNT | TechNoviceTools | News page
 * Used by: news.html (root)
 * Loads after: tnt-base-styles.css
 *
 * Covers: hero config, legacy archive bar, year markers,
 *         news accordion entry styles.
 */


/* ═══════════════════════════════════════════════════════════════════
   HERO — News page
   Background: images/telegraphOperator.jpg
   Dark warm overlay nods to early-20th-century radio-room aesthetics.
   The telegraph operator image signals "transmission incoming" —
   a fitting metaphor for a news broadcast.
═══════════════════════════════════════════════════════════════════ */
#hero {
    min-height: 44vh;
    background:
        linear-gradient(135deg, rgba(10,8,4,0.86) 0%, rgba(80,48,8,0.72) 100%),
        url('../images/telegraphOperator.jpg') center -80px / cover no-repeat;
    padding: 4.5rem 1rem;
}

.hero-content { max-width: 720px; }

/* At narrow widths the negative Y offset shifts the image up far enough
   that cover can no longer fill the bottom of the hero — background color
   bleeds through. Reset the position to center/center so cover works as
   intended at all sizes.                                                  */
@media (max-width: 760px) {
    #hero {
        background-position: center center;
    }
}


/* ═══════════════════════════════════════════════════════════════════
   NEWS SECTION  (#newsSection)
   Light warm background — same tone as the intro sections on other pages.
═══════════════════════════════════════════════════════════════════ */
#newsSection {
    background: #f4f5f7;
    padding: 5rem 0;
}

#newsSection .section-title { color: var(--tnt-dark); }

#newsSection p.intro-copy {
    font-size: 0.96rem;
    color: #444;
    line-height: 1.72;
    max-width: 680px;
}


/* ── Legacy archive bar ──────────────────────────────────────────
   Dark pill at the top of the news list; links to the archived
   pre-2026 headlines in formerPages/. Keeps the current page clean
   while making the archive easy to find.                           */
.news-legacy-bar {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    background: var(--tnt-dark);
    border: 1.5px solid rgba(255,255,255,0.1);
    border-radius: 14px;
    padding: 1.25rem 1.75rem;
    margin-bottom: 3.5rem;
    flex-wrap: wrap;
}

.news-legacy-bar-icon {
    font-size: 1.9rem;
    color: var(--tnt-amber);
    flex-shrink: 0;
}

.news-legacy-bar-body {
    flex: 1;
    min-width: 180px;
}

.news-legacy-bar-body h3 {
    font-family: var(--boogaloo);
    font-size: 1.2rem;
    color: #fff;
    margin: 0 0 0.25rem;
    line-height: 1.2;
}

.news-legacy-bar-body p {
    font-size: 0.86rem;
    color: rgba(255,255,255,0.62);
    margin: 0;
    line-height: 1.5;
}


/* ── Year marker ─────────────────────────────────────────────────
   Red horizontal rule separating entries by calendar year.
   Font size and letter-spacing give it a section-header feel
   without competing with the entry titles below.                   */
.year-marker {
    font-family: var(--boogaloo);
    font-size: 1.3rem;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--tnt-red);
    border-top: 2px solid var(--tnt-red);
    border-bottom: 1px solid #ddd;
    padding: 0.45rem 0;
    margin: 2.5rem 0 1.25rem;
}

.year-marker:first-of-type { margin-top: 0; }


/* ═══════════════════════════════════════════════════════════════════
   NEWS ACCORDION
   Bootstrap accordion items stripped of their default box borders
   and re-styled as a clean list of collapsible news entries.
   Each item: [date badge] [title] — expand for the full blurb.
═══════════════════════════════════════════════════════════════════ */
.news-accordion {
    /* Override Bootstrap accordion CSS variables */
    --bs-accordion-border-color:        #e2e4e8;
    --bs-accordion-bg:                  transparent;
    --bs-accordion-btn-bg:              transparent;
    --bs-accordion-btn-color:           var(--tnt-dark);
    --bs-accordion-active-bg:           transparent;
    --bs-accordion-active-color:        var(--tnt-red);
    --bs-accordion-btn-focus-box-shadow: none;
}

.news-accordion .accordion-item {
    border-left:   none;
    border-right:  none;
    border-top:    none;
    background:    transparent;
}

.news-accordion .accordion-item:last-child {
    border-bottom: none;
}

.news-accordion .accordion-button {
    font-family: var(--boogaloo);
    font-size:   1.1rem;
    padding:     0.85rem 0;
    gap:         0.75rem;
    display:     flex;
    align-items: center;
    box-shadow:  none;
}

/* Push the chevron to the far right */
.news-accordion .accordion-button::after {
    margin-left: auto;
    flex-shrink: 0;
}

.news-accordion .accordion-button:not(.collapsed) {
    box-shadow: none;
}

.news-accordion .accordion-body {
    padding:     0.5rem 0 1.4rem 0;
    font-size:   0.93rem;
    color:       #444;
    line-height: 1.72;
    border-top:  1px solid #e8e8e8;
}

.news-accordion .accordion-body p + p { margin-top: 0.7rem; }

.news-accordion .accordion-body a {
    color:           var(--tnt-red);
    font-weight:     600;
    text-decoration: none;
}
.news-accordion .accordion-body a:hover { text-decoration: underline; }


/* ── Date badge ──────────────────────────────────────────────────
   Small red pill displayed inline in the accordion button,
   before the entry title. Same visual language as lang-badges
   in tnt-explore.css.                                              */
.news-date {
    display:     inline-block;
    background:  var(--tnt-red);
    color:       #fff;
    font-family: Arial, Helvetica, sans-serif;
    font-size:   0.66rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    padding:     0.18rem 0.55rem;
    border-radius: 4px;
    flex-shrink: 0;
    white-space: nowrap;
}