/* ============================================================
   MB Spectrums Elementor — base layer
   Shared design tokens, typography, buttons, section base.
   Loaded by every Spectrums widget (as a dependency).
   ============================================================ */
:root{
  /* ============================================================
     LIGHT THEME — warm cream + gold (replaces the deep-green scheme).

     Token NAMES are deliberately unchanged so every existing rule in every
     widget stylesheet keeps working untouched; only the VALUES moved from
     dark green to light cream. The --green-* names are therefore historical:
     they now carry the light surface ramp (900 = lightest page surface,
     800 = the sand band), not greens. Anything that reads "green" in a
     selector name is simply "the formerly-dark surface".
     ============================================================ */

  /* Masthead + top bar */
  --header-bg:#F3EEE3;
  --header-bg-2:#EDE6D8;

  /* Surface ramp (was the dark green ramp) */
  --green-900:#FBF9F4;   /* hero, page header, footer */
  --green-850:#F6F2E9;
  --green-800:#F3EEE3;   /* CTA band, feature card, active filter */
  --green-700:#8A6D2E;   /* accent used as a line/text colour, not a surface */

  /* Gold branding. On light surfaces the "light" gold has to go DARKER than
     the base gold, otherwise it disappears — the scale is inverted from the
     dark theme on purpose. */
  --gold:#B4893A;
  --gold-light:#8A6D2E;
  --gold-deep:#7A5F28;

  --cream:#FAF8F2;       /* still a light SURFACE token — never text */
  --cream-2:#FFFFFF;
  --ink:#241F18;
  --muted:#736C60;

  /* Text sitting on the light "deep" surfaces (hero / page header / footer /
     CTA / contact). These replace the old cream-on-dark rgba values. */
  --on-deep:#241F18;
  --on-deep-soft:rgba(36,31,24,.78);
  --on-deep-faint:rgba(36,31,24,.6);
  --on-deep-tint:rgba(36,31,24,.04);   /* subtle fill on a light surface */

  --line:rgba(36,31,24,.12);
  --line-gold:rgba(180,137,58,.4);
  --maxw:1180px;
  --radius:4px;
}

/* Scoped reset — replicates the original global *{margin:0;padding:0} but only
   inside Spectrums widget roots, so the plugin never restyles the rest of the
   theme. Placed first so later rules (.wrap, .btn, chunk paddings) override it. */
.topbar,.topbar *,
.site-header,.site-header *,
.pagehead,.pagehead *,
.cta-band,.cta-band *,
.footer,.footer *,
.hero,.hero *,
.block,.block *,
.spectrums-section,.spectrums-section *{box-sizing:border-box;margin:0;padding:0}

.topbar,.site-header,.pagehead,.cta-band,.footer,.hero,.block,
.spectrums-section{
  font-family:"Inter",system-ui,sans-serif;
  color:var(--ink);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

.topbar img,.site-header img,.pagehead img,.cta-band img,.footer img,
.hero img,.block img,.spectrums-section img{max-width:100%;display:block}

.topbar a,.site-header a,.pagehead a,.cta-band a,.footer a,
.hero a,.block a,.spectrums-section a{color:inherit;text-decoration:none}

.topbar h1,.topbar h2,.topbar h3,
.site-header h1,.site-header h2,.site-header h3,
.pagehead h1,.pagehead h2,.pagehead h3,
.cta-band h1,.cta-band h2,.cta-band h3,
.footer h1,.footer h2,.footer h3,
.hero h1,.hero h2,.hero h3,
.block h1,.block h2,.block h3,
.spectrums-section h1,.spectrums-section h2,.spectrums-section h3,
.serif{font-family:"Cormorant Garamond",serif;font-weight:600;line-height:1.08;letter-spacing:.005em}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.eyebrow{font-size:.72rem;letter-spacing:.28em;text-transform:uppercase;font-weight:600;color:var(--gold-deep)}
/* ".on-dark" is historical — those surfaces are light now, so the eyebrow
   uses the same deep gold as everywhere else. */
.eyebrow.on-dark{color:var(--gold-deep)}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:.55rem;font-size:.82rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;padding:15px 30px;border-radius:var(--radius);border:1px solid transparent;cursor:pointer;transition:.25s ease}
/* Gold fill carries dark ink rather than the old cream: on a light theme the
   gold is no longer surrounded by dark, so cream-on-gold fails contrast. */
.btn-gold{background:var(--gold);color:var(--ink)}
.btn-gold:hover{background:var(--gold-light);color:#FFF;transform:translateY(-2px)}
.btn-ghost{background:transparent;color:var(--on-deep);border-color:var(--gold)}
.btn-ghost:hover{border-color:var(--gold-light);color:var(--gold-light);background:rgba(180,137,58,.06)}
.btn-dark{background:var(--gold-deep);color:#FFF}
.btn-dark:hover{background:var(--gold-light)}
.btn-outline-dark{background:transparent;color:var(--gold-deep);border-color:var(--gold)}
.btn-outline-dark:hover{background:var(--gold-deep);color:#FFF}

/* section base */
.block{padding:96px 0}
.block-cream{background:var(--cream)}
.block-white{background:var(--cream-2)}
.block-green{background:var(--green-850);color:var(--on-deep)}
.sec-head{max-width:640px;margin-bottom:48px}
.sec-head.center{margin-left:auto;margin-right:auto;text-align:center}
.sec-head h2{font-size:clamp(2rem,4.2vw,3rem);margin:14px 0 14px}
.sec-head p{color:var(--muted);font-size:1.04rem}
.block-green .sec-head p{color:var(--on-deep-soft)}

/* shared small utilities */
.form-note{font-size:.78rem;color:var(--muted);margin-top:14px;text-align:center}

/* reveal animation */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}

/* shared slats overlay (hero / pagehead / cta) */
.slats{position:absolute;inset:0;pointer-events:none}

@media(max-width:680px){
  .block{padding:68px 0}
}
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none}
}
:focus-visible{outline:2px solid var(--gold-light);outline-offset:3px}