/* ============================================================================
   Best Rated Company: navy and gold theme (October 2026)
   Loaded after styles.css by includes/head.php. Everything is a variable override plus a few fixes, so the
   whole look goes back to cream and emerald by adding   define('SITE_THEME', 'cream');   to config.php.
   Navy page, burnished gold accents, crisp white text, Playfair Display headings. The search boxes stay
   white (see "White boxes" below).
   ========================================================================== */

:root {
  color-scheme: dark;

  --bg:        #0B1F3A;   /* imperial navy */
  --surface:   #10294A;   /* cards and panels */
  --surface-2: #0D2442;   /* alternate sections, footer */
  --hover:     #153259;
  --deep:      #0A1B33;
  --line:      rgba(212,175,55,.30);    /* gold hairlines */
  --line-soft: rgba(255,255,255,.10);

  --text:    #FFFFFF;
  --muted:   #C5CCDD;
  --muted-2: #AEB8CE;

  /* Gold is now the brand colour: links, labels, focus rings, primary buttons */
  --brand:      #D4AF37;
  --brand-deep: #E6C75A;
  --brand-soft: rgba(212,175,55,.12);

  --gold:      #D4AF37;
  --gold-soft: #E0BE4E;
  --gold-deep: #E0BE4E;     /* used for small labels on dark: must be light */
  --gold-tint: rgba(212,175,55,.12);

  --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;

  --shadow-sm:   0 2px 8px -3px rgba(0,0,0,.45);
  --shadow-card: 0 10px 30px -16px rgba(0,0,0,.6);
  --shadow-lg:   0 28px 60px -28px rgba(0,0,0,.7);
}

body::before {
  /* Not one flat colour: near-black navy at the top left, deepening into a richer royal blue towards the right and
     bottom, with a soft glow in the corner. */
  background:
    radial-gradient(1000px 640px at 92% 4%, rgba(48,92,214,.42), transparent 64%),
    radial-gradient(900px 700px at 4% 104%, rgba(2,5,18,.62), transparent 62%),
    radial-gradient(rgba(255,255,255,.04) 1px, transparent 1px) 0 0 / 28px 28px,
    linear-gradient(118deg, #050A1E 0%, #0A1B48 38%, #0D2670 72%, #12349A 100%);
}
::selection { background: rgba(212,175,55,.35); color: #fff; }

/* Headings: serif, a little looser than the old sans */
h1, h2, h3, h4 { letter-spacing: -.01em; line-height: 1.14; font-weight: 700; }
.hero h1, .page-head h1 { font-size: clamp(30px, 4.1vw, 48px); font-weight: 600; letter-spacing: -.01em; line-height: 1.15; }   /* calmer than the old 62px and 58px: the same size in every page's top area */
.hero h1 em, h1 em, h2 em { font-style: normal; color: var(--gold); }   /* gold, upright: no italics */
.hero h1 em::after { display: none; }
.wordmark { letter-spacing: -.02em; }
.brand__name { letter-spacing: -.005em; }
.faq-item summary, .pullquote { font-weight: 600; }

/* Buttons: gold gradient with dark text */
.btn--gold, .btn--brand {
  --bg: linear-gradient(135deg, #D4AF37, #A67C00); --fg: #0A1128; --bd: transparent;
  box-shadow: 0 10px 24px -12px rgba(212,175,55,.5);
}
.btn--gold:hover, .btn--brand:hover { --bg: linear-gradient(135deg, #E0BE4E, #B88A06); color: #0A1128; box-shadow: 0 16px 32px -14px rgba(212,175,55,.6); }
.btn--gold { font-weight: 700; }
.primary-nav .btn--gold, .primary-nav .btn--gold:hover { color: #0A1128; }
.btn--ghost { --bg: transparent; --fg: var(--text); --bd: var(--line); box-shadow: none; }
.btn--ghost:hover { --bd: var(--gold); color: var(--gold); }
.skip-link { color: #0A1128; }

/* Verified pill: gold outline */
.vbadge { color: var(--gold); background: rgba(212,175,55,.10); border-color: rgba(212,175,55,.5); }
.vbadge--pending { color: var(--muted); background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.2); }
.vbadge--paid, .sopt__chip--paid { color: var(--gold); background: rgba(212,175,55,.14); border-color: rgba(212,175,55,.5); }
.feature-card__flag { color: #0A1128; }
.feature-card__flag--paid { background: rgba(212,175,55,.14); color: var(--gold); border-color: rgba(212,175,55,.5); }

/* Header */
.site-header { background: rgba(11,31,58,.82); }
.site-header.is-scrolled { background: rgba(9,26,50,.94); }
.site-header.has-search { background: rgba(9,26,50,.97); border-bottom-color: var(--line-soft); }
.hsearch { background: rgba(9,26,50,.97); }
.primary-nav a:hover, .hsearch-toggle:hover, .hsearch-toggle[aria-expanded="true"], .mkt__btn:hover, .mkt[open] .mkt__btn { background: rgba(255,255,255,.07); }
@media (max-width: 760px) { .primary-nav { background: rgba(9,26,50,.98); } }

/* The verified seal keeps its original cream, emerald and gold: a cream disc with the old colour variables */
.hero__seal, .footer-seal {
  color-scheme: light;
  --text:      #232E27;
  --brand:     #1C7C54;
  --brand-deep:#135C3D;
  --gold:      #C08A2B;
  --gold-soft: #E2A93E;
  --gold-deep: #8A6014;
  --surface-2: #FCFAF4;
  --line:      #E5DBC9;
}
.hero__seal::before { background: radial-gradient(closest-side, #FFFFFF, #FAF6EC 97%, #F3EDE0); box-shadow: 0 18px 40px -22px rgba(0,0,0,.6); }   /* a solid cream disc: no faded edge */
.hero__seal::after  { border-color: rgba(212,175,55,.35); }
.footer-seal { box-sizing: content-box; width: 104px; padding: 8px; border-radius: 50%; background: radial-gradient(closest-side, #FFFFFF, #FAF6EC 97%, #F3EDE0); }
.feature-card:hover, .pillar:hover, .cat-card:hover, .company:hover, .fcard:hover { border-color: rgba(212,175,55,.6); }
.feature-card__media:has(.feature-card__shot) .feature-card__shot { box-shadow: 0 3px 12px -6px rgba(0,0,0,.6); }

/* Call to action band: navy panel with a gold glow instead of an emerald block */
.cta-band__inner { background: linear-gradient(135deg, #12305A, #0A1B33); border: 1px solid var(--line); }
.cta-band__inner::after { background: radial-gradient(circle, rgba(212,175,55,.28), transparent 65%); }
.cta-band .eyebrow, .cta-band .eyebrow::before { color: var(--gold); }
.cta-band .eyebrow::before { background: var(--gold); }

/* Forms (dark panels, light text) */
.form-field input:focus, .form-field select:focus, .form-field textarea:focus { background: var(--hover); box-shadow: 0 0 0 3px rgba(212,175,55,.18); }
.form-field input::placeholder, .form-field textarea::placeholder { color: #8E9AB3; }
.lookup { border-color: var(--line); }
.lookup__row input { border-color: var(--line); }
.lookup__row input:focus { box-shadow: 0 0 0 3px rgba(212,175,55,.18); }
.apply-banner--ok { border-color: var(--line); color: var(--text); }
.apply-banner--note { color: var(--text); }
.suggest { border-color: var(--line); }
.tab[aria-selected="true"] { color: var(--gold); }
.sbox-hint a { text-decoration-color: rgba(212,175,55,.5); }

/* ----------------------------------------------------------------------------
   White boxes. The search (home page card, the search bar, the dropdown) and the browse filters stay white,
   so they use a light set of the same variables.
   -------------------------------------------------------------------------- */
.hero > .search-stage, .sbox, .field {
  color-scheme: light;
  --surface:   #FFFFFF;
  --surface-2: #F4F6FA;
  --hover:     #EEF1F7;
  --deep:      #E6EAF1;
  --line:      #D5DBE6;
  --line-soft: #E6EAF1;
  --text:      #16212F;
  --muted:     #4B5666;
  --muted-2:   #566070;
  --brand:      #0B1F3A;
  --brand-deep: #0B1F3A;
  --brand-soft: #EAEFF7;
  --gold-deep:  #8A6410;
  --gold-tint:  #FBF3DD;
  --shadow-card: 0 24px 60px -24px rgba(0,0,0,.55);
}
.hero > .search-stage { max-width: 760px; margin-inline: auto; container-type: inline-size; }
/* Playfair is wider than the old sans, so the name is sized to the card, not the screen: it always fits on one line */
.wordmark { font-size: clamp(24px, 5.2vw, 56px); }
@supports (font-size: 1cqw) { .hero > .search-stage .wordmark { font-size: clamp(22px, 8cqw, 60px); } }   /* narrower white card: less empty white at the sides */
.sbox:focus-within .sbox__bar { box-shadow: 0 0 0 3px rgba(212,175,55,.35), 0 6px 18px -4px rgba(0,0,0,.35); border-color: #B8912A; }
.sbox__bar, .sbox--stage .sbox__bar { border-color: #D5DBE6; }
.sbox__panel { border-color: #B8912A; box-shadow: 0 0 0 3px rgba(212,175,55,.35), 0 18px 34px -12px rgba(0,0,0,.45); }
.sbox__input::placeholder { color: #6B7587; }
.sopt__chip--paid { color: #7a4d00; background: #FFF3D6; border-color: rgba(192,138,43,.45); }
.wordmark__b { color: #0B1F3A; }
.field:focus-within { border-color: #B8912A; box-shadow: 0 0 0 3px rgba(212,175,55,.3); }

/* The search card is the same cream as the verified seal's disc, with a slightly lighter bar inside it */
.hero > .search-stage {
  --surface:   #F6F1E8;
  --surface-2: #EAE3D3;
  --hover:     #E2D9C6;
  --line:      #DCD3C2;
  --line-soft: #E8E0D0;
  border-color: #F6F1E8;
  box-shadow: 0 18px 44px -26px rgba(0,0,0,.55);
}
.sbox, .field { --surface: #FBF8F1; --surface-2: #F1EBDD; --hover: #EDE6D6; --line: #DCD3C2; --line-soft: #E8E0D0; }
.hero > .search-stage .sbox__bar { border-color: #D9CFBB; }

/* Sign-up page, step 1 (the website address box): the same cream card, dark text, a lighter field inside */
.lookup {
  color-scheme: light;
  --surface:   #FBF8F1;
  --surface-2: #F1EBDD;
  --hover:     #EDE6D6;
  --line:      #DCD3C2;
  --line-soft: #E8E0D0;
  --text:      #16212F;
  --muted:     #4B5666;
  --muted-2:   #566070;
  --brand:      #0B1F3A;
  --brand-deep: #0B1F3A;
  --brand-soft: #F6F1E8;
  background: #F6F1E8; border-color: #F6F1E8;
}
.lookup__row input { border-color: #D9CFBB; }
.lookup__row input:focus { border-color: #B8912A; box-shadow: 0 0 0 3px rgba(212,175,55,.3); }
.lookup__status.is-error { color: #a23232; }

/* ----------------------------------------------------------------------------
   Blue, light, blue. On the home page "Just verified and now live" sits on a light band; the page is blue above
   it and from "For business owners" down to the footer.
   -------------------------------------------------------------------------- */
.site-footer { background: linear-gradient(118deg, #050A1E 0%, #0A1B48 45%, #0D2670 100%); border-top-color: var(--line); }
.light-band {
  color-scheme: light;
  position: relative;
  margin-block: clamp(28px, 4vw, 56px) 0;
  border-block: 1px solid rgba(212,175,55,.65);
  background: #F7F4EC;
  color: #0B1F3A;
  --bg:        #F7F4EC;
  --surface:   #FFFFFF;
  --surface-2: #F0EBDF;
  --hover:     #F3EEE2;
  --deep:      #E8E1D2;
  --line:      #DCD3C2;
  --line-soft: #E8E0D0;
  --text:      #0B1F3A;
  --muted:     #4B5666;
  --muted-2:   #596478;
  --brand:      #0B1F3A;
  --brand-deep: #0B1F3A;
  --brand-soft: #EAEFF7;
  --gold:      #9A7210;
  --gold-soft: #B8912A;
  --gold-deep: #7F5D0C;
  --gold-tint: #F6EBC9;
  --shadow-sm:   0 2px 8px -3px rgba(11,31,58,.18);
  --shadow-card: 0 14px 34px -20px rgba(11,31,58,.35);
  --shadow-lg:   0 28px 60px -30px rgba(11,31,58,.4);
}
.light-band .vbadge { background: rgba(212,175,55,.14); border-color: rgba(154,114,16,.45); color: #7F5D0C; }
.light-band .vbadge--pending { background: #EFEAE0; border-color: #D8CFBC; color: #4B5666; }
.light-band .feature-card:hover, .light-band .pillar:hover, .light-band .cat-card:hover, .light-band .company:hover, .light-band .fcard:hover { border-color: #B8912A; }
.light-band .btn--ghost:hover { --bd: #B8912A; color: #7F5D0C; }
.light-band h1 em, .light-band h2 em { color: #9A7210; }
/* The blue panel inside the light page keeps the dark-page colours */
.light-band .cta-band__inner {
  --text: #FFFFFF; --muted: #C5CCDD; --muted-2: #AEB8CE; --line: rgba(212,175,55,.30);
  --gold: #D4AF37; --gold-soft: #E0BE4E; --gold-deep: #E0BE4E; --brand: #D4AF37;
  color: #FFFFFF;
  background: radial-gradient(700px 400px at 100% 0%, rgba(48,92,214,.45), transparent 65%), linear-gradient(118deg, #050A1E 0%, #0A1B48 45%, #0D2670 100%);
}

/* List your business: the page's own sections have no top padding, so the band and the section after it carry it */
.light-band--pad { padding-top: clamp(32px, 4.5vw, 56px); }
.light-band--pad + section { padding-top: clamp(32px, 4.5vw, 56px) !important; }
.light-band .form-card { border-color: #DCD3C2; }
.light-band .lookup { border-color: #DCD3C2; }