/* Mirror fixes — patches for visual issues discovered during Stage 2 verification.
   Each rule documents what it fixes and why. */

/* Blog post hero — restore the AdobeStock hero image visibility.
   The live site's ::before pseudo-element applies a near-black gradient overlay
   (linear-gradient(transparent → #100A02)) on top of the hero bg-image, hiding it
   almost entirely. Replace with a light dark overlay so the image is visible
   while keeping enough contrast for the title to remain readable. */
.elementor-450 .elementor-element.elementor-element-59c0d25::before,
.elementor-450 .elementor-element.elementor-element-59c0d25 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before,
.inner-banner-main::before {
  background-image: linear-gradient(180deg, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.5) 100%) !important;
}

/* Blog post hero title — was illegible white-on-light text. Force light cream text
   that reads well on top of the now-darkened hero image. */
.elementor-element.elementor-element-c5e46ae .elementor-heading-title,
.inner-banner-main .elementor-heading-title {
  color: #fffaf0 !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
}

/* Blog post eyebrow label (e.g. "DENTAL IMPLANTS") — same fix, lighter weight */
.elementor-element.elementor-element-e8f8f1c .elementor-heading-title,
.inner-banner-main .elementor-element[data-widget_type="heading.default"]:first-of-type .elementor-heading-title {
  color: #fffaf0 !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

/* ============================================================
   Mobile header — simplified (Gaurav 2026-05-15)
   Just hide the phone-number text widget + BOOK NOW bar.
   Leave Elementor's responsive header layout intact (logo + hamburger).
============================================================ */
@media (max-width: 767px) {
  /* Hide the phone number text widget (the bare "(206) 539-1725" line) */
  .elementor-element-5be0b8dc,
  .elementor-element-54c3360 {
    display: none !important;
  }
  /* Hide the BOOK NOW bar at bottom of header */
  .elementor-element-cfc4229 {
    display: none !important;
  }
}


/* Center the Instagram icon in the footer (was left-aligned) — Gaurav 2026-05-15 */
.elementor-element-4b4cde35,
.elementor-element-4b4cde35 .elementor-widget-container,
.elementor-element-4b4cde35 .elementor-social-icons-wrapper {
  text-align: center !important;
  justify-content: center !important;
}


/* ============================================================
   Mobile header — 3-column layout (Gaurav 2026-05-15 redo)
   ☰ Menu (left, absolute) | Logo (center) | Call (right, absolute)
   Done via absolute positioning on the icons WITHOUT touching wrapper
   display modes (which broke the nav menu last time).
============================================================ */
@media (max-width: 767px) {
  /* Header becomes the positioning anchor */
  .elementor-element-691246c2 > .e-con-inner {
    position: relative !important;
  }
  .elementor-element-691246c2 > .e-con-inner {
    padding: 12px 56px !important;
    min-height: 70px !important;
    text-align: center !important;
  }

  /* Logo: center via flex item, allow full available width */
  .elementor-element-32b19d7 {
    width: auto !important;
    flex: 1 1 auto !important;
    text-align: center !important;
    justify-content: center !important;
  }
  .elementor-element-32b19d7 .elementor-widget-container {
    text-align: center !important;
  }
  .elementor-element-32b19d7 img {
    max-width: 200px !important;
    height: auto !important;
    margin: 0 auto !important;
  }

  /* Right column: don't touch display — let nav menu work normally — just shrink */
  .elementor-element-7ac28793 {
    flex: 0 0 auto !important;
    width: 0 !important;
    height: 0 !important;
    overflow: visible !important;
    position: static !important;
  }

  /* Hamburger nav menu → absolute LEFT of header */
  .elementor-element-43ce3766 {
    position: absolute !important;
    left: 8px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    margin: 0 !important;
    z-index: 10 !important;
  }
  .elementor-element-43ce3766 .elementor-menu-toggle {
    margin: 0 !important;
    padding: 6px !important;
    font-size: 26px !important;
    background: transparent !important;
    color: #1D87B3 !important;
  }

  /* Phone widget → absolute RIGHT, replace text with phone icon */
  .elementor-element-5be0b8dc {
    position: absolute !important;
    right: 8px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    margin: 0 !important;
    padding: 0 !important;
    width: auto !important;
    z-index: 10 !important;
    display: block !important;     /* override the display:none from earlier rule */
  }
  .elementor-element-54c3360 {
    display: block !important;
    width: auto !important;
    padding: 0 !important;
  }
  .elementor-element-54c3360 .elementor-icon-list-text {
    display: none !important;
  }
  .elementor-element-54c3360 .elementor-icon-list-items {
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
  }
  .elementor-element-54c3360 .elementor-icon-list-item {
    margin: 0 !important;
    padding: 0 !important;
  }
  .elementor-element-54c3360 .elementor-icon-list-item a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 6px !important;
    width: 40px !important;
    height: 40px !important;
  }
  .elementor-element-54c3360 .elementor-icon-list-item a::before {
    content: "" !important;
    display: inline-block !important;
    width: 26px !important;
    height: 26px !important;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%231D87B3'><path d='M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z'/></svg>") !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
  }
}


/* Make intermediate header wrappers non-positioned so the hamburger/phone
   absolute positioning anchors to the OUTER header (691246c2). */
@media (max-width: 767px) {
  .elementor-element-7ac28793,
  .elementor-element-703161c5 {
    position: static !important;
  }
}


/* ============================================================
   Sticky bottom 'SCHEDULE AN APPOINTMENT' bar — tap-friendly CTA
   Gaurav 2026-05-15: every account needs this for easy booking
============================================================ */
@media (max-width: 767px) {
  /* The sticky bar container */
  .elementor-element-4b0c022 {
    padding: 14px 16px !important;
    min-height: 58px !important;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.25) !important;
  }
  /* The link text */
  .elementor-element-4b0c022 a,
  .elementor-element-4b0c022 .elementor-button-text {
    font-size: 18px !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
    letter-spacing: 0.5px !important;
  }
  .elementor-element-4b0c022 .elementor-button-icon {
    font-size: 20px !important;
    margin-left: 6px !important;
  }
}