/*
 * Elementor-canvas compatibility overrides (plain CSS, no Tailwind directives).
 * Enqueued AFTER the Tailwind bundle, ONLY when Elementor is active
 * (see inc/elementor/class-elementor-compat.php).
 *
 * Use this for small, deliberate bridges between the design tokens and
 * Elementor's canvas — e.g. making default Elementor headings inherit the
 * brand font. Keep it minimal; do not rebuild Elementor's styling here.
 */

.elementor-widget-heading .elementor-heading-title {
  font-family: var(--font-heading);
}

/* Map Elementor's default container width to the theme container at setup.
   Adjust per project in Elementor > Site Settings as needed. */
:root {
  --e-global-typography-primary-font-family: var(--font-heading);
  --e-global-typography-text-font-family: var(--font-sans);
}

/* ------------------------------------------------------------------------
 * One type scale for Elementor headings (spacing audit, Sep 2026).
 *
 * Heading widgets used to carry their own "36px / 800" overrides and the
 * kit pinned h1/h2 line-heights in rem, so sizes drifted page to page and
 * mobile titles double-spaced. The kit no longer sets sizes or line-heights;
 * headings inherit these by tag, matching the theme's own scale
 * (.heading-xl, section H2s, card H3s). Per-widget colour still applies.
 * ---------------------------------------------------------------------- */
.elementor-widget-heading .elementor-heading-title {
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.15;
  text-wrap: balance;
}
.elementor-widget-heading h1.elementor-heading-title { font-size: 2.25rem; line-height: 1.1; }   /* 36 → 48 */
.elementor-widget-heading h2.elementor-heading-title { font-size: 1.875rem; }                     /* 30 → 36 */
.elementor-widget-heading h3.elementor-heading-title { font-size: 1.25rem; line-height: 1.3; font-weight: 700; }  /* 20 → 22 */
.elementor-widget-heading h4.elementor-heading-title { font-size: 1.125rem; line-height: 1.35; font-weight: 700; }
.elementor-widget-heading p.elementor-heading-title  { font-size: 0.8125rem; line-height: 1.5; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; } /* eyebrow */
@media (min-width: 768px) {
  .elementor-widget-heading h1.elementor-heading-title { font-size: 3rem; }
  .elementor-widget-heading h2.elementor-heading-title { font-size: 2.25rem; }
  .elementor-widget-heading h3.elementor-heading-title { font-size: 1.375rem; }
}

/* Heading → body → button rhythm inside Elementor containers: one margin
   below a heading, none above body copy, 32px before a button row. */
.elementor-widget-heading + .elementor-widget-text-editor { margin-top: -4px; }
.elementor-widget-text-editor + .elementor-widget-button { margin-top: 12px; }
.elementor-widget-text-editor p:last-child { margin-bottom: 0; }

/* Elementor Pro form + text widgets set to "inline" width shrink to their
   content; keep them full width so forms don't render as a narrow strip. */
@media (max-width: 767px) {
  .elementor-widget-form.elementor-widget__width-initial,
  .elementor-widget-text-editor.elementor-widget__width-initial { width: 100%; max-width: 100%; }
}

/* Elementor's frontend CSS sets `.elementor img { height: auto }`, which outranks
   Tailwind's single-class utilities (0,1,1 vs 0,1,0). Inside the Elementor canvas
   the theme widgets' images therefore fell back to their aspect ratio: the hero
   photo only covered the top 260-290px of a 560px hero on phones. Restore the
   sizes the widgets set. */
.elementor img.size-full { height: 100%; }
.elementor img.h-\[380px\] { height: 380px; }
.elementor img.size-24 { height: 6rem; }
.elementor img.size-11, .elementor img.h-11 { height: 2.75rem; }

/* ------------------------------------------------------------------------
 * Elementor's frontend CSS resets every image inside its canvas:
 *   .elementor img { border:none; border-radius:0; box-shadow:none; height:auto }
 * That selector (0,1,1) outranks a single Tailwind utility (0,1,0), so the
 * theme widgets dropped their rounded corners and lift shadow wherever they
 * sit on an Elementor page — the mission photo on Speech Contest, Service &
 * Impact, Membership and the homepage. Give the utilities back.
 * ---------------------------------------------------------------------- */
.elementor img.rounded-full { border-radius: 9999px; }
.elementor img.rounded-3xl  { border-radius: 1.5rem; }
.elementor img.rounded-2xl  { border-radius: 1rem; }
.elementor img.rounded-xl   { border-radius: 0.75rem; }
.elementor img.shadow-lift  { box-shadow: 0 2px 4px rgb(14 31 66 / 0.06), 0 16px 40px -12px rgb(14 31 66 / 0.22); }
.elementor img.shadow-card  { box-shadow: 0 1px 2px rgb(14 31 66 / 0.04), 0 8px 24px -8px rgb(14 31 66 / 0.12); }

/* A decorative panel — an Elementor container carrying a background photo and
 * no content of its own — fills its row instead of floating in the middle of
 * it. Without this, a panel set to "align centre" in the builder leaves a band
 * of page colour above and below the photo that reads as a border
 * (Service & Impact, "Join Clubs Across the District in Service"). */
.e-con.e-flex > .e-con:not(:has(*)) { align-self: stretch; }

/* A photo placed in body copy gets the site's photo corner. The theme rule in
 * app.css loses to Elementor's `.elementor img` reset when the image is an
 * Elementor widget inside the content, so it is restated here, where this
 * stylesheet loads after Elementor's. An explicit radius set on the widget in
 * the builder still wins, because Elementor writes that per element. */
.prose-theme .elementor img,
.prose-theme img { border-radius: 1.5rem; }