/* ==========================================================================
   Eban Partners — DARK THEME override
   --------------------------------------------------------------------------
   Load this AFTER styles.css. It restyles the site with the darker Eban
   Partners look: deep navy backgrounds, the white-on-navy logo, gold accents
   and light text. No wording changes.
   To adjust the dark palette, edit the variables in :root below.
   ========================================================================== */

:root {
  --bg:        #14213D;  /* page background (brand navy) */
  --bg-alt:    #0F192D;  /* alternating darker sections */
  --panel:     #1C2C4A;  /* cards, panels, inputs */
  --border:    rgba(255, 255, 255, 0.14);
  --text:      #EAE7DD;  /* body text (warm light) */
  --text-strong: #FFFFFF;
  --muted-l:   #A9B2C4;  /* secondary text */
  --gold:      #C6A863;
  --gold-bright: #D6BC7E; /* links/accents that need extra lift on dark */
}

/* ---- Base ---- */
body { background: var(--bg); color: var(--text); }
h1, h2, h3 { color: var(--text-strong); }
a { color: var(--gold-bright); }
a:hover { color: var(--text-strong); }

/* ---- Header / nav ---- */
.site-header { background: rgba(15, 25, 45, 0.92); border-bottom-color: var(--border); }
.brand, .brand-eban { color: var(--text-strong); }
.brand-mark { color: var(--text-strong); }        /* diamond centre = white */
.brand-partners { color: var(--gold); }
.primary-nav a { color: var(--text); }
.primary-nav a:hover { color: var(--gold-bright); }
.primary-nav a.nav-cta { background: var(--gold); color: var(--bg); }
.primary-nav a.nav-cta:hover { background: var(--gold-bright); color: var(--bg); }
.nav-toggle-bar { background: var(--text-strong); }
.primary-nav { background: var(--bg); border-bottom-color: var(--border); }
.primary-nav a { border-bottom-color: var(--border); }

/* ---- Buttons ---- */
.btn-primary { background: var(--gold); color: var(--bg); border-color: var(--gold); }
.btn-primary:hover { background: var(--gold-bright); border-color: var(--gold-bright); color: var(--bg); }
.btn-secondary { color: var(--text-strong); border-color: rgba(255,255,255,0.55); background: transparent; }
.btn-secondary:hover { background: var(--text-strong); color: var(--bg); }
.btn-ghost { color: var(--text); }

/* ---- Sections ---- */
.section-alt { background: var(--bg-alt); border-top-color: var(--border); border-bottom-color: var(--border); }
.section-heading { color: var(--text-strong); }
.section-intro { color: var(--muted-l); }

/* ---- Hero ---- */
.hero-heading { color: var(--text-strong); }
.hero-lead { color: var(--text); }
.hero-sub { color: var(--muted-l); }
.hero-rule { background: var(--border); }

/* ---- Service cards ---- */
.card { background: var(--panel); border-color: var(--border); border-top-color: var(--gold); }
.card p { color: var(--text); }
.card-title { color: var(--text-strong); }
.card-sub { color: var(--text-strong); }
.card ul { color: var(--muted-l); }
.card summary { color: var(--gold-bright); }
.card summary:hover { color: var(--text-strong); }

/* ---- How we work / panels ---- */
.panel { background: var(--panel); border-color: var(--border); }
.panel-title { color: var(--text-strong); }
.panel p { color: var(--muted-l); }
.panels-note { color: var(--muted-l); }

/* ---- Approach / steps ---- */
.step-num { background: var(--gold); color: var(--bg); }
.step-title { color: var(--text-strong); }
.step p { color: var(--muted-l); }
.statement { color: var(--text-strong); border-top-color: var(--border); border-bottom-color: var(--border); }

/* ---- Tick lists ---- */
.ticks li { color: var(--text); }
.emphasis { color: var(--text-strong); }

/* ---- Partner solutions ---- */
.partner-block { background: var(--panel); border-color: var(--border); border-left-color: var(--gold); }
.partner-title { color: var(--text-strong); }
.disclosure { color: var(--muted-l); border-top-color: var(--border); }

/* ---- Why Eban ---- */
.reason { background: var(--panel); border-color: var(--border); }
.reason-title { color: var(--text-strong); }
.reason p { color: var(--muted-l); }

/* ---- Contact form ---- */
.field label { color: var(--text-strong); }
.optional { color: var(--muted-l); }
.field input, .field select, .field textarea {
  background: var(--panel); color: var(--text); border-color: rgba(255,255,255,0.22);
}
.field input::placeholder, .field textarea::placeholder { color: #8892A5; }
.field select option { color: #FFFFFF; background: #1C2C4A; } /* readable white options on the dark select */
.field-check label { color: var(--text); }
.linklike { color: var(--gold-bright); }
.linklike:hover { color: var(--text-strong); }
.contact-aside { border-top-color: var(--border); }
.response-note { color: var(--muted-l); }
.form-status.ok { color: #7FD6A0; }
.form-status.error { color: #F0A0A0; }

/* ---- Modals ---- */
.modal-overlay { background: rgba(5, 10, 20, 0.72); }
.modal-panel { background: var(--panel); color: var(--text); box-shadow: 0 20px 60px rgba(0,0,0,0.5); }
.modal-panel h2, .modal-panel h3 { color: var(--text-strong); }
.modal-close { color: var(--muted-l); }
.modal-close:hover { color: var(--text-strong); }

/* ---- Footer (slightly deeper than page) ---- */
.site-footer { background: #0B1220; }

/* ---- Focus visibility on dark ---- */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, summary:focus-visible { outline-color: var(--gold-bright); }

/* ==========================================================================
   REFINEMENT LAYER — dark colours for the new components.
   Keeps the muted gold; adds warm-ivory selectively in small areas only.
   ========================================================================== */

/* Warm ivory used sparingly for controlled highlights */
:root { --ivory-tint: rgba(240, 236, 224, 0.06); }

/* Navigation active state */
.primary-nav a.is-active { color: var(--gold); }
.primary-nav a::after { background: var(--gold); }

/* About credentials — understated, warm ivory numbers */
.credentials { border-left-color: var(--border); }
.cred-num { color: #E7DCC2; }                 /* warm ivory, not bright gold */
.cred-label { color: var(--muted-l); }
.lead-para { color: var(--text-strong); }

/* How We Work editorial blocks */
.work-item p { color: var(--muted-l); }
.work-title { color: var(--text-strong); }

/* Approach statement — warm-ivory highlighted band */
.statement {
  background: var(--ivory-tint);
  border: 1px solid var(--border);
  color: #F0ECE0;
}

/* Why Eban editorial columns */
.why-list { }
.why-item { border-left-color: var(--border); }
.why-title { color: var(--text-strong); }
.why-item p { color: var(--muted-l); }

/* Card hover — slightly brighter (still muted) border, faint depth */
.card:hover { border-color: rgba(198, 168, 99, 0.5); box-shadow: 0 10px 30px rgba(0,0,0,0.28); }

/* Footer hierarchy */
.site-footer { background: #0B1220; }
.footer-name { color: var(--text-strong); }
.footer-tag { color: var(--muted-l); }
.footer-nav a, .footer-nav .linklike { color: #D3D8E2; }
.footer-nav a:hover, .footer-nav .linklike:hover { color: var(--gold); }
.footer-legal { border-top-color: rgba(255,255,255,0.08); }
.legal-company, .legal-copy { color: #7E889B; }

/* Confirmation panel — warm-ivory tint for a premium, understated success state */
.form-confirmation { background: var(--ivory-tint); border-color: var(--border); }
.confirmation-title { color: var(--text-strong); }
.confirmation-text { color: var(--muted-l); }

/* Keep the Contact CTA label readable (navy on gold) when it is the active section */
.primary-nav a.nav-cta.is-active { color: var(--bg); }