/* ================================================
   articles.css
   Articles theme: white body + dark navy footer
   Covers: header, hero, body, footer colours
   Load order: gbl-reset.css → gbl-layout.css → articles.css
   ================================================ */

/* ── TOKENS ──────────────────────────────────── */
:root {
    /* Header */
    --h-bg:                #ffffff;
    --h-border:            #a8c4dd;
    --h-brand:             #BE0F17;
    --h-brand-hover:       #0d0d0d;
    --h-accent:            #2196f3;
    --h-nav-link:          rgba(31,41,55,0.70);
    --h-nav-hover:         #2A4C69;
    --h-nav-hover-bg:      rgba(42,76,105,0.12);
    --h-dropdown-bg:       #ffffff;
    --h-dropdown-divider:  rgba(0,0,0,0.05);
    --h-dropdown-link:     #1f2937;
    --h-dropdown-hover:    #2A4C69;
    --h-dropdown-hover-bg: #e8eef3;
    --h-cta-bg:            #2A4C69;
    --h-cta-text:          #a8c4dd;
    --h-cta-hover-bg:      #a8c4dd;
    --h-cta-hover-text:    #2A4C69;
    --h-burger-border:     rgba(0,0,0,0.10);
    --h-burger-bar:        #1f2937;

    /* Body */
    --b-bg:                #ffffff;
    --b-text:              #1f2937;
    --b-accent:            #2196f3;
    --b-accent-dark:       #1e3750;
    --b-border:            #e5e7eb;

    /* Hero */
    --hero-bg:             #1a2c3d;
    --hero-ghost:          rgba(255,255,255,0.05);
    --hero-kicker:         #a8c4dd;
    --hero-title:          #ffffff;
    --hero-tagline:        rgba(255,255,255,0.80);
    --hero-overlay:        rgba(26,44,61,0.75);

    /* Footer */
    --ft-top-bg:           #1a2c3d;
    --ft-bottom-bg:        #111e2a;
    --ft-accent:           #a8c4dd;
    --ft-border:           #a8c4dd;
    --ft-divider:          rgba(255,255,255,0.07);
    --ft-bottom-divider:   rgba(255,255,255,0.10);
    --ft-heading:          #ffffff;
    --ft-text:             rgba(255,255,255,0.65);
    --ft-text-strong:      #ffffff;
    --ft-link:             #a8c4dd;
    --ft-link-hover:       #f39c12;
    --ft-copy:             rgba(255,255,255,0.45);
    --ft-copy-link:        #a8c4dd;
    --ft-copy-hover:       #f39c12;
    --ft-nav-link:         rgba(255,255,255,0.40);
    --ft-nav-hover:        #f39c12;
    --ft-separator:        rgba(255,255,255,1);
    --ft-soon-bg:          rgba(168,196,221,0.15);
    --ft-soon-text:        rgba(168,196,221,0.70);
}

/* ── HEADER ──────────────────────────────────── */
.nav-container { background: var(--h-bg); border-bottom-color: var(--h-border); }
.nav-logo      { filter: none; }
.nav-brand       { color: var(--h-brand); }
.nav-brand:hover { color: var(--h-brand-hover); }
.nav-links a { color: var(--h-nav-link); }
.nav-links a:hover { color: var(--h-nav-hover); background: var(--h-nav-hover-bg); }
.nav-cta       { background: var(--h-cta-bg); color: var(--h-cta-text); }
.nav-cta:hover { background: var(--h-cta-hover-bg); color: var(--h-cta-hover-text); }
.menu-icon { border-color: var(--h-burger-border); }
.menu-icon span,
.menu-icon span::before,
.menu-icon span::after       { background: var(--h-burger-bar); }
.menu-icon:hover             { border-color: var(--h-accent); }
.menu-icon:hover span,
.menu-icon:hover span::before,
.menu-icon:hover span::after { background: var(--h-accent); }

@media (max-width: 900px) {
    .nav-links {
        background: var(--h-dropdown-bg);
        border-top-color: var(--h-accent);
        border-bottom-color: var(--h-border);
    }
    .nav-links li      { border-bottom-color: var(--h-dropdown-divider); }
    .nav-links a       { color: var(--h-dropdown-link); }
    .nav-links a:hover { color: var(--h-dropdown-hover); background: var(--h-dropdown-hover-bg); }
}

/* ── HERO ────────────────────────────────────── */
.bs-hero                { background-color: var(--hero-bg); }
.bs-hero::before        { background: var(--hero-overlay); }
.bs-hero__ghost         { -webkit-text-stroke: 1px rgba(255,255,255,0.08); }
.bs-hero__stripe        { background: var(--h-accent); }
.bs-hero__kicker        { color: #ffffff; background: var(--hero-kicker);}
.bs-hero__title         { color: var(--hero-title); }
.bs-hero__title em      { color: var(--hero-kicker); }
.bs-hero__title mark    { background: var(--hero-kicker); color: var(--hero-bg); }
.bs-hero__tagline       { color: var(--hero-tagline); }
.bs-hero__fn-line       { background: var(--hero-kicker); }
.bs-hero__footnote span { color: var(--hero-kicker); }
.btn-primary       { background: #a8c4dd; color: #000000; font-weight: 700; }
.btn-primary:hover { background: #ffffff; color: #000000; }
.btn-ghost-text       { color: #ffffff; border-bottom-color: rgba(42,76,105,0.35); }
.btn-ghost-text:hover { color: #a8c4dd; border-bottom-color: #a8c4dd; }

/* ── BODY ────────────────────────────────────── */
body { background: var(--b-bg); }

.article-wrap {
    max-width: 740px;
    margin: 0 auto;
    padding: 3rem 2rem 4rem;
    width: 100%;
    color: var(--b-text);
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 1.05rem;
    line-height: 1.75;
}

.article-wrap a { text-decoration: underline; transition: color 0.2s; }
.article-wrap a:hover { color: var(--b-accent-dark); }
.article-wrap p a,
.article-wrap li > a:only-child { color: var(--b-accent); }
.article-wrap img { margin: 2.5rem 0; }

/* Section headings */
.article-wrap h2 {
    font-family: 'DM Sans', sans-serif;
    font-size: 1.35rem;
    font-weight: 700;
    color: #111827;
    margin-top: 2.5rem;
    margin-bottom: 1.25rem;
    padding-bottom: 0.6rem;
    border-bottom: 2px solid var(--b-accent);
}
.article-wrap h2:first-child { margin-top: 0; }

/* ── In-Depth Articles — card style ─────────── */
.article-wrap > ul:not(.artlist) {
    list-style: none;
    padding: 0;
    margin: 0 0 2.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.article-wrap > ul:not(.artlist) li {
    margin: 0;
    font-size: 1rem;
    color: var(--b-text);
    border-left: 3px solid var(--b-accent);
    background: #f8fafc;
    padding: 1rem 1.25rem;
    transition: background 0.2s, border-color 0.2s;
}

.article-wrap > ul:not(.artlist) li:hover {
    background: #eef3f8;
    border-left-color: var(--b-accent-dark);
}

.article-wrap > ul:not(.artlist) li a {
    font-family: 'DM Sans', sans-serif;
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--b-accent);
    text-decoration: none;
    display: block;
    margin-bottom: 0.2rem;
}

.article-wrap > ul:not(.artlist) li a:hover {
    color: var(--b-accent-dark);
    text-decoration: none;
}

/* The description text after the colon */
.article-wrap > ul:not(.artlist) li {
    font-family: 'DM Sans', sans-serif;
    font-size: 0.88rem;
    color: #6b7280;
    line-height: 1.5;
}

/* ── Recommended Articles — numbered card grid ── */
.article-wrap ul.artlist--rec {
    list-style: none;
    padding: 0;
    margin: 0 0 2.5rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    counter-reset: rec;
}

.article-wrap ul.artlist--rec li {
    border-bottom: none;
    padding: 0;
    counter-increment: rec;
}

.article-wrap ul.artlist--rec li a {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    border-top: 3px solid;
    border-left: 0.5px solid rgba(0,0,0,0.08);
    border-right: 0.5px solid rgba(0,0,0,0.08);
    border-bottom: 0.5px solid rgba(0,0,0,0.08);
    text-decoration: none;
    transition: filter 0.15s;
    height: 100%;
}

.article-wrap ul.artlist--rec li a:hover { filter: brightness(0.96); }

.article-wrap ul.artlist--rec li a::before {
    content: counter(rec, decimal-leading-zero);
    font-family: 'DM Sans', sans-serif;
    font-size: 1.3rem;
    font-weight: 500;
    flex-shrink: 0;
    line-height: 1;
    width: 28px;
}

.article-wrap ul.artlist--rec li a span {
    font-family: 'DM Sans', sans-serif;
    font-weight: 500;
    line-height: 1.4;
}

/* ── Card colour cycles ───────────────────────── */
/* Blue */
.article-wrap ul.artlist--rec li:nth-child(6n+1) a { background: #e8f0f8; border-top-color: #2A4C69; }
.article-wrap ul.artlist--rec li:nth-child(6n+1) a span { color: #2A4C69; }
.article-wrap ul.artlist--rec li:nth-child(6n+1) a::before { color: #6a8fad; }
/* Teal */
.article-wrap ul.artlist--rec li:nth-child(6n+2) a { background: #e4f4f0; border-top-color: #1a6b5a; }
.article-wrap ul.artlist--rec li:nth-child(6n+2) a span { color: #1a6b5a; }
.article-wrap ul.artlist--rec li:nth-child(6n+2) a::before { color: #5aa898; }
/* Amber */
.article-wrap ul.artlist--rec li:nth-child(6n+3) a { background: #fdf3e3; border-top-color: #8a5a00; }
.article-wrap ul.artlist--rec li:nth-child(6n+3) a span { color: #8a5a00; }
.article-wrap ul.artlist--rec li:nth-child(6n+3) a::before { color: #c49040; }
/* Rose */
.article-wrap ul.artlist--rec li:nth-child(6n+4) a { background: #fce8ec; border-top-color: #8b2035; }
.article-wrap ul.artlist--rec li:nth-child(6n+4) a span { color: #8b2035; }
.article-wrap ul.artlist--rec li:nth-child(6n+4) a::before { color: #c47080; }
/* Purple */
.article-wrap ul.artlist--rec li:nth-child(6n+5) a { background: #ede8f8; border-top-color: #4a3080; }
.article-wrap ul.artlist--rec li:nth-child(6n+5) a span { color: #4a3080; }
.article-wrap ul.artlist--rec li:nth-child(6n+5) a::before { color: #8a70b8; }
/* Green */
.article-wrap ul.artlist--rec li:nth-child(6n+6) a { background: #e8f4e8; border-top-color: #2a6030; }
.article-wrap ul.artlist--rec li:nth-child(6n+6) a span { color: #2a6030; }
.article-wrap ul.artlist--rec li:nth-child(6n+6) a::before { color: #6a9e6a; }
/* ── Full searchable list ─────────────────────── */
#myUL.artlist {
    display: block;
    counter-reset: none;
    gap: 0;
    margin: 0 0 2.5rem;
}

#myUL.artlist li {
    border-bottom: 1px solid var(--b-border);
    counter-increment: none;
}

#myUL.artlist li:last-child { border-bottom: none; }

#myUL.artlist li a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.65rem 0.75rem;
    border: none;
    border-radius: 3px;
    background: transparent;
    height: auto;
    font-family: 'DM Sans', sans-serif;
    font-size: 0.92rem;
    font-weight: 400;
    color: var(--b-accent);
    text-decoration: none;
    transition: background 0.15s, color 0.2s;
}

#myUL.artlist li a::before { display: none; }

#myUL.artlist li a::after {
    content: '→';
    font-size: 0.85rem;
    color: #d1d5db;
    flex-shrink: 0;
    margin-left: 1rem;
    transition: color 0.2s, transform 0.2s;
}

#myUL.artlist li a span { font-weight: 400; color: inherit; font-size: inherit; }

#myUL.artlist li a:hover {
    background: #f0f5fa;
    color: var(--b-accent-dark);
}

#myUL.artlist li a:hover::after {
    color: var(--b-accent);
    transform: translateX(3px);
}

@media (max-width: 600px) {
    .article-wrap ul.artlist--rec { grid-template-columns: 1fr; }
}

/* Search input */
#myInput {
    width: 100%;
    padding: 0.75rem 1rem;
    margin: 0.75rem 0 0;
    font-family: 'DM Sans', sans-serif;
    font-size: 0.95rem;
    border: 1px solid var(--b-border);
    border-radius: 3px;
    color: var(--b-text);
    background: #f9fafb;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
    display: block;
}
#myInput:focus {
    border-color: var(--b-accent);
    box-shadow: 0 0 0 3px rgba(42,76,105,0.10);
    background: #ffffff;
}

@media (max-width: 700px) {
    .article-wrap { padding: 2rem 1.5rem 3rem; }
}

/* ── FOOTER ──────────────────────────────────── */
.bs-ft { background: var(--ft-top-bg); border-top-color: var(--ft-border); }
.bs-ft__col { border-right-color: var(--ft-divider); border-bottom-color: var(--ft-divider); }
.bs-ft__name { color: var(--ft-accent); }
.bs-ft__logo-group:hover .bs-ft__name { color: #ffffff; }
.bs-ft__bio        { color: var(--ft-text); }
.bs-ft__bio strong { color: var(--ft-text-strong); }
.bs-ft__bio a      { color: var(--ft-accent); }
.bs-ft__bio a:hover { color: var(--ft-link-hover); }
.bs-ft__heading    { color: var(--ft-heading); }
.bs-ft__link       { color: var(--ft-link); }
.bs-ft__link:hover { color: var(--ft-link-hover); }
.bs-ft__soon { background: var(--ft-soon-bg); color: var(--ft-soon-text); }
.bs-ft__bottom { background: var(--ft-bottom-bg); border-top-color: var(--ft-bottom-divider); }
.bs-ft__copy         { color: var(--ft-copy); }
.bs-ft__copy a       { color: var(--ft-copy-link); }
.bs-ft__copy a:hover { color: var(--ft-copy-hover); }
.bs-ft__nav-link       { color: var(--ft-nav-link); }
.bs-ft__nav-link:hover { color: var(--ft-nav-hover); }
.bs-ft__nav-item + .bs-ft__nav-item::before { background: var(--ft-separator); }