/* @import url('http://example.com/example_style.css'); */

/***********************************************/
/* CSS @imports must be at the top of the file */
/* Add them above this section                 */
/***********************************************/

/*****************************************/
/* Start your style declarations here    */
/*****************************************/
/************************************************************
  GLOBAL HEADER FIX: White background + visible nav text
  + sticky/scrolled state + overlay/opacity protection
************************************************************/

/* 1) Force solid white header background (no transparency) */
header,
.header,
.custom-header,
.header-wrapper,
.hs-menu-wrapper {
  background: #ffffff !important;
  background-color: #ffffff !important;
  opacity: 1 !important;
}

/* 2) Remove common overlay layers that can cause white-on-white */
header::before,
header::after,
.header::before,
.header::after,
.custom-header::before,
.custom-header::after,
.header-wrapper::before,
.header-wrapper::after {
  content: none !important;
  display: none !important;
  opacity: 0 !important;
}

/* 3) Force nav/link text to be dark and readable */
header a,
.header a,
.custom-header a,
.header-wrapper a,
.hs-menu-wrapper a,
.hs-menu-wrapper * a {
  color: #000000 !important;
  opacity: 1 !important;
  text-decoration: none;
}

/* 4) Hover/focus color */
header a:hover,
header a:focus,
.header a:hover,
.header a:focus,
.custom-header a:hover,
.custom-header a:focus,
.hs-menu-wrapper a:hover,
.hs-menu-wrapper a:focus {
  color: #8e6f3e !important;
}

/* 5) Sticky / scrolled header states */
.header--sticky,
.header.is-sticky,
.header.scrolled,
header.is-sticky,
header.scrolled {
  background: #ffffff !important;
  background-color: #ffffff !important;
  opacity: 1 !important;
}

.header--sticky a,
.header.is-sticky a,
.header.scrolled a,
header.is-sticky a,
header.scrolled a {
  color: #000000 !important;
}

.header--sticky a:hover,
.header.is-sticky a:hover,
.header.scrolled a:hover,
header.is-sticky a:hover,
header.scrolled a:hover {
  color: #8e6f3e !important;
}

/* 6) Prevent blending/fading quirks */
.header,
.header-wrapper,
.custom-header {
  filter: none !important;
  mix-blend-mode: normal !important;
}
/* =========================================================
   GLOBAL HEADER: Mobile hamburger + accordion for HubSpot menu
========================================================= */

.tda-nav-toggle {
  display: none;
}

@media (max-width: 1024px) {
  /* Show hamburger on mobile */
  header.header .tda-nav-toggle {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid rgba(0,0,0,0.15);
    border-radius: 8px;
    background: #ffffff;
    color: #000;
    font-size: 16px;
    cursor: pointer;
  }

  /* Hide the menu by default on mobile */
  header.header .hs-menu-wrapper {
    display: none;
    margin-top: 12px;
  }

  /* Show menu when open */
  header.header.is-open .hs-menu-wrapper {
    display: block;
  }

  /* Accordion styling */
  header.header .hs-menu-wrapper ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  header.header .hs-menu-wrapper li {
    border-bottom: 1px solid rgba(0,0,0,0.10);
  }

  header.header .hs-menu-wrapper a {
    display: flex;
    justify-content: space-between;
    padding: 14px 12px;
    color: #000 !important;
    text-decoration: none;
  }

  header.header .hs-menu-wrapper li ul {
    display: none;
    padding-left: 12px;
  }

  header.header .hs-menu-wrapper li.is-open > ul {
    display: block;
  }

  header.header .hs-menu-wrapper li.has-submenu > a::after {
    content: "▾";
  }

  header.header .hs-menu-wrapper li.has-submenu.is-open > a::after {
    content: "▴";
  }
}
/* @import url('http://example.com/example_style.css'); */

/***********************************************/
/* CSS @imports must be at the top of the file */
/* Add them above this section                 */
/***********************************************/

/*****************************************/
/* Start your style declarations here    */
/*****************************************/

/************************************************************
  GLOBAL HEADER FIX: White background + visible nav text
  + sticky/scrolled state + overlay/opacity protection
************************************************************/

/* 1) Force solid white header background (no transparency) */
header,
.header,
.custom-header,
.header-wrapper,
.hs-menu-wrapper {
  background: #ffffff !important;
  background-color: #ffffff !important;
  opacity: 1 !important;
}

/* 2) Remove common overlay layers that can cause white-on-white */
header::before,
header::after,
.header::before,
.header::after,
.custom-header::before,
.custom-header::after,
.header-wrapper::before,
.header-wrapper::after {
  content: none !important;
  display: none !important;
  opacity: 0 !important;
}

/* 3) Force nav/link text to be dark and readable */
header a,
.header a,
.custom-header a,
.header-wrapper a,
.hs-menu-wrapper a,
.hs-menu-wrapper * a {
  color: #000000 !important;
  opacity: 1 !important;
  text-decoration: none;
}

/* 4) Hover/focus color */
header a:hover,
header a:focus,
.header a:hover,
.header a:focus,
.custom-header a:hover,
.custom-header a:focus,
.hs-menu-wrapper a:hover,
.hs-menu-wrapper a:focus {
  color: #8e6f3e !important;
}

/* 5) Sticky / scrolled header states */
.header--sticky,
.header.is-sticky,
.header.scrolled,
header.is-sticky,
header.scrolled {
  background: #ffffff !important;
  background-color: #ffffff !important;
  opacity: 1 !important;
}

.header--sticky a,
.header.is-sticky a,
.header.scrolled a,
header.is-sticky a,
header.scrolled a {
  color: #000000 !important;
}

.header--sticky a:hover,
.header.is-sticky a:hover,
.header.scrolled a:hover,
header.is-sticky a:hover,
header.scrolled a:hover {
  color: #8e6f3e !important;
}

/* 6) Prevent blending/fading quirks */
.header,
.header-wrapper,
.custom-header {
  filter: none !important;
  mix-blend-mode: normal !important;
}

/* =========================================================
   GLOBAL HEADER: Mobile hamburger + accordion for HubSpot menu
========================================================= */

.tda-nav-toggle {
  display: none;
}

@media (max-width: 1024px) {
  /* Show hamburger on mobile */
  header.header .tda-nav-toggle {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid rgba(0,0,0,0.15);
    border-radius: 8px;

    /* TEMP: Make it teal so it’s obvious while testing */
    background: #22bfb3;

    color: #000;
    font-size: 16px;
    cursor: pointer;
  }

  /* Hide the menu by default on mobile */
  header.header .hs-menu-wrapper {
    display: none;
    margin-top: 12px;
  }

  /* Show menu when open */
  header.header.is-open .hs-menu-wrapper {
    display: block;
  }

  /* Accordion styling */
  header.header .hs-menu-wrapper ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  header.header .hs-menu-wrapper li {
    border-bottom: 1px solid rgba(0,0,0,0.10);
  }

  header.header .hs-menu-wrapper a {
    display: flex;
    justify-content: space-between;
    padding: 14px 12px;
    color: #000 !important;
    text-decoration: none;
  }

  header.header .hs-menu-wrapper li ul {
    display: none;
    padding-left: 12px;
  }

  header.header .hs-menu-wrapper li.is-open > ul {
    display: block;
  }

  header.header .hs-menu-wrapper li.has-submenu > a::after {
    content: "▾";
  }

  header.header .hs-menu-wrapper li.has-submenu.is-open > a::after {
    content: "▴";
  }
}
/* =========================================================
   MOBILE HEADER: place hamburger without affecting logo layout
========================================================= */
@media (max-width: 1024px) {

  /* Make header a positioning context */
  header.header {
    position: relative;
  }

  /* Put the hamburger in the top-right of the header */
  header.header .tda-nav-toggle {
    position: absolute;
    top: 50%;
    right: 16px;
    transform: translateY(-50%);
    z-index: 9999;

    /* (Keep teal for visibility while testing) */
    background: #22bfb3;
    color: #000;
    border: 0;
    border-radius: 8px;
    padding: 10px 12px;
  }

  /* Give the logo/header content some right padding
     so the hamburger doesn’t overlap */
  header.header {
    padding-right: 72px;
  }
}
/* =========================================================
   APP-STYLE MOBILE HEADER TOGGLE (icon-only)
========================================================= */

@media (max-width: 1024px) {
  /* Keep header as positioning context */
  header.header {
    position: relative;
    padding-right: 64px; /* space so toggle doesn't overlap */
  }

  /* Icon-only toggle (no teal button styling) */
  header.header .tda-nav-toggle {
    position: absolute;
    top: 50%;
    right: 14px;
    transform: translateY(-50%);
    z-index: 9999;

    width: 44px;
    height: 44px;
    padding: 0;

    background: transparent;
    border: 0;
    border-radius: 12px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  /* Subtle tap feedback */
  header.header .tda-nav-toggle:active {
    transform: translateY(-50%) scale(0.98);
  }

  header.header .tda-nav-toggle:focus-visible {
    outline: 2px solid #8e6f3e;
    outline-offset: 2px;
  }

  /* Draw a clean hamburger with 3 lines */
  header.header .tda-nav-toggle .tda-nav-icon {
    position: relative;
    width: 22px;
    height: 2px;
    background: #000;
    border-radius: 2px;
    display: block;
  }

  header.header .tda-nav-toggle .tda-nav-icon::before,
  header.header .tda-nav-toggle .tda-nav-icon::after {
    content: "";
    position: absolute;
    left: 0;
    width: 22px;
    height: 2px;
    background: #000;
    border-radius: 2px;
  }

  header.header .tda-nav-toggle .tda-nav-icon::before {
    top: -7px;
  }

  header.header .tda-nav-toggle .tda-nav-icon::after {
    top: 7px;
  }

  /* When open, transform into an "X" */
  header.header.is-open .tda-nav-toggle .tda-nav-icon {
    background: transparent;
  }

  header.header.is-open .tda-nav-toggle .tda-nav-icon::before {
    top: 0;
    transform: rotate(45deg);
  }

  header.header.is-open .tda-nav-toggle .tda-nav-icon::after {
    top: 0;
    transform: rotate(-45deg);
  }
}
/* =========================================================
   Submenu indicators (desktop + tablet + mobile)
========================================================= */

/* Mark items with submenus with a chevron */
header.header .hs-menu-wrapper li.has-submenu > a::after {
  content: "▾";
  margin-left: 10px;
  font-size: 14px;
  line-height: 1;
}

/* When open (mobile accordion state), flip it */
header.header .hs-menu-wrapper li.has-submenu.is-open > a::after {
  content: "▴";
}
header.header .hs-menu-wrapper li.has-submenu > a {
  display: inline-flex;
  align-items: center;
}
/* =========================================================
   NAV REFINEMENTS
   - Mobile: prevent submenu items from centering
   - Tablet: reduce crowding in header nav
========================================================= */

/* ---------- MOBILE FIXES ---------- */
@media (max-width: 1024px) {

  /* Ensure all menu containers are left-aligned */
  header.header .hs-menu-wrapper,
  header.header .hs-menu-wrapper ul,
  header.header .hs-menu-wrapper li {
    text-align: left !important;
  }

  /* Force every menu row to behave the same */
  header.header .hs-menu-wrapper li > a {
    width: 100% !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    text-align: left !important;
  }
}

/* ---------- TABLET FIXES ---------- */
@media (min-width: 768px) and (max-width: 1024px) {

  /* Reduce visual crowding in the nav */
  header.header .hs-menu-wrapper a {
    font-size: 14px !important;
    padding: 10px 8px !important;
    white-space: nowrap;
  }

  /* Add spacing if the menu uses flex layout */
  header.header .hs-menu-wrapper > ul {
    gap: 18px;
/* =========================================================
   TABLET: use hamburger menu (same behavior as mobile)
   Fixes wrapped / multi-line desktop nav on tablet
========================================================= */

/* Treat tablet like mobile for nav behavior */
@media (min-width: 768px) and (max-width: 1024px) {

  /* Show the hamburger toggle on tablet */
  header.header .tda-nav-toggle {
    display: inline-flex !important;
  }

  /* Hide the menu by default on tablet (like mobile) */
  header.header .hs-menu-wrapper {
    display: none !important;
  }

  /* When open, show the menu */
  header.header.is-open .hs-menu-wrapper {
    display: block !important;
    margin-top: 12px;
  }

  /* Make rows consistent on tablet (same as mobile list style) */
  header.header .hs-menu-wrapper li > a {
    width: 100% !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    text-align: left !important;
  }

  header.header .hs-menu-wrapper,
  header.header .hs-menu-wrapper ul,
  header.header .hs-menu-wrapper li {
    text-align: left !important;
  }
}