/* ============================================================================
   NutritiousDr — GLOBAL DESIGN SYSTEM (single source of truth)
   Loaded site-wide, late (after Elementor per-page CSS) so it governs the
   native widgets. Design tokens + one card/button/section/type system.
   Creative-Director spec — brand v2 (Playfair Display + Lato, warm coastal).
   ========================================================================== */
:root{
  /* palette (brand v2) */
  --cream:#F8F6F3; --blush:#F2E7E2; --sand:#E8DCCF; --beige-gray:#EFEBE4;
  --line:#EADFCF; --ink:#374151; --ink-soft:#5B6472;
  --sage:#5F8F89; --sage-deep:#46706A; --rose:#D9A38F;
  --coral:#C5512F; --coral-bloom:#E76F51; --aqua:#6FC5C5; --medblue:#5B8DB8; --marigold:#E9C46A;
  /* spacing scale (8px base) */
  --s-1:8px; --s-2:16px; --s-3:24px; --s-4:32px; --s-5:48px; --s-6:64px; --s-7:80px; --s-8:96px; --s-9:120px;
  /* section rhythm */
  --sec-y:clamp(44px,4.6vw,68px);
  /* container */
  --container:1200px;
  /* radius */
  --r-sm:12px; --r:20px; --r-lg:28px; --r-pill:999px;
  /* shadow — ONE family, two depths */
  --shadow-sm:0 6px 22px -14px rgba(70,112,106,.30);
  --shadow:0 22px 52px -30px rgba(70,112,106,.42);
}

/* ---- CONTAINER: unify content width ---- */
.elementor-section.elementor-section-boxed>.elementor-container,
.e-con.e-con-boxed>.e-con-inner,
.e-con>.e-con-inner{ max-width:var(--container); }

/* ---- SECTION RHYTHM: consistent vertical spacing (top-level containers) ---- */
body .elementor > .e-con.e-parent{ padding-top:var(--sec-y); padding-bottom:var(--sec-y); }
body .elementor > .e-con.e-parent.ndr-tight{ padding-top:clamp(40px,5vw,64px); padding-bottom:clamp(40px,5vw,64px); }
/* header/footer chrome are Theme Builder templates — they must NOT inherit the page
   section rhythm (that padding was inflating the header to ~285px). Their own template
   container padding governs instead. */
body .elementor-location-header .e-con.e-parent,
body header.elementor-location-header .e-con.e-parent{ padding-top:0 !important; padding-bottom:0 !important; }
/* decorative shape-divider SVGs render at calc(100% + 1.3px) — clip so they never
   create a sub-pixel horizontal page-scroll. clip (not hidden) keeps sticky/menus intact. */
body .elementor .e-con.e-parent{ overflow-x: clip; }

/* ---- TYPOGRAPHY: one scale, stronger headings, larger body ---- */
.elementor-widget-heading h1{ font-family:"Playfair Display",Georgia,serif!important; font-weight:600!important;
  font-size:clamp(2.9rem,5.2vw,4.3rem)!important; line-height:1.06!important; letter-spacing:-.018em!important; color:var(--ink); }
.elementor-widget-heading h2{ font-family:"Playfair Display",Georgia,serif!important; font-weight:600!important;
  font-size:clamp(2rem,3.4vw,2.9rem)!important; line-height:1.12!important; letter-spacing:-.01em!important; }
.elementor-widget-heading h3{ font-family:"Playfair Display",Georgia,serif!important; font-weight:600!important;
  font-size:clamp(1.3rem,1.9vw,1.6rem)!important; line-height:1.2!important; }
.elementor-widget-heading h4{ font-family:"Lato",sans-serif!important; font-weight:700!important; font-size:1.05rem!important; }
/* body */
.elementor-widget-text-editor{ font-size:1.075rem; line-height:1.72; color:var(--ink-soft); }
.elementor-widget-text-editor.ndr-lead{ font-size:1.24rem; line-height:1.55; color:var(--ink); }
/* kicker/eyebrow (heading widget rendered as <p>) */
.elementor-widget-heading p{ font-family:"Lato",sans-serif; font-weight:700; font-size:.8rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--sage-deep); }

/* ---- BUTTONS: one system, emphatic primary ---- */
.elementor-button{ border-radius:var(--r-pill)!important; font-family:"Lato",sans-serif!important; font-weight:700!important;
  font-size:1rem!important; letter-spacing:.01em; padding:16px 34px!important; transition:transform .18s ease, box-shadow .18s ease, background-color .18s ease;
  /* touch target >= 44px (frontend-qa: tap-target-small) */
  min-height:44px; display:inline-flex; align-items:center; justify-content:center; }
.elementor-button:hover{ transform:translateY(-2px); }
/* primary = coral, add presence */
.elementor-button[class*="primary"], .elementor-widget-button .elementor-button{ box-shadow:0 10px 24px -12px rgba(197,81,47,.55); }

/* ---- CARD SYSTEM: one family (padding/radius/shadow/border) ---- */
.ndr-card, .e-con.ndr-card{ background:#fff; border:1px solid var(--line); border-radius:var(--r);
  padding:clamp(24px,2.4vw,32px); box-shadow:var(--shadow-sm); }
/* card photo header — one ratio */
.ndr-card .elementor-widget-image img, .ndr-card-photo img{ border-radius:var(--r-sm); aspect-ratio:3/2; object-fit:cover; width:100%; }

/* image ratios */
.ndr-ratio-portrait img{ aspect-ratio:3/4; object-fit:cover; width:100%; border-radius:var(--r); }

/* ---- links ---- */
.elementor-widget-text-editor a{ color:var(--sage-deep); text-decoration:underline; text-underline-offset:2px; }
.elementor-widget-text-editor a:hover{ color:var(--coral); }

/* ---- frontend-qa fixes ---- */
/* shape-divider SVGs default to calc(100% + 1.3px) -> reported wider-than-viewport; pin to 100% */
body .elementor-shape svg{ width:100% !important; }
/* form fields >=16px so iOS doesn't zoom the page on focus (frontend-qa: input-font-small) */
.elementor-field-group input:not([type=checkbox]):not([type=radio]),
.elementor-field-group select,
.elementor-field-group textarea,
.elementor-field-type-text input, .elementor-field-type-email input, .elementor-field-type-tel input,
.elementor-field-textual{ font-size:16px !important; }
/* form field + submit min touch height */
.elementor-field-group .elementor-field{ min-height:44px; }
/* progress-bar label was 11px (frontend-qa: font-too-small) */
.elementor-progress-text, .elementor-progress-bar .elementor-progress-text{ font-size:12px !important; }

/* ============================================================================
   QA PASS 2 fixes (2026-07-17) — systemic issues from full-site visual QA
   ========================================================================== */

/* ---- ACCORDION (legacy .elementor-tab-title): icon detached to top-left ----
   Make the tab title a centered flex row; inline the +/- icon so it aligns
   with the (possibly multi-line) question text instead of floating top-left. */
.elementor-accordion .elementor-tab-title{
  display:flex !important; align-items:center; gap:12px;
  padding:20px 26px !important; }
.elementor-accordion .elementor-tab-title .elementor-accordion-icon{
  float:none !important; margin:0 !important; padding:0 !important;
  width:auto !important; display:inline-flex; align-items:center; flex:0 0 auto; order:2; margin-left:auto !important; }
.elementor-accordion .elementor-tab-title .elementor-accordion-icon svg{ width:16px; height:16px; }
/* FAQ item = card family (20px radius, line border) not the default 8-10px */
.elementor-accordion .elementor-accordion-item{
  border:1px solid var(--line) !important; border-radius:var(--r) !important;
  overflow:hidden; margin-bottom:12px; background:#fff; }
.elementor-accordion .elementor-tab-content{ padding:6px 26px 24px !important; border:0 !important; }

/* ---- FOOTER (global Theme Builder template): contrast + palette ----
   Contact + legal links were sage #46706A on the navy footer (~2.3:1).
   Lighten to a soft light-sage for readable contrast; hover coral. */
.elementor-location-footer a, [data-elementor-type="footer"] a{ color:#C9D6D2 !important; }
.elementor-location-footer a:hover, [data-elementor-type="footer"] a:hover{ color:var(--coral-bloom) !important; }
.elementor-location-footer h2, .elementor-location-footer h3,
[data-elementor-type="footer"] h2, [data-elementor-type="footer"] h3{
  color:#FFFFFF !important; font-size:1.2rem !important; line-height:1.3 !important;
  letter-spacing:normal !important; margin-bottom:.4rem; }
/* social icons: unify to soft cream, drop platform brand fills; hover coral */
.elementor-location-footer .elementor-social-icon,
[data-elementor-type="footer"] .elementor-social-icon{ background-color:transparent !important; }
.elementor-location-footer .elementor-social-icon i,
.elementor-location-footer .elementor-social-icon svg,
[data-elementor-type="footer"] .elementor-social-icon i,
[data-elementor-type="footer"] .elementor-social-icon svg{ color:#E7E0D6 !important; fill:#E7E0D6 !important; }
.elementor-location-footer .elementor-social-icon:hover,
[data-elementor-type="footer"] .elementor-social-icon:hover{ background-color:transparent !important; }
.elementor-location-footer .elementor-social-icon:hover i,
.elementor-location-footer .elementor-social-icon:hover svg{ color:var(--coral-bloom) !important; fill:var(--coral-bloom) !important; }

/* (2026-07-23) Body/FAQ measure caps removed — client wants normal paragraph
   text to display default full width, not clamped to a ~66-72ch measure. */

/* ---- CHECKLIST / narrow blocks in sand bands: center within the band ----
   Inner containers capped narrower than the band were flex-start (left).
   Any boxed inner container with a max-width below full centers itself. */
.e-con.e-parent.ndr-center-block > .e-con-inner,
.e-con.ndr-center-block{ margin-inline:auto !important; align-self:center !important; }

/* ---- inline name-links inside checklist ITEM TEXT must not break to their own
   line and must use the palette. Scope to links INSIDE the item text only —
   NOT the whole-item anchors used by the footer nav (that broke footer layout). */
.elementor-widget-icon-list .elementor-icon-list-text a,
.elementor-widget-text-editor li a{
  display:inline !important; color:var(--coral) !important; white-space:normal; }

/* (2026-07-23) Removed the site-wide text-editor container measure cap
   (max-width:68ch) + its auto-centering. Body copy now renders full width by
   default. Per-page width is governed by the section container + any .ndr /
   .measure / .grid-narrow scoped rules, not a global body-text clamp. */

/* ---- contact "Write to us directly": short form vs tall photo column looked
   lopsided; vertically center the row so the form aligns to the photo. */
.elementor-element-9cc67b2{ align-items:center !important; }

/* ---- EYEBROW MOTIF: centered section kickers get "— LABEL —" side rules ---- */
.elementor-widget.ndr-eyebrow{ text-align:center; }
.elementor-widget.ndr-eyebrow .elementor-heading-title{
  display:inline-flex; align-items:center; gap:14px;
  letter-spacing:.2em; text-transform:uppercase;
}
.elementor-widget.ndr-eyebrow .elementor-heading-title::before,
.elementor-widget.ndr-eyebrow .elementor-heading-title::after{
  content:""; display:inline-block; width:26px; height:1px;
  background:currentColor; opacity:.5;
}

/* --- card-image alignment polish (2026-07-19): enforce uniform aspect ratios so
   headings/buttons line up across cards. --- */
/* Journal blog cards (section b41871c) — landscape 4:3.
   2026-07-23: b41871c is the HOME (437) journal row only. The /journal archive (page 16)
   renders the same card markup under different element IDs, so it never inherited this
   rule and its images fell back to their intrinsic ratios — measured 188 / 222 / 251px
   tall at an identical 334px width, which staggered the eyebrow and title baselines
   across the row. The second selector is structural (any image inside a container-link
   pointing at /article/), so home, /journal and any future card row stay locked to the
   same 4:3 without chasing per-page element IDs. */
.elementor-element-b41871c .elementor-widget-image img,
a.e-con[href*="/article/"] .elementor-widget-image img{
  aspect-ratio:4/3 !important; object-fit:cover !important; width:100% !important; height:auto !important;
}
/* Program cards (section e6478a8) — portrait 4:5 (people-forward imagery) */
.elementor-element-e6478a8 .elementor-widget-image img{
  aspect-ratio:4/5 !important; object-fit:cover !important; object-position:center 22% !important; width:100% !important; height:auto !important;
}

/* S5 "This is different": vertically center the left heading block against the 4 cards */
.elementor-element-f4f1066{ justify-content:center !important; }