/*
Theme Name:        TSGA Hello Child
Theme URI:         https://tsgalliance.org
Description:       Hello Elementor child theme for the Turner Syndrome Global Alliance website redesign. Built for use with Elementor Pro. All visual design is managed through Elementor Global Site Settings and Theme Builder. This file provides the theme registration, TSGA CSS custom properties (design tokens), and minimal baseline resets only.
Author:            SparkStory Marketing
Author URI:        https://tsgalliance.org
Template:          hello-elementor
Version:           1.9.2
Requires at least: 6.4
Tested up to:      6.7
Requires PHP:      8.0
License:           GNU General Public License v2 or later
License URI:       https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:       tsga-hello-child
Tags:              elementor, child-theme, nonprofit, healthcare
*/

/* ==========================================================================
   TSGA DESIGN TOKENS — CSS Custom Properties
   These mirror the Elementor Global Colors exactly.
   Reference these variables in any custom CSS added later.
   DO NOT override Elementor widget styles here — use Elementor's
   Global Site Settings, Theme Style, and per-widget controls instead.
   ========================================================================== */

:root {
    /* --- Purple Scale --- */
    --tsga-purple-900:  #2D1558; /* Deepest purple — hero bg, footer bg, dark sections */
    --tsga-purple-800:  #3D1A6E; /* Dark purple — H2 headings on dark bg              */
    --tsga-purple-700:  #5B2D8E; /* PRIMARY — buttons, active nav, links, accents      */
    --tsga-purple-600:  #7040A8; /* Medium purple — eyebrow labels, icon fills         */
    --tsga-purple-500:  #8B5CC4; /* Mid purple — secondary accents, hover states       */
    --tsga-purple-200:  #D8C8F0; /* Light purple — borders, dividers                   */
    --tsga-purple-100:  #EDE6F8; /* Very light — icon bg squares, card fills           */
    --tsga-purple-50:   #F7F4FC; /* Near-white — page backgrounds, section tints       */

    /* --- Accent --- */
    --tsga-pink:        #C2185B; /* SPARINGLY — italic serif accent in hero headings   */
    --tsga-pink-light:  #FCE4EF; /* Light pink — used in hero heading italic em only   */

    /* --- Neutrals --- */
    --tsga-bg:          #FAFAF8; /* Body background — off-white                        */
    --tsga-white:       #FFFFFF; /* Card surfaces, nav bg, form fields                 */
    --tsga-text:        #3D2B6B; /* Body text on light backgrounds                     */
    --tsga-text-dark:   #1A0A2E; /* High-contrast headings on white                    */
    --tsga-text-light:  #FFFFFF; /* Text on dark purple backgrounds                    */
    --tsga-text-muted:  #7A6898; /* Captions, metadata, placeholder text               */
    --tsga-border:      #E0D6F0; /* Default border color                               */

    /* --- Functional Aliases --- */
    --tsga-color-primary:       var(--tsga-purple-700);
    --tsga-color-primary-dark:  var(--tsga-purple-900);
    --tsga-color-heading:       var(--tsga-purple-900);
    --tsga-color-accent:        var(--tsga-pink);

    /* --- Spacing (mirrors Elementor Site Settings > Layout) --- */
    --tsga-section-padding-y:   80px;
    --tsga-section-padding-x:   20px;
    --tsga-card-radius:         12px;
    --tsga-button-radius:       24px;  /* Pill buttons */
    --tsga-container-max-width: 1200px;

    /* --- Typography --- */
    /* Fraunces: display serif for H1-H3 and italic accent text */
    --tsga-font-heading:        'Fraunces', Georgia, 'Times New Roman', serif;
    /* Inter: clean sans-serif for body, UI, labels, nav */
    --tsga-font-body:           'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --tsga-line-height-body:    1.72;
    --tsga-line-height-heading: 1.15;
    --tsga-letter-spacing-eyebrow: 0.09em;
}

/* ==========================================================================
   BASELINE RESETS
   Minimal resets that support Elementor's layout system.
   Do NOT add layout or visual styles here — use Elementor controls.
   ========================================================================== */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    background-color: var(--tsga-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Ensure Elementor full-width pages have no unintended body margin */
body.elementor-page {
    margin: 0;
}

/* ==========================================================================
   FRAUNCES ITALIC ACCENT IN HEADINGS
   The mockup uses Fraunces italic mid-sentence for visual emphasis
   (e.g., &quot;reshaping <em>the future</em> of Turner syndrome care.&quot;).
   Elementor Heading widget supports HTML via the title field.
   This rule ensures <em> inside headings renders as Fraunces italic.
   ========================================================================== */

.elementor-heading-title em,
h1 em, h2 em, h3 em {
    font-style: italic;
    font-family: var(--tsga-font-heading);
    /* Color inherits from parent heading — no override needed */
}

/* ==========================================================================
   ELEMENTOR INTEGRATION HELPERS
   These classes are applied via Elementor's Advanced > CSS Classes field
   on individual widgets or containers. They are intentionally minimal.
   ========================================================================== */

/* Section eyebrow label — applied via Elementor Text widget CSS class */
.tsga-eyebrow {
    font-family: var(--tsga-font-body);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--tsga-letter-spacing-eyebrow);
    color: var(--tsga-purple-600);
    display: block;
    margin-bottom: 8px;
}

/* Eyebrow on dark backgrounds */
.tsga-eyebrow--light {
    color: rgba(255, 255, 255, 0.70);
}

/* Card hover — applied via Elementor Container > Advanced > CSS Classes */
.tsga-card {
    transition: border-color 0.2s ease, transform 0.2s ease;
}

.tsga-card:hover {
    border-color: var(--tsga-purple-700) !important;
    box-shadow: none !important; /* Flat design — no shadow per spec */
}

/* &quot;MOST IMPACT&quot; badge on Donate page gift card */
.tsga-badge-most-impact {
    display: inline-block;
    font-family: var(--tsga-font-body);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--tsga-white);
    background-color: var(--tsga-purple-700);
    padding: 3px 10px;
    border-radius: 20px;
    margin-bottom: 12px;
}

/* &quot;TSGA DESIGNATED CLINIC&quot; badge on clinic cards */
.tsga-badge-clinic {
    display: inline-block;
    font-family: var(--tsga-font-body);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--tsga-white);
    background-color: var(--tsga-purple-700);
    padding: 3px 10px;
    border-radius: 20px;
    margin-bottom: 10px;
}

/* Resource/FAQ topic pill tags */
.tsga-tag-pill {
    display: inline-block;
    font-family: var(--tsga-font-body);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--tsga-purple-700);
    background-color: var(--tsga-purple-100);
    padding: 4px 12px;
    border-radius: 20px;
    margin-right: 6px;
    margin-bottom: 6px;
}

/* ==========================================================================
   CLINIC FINDER — STATE ACCORDION SEARCH
   ========================================================================== */

/* Fix #2: Search wrapper — flex row, 20px side margins, button inline */
.tsga-search-input-wrapper {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 0 !important;
    width: calc(100% - 40px) !important;
    max-width: 680px !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
}

.tsga-clinic-search-input {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    padding: 5px 18px !important;
    font-size: 1rem !important;
    border: 2px solid #D8C8F0 !important;
    border-radius: 6px !important;
    outline: none !important;
    color: #3D2B6B !important;
    background: #FFFFFF !important;
    width: auto !important;
    max-width: none !important;
    display: block !important;
    box-sizing: border-box !important;
}

.tsga-clinic-search-input:focus {
    border-color: #5B2D8E !important;
    box-shadow: 0 0 0 3px rgba(91, 45, 142, 0.15) !important;
}

/* Fix #4: Search button */
#tsga-clinic-search-btn {
    flex: 0 0 auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 5px 24px !important;
    background: #5B2D8E !important;
    color: #FFFFFF !important;
    border: none !important;
    border-radius: 6px !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    transition: background 0.2s ease !important;
}

#tsga-clinic-search-btn:hover {
    background: #3D1A6E !important;
}

/* Fix #3: Smaller state names in accordion */
.elementor-accordion .elementor-accordion-title {
    font-size: 0.95rem !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}

/* Fix #5: More padding between clinics in multi-clinic states */
.tsga-accordion-clinic {
    padding-bottom: 20px !important;
    margin-bottom: 20px !important;
    border-bottom: 1px solid #E8E0F0 !important;
}

.tsga-accordion-clinic:last-child {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
    border-bottom: none !important;
}

/* Hidden state when filtered out */
.tsga-state-accordion-item--hidden {
    display: none !important;
}


/* ==========================================================================
   HOMEPAGE — "Where would you like to start?" cards — Mobile
   ========================================================================== */

/* Stack the two audience cards vertically on mobile */
@media (max-width: 767px) {
  /* Make each card full width on mobile */
  .elementor-element-30e80c27,
  .elementor-element-2a51b4bc {
    flex-basis: 100% !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
  }

  /* Ensure the parent row wraps */
  .elementor-element-30e80c27,
  .elementor-element-2a51b4bc {
    margin-bottom: 16px;
  }

  /* Reduce padding inside the cards on mobile */
  .elementor-element-30e80c27 > .e-con-inner,
  .elementor-element-2a51b4bc > .e-con-inner {
    padding: 24px 20px !important;
  }

  /* Slightly smaller heading on mobile */
  .elementor-element-30e80c27 h3,
  .elementor-element-2a51b4bc h3 {
    font-size: 1.4rem !important;
  }

  /* Make the CTA button full-width on mobile for easier tapping */
  .elementor-element-30e80c27 .elementor-button,
  .elementor-element-2a51b4bc .elementor-button {
    width: 100% !important;
    text-align: center !important;
    justify-content: center !important;
  }
}

/* Tablet: allow cards to still sit side by side but with more breathing room */
@media (min-width: 768px) and (max-width: 1024px) {
  .elementor-element-30e80c27,
  .elementor-element-2a51b4bc {
    flex-basis: 48% !important;
  }
}


/* ==========================================================================
   TSGA MOBILE RESPONSIVENESS — Comprehensive Fixes v1.0
   Applied: 2026-05-01
   Viewport target: 390px (iPhone-sized)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. GLOBAL — Prevent horizontal overflow on all pages
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }

  /* Ensure all Elementor containers don't overflow */
  .e-con,
  .e-con-inner,
  .elementor-widget-container {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}

/* --------------------------------------------------------------------------
   2. GLOBAL — Navigation: hide desktop nav, show hamburger on mobile
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  /* Ensure the hamburger toggle is visible */
  .elementor-menu-toggle,
  button.elementor-menu-toggle {
    display: flex !important;
  }

  /* Sub-menu items — increase tap target size */
  .elementor-nav-menu--dropdown a,
  .elementor-nav-menu--dropdown li a {
    font-size: 14px !important;
    padding: 10px 16px !important;
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
  }
}

/* --------------------------------------------------------------------------
   3. GLOBAL — Hero sections: reduce H1/H2 font sizes on mobile
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .e-con h1,
  .elementor-widget-heading h1 {
    font-size: clamp(24px, 7vw, 36px) !important;
    line-height: 1.2 !important;
  }

  .e-con h2,
  .elementor-widget-heading h2 {
    font-size: clamp(20px, 6vw, 30px) !important;
    line-height: 1.25 !important;
  }

  .elementor-widget-heading .elementor-heading-title {
    min-width: 0 !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
  }
}

/* --------------------------------------------------------------------------
   4. GLOBAL — Footer: increase font size and tap targets
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .elementor-location-footer .e-con-inner {
    flex-direction: column !important;
    align-items: flex-start !important;
  }

  .elementor-location-footer .e-con {
    width: 100% !important;
    min-width: 100% !important;
  }

  .elementor-location-footer a {
    font-size: 14px !important;
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
  }
}

/* --------------------------------------------------------------------------
   5. RESEARCH PAGE — Stats row: wrap 4 stats to 2x2 grid on mobile
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .elementor-element-62a00c8c > .e-con-inner {
    flex-wrap: wrap !important;
    justify-content: center !important;
  }

  .elementor-element-32484ff8,
  .elementor-element-6e30312f,
  .elementor-element-22ce07ff,
  .elementor-element-1cf2bc11 {
    flex-basis: 50% !important;
    width: 50% !important;
    min-width: 50% !important;
    max-width: 50% !important;
    text-align: center !important;
    padding: 12px 8px !important;
  }
}

/* --------------------------------------------------------------------------
   6. RESEARCH PAGE — Programs section: stack 3 cards on mobile
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .elementor-element-313095d5 > .e-con-inner {
    flex-direction: column !important;
    flex-wrap: wrap !important;
  }

  .elementor-element-7123785e,
  .elementor-element-22dde294,
  .elementor-element-69ce030 {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    flex-basis: 100% !important;
    margin-bottom: 16px !important;
  }
}

/* --------------------------------------------------------------------------
   7. ABOUT PAGE — Hero layout: stack 3 columns vertically on mobile
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .elementor-element-695bdbb8 > .e-con-inner {
    flex-direction: column !important;
    flex-wrap: wrap !important;
    gap: 0 !important;
  }

  .elementor-element-2f45c5bd {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    flex-basis: 100% !important;
    order: 1 !important;
  }

  .elementor-element-5029b3be {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    flex-basis: 100% !important;
    order: 2 !important;
    margin-top: 16px !important;
  }

  .elementor-element-7f9db0d0 {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    flex-basis: 100% !important;
    order: 3 !important;
  }

  .elementor-element-3405e280 h1,
  .elementor-element-695bdbb8 h1,
  .elementor-element-2f45c5bd h1 {
    font-size: clamp(26px, 7vw, 36px) !important;
    line-height: 1.2 !important;
  }
}

/* --------------------------------------------------------------------------
   8. ABOUT PAGE — CTA row: stack on mobile
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .elementor-element-7affcd06 > .e-con-inner {
    flex-direction: column !important;
  }

  .elementor-element-3c11fc65,
  .elementor-element-6df3d794,
  .elementor-element-24d57e23 {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
  }
}

/* --------------------------------------------------------------------------
   9. FIND A CLINIC — Fix word-by-word wrapping
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .elementor-widget-text-editor {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .elementor-widget-text-editor p {
    word-break: normal !important;
    overflow-wrap: break-word !important;
    min-width: 0 !important;
  }
}

/* --------------------------------------------------------------------------
   10. GENERAL — All multi-column flex rows: ensure wrapping on mobile
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .e-con-inner {
    flex-wrap: wrap !important;
  }

  .e-con > .e-con-inner > .e-con {
    min-width: 0 !important;
    box-sizing: border-box !important;
  }
}

/* --------------------------------------------------------------------------
   11. GENERAL — Buttons: ensure tap target size on mobile
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .elementor-button {
    min-height: 44px !important;
    padding: 12px 20px !important;
    font-size: 15px !important;
  }
}

/* --------------------------------------------------------------------------
   12. GENERAL — Images: ensure they don't overflow on mobile
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  img,
  .elementor-widget-image img {
    max-width: 100% !important;
    height: auto !important;
  }
}

/* --------------------------------------------------------------------------
   13. GENERAL — Section padding reduction on mobile
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .e-con {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .e-con .e-con {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}


/* ==========================================================================
   TSGA MOBILE RESPONSIVENESS — Targeted Fixes v1.1
   Applied: 2026-05-01
   Fixes: Find a Clinic hero padding, Research stats 2x2 grid
   ========================================================================== */

/* --------------------------------------------------------------------------
   14. FIND A CLINIC — Remove 8em horizontal padding from hero description
   Elementor sets padding: 0em 8em on .elementor-element-7600bfec
   At 390px this leaves only ~100px for text, causing word-by-word wrapping.
   Using high-specificity selector to match Elementor's rule.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .elementor-114 .elementor-element.elementor-element-7600bfec,
  .elementor-element.elementor-element-7600bfec {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

/* --------------------------------------------------------------------------
   15. RESEARCH PAGE — Stats 2x2 grid
   Elementor's mobile CSS sets --width: 100% for all .e-con.e-flex.
   Override the CSS variable AND width directly on the stat elements.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .elementor-element-32484ff8.e-con,
  .elementor-element-6e30312f.e-con,
  .elementor-element-22ce07ff.e-con,
  .elementor-element-1cf2bc11.e-con {
    --width: 50% !important;
    width: 50% !important;
    max-width: 50% !important;
    min-width: 0 !important;
    flex-basis: 50% !important;
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
  }

  .elementor-element-62a00c8c > .e-con-inner {
    flex-wrap: wrap !important;
    flex-direction: row !important;
  }
}

/* --------------------------------------------------------------------------
   16. HOMEPAGE — Stats row 2x2 grid
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .elementor-element-30fb5431 > .e-con-inner {
    flex-wrap: wrap !important;
    flex-direction: row !important;
  }

  .elementor-element-30fb5431 > .e-con-inner > .e-con.e-flex {
    --width: 50% !important;
    width: 50% !important;
    max-width: 50% !important;
    min-width: 0 !important;
    flex-basis: 50% !important;
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
  }
}


/* ==========================================================================
   TSGA MOBILE RESPONSIVENESS — Gap Fix v1.2
   Applied: 2026-05-01
   Fix: Research stats 2x2 grid — reduce gap to allow 2 per row
   The parent inner has gap: 32px; 2 items at 50% + 32px gap > container width.
   Solution: reduce gap to 0 and use calc(50% - 1px) for width.
   ========================================================================== */
@media (max-width: 767px) {
  /* Remove gap from stats row so 2x50% items fit side by side */
  .elementor-element-62a00c8c > .e-con-inner {
    gap: 0 !important;
    --gap: 0px !important;
  }

  /* Stats: exactly 50% width with no gap */
  .elementor-element-32484ff8.e-con,
  .elementor-element-6e30312f.e-con,
  .elementor-element-22ce07ff.e-con,
  .elementor-element-1cf2bc11.e-con {
    --width: 50% !important;
    width: 50% !important;
    max-width: 50% !important;
    min-width: 0 !important;
    flex-basis: 50% !important;
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
    padding: 12px 8px !important;
  }
}


/* ==========================================================================
   TSGA MOBILE — Overflow / White Bar Fixes v1.9.0
   Applied: 2026-05-01
   Fixes:
   1. Nav dropdown menu extending 16px past right edge on all pages
   2. Research counter suffix ($0.4M) overflowing its container by 36px
   3. Global overflow containment to prevent any future horizontal scroll
   ========================================================================== */

/* ── 1. Global overflow containment ─────────────────────────────────────── */
html,
body {
  overflow-x: hidden !important;
  max-width: 100% !important;
}

/* ── 2. Nav dropdown — hidden off-canvas menu causing layout overflow ───── */
/* The dropdown is positioned off-screen but still contributes to scroll width */
@media (max-width: 1024px) {
  .elementor-nav-menu--dropdown.elementor-nav-menu__container,
  .elementor-nav-menu--dropdown {
    overflow: hidden !important;
    max-width: 100vw !important;
    /* Ensure it doesn't push body width */
    contain: layout !important;
  }
  
  /* Also clip the nav widget wrapper */
  .elementor-widget-nav-menu {
    overflow: hidden !important;
    max-width: 100% !important;
  }
  
  /* The nav container itself */
  nav.elementor-nav-menu__container {
    overflow: hidden !important;
  }
}

/* ── 3. Research page — counter number suffix overflow ──────────────────── */
/* .elementor-counter-number-suffix (e.g. "M" in "$0.4M") overflows at 132px
   inside a 163px parent, causing body scrollWidth 426px */
@media (max-width: 767px) {
  .elementor-counter-number-wrapper {
    overflow: hidden !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  
  .elementor-counter-number-prefix,
  .elementor-counter-number,
  .elementor-counter-number-suffix {
    display: inline !important;
    overflow: hidden !important;
    word-break: break-all !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  
  /* The counter widget itself */
  .elementor-widget-counter {
    overflow: hidden !important;
    max-width: 100% !important;
  }
  
  /* Stat box containing the counter */
  .elementor-element-1cf2bc11 {
    overflow: hidden !important;
  }
}

/* ── 4. Broad safety net — clip all Elementor sections/containers ────────── */
@media (max-width: 767px) {
  .elementor-section,
  .elementor-container,
  .e-con,
  .e-con-inner,
  .elementor-widget-wrap,
  .elementor-column-wrap {
    max-width: 100% !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }
}

/* ==========================================================================
   RESOURCE TOPIC ARCHIVE — H1 COLOR
   Match the TSGA text purple used on the Resources Hub H1.
   ========================================================================== */
h1.tsga-topic-archive-title {
    color: #2D1558 !important; /* --tsga-purple-900: matches Resources Hub H1 */
}


/* ==========================================================================
   InsighTS Registry — Why InsighTS Matters blocks: mobile fix
   Prevents the 3 icon-box widgets (30% width) from overflowing/overlapping
   on mobile viewports. Forces full-width stacked layout below 767px.
   ========================================================================== */
@media (max-width: 767px) {
    .elementor-118 .elementor-element.elementor-element-77e4c1db,
    .elementor-118 .elementor-element.elementor-element-10f1e759,
    .elementor-118 .elementor-element.elementor-element-26c5d59e {
        width: 100% !important;
        max-width: 100% !important;
        --container-widget-width: 100% !important;
    }

    .elementor-118 .elementor-element.elementor-element-76ca25d8 {
        --padding-left: 0em !important;
        --padding-right: 0em !important;
    }
}