/* AGandy static-site patch layer.
   Small explicit states used by /assets/js/site.js, replacing the behaviors
   the Placester platform JS used to control. Loaded after the theme CSS. */

/* hero: the platform JS set this to absolute (CSS default is a fixed
   parallax layer that paints black over all scrolled content) */
.hero-image-wrap { position: absolute !important; }

/* popups (sign in / sign up / listing gates) */
.popup-wrap.site-open {
  opacity: 1;
  pointer-events: all;
  z-index: 1000;
}

/* nav overflow: items that don't fit move behind the "..." control */
.site-header .navigation-wrap .menu-item.is-hidden { display: none !important; }
.site-header .overflow-hamburger-wrap { display: none; position: relative; }
.site-header .navigation-wrap .overflow-hamburger-wrap.site-visible,
.site-header .overflow-hamburger-wrap.site-visible { display: block !important; }
.site-header .navigation-wrap.orientation__horizontal {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
}
.site-header .navigation-wrap.orientation__horizontal .overflow-hamburger-wrap {
  order: 99;
  margin-left: .9rem;
  align-self: center;
  padding: .25rem;
  cursor: pointer;
}
.site-header .overflow-hamburger-wrap .site-overflow-panel {
  display: none;
  position: absolute;
  right: 0;
  top: calc(100% + .5rem);
  min-width: 13rem;
  background: #fff;
  color: #2d2d37;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .18);
  padding: .5rem 0;
  text-align: left;
  z-index: 1001;
}
.site-header .overflow-hamburger-wrap.state__open .site-overflow-panel { display: block; }
.site-header .site-overflow-panel ul { list-style: none; margin: 0; padding: 0; }
.site-header .site-overflow-panel .menu-item.is-hidden { display: block !important; }
.site-header .site-overflow-panel a {
  color: inherit;
  display: block;
  padding: .45rem 1.25rem;
  text-decoration: none;
  white-space: nowrap;
  font-size: .95rem;
}
.site-header .site-overflow-panel a:hover { color: #e4ae37; }
.site-header .site-overflow-panel .sub-menu { display: none; }

/* mobile menu panel (hamburger) */
body.site-menu-open { overflow: hidden; }
.site-mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 1100;
  background: rgba(12, 18, 26, .98);
  color: #fff;
  display: none;
  overflow-y: auto;
  padding: 4.5rem 1.5rem 2rem;
}
body.site-menu-open .site-mobile-menu { display: block; }
.site-mobile-menu .site-mobile-close {
  position: absolute;
  top: 1.1rem;
  right: 1.25rem;
  font-size: 1.4rem;
  color: #fff;
  cursor: pointer;
  background: none;
  border: 0;
}
.site-mobile-menu ul { list-style: none; margin: 0; padding: 0; }
.site-mobile-menu > ul > li { border-bottom: 1px solid rgba(255, 255, 255, .12); }
.site-mobile-menu a {
  color: #fff;
  display: block;
  font-size: 1.05rem;
  padding: .9rem .25rem;
  text-decoration: none;
}
.site-mobile-menu ul ul { display: none; padding-left: 1rem; }
.site-mobile-menu li.state__open > ul { display: block; }
.site-mobile-menu ul ul a { font-size: .95rem; opacity: .85; padding: .55rem .25rem; }

/* form submit result banner (site.js showState).
   Only used by native forms, which ship an empty .contact-form-success-label
   and no reveal markup; popup forms use the theme's own .contact-notification.
   Sharp corners + Open Sans per BRAND-REFERENCE.md. */
.site-form-status {
  display: none;
  border-radius: 0;
  border-left: 4px solid #e4ae37;
  background: #0c3153;
  color: #fff;
  font-family: "Open Sans", sans-serif;
  font-size: .95rem;
  line-height: 1.5;
  margin: 0 0 1.25rem;
  padding: .9rem 1.1rem;
}
.site-form-status.is-visible { display: block; }
.site-form-status.is-error {
  background: #fdf3f2;
  border-left-color: #a22c29;
  color: #a22c29;
}

/* carousels (site.js initCarousel).
   The platform's Flickity carousels lose their JS at build time and fall back
   to the theme's no-JS layouts: the Communities gallery wraps to one slide per
   row (4368px tall vs 422px on the live site) and the View Properties listings
   carousel hides every tile after the second, via
   .listings-results-carousel.no-js .listings-tile-wrap:nth-child(n+3){display:none}.
   site.js drops the `no-js` hook and tags the track .site-carousel.
   Slide widths are deliberately NOT set here -- the theme's own responsive
   rules already match the original (gallery 60%/50%/100%, listings 50%/100%
   across the 1024 and 768 breakpoints), so the slides-in-view count follows
   the live site at every width. !important is needed to beat the theme's very
   specific descendant selectors, which set flex-wrap:wrap / display:block. */
.site-carousel {
  display: flex !important;
  flex-wrap: nowrap !important;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.site-carousel::-webkit-scrollbar { display: none; height: 0; width: 0; }
.site-carousel > * { flex: 0 0 auto; scroll-snap-align: start; }
.slider-controls .pagination-dot { cursor: pointer; }

/* ---------- scroll reveal fallbacks ----------
   The theme hides every .animated-item inside an .animate-item
   (`.animate-item .animated-item{opacity:0}`) and only reveals it by running a
   keyframe animation gated on a speed class the platform JS used to add on
   scroll. site.js now adds that class; these two rules cover the cases it
   cannot: no JavaScript at all, and visitors who ask for reduced motion.
   Both selectors outrank the theme's two-class rule on specificity, so no
   !important is needed. Without the `no-js` rule a JS failure would blank 124
   wrappers across 21 pages -- including every listing card on the homepage. */
html.no-js .animate-item .animated-item,
.animate-item .animated-item.site-revealed {
  opacity: 1;
  transform: none;
  animation: none;
}


/* ---------- IDX results pages: unlock the page scroll ----------
   This file is also loaded into the IDX Broker dynamic wrapper, so these rules
   apply on search.agandyandco.com as well as here.

   IDX's own stylesheet (idxstyles.php) sets `html, body { height: 100% }` for
   its map-view results layout -- a fixed-viewport app shell with the map on one
   side and an internally-scrolling list on the other. Inside our wrapper that
   collides head-on with the theme's `body { overflow: hidden }` (the theme
   scrolls the <html> element, not the body): body gets pinned to exactly the
   viewport height while the wrapper chain needs ~1120px, so the overflow is
   clipped with no scrollport anywhere. The result is a results page that cannot
   scroll AT ALL, at every viewport width -- header and footer unreachable, and
   only the first few listings visible.

   This affects the whole search flow, not just the area-page tiles: submitting
   the nav's own "Search Properties" form lands on the same /idx/results/
   layout. /idx/search/advanced itself is normal document flow and was never
   affected, which is why it went unnoticed.

   `height: auto` is a no-op on our own 57 pages -- body there is already
   content-height -- and `min-height` keeps short pages filling the viewport.
   !important because IDX controls its own stylesheet injection order.

   There is no URL parameter that switches IDX off map view (view/resultsView/
   idxView/listView/mapView/styleid all probed, all still render
   .idx-results--map); it is a server-side page-template setting, so the fix has
   to come from our side. */
html,
body {
  height: auto !important;
  min-height: 100% !important;
}

/* ---------- IDX results with the map turned off: let the listings flow -------
   "All Results Page Maps" was switched off in the IDX panel (Design -> Settings
   -> Global -> Map) on 2026-08-17, which removes `.idx-results--map` and gives
   the listings the full page width. IDX still applies its app-shell sizing
   though: the IDX page container stays pinned at 776px and `.idx-results__content`
   becomes a 448px internal scroll box holding ~5,900px of listings. So the
   listings were full-width but crammed into a short scrolling window, and the
   document stopped at 1733px.

   With no map to hold in place there is nothing left for the fixed shell to do,
   so the whole chain is released into normal flow: the document grows to the
   real content height (1733px -> 7190px for 48 listings) and the page scrolls
   as one, footer last.

   `.IDX-category-results` is the load-bearing selector and the easy one to miss --
   releasing `.idx-results` and `.idx-results__content` alone changes nothing,
   because the 776px cap lives one level above them.

   Scoped to `.IDX-category-results`, NOT `.IDX-page-listings`: IDX puts a
   distinct page class on each destination (`IDX-page-listings` for
   /idx/results/, `IDX-page-featured` for /idx/featured) but gives both the same
   `IDX-category-results`. Keying on the page class covered search results and
   silently missed the featured page, which kept the fixed 375px columns and
   stranded ~365px of empty space. `IDX-category-search` is the advanced/basic
   search pages, which are normal flow and must not be touched.

   Guarded with :has() so it applies only when the map is absent. If the map is
   ever switched back on, `.idx-results--map` returns, this rule stops matching,
   and IDX's fixed split-pane layout is left intact -- which it needs, since the
   map has to stay put while the list beside it scrolls. */
.IDX-category-results:not(:has(.idx-results--map)),
.IDX-category-results:not(:has(.idx-results--map)) .idx-results,
.IDX-category-results:not(:has(.idx-results--map)) .idx-results__content,
.IDX-category-results:not(:has(.idx-results--map)) .idx-results__listings {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
}

/* The card grid is `grid-template-columns: 375px 375px` -- fixed pixel columns
   sized for the narrow list column that used to sit beside the map. At full
   width that stranded ~300px of empty space on the right (cards stopped at
   838px inside a 1126px container) and dropped to a single column at 768px.
   Same :has() guard, so the map layout keeps its original two fixed columns.
   Measured: 1280px -> 3 columns filling to 1203px, 1024px -> 2 at 485px,
   768px -> 2 (was 1), 375px -> 1 at 355px (was a 375px card in a 365px box). */
.IDX-category-results:not(:has(.idx-results--map)) .idx-results__category {
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)) !important;
}

/* ---------- IDX showcase widget: let it span its container ----------
   scripts/idx_showcase.py drops the widget into whatever container held the
   static tiles. On the three MLS area pages that is `.listings-results-grid`,
   which the theme styles as a **flex** row carrying `size-of-3` -- so our
   single wrapper became one flex child and took a one-third basis: 351px of a
   1236px row. The widget sizes its own grid from its container, so it dutifully
   rendered all 48 cards in one narrow column and the page ran 11,826px tall.

   Nothing was wrong with the widget's "Max Number of Columns: 3" setting; it
   was measuring a 351px box. Giving the wrapper the full row restores the
   intended layout: 3 cards per row at 1280 (page height 11,826px -> 4,786px),
   1 per row at 375, which is what the widget does on its own.

   Harmless on the homepage, where `.column-posts` is not a flex row and the
   flex shorthand is inert. */
.idx-showcase-in {
  flex: 1 1 100%;
  width: 100%;
  max-width: none;
}

/* ---------- build-finish pass: mobile tap targets + input sizing ----------
   From the 2026-08-17 mobile audit (rendered at 375/414/768). Everything here
   is scoped to the phone breakpoint so desktop stays pixel-identical to the
   Placester original. Measured offenders: form inputs 37px tall at 13.86px
   (13.86px is under iOS Safari's 16px auto-zoom threshold, so focusing a field
   zoomed the page and left it zoomed); hamburger 40x40; nav dropdown links
   109x25; footer links ~99x20; social icons 18x18. 48px is the Google/iOS/
   Material tap-target minimum. */
@media only screen and (max-width: 767px) {
  /* !important: the theme sets field font-size via a higher-specificity
     selector; this only applies under 768px so desktop is untouched */
  input.field,
  textarea.field,
  select.field {
    font-size: 16px !important;
  }
  input.field,
  select.field {
    min-height: 48px;
  }
  textarea.field {
    min-height: 96px;
  }
  .navigation-hamburger-in,
  .header-control-in.close {
    min-width: 48px;
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .site-header .navigation-in a,
  .site-mobile-menu a,
  .footer-navigation a,
  .column-footer .navigation-wrap a {
    min-height: 48px;
    display: inline-flex;
    align-items: center;
  }
  .social-icon {
    min-width: 48px;
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

/* Carousel pagination dots render at 6x6; an invisible pseudo-element expands
   the hit area to ~40px without changing what is painted, so the visual stays
   identical at every width. */
.pagination-dot {
  position: relative;
}
.pagination-dot::after {
  content: "";
  position: absolute;
  inset: -17px;
}