/* ============================================================
   Emerald Coast Masters — 2027 Coastal Theme
   "Emerald Coast Florida" identity refresh
   Loads AFTER ecm-content.css and inline WP styles to override.
   ============================================================ */

:root {
  /* Coastal palette — Emerald Coast of Florida */
  --ecm-emerald:        #2d6a55;   /* Gulf water primary */
  --ecm-emerald-dark:   #1f4a3c;   /* Deep gulf */
  --ecm-emerald-deep:   #143028;   /* Hero gradient base */
  --ecm-emerald-mist:   #e8f0ec;   /* Pale sea-foam */
  --ecm-sand:           #e8d8a8;   /* Florida beach sand */
  --ecm-sand-dark:      #d4c5a0;   /* Dune shadow */
  --ecm-sand-light:     #f4ecd1;   /* Pale dune */
  --ecm-coral:          #e87a5d;   /* Gulf sunset */
  --ecm-coral-dark:     #d56342;   /* Sunset deep */
  --ecm-bg:             #fafaf7;   /* Off-white sea-foam */
  --ecm-text:           #1a2e2a;   /* Deep charcoal w/ green undertone */
  --ecm-text-muted:     #5a6b65;   /* Muted pine */
  --ecm-border:         #dde5df;   /* Soft sage border */

  /* Override register-page legacy tokens to coastal palette */
  --ecm-navy:           var(--ecm-emerald-dark);
  --ecm-gold:           var(--ecm-coral);

  /* Typography */
  --ecm-font-serif: "Crimson Text", Georgia, "Times New Roman", serif;
  --ecm-font-sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* ---------- Global typography on theme'd pages ---------- */
body.ecm-themed,
body.ecm-themed main.ecm-content,
body.ecm-themed .ecm-content {
  font-family: var(--ecm-font-sans);
  color: var(--ecm-text);
  background: var(--ecm-bg);
}

body.ecm-themed h1,
body.ecm-themed h2,
body.ecm-themed main.ecm-content h2 {
  font-family: var(--ecm-font-serif);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ecm-emerald-dark);
}

body.ecm-themed main.ecm-content h3 {
  font-family: var(--ecm-font-sans);
  color: var(--ecm-emerald);
  font-weight: 600;
}

body.ecm-themed a { color: var(--ecm-emerald); }
body.ecm-themed a:hover { color: var(--ecm-coral); }

/* ---------- Header / nav ---------- */
body.ecm-themed .ecm-header {
  background: var(--ecm-bg);
  border-bottom: 1px solid var(--ecm-border);
}
body.ecm-themed .ecm-logo { color: var(--ecm-emerald-dark); }
body.ecm-themed .ecm-nav a { color: var(--ecm-text); }
body.ecm-themed .ecm-nav a:hover { color: var(--ecm-coral); }

/* ---------- Hero (division/travel pages using ecm-content.css) ---------- */
body.ecm-themed .ecm-hero {
  background:
    radial-gradient(1200px 400px at 20% 10%, rgba(232,216,168,0.10), transparent 60%),
    linear-gradient(135deg, var(--ecm-emerald) 0%, var(--ecm-emerald-dark) 60%, var(--ecm-emerald-deep) 100%);
  color: #ffffff;
  position: relative;
  overflow: hidden;
}
body.ecm-themed .ecm-hero::after {
  /* subtle wave separator at the bottom */
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 28px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 28' preserveAspectRatio='none'><path d='M0 14 Q150 0 300 14 T600 14 T900 14 T1200 14 V28 H0 Z' fill='%23fafaf7'/></svg>");
  background-size: 1200px 28px;
  background-repeat: repeat-x;
}
body.ecm-themed .ecm-hero h1 {
  color: #ffffff;
  font-family: var(--ecm-font-serif);
}
body.ecm-themed .ecm-hero p { color: var(--ecm-sand-light); }

/* ---------- Buttons / CTAs (content pages) ---------- */
body.ecm-themed .ecm-cta {
  background: var(--ecm-coral);
  color: #ffffff;
  border-radius: 6px;
  transition: transform .15s ease, background .15s ease, box-shadow .15s ease;
  box-shadow: 0 4px 14px rgba(232,122,93,0.28);
}
body.ecm-themed .ecm-cta:hover {
  background: var(--ecm-coral-dark);
  color: #ffffff;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(232,122,93,0.38);
}
body.ecm-themed .ecm-cta-outline {
  border: 2px solid var(--ecm-emerald);
  color: var(--ecm-emerald);
  border-radius: 6px;
}
body.ecm-themed .ecm-cta-outline:hover {
  background: var(--ecm-emerald);
  color: #ffffff;
}

/* ---------- Fact box / FAQ / cards ---------- */
body.ecm-themed .ecm-fact-box {
  background: var(--ecm-emerald-mist);
  border-left: 4px solid var(--ecm-emerald);
  border-radius: 4px;
}
body.ecm-themed .ecm-fact-box strong { color: var(--ecm-emerald-dark); }

body.ecm-themed .ecm-faq dt { color: var(--ecm-emerald-dark); }

body.ecm-themed .ecm-card {
  background: #ffffff;
  border: 1px solid var(--ecm-border);
  border-radius: 8px;
  transition: box-shadow .2s ease, transform .2s ease;
}
body.ecm-themed .ecm-card:hover {
  box-shadow: 0 6px 20px rgba(45,106,85,0.10);
  transform: translateY(-2px);
}
body.ecm-themed .ecm-card h3 { color: var(--ecm-emerald-dark); }

/* ---------- Footer ---------- */
body.ecm-themed .ecm-footer {
  background: var(--ecm-emerald-mist);
  border-top: 1px solid var(--ecm-border);
  color: var(--ecm-text-muted);
}
body.ecm-themed .ecm-footer a { color: var(--ecm-emerald-dark); }

/* ============================================================
   HOMEPAGE — savedate hero block override
   These override the inline <style> in index.html with the
   same selector specificity (single class). The cascade order
   places this stylesheet AFTER the inline <style>, so it wins.
   ============================================================ */

body.ecm-themed .ecm-savedate-wrapper {
  font-family: var(--ecm-font-sans) !important;
  background:
    radial-gradient(900px 320px at 80% 0%, rgba(232,216,168,0.18), transparent 70%),
    linear-gradient(160deg, var(--ecm-emerald) 0%, var(--ecm-emerald-dark) 55%, var(--ecm-emerald-deep) 100%) !important;
  border: 1px solid rgba(232,216,168,0.35) !important;
  border-radius: 14px !important;
  box-shadow: 0 16px 40px rgba(20,48,40,0.28) !important;
  color: #ffffff !important;
  position: relative;
  overflow: hidden;
}

body.ecm-themed .ecm-savedate-eyebrow {
  background: var(--ecm-sand) !important;
  color: var(--ecm-emerald-deep) !important;
  letter-spacing: 2px;
  font-weight: 700 !important;
}

body.ecm-themed .ecm-savedate-title {
  font-family: var(--ecm-font-serif) !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  letter-spacing: -0.01em;
}

body.ecm-themed .ecm-savedate-sub {
  color: var(--ecm-sand-light) !important;
}

body.ecm-themed .ecm-cta-primary {
  background: var(--ecm-coral) !important;
  color: #ffffff !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
  box-shadow: 0 8px 22px rgba(232,122,93,0.45) !important;
  transition: transform .15s ease, background .15s ease, box-shadow .15s ease !important;
}
body.ecm-themed .ecm-cta-primary:hover {
  background: var(--ecm-coral-dark) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 12px 28px rgba(232,122,93,0.55) !important;
}

body.ecm-themed .ecm-urgency {
  color: var(--ecm-sand) !important;
  font-weight: 600 !important;
}
body.ecm-themed .ecm-proof,
body.ecm-themed .ecm-secondary-label,
body.ecm-themed .ecm-form-note {
  color: rgba(244,236,209,0.78) !important;
}

body.ecm-themed .ecm-divider {
  background: rgba(232,216,168,0.22) !important;
}

body.ecm-themed .ecm-form input[type="email"] {
  background: rgba(255,255,255,0.96) !important;
  color: var(--ecm-emerald-deep) !important;
  border: 1px solid rgba(232,216,168,0.45) !important;
  border-radius: 6px !important;
}
body.ecm-themed .ecm-form input[type="email"]::placeholder {
  color: var(--ecm-text-muted) !important;
}
body.ecm-themed .ecm-form button {
  background: rgba(232,216,168,0.18) !important;
  color: #ffffff !important;
  border: 1px solid rgba(232,216,168,0.55) !important;
  border-radius: 6px !important;
  font-weight: 600 !important;
}
body.ecm-themed .ecm-form button:hover {
  background: rgba(232,216,168,0.30) !important;
}

/* ============================================================
   HOMEPAGE — broader Elementor button + heading harmonization
   Tone down the inherited Elementor primary/danger button colors
   so they read as coastal coral rather than red.
   ============================================================ */

body.ecm-themed .elementor-button-danger .elementor-button,
body.ecm-themed .elementor-button-primary .elementor-button {
  background-color: var(--ecm-coral) !important;
  color: #ffffff !important;
  border-radius: 6px !important;
}
body.ecm-themed .elementor-button-danger .elementor-button:hover,
body.ecm-themed .elementor-button-primary .elementor-button:hover {
  background-color: var(--ecm-coral-dark) !important;
}

/* ============================================================
   HOMEPAGE — REGISTER nav pill (top nav CTA)
   ============================================================ */
body.ecm-themed .ecm-nav-register .ecm-nav-pill {
  background: var(--ecm-coral) !important;
  color: #ffffff !important;
}
body.ecm-themed .ecm-nav-register a:hover .ecm-nav-pill {
  background: var(--ecm-coral-dark) !important;
}

/* ============================================================
   REGISTER PAGE — override navy/gold token usages
   The register page uses CSS vars; redefining --ecm-navy and
   --ecm-gold above maps them to coastal tones. Plus a few
   hardcoded hex overrides:
   ============================================================ */

body.ecm-themed .deadline-banner {
  background: linear-gradient(135deg, var(--ecm-emerald) 0%, var(--ecm-emerald-dark) 100%) !important;
  border: 1px solid var(--ecm-sand) !important;
}
body.ecm-themed .deadline-banner strong {
  color: var(--ecm-sand) !important;
}

/* ============================================================
   Subtle wave divider utility (between sections, optional)
   ============================================================ */
.ecm-wave-divider {
  display: block;
  width: 100%;
  height: 28px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 28' preserveAspectRatio='none'><path d='M0 14 Q150 0 300 14 T600 14 T900 14 T1200 14 V28 H0 Z' fill='%232d6a55' opacity='0.12'/></svg>");
  background-size: 1200px 28px;
  background-repeat: repeat-x;
  margin: 24px 0;
}

/* ============================================================
   Reduce motion preference
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  body.ecm-themed * {
    transition: none !important;
    animation: none !important;
  }
}