/*
Theme Name: Bryant Legal Child
Theme URI: https://bryantlg.com
Description: Hello Elementor child theme for Bryant Legal Group — adds IvyOra Text typography, pixel-perfect overrides matching the MDC redesign in Figma.
Author: LaFleur Marketing
Author URI: https://lafleur.marketing
Template: hello-elementor
Version: 1.1.0
Text Domain: bryant-legal-child
*/

/* ============================================================
   DESIGN TOKENS (from Figma node 217:458 — official style guide)
   ============================================================ */
:root {
  /* === Color Palette === */
  --blg-dark-green: #062d22;          /* Darkest brand green */
  --blg-green: #1f594a;                /* Primary CTA / brand green */
  --blg-sage: #95beac;                 /* Accent sage */
  --blg-navy: #21374e;                 /* Primary dark / navy */
  --blg-mid-blue: #456c92;             /* Section labels */
  --blg-light-blue: #94b7d8;           /* Accent blue */
  --blg-darker-navy: #17293b;          /* Settlement section bg */
  --blg-divider-blue: #304f6e;         /* Dividers on dark bg */
  --blg-light-gray: #d9d9d9;
  --blg-off-white-gray: #f2f2f2;
  --blg-cream: #f4f2ec;                /* Light background */
  --blg-cream-lighter: #f9f7f2;        /* Lighter cream variant */
  --blg-black: #2b292b;                /* BLG_BLACK — body text */
  --blg-text-secondary: #636363;       /* Secondary text */
  --blg-text-light: #b8b8b8;           /* Tertiary text on dark bg */
  --blg-border: #d5d4d0;               /* Border / divider on light bg */
  --blg-required: #ff0606;             /* Required field marker */

  /* === Typography === */
  --blg-font-serif: "ivyora-text", "IvyOra Text", Georgia, serif;
  --blg-font-display: "ivyora-display", "IvyOra Display", Georgia, serif;
  --blg-font-sans: "Poppins", -apple-system, sans-serif;

  /* Type sizes (per Figma style guide) */
  --blg-size-h1: 60px;                 /* Hero H1 — IvyOra Text Medium */
  --blg-size-h1-lh: 76px;
  --blg-size-h2: 44px;                 /* Section H2 — IvyOra Text Medium */
  --blg-size-h2-lh: 52px;
  --blg-size-h3: 24px;                 /* Card titles — Poppins Medium */
  --blg-size-h3-lh: 32px;
  --blg-size-hero-body: 20px;          /* Hero subhead — Poppins Regular */
  --blg-size-hero-body-lh: 28px;
  --blg-size-body: 16px;               /* Body — Poppins Regular */
  --blg-size-body-lh: 24px;
  --blg-size-button: 14px;             /* Button — Poppins Semibold */
  --blg-size-section-slug: 14px;       /* Section label — Poppins Bold */
  --blg-section-slug-tracking: 2.8px;

  /* === Mobile sizes === */
  --blg-mobile-h1: 32px;
  --blg-mobile-h1-lh: 40px;
  --blg-mobile-h2: 28px;
  --blg-mobile-h2-lh: 36px;
}

/* ============================================================
   IvyOra Text — Apply to all Elementor headings + body serifs
   Loaded via Adobe Fonts (Typekit) in functions.php
   ============================================================ */

/* Headings — ivyora-text for SECTION TITLES only (not section labels/slugs)
   Section labels like "CHICAGO DISABILITY INSURANCE LAWYERS" and "OUR REPUTATION"
   use Poppins Bold and should NOT be overridden to IvyOra.
   Only target specific IDs or h1 tags to avoid catching label h2 elements. */

/* Hero H1 — IvyOra Text Medium = weight 400, 60px/76px, max-width 1179px */
.elementor-widget-heading h1 {
  font-family: "ivyora-text", "IvyOra Text", Georgia, serif !important;
  font-weight: 400 !important;
  font-style: normal !important;
  /*max-width: 1179px !important;*/
  /*margin-left: auto !important;
  margin-right: auto !important;*/
}

/* Specific section title h2 headings (NOT labels)
   IvyOra Text "Medium" = weight 400 in Typekit (Regular weight, NOT Bold 700) */
[data-id="da45870"] .elementor-heading-title,   /* Trusted by Medical */
[data-id="f32d517"] .elementor-heading-title,   /* Our Practice Areas */
[data-id="0b42f89"] .elementor-heading-title,   /* Hear From Our Clients */
[data-id="24f0085"] .elementor-heading-title,   /* Meet Our Chicago */
[data-id="f30aec0"] .elementor-heading-title,   /* Do you have questions */
[data-id="5627b72"] .elementor-heading-title,   /* Our Settlements */
[data-id="f595028"] .elementor-heading-title,   /* Our Recent Articles */
[data-id="b78f5ac"] .elementor-heading-title,   /* FAQ */
[data-id="acfc7af"] .elementor-heading-title {  /* Contact Bryant Legal */
  font-family: "ivyora-text", "IvyOra Text", Georgia, serif !important;
  font-weight: 400 !important;
  font-style: normal !important;
}

/* Section labels/slugs — ALWAYS Poppins Bold, never IvyOra */
[data-id="a69ad3e"] .elementor-heading-title,   /* CHICAGO DISABILITY... */
[data-id="eb4d0d9"] .elementor-heading-title {   /* OUR REPUTATION */
  font-family: "Poppins", sans-serif !important;
  font-weight: 600 !important;
  font-style: normal !important;
  text-transform: uppercase !important;
  letter-spacing: 3.6px !important;
}

/* Settlement dollar amounts — ivyora-text Regular (400) */
[data-id="3e1f51b"] .elementor-heading-title,   /* $1.6M */
[data-id="df3d728"] .elementor-heading-title,   /* $500K */
.elementor-widget-heading h3.elementor-heading-title:has-text("$") {
  font-family: "ivyora-text", "IvyOra Text", Georgia, serif !important;
  font-weight: 400 !important;
}

/* Match all dollar amount headings by class hook */
.bryant-dollar-amount .elementor-heading-title,
.bryant-dollar-amount {
  font-family: "ivyora-text", "IvyOra Text", Georgia, serif !important;
  font-weight: 400 !important;
}

/* Testimonial quote — IvyOra Text Regular per Figma */
[data-id="4286c08"] .elementor-widget-container,
[data-id="4286c08"] em {
  font-family: "ivyora-text", "IvyOra Text", Georgia, serif !important;
  font-weight: 400 !important;
  font-style: italic !important;
}

/* ============================================================
   Body fonts — Poppins (already loaded via Elementor)
   ============================================================ */

body, p, .elementor-widget-text-editor {
  font-family: "Poppins", sans-serif;
}

/* ============================================================
   Carousel scroll behaviors — Practice Areas, Articles
   ============================================================ */

/* Solo en mobile: cards inactivas se ven "apagadas" */
@media (max-width: 767px) {
  [data-id="bff9795"] > .e-con {
    transition: opacity 0.3s ease;
  }
  
  [data-id="bff9795"] > .e-con .elementor-widget-image img {
    transition: filter 0.3s ease;
  }
  
  [data-id="bff9795"] > .e-con.is-inactive .elementor-widget-image img {
    filter: grayscale(100%);
  }
  
  [data-id="bff9795"] > .e-con.is-inactive .elementor-heading-title,
  [data-id="bff9795"] > .e-con.is-inactive .elementor-heading-title a {
    color: #D5D4D0 !important;
  }
  
  /* Flechas dentro de cards inactivas */
  [data-id="bff9795"] > .e-con.is-inactive svg circle,
  [data-id="bff9795"] > .e-con.is-inactive svg path {
    stroke: #D5D4D0 !important;
  }
  
  /* Número (01, 02...) también se apaga en cards inactivas */
  [data-id="bff9795"] > .e-con.is-inactive > .elementor-widget-heading:first-child .elementor-heading-title {
    opacity: 0.4;
  }
}

/* Practice area card carousel — show 4 at a time on desktop, scroll horizontally */
[data-id="bff9795"] {
  overflow-x: auto !important;
  overflow-y: hidden !important;
  flex-wrap: nowrap !important;
  flex-direction: row !important;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;  /* Firefox */
  -ms-overflow-style: none;  /* IE */
}
[data-id="bff9795"]::-webkit-scrollbar {
  display: none;  /* Chrome/Safari */
}
[data-id="bff9795"] > .e-con {
  position: relative !important;
  overflow: hidden;
  border-radius: 10px 10px 0 0 !important;  /* Top corners only per Figma */
  background: rgba(249, 247, 242, 0.25);
  padding: 0 !important;
}

/* Carousel arrow cursor — make them clickable */
.carousel-arrows {
  cursor: default;
}
.carousel-arrows > div {
  cursor: pointer;
  transition: transform 0.15s ease;
}
.carousel-arrows > div:hover {
  transform: scale(1.1);
}
.carousel-arrows > div:active {
  transform: scale(0.95);
}

[data-id="bff9795"] > .e-con > .elementor-widget-heading:first-child {
  position: absolute !important;
  top: 24px !important;
  left: -16px !important;
  z-index: 5 !important;
  pointer-events: none;
  margin: 0 !important;
}
[data-id="bff9795"] > .e-con > .elementor-widget-heading:first-child .elementor-heading-title {
  font-family: "ivyora-text", "IvyOra Text", Georgia, serif !important;
  font-weight: 400 !important;
  color: #f4f2ec !important;
  font-size: 68px !important;          /* Match Figma exactly */
  line-height: 52px !important;        /* Match Figma exactly */
  text-shadow: 0 2px 8px rgba(0,0,0,0.30);
  margin: 0 !important;
}
[data-id="bff9795"] .elementor-widget-image {
  margin: 0 !important;
}
[data-id="bff9795"] .elementor-widget-image img {
  border-radius: 10px 10px 0 0 !important;
  display: block !important;
  width: 100% !important;
  height: 350px !important;
  object-fit: cover !important;
}
[data-id="bff9795"] > .e-con > .elementor-widget-heading:not(:first-child) .elementor-heading-title {
  padding: 24px 24px 32px !important;
  margin: 0 !important;
  color: #21374e !important;
}

/* ============================================================
   FAQ accordion — match Figma styling
   ============================================================ */

[data-id="11ac048"] .elementor-toggle-item {
  border-color: #d5d4d0 !important;
}
[data-id="11ac048"] .elementor-toggle-title {
  position: relative !important;
  padding: 18px 50px 18px 0 !important;
  font-family: "Poppins", sans-serif !important;
  font-weight: 500 !important;
}
[data-id="11ac048"] .elementor-toggle-icon {
  position: absolute !important;
  right: 0 !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 30px !important;
  height: 30px !important;
  border: 1.5px solid #1f594a !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
[data-id="11ac048"] .elementor-toggle-icon i {
  color: #1f594a !important;
  font-size: 12px !important;
}

/* ============================================================
   Header — transparent overlay over hero
   Per Figma: solid dark navy at top, multi-stop fade to transparent
   over a 161px height with mix-blend-multiply
   ============================================================ */

[data-elementor-type="header"] {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 100 !important;
  background: transparent !important;
}

/* Transición suave de fondo en el container interno (donde sí se ve).
   Aplica a ambos templates: hw001a1 (T38) y e9c4fd8 (T1414). */
[data-elementor-type="header"] .elementor-element-hw001a1,
[data-elementor-type="header"] .elementor-element-e9c4fd8 {
  transition: background-color 0.15s ease, box-shadow 0.15s ease !important;
}

/* ============================================================
   HEADER ACTIVE STATES — aplicados al container interno con altura real.
   - hw001a1 → Template 38 (Home, hero oscuro)
   - e9c4fd8 → Template 1414 (PA parent, About Us, WWW, etc. — hero claro)
   Se activan cuando:
   - Hay hover sobre un menú con submenú (body.header-menu-hovered)
   - El usuario scrolleó más allá del hero (.header-scrolled)
   ============================================================ */

/* Fondo cream: solo al hover de un menú o cuando el usuario scrolleó. */
body.header-menu-hovered [data-elementor-type="header"] .elementor-element-hw001a1,
body.header-menu-hovered [data-elementor-type="header"] .elementor-element-e9c4fd8,
[data-elementor-type="header"].header-scrolled .elementor-element-hw001a1,
[data-elementor-type="header"].header-scrolled .elementor-element-e9c4fd8 {
  background-color: var(--blg-cream) !important;
  background-image: none !important;
}

/* Sombra sutil: en hover de cualquier trigger del header (menú o teléfono)
   y cuando está scrolleado. Acompaña al bg cream que se activa en los
   mismos estados, para que tenga el mismo look entre hover y sticky. */
body.header-menu-hovered [data-elementor-type="header"] .elementor-element-hw001a1,
body.header-menu-hovered [data-elementor-type="header"] .elementor-element-e9c4fd8,
[data-elementor-type="header"].header-scrolled .elementor-element-hw001a1,
[data-elementor-type="header"].header-scrolled .elementor-element-e9c4fd8 {
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08) !important;
}

/* Textos del menú en navy (hover + scroll) */
body.header-menu-hovered [data-elementor-type="header"] .elementor-element-hw001a1 .elementor-nav-menu li a,
body.header-menu-hovered [data-elementor-type="header"] .elementor-element-hw001a1 .elementor-nav-menu--main li a,
body.header-menu-hovered [data-elementor-type="header"] .elementor-element-e9c4fd8 .elementor-nav-menu li a,
body.header-menu-hovered [data-elementor-type="header"] .elementor-element-e9c4fd8 .elementor-nav-menu--main li a,
[data-elementor-type="header"].header-scrolled .elementor-element-hw001a1 .elementor-nav-menu li a,
[data-elementor-type="header"].header-scrolled .elementor-element-hw001a1 .elementor-nav-menu--main li a,
[data-elementor-type="header"].header-scrolled .elementor-element-e9c4fd8 .elementor-nav-menu li a,
[data-elementor-type="header"].header-scrolled .elementor-element-e9c4fd8 .elementor-nav-menu--main li a {
  color: var(--blg-navy) !important;
}

/* Logo oscuro: hover, scrolled, y también cuando el hamburger
   está abierto en mobile/tablet (toggle.elementor-active). */
body.header-menu-hovered [data-elementor-type="header"] img,
body:has(.elementor-menu-toggle.elementor-active) [data-elementor-type="header"] img,
[data-elementor-type="header"].header-scrolled img {
  filter: brightness(0.4);
  transition: filter 0.25s ease;
}

/* Teléfono del header en navy en los mismos estados que el menú.
   `.tel-button` = T38, `.tel-button-2` = T1414. Cubrimos `<i>` (icon font),
   `<svg>` (fill) y el texto.

   `:not(:hover)` en el widget — cuando el cursor está sobre el teléfono,
   nuestra regla deja de matchear y el hover propio del widget (color
   light-green configurado en Elementor) toma control. */
body.header-menu-hovered [data-elementor-type="header"] :is(.tel-button, .tel-button-2):not(:hover) .elementor-icon-list-icon i,
body.header-menu-hovered [data-elementor-type="header"] :is(.tel-button, .tel-button-2):not(:hover) .elementor-icon-list-icon svg,
body.header-menu-hovered [data-elementor-type="header"] :is(.tel-button, .tel-button-2):not(:hover) .elementor-icon-list-text,
body:has(.elementor-menu-toggle.elementor-active) [data-elementor-type="header"] :is(.tel-button, .tel-button-2):not(:hover) .elementor-icon-list-icon i,
body:has(.elementor-menu-toggle.elementor-active) [data-elementor-type="header"] :is(.tel-button, .tel-button-2):not(:hover) .elementor-icon-list-icon svg,
body:has(.elementor-menu-toggle.elementor-active) [data-elementor-type="header"] :is(.tel-button, .tel-button-2):not(:hover) .elementor-icon-list-text,
[data-elementor-type="header"].header-scrolled :is(.tel-button, .tel-button-2):not(:hover) .elementor-icon-list-icon i,
[data-elementor-type="header"].header-scrolled :is(.tel-button, .tel-button-2):not(:hover) .elementor-icon-list-icon svg,
[data-elementor-type="header"].header-scrolled :is(.tel-button, .tel-button-2):not(:hover) .elementor-icon-list-text {
  color: var(--blg-navy) !important;
  fill: var(--blg-navy) !important;
}

/* Botón Contact Us: mantener verde cuando está scrolleado */
[data-elementor-type="header"].header-scrolled .elementor-button {
  background: var(--blg-green) !important;
}

/* ============================================================
   GRADIENT OVERLAY (Figma: dramatic dark fade over hero)
   ============================================================ */

[data-elementor-type="header"]::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 200px;
  background: linear-gradient(180deg,
    rgb(23, 41, 59) 0%,
    rgba(23, 41, 59, 0.85) 25%,
    rgba(23, 41, 59, 0.6) 45%,
    rgba(23, 41, 59, 0.378) 65%,
    rgba(23, 41, 59, 0.147) 80%,
    rgba(23, 41, 59, 0) 100%
  );
  mix-blend-mode: multiply;
  pointer-events: none;
  z-index: -1;
}

/* Ocultar gradiente:
   - En cualquier estado activo (hover, scroll, header-active).
   - En páginas que renderizan T1414 (cream-bg header) — el overlay oscuro fue
     diseñado para el hero oscuro de T38; sobre cream queda como vignette sutil. */
body.header-menu-hovered [data-elementor-type="header"]::before,
[data-elementor-type="header"].header-scrolled::before,
[data-elementor-type="header"].header-active::before,
body:has(.elementor-element-e9c4fd8) [data-elementor-type="header"]::before {
  display: none !important;
}

/* Push body content up under header */
body.elementor-page main,
body main {
  margin-top: 0 !important;
}

/* Hero image should be CLEAR — no uniform wash. Only the bottom gradient for readability. */

/* ============================================================
   Buttons — match Figma exactly
   ============================================================ */

.elementor-button {
  border-radius: 10px !important;
  font-family: "Poppins", sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  padding: 14px 24px !important;
}

/* ============================================================
   Mobile responsiveness polish
   ============================================================ */

@media (max-width: 767px) {
  /* Hero adjustments */
  [data-id="1260993"] .elementor-heading-title {
    font-size: 32px !important;
    line-height: 40px !important;
  }

  /* Section heading sizes */
  .elementor-widget-heading h2.elementor-heading-title {
    font-size: 28px !important;
    line-height: 36px !important;
  }

  /* CTA "Do you have questions" - should be 32px on mobile */
  [data-id="f30aec0"] .elementor-heading-title {
    font-size: 32px !important;
    line-height: 40px !important;
  }

  /* Settlement amounts on mobile */
  [data-id="3e1f51b"] .elementor-heading-title,
  [data-id="df3d728"] .elementor-heading-title {
    font-size: 100px !important;
    line-height: 82px !important;
  }
}

/* ============================================================
   Contact form — Gravity Forms styling
   ============================================================ */

.gform_wrapper input[type="text"],
.gform_wrapper input[type="email"],
.gform_wrapper input[type="tel"],
.gform_wrapper textarea {
  border: 1px solid #d5d4d0 !important;
  border-radius: 10px !important;
  padding: 12px 16px !important;
  font-family: "Poppins", sans-serif !important;
  font-size: 14px !important;
  background: #ffffff !important;
}

.gform_wrapper .gfield_label {
  font-family: "Poppins", sans-serif !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  color: #21374e !important;
}

.gform_wrapper .gform_button {
  background: #1f594a !important;
  color: #ffffff !important;
  border-radius: 10px !important;
  padding: 14px 24px !important;
  font-family: "Poppins", sans-serif !important;
  font-weight: 600 !important;
  border: none !important;
  cursor: pointer !important;
}

/* ============================================================
   Decorative elements
   ============================================================ */

/* Settlement section: dark gradient overlay on right side per Figma */
[data-id="a6fd7b6"] {
  position: relative !important;
  overflow: hidden !important;
}
[data-id="a6fd7b6"]::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 631px;
  height: 100%;
  background: linear-gradient(180deg, rgb(23, 41, 59) 29.868%, rgba(23, 41, 59, 0.823) 65.057%, rgba(23, 41, 59, 0.582) 82.529%, rgba(23, 41, 59, 0) 100%);
  pointer-events: none;
  z-index: 1;
  opacity: 0.6;
}
[data-id="a6fd7b6"] > * {
  position: relative;
  z-index: 2;
}

/* Article cards — rounded corners on images per Figma */
[data-id="a06adf3"] .elementor-widget-image img,
[data-id="0f8e003"] .elementor-widget-image img,
[data-id="9dd0cf9"] .elementor-widget-image img,
[data-id="ddf29e3"] .elementor-widget-image img {
  border-radius: 10px 10px 0 0 !important;
}

[data-id="0f8e003"],
[data-id="9dd0cf9"],
[data-id="ddf29e3"] {
  border-radius: 10px !important;
  overflow: hidden !important;
}

/* Hero — ensure proper centering and width constraints (matches Figma 1179px width for H1) */
[data-id="ef09ea7"] {
  max-width: 1200px !important;
  margin: 0 auto !important;
}
@media (min-width: 1025px) {
  [data-id="1260993"] .elementor-heading-title {
    max-width: 1180px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* Buttons — refined per Figma */
.elementor-button {
  transition: all 0.2s ease !important;
}
.elementor-button:hover {
  background: #2a7361 !important;  /* Slightly lighter green on hover */
  transform: translateY(-1px);
}

/* Section dividers — match Figma color */
.elementor-divider-separator {
  border-color: #d5d4d0 !important;
}

/* Reputation section — featured media card hover */
.bryant-featured-card {
  transition: transform 0.3s ease;
  cursor: pointer;
}
.bryant-featured-card:hover {
  transform: scale(1.02);
}

/* ============================================================
   DESKTOP MEGA MENU (per Figma node 217:30)
   - Header background turns cream when item is hovered
   - Practice Areas dropdown becomes a full-width 4-column panel
   - Rest of page gets dark overlay
   ============================================================ */

/* When hovering top-level menu item with submenu, header gets cream bg */
[data-elementor-type="header"] {
  transition: background-color 0.25s ease;
}

body.header-menu-hovered [data-elementor-type="header"],
[data-elementor-type="header"].header-active {
  background: var(--blg-cream) !important;
}

/* Submenu — full-width panel below header, only visible on hover
   NOTE: Need higher specificity than Elementor Pro's widget-nav-menu.min.css which has:
   `.elementor-nav-menu--layout-horizontal .elementor-nav-menu > li ul { top: 100% !important }`
   We use [data-elementor-type] prefix to win the cascade.
*/
@media (min-width: 1025px) {
  /* Default state: hide all submenus */
  [data-elementor-type="header"] .elementor-nav-menu--layout-horizontal .elementor-nav-menu > li > .sub-menu {
    display: none !important;
    opacity: 0;
    visibility: hidden;
  }

  /* Practice Areas (first child) — full-width mega menu */
  [data-elementor-type="header"] .elementor-nav-menu--layout-horizontal .elementor-nav-menu > li.menu-item-54 > .sub-menu {
    background: var(--blg-cream) !important;
    border-radius: 0 !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) !important;
    padding: 40px 80px 60px !important;
    border-top: 1px solid var(--blg-border) !important;

    position: fixed !important;
    top: 100px !important;
    left: 0 !important;
    right: 0 !important;
    bottom: auto !important;
    width: 100vw !important;
    min-width: 100vw !important;
    max-width: 100vw !important;
    margin: 0 !important;
    transform: none !important;

    grid-template-columns: repeat(4, 1fr);
    gap: 16px 40px;
    z-index: 1000;
  }

  /* Hover bridge — invisible area connecting nav item to dropdown so mouse can transition */
  [data-elementor-type="header"] .elementor-nav-menu > li.menu-item-has-children::before {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: 60px;
    background: transparent;
    pointer-events: none;
  }
  [data-elementor-type="header"] .elementor-nav-menu > li.menu-item-has-children:hover::before {
    pointer-events: auto;
  }
  /* Add a delay so dropdown doesn't close immediately when mouse leaves */
  [data-elementor-type="header"] .elementor-nav-menu > li.menu-item-has-children > .sub-menu {
    transition: opacity 0.15s ease, visibility 0s linear 0.3s !important;
  }
  [data-elementor-type="header"] .elementor-nav-menu > li.menu-item-has-children:hover > .sub-menu {
    transition: opacity 0.15s ease, visibility 0s linear 0s !important;
  }
  [data-elementor-type="header"] .elementor-nav-menu--layout-horizontal .elementor-nav-menu > li.menu-item-54:hover > .sub-menu,
  [data-elementor-type="header"] .elementor-nav-menu--layout-horizontal .elementor-nav-menu > li.menu-item-54.menu-open > .sub-menu,
  [data-elementor-type="header"] .elementor-nav-menu--layout-horizontal .elementor-nav-menu > li.menu-item-54:focus-within > .sub-menu {
    display: grid !important;
    opacity: 1;
    visibility: visible;
  }

 /* Other parent items (Our Firm, Results, Resources) — smaller dropdown */
[data-elementor-type="header"] .elementor-nav-menu--layout-horizontal .elementor-nav-menu > li:not(.menu-item-54).menu-item-has-children > .sub-menu {
  background: var(--blg-cream) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) !important;
  padding: 16px 0 !important;
  border-top: none !important;
  border-radius: 0 0 10px 10px !important;

  position: absolute !important;
  top: 100% !important;
  margin-top: 0 !important;
  left: 0 !important;
  width: auto !important;
  min-width: 220px !important;
  max-width: 280px !important;

  z-index: 1000;
}

[data-elementor-type="header"] .elementor-nav-menu--layout-horizontal .elementor-nav-menu > li:not(.menu-item-54).menu-item-has-children:hover > .sub-menu,
[data-elementor-type="header"] .elementor-nav-menu--layout-horizontal .elementor-nav-menu > li:not(.menu-item-54).menu-item-has-children.menu-open > .sub-menu,
[data-elementor-type="header"] .elementor-nav-menu--layout-horizontal .elementor-nav-menu > li:not(.menu-item-54).menu-item-has-children:focus-within > .sub-menu {
  display: block !important;
  opacity: 1;
  visibility: visible;
}

/* Asegurar que el <li> padre ocupe toda la altura del header */
[data-elementor-type="header"] .elementor-nav-menu--layout-horizontal .elementor-nav-menu > li.menu-item-has-children {
  display: flex !important;
  align-items: center !important;
  height: 72px !important;
}

  /* Submenu link styling — applies to all dropdowns */
  [data-elementor-type="header"] .elementor-nav-menu .sub-menu li {
    width: auto !important;
    list-style: none !important;
    position: relative !important;
  }

  /* Hide nested sub-sub-menus (e.g., Our Team children) */
  [data-elementor-type="header"] .elementor-nav-menu .sub-menu .sub-menu {
    display: none !important;
  }
}

.elementor-nav-menu .sub-menu li a {
  color: var(--blg-text-secondary) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  padding: 6px 0 !important;
  border: none !important;
  background: transparent !important;
}
.elementor-nav-menu .sub-menu li a:hover {
  color: var(--blg-green) !important;
  background: transparent !important;
}

/* Page overlay when menu is open (dark gray with multiply) */
body.menu-overlay-active::before,
body.header-menu-hovered::before {
  content: '';
  position: fixed;
  top: 100px;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(106, 105, 102, 0.6);
  z-index: 99;
  mix-blend-mode: multiply;
  pointer-events: none;
}

/* Active item indicator — line under hovered/active top-level menu item.
   SOLO desktop: en mobile/tablet el menú es vertical, una línea horizontal
   debajo del link se ve como border, no como indicador de activo. */
.elementor-nav-menu > li > a {
  position: relative !important;
}
@media (min-width: 1025px) {
  .elementor-nav-menu > li.menu-item-has-children:hover > a::after,
  .elementor-nav-menu > li.current-menu-item > a::after,
  .elementor-nav-menu > li.current-menu-parent > a::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 0;
    right: 0;
    height: 1.5px;
    background: var(--blg-navy);
  }
}

/* ============================================================
   MOBILE MENU (per Figma node 445:2251) — open state styling
   ============================================================ */

@media (max-width: 1024px) {
  /* Sub-menus inside the mobile dropdown render as inline accordion items
     (indented under their parent) instead of stacking as a new overlay.
     IMPORTANT: scope to `nav.` because Elementor reuses the class
     `elementor-nav-menu--dropdown` on the inner <ul class="sub-menu …">
     too — sin scope, expandir un submenú lo convertiría en otro overlay. */
  nav.elementor-nav-menu--dropdown ul.sub-menu {
    position: static !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 0 0 0 16px !important;
    margin: 0 !important;
    z-index: auto !important;
  }

  /* SmartMenus injects <span class="sub-arrow"> next to parent items —
     paint it navy y rotamos 180° cuando el submenú está abierto para que
     funcione como indicador visual de "tap para cerrar".
     Usamos `bryant-open` (nuestra clase) en vez de `menu-open` (SmartMenus)
     porque SmartMenus reescribe la suya y rompe el toggle.

     IMPORTANTE: rotamos el <svg> interno, no el <span> contenedor.
     El span mide 24×36 (display: block en SmartMenus) y el svg vive
     en (10, 10) dentro — desfasado 5px del centro del span. Rotar el
     span hacía que el svg trazara un arco hacia el texto durante la
     animación. Rotando el svg en su propio centro queda en su lugar. */
  nav.elementor-nav-menu--dropdown .sub-arrow {
    color: var(--blg-navy) !important;
  }
  nav.elementor-nav-menu--dropdown .sub-arrow svg {
    display: inline-block;
    transition: transform 0.2s ease;
    transform-origin: center;
  }
  nav.elementor-nav-menu--dropdown li.bryant-open > a > .sub-arrow svg {
    transform: rotate(180deg);
  }

  nav.elementor-nav-menu--dropdown li {
    border: none !important;
    border-bottom: 1px solid var(--blg-border) !important;
  }

  /* Soften borders on nested sub-items so the accordion doesn't look noisy */
  nav.elementor-nav-menu--dropdown ul.sub-menu li {
    border-bottom: none !important;
  }

  nav.elementor-nav-menu--dropdown li a {
    color: var(--blg-navy) !important;
    font-family: var(--blg-font-sans) !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    text-transform: uppercase !important;
    letter-spacing: 3px !important;
    padding: 16px 0 !important;
    background: transparent !important;
  }

  nav.elementor-nav-menu--dropdown .sub-menu li a {
    text-transform: none !important;
    letter-spacing: 0 !important;
    font-weight: 500 !important;
    color: var(--blg-text-secondary) !important;
    padding: 10px 0 !important;
  }

  /* Hamburger toggle styling — default cream over the dark hero photo */
  .elementor-menu-toggle {
    color: var(--blg-cream) !important;
  }

  /* When menu is open, hamburger becomes X (navy on cream overlay) */
  .elementor-menu-toggle.elementor-active {
    color: var(--blg-navy) !important;
  }

  /* Hamburger navy when header has solid background (scrolled state).
     En T1414 el `toggle_color` está configurado navy nativo en el widget. */
  [data-elementor-type="header"].header-scrolled .elementor-menu-toggle {
    color: var(--blg-navy) !important;
  }

  /* Header cream + shadow cuando el menú móvil está abierto.
     Usa :has() para detectar el toggle activo sin tocar JS. */
  body:has(.elementor-menu-toggle.elementor-active) [data-elementor-type="header"] .elementor-element-hw001a1,
  body:has(.elementor-menu-toggle.elementor-active) [data-elementor-type="header"] .elementor-element-e9c4fd8 {
    background-color: var(--blg-cream) !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08) !important;
  }
}

/* ============================================================
   Global horizontal overflow containment.
   Widgets como el testimonial Swiper en About Us posicionan slides
   más allá del viewport; sin esto, mobile WebKit ensancha el layout
   viewport para acomodarlos y empuja al hamburger fuera de pantalla.
   ============================================================ */
html, body {
  overflow-x: clip;
}

/* ============================================================
   A11y: distinguishable inline links (axe link-in-text-block, WCAG 1.4.1).
   Inline links inside content widgets must be distinguishable from the
   surrounding text without relying on color alone. Underline is the
   universal indicator. Excludes Elementor buttons.
   ============================================================ */
.elementor-widget-text-editor a:not(.elementor-button),
.elementor-widget-theme-post-content a:not(.elementor-button),
.elementor-widget-html a:not(.elementor-button) {
  text-decoration: underline;
}


/* ============================================================
   ROUND 7 — WCAG AA contrast fix for Posts widget excerpts.
   Elementor Pro default in widget-posts.min.css sets #777 on
   .elementor-post__excerpt p, which fails AA 4.5 on cream (4.0).
   Override with --blg-text-secondary #636363 → ratio 5.21 ✓.
   ============================================================ */
.elementor-posts .elementor-post__excerpt p {
  color: var(--blg-text-secondary) !important;
}

/* ============================================================
   A11y: testimonial carousel pagination bullets — expand the touch
   target to 24x24px (WCAG 2.5.8 Target Size Minimum, AA in WCAG 2.2).
   The visible dot stays small (6px) via background-clip:content-box;
   the surrounding padding becomes the hit area. Scoped to the home
   testimonial swiper so other carousels stay untouched.
   ============================================================ */
.elementor-main-swiper .swiper-pagination-bullet {
  width: 24px !important;
  height: 24px !important;
  padding: 9px !important;
  box-sizing: border-box !important;
  background-clip: content-box !important;
}

/* ============================================================
   FAQs CPT — visual parity with the original Elementor Toggle widget.
   The original widget's styling lived in its scoped Custom CSS (Elementor's
   `selector .elementor-tab-title::after` pattern), so it doesn't apply to
   the new JetEngine-rendered items. Re-apply the equivalent styling here,
   targeting `.bryant-faq-item` which is added by the [bryant_faq_item]
   shortcode in functions.php.

   Source of truth for values: dumped from the original toggle widget's
   `_elementor_data` settings (border_color #d5d4d0, title #21374e Poppins
   500 20px, content #636363 16px, icon color #1f594a, custom SVG via ::after).
   ============================================================ */
.bryant-faq-item {
  border-bottom: 1px solid #d5d4d0;
}
.bryant-faq-item .elementor-tab-title {
  position: relative;
  padding: 15px 50px 15px 0;
  cursor: pointer;
  color: #21374e;
  font-family: Poppins, sans-serif;
  font-weight: 500;
  font-size: 20px;
  line-height: 1.4;
  margin: 0;
}
@media (max-width: 767px) {
  .bryant-faq-item .elementor-tab-title { font-size: 16px; padding-right: 40px; }
}
.bryant-faq-item .elementor-toggle-title {
  color: inherit;
  text-decoration: none;
  font-weight: inherit;
}
.bryant-faq-item .elementor-tab-title::after {
  content: "";
  position: absolute;
  right: 10px;
  top: 50%;
  width: 30px;
  height: 30px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30' fill='none'><circle cx='15' cy='15' r='14.25' stroke='%231F594A' stroke-width='1.5'/><path d='M10 12.8571L15.7143 18.5714L21.4286 12.8571' stroke='%231F594A' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  transform: translateY(-50%);
  transition: transform 0.3s ease;
  pointer-events: none;
}
.bryant-faq-item .elementor-tab-title.elementor-active::after {
  transform: translateY(-50%) rotate(180deg);
}
.bryant-faq-item .elementor-tab-content {
  color: #636363;
  font-family: Poppins, sans-serif;
  font-size: 16px;
  line-height: 24px;
  padding: 0 0 15px 0;
}
/* Hide the unused +/- icon spans from the shortcode (we draw the icon via
   ::after on the title to match the original SVG). */
.bryant-faq-item .elementor-toggle-icon {
  display: none;
}

/* Category filter buttons — ensure WCAG AA (4.5:1) contrast on the inactive
   state. The default Elementor styling sits at 4.43:1 (pink on cream), failing
   AA by 0.07. Force navy text on inactive (≈10:1 on cream); keep the active
   state's pink fill + white text untouched. */
.bryant-faq-filter-btn:not(.is-active),
.bryant-faq-filter-btn:not(.is-active):hover,
.bryant-faq-filter-btn:not(.is-active):focus {
  color: var(--blg-navy, #21374e) !important;
}
.bryant-faq-filter-btn.is-active {
  color: #ffffff !important;
  background-color: #cc3366 !important;
  border-color: #cc3366 !important;
}

/* UX: hide the Search submit button on the FAQs page only — the live filter
   (input event in faqs.js) already runs on every keystroke, so the button is
   redundant and confusing. Submitting via Enter still works (the form
   submit handler also calls the filter). Scope tightly to the FAQs page so
   other site-wide Elementor Search Form widgets stay unaffected. */
body.page-id-897 form.e-search-form button[type="submit"],
body.page-id-897 form.e-search-form .e-search-submit {
  display: none !important;
}
body.page-id-897 form.e-search-form .e-search-input-wrapper,
body.page-id-897 form.e-search-form > div:first-child {
  flex: 1 1 100% !important;
  width: 100% !important;
}

/* Live results counter — appears above the FAQ listing. aria-live=polite
   announces updates to screen readers as the user types or clicks filters. */
.bryant-faq-count {
  font-family: Poppins, sans-serif;
  font-size: 14px;
  color: var(--blg-text-secondary, #636363);
  padding: 12px 0 18px;
  margin: 0;
  font-style: italic;
}
.bryant-faq-count.is-empty {
  color: var(--blg-navy, #21374e);
  font-style: normal;
  font-weight: 500;
  text-align: center;
  padding: 32px 0;
  font-size: 16px;
}