/**
 * site-polish.css
 * Brandywine Manor / Canal House / KOP Arms fleet -- P1 beautification layer.
 * Additive only. Loads AFTER Elementor + astra-child style.css (see snippet file).
 * No layout/format redesign, no section reorder, no copy changes, no re-color of
 * the brand marks. Targets the fleet's real Elementor markup (e-con containers,
 * e-n-tabs nested-tabs widget, elementor-widget-* leaves) shared by all three
 * property pages. See DESIGN-BAR-AND-PUNCHLIST.md for the item numbers referenced
 * in each block below.
 *
 * Existing fleet tokens (do not reintroduce new colors):
 *   green (CTA/interactive)  #005631  / hover #36765a
 *   burgundy (H1/display)    #4E0000
 */

/* -----------------------------------------------------------------------
   0. Reduced motion: honored by every transition added in this file.
   ----------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .e-n-tab-title,
  .button-1.btn,
  .button-3.btn,
  .button-4.btn,
  .wpcf7-submit,
  .wpcf7-form-control {
    transition: none !important;
  }
}

/* -----------------------------------------------------------------------
   Item 6 -- visible :focus-visible on nav links, tabs, form fields, CTAs.
   Theme default sets outline:none on form-field focus with no replacement
   (confirmed in astra-child inline CSS) and Elementor's nav-menu/nested-tabs
   widgets ship no focus style at all. This is the WCAG 2.2 AA floor item.
   Uses the fleet's existing green, 2px solid + offset, on every interactive
   element these pages actually contain.
   ----------------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
.elementor-item.menu-link:focus-visible,
.elementor-menu-toggle:focus-visible,
.e-n-tab-title:focus-visible,
.button-1.btn:focus-visible,
.button-3.btn:focus-visible,
.button-4.btn:focus-visible,
.wpcf7-form-control:focus-visible,
.wpcf7-submit:focus-visible,
input.wpcf7-form-control:focus-visible,
select.wpcf7-form-control:focus-visible,
textarea.wpcf7-form-control:focus-visible {
  outline: 2px solid #005631;
  outline-offset: 3px;
  border-radius: 2px;
}

/* Form fields lose the theme's outline:none-with-no-replacement specifically
   on :focus (not just :focus-visible) -- restore a visible ring there too so
   keyboard AND mouse-then-tab users both get a state, matching what the
   theme's own CSS already tried to do before dropping the outline. */
.wpcf7 input.wpcf7-form-control:not([type=submit]):focus,
.wpcf7 select.wpcf7-form-control:focus,
.wpcf7 textarea.wpcf7-form-control:focus {
  outline: 2px solid #005631 !important;
  outline-offset: 2px;
  border-color: #005631;
}

/* -----------------------------------------------------------------------
   Item 11 -- deliberate hover state on pill-tabs (nested-tabs widget ships
   with no hover of its own) -- restrained, 150ms ease, existing green only.
   CTA buttons already have inline hover (#36765a) from the page's own
   <style> block; this only adds the transition timing so the existing
   color-swap reads as "cared for" instead of an instant snap.
   ----------------------------------------------------------------------- */
.e-n-tabs-heading {
  gap: 4px;
}

.e-n-tab-title {
  transition: background-color 150ms ease, color 150ms ease;
  border-radius: 999px;
}

.e-n-tab-title:hover {
  background-color: rgba(0, 86, 49, 0.08);
}

.e-n-tab-title[aria-selected="true"] {
  background-color: #005631;
}

.e-n-tab-title[aria-selected="true"] .e-n-tab-title-text {
  color: #ffffff;
}

.button-1.btn,
.button-3.btn,
.button-4.btn,
.wpcf7-submit {
  transition: background-color 150ms ease, color 150ms ease;
}

/* -----------------------------------------------------------------------
   Item 5 -- constrain body-copy measure to ~70ch on desktop. Targets the
   text-editor widgets that carry the long-form Apartment Description /
   Apartment Features / Community Features paragraphs inside the tab
   panels. Container/flex/display untouched -- max-width only.
   ----------------------------------------------------------------------- */
@media (min-width: 768px) {
  .e-n-tabs-content .elementor-widget-text-editor .elementor-widget-container {
    max-width: 70ch;
  }
}

/* -----------------------------------------------------------------------
   Item 4 -- remove dead whitespace in short tab panels. The nested-tabs
   content container has no shared min-height rule, so a short-copy tab
   (e.g. "Efficiency Unit Starting at $1000") can leave large unconstrained
   gaps above the floor-plan images that follow. Switching the panel's own
   flex alignment to start (it already IS e-flex/e-con from Elementor) closes
   the gap without touching the tab-switch JS or the container's display
   value.
   ----------------------------------------------------------------------- */
.e-n-tabs-content > [role="tabpanel"] {
  align-content: flex-start;
}

.e-n-tabs-content > [role="tabpanel"] .elementor-widget-image {
  align-self: flex-start;
}

/* -----------------------------------------------------------------------
   Item 8 -- breathing-room padding around floor-plan/map images on mobile.
   Both live inside elementor-widget-image widgets in the tab panels; this
   only touches the image widget's own padding, not the parent e-con.
   ----------------------------------------------------------------------- */
@media (max-width: 767px) {
  .e-n-tabs-content .elementor-widget-image .elementor-widget-container {
    padding: 0 20px;
  }

  .e-n-tabs-content .elementor-widget-image img {
    border-radius: 4px;
  }
}

/* -----------------------------------------------------------------------
   Item 9 -- 44px minimum touch target on stacked mobile tab-buttons and
   form fields (currently ~40px per the punch-list measurement).
   ----------------------------------------------------------------------- */
@media (max-width: 767px) {
  .e-n-tab-title {
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .wpcf7-form-control:not([type="hidden"]),
  .wpcf7-submit {
    min-height: 44px;
  }
}

/* -----------------------------------------------------------------------
   Item 7 -- unify the pull-quote and dark photo-CTA-band backgrounds into
   the green/burgundy story instead of flat near-black. Both sections use
   Elementor's own background-color classic setting (see #call-box and the
   quote e-con above it) -- this overlays a deep-green-tinted wash on top of
   whatever background-image/color those e-con elements already carry,
   without touching their display/flex properties.
   ----------------------------------------------------------------------- */
#call-box,
.elementor-widget-icon:has(.e-fas-quote-left) {
  --polish-quote-tint: linear-gradient(
    rgba(0, 44, 25, 0.55),
    rgba(0, 44, 25, 0.72)
  );
}

#call-box {
  background-image: var(--polish-quote-tint), var(--e-con-background-overlay-image, none);
  background-blend-mode: multiply;
}

/* -----------------------------------------------------------------------
   Item 12 -- trim the oversized quote-glyph relative to the testimonial
   text beneath it. SVG already carries aria-hidden="true" on this template
   (confirmed in markup), so this is a pure size correction, not an a11y fix.
   ----------------------------------------------------------------------- */
.elementor-icon-wrapper .e-fas-quote-left {
  width: 40px;
  height: 40px;
  opacity: 0.85;
}

/* -----------------------------------------------------------------------
   Item 13 -- consistent vertical rhythm between green section-headers
   (Apartment Description / Apartment Features / Floor Plans and Pricing).
   All three share the .page-title wrapper class on the heading widget.
   ----------------------------------------------------------------------- */
.page-title .elementor-heading-title {
  margin-top: 32px;
  margin-bottom: 12px;
}

.page-title:first-child .elementor-heading-title {
  margin-top: 0;
}

/* -----------------------------------------------------------------------
   Item 10 (CSS portion) -- consistent warmth/contrast grade across the
   three hero photos, applied at the CSS layer since no re-shoot is needed.
   Restrained: warms shadows slightly, lifts contrast a touch, does not
   shift hue enough to look filtered.
   ----------------------------------------------------------------------- */
.elementor-location-header + * .elementor-widget-image img,
[data-widget_type^="theme-post-featured-image"] img {
  filter: saturate(1.04) contrast(1.03) sepia(0.03);
}