/* Directory pages (Health Guides) and home site-intro banner.
   Reconstructed 2026-10-11 from the deployed page and the UX audit
   screenshots after the uncommitted source was lost in a two-console
   deploy conflict. Palette follows the site tokens, with explicit
   dark-mode colours because the theme's tertiary token stays too dark
   to read on dark backgrounds. */

.site-intro{padding:1.5rem 0 .9rem;text-align:center}
.site-intro-eyebrow{font-size:.72rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--tertiary,#5a6c7d);margin:0 0 .45rem}
.site-intro-title{font-size:clamp(1.7rem,4vw,2.5rem);line-height:1.15;color:var(--primary,#2c3e50);margin:0 0 .5rem}
.site-intro-sub{font-size:1rem;color:var(--secondary,#34495e);margin:0 auto 1.1rem;max-width:46rem}
.site-intro-cards{display:flex;flex-wrap:wrap;gap:1rem;justify-content:center;margin:0 auto 1rem;max-width:46rem}
.site-intro-card{flex:1 1 240px;background:var(--entry,#fff);border:1px solid var(--border,#e0e6ed);border-radius:12px;padding:1rem 1.1rem;text-decoration:none;transition:border-color .15s ease}
.site-intro-card:hover,.site-intro-card:focus-visible{border-color:var(--secondary,#34495e)}
.site-intro-card h2{font-size:1.08rem;margin:0 0 .3rem;color:var(--primary,#2c3e50);border:none}
.site-intro-card p{font-size:.86rem;margin:0;color:var(--tertiary,#5a6c7d)}
.site-intro-card p::after{content:" →";color:#b4974b}
.site-intro-links{font-size:.85rem;color:var(--tertiary,#5a6c7d);margin:0}
.site-intro-links a{color:var(--secondary,#34495e)}

/* The hero gradient clips to transparent on dark backgrounds (the
   secondary stop is near-black), so dark mode gets a solid light title.
   Explicit colours: main.css re-declares --primary on :root after the
   dark blocks, so the variable never flips in dark mode. */
.dark .hero-title{background:none;-webkit-text-fill-color:currentColor;color:#e7e9ea}
.dark .site-intro-title{color:#e7e9ea}
.dark .site-intro-card h2{color:#e7e9ea}
.dark .hero-subtitle{color:#c3cddd}
.dark .hero-description{color:#aab4c8}

/* Readable text on dark cards: the theme's tertiary token does not
   survive on the dark entry background. */
.dark .site-intro-eyebrow,.dark .site-intro-links,.dark .site-intro-card p,.dark .directory-grid .directory-meta{color:#9aa7c2}
.dark .site-intro-sub,.dark .directory-grid p{color:#c3cddd}
.dark .site-intro-card{background:#16181c;border-color:#3b4656}
.dark .site-intro-card:hover,.dark .site-intro-card:focus-visible{border-color:#8899e8}
.dark .site-intro-links a{color:#c5d0ff}
.dark .directory-grid li{background:#16181c;border-color:#3b4656}
.dark .directory-grid h2 a{color:#f1f5fa}

/* Tighter section rhythm on the home page: the audit and Thomas both
   flagged the stacked preamble. Halve the divider padding and margins. */
.content-divider{margin:2rem 0 1rem 0;padding:1.1rem 1rem}
.home-intro{margin-top:1.5rem}