/* ============================================================================
   Hardin Local — brand layer
   ----------------------------------------------------------------------------
   Loaded AFTER built/screen.css (see default.hbs) so these rules win. Keep this
   file additive — never edit the upstream Source rules in screen.css directly,
   so future Source updates merge cleanly. Built to built/hardin-local.css by
   the gulp `css` task (`npm run build`).

   Brand palette (reference_hardin_local_standing_urls.md):
     HL Blue  #4885ed  — primary / accent
     HL Green #3cba54  — secondary, section rules
     HL Dark  #333943  — footer, dark surfaces
   Also set the accent color in Ghost Admin → Settings → Brand to #4885ed; the
   fallback below covers the pre-setup state.
   ============================================================================ */

:root {
    --hl-blue: #4885ed;
    --hl-green: #3cba54;
    --hl-dark: #333943;
    /* Fallback accent until set in Admin → Brand. Ghost injects its own
       --ghost-accent-color inline when configured, which overrides this. */
    --ghost-accent-color: #4885ed;
}

/* Inline links in post content pick up the brand blue. */
.gh-content a:not(.kg-btn):not([class*="kg-"]) {
    text-decoration-color: color-mix(in srgb, var(--hl-blue) 55%, transparent);
    text-underline-offset: 2px;
}
.gh-content a:not(.kg-btn):not([class*="kg-"]):hover {
    color: var(--hl-blue);
    text-decoration-color: var(--hl-blue);
}

/* Section / archive headings get a short HL-green rule under them. */
.gh-archive-title::after,
.gh-section-title::after {
    content: "";
    display: block;
    width: 56px;
    height: 4px;
    margin-top: 14px;
    border-radius: 2px;
    background: var(--hl-green);
}

/* Tag chips on post cards / article header in HL blue. */
.gh-card-tag,
.gh-article-tag {
    color: var(--hl-blue);
    font-weight: 600;
    letter-spacing: 0.01em;
}

/* Dark footer when it isn't already using the accent color
   (Admin → Design → "Header and footer color" can switch to Accent instead). */
.gh-footer:not(.has-accent-color) {
    background-color: var(--hl-dark);
    color: rgb(255 255 255 / 0.78);
}
.gh-footer:not(.has-accent-color) a { color: #fff; }
.gh-footer:not(.has-accent-color) .gh-footer-bar { border-top-color: rgb(255 255 255 / 0.14); }

/* Lean primary CTAs into the brand blue (keep Source's pill share buttons as-is). */
.gh-button:not(.gh-button-share) {
    background-color: var(--hl-blue);
    border-color: var(--hl-blue);
}
.gh-button:not(.gh-button-share):hover {
    background-color: color-mix(in srgb, var(--hl-blue) 88%, #000);
    border-color: color-mix(in srgb, var(--hl-blue) 88%, #000);
}

/* Utility classes for the custom HL templates built in Phase 2
   (this-week / housing-market / elections). */
.hl-accent-blue { color: var(--hl-blue); }
.hl-accent-green { color: var(--hl-green); }
.hl-bg-dark { background: var(--hl-dark); color: #fff; }
.hl-pill {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
}
.hl-pill--featured { background: color-mix(in srgb, var(--hl-green) 18%, transparent); color: color-mix(in srgb, var(--hl-green) 70%, #000); }
.hl-pill--loaded { background: color-mix(in srgb, var(--hl-blue) 18%, transparent); color: var(--hl-blue); }

/* ============================================================================
   /about/ — About + Team page (Phase 3c)
   Drives the structure built by scripts/setup-about-page.mjs. Body HTML uses
   plain semantic markup wrapped in kg-card-begin: html markers so Lexical
   preserves the classes — these rules style what Phil edits in admin.
   ============================================================================ */

.gh-content .about-intro,
.gh-content .about-team,
.gh-content .about-platforms,
.gh-content .about-mission,
.gh-content .about-contact {
    margin-block: 3.25rem;   /* generous spacing between top-level sections */
}
.gh-content .about-intro > h2,
.gh-content .about-team > h2,
.gh-content .about-platforms > h2,
.gh-content .about-mission > h2,
.gh-content .about-contact > h2 {
    margin-bottom: 1.25rem;  /* breathing room under section titles */
}
.gh-content .about-team .team-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;             /* SPACE BETWEEN EACH TEAM MEMBER */
    margin-top: 1.5rem;
}
@media (min-width: 720px) {
    .gh-content .about-team .team-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 2.75rem 2rem;
    }
}
.gh-content .about-team .team-member {
    display: grid;
    grid-template-columns: 96px 1fr;
    gap: 1rem 1.25rem;
    align-items: start;
    padding-block: 0.5rem;
}
.gh-content .about-team .team-member .team-avatar {
    grid-row: 1 / span 3;
    width: 96px;
    height: 96px;
    border-radius: 50%;
    object-fit: cover;
    background: color-mix(in srgb, var(--hl-blue) 12%, #fff);
    flex-shrink: 0;
}
.gh-content .about-team .team-member h3 {
    margin: 0 0 0.15rem 0;
    font-size: 1.25rem;
    line-height: 1.25;
}
.gh-content .about-team .team-member .team-role {
    margin: 0 0 0.5rem 0;
    color: color-mix(in srgb, var(--hl-blue) 80%, #000);
    font-size: 0.95rem;
}
.gh-content .about-team .team-member p {
    margin: 0 0 0.6rem 0;
    line-height: 1.55;
}
.gh-content .about-team .team-member .team-links {
    margin-top: 0.35rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 0.8rem;
    font-size: 0.85rem;
}
.gh-content .about-team .team-member .team-links a {
    text-decoration: none;
    padding: 2px 10px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--hl-blue) 10%, #fff);
    color: color-mix(in srgb, var(--hl-blue) 80%, #000);
    font-weight: 600;
}
.gh-content .about-team .team-member .team-links a:hover {
    background: color-mix(in srgb, var(--hl-blue) 18%, #fff);
}

/* Lists inside the About body get breathing room after the preceding paragraph. */
.gh-content .about-platforms > p,
.gh-content .about-contact > p,
.gh-content .sponsor-segments > p,
.gh-content .sponsor-why > p,
.gh-content .sponsor-integrity > p {
    margin-bottom: 1rem;
}
.gh-content .about-platforms > ul,
.gh-content .about-contact > ul,
.gh-content .sponsor-segments > ul,
.gh-content .sponsor-why > ul,
.gh-content .sponsor-integrity > ul {
    margin-top: 0.75rem;  /* SPACE BETWEEN CONTENT AND LIST */
}

/* ============================================================================
   /sponsor/ — Sponsors / Advertise page (Phase 3d)
   ============================================================================ */
.gh-content .sponsor-hero,
.gh-content .sponsor-pkgs,
.gh-content .sponsor-segments,
.gh-content .sponsor-standalone,
.gh-content .sponsor-premium,
.gh-content .sponsor-why,
.gh-content .sponsor-integrity,
.gh-content .sponsor-examples,
.gh-content .sponsor-cta {
    margin-block: 3rem;
}
.gh-content .sponsor-hero .lead {
    font-size: 1.15rem;
    line-height: 1.45;
}
.gh-content .sponsor-pkgs table,
.gh-content .sponsor-segments table,
.gh-content .sponsor-standalone table,
.gh-content .sponsor-premium table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1rem;
}
.gh-content .sponsor-pkgs th,
.gh-content .sponsor-pkgs td,
.gh-content .sponsor-segments th,
.gh-content .sponsor-segments td,
.gh-content .sponsor-standalone th,
.gh-content .sponsor-standalone td,
.gh-content .sponsor-premium th,
.gh-content .sponsor-premium td {
    padding: 10px 14px;
    border-bottom: 1px solid color-mix(in srgb, var(--hl-dark) 14%, transparent);
    text-align: left;
}
.gh-content .sponsor-pkgs th,
.gh-content .sponsor-segments th,
.gh-content .sponsor-standalone th,
.gh-content .sponsor-premium th {
    background: color-mix(in srgb, var(--hl-blue) 8%, #fff);
    font-weight: 700;
}
.gh-content .sponsor-cta {
    padding: 1.5rem;
    border-radius: 14px;
    background: color-mix(in srgb, var(--hl-blue) 6%, #fff);
    border: 1px solid color-mix(in srgb, var(--hl-blue) 18%, transparent);
}

/* ════════════════════════════════════════════════════════════════
   HOMEPAGE — hybrid hero + section grid + newsletter CTA
   Used by home.hbs. Section colors derive from the HL palette
   (--hl-blue, --hl-green, --hl-dark) defined earlier in this file.
   ════════════════════════════════════════════════════════════════ */
.hl-home {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem 1.5rem 4rem;
}

/* ── HERO ────────────────────────────────────────────────────── */
.hl-home-hero {
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--hl-blue) 8%, #fff) 0%,
        color-mix(in srgb, var(--hl-green) 6%, #fff) 100%);
    border-radius: 24px;
    padding: 3rem 2.5rem;
    margin-bottom: 4rem;
    border: 1px solid color-mix(in srgb, var(--hl-blue) 14%, transparent);
}
.hl-home-hero-inner {
    max-width: 880px;
    margin: 0 auto;
    text-align: center;
}
.hl-home-hero-eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--hl-blue);
    margin-bottom: 1rem;
}
.hl-home-hero-title {
    font-size: clamp(1.8rem, 4vw, 2.6rem);
    line-height: 1.2;
    margin: 0 0 1.5rem;
}
.hl-home-hero-title a {
    color: var(--hl-dark);
    text-decoration: none;
}
.hl-home-hero-title a:hover { color: var(--hl-blue); }

.hl-home-hero-img-wrap {
    display: block;
    margin: 0 auto 1.5rem;
    max-width: 720px;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 12px 40px color-mix(in srgb, var(--hl-dark) 18%, transparent);
}
.hl-home-hero-img {
    display: block;
    width: 100%;
    height: auto;
}

.hl-home-hero-excerpt {
    font-size: 1.1rem;
    line-height: 1.6;
    color: color-mix(in srgb, var(--hl-dark) 78%, transparent);
    margin: 0 auto 2rem;
    max-width: 680px;
}

.hl-home-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: center;
}

/* HL utility buttons (extend the existing .hl-btn-* if defined elsewhere) */
.hl-btn {
    display: inline-block;
    padding: 0.7rem 1.5rem;
    border-radius: 8px;
    font-weight: 600;
    text-decoration: none !important;
    border: 2px solid transparent;
    transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
    font-size: 0.95rem;
}
.hl-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 16px color-mix(in srgb, var(--hl-dark) 14%, transparent); }
.hl-btn-primary {
    background: var(--hl-blue);
    color: #fff !important;
    border-color: var(--hl-blue);
}
.hl-btn-primary:hover { background: color-mix(in srgb, var(--hl-blue) 88%, #000); }
.hl-btn-secondary {
    background: #fff;
    color: var(--hl-blue) !important;
    border-color: color-mix(in srgb, var(--hl-blue) 32%, transparent);
}
.hl-btn-secondary:hover {
    background: color-mix(in srgb, var(--hl-blue) 6%, #fff);
    border-color: var(--hl-blue);
}
.hl-btn-large { padding: 0.95rem 2rem; font-size: 1.05rem; }

/* ── SECTION GRID ────────────────────────────────────────────── */
.hl-home-sections {
    margin-bottom: 4rem;
}
.hl-home-sections-title {
    font-size: 1.5rem;
    margin: 0 0 1.5rem;
    color: var(--hl-dark);
    border-bottom: 3px solid color-mix(in srgb, var(--hl-blue) 22%, transparent);
    padding-bottom: 0.5rem;
}
.hl-section-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.25rem;
}
.hl-section-card {
    display: flex;
    flex-direction: column;
    padding: 1.5rem;
    background: #fff;
    border-radius: 14px;
    border: 1px solid color-mix(in srgb, var(--hl-dark) 12%, transparent);
    text-decoration: none !important;
    color: var(--hl-dark) !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
    min-height: 200px;
}
.hl-section-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px color-mix(in srgb, var(--hl-dark) 18%, transparent);
    border-color: var(--hl-blue);
}
.hl-section-card-eyebrow {
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--hl-blue);
    margin-bottom: 0.5rem;
}
.hl-section-card-title {
    font-size: 1.15rem;
    line-height: 1.3;
    margin: 0 0 0.6rem;
    color: var(--hl-dark);
}
.hl-section-card-excerpt {
    font-size: 0.92rem;
    line-height: 1.5;
    color: color-mix(in srgb, var(--hl-dark) 70%, transparent);
    margin: 0 0 1rem;
    flex-grow: 1;
}
.hl-section-card-cta {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--hl-blue);
    margin-top: auto;
}
/* Subtle visual differentiation per section via the eyebrow color */
.hl-section-card-events     .hl-section-card-eyebrow { color: #d97706; }  /* amber */
.hl-section-card-business   .hl-section-card-eyebrow { color: #0d9488; }  /* teal */
.hl-section-card-housing    .hl-section-card-eyebrow { color: var(--hl-green); }
.hl-section-card-food       .hl-section-card-eyebrow { color: #c2410c; }  /* burnt orange */
.hl-section-card-news       .hl-section-card-eyebrow { color: var(--hl-blue); }
.hl-section-card-podcast    .hl-section-card-eyebrow { color: #7c3aed; }  /* purple */

/* Empty-state cards: muted background, italic excerpt */
.hl-section-card-empty {
    background: color-mix(in srgb, var(--hl-dark) 3%, #fff);
    border-style: dashed;
}
.hl-section-card-empty .hl-section-card-excerpt {
    font-style: italic;
}

/* ── NEWSLETTER CTA ─────────────────────────────────────────── */
.hl-home-newsletter {
    background: var(--hl-dark);
    color: #fff;
    border-radius: 24px;
    padding: 3rem 2.5rem;
    text-align: center;
}
.hl-home-newsletter h2 {
    color: #fff;
    margin: 0 0 0.75rem;
    font-size: clamp(1.5rem, 3vw, 2rem);
}
.hl-home-newsletter p {
    color: color-mix(in srgb, #fff 78%, transparent);
    max-width: 580px;
    margin: 0 auto 1.5rem;
    font-size: 1.05rem;
    line-height: 1.6;
}

/* ── Mobile tightening ──────────────────────────────────────── */
@media (max-width: 720px) {
    .hl-home { padding: 1rem 1rem 3rem; }
    .hl-home-hero { padding: 2rem 1.25rem; border-radius: 18px; margin-bottom: 2.5rem; }
    .hl-home-hero-actions { flex-direction: column; }
    .hl-home-hero-actions .hl-btn { width: 100%; text-align: center; }
    .hl-section-grid { grid-template-columns: 1fr; gap: 1rem; }
    .hl-home-newsletter { padding: 2rem 1.25rem; border-radius: 18px; }
}

/* ── HERO platform pills (under main CTAs) ──────────────────── */
.hl-home-hero-platforms {
    margin-top: 1.25rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-size: 0.85rem;
}
.hl-home-hero-platforms-label {
    color: color-mix(in srgb, var(--hl-dark) 55%, transparent);
    font-weight: 600;
    margin-right: 0.25rem;
}
.hl-platform-pill {
    display: inline-block;
    padding: 0.3rem 0.75rem;
    border-radius: 999px;
    background: #fff;
    color: var(--hl-blue) !important;
    border: 1px solid color-mix(in srgb, var(--hl-blue) 28%, transparent);
    text-decoration: none !important;
    font-weight: 600;
    font-size: 0.85rem;
    transition: background 0.12s ease, border-color 0.12s ease;
}
.hl-platform-pill:hover {
    background: color-mix(in srgb, var(--hl-blue) 8%, #fff);
    border-color: var(--hl-blue);
}

/* ── TIGHTER hero typography + scaling ──────────────────────── */
.hl-home-hero-title { letter-spacing: -0.01em; font-weight: 800; }
.hl-home-hero-excerpt {
    font-size: 1.05rem;
    line-height: 1.55;
    margin: 0 auto 1.75rem;
}

/* ── EQUAL HEIGHT CARDS via excerpt clamp (4 lines max) ─────── */
.hl-section-card-excerpt {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.5;
}
.hl-section-card-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ── Visible separator between hero and section grid ────────── */
.hl-home-sections-title {
    border-bottom-width: 2px;
    color: color-mix(in srgb, var(--hl-dark) 90%, transparent);
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0;
}

/* ── Mobile refinements (override the earlier @media block) ── */
@media (max-width: 720px) {
    .hl-home-hero { padding: 1.75rem 1rem; }
    .hl-home-hero-title { font-size: 1.6rem; }
    .hl-home-hero-excerpt { font-size: 0.98rem; line-height: 1.5; margin-bottom: 1.25rem; }
    .hl-home-hero-actions { flex-direction: row; justify-content: center; }
    .hl-home-hero-actions .hl-btn { width: auto; flex: 1 1 auto; min-width: 140px; }
    .hl-home-hero-platforms { font-size: 0.8rem; gap: 0.4rem; }
    .hl-platform-pill { padding: 0.25rem 0.6rem; font-size: 0.8rem; }
    .hl-home-newsletter h2 { font-size: 1.4rem; }
    .hl-home-newsletter p { font-size: 0.95rem; }
}

/* ════════════════════════════════════════════════════════════════
   /links/ page — native Linktree replacement (v2)
   Layout: header (logo + tagline) → grouped sections → newsletter CTA
           → footer. Sections come in two flavors: stacked buttons (most)
           and platform-pill row (podcast platforms only).
   Build script `scripts/create-links-page.mjs` emits the .hl-linktree
   wrapper inside <!--kg-card-begin: html--> markers (otherwise Lexical
   conversion strips the structure — see PROJECT-STATUS.md §3).
   ════════════════════════════════════════════════════════════════ */
.hl-linktree {
    max-width: 580px;
    margin: 0 auto 4rem;
    padding: 0 1rem;
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--hl-blue) 5%, #fff) 0%,
        #fff 200px,
        #fff 100%);
    border-radius: 24px;
    overflow: hidden;
}

/* ── HEADER (logo + title + tagline) ─────────────────────────── */
.hl-lt-header {
    text-align: center;
    padding: 2.5rem 1rem 2rem;
}
.hl-lt-logo-wrap {
    display: inline-block;
    width: 96px;
    height: 96px;
    border-radius: 50%;
    background: #fff;
    padding: 8px;
    box-shadow: 0 8px 24px color-mix(in srgb, var(--hl-blue) 22%, transparent);
    margin-bottom: 1rem;
}
.hl-lt-logo {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 50%;
}
.hl-lt-title {
    font-size: 1.6rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    margin: 0 0 0.5rem;
    color: var(--hl-dark);
}
.hl-lt-tagline {
    margin: 0;
    color: color-mix(in srgb, var(--hl-dark) 72%, transparent);
    font-size: 1rem;
    line-height: 1.5;
    font-weight: 500;
    max-width: 380px;
    margin-left: auto;
    margin-right: auto;
}

/* ── SECTION + heading ──────────────────────────────────────── */
.hl-lt-section {
    margin-bottom: 1.5rem;
    padding: 0 1.25rem;
}
.hl-lt-section--featured {
    background: color-mix(in srgb, var(--hl-blue) 7%, #fff);
    padding: 1.25rem 1.25rem 1.5rem;
    border-radius: 16px;
    margin: 0 0.25rem 1.5rem;
    border: 1px solid color-mix(in srgb, var(--hl-blue) 22%, transparent);
}
.hl-lt-section--featured .hl-lt-h {
    color: var(--hl-blue);
    border-bottom-color: color-mix(in srgb, var(--hl-blue) 32%, transparent);
}
.hl-lt-h {
    margin: 0 0 0.85rem;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: color-mix(in srgb, var(--hl-dark) 75%, transparent);
    font-weight: 700;
    padding-bottom: 0.5rem;
    border-bottom: 1.5px solid color-mix(in srgb, var(--hl-blue) 18%, transparent);
}

/* ── STACKED button group (default) ─────────────────────────── */
.hl-lt-group {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.7rem;
}
.hl-lt-btn {
    display: flex !important;
    align-items: center;
    gap: 0.7rem;
    padding: 1rem 1.15rem;
    border-radius: 14px;
    text-align: left;
    font-weight: 600;
    font-size: 1rem;
    text-decoration: none !important;
    border: 1.5px solid color-mix(in srgb, var(--hl-dark) 12%, transparent);
    color: var(--hl-dark) !important;
    background: #fff;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease, background 0.15s ease;
    line-height: 1.3;
    box-shadow: 0 1px 0 color-mix(in srgb, var(--hl-dark) 5%, transparent);
}
.hl-lt-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px color-mix(in srgb, var(--hl-dark) 14%, transparent);
    border-color: var(--hl-blue);
}
.hl-lt-btn-icon {
    flex-shrink: 0;
    font-size: 1.25rem;
    line-height: 1;
    width: 1.5rem;
    text-align: center;
}
.hl-lt-btn-label {
    flex: 1 1 auto;
}
.hl-lt-btn--primary {
    background: linear-gradient(135deg, var(--hl-blue) 0%, color-mix(in srgb, var(--hl-blue) 80%, var(--hl-green)) 100%);
    border-color: var(--hl-blue);
    color: #fff !important;
}
.hl-lt-btn--primary:hover {
    box-shadow: 0 8px 22px color-mix(in srgb, var(--hl-blue) 40%, transparent);
}
.hl-lt-btn--primary .hl-lt-btn-icon { color: #fff; }

/* ── PLATFORM PILLS (podcast platforms) ─────────────────────── */
.hl-lt-pills {
    display: flex !important;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
}
.hl-lt-pill {
    display: inline-flex !important;
    align-items: center;
    gap: 0.35rem;
    padding: 0.55rem 0.95rem;
    border-radius: 999px;
    background: #fff;
    color: var(--hl-dark) !important;
    border: 1.5px solid color-mix(in srgb, var(--hl-blue) 28%, transparent);
    text-decoration: none !important;
    font-weight: 600;
    font-size: 0.92rem;
    transition: all 0.12s ease;
}
.hl-lt-pill:hover {
    background: var(--hl-blue);
    color: #fff !important;
    border-color: var(--hl-blue);
    transform: translateY(-1px);
}
.hl-lt-pill-icon { font-size: 1rem; }

/* ── NEWSLETTER section ─────────────────────────────────────── */
.hl-lt-section--newsletter {
    margin-top: 2rem;
    text-align: center;
}
.hl-lt-btn--news {
    background: linear-gradient(135deg, var(--hl-green) 0%, color-mix(in srgb, var(--hl-green) 70%, var(--hl-blue)) 100%);
    border-color: var(--hl-green);
    color: #fff !important;
    font-size: 1.1rem;
    padding: 1.2rem 1.6rem;
    justify-content: center;
    text-align: center;
    box-shadow: 0 6px 20px color-mix(in srgb, var(--hl-green) 28%, transparent);
}
.hl-lt-btn--news:hover {
    box-shadow: 0 10px 28px color-mix(in srgb, var(--hl-green) 40%, transparent);
}
.hl-lt-newsletter-note {
    margin: 0.75rem 0 0;
    font-size: 0.85rem;
    color: color-mix(in srgb, var(--hl-dark) 60%, transparent);
}

/* ── FOOTER ─────────────────────────────────────────────────── */
.hl-lt-footer {
    text-align: center;
    margin-top: 2.5rem;
    padding: 1.5rem 1rem 2rem;
    border-top: 1px solid color-mix(in srgb, var(--hl-dark) 8%, transparent);
    font-size: 0.85rem;
    color: color-mix(in srgb, var(--hl-dark) 55%, transparent);
}
.hl-lt-footer p { margin: 0.25rem 0; }
.hl-lt-footer a {
    color: var(--hl-blue);
    text-decoration: none;
    font-weight: 600;
}

/* ── Mobile refinements ─────────────────────────────────────── */
@media (max-width: 480px) {
    .hl-linktree { padding: 0 0.5rem; margin-bottom: 2rem; border-radius: 18px; }
    .hl-lt-header { padding: 2rem 0.75rem 1.5rem; }
    .hl-lt-logo-wrap { width: 80px; height: 80px; }
    .hl-lt-title { font-size: 1.4rem; }
    .hl-lt-tagline { font-size: 0.95rem; }
    .hl-lt-section { padding: 0 0.75rem; }
    .hl-lt-section--featured { margin-left: 0; margin-right: 0; padding: 1rem; }
    .hl-lt-btn { padding: 0.95rem 1rem; font-size: 0.95rem; }
    .hl-lt-btn-icon { font-size: 1.15rem; }
}

/* ════════════════════════════════════════════════════════════════
   Pillar article — Watch + Listen platforms list
   Patched into each S2026E**-pillar's body by
   scripts/cleanup-pillar-formatting.mjs. Replaces what was a single
   jammed <p> into a clean structured list.
   ════════════════════════════════════════════════════════════════ */
.gh-content .hl-pillar-watch {
    list-style: none;
    padding: 1rem 1.25rem;
    margin: 1.5rem 0;
    background: color-mix(in srgb, var(--hl-blue) 4%, #fff);
    border-left: 4px solid var(--hl-blue);
    border-radius: 0 12px 12px 0;
}
.gh-content .hl-pillar-watch li {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    padding: 0.45rem 0;
    border-bottom: 1px solid color-mix(in srgb, var(--hl-dark) 6%, transparent);
    line-height: 1.45;
}
.gh-content .hl-pillar-watch li:last-child { border-bottom: 0; }
.gh-content .hl-pillar-watch .hl-pw-icon {
    flex-shrink: 0;
    font-size: 1.1rem;
    width: 1.4rem;
    text-align: center;
}
.gh-content .hl-pillar-watch li strong {
    color: var(--hl-dark);
    font-weight: 700;
}
.gh-content .hl-pillar-watch a {
    color: var(--hl-blue);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.gh-content .hl-pillar-watch a:hover { text-decoration-thickness: 2px; }

/* Improve <hr> styling site-wide for the gh-content area —
   the Pillar's section dividers should feel intentional, not a default rule */
.gh-content hr {
    border: 0;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        color-mix(in srgb, var(--hl-blue) 30%, transparent) 50%,
        transparent 100%);
    margin: 2.5rem 0;
}

/* Pillar segment cross-links: "Read the full ___ article →".
   Lexical strips custom anchor classes during reparse, so we target by
   href pattern + :only-child (each segment link sits alone in its <p>).
   Result: pill-style CTA without needing class preservation through Lexical. */
.gh-content p > a[href*="/events/s"]:only-child,
.gh-content p > a[href*="/business/s"]:only-child,
.gh-content p > a[href*="/housing/s"]:only-child,
.gh-content p > a[href*="/food/s"]:only-child,
.gh-content p > a[href*="/news/s"]:only-child,
.gh-content p > a[href*="/civic/s"]:only-child {
    display: inline-block;
    padding: 0.5rem 1rem;
    margin: 0.25rem 0;
    background: color-mix(in srgb, var(--hl-blue) 8%, #fff);
    border: 1.5px solid color-mix(in srgb, var(--hl-blue) 30%, transparent);
    border-radius: 10px;
    color: var(--hl-blue) !important;
    text-decoration: none !important;
    font-weight: 600;
    font-size: 0.95rem;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.12s ease;
}
.gh-content p > a[href*="/events/s"]:only-child:hover,
.gh-content p > a[href*="/business/s"]:only-child:hover,
.gh-content p > a[href*="/housing/s"]:only-child:hover,
.gh-content p > a[href*="/food/s"]:only-child:hover,
.gh-content p > a[href*="/news/s"]:only-child:hover,
.gh-content p > a[href*="/civic/s"]:only-child:hover {
    background: var(--hl-blue);
    color: #fff !important;
    border-color: var(--hl-blue);
    transform: translateY(-1px);
}
/* Wrapper paragraph collapses its margin so the pill doesn't get an
   extra blank line of vertical space above + below. */
.gh-content p:has(> a[href*="/events/s"]:only-child),
.gh-content p:has(> a[href*="/business/s"]:only-child),
.gh-content p:has(> a[href*="/housing/s"]:only-child),
.gh-content p:has(> a[href*="/food/s"]:only-child),
.gh-content p:has(> a[href*="/news/s"]:only-child),
.gh-content p:has(> a[href*="/civic/s"]:only-child) {
    margin: 1rem 0 1.25rem;
}

/* Inline mid-body "Watch the full episode" CTA — sibling to the segment
   pills, but always 1-2 platform buttons grouped horizontally. Built by
   scripts/cleanup-pillar-watch-inline.mjs. Wrapped in kg-card markers
   so the .hl-pillar-watch-inline class survives Lexical reparse. */
.gh-content .hl-pillar-watch-inline {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin: 1.25rem 0 1.75rem;
    align-items: center;
}
.gh-content a.hl-pillar-watch-inline-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.55rem 1.1rem;
    border-radius: 999px;
    background: var(--hl-blue);
    color: #fff !important;
    text-decoration: none !important;
    font-weight: 600;
    font-size: 0.95rem;
    border: 1.5px solid var(--hl-blue);
    transition: background 0.15s ease, transform 0.12s ease, box-shadow 0.15s ease;
    box-shadow: 0 2px 8px color-mix(in srgb, var(--hl-blue) 22%, transparent);
}
.gh-content a.hl-pillar-watch-inline-btn:hover {
    background: color-mix(in srgb, var(--hl-blue) 88%, #000);
    transform: translateY(-1px);
    box-shadow: 0 6px 16px color-mix(in srgb, var(--hl-blue) 35%, transparent);
}
.gh-content .hl-pillar-watch-inline-icon {
    font-size: 1rem;
    line-height: 1;
}

/* Pillar segment cluster: wraps "Read the full ___ article →" pill PLUS
   "Watch this segment" platform pill row when the source had them in the
   same paragraph. Built by scripts/cleanup-pillar-content.mjs. */
.gh-content .hl-pillar-segment-cluster {
    margin: 1.25rem 0 2rem;
}
.gh-content .hl-pillar-segment-cluster .hl-pillar-segment-cluster-read {
    margin: 0 0 0.6rem;
}
.gh-content .hl-pillar-segment-cluster .hl-pillar-watch-inline {
    margin: 0;
}

/* ============================================================
   Events page — "This Week in Hardin County" hero CTA
   ============================================================ */

.hl-events-hero-cta {
    /* The whole banner is a single big <a> for max clickable area */
    display: block;
    position: relative;
    max-width: 1180px;
    margin: 2.4rem auto 1.5rem;
    padding: 0;
    border-radius: 20px;
    overflow: hidden;
    text-decoration: none !important;
    color: #fff;
    background: linear-gradient(120deg,
        #f59e0b 0%,
        #ea580c 45%,
        #c2410c 100%);
    box-shadow:
        0 10px 30px rgba(234, 88, 12, 0.25),
        0 4px 10px rgba(0, 0, 0, 0.08);
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.hl-events-hero-cta:hover,
.hl-events-hero-cta:focus-visible {
    transform: translateY(-3px);
    box-shadow:
        0 18px 44px rgba(234, 88, 12, 0.35),
        0 6px 16px rgba(0, 0, 0, 0.10);
}

.hl-events-hero-cta::before {
    /* Decorative blurred glow on the right side */
    content: "";
    position: absolute;
    top: -40%;
    right: -10%;
    width: 60%;
    height: 180%;
    background: radial-gradient(closest-side, rgba(255, 222, 165, 0.45), transparent 70%);
    pointer-events: none;
    z-index: 0;
}

.hl-events-hero-cta::after {
    /* Subtle dotted pattern overlay */
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255,255,255,0.08) 1px, transparent 1px);
    background-size: 18px 18px;
    pointer-events: none;
    z-index: 0;
}

.hl-events-hero-cta__inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 2.4rem;
    padding: 2.4rem 2.6rem;
}

.hl-events-hero-cta__content {
    max-width: 640px;
}

.hl-events-hero-cta__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.32rem 0.85rem;
    background: rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #fff7e6;
}

.hl-events-hero-cta__eyebrow-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 0 2px rgba(255,255,255,0.4);
    animation: hl-pulse 1.8s ease-in-out infinite;
}

@keyframes hl-pulse {
    0%, 100% { box-shadow: 0 0 0 2px rgba(255,255,255,0.4),
                            0 0 0 4px rgba(34, 197, 94, 0.0); }
    50%      { box-shadow: 0 0 0 2px rgba(255,255,255,0.4),
                            0 0 0 8px rgba(34, 197, 94, 0.35); }
}

.hl-events-hero-cta__title {
    margin: 0.75rem 0 0.55rem;
    font-size: clamp(1.85rem, 3.4vw, 2.8rem);
    line-height: 1.08;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #fff;
}

.hl-events-hero-cta__title-accent {
    background: linear-gradient(90deg, #fffbeb, #fde68a);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: 0 1px 0 rgba(0,0,0,0.05);
}

.hl-events-hero-cta__sub {
    margin: 0 0 1.35rem;
    font-size: 1.02rem;
    line-height: 1.5;
    color: #fff8ef;
    opacity: 0.95;
}

.hl-events-hero-cta__btn {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.85rem 1.6rem;
    background: #fff;
    color: #c2410c;
    border-radius: 999px;
    font-weight: 700;
    font-size: 1.02rem;
    letter-spacing: -0.01em;
    box-shadow: 0 4px 14px rgba(0,0,0,0.12);
    transition: transform 0.25s, box-shadow 0.25s, background 0.25s;
}

.hl-events-hero-cta:hover .hl-events-hero-cta__btn {
    background: #fff7e6;
    transform: scale(1.02);
    box-shadow: 0 8px 22px rgba(0,0,0,0.18);
}

.hl-events-hero-cta__btn-arrow {
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.hl-events-hero-cta:hover .hl-events-hero-cta__btn-arrow {
    transform: translateX(5px);
}

.hl-events-hero-cta__art {
    position: relative;
    width: clamp(120px, 16vw, 180px);
    height: clamp(120px, 16vw, 180px);
    display: flex;
    align-items: center;
    justify-content: center;
}

.hl-events-hero-cta__cal {
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 8px 20px rgba(0,0,0,0.20));
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.hl-events-hero-cta:hover .hl-events-hero-cta__cal {
    transform: rotate(-3deg) translateY(-2px);
}

.hl-events-hero-cta__cal-today {
    transform-origin: 58px 49.5px;
    animation: hl-today-pulse 2.6s ease-in-out infinite;
}

@keyframes hl-today-pulse {
    0%, 100% { transform: scale(1);   opacity: 1; }
    50%      { transform: scale(1.18); opacity: 0.92; }
}

.hl-events-hero-cta__shimmer {
    /* Slow shimmer sweep — runs every ~6s */
    position: absolute;
    top: 0;
    left: -30%;
    width: 30%;
    height: 100%;
    background: linear-gradient(100deg,
        transparent 0%,
        rgba(255, 255, 255, 0.18) 50%,
        transparent 100%);
    z-index: 1;
    animation: hl-shimmer 6s ease-in-out infinite;
    pointer-events: none;
}

@keyframes hl-shimmer {
    0%   { left: -30%; }
    60%  { left: 130%; }
    100% { left: 130%; }
}

@media (max-width: 720px) {
    .hl-events-hero-cta__inner {
        grid-template-columns: 1fr;
        gap: 1.2rem;
        padding: 1.8rem 1.6rem;
    }
    .hl-events-hero-cta__art {
        order: -1;
        width: 96px;
        height: 96px;
        margin-bottom: -0.25rem;
    }
    .hl-events-hero-cta__title {
        font-size: 1.7rem;
    }
    .hl-events-hero-cta__sub {
        font-size: 0.95rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hl-events-hero-cta,
    .hl-events-hero-cta__btn,
    .hl-events-hero-cta__btn-arrow,
    .hl-events-hero-cta__cal,
    .hl-events-hero-cta__cal-today,
    .hl-events-hero-cta__eyebrow-dot,
    .hl-events-hero-cta__shimmer {
        animation: none !important;
        transition: none !important;
    }
}