/*
Theme Name: Hahn Agency Theme
Theme URI: https://wordpress.org/themes/hahnagencytheme/
Author: the WordPress team
Author URI: https://wordpress.org
Description: A Theme created by the Hahn Agency Development Team.
Version: 1.3.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: hahnagencytheme
Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, block-patterns, rtl-language-support, sticky-post, threaded-comments, translation-ready, wide-blocks, block-styles, style-variations, accessibility-ready, blog, portfolio, news
*/

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

/*
 * Link styles
 * https://github.com/WordPress/gutenberg/issues/42319
 */
a {
  text-decoration-thickness: 1px !important;
  text-underline-offset: 0.1em;
}

/* Focus styles */
:where(.wp-site-blocks *:focus) {
  outline-width: 2px;
  outline-style: solid;
}

/* Increase the bottom margin on submenus, so that the outline is visible. */
.wp-block-navigation
  .wp-block-navigation-submenu
  .wp-block-navigation-item:not(:last-child) {
  margin-bottom: 3px;
}

/* Increase the outline offset on the parent menu items, so that the outline does not touch the text. */
.wp-block-navigation
  .wp-block-navigation-item
  .wp-block-navigation-item__content {
  outline-offset: 4px;
}

/* Remove outline offset from the submenus, otherwise the outline is visible outside the submenu container. */
.wp-block-navigation
  .wp-block-navigation-item
  ul.wp-block-navigation__submenu-container
  .wp-block-navigation-item__content {
  outline-offset: 0;
}

/*
 * Progressive enhancement to reduce widows and orphans
 * https://github.com/WordPress/gutenberg/issues/55190
 */
h1,
h2,
h3,
h4,
h5,
h6,
blockquote,
caption,
figcaption,
p {
  text-wrap: pretty;
}

/* Mobile Nav Menu */
.wp-block-navigation__responsive-container.is-menu-open ul li a {
  font-size: 20px;
}

/*
 * Change the position of the more block on the front, by making it a block level element.
 * https://github.com/WordPress/gutenberg/issues/65934
*/
.more-link {
  display: block;
}

/* Remove margin-block-start from Footer Group Block */
footer {
  margin-block-start: 0;
}

@media screen and (max-width: 781px) {
  .spacer-hide-on-mobile {
    display: none;
  }
}

/*
 * Add Padding to top and bottom of selected group blocks
 */
section.wp-block-group {
  padding-top: 2.25rem;
  padding-bottom: 2.25rem;
}

section.wp-block-group.is-layout-constrained {
  padding-top: 1.25rem;
}

.show-on-mobile {
  display: block;

  @media (min-width: 782px) {
    display: none;
  }
}

.hide-bg-on-mobile {
  background-image: none;

  @media (min-width: 782px) {
    background-image: initial;
  }
}

/* Floating Images */
.relative-container {
  position: relative;
  overflow: hidden;
}

.floating-image-top {
  top: 130px;
  left: -75px;
}

.floating-image-top-down-more {
  top: 300px;
  left: -75px;
}

.floating-image-bottom {
  bottom: 5px;
  right: -115px;
}

.floating-image-bottom-in-more {
  bottom: 100px;
  right: -75px;
}

.floating-image-bottom-up-more {
  bottom: 250px;
  right: 0;
}

.floating-image-top,
.floating-image-top-down-more,
.floating-image-bottom,
.floating-image-bottom-in-more,
.floating-image-bottom-up-more {
  position: absolute;
  z-index: 10;

  /* add transition */
  transition: all 1.5s ease-in-out;

  @media (max-width: 1200px) {
    right: -9999px;
  }
}

.point-1-oclock {
  transform: rotate(-40deg);
}

.point-4-oclock {
  transform: rotate(20deg);
}

.point-7-oclock {
  transform: rotate(-160deg);
}

.point-10-oclock {
  transform: rotate(-155deg);
}

/* Overlapping Callout Block */
.hahn-column-overlap-wrapper,
.hahn-column-overlap-wrapper-reverse {
  position: relative;
}

.hahn-columns-bg-box-border {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  width: 45%;
  height: 60%;
  z-index: 0;
  pointer-events: none; /* so it doesn’t interfere with clicks */
  display: none;

  @media screen and (min-width: 782px) {
    display: block;
  }
}

.hahn-column-overlap-wrapper-reverse .hahn-columns-bg-box-border {
  width: 45%;
  height: 85%;
}

.hahn-columns-overlap {
  position: relative;
  z-index: 1;
}

.hahn-columns-overlap-reverse {
  justify-content: center;
}

.location-bg > img {
  @media screen and (max-width: 782px) {
    display: none;
  }
}

/* reverse flex */
.location-bg .wp-block-columns {
  @media screen and (max-width: 782px) {
    flex-direction: column-reverse; /* stack columns on mobile */
  }
}

.location-bg .wp-block-columns .wp-block-column:nth-child(2) {
  @media screen and (min-width: 782px) {
    display: none;
  }
}

.wp-block-columns.is-not-stacked-on-mobile {
  @media screen and (max-width: 782px) {
    gap: 1rem !important; /* Adjust gap for mobile */
  }
}

.wp-block-columns.is-not-stacked-on-mobile .wp-block-column .wp-block-image {
  @media screen and (max-width: 782px) {
    max-width: 100% !important; /* Ensure images are responsive */
    width: auto !important; /* Override any fixed widths */
    margin: 0 auto !important; /* Center images */
  }
}

.wp-block-columns.is-not-stacked-on-mobile .wp-block-column .has-border-color {
  @media screen and (max-width: 782px) {
    border-width: 1px !important;
  }
}

.hahn-columns-overlap .wp-block-column:first-child,
.hahn-column-overlap-wrapper-reverse
  .hahn-columns-overlap
  .wp-block-column:last-child {
  z-index: 3;
  position: relative;

  /* transform: translate(23px, -70px); */

  @media screen and (min-width: 782px) {
    margin-left: 5%;
    max-width: 470px;
  }
}

.hahn-column-overlap-wrapper-reverse
  .hahn-columns-overlap
  .wp-block-column:last-child {
  @media screen and (min-width: 782px) {
    margin-left: -15%;
  }
}

.hahn-columns-overlap .wp-block-column:last-child,
.hahn-column-overlap-wrapper-reverse
  .hahn-columns-overlap
  .wp-block-column:first-child {
  /* margin-left: -60px; */
  z-index: 2;
  position: relative;
  margin-top: 20px;
  text-align: center;

  @media screen and (min-width: 782px) {
    margin-top: 0;
    margin-left: -10%;
    text-align: unset;
  }
}

.hahn-column-overlap-wrapper-reverse
  .hahn-columns-overlap
  .wp-block-column:first-child {
  @media screen and (min-width: 782px) {
    max-width: 570px;
    margin-left: 0;
  }
}

.home-types-columns {
  display: flex;
  justify-content: center;
}

/* Odd Children */
.home-types-columns .wp-block-column:nth-child(2n + 1) {
  margin-bottom: 0;

  @media screen and (min-width: 782px) {
    margin-bottom: 2rem;
  }
}

/* Even Children */
.home-types-columns .wp-block-column:nth-child(2n) {
  margin-top: 0;

  @media screen and (min-width: 782px) {
    margin-top: 2rem;
  }
}

.amenities-columns {
  display: flex;
  justify-content: center;
  gap: 2rem;
}

.amenities-columns .wp-block-column {
  flex: 1;
  max-width: 270px;
  box-sizing: border-box;
}

/* Odd Children */
.amenities-columns .wp-block-column:nth-child(2n + 1) {
  margin-bottom: 0;

  @media screen and (min-width: 782px) {
    margin-bottom: 2rem;
  }
}

/* Even Children */
.amenities-columns .wp-block-column:nth-child(2n) {
  margin-top: 0;

  @media screen and (min-width: 782px) {
    margin-top: 2rem;
  }
}

/* Gravity Forms */
body .gform_wrapper .gform_footer input.button,
body .gform_wrapper .gform_footer input[type="submit"] {
  border-radius: 0px !important;
  font-weight: 700 !important;
  font-size: 1rem !important;
  line-height: inherit !important;
  text-decoration: none !important;
}

body .gform_wrapper .gform_footer input.button:hover,
body .gform_wrapper .gform_footer input[type="submit"]:hover {
  background-color: #aad5af !important;
  color: #003d31 !important;
}

/* Back to Top Button */
.hahn-back-to-top {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  position: fixed;
  bottom: 50px;
  right: 50px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  z-index: 9999;
  cursor: pointer;
  background-color: var(--wp--preset--color--primary);
  background-image: url("../hahnagencytheme/assets/images/up-arrow-white.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 20px;
  transition: opacity 0.3s ease-in-out;
}

.hahn-back-to-top.show {
  opacity: 1;
  pointer-events: auto;
}

.hahn-back-to-top:hover {
  opacity: 0.8;
}

.hahn-back-to-top a:focus:not(:focus-visible) {
  outline: none;
}

.hahn-back-to-top a {
  background-color: transparent !important;
}

/* open button (hamburger) */
.nav-with-side-menu .wp-block-navigation__responsive-container-open
  .wp-block-navigation__toggle .wp-block-navigation__responsive-container-open
  svg {
  display: none; /* hide core icon */
}

.nav-with-side-menu .wp-block-navigation__responsive-container-open
  .wp-block-navigation__toggle::before {
  content: "";
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
  background: no-repeat center / contain
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" stroke="%230a3" stroke-width="2" fill="none" stroke-linecap="round"><path d="M3 6h18M3 12h18M3 18h18"/></svg>');
}

/* close button (X) inside the overlay/panel */
.nav-with-side-menu .wp-block-navigation__responsive-container-close
  .wp-block-navigation__toggle .wp-block-navigation__responsive-container-open
  svg {
  display: none;
}

.nav-with-side-menu .wp-block-navigation__responsive-container-close
  .wp-block-navigation__toggle::before {
  content: "";
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
  background: no-repeat center / contain
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" stroke="%230a3" stroke-width="2" fill="none" stroke-linecap="round"><path d="M6 6l12 12M18 6L6 18"/></svg>');
}

/* home page hero navigation styling*/
.wp-block-template-part:has(.nav-with-side-menu) {
  transition: all 0.2s ease-in-out;
}

.home .wp-block-template-part:has(.nav-with-side-menu) {
  background-color: transparent!important;
  transition: none!important;
}

.home .nav-with-side-menu {
  box-shadow: none!important;
}

.home .wp-block-template-part:has(.nav-with-side-menu.after-initial-load:not(.nav-over-hero)) {
  background-color: var(--wp--preset--color--primary)!important;
  transition: all 0.2s ease-in-out!important;
}

.nav-with-side-menu.nav-over-hero {
  box-shadow: none!important;
}

.nav-with-side-menu.nav-over-hero .wp-block-buttons .wp-block-button__link {
  background-color: #dde6ed;
  border: none!important;
  color: var(--wp--preset--color--primary)!important;
}

/* position social media icons */
.wp-block-navigation-item .site-logo {
  position: relative;
  margin-top: 30px;
}

.wp-block-navigation-item .social-media-icons {
  bottom: 18px;
  left: 150px;
  flex-wrap: nowrap;
}

@media screen and (min-width: 781px) {
  .wp-block-navigation-item .social-media-icons {
    position: absolute;
  }
}

.wp-block-navigation-item .social-media-icons li a svg {
  width: 40px;
  height: 40px;
}

.home-cta-cover {
  min-height: calc(100vh + 110px);
  transform: translateY(-163px);
}

@media screen and (max-width: 600px) {
  .home-cta-cover {
    transform: translateY(-70px);
  }
}

.home-hero-section {
  position: relative;
}

/* base for both arms */
.home-hero-section::before,
.home-hero-section::after {
  content: "";
  position: absolute;
  bottom: 12rem;              /* distance from bottom of hero */
  left: 50%;
  width: 32px;               /* length of each arm */
  height: 4px;               /* thickness of arrow */
  background-color: var(--wp--preset--color--accent-2);
  border-radius: 999px;
  transform-origin: center;
  z-index: 9999;
}

/* left arm */
.home-hero-section::before {
  transform: translateX(-80%) rotate(45deg);
}

/* right arm */
.home-hero-section::after {
  transform: translateX(-18%) rotate(-45deg);
}


/* Photo grid */
.hahn-photo-grid {
  --gap: 28px;
  --row2-shift: -57px;

  --col1-w: 314px;
  --col2-w: 356px;

  --row1-h: 344px;
  --row2-h: 344px;

  /* landscape image heights */
  --row1-land-h: 221px;
  --row2-land-h: 202px;

  display: grid;
  grid-template-columns: var(--col1-w) var(--col2-w);
  grid-template-rows: var(--row1-h) var(--row2-h);
  gap: var(--gap);
  align-items: start;
  justify-content: start;
  position: relative;
  z-index: 5;
  transform: translateY(-110px) scale(var(--scale-factor, 1)); /* note, scale factor is set in javascript */
  transform-origin: center;
}

.hahn-photo-grid.home-page {
  transform: translateY(-100px) scale(var(--scale-factor, 1)); /* note, scale factor is set in javascript */
}

.hahn-photo-grid figure {
  margin: 0;
}

.hahn-photo-grid img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  display: block;
  border-radius: 8px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18);
}

.hahn-photo-grid figure:nth-child(1) {
  grid-column: 1;
  grid-row: 1;
  height: var(--row1-h);
}

.hahn-photo-grid.home-page figure:nth-child(1) {
  max-width: 257px;
}

.hahn-photo-grid figure:nth-child(2) {
  grid-column: 2;
  grid-row: 1;
  height: var(--row1-land-h);
  align-self: end;
  transform: translateX(var(--row2-shift));
}

.hahn-photo-grid figure:nth-child(3) {
  grid-column: 1;
  grid-row: 2;
  height: var(--row2-h);
  overflow: hidden;
}

.hahn-photo-grid figure:nth-child(4) {
  grid-column: 2;
  grid-row: 2;
  height: var(--row2-land-h);
}

@media screen and (max-width: 762px) {
  .wildflowers-photo-grid-column {
    display: flex;
    justify-content: center;
    max-width: 100%;
    max-height: var(--mobile-max-height);
  }
}

/* Commercial page photo grid */
.hahn-photo-grid.commercial {
  --row2-shift: -42px;

  /* left (portrait) + right (landscape) sizes */
  --col1-w: 339px;
  --col2-w: 302px;

  /* row heights = portrait heights so rows pack tightly */
  --row1-h: 284px;
  --row2-h: 284px;

  /* landscape heights */
  --row1-land-h: 221px;
  --row2-land-h: 202px;
}

.hahn-photo-grid.commercial {
  grid-template-columns: var(--col1-w) var(--col2-w);
  justify-content: flex-end;
  transform: scale(
    var(--scale-factor, 1)
  ); /* note, scale factor is set in javascript */
  transform-origin: right;
}

.hahn-photo-grid.commercial figure:nth-child(1) {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  justify-content: flex-end;
}
.hahn-photo-grid.commercial figure:nth-child(1) img {
  aspect-ratio: 267 / 284 !important;
  width: auto !important;
}

.hahn-photo-grid.commercial figure:nth-child(2) {
  grid-column: 2;
  grid-row: 1;
  align-self: start;
  transform: translateY(abs(var(--row2-shift)));
  height: 100%;
}
.hahn-photo-grid.commercial figure:nth-child(2) img {
  aspect-ratio: 284 / 280 !important;
}

.hahn-photo-grid.commercial figure:nth-child(3) {
  grid-column: 1;
  grid-row: 2;
  height: var(--row2-h);
  transform: translateX(calc(var(--row2-shift) * 2));
  overflow: hidden;
}
.hahn-photo-grid.commercial figure:nth-child(3) {
  aspect-ratio: 339 / 259;
}

.hahn-photo-grid.commercial figure:nth-child(4) {
  grid-column: 2;
  grid-row: 2;
  transform: translate(var(--row2-shift), abs(var(--row2-shift)));
  height: 100%;
}
.hahn-photo-grid.commercial figure:nth-child(4) img {
  aspect-ratio: 302 / 280;
  height: 280px;
}

.commercial-hero {
  min-height: calc(100vh - 140px);
}

.commercial-hero-container {
  background-repeat: no-repeat !important;
  background-size: 100% 60% !important;
  background-position: center center !important;
}
/* Commerical hero grid mobile */
@media screen and (max-width: 800px) {
  .commercial-hero {
    transform: translateY(0) !important;
    min-height: unset !important;
  }

  .commercial-hero-container {
    background-size: 100% 100% !important;
  }

  .commercial-hero-columns {
    flex-direction: column;
  }

  .commercial-hero-columns .wp-block-column:nth-child(2) {
    max-height: var(--mobile-max-height, calc(218px + 60px));
  }

  .hahn-photo-grid.commercial {
    transform-origin: 90% top;
  }
}

.map--cards .wp-block-columns {
  justify-content: center;
}

.map--cards .map-card {
  max-width: 270px;
}

@media screen and (max-width: 781px) {
  .map--cards .map-card strong {
    font-size: 24px;
  }
}

@media screen and (min-width: 782px) {
  .map--cards:first-of-type {
    margin-bottom: var(--wp--preset--spacing--80) !important;
  }

  .map-card-1 {
    transform: translateX(-100px);
  }

  .map-card-2 {
    transform: translateY(-150px);
  }

  .map-card-3 {
    transform: translateX(100px);
  }

  .map-card-4 {
    transform: translateX(-40px);
  }

  .map-card-5 {
    transform: translateY(-150px);
  }

  .map-card-6 {
    transform: translateX(40px);
  }
}

.home-page-slider {
  margin: 0;
  --wp--custom--carousel-block--pagination-top: 90vh;
  --wp--custom--carousel-block--pagination-bullet-active-color: var(
    --wp--preset--color--primary
  );
  --wp--custom--carousel-block--pagination-bullet-size: 22px;
  --wp--custom--carousel-block--pagination-bullet-horizontal-gap: 8px;
  --wp--custom--carousel-block--pagination-bullet-opacity: 1;
  --wp--custom--carousel-block--pagination-bullet-color: transparent;
  --wp--custom--carousel-block--pagination-bullet-border-color: var(
    --wp--preset--color--primary
  );
}

@media screen and (max-width: 599px) {
  .home-page-slider {
    --wp--custom--carousel-block--pagination-bullet-active-color: white;
    --wp--custom--carousel-block--pagination-bullet-border-color: white;
  }
}

.home-page-slider .swiper {
  margin-bottom: 0 !important;
}

.home-page-slider .swiper-pagination-bullet {
  border: 2px solid
    var(--wp--custom--carousel-block--pagination-bullet-border-color);
}

@media screen and (max-width: 599px) {
  .home-slide-bg-image .wp-block-cover__background {
    background: rgba(0, 0, 0) !important;
    opacity: 0.65;
  }
}

@media screen and (min-width: 772px) {
  .home-carousel-text {
    padding-left: 10vw !important;
  }
}

@media screen and (max-width: 771px) {
  .home-slide-bg-image {
    justify-content: center !important;
  }

  .home-fly-through-video {
    min-height: 200px !important;
    height: auto!important;
    aspect-ratio: 16/9!important;
  }

  .home-fly-through-video video {
    object-fit: contain !important;
  }

  .home-pre-carousel-spacer {
    min-height: 100px !important;
  }

  #homes {
    margin-bottom: 30px !important;
    scroll-margin-top: 84px;
  }
}

/* Slide in navigation */
.nav-with-side-menu .wp-block-navigation__responsive-dialog,
.nav-with-side-menu .wp-block-navigation__responsive-container {
  position: fixed;
  top: 0;
  left: auto;
  right: 0;
  bottom: 0;
  width: 520px;
  height: 150vh;
  margin: 0;
  padding: 0;
  transition: transform 0.35s ease;
  overflow-y: hidden !important;
  z-index: 1000;
  will-change: transform;
}

@media screen and (max-width: 472px) {
  .nav-with-side-menu .wp-block-navigation__responsive-dialog,
  .nav-with-side-menu .wp-block-navigation__responsive-container {
    width: 100vw;
  }

  .nav-with-side-menu ul.wp-block-navigation__container {
    transform: translateX(0);
  }
}

.nav-with-side-menu .wp-block-navigation__responsive-container {
  background: url(../hahnagencytheme/assets/images/menu-bg.png);
  z-index: -1 !important;
}

.nav-with-side-menu .wp-block-navigation__responsive-container.is-menu-open {
  transform: translateX(0);
}

.nav-with-side-menu .wp-block-navigation__responsive-dialog[open] {
  transform: translate(-36px);
}

.nav-with-side-menu ul.wp-block-navigation__container {
  transform: translate(calc(100% - 200px), clamp(50px, 16vh, 100px));
  gap: 20px;
}

@media screen and (max-width: 772px) {
  .nav-with-side-menu .wp-block-navigation__responsive-container-content {
    overflow-y: scroll !important;
  }
}

.nav-with-side-menu .wp-block-navigation__responsive-container-content ul {
  gap: 20px!important;
}

.nav-with-side-menu ul.wp-block-navigation__submenu-container {
  padding-top: 30px !important;
}

.nav-with-side-menu ul.wp-block-navigation__submenu-container li a {
  color: var(--wp--preset--color--accent-2) !important;
}

/* Navigation Menu button - hamburger to x animation */
.nav-with-side-menu .wp-block-navigation
  .wp-block-navigation__responsive-container-open.always-shown {
  position: relative;
  inline-size: auto;
  block-size: auto;
  margin-left: 50px;
}

.nav-with-side-menu nav.wp-block-navigation:has(
    .wp-block-navigation__responsive-container.is-menu-open
  )
  .wp-block-navigation__responsive-container-open.always-shown
  svg,
.nav-with-side-menu nav.wp-block-navigation:has(.wp-block-navigation__responsive-dialog[open])
  .wp-block-navigation__responsive-container-open.always-shown
  svg {
  opacity: 0;
  transition: opacity 0.18s ease;
}

.nav-with-side-menu .wp-block-navigation
  .wp-block-navigation__responsive-container-open.always-shown::before,
.nav-with-side-menu .wp-block-navigation
  .wp-block-navigation__responsive-container-open.always-shown::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 28px;
  height: 3px;
  border-radius: 2px;
  transform: translate(-50%, -50%) rotate(0deg);
  opacity: 0;
  z-index: 100000;
  pointer-events: none;
  transition:
    transform 0.25s ease,
    opacity 0.18s ease;
  background-color: white;
}

.nav-with-side-menu nav.wp-block-navigation:has(
    .wp-block-navigation__responsive-container.is-menu-open
  )
  .wp-block-navigation__responsive-container-open.always-shown::before,
.nav-with-side-menu nav.wp-block-navigation:has(.wp-block-navigation__responsive-dialog[open])
  .wp-block-navigation__responsive-container-open.always-shown::before {
  opacity: 1;
  transform: translate(-50%, -50%) rotate(45deg);
}
.nav-with-side-menu nav.wp-block-navigation:has(
    .wp-block-navigation__responsive-container.is-menu-open
  )
  .wp-block-navigation__responsive-container-open.always-shown::after,
.nav-with-side-menu nav.wp-block-navigation:has(.wp-block-navigation__responsive-dialog[open])
  .wp-block-navigation__responsive-container-open.always-shown::after {
  opacity: 1;
  transform: translate(-50%, -50%) rotate(-45deg);
}

@media (prefers-reduced-motion: reduce) {
  .nav-with-side-menu nav.wp-block-navigation
    .wp-block-navigation__responsive-container-open.always-shown
    svg {
    transition: none;
  }
  .nav-with-side-menu .wp-block-navigation
    .wp-block-navigation__responsive-container-open.always-shown::before,
  .nav-with-side-menu .wp-block-navigation
    .wp-block-navigation__responsive-container-open.always-shown::after {
    transition: none;
  }
}

.nav-with-side-menu .wp-block-navigation__responsive-container-content,
.nav-with-side-menu .wp-block-navigation__responsive-dialog
  .wp-block-navigation__responsive-container-content {
  display: flex;
  flex-direction: column;
  gap: var(--wp--style--block-gap, 18px);
  padding: 24px;
  min-height: 100%;
  color: white;
}

.nav-with-side-menu .wp-block-navigation__responsive-container-close,
.nav-with-side-menu .wp-block-navigation__responsive-dialog .wp-block-navigation__responsive-close {
  position: sticky;
  top: 0;
  margin-left: auto;
  z-index: 2;
}

.nav-with-side-menu .is-menu-open
  .wp-block-navigation__responsive-container.is-menu-open[style*="inset:0"] {
  inset: auto 0 0 auto !important;
}

.nav-with-side-menu .wp-block-navigation__responsive-container-close {
  display: none;
}

div.wp-block-template-part:has(.nav-with-side-menu) {
  position: sticky;
  top: 0;
  z-index: 10000;
  background-color: var(--wp--preset--color--primary);
}

.nav-with-side-menu .wp-block-group:first-child {
  z-index: 1;
}

@media screen and (max-width: 772px) {
  .nav-hide-on-mobile,
  .pine-needle-image {
    display: none !important;
  }
}

#wildflowers {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  position: relative;
}

@media screen and (max-width: 599px) {
  #wildflowers {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    justify-content: flex-start !important;
    min-height: unset !important;
  }
}

.pine-needle-image {
  position: absolute;
}

@media screen and (max-width: 1226px) {
  .pine-needle-image {
    display: none;
  }
}

#wildflowers .pine-needle-image:first-child {
  top: -150px;
  left: -500px;
  transform: rotate(-45deg) scale(0.5);
  z-index: 20;
  opacity: 0.8;
}

#wildflowers .pine-needle-image:last-child {
  bottom: -200px;
  right: -445px;
  transform: rotate(235deg) scale(0.5);
  z-index: 20;
}

#wildflowers .wildflowers--bg {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  inset: 0;
  transform: translateY(30%);
}

@media screen and (max-width: 599px) {
  .wildflowers--bg {
    transform: none !important;
    top: 50px;
  }
}

.home-pinned-map-section--mobile {
  display: none;
}

@media screen and (max-width: 599px) {
  .home-pinned-map-section {
    display: none;
  }
  .home-pinned-map-section--mobile {
    display: block;
    z-index: 5;
  }
}

.home-cta-section {
  position: relative;
}

.home-cta-section h2 {
  max-width: 862px;
}

@media screen and (max-width: 599px) {
  .home-cta-section h2 {
    font-size: 22px;
  }

  .home-cta-section h2,
  .home-cta-section p {
    text-align: left !important;
  }

  .home-cta-section .wp-block-buttons {
    gap: 30px;
  }

  .home-cta-section .wp-block-button {
    width: 100%;
  }
}

.home-cta-section .pine-needle-image {
  transform: rotate(-45deg) scale(0.5);
  left: -360px;
  top: -30px;
}

#homes {
  position: relative;
}

.home-page-homes-cta {
  position: relative;
}

@media screen and (max-width: 600px) {
  .home-page-homes-cta {
    padding-top: 0 !important;
    margin-top: 30px !important;
  }
}

.home-page-background-images {
  z-index: 0;
  opacity: 0.2;
  pointer-events: none;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

@media screen and (max-width: 772px) {
  .home-page-background-images {
    display: none;
  }
}

.home-page-bg-images-container {
  height: 100%;
}

.home-page-bg-images-container .wp-block-column {
  flex-basis: 33.34%;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: space-evenly;
  height: 100%;
  flex-grow: 1;
}

.home-page-bg-images-container .wp-block-column:first-child figure:last-child {
  transform: translateY(-50px);
}

.home-page-bg-images-container .wp-block-column:nth-child(2) {
  align-items: center;
}

.home-page-bg-images-container
  .wp-block-column:nth-child(2)
  figure:first-child {
  transform: translateY(200px);
}

.home-page-bg-images-container .wp-block-column:nth-child(3) {
  align-items: flex-start;
}

.home-page-bg-images-container
  .wp-block-column:nth-child(3)
  figure:first-child {
  transform: translateY(100px);
}

.home-page-bg-images-container .wp-block-column:nth-child(3) figure:last-child {
  transform: translateY(-150px);
}

.hexagon-card {
  aspect-ratio: 1 / 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10px;

  background: var(--wp--preset--color--accent-2, #b9d7b8);
  color: var(--wp--preset--color--primary, #1e2b26);

  clip-path: polygon(50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
}

.hexagon-card h3,
.hexagon-card p {
  padding: 0 20px;
}

.hexagon-card strong {
  font-weight: 600;
}

@media screen and (max-width: 780px) {
  .hexagon-cards {
    padding-bottom: 60px!important;
    z-index: 5; /* hopefully this fixes weird mobile glitch */
  }

  .hexagon-cards .wp-block-column:not(:nth-of-type(2)) {
    order: 2;
  }

  .hexagon-card {
    max-width: 300px;
    margin: 20px auto;
  }
}

@media screen and (min-width: 781px) {
  .hexagon-card.card-1 {
    transform: translate(50%, 25%);
  }

  .hexagon-card.card-3 {
    transform: translate(50%, -25%);
  }

  .hexagon-card.card-4 {
    transform: translate(-50%, 25%);
  }

  .hexagon-card.card-6 {
    transform: translate(-50%, -25%);
  }
}

@media screen and (max-width: 1198px) {
  .hexagon-cards .wp-block-column:nth-of-type(2) {
    flex-basis: 33.33% !important;
  }
}

.commercial-community-icons figure {
  flex: 0 0 auto;
}

@media screen and (max-width: 1271px) {
  .commercial-community-icons {
    flex-direction: column !important;
    gap: 60px !important;
  }
}

@media screen and (max-width: 460px) {
  .commerical-community-icon-row {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .commerical-community-icon-row h3 {
    width: 100%;
  }
}

.gform_required_legend {
  display: none;
}

.gfield_required.gfield_required_asterisk {
  display: none;
}

.ginput_container.ginput_container_text input[type="text"],
.ginput_container.ginput_container_email input[type="email"],
.ginput_container.ginput_container_phone input[type="tel"] {
  background-color: transparent;
  border: none;
  border-bottom: 2px solid var(--gf-color-in-ctrl-primary-lighter);
  border-radius: 0;
}

.gfield-choice-input:checked {
  accent-color: var(--wp--preset--color--primary) !important;
}

/* location page */
.page-template-wp-custom-template-locations-page-template .entry-content {
  background-position: 90% 137px !important;
}

@media screen and (max-width: 600px) {
  .page-template-wp-custom-template-locations-page-template .entry-content {
    background: none !important;
  }
  
  .locations-page--scroll-text {
    display: none;
  }
}

@media screen and (min-width: 600px) {
  .locations-map-image--mobile {
    display: none;
  }

  .location-heading * {
    display: none;
  }
}

/* Locations Page Animations */
@media screen and (min-width: 600px) {
  .location-stage {
    position: relative;
    min-height: 100svh;
    overflow: clip;
  }

  .location-heading {
    min-height: 100vh;
  }

  .location-heading,
  .location-content {
    will-change: transform;
  }

  .location-stage {
    position: relative;
    min-block-size: 100svh;
    box-sizing: border-box;
    padding-block-start: calc(var(--nav-h) + env(safe-area-inset-top));
    overflow: clip;
    view-timeline-name: --stage;
    view-timeline-axis: block;
  }

  .location-page-card--top-center {
    padding-bottom: 60px!important;
  }

  .location-stage > * {
    margin-block: 0;
  }
  .location-stage
    :where(
      .wp-block-group,
      .wp-block-columns,
      .wp-block-image,
      .wp-block-heading,
      p
    ) {
    margin-block: 0 !important;
  }

  .location-content {
    animation: contentRise linear both;
    animation-timeline: --stage;
    animation-range: entry 10% to exit 100%;
    padding-inline: clamp(16px, 5vw, 64px);
  }

  @keyframes contentRise {
    from {
      transform: translateY(100%);
    }
    to {
      transform: translateY(-200%);
    }
  }
}

.video-modal,
.video-modal figure.wp-block-video {
  width: auto;
  aspect-ratio: 16/9;
}

.video-modal .wp-block-cloudcatch-light-modal-block__content {
  overflow: hidden !important;
}

@media screen and (min-width: 461px) {
  .commercial-hero {
    transform: translateY(-70px);
    place-content: center;
  }

  .pin-section {
    position: relative;
  }

  .pin {
    position: sticky;
    top: 140px;
    z-index: 1;
  }

  .next {
    z-index: 2;
    background: white;
    min-height: 100vh;
    padding: 4rem 1.5rem;
    place-content: center;
  }
}

@media screen and (min-width: 1271px) {
  .pin {
    top: calc(30vh + 50px);
    height: 100vh;
  }
}

.pin h2 {
  max-width: 20ch;
}

/* fixes stupid margin issue that is only happening on production */
.wp-block-template-part:has(.footer-dark) {
    margin-top: 0!important;
}

/* Base style for all buttons */
.event-category-buttons .wp-block-button__link {
  cursor: pointer;
}

.event-category-buttons a{
  border: 2px solid var(--wp--preset--color--accent-4);
}

/* Shared "active" styling */
body.term-past  .event-category-buttons a[href$="/event-category/past"],
body.term-resident-only .event-category-buttons a[href$="/event-category/resident-only"],
body.term-public .event-category-buttons a[href$="/event-category/public"],
body.term-upcoming .event-category-buttons a[href$="/event-category/upcoming"],
body.term-recurring .event-category-buttons a[href$="/event-category/recurring"] {
  /* ACTIVE styles */
  background-color: var(--wp--preset--color--accent-4)!important;
  color: var(--wp--preset--color--primary)!important; /* fallback */
  border: 2px solid var(--wp--preset--color--primary);
  pointer-events: none;   /* not clickable */
  cursor: default;
  opacity: 1;
}

/* Example: if your /events page body has class .page-events */
body.post-type-archive-event .event-category-buttons a[href$="/events"] {
  background-color: var(--wp--preset--color--accent-4)!important;
  color: var(--wp--preset--color--primary)!important; /* fallback */
  border: 2px solid var(--wp--preset--color--primary);
  pointer-events: none;   /* not clickable */
  cursor: default;
  opacity: 1;
}

.event-category-buttons a:hover {
  background-color: var(--wp--preset--color--accent-4)!important;
  color: var(--wp--preset--color--primary)!important; /* fallback */
  border: 2px solid var(--wp--preset--color--primary);
  transition: all .2s ease-in-out;
}

@media screen and (max-width: 781px) {
  .contact-us-picture {
    display: flex;
    justify-content: center;
  }

  .contact-us-picture img {
    height: auto!important;
    aspect-ratio: 1/1;
  }
}

.wp-block-navigation-item__content:focus {
  outline: none!important;
}