/*
 * site-fixes.css
 * Minimal, surgical overrides. Only rules that do NOT change layout.
 * Any fix that touches sizing, spacing, columns, or visibility must
 * be made at the HTML/widget level on the specific page that needs
 * it — not here.
 */

/*  Description text color
 *  Several .ekit-heading__description blocks inherit
 *  --e-global-color-primary (brand blue) for body copy on
 *  white backgrounds. Force readable dark gray; in-text links
 *  inside the description still inherit normal link color from
 *  their own anchor styling.
 */
.ekit-heading__description p,
.ekit-heading__description span:not([style*="color"]) {
  color: #2b3a4a;
}

/* Mobile sticky CTA — Call Now button
 * The blue Call Now button was rendering visually dimmed on mobile
 * because some pages let the global anchor :visited color (a desaturated
 * blue) leak through, and the iOS tap-highlight overlay further muddies
 * the look. Pin the foreground to solid white at every state, and turn
 * off the system tap highlight so the button always reads as a crisp
 * primary CTA. The SVG inherits via currentColor.
 */
.k-sticky-cta__btn--call,
.k-sticky-cta__btn--call:link,
.k-sticky-cta__btn--call:visited,
.k-sticky-cta__btn--call:hover,
.k-sticky-cta__btn--call:active,
.k-sticky-cta__btn--call:focus {
  color: #ffffff !important;
  opacity: 1 !important;
  -webkit-tap-highlight-color: transparent;
}
.k-sticky-cta__btn--call svg {
  fill: currentColor !important;
}

/* Mobile responsiveness safety net.
 * Prevents the most common phone-rendering bugs site-wide without
 * touching desktop layout. All rules scoped to <= 768px.
 */
@media (max-width: 768px) {
  /* Stop any element from forcing horizontal scroll. */
  html, body {
    overflow-x: hidden;
    max-width: 100%;
  }
  body * {
    max-width: 100%;
  }
  /* Long URLs / unbroken strings wrap instead of overflowing. */
  p, li, h1, h2, h3, h4, h5, h6, td, th, a {
    overflow-wrap: anywhere;
    word-wrap: break-word;
  }
  /* Wide content tables become horizontally scrollable so cells
   * don't crush; preserves the table layout, no visual change on
   * desktop. */
  table {
    max-width: 100%;
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  table tbody, table thead, table tr {
    display: table;
    width: 100%;
    table-layout: fixed;
  }
  /* Images never exceed their container. */
  img {
    max-width: 100%;
    height: auto;
  }
  /* iframes (forms, maps, videos) cap to viewport width. */
  iframe {
    max-width: 100%;
  }
  /* The HighLevel form iframes embedded on the homepage and patient-
   * referral page have hard-coded large heights; on phones they
   * still need to fit horizontally. */
  iframe[src*="link.starfishadage.agency/widget/form"] {
    width: 100% !important;
  }
}

/* Flip-book PDF gating page — 2-up on desktop, stacked on mobile.
 * The inline grid was hard-coded to 1fr 1fr which squished the form
 * column to ~150px on a phone, making the inputs unusable.
 */
.k-flipbook-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}
@media (max-width: 768px) {
  .k-flipbook-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
}

/* Mobile burger menu — show dropdown when toggled open.
 * The Elementor frontend.min.js fails to attach the burger click
 * handler on this static export. Paired with
 * assets/js/mobile-menu-toggle.js, this CSS reveals the dropdown
 * when the JS sets data-state="opened" on it.
 *
 * IMPORTANT: only target nav.elementor-nav-menu--dropdown (the
 * top-level container). NOT ul.elementor-nav-menu--dropdown,
 * which is the class Elementor also gives to sub-menu <ul>s
 * inside the desktop menu.
 */
@media (max-width: 1024px) {
  /* Hide the burger's dropdown <nav> by default — only the
   * top-level <nav> tag, never the sub-menu ULs that share the
   * class.
   */
  nav.elementor-nav-menu--dropdown:not([data-state="opened"]):not(.k-menu-open) {
    display: none;
  }
  /* Show it when toggled open. Use position:fixed so no ancestor
   * overflow:hidden can clip the panel — common bug with Elementor
   * widget containers that have overflow:hidden for shadow effects.
   */
  nav.elementor-nav-menu--dropdown[data-state="opened"],
  nav.elementor-nav-menu--dropdown.k-menu-open {
    display: block !important;
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #ffffff;
    z-index: 99998;
    padding: 4rem 0 5rem;
    box-shadow: none;
    max-height: 100vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  /* Close-X button drawn via CSS on the toggle when menu is open. */
  .elementor-menu-toggle[aria-expanded="true"] {
    position: fixed !important;
    top: 1rem;
    right: 1rem;
    z-index: 99999;
    background: #ffffff;
    border-radius: 50%;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    padding: 0.5rem;
  }
  /* Inner UL of the opened dropdown — show as a vertical list. */
  nav.elementor-nav-menu--dropdown[data-state="opened"] > .elementor-nav-menu,
  nav.elementor-nav-menu--dropdown.k-menu-open > .elementor-nav-menu {
    display: block !important;
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  nav.elementor-nav-menu--dropdown[data-state="opened"] .elementor-nav-menu > li,
  nav.elementor-nav-menu--dropdown.k-menu-open .elementor-nav-menu > li {
    display: block !important;
    width: 100%;
    border-bottom: 1px solid #f0f3f7;
    list-style: none;
  }
  nav.elementor-nav-menu--dropdown[data-state="opened"] .elementor-nav-menu > li:last-child,
  nav.elementor-nav-menu--dropdown.k-menu-open .elementor-nav-menu > li:last-child {
    border-bottom: 0;
  }
  nav.elementor-nav-menu--dropdown[data-state="opened"] .elementor-nav-menu > li > a,
  nav.elementor-nav-menu--dropdown.k-menu-open .elementor-nav-menu > li > a {
    display: block;
    padding: 0.85rem 1.25rem;
    color: #0d2c54;
    font-weight: 500;
    text-decoration: none;
  }
  nav.elementor-nav-menu--dropdown[data-state="opened"] .elementor-nav-menu > li > a:hover,
  nav.elementor-nav-menu--dropdown.k-menu-open .elementor-nav-menu > li > a:hover {
    background: #f6f8fa;
  }
  /* Sub-menu UL inside the open burger — show inline, indented. */
  nav.elementor-nav-menu--dropdown[data-state="opened"] ul.sub-menu,
  nav.elementor-nav-menu--dropdown.k-menu-open ul.sub-menu {
    display: block !important;
    padding: 0 0 0 1rem;
    margin: 0;
    background: #fafbfd;
    list-style: none;
  }
  nav.elementor-nav-menu--dropdown[data-state="opened"] ul.sub-menu > li > a,
  nav.elementor-nav-menu--dropdown.k-menu-open ul.sub-menu > li > a {
    padding: 0.6rem 1.25rem;
    font-size: 0.95em;
    color: #2b3a4a;
    display: block;
    text-decoration: none;
  }
  /* Container needs to be a positioning context for the dropdown. */
  .elementor-widget-nav-menu {
    position: relative;
  }
}

/* Conciergeonsite chat widget — lift above the sticky CTA on mobile.
 * The widget injects via Google Tag Manager and parks its bubble at
 * `bottom: 20px` by default, which on phones sits behind the 80px-tall
 * sticky CTA bar. We can't reach into its shadow DOM but we can shift
 * the visible chat bubble + its iframe container up to clear the bar.
 */
@media (max-width: 768px) {
  iframe[src*="conciergeonsite"],
  [id*="conciergeonsite" i],
  [class*="conciergeonsite" i],
  [id^="chat-widget-container"],
  [class*="chat-widget-container"] {
    bottom: 96px !important;
  }
}