/* Post-migration polish CSS (loaded as a real <link> in layout.tsx).
   Add rules here when a polish change needs styling the migrated theme CSS
   doesn't already cover. Keep selectors tight so nothing else is affected. */

/* CUST-86: the header "Call Us" was a hover-dropdown trigger built as a <span>
   (.outer-icon-and-text). It's now a direct tel: link, so the element became an
   <a> — which picked up the UA default link color (the phone icon bled blue).
   Restore the original white icon+label, gold on hover to match the theme accent
   (mirrors the theme's own `.ek-phone-numbers-wrapper a *` rule). */
.call-us-drop-down a.outer-icon-and-text,
.call-us-drop-down a.outer-icon-and-text * { color: #fff; }
.call-us-drop-down a.outer-icon-and-text:hover,
.call-us-drop-down a.outer-icon-and-text:hover * { color: #a5a06e; }
/* ...and keep the phone icon + "Call Us" on one line — the theme makes
   .call-text display:flex (block-level), which dropped it below the icon. */
.call-us-drop-down a.outer-icon-and-text { display: inline-flex; align-items: center; gap: 6px; }

/* CUST-86: footer email — the envelope ships as a display:block .fontawesome-icon
   sibling of the <p>Email:</p>; the .ft-email flex row normally keeps them on one
   line, but if the row fails to apply the block icon drops to its own line and
   reads as an empty line above the text. Pin it inline + vertically centered. */
footer .footer-box .ft-email { align-items: center; }
footer .footer-box .ft-email .fontawesome-icon { display: inline-block; }

/* CUST-86: mobile bottom tab bar refresh-visibility bug. The bar shows only
   at <1024px (CSS), but theme JS (delayed-scripts.js) force-shows it with an
   inline display:block on first scroll whenever mobileDevice (<=1200px) — so in
   the 1024–1200px band the bar wrongly appears after scrolling, and the inline
   style then sticks across resizes (and the .scrollup diamond, gated at
   <=1023px, is absent there → bare top-left arrow). Make the >=1024px hide win
   over the inline style so visibility stays purely viewport-reactive like live. */
@media screen and (min-width: 1024px) {
  .footer-icons { display: none !important; }
}

/* CUST-86 batch F: FAQ accordion slide. The Bootstrap-collapse handler in
   polish.js swaps a panel to `.collapsing` while animating its height; give it
   the height transition (live's accordions slide; ours snapped). Scoped to the
   accordion so nothing else is affected. */
.accordion_design_one .collapsing {
  position: relative;
  height: 0;
  overflow: hidden;
  transition: height 0.35s ease;
}

/* CUST-86 batch F: 404 masthead. Scoped to .error-404-masthead — a class baked
   onto the /404/ banner in the static HTML — NOT body.error404, which is set by
   a client-side script that the Vercel-served 404.html doesn't reliably apply
   (the overlay stayed at the donor's opacity:0 on the preview). The stop-sign
   404.jpg is light, so the white header/caption need the dark overlay (0.5,
   matching live). The caption is pinned absolutely-centered in white. */
.error-404-masthead { position: relative !important; }
/* Define the overlay pseudo FULLY here (content/position/size/background) — don't
   rely on the theme's base `.inner-page-banner:before` rule: it lives in the
   donor page's body, which the /404/ build replaces, so without `content` no
   ::before is generated and there's no overlay at all. */
.error-404-masthead::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background: rgba(0, 0, 0, 0.5) !important;
  z-index: 100 !important;
  pointer-events: none;
}
.error-404-masthead .inner-banner-container {
  position: absolute !important;
  left: 0; right: 0;
  top: auto !important;
  bottom: 60px !important;
  text-align: center !important;
  color: #fff !important;
  background: transparent !important;
  transform: none !important;
  z-index: 200;
}
.error-404-masthead .inner-banner-container h1,
.error-404-masthead .inner-banner-container a,
.error-404-masthead .inner-banner-container span { color: #fff !important; }

/* CUST-86 batch F: carousel nav styling that the migration didn't carry.
   Homepage "Before & After": the theme styles the nav <i> white via
   var(--office-tour-color-2), which the capture left unset → dark arrows.
   Pin it white (the i:after tail line already ships white). */
.home-before-after .home-ba-carousel .owl-theme .owl-nav button i { color: #fff; }

/* Service-page "Before & After Photos": the `.before-after-inner .owl-nav` rules
   (flex, centered, 38px <i>) weren't captured, so owl's tiny default showed.
   Restore them verbatim from the source block. */
.before-after-inner .owl-nav {
  display: flex !important;
  justify-content: space-between;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% + 70px);
  pointer-events: none;
}
.before-after-inner .owl-nav button { padding: 12px; pointer-events: all; }
.before-after-inner .owl-nav button i { font-size: 38px; }
.before-after-inner .owl-nav button:hover i { color: #796000; }
.before-after-inner .owl-nav button:hover { background-color: transparent !important; }

/* "Featured In" (ekwa-owl-carousel / bizgrow): the plugin CSS wasn't captured,
   so owl's default nav appeared AND the block's own SVG nav had no positioning
   (both stuck left). Position the custom nav (prev left / next right) inside the
   relative wrapper, mirroring the plugin's style.scss. */
.bizgrow-carousel-wrapper { position: relative; padding-left: 40px; padding-right: 40px; }
.bizgrow-carousel-wrapper .owl-nav { display: none; } /* plugin hides owl's default nav; only the custom .bizg-owl-* nav shows */
.bizg-owl-prev, .bizg-owl-next { position: absolute; top: 50%; transform: translateY(-50%); cursor: pointer; }
.bizg-owl-prev { left: 0; }
.bizg-owl-next { right: 0; }
.bizg-owl-prev.disabled, .bizg-owl-next.disabled { opacity: 0.3; cursor: default; }

/* CUST-86: Cherry financing widget (#all) ships with max-width:40dvw and sits
   left-aligned in its full-width column (matches live). Per the ticket, center
   it in the page like the CareCredit box below it. margin:auto is a no-op on
   mobile where the widget's own CSS sets max-width:100dvw. */
.finance-page #all { margin-left: auto; margin-right: auto; }

/* CUST-104: client-side search results (rendered by polish.js initSearch into
   the homepage .main-content when ?s= is present). Minimal styling to match the
   site — readable list, themed links, comfortable spacing. */
/* The homepage nav (.menu-box) is position:fixed and transparent over the hero;
   with the hero hidden for search it'd be invisible over the white results, so
   force its solid scrolled-state background + keep it shown. */
body.kirwan-search-active header.header .menu-box { display: block !important; background-color: rgba(0, 0, 0, 0.85) !important; }
/* top padding clears the ~81px fixed nav bar */
.search-results { padding: 110px 0 60px; }
.search-results .page-title { margin-bottom: 30px; font-size: 30px; line-height: 1.4; }
.search-results .search-status { margin-bottom: 24px; font-style: italic; opacity: 0.8; }
/* in-place re-search bar */
.search-results__form { display: flex; gap: 10px; max-width: 520px; margin: 0 0 30px; }
.search-results__input { flex: 1; min-width: 0; padding: 12px 16px; border: 1px solid #ccc; font-size: 16px; }
.search-results__btn { display: inline-flex; align-items: center; justify-content: center; padding: 12px 26px; border: 0; background: #a5a06e; color: #fff; font-size: 15px; cursor: pointer; white-space: nowrap; }
.search-results__btn:hover { background: #796000; }
.search-results-list { list-style: none; margin: 0; padding: 0; }
.search-results-list li { padding: 18px 0; border-bottom: 1px solid #e5e5e5; }
.search-results-list .entry-title { margin: 0 0 6px; font-size: 20px; line-height: 1.3; }
.search-results-list .entry-title a { color: #a5a06e; text-decoration: none; }
.search-results-list .entry-title a:hover { text-decoration: underline; }
.search-results-list .entry-summary { margin: 0; font-size: 15px; line-height: 1.55; }