/* Small additions on top of the captured GoHighLevel CSS. */

/* The captured stylesheet already swaps the accordion glyph via
   .hl-faq-child-heading.active .hl-faq-child-heading-icon::before, so the JS
   just needs to toggle .active - no extra rotation here or the two fight. */
.hl-faq-child-heading { user-select: none; }
.hl-faq-child-heading:focus-visible {
  outline: 2px solid var(--color-thxatnva, #d68d4d);
  outline-offset: 2px;
}

/* Keyboard focus is otherwise invisible on this theme. */
a:focus-visible, button:focus-visible, [role="button"]:focus-visible {
  outline: 2px solid var(--color-thxatnva, #d68d4d);
  outline-offset: 2px;
}

/* Footer address block. The GHL rebuild dropped the street address, so the
   site gave no way to find the Merrill display room. Colours are taken from
   the footer's own variables so it matches the columns beside it. */
.pr-visit { margin: 0 0 14px; }
.pr-visit { width: 100%; }
.pr-visit p {
  margin: 0 0 6px;
  font-family: var(--nunito), system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.55;
  /* White to match the headings and legal links already in this footer.
     NOTE: the footer band is #63b3ed, so white text sits at about 2.3:1
     contrast, below the WCAG AA minimum of 4.5:1. That is pre-existing
     across the whole footer, not specific to this block - matching it keeps
     the column consistent. Fixing it properly means darkening the footer
     band or switching all footer text to the navy. */
  color: #ffffff;
}
.pr-visit a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.pr-visit a:hover,
.pr-visit a:focus-visible {
  color: var(--color-thxatnva, #d68d4d);
  border-bottom-color: currentColor;
}
.pr-visit .pr-visit-addr { font-style: normal; }
.pr-visit .pr-visit-note {
  font-size: 13px;
  opacity: .85;
  margin-bottom: 10px;
}

/* Entrance animations (was animate.css from the GHL bundle). */
@keyframes pr_fadeInUp {
  from { opacity: 0; transform: translate3d(0, 24px, 0); }
  to   { opacity: 1; transform: none; }
}
.animate__animated { animation-duration: .7s; animation-fill-mode: both; }
.animate__fadeInUp { animation-name: pr_fadeInUp; }

@media (prefers-reduced-motion: reduce) {
  .animate__animated { animation: none !important; }
  .hl-faq-child-panel { transition: none !important; }
  html { scroll-behavior: auto !important; }
}

/* ------------------------------------------------------------------
   Contact bar. The captured page shipped an EMPTY <h1></h1> and used
   "Services" as its only real h1, so the page had no usable heading.
   This band supplies a real h1 and, more importantly, puts the phone
   number and address in front of someone who is having a bad day and
   should not have to hunt for them.
------------------------------------------------------------------- */
.pr-contactbar{
  background:var(--color-phyyvogi,#051829);
  color:#fff;
  padding:22px 20px;
  font-family:var(--nunito),system-ui,sans-serif;
}
.pr-contactbar-in{
  max-width:1100px;margin:0 auto;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 34px;
}
.pr-cb-id h1{
  margin:0 0 4px;
  font-family:var(--laila),Georgia,serif;
  font-size:clamp(1.25rem,2.4vw,1.7rem);
  font-weight:600;line-height:1.15;color:#fff;
}
.pr-cb-id p{margin:0;font-size:14.5px;color:#c9d8e0;line-height:1.4}

.pr-cb-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 30px}
.pr-cb-phone{
  display:flex;flex-direction:column;text-decoration:none;line-height:1.1;
}
.pr-cb-label{
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--color-thxatnva,#d68d4d);font-weight:700;margin-bottom:3px;
}
.pr-cb-num{
  font-family:var(--laila),Georgia,serif;
  font-size:clamp(1.5rem,3.4vw,2.1rem);font-weight:600;color:#fff;
  letter-spacing:.01em;
}
.pr-cb-phone:hover .pr-cb-num{color:var(--color-thxatnva,#d68d4d)}
.pr-cb-where{margin:0;font-size:14px;line-height:1.5;color:#c9d8e0;max-width:24ch}
.pr-cb-where a{color:#fff;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.35)}
.pr-cb-where a:hover{color:var(--color-thxatnva,#d68d4d);border-bottom-color:currentColor}
.pr-cb-where span{display:block;margin-top:3px;opacity:.8}

@media (max-width:720px){
  .pr-contactbar-in{flex-direction:column;align-items:flex-start;gap:16px}
  .pr-cb-actions{gap:12px 22px}
  .pr-cb-where{max-width:none}
}

/* Footer band was --malibu (#63b3ed). White text on it measured 2.28:1,
   well under the 4.5:1 minimum. Repainting just this section to the brand
   navy takes the same white text to roughly 17:1. Scoped to the footer so
   buttons and the FAQ headers keep their blue. */
.hl_page-preview--content .section-9izJbQjevH{
  background-color:var(--color-phyyvogi,#051829)!important;
}

/* Testimonial "Read more". GHL clamps the text to 4 lines with
   -webkit-line-clamp and expanded it from its own JS, which we removed, so
   the buttons were inert. The clamp rule is ID-scoped (high specificity),
   hence !important here. */
.testimonial-content-text.pr-expanded{
  display:block!important;
  -webkit-line-clamp:unset!important;
  max-height:none!important;
  overflow:visible!important;
}
.read-more-button{font-family:var(--nunito),system-ui,sans-serif}

/* Call button beneath the number, for phones where tapping matters most. */
.pr-cb-callcol{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.pr-cb-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:var(--color-thxatnva,#d68d4d);color:#1a0f05;
  font-family:var(--nunito),system-ui,sans-serif;
  font-size:14.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  text-decoration:none;padding:11px 24px;border-radius:5px;
  transition:background .18s ease,transform .12s ease;
}
.pr-cb-btn:hover{background:#e39a5c;transform:translateY(-1px)}
.pr-cb-btn:active{transform:translateY(0)}
.pr-cb-btn svg{flex:none}
@media (max-width:720px){
  .pr-cb-callcol{align-items:stretch;width:100%}
  .pr-cb-btn{width:100%;padding:14px 24px;font-size:15.5px}
}

/* ---------- Mobile menu -------------------------------------------------
   GHL's own stylesheet blanks the close icon's glyph
   (.close-menu::before{content:""}) and styles the popup items but never
   renders them, because both were the job of the JS bundle we removed.
   site.js rebuilds the items; these rules make them legible and give the
   close control a real, tappable X. */
#nav-menu-popup .nav-menu-body .close-menu::before{
  content:"\00d7";
  font-family:'Nunito',system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:34px;
  line-height:1;
  color:#051829;
}
/* Bigger tap target than the bare glyph. */
#nav-menu-popup .nav-menu-body .close-menu{
  display:flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  right:12px;
  top:12px;
}
#nav-menu-popup .nav-menu{
  margin-top:40px;
}
#nav-menu-popup .nav-menu-item .nav-menu-item-title.pr-mobile-link{
  display:block;
  padding:16px 0;
  font-family:'Nunito',system-ui,sans-serif;
  font-size:1.15rem;
  font-weight:600;
  color:#051829;
  text-decoration:none;
  border-bottom:1px solid #e6ecf0;
}
#nav-menu-popup .nav-menu-item:last-child .nav-menu-item-title.pr-mobile-link{
  border-bottom:0;
}
#nav-menu-popup .nav-menu-item .nav-menu-item-title.pr-mobile-link:hover,
#nav-menu-popup .nav-menu-item .nav-menu-item-title.pr-mobile-link:focus{
  color:#d68d4d;
}