/* =========================================================================
   All Ways Signs — DARK THEME OVERRIDE
   Loads AFTER style.css. Changes no markup: the approved 22-page draft
   renders dark by variable remap plus overrides for the 13 rules that
   hard-code a light background.

   Palette read off the live WordPress homepage on 2026-08-19 so the new
   pages match the RomeTheme kit already on the site:
     background #101010 · panels #171717 · text #D9D9D9 · borders #2A2A2A
     magenta #E23CD6 (accents) · teal #0AB291 (buttons) · amber #FFB157
     Syncopate (display) · Montserrat (body) · Syne (buttons)
   ========================================================================= */

:root {
  --bg:            #101010;
  --bg-alt:        #171717;
  --dark:          #000000;
  --text:          #D9D9D9;
  --text-light:    #9B9B9B;
  --border:        #2A2A2A;

  /* magenta = accent/eyebrow/link colour in the kit */
  --primary:       #E23CD6;
  --primary-dark:  #B82FAE;
  --primary-light: #2A0F28;

  /* teal = the kit's call-to-action button */
  --accent:        #0AB291;
  --accent-dark:   #078A70;
  --accent-light:  #0E2A24;

  --star:          #FFB157;

  --shadow:    0 1px 3px rgba(0,0,0,0.5);
  --shadow-md: 0 4px 10px rgba(0,0,0,0.55);
  --shadow-lg: 0 14px 34px rgba(0,0,0,0.65);

  --font:         "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --font-heading: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --font-display: "Syncopate", "Montserrat", sans-serif;
  --font-btn:     "Syne", "Montserrat", sans-serif;
}

body { background: var(--bg); color: var(--text); }

/* ---- display type: Syncopate only where the kit uses it ---- */
.hero h1, .hero-service h1 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: .01em;
  line-height: 1.22;
  text-transform: uppercase;
  font-size: clamp(1.6rem, 3.4vw, 2.6rem);
}
.section-label {
  font-family: var(--font-display);
  color: var(--primary);
  letter-spacing: .14em;
}
h2, h3, h4 { color: #F4F4F4; font-family: var(--font-heading); }
h2 { letter-spacing: -.005em; }

/* ---- the 13 light-background rules ---- */
.site-header   { background: rgba(16,16,16,.94); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); }
.nav-menu      { background: #101010; border-bottom: 1px solid var(--border); }
.dropdown-menu { background: #171717; border: 1px solid var(--border); box-shadow: var(--shadow-lg); }
.card,
.review-card,
.team-member,
.credibility-card { background: #171717; border: 1px solid var(--border); }
.card:hover    { border-color: var(--primary); box-shadow: 0 0 0 1px rgba(226,60,214,.25), var(--shadow-lg); }
.btn-white     { background: #F4F4F4; color: #101010; border-color: #F4F4F4; }
.btn-white:hover { background: #fff; color: #101010; }
.filter-btn    { background: #171717; color: var(--text); border-color: var(--border); }
.filter-btn:hover, .filter-btn.active { background: var(--primary); border-color: var(--primary); color: #fff; }
.form-input, .form-select, .form-textarea {
  background: #1A1A1A; color: var(--text); border-color: var(--border);
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
  border-color: var(--primary); box-shadow: 0 0 0 3px rgba(226,60,214,.18); outline: none;
}
.form-input::placeholder, .form-textarea::placeholder { color: #6E6E6E; }
.related-links a { background: #171717; border-color: var(--border); color: var(--text); }
.related-links a:hover { border-color: var(--primary); color: #fff; }

/* ---- hero / CTA / trust bands: neon-on-black, matching the kit ---- */
.hero, .hero-service {
  background:
    radial-gradient(900px 420px at 12% -10%, rgba(226,60,214,.22), transparent 60%),
    radial-gradient(760px 380px at 88% 110%, rgba(10,178,145,.20), transparent 62%),
    #0B0B0B;
  border-bottom: 1px solid var(--border);
  color: #F4F4F4;
}
.hero p, .hero-service p { color: #C9C9C9; }
.trust-bar {
  background: #0B0B0B; color: var(--text);
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
}
.trust-item svg { color: var(--star); }
.cta-block {
  background:
    radial-gradient(680px 300px at 50% 120%, rgba(10,178,145,.26), transparent 65%),
    #0B0B0B;
  border-top: 1px solid var(--border);
  color: #F4F4F4;
}
.section-alt  { background: var(--bg-alt); }
.section-dark { background: #000; }

/* ---- buttons: kit shape and type ---- */
.btn {
  font-family: var(--font-btn);
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
}
/* header CTA stays sentence case — uppercase widens it enough to crowd the nav */
.nav-cta { text-transform: none; letter-spacing: .01em; }
.btn-primary { background: var(--accent); border-color: var(--accent); color: #06231C; }
.btn-primary:hover { background: var(--accent-dark); border-color: var(--accent-dark); color: #fff; }
.btn-outline-white { border-color: var(--star); color: #F4F4F4; }
.btn-outline-white:hover { background: var(--star); color: #101010; }

/* ---- misc surfaces ---- */
.site-footer { background: #000; border-top: 1px solid var(--border); color: rgba(255,255,255,.72); }
.faq-item { border-color: var(--border); }
.faq-item summary { color: #F4F4F4; }
.faq-item summary:hover { background: #1C1C1C; }
.gallery-placeholder { background: #171717; border: 1px dashed #3A3A3A; color: #8A8A8A; }
.review-stars { color: var(--star); }
.step-number { background: var(--primary); color: #fff; }
.feature-check { color: var(--accent); }
.card-icon { background: var(--primary-light); color: var(--primary); }
.form-status-ok  { background: var(--accent-light);  border-left-color: var(--accent); color: var(--text); }
.form-status-err { background: var(--primary-light); border-left-color: var(--primary); color: var(--text); }
hr { border-color: var(--border) !important; }
a { color: var(--primary); }
img { opacity: .96; }