/* ==========================================================================
   Donovan Homes FL — MailerLite unified signup form: on-site presentation layer
   Target form: "Newsletter Signup — Unified"  <div class="ml-embedded" data-form="sSMnCs"></div>
   Scope: purely visual. Does NOT touch field names, stored values, groups,
   validation, reCAPTCHA, or MailerLite's submit logic.
   Depends on the site's existing tokens (--paper, --card, --ink, --body, --gulf …)
   and the fonts the site already loads (Playfair Display, Archivo).
   ========================================================================== */

/* --- Section wrapper Sonic places around the embed (optional but recommended) --- */
.dh-newsletter{background:var(--paper,#F8F3EA);padding:clamp(48px,7vw,96px) var(--pad,clamp(20px,5vw,64px))}
.dh-newsletter__inner{max-width:560px;margin:0 auto}
.dh-newsletter__eyebrow{font:600 11.5px/1 var(--sans,'Archivo','Helvetica Neue',Arial,sans-serif);letter-spacing:.26em;text-transform:uppercase;color:var(--gulf,#17698A);margin:0 0 18px}
.dh-newsletter__privacy{margin:14px 0 0;font:400 12px/1.7 var(--sans,'Archivo',Arial,sans-serif);color:var(--muted,#71808A);text-align:center}

/* --- Container / card ---------------------------------------------------
   Background is set by the M1 rule below (scoped per-mount); this rule only
   carries the border/shape properties shared by every mount. --- */
.dh-newsletter .ml-form-embedContainer .ml-form-embedWrapper{
  border:1px solid var(--line-soft,rgba(20,34,44,.09))!important;
  border-radius:2px!important;
  box-shadow:0 1px 0 rgba(20,34,44,.04);
  max-width:100%!important;
}
.dh-newsletter .ml-form-embedContainer .ml-form-embedBody{padding:32px 32px 28px!important}
@media (max-width:480px){.dh-newsletter .ml-form-embedContainer .ml-form-embedBody{padding:24px 20px 22px!important}}

/* --- Heading + supporting copy --- */
.dh-newsletter .ml-form-embedContent h4{
  font:500 clamp(26px,3.2vw,32px)/1.15 var(--serif,'Playfair Display',Georgia,serif)!important;
  color:var(--ink,#14222C)!important;letter-spacing:-.01em;margin:0 0 12px!important;text-wrap:balance;
}
.dh-newsletter .ml-form-embedContent p{
  font:400 15px/1.6 var(--sans,'Archivo','Helvetica Neue',Arial,sans-serif)!important;
  color:var(--body,#3D4C56)!important;margin:0 0 10px!important;
}
.dh-newsletter .ml-form-embedContent p strong{color:var(--ink,#14222C);font-weight:600}

/* --- Field labels + inputs --- */
.dh-newsletter .ml-form-fieldRow label:not(.custom-control-label){
  display:block;font:600 12px/1 var(--sans,'Archivo',Arial,sans-serif)!important;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink,#14222C)!important;margin:0 0 8px!important;
}
.dh-newsletter .ml-form-fieldRow input.form-control{
  font:400 16px/1.3 var(--sans,'Archivo',Arial,sans-serif)!important;color:var(--ink,#14222C)!important;
  background:#fff!important;border:1px solid var(--line,rgba(20,34,44,.16))!important;border-radius:2px!important;
  height:48px!important;padding:0 14px!important;box-shadow:none!important;transition:border-color .18s,box-shadow .18s;
}
.dh-newsletter .ml-form-fieldRow input.form-control:focus{border-color:var(--gulf,#17698A)!important;box-shadow:0 0 0 3px var(--sky-wash,#E2EDF3)!important;outline:none}
.dh-newsletter .ml-form-fieldRow{margin-bottom:18px!important}

/* --- Frequency, consent, reCAPTCHA (Fable spec 2026-09-11, implemented 2026-09-11) ---
   Stored values stay exactly "weekly" / "monthly", field name
   fields[newsletter_frequency], consent wording, required states, DOM order,
   and tab order are all untouched — presentation only. See
   /home/claude/site/fable-form/pkg/FABLE-SPEC-newsletter-form-frequency-consent-recaptcha-2026-09-11.md
   for the full rationale (MailerLite's ID-scoped !important stylesheet is why
   several declarations below need :is(#mlb2-45763836,[id^="mlb2-"]) to win). */

/* --- 1. Frequency: two selection cards ------------------------------------ */
.dh-newsletter .ml-form-embedBody{container-type:inline-size;container-name:dhform}

.dh-newsletter .ml-field-newsletter_frequency .custom-checkbox-radio-list{
  display:grid!important;grid-template-columns:1fr 1fr!important;gap:12px!important;
  margin:4px 0 0!important;padding:0!important;border:0!important;border-radius:0!important;
}
@media (max-width:479.98px){
  .dh-newsletter .ml-field-newsletter_frequency .custom-checkbox-radio-list{grid-template-columns:1fr!important;gap:10px!important}
}
.dh-newsletter .ml-field-newsletter_frequency .custom-radio{
  position:relative!important;display:block!important;margin:0!important;padding:0!important;min-height:0!important;
}
/* The <label> IS the card. The native radio sits inside it, so the whole card
   is the click/tap target through the existing for/id pairing. */
.dh-newsletter .ml-field-newsletter_frequency .custom-radio .custom-control-label{
  display:block!important;position:relative!important;box-sizing:border-box!important;width:100%!important;min-height:56px!important;
  margin:0!important;padding:14px 16px 13px 48px!important;
  background:var(--card,#FBF7EF)!important;border:1px solid var(--line,rgba(20,34,44,.16))!important;border-radius:2px!important;
  box-shadow:0 1px 0 rgba(20,34,44,.04)!important;
  font:600 15px/20px var(--sans,'Archivo',Arial,sans-serif)!important;color:var(--ink,#14222C)!important;
  text-transform:capitalize!important; /* "weekly" → "Weekly"; the value attribute is untouched */
  letter-spacing:0!important;text-align:left!important;cursor:pointer!important;
  transition:border-color .18s,background-color .18s,box-shadow .18s!important;
}
/* Remove MailerLite's drawn indicator (the floating circle). We show the real radio. */
.dh-newsletter .ml-field-newsletter_frequency .custom-radio .custom-control-label::before{content:none!important;display:none!important}
/* Native radio: visible, inside the card, on the title line. */
.dh-newsletter .ml-field-newsletter_frequency .custom-radio .custom-control-input{
  position:absolute!important;left:16px!important;top:15px!important;
  margin:0!important;padding:0!important;opacity:1!important;z-index:2!important;
  accent-color:var(--gulf,#17698A)!important;cursor:pointer!important;appearance:auto!important;-webkit-appearance:radio!important;
}
/* Size must out-rank MailerLite's "#mlb2-… .ml-form-fieldRow input{width:100%!important;max-width:100%!important}" */
.dh-newsletter :is(#mlb2-45763836,[id^="mlb2-"]) .ml-field-newsletter_frequency .custom-radio input.custom-control-input[type="radio"]{
  width:18px!important;max-width:18px!important;height:18px!important;padding:0!important;margin:0!important;
  box-sizing:border-box!important;background-color:transparent!important;border:0!important;
}
/* Supporting line — presentation only, keyed by the stored value. */
.dh-newsletter .ml-field-newsletter_frequency .custom-radio .custom-control-label::after{
  content:""!important;display:block!important;position:static!important;left:auto!important;top:auto!important;
  width:auto!important;height:auto!important;margin:2px 0 0!important;padding:0!important;background:none!important;border:0!important;
  font:400 13px/18px var(--sans,'Archivo',Arial,sans-serif)!important;color:var(--body,#3D4C56)!important;text-transform:none!important;
}
.dh-newsletter .ml-field-newsletter_frequency .custom-control-input[value="weekly"]+.custom-control-label::after{content:"Homes, events, and incentives."!important}
.dh-newsletter .ml-field-newsletter_frequency .custom-control-input[value="monthly"]+.custom-control-label::after{content:"One concise monthly roundup."!important}
/* Narrow form column (tablet: the card is ~306px wide): two columns, title-only. */
@container dhform (max-width:359px){
  .dh-newsletter .ml-field-newsletter_frequency .custom-radio .custom-control-label::after{content:none!important;display:none!important}
  .dh-newsletter .ml-field-newsletter_frequency .custom-radio .custom-control-label{padding:18px 16px 18px 48px!important}
  .dh-newsletter .ml-field-newsletter_frequency .custom-radio .custom-control-input{top:19px!important}
}
/* Phone: stacked, descriptions back, full-width tap targets. */
@media (max-width:479.98px){
  .dh-newsletter .ml-field-newsletter_frequency .custom-radio .custom-control-label::after{content:""!important;display:block!important}
  .dh-newsletter .ml-field-newsletter_frequency .custom-control-input[value="weekly"]+.custom-control-label::after{content:"Homes, events, and incentives."!important}
  .dh-newsletter .ml-field-newsletter_frequency .custom-control-input[value="monthly"]+.custom-control-label::after{content:"One concise monthly roundup."!important}
  .dh-newsletter .ml-field-newsletter_frequency .custom-radio .custom-control-label{padding:14px 16px 13px 48px!important}
  .dh-newsletter .ml-field-newsletter_frequency .custom-radio .custom-control-input{top:15px!important}
}
/* Selected */
.dh-newsletter .ml-field-newsletter_frequency .custom-control-input:checked+.custom-control-label{
  border-color:var(--gulf,#17698A)!important;background:var(--sky-wash,#E2EDF3)!important;
  box-shadow:inset 0 0 0 1px var(--gulf,#17698A)!important;
}
.dh-newsletter .ml-field-newsletter_frequency .custom-control-input:checked+.custom-control-label::after{color:var(--ink,#14222C)!important}
/* Hover (pointer devices only) */
@media (hover:hover){
  .dh-newsletter .ml-field-newsletter_frequency .custom-control-input:not(:checked)+.custom-control-label:hover{border-color:rgba(20,34,44,.34)!important}
}
/* Keyboard focus — same ring language as the text inputs (sky-wash halo + gulf line) */
.dh-newsletter .ml-field-newsletter_frequency .custom-control-input:focus{outline:none!important}
.dh-newsletter .ml-field-newsletter_frequency .custom-control-input:focus-visible+.custom-control-label{
  border-color:var(--gulf,#17698A)!important;box-shadow:0 0 0 3px var(--sky-wash,#E2EDF3),0 0 0 4px var(--gulf,#17698A)!important;
}
.dh-newsletter .ml-field-newsletter_frequency .custom-control-input:focus-visible:checked+.custom-control-label{
  box-shadow:inset 0 0 0 1px var(--gulf,#17698A),0 0 0 3px var(--sky-wash,#E2EDF3),0 0 0 4px var(--gulf,#17698A)!important;
}
/* Validation — MailerLite's webforms.min.js adds .ml-error to the failing
   .ml-validate-required element (here the .ml-field-group) on submit. */
.dh-newsletter .ml-field-newsletter_frequency.ml-error > label{color:#B4453E!important}
.dh-newsletter .ml-field-newsletter_frequency.ml-error .custom-control-label{border-color:#B4453E!important;box-shadow:none!important}
.dh-newsletter .ml-field-newsletter_frequency.ml-error .custom-checkbox-radio-list{border:0!important;padding:0!important;border-radius:0!important}

/* --- 2. Consent row --------------------------------------------------------- */
.dh-newsletter .ml-form-checkboxRow{
  float:none!important;clear:both!important;width:100%!important;box-sizing:border-box!important;margin:10px 0 20px!important;padding:0!important;
}
.dh-newsletter .ml-form-checkboxRow label.checkbox{
  display:grid!important;grid-template-columns:18px minmax(0,1fr)!important;column-gap:12px!important;align-items:start!important;
  position:relative!important;margin:0!important;padding:0!important;min-height:0!important;cursor:pointer!important;
}
/* Native checkbox, in flow, centred on the first text line (13px/20px text → 1px top offset). */
.dh-newsletter .ml-form-checkboxRow input[type="checkbox"]{
  position:static!important;display:block!important;width:18px!important;height:18px!important;min-width:18px!important;max-width:18px!important;
  margin:1px 0 0!important;padding:0!important;opacity:1!important;z-index:auto!important;box-sizing:border-box!important;
  accent-color:var(--gulf,#17698A)!important;cursor:pointer!important;appearance:auto!important;-webkit-appearance:checkbox!important;
}
.dh-newsletter .ml-form-checkboxRow input[type="checkbox"]:focus{outline:none!important}
.dh-newsletter .ml-form-checkboxRow input[type="checkbox"]:focus-visible{box-shadow:0 0 0 3px var(--sky-wash,#E2EDF3),0 0 0 4px var(--gulf,#17698A)!important;border-radius:2px!important}
/* Remove MailerLite's drawn box/tick. */
.dh-newsletter .ml-form-checkboxRow .label-description::before,
.dh-newsletter .ml-form-checkboxRow .label-description::after{content:none!important;display:none!important}
.dh-newsletter .ml-form-checkboxRow .label-description{
  position:static!important;margin:0!important;padding:0!important;
  font:400 13px/20px var(--sans,'Archivo',Arial,sans-serif)!important;color:var(--body,#3D4C56)!important;
}
.dh-newsletter .ml-form-checkboxRow .label-description p{margin:0!important;padding:0!important;font:inherit!important;color:inherit!important;line-height:inherit!important}
/* Validation: site red, not MailerLite's pure red (their rule is ID + !important, hence :is()) */
.dh-newsletter :is(#mlb2-45763836,[id^="mlb2-"]) .ml-form-embedBody .ml-form-checkboxRow.ml-error label.checkbox .label-description p,
.dh-newsletter :is(#mlb2-45763836,[id^="mlb2-"]) .ml-form-embedBody .ml-form-checkboxRow.ml-error label.checkbox .label-description p::first-letter{color:#B4453E!important}
.dh-newsletter .ml-form-checkboxRow.ml-error input[type="checkbox"]{box-shadow:0 0 0 1px #B4453E!important;border-radius:2px!important}

/* --- 3. reCAPTCHA (third-party iframe; only its surroundings are styled) ----
   Per David's explicit instruction, this never scales the widget — no
   transform anywhere in this block, at any width. */
.dh-newsletter .ml-form-recaptcha{
  float:none!important;clear:both!important;width:100%!important;box-sizing:border-box!important;
  margin:0 0 22px!important;padding:0!important;display:flex!important;justify-content:flex-start!important;
  max-width:100%!important;overflow:visible!important;
}
.dh-newsletter .ml-form-recaptcha .g-recaptcha{transform:none!important;max-width:100%!important}
.dh-newsletter .ml-form-recaptcha.ml-error iframe{border-color:#B4453E!important}
.dh-newsletter .ml-form-embedSubmit{clear:both!important}

/* --- Submit button (mirrors .btn.primary on the site) --- */
.dh-newsletter .ml-form-embedSubmit button.primary{
  display:block;width:100%;font:600 13px/1 var(--sans,'Archivo','Helvetica Neue',Arial,sans-serif)!important;
  letter-spacing:.06em;text-transform:uppercase;padding:17px 28px!important;border-radius:2px!important;
  background:var(--gulf,#17698A)!important;color:#fff!important;border:1px solid transparent!important;
  cursor:pointer;transition:background .18s;
}
.dh-newsletter .ml-form-embedSubmit button.primary:hover{background:var(--gulf-deep,#125571)!important}
.dh-newsletter .ml-form-embedSubmit button.primary:focus-visible{outline:none;box-shadow:0 0 0 3px var(--sky-wash,#E2EDF3)}

/* --- Success state --- */
.dh-newsletter .ml-form-successBody{background:var(--card,#FBF7EF)!important;padding:36px 32px!important}
.dh-newsletter .ml-form-successContent h4{font:500 28px/1.15 var(--serif,'Playfair Display',Georgia,serif)!important;color:var(--ink,#14222C)!important;margin:0 0 10px!important}
.dh-newsletter .ml-form-successContent p{font:400 15px/1.6 var(--sans,'Archivo',Arial,sans-serif)!important;color:var(--body,#3D4C56)!important}

/* --- Validation state (MailerLite adds .ml-error; keep it visible on cream) --- */
.dh-newsletter .ml-error input.form-control{border-color:#B4453E!important}
.dh-newsletter .ml-error .custom-control-label{border-color:#B4453E!important}


/* ==========================================================================
   Site additions — 2026-09-10 implementation of the approved Fable package
   (Donovan Newsletter Integration, Version 4). All rules below are scoped to
   .amp, .fw-band, .hp-news, .np-* and never restyle existing site elements.
   Every var() carries a fallback because a few legacy pages define a
   different token set.
   ========================================================================== */

/* --- Retained ampersand glyph (Section 5 §2.2) — applied only at the 37 "keep · glyph" instances --- */
.amp{font-family:'Playfair Display',Georgia,serif;font-style:italic;font-weight:500}
h4 .amp,.fh-card-title .amp{font-size:1.08em;line-height:1}

/* --- Sitewide footer invitation band (Section 1.C) — sits inside <footer> between .footer-grid and .footer-compliance --- */
.fw-band{max-width:1120px;margin:28px auto 0;background:var(--sky-wash,#E2EDF3);border-radius:2px;padding:22px 26px;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.fw-band .fw-text{flex:1 1 380px;min-width:0}
.fw-band .fw-title{margin:0;font:500 15.5px/1.35 'Playfair Display',Georgia,serif;color:#14222C}
.fw-band .fw-sub{margin:4px 0 0;font:400 13px/1.5 'Archivo','Helvetica Neue',Arial,sans-serif;color:#3D4C56;max-width:none}
.fw-band .fw-btn{flex:none;display:inline-block;background:transparent;border:1px solid #14222C;color:#14222C;font:600 12px/1 'Archivo','Helvetica Neue',Arial,sans-serif;letter-spacing:.06em;text-transform:uppercase;padding:13px 22px;border-radius:2px;text-decoration:none;white-space:nowrap;transition:background .18s,color .18s}
.fw-band .fw-btn:hover{background:#14222C;color:#F8F3EA}
.fw-band .fw-btn:focus-visible{outline:3px solid #A8D4EE;outline-offset:2px}
@media(max-width:560px){
  .fw-band{flex-direction:column;align-items:stretch;text-align:center;padding:20px}
  .fw-band .fw-btn{text-align:center}
}

/* --- Homepage newsletter section (Section 1.B) — between #sold and #ig-strip --- */
.hp-news{background:var(--card,#FBF7EF);padding:clamp(56px,7vw,88px) var(--pad,clamp(20px,5vw,64px));text-align:center;border-top:1px solid var(--line-soft,rgba(20,34,44,.09))}
.hp-news-inner{max-width:640px;margin:0 auto}
.hp-news .hp-news-eb{display:block;font:600 11px/1 'Archivo','Helvetica Neue',Arial,sans-serif;letter-spacing:.18em;text-transform:uppercase;color:var(--gulf,#17698A);margin:0 0 16px}
.hp-news h2{font:500 clamp(26px,3.4vw,34px)/1.18 'Playfair Display',Georgia,serif;color:var(--ink,#14222C);margin:0 0 14px;text-wrap:balance}
.hp-news .hp-news-lead{max-width:52ch;margin:0 auto 28px;font:400 15.5px/1.65 'Archivo','Helvetica Neue',Arial,sans-serif;color:var(--body,#3D4C56)}
.hp-news .dh-newsletter{background:transparent;padding:0;text-align:left}
.hp-news .dh-newsletter__inner{max-width:480px}

/* --- Dedicated newsletter page (Section 1.A) --- */
.np-hero{background:var(--ink2,#1E2B35);padding:calc(76px + clamp(48px,7vw,88px)) var(--pad,clamp(20px,5vw,64px)) clamp(40px,6vw,72px)}
.np-hero-inner{max-width:980px;margin:0 auto}
.np-hero .np-eb{display:block;font:600 11px/1 'Archivo','Helvetica Neue',Arial,sans-serif;letter-spacing:.18em;text-transform:uppercase;color:#A8D4EE;margin:0 0 18px}
.np-hero h1{font:500 clamp(30px,4.4vw,46px)/1.12 'Playfair Display',Georgia,serif;color:#fff;margin:0 0 16px;text-wrap:balance}
.np-hero .np-stand{font:400 clamp(15.5px,1.6vw,17px)/1.6 'Archivo','Helvetica Neue',Arial,sans-serif;color:#EDE6D8;max-width:56ch;margin:0}
.np-body{background:var(--card,#FBF7EF);padding:clamp(40px,6vw,64px) var(--pad,clamp(20px,5vw,64px))}
.np-grid{display:grid;grid-template-columns:1fr;gap:40px;max-width:980px;margin:0 auto;align-items:start}
/* Two-column layout starts at 900px; at 900px and below the form sits full-width
   beneath the newsletter copy (David's decision, 2026-09-11) — the reCAPTCHA
   never scales, so the column needs enough room for the 304px widget instead. */
@media(min-width:900px){.np-grid{grid-template-columns:1fr .92fr}}
@media(min-width:761px) and (max-width:899.98px){.np-grid{grid-template-columns:1fr}.np-form{max-width:560px}}
.np-perks .np-eb{display:block;font:600 11px/1 'Archivo','Helvetica Neue',Arial,sans-serif;letter-spacing:.18em;text-transform:uppercase;color:var(--gulf,#17698A);margin:0 0 16px}
.np-perk{padding:16px 0;border-bottom:1px solid var(--line-soft,rgba(20,34,44,.09))}
.np-perk:first-of-type{padding-top:0}
.np-perk h2{font:600 15px/1.3 'Archivo','Helvetica Neue',Arial,sans-serif;color:var(--ink,#14222C);margin:0 0 6px}
.np-perk p{margin:0;font:400 14.5px/1.6 'Archivo','Helvetica Neue',Arial,sans-serif;color:var(--body,#3D4C56)}
.np-close{margin-top:18px;padding-top:18px;border-top:1px solid var(--line,rgba(20,34,44,.16))}
.np-close p{font:italic 400 15.5px/1.6 'Playfair Display',Georgia,serif;color:var(--ink,#14222C);margin:0}
.np-form .dh-newsletter{background:transparent;padding:0}
.np-form .dh-newsletter__inner{max-width:none}

/* --- Name row layout (design review §5.2) ------------------------------------
   MailerLite's own field order was corrected at the source on 2026-09-11
   (First name → Last name → Email → Frequency → Consent → reCAPTCHA →
   Subscribe), so DOM order, Tab order, and visual order now all agree.
   This grid only lets First/Last sit side by side at ≥560px — no `order`
   override remains. --- */
.dh-newsletter .ml-form-formContent{display:grid;grid-template-columns:1fr;gap:0 12px}
.dh-newsletter .ml-form-fieldRow{min-width:0}
@media (min-width:560px){
  .dh-newsletter .ml-form-formContent{grid-template-columns:1fr 1fr}
  .dh-newsletter .ml-form-fieldRow:has(.ml-field-name),.dh-newsletter .ml-form-fieldRow:has(.ml-field-last_name){grid-column:span 1}
  .dh-newsletter .ml-form-fieldRow:has(.ml-field-email),.dh-newsletter .ml-form-fieldRow:has(.ml-field-newsletter_frequency){grid-column:1 / -1}
}
@media (max-width:559.98px){.dh-newsletter .ml-form-fieldRow{grid-column:1 / -1}}

/* --- M1: form card ground (Fable final review, corrected 2026-09-11) ---------
   The dedicated page and homepage mounts sit the form card on --paper, not
   the surrounding --card section, to restore the card-vs-ground contrast in
   the approved mockup. Must match the real MailerLite wrapper hierarchy
   (div.ml-form-embedContainer > div.ml-form-align-center > div.ml-form-embedWrapper)
   so this out-specifies the base container rule above instead of losing to it. --- */
.np-form .dh-newsletter .ml-form-embedContainer .ml-form-embedWrapper,
.hp-news .dh-newsletter .ml-form-embedContainer .ml-form-embedWrapper{background:var(--paper,#F8F3EA)!important}

/* --- M3: suppress MailerLite's in-card heading on the homepage mount only ----
   The homepage section already carries its own H2 + lead; MailerLite's
   internal "Stay connected to Southwest Florida." heading/paragraph would
   duplicate it. The dedicated newsletter page keeps its embed heading. --- */
.hp-news .ml-form-embedContent{display:none}