/* template-overrides.css — vendorize polish layer (loaded last; edit freely).
   Fix: in dark mode the active dropdown toggle must use a color that reads on the dark nav.
   Use --primary (the active color used elsewhere), NOT --secondary (near-black). The source's
   .cs-li.cs-dropdown .cs-li-link rule out-specifies plain .cs-active, so this override wins. */
body.dark-mode #cs-navigation .cs-li.cs-dropdown .cs-li-link.cs-active { color: var(--primary); }

/* ===== FAQ accordion (#faq-1458) ported from CodeStitch faq stitch ===== */
/* FAQ component (#faq-1458) — extracted from local.css so interior pages (service pages) can reuse the home FAQ accordion. */
@media only screen and (min-width: 0rem) {
  #faq-1458 {padding: var(--sectionPadding);background-color: #F7F8F8;position: relative;overflow: hidden;}
  #faq-1458 .cs-container {width: 100%;max-width: 36.5rem;margin: auto;display: flex;flex-direction: column;justify-content: center;align-items: center;gap: clamp(2.5rem, 5vw, 3rem);}
  #faq-1458 .cs-content {text-align: left;max-width: 39.375rem;}
  #faq-1458 .cs-title {max-width: 20ch;}
  #faq-1458 .cs-faq-group {padding: 0;margin: 0;display: flex;justify-content: center;align-items: center;flex-direction: column;align-self: center;}
  #faq-1458 .cs-faq-item {list-style: none;width: 100%;padding: 1.25rem;padding-left: 0;box-sizing: border-box;transition: border-bottom 0.3s;border-bottom: 1px solid #e8e8e8;}
  #faq-1458 .cs-faq-item.active {border-color: var(--primaryLight);}
  #faq-1458 .cs-faq-item.active .cs-button {color: var(--primary);}
  #faq-1458 .cs-faq-item.active .cs-button:before {background-color: var(--primaryLight);transform: rotate(315deg);}
  #faq-1458 .cs-faq-item.active .cs-button:after {background-color: var(--primaryLight);transform: rotate(-315deg);}
  #faq-1458 .cs-faq-item.active .cs-item-p {height: auto;padding-top: 1rem;opacity: 1;}
  #faq-1458 .cs-button {font-size: clamp(1rem, 2vw, 1.25rem);line-height: 1.2em;text-align: left;font-weight: bold;padding: 0;border: none;background: transparent;color: var(--headerColor);display: block;width: 100%;position: relative;transition: background-color 0.3s, color 0.3s;}
  #faq-1458 .cs-button:hover {cursor: pointer;}
  #faq-1458 .cs-button:before {content: "";width: 0.5rem;height: 0.125rem;background-color: var(--headerColor);opacity: 1;border-radius: 50%;position: absolute;display: block;top: 45%;right: 0.25rem;transform: rotate(45deg);transform-origin: left center;transition: transform 0.5s;}
  #faq-1458 .cs-button:after {content: "";width: 0.5rem;height: 0.125rem;background-color: var(--headerColor);opacity: 1;border-radius: 50%;position: absolute;display: block;top: 45%;right: 0.0625rem;transform: rotate(-45deg);transform-origin: right center;transition: transform 0.5s;}
  #faq-1458 .cs-button-text {width: 90%;display: block;}
  #faq-1458 .cs-item-p {font-size: clamp(0.875rem, 1.5vw, 1rem);line-height: 1.5em;width: 90%;max-width: 33.8125rem;height: 0;margin: 0;padding: 0;opacity: 0;color: var(--bodyTextColor);overflow: hidden;transition: opacity 0.3s, padding-bottom 0.3s;}
  #faq-1458 .cs-image-group {font-size: min(2.43vw, 1em);width: 37.375em;height: 42.375em;display: block;position: relative;}
  #faq-1458 .cs-picture {width: 32.625em;height: 38.0625em;top: 0;left: 0;}
  #faq-1458 .cs-picture img {position: absolute;top: 0;left: 0;height: 100%;width: 100%;object-fit: cover;border-radius: 1rem;}
}
@media only screen and (min-width: 64rem) {
  #faq-1458 .cs-container {max-width: 80rem;flex-direction: row;justify-content: space-between;}
  #faq-1458 .cs-content {width: 55%;}
  #faq-1458 .cs-image-group {font-size: min(1.4vw, 1em);height: auto;min-height: 42.375rem;}
  #faq-1458 .cs-picture {height: 90%;}
}
@media only screen and (min-width: 0rem) {
  body.dark-mode #faq-1458 {background-color: rgba(0, 0, 0, 0.2);}
  body.dark-mode #faq-1458 .cs-title, body.dark-mode #faq-1458 .cs-item-p, body.dark-mode #faq-1458 .cs-button-text {color: var(--bodyTextColorWhite);}
  body.dark-mode #faq-1458 .cs-item-p {opacity: 0.8;}
  body.dark-mode #faq-1458 .cs-faq-item {border-bottom: rgba(255, 255, 255, 0.1);}
  body.dark-mode #faq-1458 .cs-faq-item.active {border-color: #fff;}
  body.dark-mode #faq-1458 .cs-faq-item.active .cs-button {color: #fff;}
  body.dark-mode #faq-1458 .cs-faq-item.active .cs-button:before, body.dark-mode #faq-1458 .cs-faq-item.active .cs-button:after {background-color: #fff;}
  body.dark-mode #faq-1458 .cs-button {color: var(--bodyTextColorWhite);}
  body.dark-mode #faq-1458 .cs-button:before, body.dark-mode #faq-1458 .cs-button:after {background-color: var(--bodyTextColorWhite);}
}

/* Nav logo: keep the light/dark swap as a plain OPACITY crossfade. The template used a 3D
   flip-card (perspective + rotateX) that warps a wide lockup, and hid the back face with
   z-index:-1 + a filter:invert(1) trick. We ship real light + dark lockups, so: kill the flip,
   kill the invert, and bring the dark-mode logo (cs-light) to the front so opacity shows it. */
#cs-navigation .cs-logo { -webkit-perspective: none !important; perspective: none !important; transform-style: flat !important; }
body.dark-mode #cs-navigation .cs-logo { filter: none !important; }
#cs-navigation .cs-light,
#cs-navigation .cs-dark { transform: none !important; -webkit-backface-visibility: visible !important; backface-visibility: visible !important; transition: opacity 0.3s !important; }
#cs-navigation .cs-light { z-index: 2 !important; }
body.dark-mode #cs-navigation .cs-dark { opacity: 0 !important; }
body.dark-mode #cs-navigation .cs-light { opacity: 1 !important; }

/* Nav active link: brand tan --primaryLight in BOTH modes. Was --secondary (near-black), which was
   invisible on the near-black dark nav and blended into the dark navy light-mode nav. The nav bg is
   navy (--primary) in light mode and near-black in dark mode, so tan reads on both (6.7:1 / 9.6:1). */
#cs-navigation .cs-li-link.cs-active,
#cs-navigation .cs-li.cs-dropdown .cs-li-link.cs-active,
body.dark-mode #cs-navigation .cs-li-link.cs-active,
body.dark-mode #cs-navigation .cs-li.cs-dropdown .cs-li-link.cs-active { color: var(--primaryLight) !important; }
#cs-navigation .cs-li-link.cs-active:before,
body.dark-mode #cs-navigation .cs-li-link.cs-active:before { background: var(--primaryLight) !important; opacity: 1 !important; display: block !important; }

/* Dark-mode CTA button: the template set --secondary bg + --headerColor text = near-black on
   near-black (invisible). Match the light-mode button — navy bg + white text — so the label
   reads in both the base and the hover-fill states. */
body.dark-mode .cs-button-solid,
body.dark-mode #cta-697 .cs-button-solid { background-color: var(--primary) !important; color: var(--bodyTextColorWhite) !important; }
body.dark-mode .cs-button-solid:before { background-color: var(--secondary) !important; }

/* Home stat callouts (#RPsbs-1163 "5/5", #RPsbsr-1163 "2x"): both boxes have a dark bg in light AND
   dark mode, but the number was --primary (navy) = unreadable on the near-black box. Force a gold
   number + white desc on both so they read (and pop) in either mode. */
#RPsbs-1163 .cs-box .cs-number, #RPsbsr-1163 .cs-box .cs-number { color: var(--primaryLight) !important; }
#RPsbs-1163 .cs-box .cs-desc, #RPsbsr-1163 .cs-box .cs-desc { color: var(--bodyTextColorWhite) !important; opacity: 1 !important; }

/* Section toppers ("Who We Are", "Our Services", etc.): the dark-mode override left them --secondary
   (near-black) = invisible on the dark sections. Use the gold accent in dark mode (matches the hero
   topper, which already does this). */
body.dark-mode .cs-topper { color: var(--primaryLight) !important; }

/* Why-choose card headings ("Striping & ADA Expertise", "Maintenance That Protects Your
   Investment"): dark-mode override left the .cs-h3 at --secondary (near-black) while the section
   bg + body text went dark/white = invisible. White at full opacity (body is 0.8) keeps hierarchy. */
body.dark-mode #why-choose-1313 .cs-h3 { color: var(--bodyTextColorWhite) !important; }

/* Reviews reviewer name ("Property Manager"): same bug — .cs-name stayed --secondary (near-black)
   on the dark #1a1a1a review panel. White reads and sits above the 0.8-opacity white .cs-desc. */
body.dark-mode #reviews-1231 .cs-name { color: var(--bodyTextColorWhite) !important; }

/* Footer link hover (dark mode): the footer sits on dark navy in BOTH modes, so the light-mode
   gold hover reads fine, but the dark-mode override switched hover to --primary (navy) = invisible
   on the dark footer. Keep the gold accent on hover in dark mode too (matches light mode). */
body.dark-mode #cs-footer-1340 .cs-link:hover,
body.dark-mode #cs-footer-1340 .cs-credit:hover,
body.dark-mode #cs-footer-1340 .cs-credit-link:hover,
body.dark-mode #cs-footer-1340 .cs-bottom-link:hover { color: var(--primaryLight) !important; }

/* Interior page banner (#banner-558, e.g. About's "Who We Are" / "About Kissimmee Premier Stripes"):
   the banner is a dark hero photo in BOTH modes, so the base title/topper are white. The dark-mode
   override flipped them (and the topper accent bar) to --headerColor (near-black) = invisible on the
   photo. The image doesn't change between modes, so re-assert the light-mode styling in dark mode. */
body.dark-mode #banner-558 .cs-int-title,
body.dark-mode #banner-558 .cs-int-topper { color: var(--bodyTextColorWhite) !important; }
body.dark-mode #banner-558 .cs-int-topper:before { background: var(--secondary) !important; }

/* Footer social icons: use the light-mode look in dark mode too (it reads better). Dark mode had
   overridden the circle to translucent white, the hover to navy, and forced the icons pure white;
   re-assert the light-mode styling (solid #484848 circle, gold hover, base icon). The base
   hover-invert rule out-specifies the icon reset, so the on-gold hover invert still applies. */
body.dark-mode #cs-footer-1340 .cs-social-link { background-color: #484848 !important; }
body.dark-mode #cs-footer-1340 .cs-social-link:hover { background-color: var(--primaryLight) !important; }
body.dark-mode #cs-footer-1340 .cs-social-img { filter: none !important; }

/* Logo light/dark swap sizing: stack both lockups in ONE grid cell (both in normal flow) so the
   visible one is sized identically in every mode and breakpoint. The template positioned .cs-light
   (the dark-mode lockup) as position:absolute while .cs-dark held the flow. On desktop .cs-logo has
   a fixed height so both matched, but the MOBILE nav uses height:auto, so the absolute dark-mode
   logo had no in-flow box to match and rendered at the wrong size. Grid overlay fixes it without
   touching the per-breakpoint img height rules. */
#cs-navigation .cs-logo { display: grid !important; }
#cs-navigation .cs-light,
#cs-navigation .cs-dark { grid-area: 1 / 1 !important; position: static !important; }

/* ...but the grid display:important above also overrode the per-breakpoint display:none that hides
   one of the two logo instances (.cs-top-logo in the header bar vs .cs-bottom-logo in the nav row),
   which made the logo show twice. Re-assert the toggle: nav-level logo on mobile, header-level on
   desktop. */
@media only screen and (max-width: 63.9375rem) { #cs-navigation .cs-top-logo { display: none !important; } }
@media only screen and (min-width: 64rem) { #cs-navigation .cs-bottom-logo { display: none !important; } }

/* Mobile: show the "Get In Touch" CTA in the header top bar, flush to the LEFT. It was hidden on
   mobile (display:none). The mobile top bar is navy (light) / near-black (dark), so a navy button
   would blend in: give it the gold accent with dark text (pops in both modes; navy fill + white
   text on hover). Scoped to .cs-nav-button so page CTA buttons are unaffected. Zero the container
   gap + empty-contact so the button sits flush left. */
@media only screen and (max-width: 63.9375rem) {
  #cs-navigation .cs-top-container { justify-content: flex-start !important; gap: 0 !important; padding: 0 1rem !important; }
  #cs-navigation .cs-top-contact { display: none !important; }
  #cs-navigation .cs-nav-button,
  body.dark-mode #cs-navigation .cs-nav-button {
    display: inline-block !important;
    background-color: var(--primaryLight) !important;
    color: var(--headerColor) !important;
    line-height: 2.25rem !important;
    padding: 0 1.25rem !important;
    font-size: 0.9375rem !important;
  }
  #cs-navigation .cs-nav-button:before { background-color: var(--primary) !important; }
  #cs-navigation .cs-nav-button:hover { color: var(--bodyTextColorWhite) !important; }
}

/* Hamburger toggle: kill the decorative floating rings on the :before/:after pseudo-elements. They
   run an infinite floatAnimation and drift in on menu open (body.cs-open), which reads as annoying
   motion. They are purely decorative, so remove them outright. */
@media only screen and (max-width: 63.9375rem) {
  #cs-navigation .cs-toggle:before,
  #cs-navigation .cs-toggle:after { display: none !important; }
}