@layer tokens, base, components, sections, page, utility;

/* Layer order. Repeated in every file so a CSS combiner cannot reorder it. */
@layer tokens, base, components, sections, page, utility;

@layer page {
/* ============================================================
   PPCBud — location page extras (v4.0)

   The shared component system now lives in assets/css/brand.css and is
   loaded sitewide. This file only carries what is specific to location
   pages, so the two cannot drift apart.
   ============================================================ */

.pb-location .pb-loc-hero {
  padding: 76px 0 62px;
  background:
    radial-gradient(900px 380px at 8% -20%, var(--pb-brand-wash), transparent 65%),
    radial-gradient(800px 340px at 92% -10%, var(--pb-navy-wash), transparent 60%),
    var(--pb-paper);
  border-bottom: 1px solid var(--pb-line-soft);
}
.pb-location .pb-loc-h1 { font-size: clamp(32px, 4.6vw, 52px); max-width: 18ch; }
.pb-location .pb-loc-sub { max-width: 64ch; font-size: 17.5px; color: var(--pb-slate); }
.pb-location .pb-loc-sub p { color: inherit; }

.pb-location section { padding: 76px 0; border-top: 1px solid var(--pb-line-soft); }
.pb-location section:first-child { border-top: 0; }

/* Alternate bands so 25 sections do not read as one wall */
.pb-location .pb-loc-stats,
.pb-location .pb-loc-benchmarks,
.pb-location .pb-loc-industries,
.pb-location .pb-loc-coverage { background: var(--pb-mist); }

.pb-location .pb-loc-vs,
.pb-location .pb-loc-cross { background: var(--pb-mist); }

.pb-location .pb-loc-audit { background: var(--pb-navy); }
.pb-location .pb-loc-audit h2 { color: #fff; }
.pb-location .pb-loc-audit .pb-loc-audit-sub p { color: #C3D3EA; }
.pb-location .pb-loc-audit .pb-field label { color: #C3D3EA; }
.pb-location .pb-loc-audit .pb-field input,
.pb-location .pb-loc-audit .pb-field select,
.pb-location .pb-loc-audit .pb-field textarea {
  background-color: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.18);
  color: #fff;
}

/* THE DROPDOWN FIX
   On a dark field the browser still draws the option list as a separate
   OS-level popup. It does not inherit the field's background, but it does
   inherit `color: #fff` — so every option rendered white on white and the
   list looked empty.

   Three things are needed, because no single one covers every browser:
     1. color-scheme: dark   — Chrome and Firefox draw a dark popup
     2. explicit option background and colour — Windows Chrome, Edge, Firefox
     3. a custom arrow — the native one is dark and vanishes on dark fields */
.pb-location .pb-loc-audit .pb-field select {
  color-scheme: dark;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none'><path d='M1 1.5 6 6.5 11 1.5' stroke='%23C3D3EA' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}
.pb-location .pb-loc-audit .pb-field select option,
.pb-location .pb-loc-audit .pb-field select optgroup {
  background-color: #0E2A55;
  color: #fff;
}
.pb-location .pb-loc-audit .pb-field select option:checked,
.pb-location .pb-loc-audit .pb-field select option:hover {
  background-color: var(--pb-navy-soft);
  color: #fff;
}

.pb-location .pb-loc-audit .pb-field input[type="checkbox"] { accent-color: var(--pb-brand); }
.pb-location .pb-loc-audit .pb-field input::placeholder,
.pb-location .pb-loc-audit .pb-field textarea::placeholder { color: rgba(255,255,255,.42); }
.pb-location .pb-loc-audit .pb-field input:focus,
.pb-location .pb-loc-audit .pb-field select:focus,
.pb-location .pb-loc-audit .pb-field textarea:focus {
  border-color: var(--pb-brand); box-shadow: 0 0 0 3px rgba(18,201,126,.22);
}
.pb-location .pb-loc-audit .pb-consent label { color: #C3D3EA; }
.pb-location .pb-loc-audit .pb-consent a { color: var(--pb-brand); }
.pb-location .pb-loc-audit .pb-btn-primary { background: var(--pb-brand); color: var(--pb-brand-ink); }
.pb-location .pb-loc-audit .pb-form-note { color: rgba(255,255,255,.5); }

.pb-location .pb-loc-cross { text-align: center; }
.pb-location .pb-loc-cross p { max-width: 60ch; margin-inline: auto; }

}