/* =============================================================================
   Master Insurance — Elementor bridge
   -----------------------------------------------------------------------------
   Elementor ships its own widget defaults. This file re-points them at the
   design system so that a widget dropped on the page is ALREADY on-brand
   before the client touches a single control.

   Rule of thumb followed throughout: set the *default*, never lock it.
   Anything the client sets in the Elementor panel writes an inline style with
   higher specificity and wins — which is the whole point. The handful of
   !important flags below are marked and exist only where Elementor hard-codes
   a value inline that has no panel control.
   ========================================================================== */


/* =============================================================================
   1. Containers — boxed width and the section rhythm
   ========================================================================== */

.e-con { --container-default-padding-inline: var(--container-pad); }

/* Boxed containers max out at the design system's 1200px. */
.e-con-boxed > .e-con-inner { max-width: var(--container-max); }


/* =============================================================================
   2. Buttons — pill shape, brand type, calm hover
   Applies to the Button widget, Form submit, and the Posts "read more".
   ========================================================================== */

.elementor-button,
.elementor-button-link {
  font-family: var(--font-body);
  font-weight: var(--weight-semibold);
  font-size: var(--text-base);
  line-height: 1;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  padding: 13px 24px;
  transition:
    background-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out);
}

/* Elementor's Button WIDGET emits its own default background using the ACCENT
   global, as `.elementor-widget-button .elementor-button` — specificity (0,2,0).
   A plain `.elementor-button { … }` rule is (0,1,0) and loses on specificity no
   matter how late it loads, which is why every Button widget rendered in light
   accent teal instead of the brand's primary dark teal.

   Matching that selector shape is the fix. Variants below then go one level
   higher again so they still win over this base. */
.elementor-widget-button .elementor-button,
.elementor-widget-button .elementor-button:visited {
  background-color: var(--color-primary);
  color: var(--text-on-primary);
}
.elementor-widget-button .elementor-button:hover,
.elementor-widget-button .elementor-button:focus {
  background-color: var(--color-primary-hover);
  color: var(--text-on-primary);
}
.elementor-widget-button .elementor-button:active {
  background-color: var(--color-primary-active);
}

/* Variant classes, applied via Advanced > CSS Classes on a Button widget.
   Elementor puts those classes on the WRAPPER div, not on the <a> inside it:

     <div class="elementor-element … mi-btn--accent elementor-widget-button">
       <a class="elementor-button">…</a>

   so they must be descendant selectors, and they include the widget class to
   out-specify the base rule above. */
.elementor-widget-button.mi-btn--accent .elementor-button          { background-color: var(--color-accent); color: var(--text-on-accent); }
.elementor-widget-button.mi-btn--accent .elementor-button:hover    { background-color: var(--teal-400); color: var(--text-on-accent); }

.elementor-widget-button.mi-btn--secondary .elementor-button       { background-color: var(--white); color: var(--color-primary); border-color: var(--border-default); }
.elementor-widget-button.mi-btn--secondary .elementor-button:hover { background-color: var(--surface-hover); color: var(--color-primary); }

.elementor-widget-button.mi-btn--ghost .elementor-button           { background-color: transparent; color: var(--color-primary); }
.elementor-widget-button.mi-btn--ghost .elementor-button:hover     { background-color: var(--surface-hover); color: var(--color-primary); }

.elementor-widget-button.mi-btn--on-dark .elementor-button         { background-color: var(--white); color: var(--color-primary); }
.elementor-widget-button.mi-btn--on-dark .elementor-button:hover   { background-color: var(--teal-100); color: var(--color-primary); }

.elementor-widget-button.mi-btn--sm .elementor-button { font-size: var(--text-sm); padding: 9px 16px; }
.elementor-widget-button.mi-btn--lg .elementor-button { font-size: var(--text-md); padding: 17px 32px; }

/* The button's icon gap — Elementor's default is cramped for our glyphs. */
.elementor-button .elementor-button-content-wrapper { gap: var(--space-2); }
.elementor-button .elementor-button-icon { display: inline-flex; align-items: center; }


/* =============================================================================
   3. Headings and text
   ========================================================================== */

.elementor-widget-heading .elementor-heading-title {
  font-family: var(--font-display);
  color: var(--text-heading);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  font-weight: var(--weight-bold);
}

.elementor-widget-text-editor {
  font-family: var(--font-body);
  color: var(--text-body);
  line-height: var(--leading-normal);
}

/* On the dark teal bands, headings and text invert. */
.mi-section--dark .elementor-heading-title,
.mi-section--deep .elementor-heading-title { color: var(--white); }
.mi-section--dark .elementor-widget-text-editor { color: rgba(255, 255, 255, 0.85); }
.mi-section--deep .elementor-widget-text-editor { color: rgba(255, 255, 255, 0.75); }


/* =============================================================================
   4. Icon Box — the product-card medallion pattern
   Add class `mi-medallion-box` to an Icon Box widget.
   ========================================================================== */

.mi-medallion-box .elementor-icon {
  width: 56px;
  height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  background: var(--teal-100);
  color: var(--color-primary);
  font-size: 28px;
  transition:
    background var(--dur-med) var(--ease-out),
    color var(--dur-med) var(--ease-out);
}
.mi-card--interactive:hover .mi-medallion-box .elementor-icon {
  background: var(--color-primary);
  color: var(--white);
}
.mi-medallion-box .elementor-icon svg { width: 1em; height: 1em; fill: none; stroke: currentColor; }

.mi-medallion-box .elementor-icon-box-title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  color: var(--text-heading);
  letter-spacing: var(--tracking-tight);
}
.mi-medallion-box .elementor-icon-box-description {
  font-size: var(--text-sm);
  color: var(--text-muted);
  line-height: var(--leading-normal);
}


/* =============================================================================
   5. Icon List — teal checks on feature lists
   ========================================================================== */

.mi-features .elementor-icon-list-item > a,
.mi-features .elementor-icon-list-text {
  font-size: var(--text-sm);
  color: var(--text-body);
}
.mi-features .elementor-icon-list-icon svg,
.mi-features .elementor-icon-list-icon i { color: var(--color-primary); }


/* =============================================================================
   6. Our brand icons inside Elementor's icon control
   Elementor renders a picked icon as <i class="mi-i mi-i-health">. The mask
   needs a square box; Elementor's own sizing only sets font-size.
   ========================================================================== */

.elementor-icon .mi-i,
.elementor-icon-list-icon .mi-i,
.elementor-button-icon .mi-i { font-size: inherit; }


/* =============================================================================
   7. Elementor Pro Form — matched to the design system's fields
   Covers the contact form and any form the client builds later.
   ========================================================================== */

.elementor-form .elementor-field-group > label,
.elementor-field-group .elementor-field-label {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--text-heading);
  margin-bottom: 6px;
}
.elementor-field-group .elementor-field-label .elementor-mark-required { color: var(--error-500); }

.elementor-form .elementor-field-textual {
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--text-body);
  background: var(--surface-field);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  min-height: auto;
  transition:
    border-color var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out);
}
.elementor-form .elementor-field-textual:focus {
  border-color: var(--border-focus);
  box-shadow: var(--shadow-focus);
  outline: none;
}
.elementor-form .elementor-field-textual::placeholder { color: var(--text-placeholder); }

.elementor-form .elementor-field-type-textarea textarea { min-height: 120px; resize: vertical; }

/* Elementor renders selects with its own arrow; swap in the brand chevron. */
.elementor-form .elementor-field-type-select select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235f7d84' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 18px;
}

.elementor-form .elementor-message {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  margin-top: var(--space-3);
}
.elementor-form .elementor-message-success { background: var(--success-50); color: var(--success-500); }
.elementor-form .elementor-message-danger  { background: var(--error-50);   color: var(--error-500); }

/* Upload fields — Elementor's default is a bare file input. */
.elementor-form .elementor-field-type-upload .elementor-field {
  border: 1.5px dashed var(--border-default);
  border-radius: var(--radius-sm);
  background: var(--surface-field);
  padding: var(--space-5);
  transition: all var(--dur-fast) var(--ease-out);
}
.elementor-form .elementor-field-type-upload .elementor-field:hover {
  border-color: var(--border-strong);
  background: var(--teal-100);
}


/* =============================================================================
   8. Nav Menu (Elementor Pro) — sticky navbar links
   ========================================================================== */

.elementor-nav-menu .elementor-item {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: var(--weight-medium);
  color: var(--text-body);
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  transition: color var(--dur-fast) var(--ease-out);
}
.elementor-nav-menu .elementor-item:hover,
.elementor-nav-menu .elementor-item.elementor-item-active {
  color: var(--color-primary);
  font-weight: var(--weight-bold);
}
/* Elementor draws an underline pointer by default; the design system does not. */
.elementor-nav-menu--main .e--pointer-underline .elementor-item:after { display: none; }

/* The navbar band itself. Applied to the header container in Theme Builder. */
.mi-navbar {
  position: sticky;
  top: 0;
  z-index: 100;
  min-height: var(--navbar-height);
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border-subtle);
}
/* WP's admin bar offsets the sticky header for logged-in editors. */
.admin-bar .mi-navbar { top: 32px; }
@media (max-width: 782px) { .admin-bar .mi-navbar { top: 46px; } }

/* Mobile dropdown panel */
.elementor-nav-menu--dropdown {
  background: var(--white);
  border-top: 1px solid var(--border-subtle);
}
.elementor-nav-menu--dropdown .elementor-item {
  font-size: 16px;
  font-weight: var(--weight-semibold);
  padding: 12px 8px;
}


/* =============================================================================
   9. Posts / Loop Grid — the blog listing cards
   ========================================================================== */

.elementor-post,
.elementor-posts .elementor-post__card {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
  overflow: hidden;
  transition:
    transform var(--dur-med) var(--ease-out),
    box-shadow var(--dur-med) var(--ease-out),
    border-color var(--dur-med) var(--ease-out);
}
.elementor-posts .elementor-post__card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--border-strong);
}
.elementor-post__title,
.elementor-post__title a {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  color: var(--text-heading);
  letter-spacing: var(--tracking-tight);
}
.elementor-post__title a:hover { color: var(--color-primary); }
.elementor-post__excerpt p { font-size: var(--text-sm); color: var(--text-muted); }
.elementor-post__meta-data  { font-size: var(--text-xs); color: var(--text-muted); }
.elementor-post__badge {
  background: var(--teal-100);
  color: var(--teal-800);
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
}

/* Taxonomy filter pills on the blog page */
.elementor-widget-taxonomy-filter .e-filter-item {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-default);
  background: var(--white);
  color: var(--text-body);
  padding: 9px 18px;
  transition: all var(--dur-fast) var(--ease-out);
}
.elementor-widget-taxonomy-filter .e-filter-item[aria-pressed="true"] {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--white);
}


/* =============================================================================
   10. Accordion / Toggle — the FAQ blocks
   ========================================================================== */

.elementor-accordion .elementor-accordion-item {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-3);
  overflow: hidden;
  background: var(--surface-card);
}
.elementor-accordion .elementor-tab-title {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--text-heading);
  padding: var(--space-5) var(--space-6);
}
.elementor-accordion .elementor-tab-title.elementor-active { color: var(--color-primary); }
.elementor-accordion .elementor-tab-content {
  font-size: var(--text-sm);
  color: var(--text-muted);
  line-height: var(--leading-normal);
  border-top: 1px solid var(--border-subtle);
  padding: var(--space-5) var(--space-6);
}


/* =============================================================================
   11. Editor-only affordances
   Custom widgets render live JS. Inside the editor iframe that can look broken
   (a marquee mid-scroll, a hidden wizard panel), so calm them down.
   ========================================================================== */

.elementor-editor-active .mi-marquee-track { animation-play-state: paused; }
.elementor-editor-active .mi-testimonial   { position: relative; opacity: 1; visibility: visible; }
.elementor-editor-active .mi-testimonial + .mi-testimonial { margin-top: var(--space-6); }

/* An empty custom widget should say so rather than render nothing. */
.mi-widget-empty {
  padding: var(--space-8);
  border: 1px dashed var(--border-default);
  border-radius: var(--radius-md);
  background: var(--surface-field);
  color: var(--text-muted);
  font-size: var(--text-sm);
  text-align: center;
}


/* =============================================================================
   12. Header — three-zone layout: logo left · menu centre · actions right
   -----------------------------------------------------------------------------
   The nav was wrapping to two lines and the active link and CTA were rendering
   in accent light-teal. Both came from Elementor's kit-level CSS, which loads
   after this file and targets the same elements — so the rules below are
   scoped tightly enough to win rather than relying on load order.
   ========================================================================== */

.mi-navbar {
  display: flex;
  align-items: center;
}

/* Work WITH Elementor rather than against it. The container already emits
   --display:flex and --flex-direction:row from its own panel settings, so
   overriding display to grid just starts a specificity fight. Instead give the
   three children their flex behaviour: logo and actions stay their natural
   size, the menu absorbs everything between them and centres inside it.

   The navbar is a FULL-width container (not boxed) — the prototype's header
   spans the viewport with 40px gutters rather than capping at 1200px. */
.mi-navbar-inner {
  /* Elementor's default for a row container is --container-widget-flex-grow:1
     and --container-widget-width:calc((1 - flex-grow) * 100%) — which resolves
     to ZERO width and makes all three children share the row equally. Resetting
     these two properties is what lets the children size to their content; it
     also avoids overriding `display`, so Elementor's own flex stays intact. */
  --container-widget-width: auto;
  --container-widget-flex-grow: 0;

  align-items: center;
  gap: var(--space-8);
  width: 100%;
  min-height: var(--navbar-height);
  flex-wrap: nowrap;
}

/* Centring the menu in the VIEWPORT (not merely inside its own column) needs
   the two side zones to claim equal space. `flex: 1 1 0` on both makes the
   middle child sit dead centre regardless of how wide the logo or the actions
   happen to be. Giving the menu `flex: 0 0 auto` keeps it at its natural size
   so it is the thing being centred. */
.mi-navbar-inner > .elementor-widget-html:first-child {
  flex: 1 1 0;
  width: auto;
  min-width: 0;
  display: flex;
  justify-content: flex-start;
}

.mi-navbar-inner > .elementor-widget-nav-menu {
  flex: 0 0 auto;
  /* `width: auto` is NOT enough: Elementor's inner <nav> is width:100%, so the
     widget's content size resolves to the whole row (measured 1340px of 1360px)
     and crushed the actions zone to 20px. max-content sizes the widget to the
     menu itself, which is what the flex:1 side zones then centre. */
  width: max-content;
  max-width: 100%;
  min-width: 0;
}

.mi-navbar-inner > .mi-navbar-actions {
  flex: 1 1 0;
  width: auto;
  min-width: 0;
  justify-content: flex-end;
}

/* The logo mark must never be squeezed by the grid. */
.mi-navbar .mi-medallion { flex: 0 0 auto; }

/* --- Centre zone: the menu ------------------------------------------------ */

/* (Removed: `.mi-navbar .elementor-widget-nav-menu { width: 100% }` — a
   leftover from the first header pass. It sat later in this file than the
   `width: max-content` rule above and silently beat it, stretching the menu
   widget to 1340px of a 1360px row and crushing the actions zone to 20px.) */

.mi-navbar .elementor-nav-menu--main .elementor-nav-menu {
  display: flex;
  flex-wrap: nowrap;          /* the wrap to a second line */
  justify-content: center;
  align-items: center;
  gap: 2px;
}

.mi-navbar .elementor-nav-menu--main .elementor-nav-menu > li { flex: 0 0 auto; }

.mi-navbar .elementor-nav-menu--main .elementor-item {
  white-space: nowrap;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: var(--weight-medium);
  line-height: 1;
  padding: 9px 13px;
  border-radius: var(--radius-sm);
  color: var(--text-body);
  fill: var(--text-body);
  transition:
    color var(--dur-fast) var(--ease-out),
    background-color var(--dur-fast) var(--ease-out);
}

/* Hover and current page both go to primary dark teal, never accent. */
.mi-navbar .elementor-nav-menu--main .elementor-item:hover,
.mi-navbar .elementor-nav-menu--main .elementor-item:focus,
.mi-navbar .elementor-nav-menu--main .elementor-item.elementor-item-active,
.mi-navbar .elementor-nav-menu--main .elementor-item.highlighted {
  color: var(--color-primary);
  fill: var(--color-primary);
  background-color: var(--surface-hover);
}

.mi-navbar .elementor-nav-menu--main .elementor-item.elementor-item-active {
  font-weight: var(--weight-bold);
}

/* --- Right zone: portal link, phone, CTA ---------------------------------- */

.mi-navbar-actions {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  justify-self: end;
  white-space: nowrap;
}

.mi-navbar-actions a { transition: color var(--dur-fast) var(--ease-out); }
.mi-navbar-actions a:hover { color: var(--color-primary); }

/* The CTA is the primary action: solid dark teal, not the accent tint. */
.mi-navbar .elementor-button,
.mi-navbar .elementor-button:visited {
  background-color: var(--color-primary);
  color: var(--white);
  fill: var(--white);
}
.mi-navbar .elementor-button:hover,
.mi-navbar .elementor-button:focus {
  background-color: var(--color-primary-hover);
  color: var(--white);
}

/* --- Header responsive ----------------------------------------------------
   Two things were broken:

   1. Between ~1180 and 1300 the menu and the right-hand actions collided —
      "Contact" printed on top of "Client portal".
   2. At and below Elementor's tablet breakpoint the nav widget measured 956px
      of a 976px row. Elementor forces widgets to 100% width at tablet/mobile
      (--container-widget-width only takes effect at desktop), so the burger's
      widget swallowed the row and pushed the CTA off-screen entirely. The
      header lost its call-to-action on every phone and tablet.
   -------------------------------------------------------------------------- */

/* Drop the secondary links before they can collide. */
@media (max-width: 1300px) {
  .mi-nav-extra { display: none !important; }
  .mi-navbar-inner,
  .mi-navbar-inner > .e-con-inner { gap: var(--space-5); }
  .mi-navbar .elementor-nav-menu--main .elementor-item { padding: 9px 10px; font-size: 14.5px; }
}

/* Burger mode: logo left · CTA then burger right. */
@media (max-width: 1024px) {
  .mi-navbar-inner > .elementor-widget-nav-menu {
    flex: 0 0 auto;
    /* Elementor sets width:100% on widgets at tablet; this is the one place
       an !important is genuinely required — there is no control for it. */
    width: auto !important;
    min-width: 0;
    order: 3;
  }

  .mi-navbar-inner > .mi-navbar-actions {
    order: 2;
    margin-inline-start: auto;
    gap: var(--space-3);
  }

  /* Elementor's toggle is centred inside its widget; pin it to the edge. */
  .mi-navbar .elementor-menu-toggle { margin-inline-start: auto; }

  /* The dropdown is absolutely positioned, so it resolves against the nearest
     POSITIONED ancestor. Elementor gives the nav widget `position: relative`,
     which made the panel only as wide as the burger — a ~44px column of
     clipped text. Making the widget static hands the containing block back to
     .mi-navbar, so the panel spans the full header width beneath it. */
  .mi-navbar .elementor-widget-nav-menu { position: static; }

  .mi-navbar .elementor-nav-menu--dropdown {
    position: absolute;
    inset-inline: 0;
    top: 100%;
    width: 100%;
  }
}

@media (max-width: 480px) {
  /* Keep the CTA — it is the header's whole job — but let it shrink. */
  .mi-navbar-actions .elementor-button { padding: 9px 14px; font-size: 13.5px; }
  .mi-navbar .mi-logo span:last-child span:last-child { letter-spacing: .12em; }
}

@media (max-width: 380px) {
  /* At the very bottom of the range the label goes, the icon stays. */
  .mi-navbar-actions .elementor-button .elementor-button-text { display: none; }
  .mi-navbar-actions .elementor-button { padding: 10px 12px; }
}

/* =============================================================================
   13. Button size classes — WINNING the specificity fight
   -----------------------------------------------------------------------------
   Elementor's frontend.min.css styles buttons through SIZE MODIFIER classes:

     .elementor-button.elementor-size-lg { border-radius:5px; font-size:18px;
                                           padding:20px 40px }

   That is specificity (0,2,0). A plain `.elementor-button { … }` rule is
   (0,1,0) and loses no matter how late it loads — which is why every button on
   the site rendered SQUARE instead of the brand's pill, and at Elementor's
   sizes instead of the design system's.

   Repeating the class matches (0,2,0), and this file loads after Elementor's,
   so these win on order. No !important needed.
   ========================================================================== */

.elementor-button.elementor-button,
.elementor-button.elementor-size-xs,
.elementor-button.elementor-size-sm,
.elementor-button.elementor-size-md,
.elementor-button.elementor-size-lg,
.elementor-button.elementor-size-xl {
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-weight: var(--weight-semibold);
  font-size: var(--text-base);
  line-height: 1;
  padding: 13px 24px;
}

/* Design-system sizes, applied via the mi-btn--* wrapper classes. */
.mi-btn--sm .elementor-button.elementor-button { font-size: var(--text-sm); padding: 9px 16px; }
.mi-btn--lg .elementor-button.elementor-button { font-size: var(--text-md); padding: 17px 32px; }

/* Elementor's own size names, in case the client picks one from the panel. */
.elementor-button.elementor-size-xs { font-size: var(--text-sm); padding: 8px 14px; }
.elementor-button.elementor-size-lg { font-size: var(--text-md); padding: 17px 32px; }
.elementor-button.elementor-size-xl { font-size: var(--text-lg); padding: 20px 38px; }

/* Same trap on the form submit button. */
.elementor-form .elementor-button,
.elementor-form .elementor-button.elementor-size-sm,
.elementor-form .elementor-button.elementor-size-md {
  border-radius: var(--radius-pill);
}

/* On a phone a lone CTA reads better full width than floating mid-row. */
@media (max-width: 767px) {
  .mi-section--dark .elementor-widget-button,
  .mi-hero .elementor-widget-button { width: 100%; }
  .mi-section--dark .elementor-widget-button .elementor-button,
  .mi-hero .elementor-widget-button .elementor-button { width: 100%; }
}


/* =============================================================================
   14. Quick quote bar on small screens
   Six tabs across a phone gives a ragged 4 + 2. Three per row is even.
   ========================================================================== */

@media (max-width: 900px) {
  .mi-qtabs { display: grid; grid-template-columns: repeat(3, 1fr); }
  .mi-qtab { padding: 14px 8px; font-size: 14px; }
  .mi-qtab .mi-i { font-size: 18px; }
}

@media (max-width: 480px) {
  .mi-qtabs { grid-template-columns: repeat(2, 1fr); }
}


/* =============================================================================
   15. Full-width layout
   -----------------------------------------------------------------------------
   Boxed containers now span the viewport (--container-max: 100%) with the side
   gutters coming from --container-pad. Elementor still calls them "boxed", so
   the client can drop the width back to a fixed px in Site Settings > Layout
   whenever they want a centred column again.

   Long-form text keeps a readable measure — a 1900px-wide paragraph is not a
   design, it is an accident.
   ========================================================================== */

/* Elementor hard-codes `padding-inline: 0` on .e-con-inner and expects the
   gutter to come from the OUTER container's padding control. Our band
   containers set horizontal padding to 0 (they were centred columns before),
   so at full width the content sat flush against the viewport edge.

   Putting the gutter on the inner box is the single place that fixes every
   band at once, and it stays responsive via the clamp in --container-pad.
   Same specificity as Elementor's rule, loaded later, so it wins. */
.e-con-boxed > .e-con-inner {
  max-width: var(--container-max);
  padding-inline: var(--container-pad);
}

.e-con { --container-default-padding-inline: var(--container-pad); }

/* A boxed container nested inside another must not double the gutter. */
.e-con-boxed .e-con-boxed > .e-con-inner { padding-inline: 0; }

/* Readable measure for prose, regardless of how wide the band gets. */
.mi-section-head { max-width: 720px; }

.mi-section .elementor-widget-text-editor p { max-width: 78ch; }
.mi-section-head .elementor-widget-text-editor p { max-width: none; }

/* Centred intro blocks keep their paragraph centred too. */
.mi-section-head .elementor-widget-text-editor { margin-inline: auto; }

/* The hero's copy should not run the full width of a wide monitor. */
.mi-hero .elementor-widget-heading .elementor-heading-title { max-width: 20ch; }
.mi-hero .elementor-widget-text-editor p { max-width: 58ch; }

@media (max-width: 1024px) {
  .mi-hero .elementor-widget-heading .elementor-heading-title { max-width: none; }
}


/* =============================================================================
   16. Form submit buttons
   Elementor Pro's Form widget defaults its submit button to the ACCENT global,
   same trap as the Button widget. Match its selector shape so the brand's
   primary wins.
   ========================================================================== */

.elementor-widget-form .elementor-button,
.elementor-widget-form .elementor-button:visited,
.elementor-form .elementor-button[type="submit"] {
  background-color: var(--color-primary);
  color: var(--white);
  border-radius: var(--radius-pill);
}
.elementor-widget-form .elementor-button:hover,
.elementor-widget-form .elementor-button:focus,
.elementor-form .elementor-button[type="submit"]:hover {
  background-color: var(--color-primary-hover);
  color: var(--white);
}


/* =============================================================================
   17. Mobile navigation panel
   The toggle must open a panel that shows EVERY page plainly, plus the
   secondary links that are hidden from the bar itself at narrow widths.
   ========================================================================== */

@media (max-width: 1024px) {
  .mi-navbar .elementor-nav-menu--dropdown {
    background: var(--white);
    border-top: 1px solid var(--border-subtle);
    box-shadow: 0 18px 40px -18px rgba(7, 46, 55, 0.35);
    padding: var(--space-2) 0 var(--space-4);
    max-height: calc(100vh - var(--navbar-height));
    overflow-y: auto;
  }

  .mi-navbar .elementor-nav-menu--dropdown .elementor-item {
    font-size: 16px;
    font-weight: var(--weight-semibold);
    color: var(--text-heading);
    padding: 15px var(--container-pad);
    border-bottom: 1px solid var(--border-subtle);
    border-radius: 0;
  }
  .mi-navbar .elementor-nav-menu--dropdown li:last-child .elementor-item { border-bottom: 0; }

  .mi-navbar .elementor-nav-menu--dropdown .elementor-item:hover,
  .mi-navbar .elementor-nav-menu--dropdown .elementor-item.elementor-item-active {
    background: var(--bg-tint);
    color: var(--color-primary);
  }

  /* Repeat the secondary links at the foot of the panel so nothing is lost. */
  .mi-navbar .elementor-nav-menu--dropdown::after {
    content: "";
    display: block;
    height: 1px;
    margin: var(--space-3) var(--container-pad) 0;
    background: var(--border-subtle);
  }

  .mi-navbar .elementor-menu-toggle {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-sm);
    background: var(--bg-tint);
    color: var(--color-primary);
    transition: background var(--dur-fast) var(--ease-out);
  }
  .mi-navbar .elementor-menu-toggle:hover { background: var(--teal-100); }
  .mi-navbar .elementor-menu-toggle.elementor-active {
    background: var(--color-primary);
    color: var(--white);
  }
}