/* overrides.css — replaces webflow.js dropdown/tab behavior */

/* Dropdown hover — replaces webflow.js click-to-open (desktop only) */
@media screen and (min-width: 992px) {
  .w-dropdown:hover > .w-dropdown-list,
  .w-dropdown:focus-within > .w-dropdown-list {
    display: block;
  }
}

/* Tabs: make tab links show pointer cursor */
.w-tab-link {
  cursor: pointer;
}

/* Hero layout fix — allow flex item to respect max-width instead of
   expanding to content size (the large "inclusive" text at 6.6rem
   triggers min-width:auto > max-width:31rem without this). */
.home-hero_main-content-holder {
  min-width: 0;
}

/* Fix Bodoni Moda variable font axes — CSS font properties override
   font-variation-settings for registered axes (wght, opsz). Disable
   auto optical-sizing so the opsz 9.4 value from font-variation-settings
   is honoured instead of being auto-calculated from font-size. */
.home-hero_inclusive-text {
  font-optical-sizing: none;
  font-weight: 598;
}

/* Dropdown width — Webflow JS adds .w--open which sets width:14rem;
   since we use CSS :hover instead, apply the width directly. */
@media screen and (min-width: 992px) {
  .w-dropdown:hover > .navbar1_dropdown-list,
  .w-dropdown:focus-within > .navbar1_dropdown-list {
    width: 14rem;
  }
}

/* Hamburger animation — three bars morph into an X.
   Lines are 24×2 px with 6 px gap → center-to-center = 8 px. */
.menu-icon1_line-top,
.menu-icon1_line-middle,
.menu-icon1_line-bottom {
  transition: transform 0.4s ease, opacity 0.4s ease;
}
.navbar1_menu-button.w--open .menu-icon1_line-top {
  transform: translateY(8px) rotate(45deg);
}
.navbar1_menu-button.w--open .menu-icon1_line-middle {
  opacity: 0;
}
.navbar1_menu-button.w--open .menu-icon1_line-bottom {
  transform: translateY(-8px) rotate(-45deg);
}

/* Mobile nav — drawer that slides down from under the navbar bar. */
@media screen and (max-width: 991px) {
  .navbar1_component {
    position: relative;
    z-index: 100;
  }
  /* Keep navbar bar above the menu overlay so hamburger stays clickable */
  .navbar1_container {
    position: relative;
    z-index: 101;
  }
  /* Menu: always rendered but collapsed to height 0.
     CSS transition animates the height for a drawer effect.
     Must also target .is-page-height-tablet to beat its specificity.
     padding must be zeroed too — border-box height:0 does not override padding. */
  .navbar1_menu,
  .navbar1_menu.is-page-height-tablet {
    display: block !important;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 100;
    height: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    overflow: hidden;
    transition: height 0.4s ease, padding 0.4s ease;
  }
  /* Open state — expand to fill viewport below the navbar */
  .navbar1_component[data-nav-menu-open] .navbar1_menu,
  .navbar1_component[data-nav-menu-open] .navbar1_menu.is-page-height-tablet {
    height: calc(100dvh - 100%) !important;
    padding-top: 1rem !important;
    padding-bottom: 2rem !important;
    overflow-y: auto;
    /* Hide scrollbar while still allowing scroll */
    scrollbar-width: none;            /* Firefox */
  }
  .navbar1_component[data-nav-menu-open] .navbar1_menu::-webkit-scrollbar {
    display: none;                    /* Chrome / Safari */
  }
  /* Show dropdown sub-menus inline on mobile (tap to toggle via JS) */
  .navbar1_menu .w-dropdown-list {
    display: none;
  }
  /* "Featured" topper should not be sticky on mobile/tablet */
  .home-hero_featured-topper {
    position: static;
  }
}

/* Card corner dots — ensure dots paint above adjacent content blocks
   that follow in DOM order (home_featured-block-btm has position:relative
   and would otherwise overlap the bottom-left/bottom-right dots). */
.card_corner-dots-holder {
  z-index: 1;
}