/* =============================================================
   FLX AI Hub - BLOG STYLESHEET
   =============================================================

   Everything the blog needs, in one file. blog/index.php and every
   post in blog/ load this and nothing else.

   WHY THIS FILE EXISTS
   --------------------
   The blog used to load ../shared.css, the site-wide stylesheet.
   That worked, but it meant the blog carried roughly 80 selectors
   it never used (webinar cards, resource cards, button variants,
   text utilities, the podcast embed), and any change to the shared
   file could quietly alter a post.

   This file contains only what the blog actually renders, plus the
   article rules shared.css never had: lists, sub-headings,
   blockquotes, horizontal rules, code blocks and tables.

   ONE REMAINING LINK TO THE REST OF THE SITE
   ------------------------------------------
   Posts still inject the site navigation with ../navbar.js, so the
   blog's nav stays in step with every other page. That script
   generates its own markup, and the styles for it live in the
   NAVIGATION section below. If the site navbar markup is ever
   restructured, that section needs the matching update.

   WHAT IS IN HERE, IN ORDER
   -------------------------
     1.  Variables, reset and base elements
     2.  Layout helpers (.container, .page-section, .section-label)
     3.  Navigation  (markup injected by ../navbar.js)
     4.  Page hero   (the "Blog" banner on index.php)
     5.  Post cards  (the listing grid on index.php)
     6.  Empty state (shown when no posts have a date meta tag)
     7.  Article layout (a single post page)
     8.  Article body  (the writing itself)
     9.  Lightbox    (click any article image to enlarge)
     10. Footer
     11. Responsive adjustments

   Fonts (Comfortaa, Montserrat, Rubik) are loaded from Google
   Fonts by each page's <head>, not from here.
   ============================================================= */


/* =============================================
   1. VARIABLES, RESET AND BASE ELEMENTS
   ============================================= */
:root {
    /* ---------------------------------------------------------------
       BRAND PALETTE

       Four hues, each in two values:

         --x          MAIN. Safe for text. Every one of these clears 7:1
                      against white, which is WCAG 2.2 AAA for normal text.
                      Because contrast is symmetric, that same figure also
                      means white text reads on it as a background.

         --x-accent   ACCENT. The brighter, more characteristic version,
                      for fills, washes and decoration. Do NOT set text in
                      an accent without checking it: most reach only AA,
                      and the green reaches neither.

       Blue is the one hue whose accent equals its main today. The other
       three differ, which is the whole point of carrying both.
       --------------------------------------------------------------- */
    --blue:          #0046ad;   /* 8.47:1 on white */
    --blue-accent:   #0046ad;   /* 8.47:1 - same value for now */

    --gray:          #4b5563;   /* 7.56:1 */
    --gray-accent:   #6b7280;   /* 4.83:1 - AAA for large text only */

    --green:         #305305;   /* 8.88:1 */
    --green-accent:  #58a618;   /* 3.05:1 - decorative fills only, see below */

    --orange:        #a23108;   /* 7.05:1 - no rule uses it yet */
    --orange-accent: #d4400b;   /* 4.63:1 - AAA for large text only */

    /* A WARNING ABOUT --green-accent
       It measures 3.05:1 on pure white, clearing the 3:1 floor for borders
       and icons by five hundredths. That margin does not survive a tinted
       background: on --light-bg it is 2.92:1, on #f1f5f9 it is 2.79:1, and
       both fail. Treat it as a decorative fill only - never an outline, a
       glyph or a focus ring. Use --green for those. */

    /* The older names, kept so every existing rule keeps working. They point
       at the MAIN values, because everything using them was setting text. */
    --primary-blue:  var(--blue);
    --primary-green: var(--green);
    --neutral-gray:  var(--gray);
    /* Neutrals, not brand colors - the ink and the paper. */
    --dark-gray: #1f2937;        /* headings, footer ground */
    --dark-gray-soft: #374151;   /* running body copy, 10.31:1 on white */
    --light-bg: #f8fafc;
    --white: #ffffff;
    /* Purely decorative, so it takes the accents - this is what they are for. */
    --gradient: linear-gradient(135deg, var(--blue-accent) 0%, var(--green-accent) 100%);
    --shadow: 0 4px 6px -1px rgba(0,0,0,0.08), 0 2px 4px -1px rgba(0,0,0,0.04);
    --shadow-hover: 0 10px 25px -5px rgba(0,0,0,0.12), 0 4px 10px -3px rgba(0,0,0,0.06);
    --radius: 15px;
    --radius-sm: 8px;
    --radius-pill: 9999px;
}

*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Rubik', sans-serif;
    color: var(--dark-gray);
    background: var(--white);
    line-height: 1.6;
}

h1, h2, h3, h4, h5 {
    font-family: 'Montserrat', sans-serif;
    line-height: 1.25;
}

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

button {
    cursor: pointer;
    border: none;
    background: none;
    font-family: inherit;
}

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

/* --- Layout Utilities --- */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.page-section {
    padding: 4rem 0;
}


/* =============================================
   2. LAYOUT HELPERS
   ============================================= */
.section-label {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--primary-green);
    margin-bottom: 0.75rem;
}

/* --- Text Utilities --- */


/* =============================================
   3. NAVIGATION  (markup injected by ../navbar.js)
   ============================================= */
.site-header {
    position: sticky;
    top: 0;
    z-index: 200;
    background: rgba(255,255,255,0.97);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid #e5e7eb;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 72px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

/* Logo */
.site-logo {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    text-decoration: none;
    flex-shrink: 0;
}

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

.logo-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.logo-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--primary-blue);
    line-height: 1;
}

.logo-sub {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: var(--primary-green);
    text-transform: uppercase;
}

/* Nav links */
.main-nav {
    display: flex;
    align-items: center;
    gap: 0.15rem;
}

.nav-link {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--neutral-gray);
    padding: 0.45rem 0.8rem;
    border-radius: var(--radius-sm);
    transition: color 0.18s, background 0.18s;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

.nav-link:hover {
    color: var(--primary-blue);
    background: rgba(0,70,173,0.06);
}

.nav-link.active {
    color: var(--primary-blue);
    background: rgba(0,70,173,0.09);
}

/* Dropdown */
.nav-dropdown {
    position: relative;
}

/* Transparent bridge that fills the gap between trigger and menu,
   keeping .nav-dropdown:hover true as the mouse moves down */
.nav-dropdown::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: 8px;
}

.dropdown-trigger {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    user-select: none;
}

.dropdown-trigger .chevron {
    transition: transform 0.2s;
    display: flex;
    align-items: center;
}

.nav-dropdown:hover .chevron,
.nav-dropdown.open .chevron {
    transform: rotate(180deg);
}

.dropdown-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: var(--radius);
    padding: 0.5rem;
    min-width: 200px;
    box-shadow: var(--shadow-hover);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-6px);
    transition: opacity 0.18s, transform 0.18s;
    z-index: 300;
}

.nav-dropdown:hover .dropdown-menu {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.dropdown-menu a {
    display: block;
    padding: 0.55rem 1rem;
    border-radius: var(--radius-sm);
    font-family: 'Montserrat', sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--dark-gray);
    transition: background 0.15s, color 0.15s;
    text-decoration: none;
    white-space: nowrap;
}

.dropdown-menu a:hover {
    background: rgba(0,70,173,0.07);
    color: var(--primary-blue);
}

/* External "official" link pill */
.official-link {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 1.1rem;
    background: var(--primary-blue);
    color: white;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 0.8rem;
    border-radius: var(--radius-pill);
    transition: background 0.2s, transform 0.2s;
    white-space: nowrap;
    margin-left: 0.5rem;
    text-decoration: none;
}

.official-link:hover {
    background: #003d99;
    transform: translateY(-1px);
}

/* Mobile hamburger */
.mobile-menu-btn {
    display: none;
    align-items: center;
    justify-content: center;
    padding: 0.4rem;
    color: var(--primary-blue);
    border-radius: var(--radius-sm);
    transition: background 0.15s;
}

.mobile-menu-btn:hover {
    background: rgba(0,70,173,0.07);
}


/* =============================================
   4. PAGE HERO  (the banner at the top of index.php)
   ============================================= */
.page-hero {
    text-align: center;
    padding: 5rem 1.5rem 4rem;
    background-color: var(--white);
    background-image:
        radial-gradient(circle at 80% 20%, rgba(0,70,173,0.06), transparent 50%),
        radial-gradient(circle at 20% 80%, rgba(88,166,24,0.06), transparent 50%);
    position: relative;
    overflow: hidden;
}

/* Subtle hex tile background */
.page-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='104' viewBox='0 0 60 104' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 0l25.98 15v30L30 60L4.02 45V15z' fill='none' stroke='%23939598' stroke-width='1' stroke-opacity='0.07'/%3E%3Cpath d='M30 52l25.98 15v30L30 112L4.02 97V67z' fill='none' stroke='%23939598' stroke-width='1' stroke-opacity='0.07'/%3E%3C/svg%3E");
    pointer-events: none;
}

.page-hero .container {
    position: relative;
    z-index: 1;
}

.page-hero h1 {
    font-size: 2.75rem;
    font-weight: 800;
    margin-bottom: 1rem;
}

.page-hero p.hero-sub {
    font-size: 1.1rem;
    color: var(--neutral-gray);
    max-width: 660px;
    margin: 0 auto 2rem;
}


/* =============================================
   5. POST CARDS  (the listing grid on index.php)
   ============================================= */
.cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.75rem;
}

.content-card {
    background: white;
    border-radius: var(--radius);
    border: 1px solid #e8eaed;
    box-shadow: var(--shadow);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s;
    text-decoration: none;
    color: inherit;
}

.content-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-hover);
    border-color: #c8d4ee;
}

.card-thumb-wrap {
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--light-bg);
    flex-shrink: 0;
}

.card-thumb-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.content-card:hover .card-thumb-wrap img {
    transform: scale(1.04);
}

/* Placeholder when no thumbnail */
.card-thumb-placeholder {
    width: 100%;
    aspect-ratio: 16 / 9;
    background: linear-gradient(135deg, rgba(0,70,173,0.08) 0%, rgba(88,166,24,0.08) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-blue);
    flex-shrink: 0;
}

.card-body {
    padding: 1.25rem 1.5rem 1.5rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    border-top: 1px solid #f3f4f6;
}

.card-date {
    font-size: 0.78rem;
    color: var(--neutral-gray);
    margin-bottom: 0.35rem;
    font-weight: 500;
}

/* The "New" badge.
   Dark green on a pale green tint, rather than white on the solid accent
   green: white on #58a618 is only 3.05:1, and a badge nobody can read is
   just decoration. This pairing reaches 8.06:1, clearing AAA comfortably
   even at this small a size. */
.card-badge {
    display: inline-block;
    margin-left: 0.45rem;
    padding: 0.1rem 0.5rem;
    border-radius: var(--radius-pill);
    background: #eef7e4;   /* a pale tint of --green-accent */
    color: var(--green);   /* 8.06:1 on that tint */
    font-family: 'Montserrat', sans-serif;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    vertical-align: 0.06em;
}

.card-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--dark-gray);
    margin-bottom: 0.6rem;
    line-height: 1.35;
}

.card-desc {
    font-size: 0.9rem;
    color: #6b7280;
    line-height: 1.65;
    flex: 1;
    margin-bottom: 1.1rem;
}

.card-read-link {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--primary-blue);
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    transition: gap 0.2s;
    margin-top: auto;
}

.content-card:hover .card-read-link {
    gap: 0.55rem;
}


/* =============================================
   6. EMPTY STATE  (no posts carry a date meta tag)
   ============================================= */
.empty-state {
    grid-column: 1 / -1;
    text-align: center;
    padding: 4rem 2rem;
    color: var(--neutral-gray);
}

.empty-state p {
    font-size: 1rem;
    margin-top: 0.75rem;
}


/* =============================================
   7 + 8. ARTICLE LAYOUT AND BODY  (a single post)
   ============================================= */
.article-layout {
    max-width: 860px;
    margin: 0 auto;
    padding: 3rem 1.5rem 4rem;
}

.article-breadcrumb {
    font-size: 0.85rem;
    color: var(--neutral-gray);
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.article-breadcrumb a {
    color: var(--primary-blue);
    font-weight: 600;
}

.article-breadcrumb a:hover { text-decoration: underline; }

.article-meta-row {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
    font-size: 0.875rem;
    color: var(--neutral-gray);
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid #e8eaed;
}

.article-meta-row span {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

/* The origin note.
   A short line under the byline saying where a piece first appeared. It sits
   below the meta divider so it reads as an editor's note rather than as the
   opening of the article. */
.article-origin {
    margin: 0 0 2rem;
    padding-left: 0.85rem;
    border-left: 2px solid #e8eaed;
    font-size: 0.85rem;
    font-style: italic;
    line-height: 1.6;
    color: var(--neutral-gray);
}

.article-origin a {
    color: var(--primary-blue);
    /* 500, not the 600 used in body copy: this line is already italic and
       underlined, and bold on top of both is louder than a muted note wants. */
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.video-embed-wrap {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    border-radius: var(--radius);
    background: #000;
    margin-bottom: 2.5rem;
}

.video-embed-wrap iframe {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    border: 0;
}

.article-body h2 {
    font-size: 1.4rem;
    font-weight: 700;
    margin: 2rem 0 0.75rem;
    color: var(--dark-gray);
}

.article-body p {
    margin-bottom: 1.1rem;
    /* The darker ink rather than --gray. Both clear AAA, but 10.3:1 is
       easier over several hundred words than the gray's 7.6:1. */
    color: var(--dark-gray-soft);
    font-size: 0.975rem;
    line-height: 1.75;
}

.article-body a {
    color: var(--primary-blue);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.article-body a:hover { color: #003d99; }

.article-body img {
    width: 100%;
    height: auto;
    border-radius: var(--radius-sm);
    margin-bottom: 0.5rem;
    cursor: zoom-in;
    transition: opacity 0.2s;
    display: block;
}

.article-body img:hover { opacity: 0.88; }

.article-body code {
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.875em;
    background: #f1f5f9;
    padding: 0.15em 0.4em;
    border-radius: 4px;
    color: var(--dark-gray);
}

.caption {
    display: block;
    text-align: center;
    font-size: 0.855rem;
    font-style: italic;
    color: var(--neutral-gray);
    margin-bottom: 1.75rem;
    line-height: 1.55;
}


/* =============================================
   8b. ARTICLE BODY - THE REST OF THE VOCABULARY

   Everything above this point came from the old shared.css, which
   styled only h2, p, a, img and code inside .article-body. The
   rules below cover what a post adapted from a Google Doc or a
   Word file almost always contains as well.

   These matter more than they look. The reset at the top of this
   file sets margin and padding to 0 on EVERY element, so without
   them a list loses its indent and its bullets, and a blockquote
   is indistinguishable from an ordinary paragraph.
   ============================================= */

/* --- Sub-headings ---------------------------------------------
   h2 is 1.4rem, set above. h3 sits one step below it so a long
   post can have sections and sub-sections.                      */
.article-body h3 {
    font-size: 1.1rem;
    font-weight: 700;
    margin: 1.5rem 0 0.5rem;
    color: var(--dark-gray);
}

/* --- Lists -----------------------------------------------------
   padding-left is what gives the markers room to sit. Without it
   the bullets are clipped against the left edge of the column.  */
.article-body ul,
.article-body ol {
    margin: 0 0 1.1rem;
    padding-left: 1.75rem;
}

.article-body ul { list-style: disc; }
.article-body ol { list-style: decimal; }

/* Match the surrounding paragraph text exactly, so a list does
   not look like it wandered in from another site. */
.article-body li {
    color: var(--dark-gray-soft);
    font-size: 0.975rem;
    line-height: 1.75;
    margin-bottom: 0.4rem;
}

.article-body li:last-child { margin-bottom: 0; }

/* A list inside a list: tighter, and a different marker so the
   two levels are easy to tell apart. */
.article-body li > ul,
.article-body li > ol { margin: 0.4rem 0 0; }

.article-body li > ul { list-style: circle; }

/* --- Pull quotes -----------------------------------------------
   A green left rule picks up the Hub's secondary brand color and
   keeps a quotation clearly distinct from body copy.            */
.article-body blockquote {
    margin: 0 0 1.5rem;
    padding: 0.25rem 0 0.25rem 1.25rem;
    /* --green, not --green-accent: this rule helps mark the quote, so it
       sits closer to a UI component than to decoration, and the accent is
       too weak to carry that on anything but pure white. */
    border-left: 3px solid var(--green);
}

.article-body blockquote p {
    font-size: 1.05rem;
    font-style: italic;
    color: var(--gray);
    margin-bottom: 0.5rem;
}

.article-body blockquote p:last-child { margin-bottom: 0; }

/* --- Section break --------------------------------------------- */
.article-body hr {
    border: 0;
    border-top: 1px solid #e8eaed;
    margin: 2.5rem auto;
    width: 100%;
}

/* --- Longer code -----------------------------------------------
   Inline <code> is styled above. A multi-line <pre> block needs
   to scroll sideways rather than force the whole page wide,
   which is what would otherwise happen on a phone.              */
.article-body pre {
    background: #f1f5f9;
    border-radius: var(--radius-sm);
    padding: 1rem;
    margin-bottom: 1.5rem;
    overflow-x: auto;
    font-size: 0.85rem;
    line-height: 1.6;
}

/* Cancel the inline-code chip styling inside a pre block, or you
   get a grey box sitting inside a grey box. */
.article-body pre code {
    background: none;
    padding: 0;
    font-size: inherit;
}

/* --- Tables ----------------------------------------------------
   Optional, but a table pasted from a document would otherwise
   render with no borders and no spacing at all.                 */
.article-body table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1.5rem;
    font-size: 0.9rem;
}

.article-body th,
.article-body td {
    border: 1px solid #e8eaed;
    padding: 0.5rem 0.7rem;
    text-align: left;
    vertical-align: top;
}

.article-body th {
    background: var(--light-bg);
    font-weight: 700;
}


/* =============================================
   9. LIGHTBOX  (click any article image to enlarge)
   ============================================= */
.lightbox-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.88);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
    cursor: zoom-out;
}

.lightbox-overlay.visible {
    opacity: 1;
    pointer-events: auto;
}

.lightbox-img {
    max-width: min(90vw, 1100px);
    max-height: 85vh;
    border-radius: var(--radius-sm);
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
    cursor: default;
    object-fit: contain;
    display: block;
}

.lightbox-btn {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255,255,255,0.13);
    border: none;
    color: white;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    cursor: pointer;
    z-index: 1001;
    transition: background 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lightbox-btn:hover { background: rgba(255,255,255,0.28); }
.lightbox-prev { left: 1.25rem; }
.lightbox-next { right: 1.25rem; }

.lightbox-close {
    position: fixed;
    top: 1rem;
    right: 1.25rem;
    background: rgba(255,255,255,0.13);
    border: none;
    color: white;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    z-index: 1001;
    transition: background 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lightbox-close:hover { background: rgba(255,255,255,0.28); }

.lightbox-counter {
    position: fixed;
    bottom: 1.25rem;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(255,255,255,0.55);
    font-size: 0.82rem;
    z-index: 1001;
    font-family: 'Montserrat', sans-serif;
    letter-spacing: 0.05em;
    white-space: nowrap;
}


/* =============================================
   10. FOOTER
   ============================================= */
.site-footer {
    background: var(--dark-gray);
    color: white;
    padding: 2.5rem 0;
    margin-top: 5rem;
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='104' viewBox='0 0 60 104' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 0l25.98 15v30L30 60L4.02 45V15z' fill='none' stroke='%23ffffff' stroke-width='1' stroke-opacity='0.04'/%3E%3C/svg%3E");
}

.footer-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
}

.footer-logo {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    text-decoration: none;
}

.footer-logo img { width: 42px; }

.footer-logo .logo-title { color: white; font-size: 1rem; }
/* 0.55 rather than 0.45: at 0.45 this sits at 4.2:1 on the footer's dark
   background, just under AA for text this small. 0.55 gives 5.5:1. */
.footer-logo .logo-sub   { color: rgba(255,255,255,0.55); }

.footer-copy {
    color: #9ca3af;
    font-size: 0.82rem;
}


/* =============================================
   11. RESPONSIVE ADJUSTMENTS
   ============================================= */
@media (max-width: 768px) {
    /* Nav */
    .mobile-menu-btn { display: flex; }

    .main-nav {
        display: none;
        position: fixed;
        top: 72px;
        left: 0; right: 0;
        background: white;
        flex-direction: column;
        align-items: stretch;
        padding: 0.75rem 1rem 1.25rem;
        border-bottom: 1px solid #e5e7eb;
        box-shadow: var(--shadow-hover);
        z-index: 199;
        gap: 0.1rem;
        max-height: calc(100vh - 72px);
        overflow-y: auto;
    }

    .main-nav.open { display: flex; }

    .nav-link {
        padding: 0.75rem 0.8rem;
        border-radius: var(--radius-sm);
        font-size: 0.95rem;
    }

    /* Dropdown in mobile: show/hide with .open class */
    .dropdown-trigger { justify-content: space-between; width: 100%; }

    .nav-dropdown .dropdown-menu {
        position: static;
        opacity: 1;
        pointer-events: auto;
        transform: none;
        box-shadow: none;
        border: none;
        border-radius: 0;
        padding: 0 0 0 1rem;
        min-width: unset;
        background: transparent;
        display: none;
    }

    .nav-dropdown.open .dropdown-menu { display: block; }

    .dropdown-menu a {
        padding: 0.55rem 0.8rem;
        font-size: 0.9rem;
    }

    .official-link {
        margin-left: 0;
        margin-top: 0.5rem;
        justify-content: center;
    }

    /* Hero */
    .page-hero h1 { font-size: 2rem; }
    .page-hero p.hero-sub { font-size: 1rem; }

    /* Cards */
    .cards-grid { grid-template-columns: 1fr; }

    /* Article */
    .article-layout { padding: 2rem 1rem 3rem; }

    /* Footer */
    .footer-inner { flex-direction: column; align-items: center; text-align: center; }
}

@media (max-width: 480px) {
    .page-hero { padding: 3.5rem 1rem 3rem; }
    .page-hero h1 { font-size: 1.7rem; }
}