/* "Editorial Gold" theme — wiki/components/directory-network-components.md +
   wiki/components/comparison-components.md, combined for the first time.
   Standalone stylesheet (not @import-chained, so tokens don't fight across
   layers) built for a precious-metals editorial/directory hybrid: no phone,
   no services dropdown, single external affiliate CTA everywhere, plus a
   Service Areas mega-menu for 100 location pages. First used on
   buy-gold-florida. Combines style-comparison.css's article/YMYL components
   (byline-strip, disclosure-banner, callout, toc, rank-table pieces,
   company-review, compare-table, red-flags, glossary, paa, update-history,
   author-box, faq) with style-directory.css's directory components
   (hero-overlay, badge-pill, trust-strip, stat-band, process-steps,
   coverage-grid) and style.css's nav dropdown, under one warm-goldenrod
   token set instead of either archetype's blue/gold-on-navy palette. */

@import url('https://fonts.googleapis.com/css2?family=Lora:wght@500;600;700&family=Inter:wght@400;500;600;700&display=swap');

:root{
  --brand:#b8860b; --brand-dark:#96690a;
  --navy:#1c1917; --navy-dark:#141210;
  --ink:#1c1917; --ink-soft:#57534e;
  --line:#e7e2d8; --bg:#faf8f5; --bg-alt:#f3ede1;
  --gold:#b8860b; --gold-dark:#96690a;
  --max:1160px; --radius:10px;
  --font-head: 'Lora', Georgia, 'Times New Roman', serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--font-body);color:var(--ink);line-height:1.7;background:var(--bg)}
h1,h2,h3{font-family:var(--font-head);line-height:1.25;margin:1.4em 0 .5em;font-weight:700}
h1{font-size:clamp(1.9rem,4vw,2.8rem);margin-top:0}
h2{font-size:clamp(1.4rem,2.6vw,1.9rem)}
h3{font-size:1.15rem}
p{margin:0 0 1em}
a{color:var(--brand)}
img{max-width:100%;display:block}
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:.8em 1.5em;
  border-radius:9999px;font-weight:700;text-decoration:none;border:2px solid transparent;cursor:pointer;
  font-size:.92rem;text-transform:uppercase;letter-spacing:.05em}
.btn--gold{background:var(--gold);color:#fff}
.btn--gold:hover{background:var(--gold-dark)}
.btn--navy{background:var(--navy);color:#fff}
.btn--navy:hover{background:var(--navy-dark)}
.btn--outline{background:transparent;color:var(--navy);border-color:var(--navy)}
.btn--outline:hover{background:var(--navy);color:#fff}
.btn--sm{padding:.55em 1.1em;font-size:.85rem}
.btn--lg{padding:1em 1.9em;font-size:1.05rem}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;margin:16px 0}

/* Header / nav — no phone, Service Areas mega-menu dropdown, persistent BUY GOLD */
.site-header{position:sticky;top:0;z-index:50;background:var(--navy)}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;padding-top:14px;padding-bottom:14px}
.nav__logo{color:#fff;font-family:var(--font-head);font-weight:700;font-size:1.25rem;text-decoration:none;display:flex;align-items:center}
.nav__logo-img{height:40px;width:auto;display:block}
.footer-logo-img{height:36px;width:auto;display:block;margin-bottom:12px}
.nav__toggle{display:none;background:none;border:none;color:#fff;font-size:1.6rem;padding:0;cursor:pointer}
.nav__links{list-style:none;display:flex;align-items:center;gap:4px;margin:0;padding:0}
.nav__links a{display:block;color:#fff;text-decoration:none;padding:8px 14px;font-weight:600;font-size:.92rem;border-radius:6px}
.nav__links a:hover{background:rgba(255,255,255,.12)}
.nav__links a.is-active{background:rgba(255,255,255,.18)}
.nav__dropdown{position:relative}
.nav__dropdown-menu{display:none;position:absolute;right:0;top:100%;background:var(--navy);min-width:520px;
  list-style:none;margin:0;padding:16px;box-shadow:0 8px 20px rgba(0,0,0,.3);border-radius:var(--radius);
  columns:2;column-gap:20px}
.nav__dropdown:hover .nav__dropdown-menu,.nav__dropdown:focus-within .nav__dropdown-menu{display:block}
.nav__dropdown-menu li{break-inside:avoid;margin-bottom:2px}
.nav__dropdown-menu a{padding:6px 10px;font-weight:500;font-size:.85rem}
.nav__buygold{background:var(--gold) !important;color:#fff !important;border-radius:9999px !important;
  text-transform:uppercase;letter-spacing:.05em;font-weight:700;padding:8px 18px !important}

/* Byline strip */
.byline-strip{background:var(--bg-alt);border-bottom:1px solid var(--line);padding:14px 0;font-size:.92rem;color:var(--ink-soft)}

/* Disclosure banner */
.disclosure-banner{background:#fdf6ea;border:1px solid var(--gold);border-radius:var(--radius);padding:14px 18px;font-size:.88rem;color:var(--ink-soft);margin:0 0 32px}
.disclosure-banner a{color:var(--navy);font-weight:600}

/* Quick-answer / key-takeaways callout */
.callout{background:var(--bg-alt);border-left:4px solid var(--navy);border-radius:var(--radius);padding:20px 24px;margin:0 0 28px}
.callout h2,.callout h3{margin-top:0}

/* Table of contents */
.toc{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:18px 22px;margin:0 0 32px}
.toc h2{font-size:1.05rem;margin:0 0 .5em}
.toc ol{margin:0;padding-left:1.2em}
.toc a{color:var(--ink);text-decoration:none}
.toc a:hover{color:var(--brand)}

/* Star rating */
.stars{display:inline-flex;align-items:center;gap:2px}
.stars svg{width:16px;height:16px}
.star--full{fill:var(--gold)}
.star--half{fill:var(--gold);opacity:.5}
.star--empty{fill:var(--line)}
.stars__value{margin-left:6px;font-weight:700;font-size:.88rem;color:var(--ink-soft)}

/* Affiliate CTA + company review card (dealer spotlight) */
.affiliate-cta{white-space:nowrap}
.company-review{border:1px solid var(--line);border-radius:var(--radius);padding:24px;margin:0 0 24px;background:#fff}
.company-review header{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:10px}
.company-review header h3{margin:0}
.review-facts{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:14px 0;padding:14px;background:var(--bg-alt);border-radius:var(--radius)}
.review-facts dt{font-size:.75rem;text-transform:uppercase;letter-spacing:.03em;color:var(--ink-soft);margin:0}
.review-facts dd{margin:2px 0 0;font-weight:700}

/* Compare table */
.compare-table{width:100%;border-collapse:collapse;margin:20px 0}
.compare-table th,.compare-table td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--line)}
.compare-table th{background:var(--bg-alt);font-family:var(--font-head)}

/* Rank table (ported from style-comparison.css — this stylesheet's own
   rank-table styling was missing entirely until the los-angeles-gold-dealers
   build needed a 3-row comparison table; buy-gold-florida never used
   rank_table(), only a single dealer_spotlight(), so the gap went
   unnoticed until real mobile use surfaced it). See the 760px stacking
   rule below for why a plain responsive table isn't enough on its own. */
.rank-table{width:100%;border-collapse:collapse;margin:20px 0;font-size:.95rem}
.rank-table th,.rank-table td{text-align:left;padding:14px;border-bottom:1px solid var(--line);vertical-align:top}
.rank-table th{background:var(--navy);color:#fff;font-family:var(--font-head)}
.rank-table__row:nth-child(even){background:var(--bg-alt)}
.rank-badge{display:inline-block;background:var(--gold);color:var(--navy);font-weight:800;border-radius:999px;width:28px;height:28px;line-height:28px;text-align:center}
.rank-table__cta{white-space:nowrap}

/* Red flags */
.red-flags{list-style:none;margin:20px 0;padding:0}
.red-flags li{position:relative;padding:10px 0 10px 34px;border-left:3px solid var(--brand);margin-bottom:6px;background:var(--bg-alt)}
.red-flags li svg{position:absolute;left:8px;top:12px;width:18px;height:18px;stroke:var(--brand)}

/* Glossary */
.glossary{margin:20px 0}
.glossary dt{font-weight:700;font-family:var(--font-head);margin-top:16px}
.glossary dd{margin:4px 0 0;color:var(--ink-soft)}

/* PAA block */
.paa{margin:20px 0}
.paa__item{margin-bottom:20px}
.paa__item h3{margin-bottom:.3em;font-size:1.05rem}
.paa__item p{color:var(--ink-soft);margin:0}

/* Update history */
.update-history{width:100%;border-collapse:collapse;margin:20px 0;font-size:.92rem}
.update-history th,.update-history td{text-align:left;padding:10px 14px;border-bottom:1px solid var(--line)}
.update-history th{background:var(--bg-alt)}

/* Author box */
.author-box{display:flex;gap:16px;align-items:flex-start;border:1px solid var(--line);border-radius:var(--radius);padding:20px;margin:20px 0;background:var(--bg-alt)}
.author-box__avatar{flex-shrink:0;width:48px;height:48px;border-radius:50%;background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:center;font-size:1.3rem}
.author-box__body h3{margin:0 0 4px;font-size:1rem}
.author-box__body p{margin:0;color:var(--ink-soft);font-size:.92rem}

/* FAQ accordion */
.faq{max-width:800px;margin:20px 0}
.faq details{border-bottom:1px solid var(--line);padding:14px 0}
.faq summary{cursor:pointer;font-weight:700;font-size:1.02rem;list-style:none;position:relative;padding-right:28px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:0;top:0;font-size:1.3rem;color:var(--brand)}
.faq details[open] summary::after{content:"–"}
.faq p{margin-top:10px;color:var(--ink-soft)}

/* Sections */
.section{padding:36px 0}
.section--alt{background:var(--bg-alt)}
.article-wrap{max-width:800px;margin:0 auto;padding:32px 24px}
.article-wrap section{padding:28px 0;border-bottom:1px solid var(--line)}
.article-wrap section:last-of-type{border-bottom:none}

/* Link list (Official Resources) */
.linklist{list-style:none;display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin:0;padding:0}
.linklist li a{display:block;border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px;text-decoration:none;color:var(--ink);font-weight:600;background:#fff}
.linklist li a:hover{border-color:var(--brand);color:var(--brand)}

/* --------------------------------------------------------------------- */
/* Directory components — hero-overlay, badge-pill, trust-strip, stat-band, */
/* process-steps, coverage-grid (from style-directory.css, retokened)      */
/* --------------------------------------------------------------------- */

.badge-pill{display:inline-flex;align-items:center;gap:6px;background:var(--brand);color:#fff;
  border-radius:9999px;padding:6px 14px;font-size:.72rem;font-weight:600;text-transform:uppercase;
  letter-spacing:.12em;margin:0 8px 8px 0}

.hero-overlay{position:relative;padding:96px 0 72px;overflow:hidden;color:#fff}
.hero-overlay--compact{padding:56px 0 48px}
.hero-overlay__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.hero-overlay__scrim{position:absolute;inset:0;background:linear-gradient(135deg,rgba(28,25,23,.92),rgba(28,25,23,.74));z-index:1}
.hero-overlay__content{position:relative;z-index:2}
.hero-overlay__badges{margin-bottom:18px}
.hero-overlay h1{color:#fff;margin-bottom:.4em}
.hero-overlay__lead{max-width:62ch;font-size:1.1rem;color:#e7e2d8;margin-bottom:24px}
.hero-overlay__cta{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:24px}
.btn--overlay{background:var(--brand);color:#fff}
.btn--overlay:hover{background:var(--brand-dark)}
.btn--overlay-outline{background:transparent;color:#fff;border:2px solid rgba(255,255,255,.7)}
.btn--overlay-outline:hover{background:#fff;color:var(--ink)}
.hero-overlay__chip{display:inline-block;background:rgba(250,248,245,.15);border:1px solid rgba(250,248,245,.3);
  border-radius:var(--radius);padding:14px 22px;font-weight:600}

.hero-plain{padding:64px 0 40px;background:var(--bg-alt);border-bottom:1px solid var(--line)}
.hero-plain h1{margin-bottom:.3em}
.hero-plain__lead{max-width:62ch;color:var(--ink-soft);font-size:1.05rem}

.trust-strip{background:var(--bg-alt);border-bottom:1px solid var(--line);padding:16px 0}
.trust-strip ul{list-style:none;display:flex;flex-wrap:wrap;gap:10px 28px;margin:0;padding:0;justify-content:center;font-size:.85rem;font-weight:600;color:var(--ink-soft)}

.stat-band{padding:40px 0}
.stat-band .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;text-align:center}
.stat{display:flex;flex-direction:column;gap:4px}
.stat__value{font-size:2rem;font-weight:700;color:var(--ink);font-family:var(--font-head)}
.stat__label{font-size:.8rem;font-weight:600;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.05em}

.process-steps{list-style:none;display:grid;grid-template-columns:repeat(5,1fr);gap:20px;margin:0;padding:0}
.process-steps__step{border:1px solid var(--line);border-radius:var(--radius);padding:20px;background:var(--bg-alt)}
.process-steps__num{display:inline-block;font-size:1.5rem;font-weight:800;color:var(--brand);margin-bottom:8px;font-family:var(--font-head)}

.coverage-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:32px}
.coverage-region h3{margin-bottom:.3em}
.coverage-region__blurb{color:var(--ink-soft);font-size:.92rem;margin-bottom:12px}
.coverage-region .area-grid{grid-template-columns:repeat(2,1fr)}
.area-grid{list-style:none;display:grid;gap:6px;margin:0;padding:0}
.area-link{display:flex;justify-content:space-between;gap:8px;text-decoration:none;padding:6px 10px;
  border-radius:6px;font-size:.9rem;color:var(--ink)}
.area-link:hover{background:var(--bg-alt);color:var(--brand)}
.area-link__city{color:var(--ink-soft);font-size:.82rem}

/* Footer */
.site-footer{background:var(--navy);color:#d6d0c4;padding:40px 0 0}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:32px;padding-bottom:28px}
.footer-grid h4{color:#fff;font-family:var(--font-head);margin-bottom:12px}
.footer-grid ul{list-style:none;margin:0;padding:0}
.footer-grid li{margin-bottom:8px}
.footer-grid a{color:#d6d0c4;text-decoration:none}
.footer-grid a:hover{color:#fff}
.footer-disclaimer{max-width:760px;font-size:.82rem;line-height:1.5;color:#a89e8c;margin:0 0 14px}
.footer-bottom{border-top:1px solid rgba(255,255,255,.12);padding:18px 24px;font-size:.82rem;text-align:center;color:#8f8574}

/* Utility */
.text-center{text-align:center}

/* Responsive */
@media (max-width:900px){
  .nav__toggle{display:block}
  .nav__links{display:none;flex-direction:column;align-items:stretch;width:100%;position:absolute;left:0;top:100%;background:var(--navy);padding:8px 24px 16px}
  .nav__links.is-open{display:flex}
  .site-header .wrap{position:relative}
  .nav__dropdown-menu{position:static;box-shadow:none;columns:1;min-width:0}
  .review-facts{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:1fr}
  .linklist{grid-template-columns:1fr}
  .stat-band .wrap{grid-template-columns:repeat(2,1fr)}
  .process-steps{grid-template-columns:repeat(2,1fr)}
  .coverage-grid{grid-template-columns:1fr}
}
@media (max-width:600px){
  .compare-table{display:block;overflow-x:auto}
  .stat-band .wrap{grid-template-columns:1fr}
  .process-steps{grid-template-columns:1fr}
  .coverage-region .area-grid{grid-template-columns:1fr}
  .hero-overlay__cta{flex-direction:column;align-items:stretch}
  .hero-overlay__cta .btn{text-align:center;justify-content:center}
}
/* Rank table: stack into cards below 760px rather than horizontal-scroll —
   the table has 6 columns including a multi-line "Key Features" column, so
   scroll-to-reach-the-CTA is a real usability problem on phones. Each
   <td>'s data-label (set in generate_comparison_site.py's rank_table())
   becomes a small caption via ::before since the <thead> is hidden here. */
@media (max-width:760px){
  .rank-table,.rank-table tbody{display:block;width:100%}
  .rank-table thead{display:none}
  .rank-table__row{display:block;border:1px solid var(--line);border-radius:var(--radius);margin-bottom:16px;padding:16px;background:#fff}
  .rank-table__row:nth-child(even){background:#fff}
  .rank-table td{display:block;border-bottom:none;padding:6px 0}
  .rank-table td[data-label]:not([data-label=""])::before{content:attr(data-label);display:block;font-size:.72rem;text-transform:uppercase;letter-spacing:.03em;color:var(--ink-soft);font-weight:700;margin-bottom:2px}
  .rank-table td:first-child{padding-top:0}
  .rank-table__cta{padding-top:10px}
  .rank-table__cta .affiliate-cta{width:100%;justify-content:center}
}