/* =========================
   Header Section
========================= */
header._header {
  position: fixed;
  inset: 0 0 auto;
  width: 100%;
  z-index: 999;
  padding: 0;
  font-family: var(--first-font-body);
}

header._header .inner-header {
  max-width: none;
  height: 110px;
  padding: 0 50px;
  flex-wrap: nowrap;
  align-items: center;
  transition: background-color 0.5s ease-in;
}

header._header .header-logo {
  flex: 0 0 272.016px;
  height: 110px;
  padding: 20px 0;
}

header._header .logo-wrapper,
header._header .logo-wrapper a {
  display: block;
  width: 100%;
  height: 100%;
}

header._header .logo-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

header._header .logo-wrapper a.sticky-logo,
header._header .header-menu,
header._header .header-contact .calling-icon,
header._header .header-contact .contact-heading,
header._header .header-contact .divider {
  display: none;
}

header._header.collapsed .logo-wrapper a.sticky-logo,
header._header.sticky .logo-wrapper a.sticky-logo {
  display: block;
}

header._header.collapsed .logo-wrapper a.main-logo,
header._header.sticky .logo-wrapper a.main-logo {
  display: none;
}

header._header .hamburger-menu {
  order: 1;
  flex: 0 0 50px;
  margin: 0 100px 0 auto;
}

header._header .menu_trigger,
header._header .menu-trigger {
  display: block;
  width: 50px;
  height: 30px;
  border-top: 2px solid;
  border-bottom: 2px solid;
  cursor: pointer;
}

header._header .menu_trigger span,
header._header .menu-trigger span {
  display: block;
  width: 100%;
  margin-top: 12px;
  border-top: 2px solid;
}

header._header .menu_trigger span:not(:first-child),
header._header .menu-trigger span:not(:first-child) {
  display: none;
}

header._header .menu_trigger.menu-active,
header._header .menu_trigger.menu_active,
header._header .menu-trigger.menu-active,
header._header .menu-trigger.menu_active {
  border-bottom: 0;
  transform: translateY(10px) rotate(45deg);
}

header._header .menu_trigger.menu-active span,
header._header .menu_trigger.menu_active span,
header._header .menu-trigger.menu-active span,
header._header .menu-trigger.menu_active span {
  transform: translateY(-13px) rotate(90deg);
}

header._header .header-contact {
  order: 2;
  flex-shrink: 0;
  margin-right: 35px;
}

header._header .header-contact .phone-wrap,
header._header .header-contact .contact-number {
  display: inline-block;
  margin: 0;
  padding: 0;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: 3.25px;
  white-space: nowrap;
}

header._header .header-cta {
  order: 3;
  display: flex;
  flex-shrink: 0;
  gap: 30px;
  margin-right: 15px;
}

header._header .header-cta .header-btn {
  min-width: 150px;
  margin: 0;
  padding: 13px 25px;
  border: 2px solid currentColor;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  font-family: inherit;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: inherit;
  transition: background-color 0.1s ease-in, color 0.1s ease-in;
}

header._header .header-cta .header-btn:hover,
header._header .header-cta .header-btn:focus-visible {
  background: currentColor;
  color: #000;
}

header._header .menu_trigger:focus-visible,
header._header .menu-trigger:focus-visible,
header._header .phone-wrap:focus-visible {
  outline: 1px solid currentColor;
  outline-offset: 5px;
}

header._header .header-contact .contact-number,
header._header .header-cta .header-btn {
  letter-spacing: 0;
}

header._header .header-contact .contact-number::after,
header._header .header-cta .header-btn::after {
  font-size: 14px;
  letter-spacing: 2px;
}
/* =========================
   Header Menu Panel
========================= */
.mobile-menu-wrap {
  display: none;
  right: 0;
  max-width: 550px;
  padding: 15px;
  background: var(--base-primary);
  color: var(--first-white);
  font-family: var(--first-font-body);
  font-size: 18px;
  line-height: 1.15;
  transition: none;
  scrollbar-width: none;
}

.mobile-menu-wrap.open {
  display: block;
  overflow-y: auto;
}

.mobile-menu-wrap .mobile-inner-wrap,
.mobile-menu-wrap .menu-right-wrap {
  display: block;
  width: 100%;
  height: auto;
  padding: 0;
  background: transparent;
}

.mobile-menu-wrap .menu-left-wrap {
  display: block;
  order: 1;
  width: 100%;
  height: auto;
  padding: 0;
  background: transparent;
  box-shadow: none;
}

.mobile-menu-wrap .mobile-inner-wrap {
  display: flex;
  flex-direction: column;
}

.mobile-menu-wrap .left-wrapper {
  height: auto;
  padding: 0;
  overflow: visible;
}

.mobile-menu-wrap .mob-contact-wrap,
.mobile-menu-wrap .mobile-heading,
.mobile-menu-wrap .menu-devider,
.mobile-menu-wrap .mob-social-wrap .social-icon:not(:first-child):not(:nth-child(3)) {
  display: none;
}

.mobile-menu-wrap .mob-cta-wrap {
  order: 0;
  padding: 10px 0 0;
  text-align: center;
  display: flex;
  flex-flow: wrap;
  gap: 10px;
}

.mobile-menu-wrap .mob-cta-wrap .header-btn {
  min-width: 0;
  height: auto;
  margin: 10px 0;
  padding: 15px 35px;
  border: 2px solid var(--first-white);
  border-radius: 0;
  background: transparent;
  color: var(--first-white);
  font: 700 14px/1 var(--first-font-body);
  letter-spacing: 2px;
  text-transform: uppercase;
}

.mobile-menu-wrap .mob-cta-wrap .header-btn:last-child {
  display: block;
  margin: 30px 0 0;
  padding: 0;
  border: 0;
  font-size: 20px;
  line-height: 23px;
  letter-spacing: normal;
}

/* .mobile-menu-wrap .mob-cta-wrap .header-btn:not(:last-child):hover,
.mobile-menu-wrap .mob-cta-wrap .header-btn:not(:last-child):focus-visible,
.mobile-menu-wrap .mob-social-wrap .social-icon a:hover,
.mobile-menu-wrap .mob-social-wrap .social-icon a:focus-visible {
  background: var(--first-white);
  color: var(--base-primary);
} */

.mobile-menu-wrap ul.social-links li a {
    border-color: var(--first-on-primary) !important;
}

.mobile-menu-wrap .mob-cta-wrap .header-btn:last-child:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}

.mobile-menu-wrap .mob-social-wrap {
  display: block;
  order: 1;
  width: 100%;
  margin: 0;
  padding: 0;
}

.mobile-menu-wrap .social-bar {
  padding: 26px 0 5px;
}
.mobile-menu-wrap .mob-social-wrap .social-icon {
  margin: 0;
}

.mobile-menu-wrap .mob-social-wrap .social-icon a {
  padding: 0;
  border: 2px solid;
 
}

.mobile-menu-wrap .mob-social-wrap .social-icon i {
  width: 16px;
  height: 16px;
  background: currentColor;
  mask: var(--menu-social-icon) center / contain no-repeat;
}

.mobile-menu-wrap .swi-facebook {
  --menu-social-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M10 3h2V0h-2C7 0 6 2 6 5v1H4v3h2v7h3V9h2l1-3H9V5c0-1 0-2 1-2z'/%3E%3C/svg%3E");
}

.mobile-menu-wrap .swi-instagram {
  --menu-social-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5'%3E%3Crect x='1' y='1' width='14' height='14' rx='4'/%3E%3Ccircle cx='8' cy='8' r='3.3'/%3E%3Ccircle cx='12' cy='4' r='.8' fill='black' stroke='none'/%3E%3C/svg%3E");
}

.mobile-menu-wrap .mobile-logo-wrap {
  position: static;
  height: 1px;
}

.mobile-menu-wrap .header-logo-img {
  display: none;
}

.mobile-menu-wrap .menu-close {
  top: 10px;
  right: 10px;
  width: 40px;
  height: 40px;
  padding: 5px;
  display: block;
  font-size: 30px;
  font-weight: 700;
  line-height: 30px;
  transform: rotate(45deg);
  transition: none;
}

.mobile-menu-wrap .menu-close span {
  display: block;
  transform: none;
}

.mobile-menu-wrap .mobile-inner-wrap .mobile-menu {
  display: block;
  height: auto;
  padding: 0;
  margin-top: 50px;
  overflow: visible;
}

.mobile-menu-wrap .main-menu {
  display: block;
  text-align: left;
}

.mobile-menu-wrap ul.main-menu > li.menu-item {
  padding: 1px 10px;
  margin-bottom: 30px;
}

.mobile-menu-wrap ul.main-menu li.menu-item a.menu-item-link {
  display: inline-block;
  padding: 0;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: 3px;
  text-transform: uppercase;
  /* color: var(--first-white); */
  transition: none;
}
/* 
.mobile-menu-wrap ul.main-menu > li:nth-child(2) > a.menu-item-link {
  color: var(--first-secondary);
  font-weight: 700;
} */
.mobile-menu-wrap .menu-item-link:hover::after,
.mobile-menu-wrap .menu-item-link:focus-visible::after {
  width: 100%;
}

/* Sidebar menu: hide the dropdown children, and the short rule that
   component-common.css:370 draws under the last sub-menu item. Hiding the list
   removes that rule too, but it is neutralised explicitly so it cannot come
   back if the submenu is ever shown again. */
.mobile-menu-wrap ul.main-menu ul.sub-menu {
  display: none;
}

.mobile-menu-wrap ul.main-menu ul.sub-menu li.menu-item:last-child::after {
  content: none;
}

/* =========================
   Homepage Layout
========================= */
body:has(> section#hero-banner) {
  display: flex;
  flex-direction: column;
}

body:has(> section#hero-banner) > header._header {
  order: 0;
}

body:has(> section#hero-banner) > .mobile-menu-wrap {
  order: 1;
}

body:has(> section#hero-banner) > section#hero-banner {
  order: 2;
}

body:has(> section#hero-banner) > section#home-intro {
  order: 3;
}

body:has(> section#hero-banner) > section#home-floorplans {
  order: 4;
}

body:has(> section#hero-banner) > section#tabs-block {
  order: 5;
}

body:has(> section#hero-banner) > section#home-gallery {
  order: 6;
}

body:has(> section#hero-banner) > section#home-cta {
  order: 7;
}

body:has(> section#hero-banner) > section#form-section {
  order: 8;
}

body:has(> section#hero-banner) > section#home-map {
  order: 9;
}

body:has(> section#hero-banner) > section#footer-cta {
  order: 10;
}

body:has(> section#hero-banner) > footer.footer {
  order: 11;
}


/* for map section */
.home-map .container {
  max-width: 100%;
  padding: 0;
}
/* =========================
   Header Responsive
   The bar is built from fixed sizes (272px logo, 50px side padding, 100px
   hamburger gutter, 150px buttons), which overflow well before tablet width.
   The hamburger box keeps its 50x30 size at every breakpoint: the menu-active
   X is built from translateY values tied to that height.
========================= */
@media screen and (max-width: 1440px) {
  header._header .inner-header {
    padding: 0 30px;
  }

  header._header .header-logo {
    flex: 0 0 230px;
  }

  header._header .hamburger-menu {
    margin-right: 60px;
  }

  header._header .header-cta {
    gap: 20px;
  }
}

@media screen and (max-width: 1200px) {
  header._header .inner-header,
  header._header .header-logo {
    height: 96px;
  }

  header._header .header-logo {
    flex: 0 0 200px;
    padding: 18px 0;
  }

  header._header .hamburger-menu {
    margin-right: 40px;
  }

  header._header .header-contact {
    margin-right: 20px;
  }

  header._header .header-cta {
    gap: 14px;
  }

  header._header .header-cta .header-btn {
    min-width: 130px;
    padding: 11px 18px;
  }
}

/* The phone number moves to the slide-out panel (.mob-phone-wrap), so it does
   not need to compete for room in the bar. */
@media screen and (max-width: 992px) {
  header._header .inner-header,
  header._header .header-logo {
    height: 88px;
  }

  header._header .inner-header {
    padding: 0 15px;
  }

  header._header .header-logo {
    flex: 0 0 170px;
    padding: 16px 0;
  }

  /* thefirstokc.com drops the whole CTA group at 992 (header .header-inner
     .header-cta { display: none }); phone and both buttons live in the
     slide-out panel from here down. */
  header._header .header-contact,
  header._header .header-cta {
    display: none;
  }

  header._header .hamburger-menu {
    margin-right: 0;
  }
}

/* Phone and both CTAs are already in the slide-out panel (.mob-cta-wrap), so
   the bar keeps only the logo and the hamburger. */
@media screen and (max-width: 767px) {
  header._header .inner-header,
  header._header .header-logo {
    height: 70px;
  }

  header._header .inner-header {
    padding: 0 15px;
  }

  header._header .header-logo {
    flex: 0 0 140px;
    padding: 12px 0;
  }

  .mobile-menu-wrap {
    max-width: 100%;
  }
}

@media screen and (max-width: 480px) {
  header._header .inner-header,
  header._header .header-logo {
    height: 62px;
  }

  header._header .header-logo {
    flex: 0 0 120px;
    padding: 10px 0;
  }
}