/*
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Hello Elementor Child — Weems Arbitration brand theme. Self-hosted fonts, brand tokens applied.
Author: DonDulin.com, LP
Author URI: https://dondulin.com/
Template: hello-elementor
Version: 1.0.0
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
*/

/* ---- 0. SELF-HOSTED FONTS (no external Google request) ----
   Files live in assets/fonts/. Inter & Cinzel are variable (one file,
   full weight range); Cormorant Garamond is static at 400/600. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url('assets/fonts/inter-latin-wght-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Cinzel';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('assets/fonts/cinzel-latin-wght-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('assets/fonts/cormorant-garamond-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal; font-weight: 600; font-display: swap;
  src: url('assets/fonts/cormorant-garamond-latin-600-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic; font-weight: 400; font-display: swap;
  src: url('assets/fonts/cormorant-garamond-latin-400-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic; font-weight: 600; font-display: swap;
  src: url('assets/fonts/cormorant-garamond-latin-600-italic.woff2') format('woff2');
}

/* ============================================================
   WEEMS ARBITRATION — SITE STYLESHEET
   Applies the Brand Style Guide (v. 2026-06-22) to real elements.
   Type system: Direction 2 (LOCKED) — Cinzel caps / Inter body /
   Cormorant Garamond italic accents.

   WHERE THIS GOES (pick one):
   • WordPress → Appearance → Customize → Additional CSS  (fastest)
   • Child theme → style.css                              (most durable)
   Set Elementor Global Colors/Fonts too (guide §06) so the builder
   inherits the same values; this file handles what Globals can't —
   Cinzel caps tracking, buttons, links, dividers, navy sections.

   NOTE ON FONTS: @import below is the one-paste option. For Core Web
   Vitals, host the three families locally and disable Elementor's
   remote Google Fonts (per guide §06), then delete this @import.
   ============================================================ */


/* ---- 1. DESIGN TOKENS (verbatim from the style guide) ----
   If you've already pasted the guide's :root block elsewhere,
   delete this block to avoid duplication. */
:root {
  /* Brand core (sampled from the logo) */
  --wa-navy:          #102230;  /* primary brand / dark sections, header, footer */
  --wa-navy-deep:     #0B1E2C;  /* deepest navy — footer base, shadows */
  --wa-navy-soft:     #1B2E3F;  /* raised navy surface / cards on dark */

  --wa-gold-heritage: #756217;  /* EXACT logo rule color — use only to echo the logo */
  --wa-gold:          #A8853E;  /* working accent — links, rules, marks (legible) */
  --wa-gold-bright:   #C2A35A;  /* hover / active on dark backgrounds */

  --wa-cream:         #F4F3E8;  /* logo cream — text & detail on navy */
  --wa-paper:         #FAF8F2;  /* warm page background for light sections */
  --wa-white:         #FDFEFD;

  /* Working neutrals (warm, never cold grey) */
  --wa-ink:           #1C2530;  /* body text — warm near-black, not #000 */
  --wa-ink-soft:      #4A5560;  /* secondary text, captions */
  --wa-hairline:      #E2DCCE;  /* borders, dividers on light */

  /* Type */
  --wa-font-display:  'Cinzel', Georgia, serif;              /* headlines, wordmark feel */
  --wa-font-serif:    'Cormorant Garamond', Georgia, serif;  /* sub-display, pull quotes, accents */
  --wa-font-body:     'Inter', system-ui, sans-serif;        /* body — LOCKED: Direction 2 */

  /* Scale & rhythm */
  --wa-step--1: clamp(0.83rem, 0.8rem + 0.15vw, 0.9rem);
  --wa-step-0:  clamp(1.05rem, 1rem + 0.25vw, 1.18rem);      /* body */
  --wa-step-1:  clamp(1.35rem, 1.2rem + 0.7vw, 1.6rem);
  --wa-step-2:  clamp(1.8rem, 1.5rem + 1.4vw, 2.4rem);
  --wa-step-3:  clamp(2.4rem, 1.9rem + 2.4vw, 3.4rem);
  --wa-step-4:  clamp(3rem, 2.2rem + 3.8vw, 4.8rem);         /* hero */

  --wa-tracking-caps: 0.18em;   /* letterspacing for the ARBITRATION-style caps */
  --wa-leading-body:  1.7;
  --wa-maxw:   1180px;
  --wa-gutter: clamp(1.25rem, 4vw, 4rem);
  --wa-radius: 2px;             /* near-square — luxury restraint, not rounded */
}

/* ---- 2. BASE ---- */
body {
  background: var(--wa-paper);
  color: var(--wa-ink);
  font-family: var(--wa-font-body);
  font-size: var(--wa-step-0);
  font-weight: 400;
  line-height: var(--wa-leading-body);
  -webkit-font-smoothing: antialiased;
}

/* Comfortable ~66-character reading measure for long-form copy.
   Scope it to a wrapper so it never fights full-width layouts. */
.wa-prose { max-width: 66ch; }
.wa-prose p { margin: 0 0 1.15em; }

/* ---- 3. HEADINGS ---- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--wa-font-display);
  color: var(--wa-navy);
  font-weight: 600;
  line-height: 1.12;
  margin: 0 0 0.5em;
}

h1 {  /* --wa-step-4 / hero — "WEEMS" */
  font-size: var(--wa-step-4);
  text-transform: uppercase;
  letter-spacing: var(--wa-tracking-caps);
  line-height: 1.04;
}
h2 {  /* --wa-step-3 / section title */
  font-size: var(--wa-step-3);
  text-transform: uppercase;
  letter-spacing: var(--wa-tracking-caps);
}
h3 {  /* --wa-step-2 / subsection */
  font-size: var(--wa-step-2);
  letter-spacing: 0.04em;
}
h4 {  /* --wa-step-1 / used for larger subheads */
  font-size: var(--wa-step-1);
  letter-spacing: 0.06em;
}

/* Eyebrow / label — small caps line above a heading */
.wa-eyebrow {
  font-family: var(--wa-font-body);
  font-size: var(--wa-step--1);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--wa-tracking-caps);
  color: var(--wa-gold);
  display: block;
  margin: 0 0 0.75em;
}

/* Pull quote / accent — Cormorant Garamond italic */
.wa-pullquote, blockquote {
  font-family: var(--wa-font-serif);
  font-style: italic;
  font-size: var(--wa-step-2);
  line-height: 1.35;
  color: var(--wa-ink);
  border-left: 2px solid var(--wa-gold);
  padding-left: 1em;
  margin: 1.5em 0;
}

/* Captions / fine print */
small, .wa-caption {
  font-size: var(--wa-step--1);
  color: var(--wa-ink-soft);
}

/* ---- 4. LINKS ---- */
a {
  color: var(--wa-gold);
  text-decoration: none;
  text-underline-offset: 0.15em;
  transition: color 0.15s ease;
}
a:hover, a:focus {
  color: var(--wa-gold-heritage);
  text-decoration: underline;
}

/* ---- 5. BUTTONS ----
   Squared 2px corners, uppercase, disciplined tracking.
   Primary = gold fill; Secondary = gold outline. */
.wa-btn {
  display: inline-block;
  font-family: var(--wa-font-body);
  font-size: var(--wa-step--1);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  line-height: 1;
  padding: 0.95em 1.8em;
  border-radius: var(--wa-radius);
  border: 1px solid var(--wa-gold);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.wa-btn-primary {
  background: var(--wa-gold);
  color: var(--wa-navy);
}
.wa-btn-primary:hover, .wa-btn-primary:focus {
  background: var(--wa-gold-bright);
  border-color: var(--wa-gold-bright);
  color: var(--wa-navy);
  text-decoration: none;
}
.wa-btn-secondary {
  background: transparent;
  color: var(--wa-gold);
}
.wa-btn-secondary:hover, .wa-btn-secondary:focus {
  background: var(--wa-gold);
  color: var(--wa-navy);
  text-decoration: none;
}

/* ---- 6. SECTIONS & CONTAINER ---- */
.wa-container {
  max-width: var(--wa-maxw);
  margin-inline: auto;
  padding-inline: var(--wa-gutter);
}

.wa-section-paper { background: var(--wa-paper); color: var(--wa-ink); }

.wa-section-navy {
  background: var(--wa-navy);
  color: var(--wa-cream);
}
.wa-section-navy h1, .wa-section-navy h2,
.wa-section-navy h3, .wa-section-navy h4 { color: var(--wa-cream); }
.wa-section-navy a { color: var(--wa-gold-bright); }
.wa-section-navy a:hover { color: var(--wa-cream); }
/* Gold body copy on navy fails contrast — use cream (guide §01). */
.wa-section-navy .wa-eyebrow { color: var(--wa-gold-bright); }

.wa-card-dark {
  background: var(--wa-navy-soft);
  color: var(--wa-cream);
  border-radius: var(--wa-radius);
  padding: 1.75rem;
}

/* Footer base */
.wa-footer { background: var(--wa-navy-deep); color: var(--wa-cream); }

/* ---- 7. RULES & THE SIGNATURE DIVIDER ----
   Hairline on light backgrounds. */
hr, .wa-hairline {
  border: 0;
  border-top: 1px solid var(--wa-hairline);
  margin: 2.5rem 0;
}

/* Signature divider — the one ornament. This is a restrained CSS
   stand-in: a gold rule with a centered diamond. Swap the ::before
   for the logo's center-flourish SVG when you export it as an inline
   background-image to match the wordmark exactly (guide §04).
   Default = working gold; add .wa-divider--heritage directly beneath
   the logo to use the exact heritage gold. */
.wa-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.85rem;
  margin: 3rem 0;
  color: var(--wa-gold);
}
.wa-divider::before,
.wa-divider::after {
  content: "";
  height: 1px;
  width: min(120px, 22vw);
  background: currentColor;
  opacity: 0.7;
}
.wa-divider > span {          /* the center mark */
  width: 8px; height: 8px;
  background: currentColor;
  transform: rotate(45deg);
  flex: 0 0 auto;
}
.wa-divider--heritage { color: var(--wa-gold-heritage); }

/* ---- 8. SELECTION & FOCUS ---- */
::selection { background: var(--wa-gold); color: var(--wa-navy); }
:focus-visible { outline: 2px solid var(--wa-gold); outline-offset: 2px; }