/* ============================================================
   PURE CSS MEGA MENU
   ------------------------------------------------------------
*/

/* ==============================
   Reset
============================== */

/* Use border-box sizing everywhere:
   padding/borders are included in width/height, making layout predictable. */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* ==============================
   Base nav styling
============================== */

/* Full-width nav background and typography. */
.ada-site-nav {
  width: 100%;                          /* Nav spans full viewport width */
  background: #fff;                     /* White background */
  border-bottom: 1px solid rgba(0,0,0,.08); /* Subtle bottom divider */
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; /* Clean UI font stack */
  position: relative;                   /* Creates a stacking context if needed */
  text-transform: uppercase;
}

/* Default link styling inside nav. */
.ada-site-nav a {
  color: #111;                          /* Near-black text */
  text-decoration: none;                /* Remove underline by default */
  font-family: transducer;
  font-weight: 600;
}

/* Accessible focus ring (keyboard users). */
.ada-site-nav a:focus-visible {
  outline: 2px solid #111;              /* Strong contrast ring */
  outline-offset: 3px;                  /* Space between ring and element */
}

/* ==============================
   NAV INNER (desktop container + mega anchor)
============================== */

/* This is your centered “container” on desktop.
   Mega dropdowns are anchored to this element. */
.ada-nav-inner {
  margin-inline: auto;                  /* Center the container */
  /* min-height: 72px;   Nav bar height */
  display: flex;                        /* Flex layout */
  align-items: center;                  /* Vertically center items */
  justify-content: space-around;              /* Center menu horizontally (desktop) */   
  position: relative;                   /* CRITICAL: mega panels absolute-position relative to this */
  padding: 0 16px;                      /* Side padding so content doesn't touch edges */
}

/* ==============================
   Burger (mobile main toggle)
============================== */

/* This checkbox controls the mobile menu open/close.
   It's visually hidden but still accessible to screen readers. */
.ada-nav-toggle {
  position: absolute;                   /* Remove from normal flow */
  width: 1px;
  height: 1px;
  overflow: hidden;                     /* Hide the box */
  clip: rect(0 0 0 0);                  /* Legacy clipping */
  clip-path: inset(50%);                /* Modern clipping */
  white-space: nowrap;                  /* Prevent wrapping */
}

/* Burger label becomes visible on mobile only via media query. */
.ada-burger {
  display: none;                        /* Hidden on desktop */
  position: absolute;                   /* Position within .ada-nav-inner */
  right: 16px;                          /* Align with .ada-nav-inner padding */
  top: 50%;                             /* Vertically center */
  transform: translateY(-50%);          /* Correct centering */
  width: 44px;                          /* Touch-friendly target */
  height: 44px;
  border: 2px solid #000000;    /* Light outline */
  background: #fff;
  cursor: pointer;                      /* Indicates clickability */
  align-items: center;                  /* Center “bars” */
  justify-content: center;
  flex-direction: column;               /* Stack bars vertically */
  gap: 5px;                             /* Space between bars */
    border-radius:10px;
}
.ada-burger:hover{
    border: 2px solid #008279;  
}

/* The 3 lines inside the burger icon. */
.ada-burger span {
  width: 22px;
  height: 3px;
  background: #111;
  display: block;
}
.ada-burger:hover span {
  background: #008279;   
}

.ada-burger *:last-child{
     width: 15px; 
    margin-right:7px;
}


/* ==============================
   Desktop Menu
============================== */

/* The top-level menu list. */
.ada-menu {
  list-style: none;                     /* Remove bullets */
  display: flex;                        /* Horizontal menu */
  gap: 3.5rem;                            /* Space between items */
  margin: 0;                            /* Reset default */
  padding: 0;                           /* Reset default */
  align-items: center;                  /* Vertical alignment */
}

/* IMPORTANT:
   We *must not* position <li> on desktop.
   If li were position:relative, the mega (position:absolute) would anchor to the li,
   and widths/placement would vary per item.
   Keeping li position:static ensures mega anchors to .ada-nav-inner instead. */
.ada-menu > li {
  position: static;
}

/* Wrapper around link + mobile click overlay.
   On desktop it mostly helps structure, on mobile it becomes the click region. */
.ada-nav-row {
  position: relative;                   /* Needed on mobile to contain the overlay label */
}

/* Top-level link styling. */
.ada-toplink {
  display: inline-block;
  padding: 1rem 0;
  position: relative;/* Allows pseudo-element arrow positioning */
  transition: color .2s ease;
}
.ada-toplink:hover{
    color:#008279;
}

/* Desktop arrow indicator next to mega items. */
.ada-has-mega .ada-toplink {
  padding-right: 18px;                  /* Space for arrow */
}

/* Draw the arrow on desktop using a pseudo-element. */
.ada-has-mega .ada-toplink::after {
  content: "▾";                         /* Down arrow */
  position: absolute;
  right: 0;                             /* Right edge of link */
  top: 50%;                             /* Vertical center */
  transform: translateY(-45%);          /* Fine-tune baseline alignment */
  font-size: 0.85em;                    /* Slightly smaller */
  opacity: .8;
}

/* Hide mobile-only elements on desktop by default. */
.ada-mega-toggle,
.ada-mega-hit {
  display: none;
}

/* ==============================
   Mega Panel (DESKTOP)
============================== */

/* The mega dropdown panel.
   KEY: position absolute, left:0, width:100% anchors to .ada-nav-inner (the nearest positioned ancestor). */
.ada-has-mega > .ada-mega {
  position: absolute;                   /* Out of flow; overlays content below */
  left: 0;                              /* Align with left edge of .ada-nav-inner */
  top: 100%;                            /* Sit directly below nav bar */
  width: 100%;                          /* EXACT width of .ada-nav-inner */
  background: #008279;                  /* background */
  border-top: 2px solid #004b46;        /* Blue bar so it's easy to see */
  opacity: 0;                           /* Hidden by default */
  visibility: hidden;                   /* Prevent focus/selection */
  pointer-events: none;                 /* Prevent clicks when hidden */
  transform: translateY(8px);           /* Slight slide-down */
  transition: opacity .2s ease, transform .2s ease, visibility .2s; /* Smooth open/close */
  border-radius: 0 0 12px 12px;
}

/* Desktop open behavior.
   We do NOT use li:focus-within, because it can “stick open” after clicking inside.
   Instead: hover OR focus on the top link itself. */
@media (min-width: 901px) {

  /* Open on hover (mouse/touchpad users). */
  .ada-has-mega:hover > .ada-mega {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
  }

  /* Open for keyboard navigation:
     When the top-level link gets focus, open the mega panel.
     (~ selector) requires .ada-mega to come after .ada-nav-row in the DOM (it does). */
  .ada-has-mega > .ada-nav-row > .ada-toplink:focus-visible ~ .ada-mega,
  .ada-has-mega > .ada-nav-row > .ada-toplink:focus ~ .ada-mega {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
  }
}

/* Mega content grid. */
.ada-mega-inner {
  display: grid;
 /* grid-template-columns: repeat(4, minmax(0, 1fr));  4 equal columns */
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.25rem;                       /* Spacing between columns */
  padding: 1.25rem;                   /* Internal padding around content */
}

/* Column card styling. */
.ada-mega-col {
  background-color: #008279;
  border: 0;
  padding: 2rem;
}
.ada-mega-col img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px; /* optional */
}
.ada-mega-col hr {
    border:1px solid #94d9d5;  
    width:30%;
    text-align: left;
    margin-left: 0;
}


/* Column title styling. color: #94d9d5; */
.ada-mega-title {
    margin: 0 0 0.75rem;
    color: #ffffff;
    font-weight: 600;
    font-family:transducer;
    font-size:1.8rem;
}
/* if the title is a link. */
.ada-mega-title a {
  color: inherit;
  text-decoration: none;
}
.ada-mega-title a:hover {
     color:#004b46; 
}


/* Reset list styling inside the mega. */
.ada-mega ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Mega link row styling. */
.ada-mega li a {
  display: block;                     /* Fill row for easy clicking */
  padding: 1rem 0.5rem 1rem 0.5rem;
  color:#94d9d5;
  transition: color .2s ease;
}

/* Hover feedback for mega links. */
.ada-mega li a:hover {
  color:#ffffff;
}

/* Tablet: reduce mega columns to 2. */
@media (max-width: 1200px) {
  .ada-mega-inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ==============================
   Mobile Layout
============================== 
@media (max-width: 900px) {
*/



@media (max-width: 85.375em) {
   
    
  .ada-mega-col--image {
    display: none;
  }


  /* On mobile, nav-inner becomes full width (container-like behavior is not needed). */
  .ada-nav-inner {
    width: 100%;
    margin: 0;
    justify-content: flex-start;       /* Menu panel will align left */
    padding: 0 12px;                   /* Slightly smaller padding */
    /* min-height: 72px; */
  }

  /* Burger appears on mobile. 
  .ada-burger {
    display: inline-flex;
    right: 12px;                       /* Match nav-inner padding 
  }
   */
    
    
/* Hide scrollbar but keep scroll functionality */
.ada-menu {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;     /* Firefox */
}

.ada-menu::-webkit-scrollbar {
  display: none;             /* Chrome / Safari */
}
    
    
  /* Put the burger exactly where your old header button lived */
  .ada-burger {
    position: fixed;      /* fixed so it stays clickable over the full-screen menu */
    top: 50px;            /* tweak to match your header */
    right: 20px;          /* tweak to match your header */
    z-index: 10003;       /* above the menu overlay */
    display: inline-flex; /* ensure it shows on mobile */
  }

  /* Convert top menu into a full-width vertical panel. 
  .ada-menu {
    position: absolute;                /* Overlay below nav bar 
    top: 100%;
    left: 0;
    width: 100%;
    display: none;                     /*Hidden until nav-toggle checked
    flex-direction: column;            /*Stack items vertically 
    gap: 0.5rem;
    padding: 0.75rem;
    background: #fff;
    border-top: 2px solid rgba(0,0,0,.18);
  }
*/
  .ada-menu {
    position: fixed;       /* Take it out of header flow */
    inset: 0;              /* top:0 right:0 bottom:0 left:0 */
    width: 100%;
    height: 100vh;         /* Full viewport height */
    overflow-y: auto;      /* Scroll naturally if tall */
    background: #fff;
    gap: 0.2rem;
    display: none;
    flex-direction: column;
    padding: 0 24px 40px; /* top padding pushes below header */
    z-index: 9999;         /* Sit above theme */
    margin-top:100px;
  }

  /* When burger checkbox is checked, show the menu. */
  .ada-nav-toggle:checked ~ .ada-menu {
    display: flex;
  }

  /* Each list item fills width. */
  .ada-menu > li {
    width: 100%;
  }

  /* Ensure row wrapper fills width so overlay and link align. */
  .ada-nav-row {
    width: 100%;
  }

  /* Mobile top-level links become large tappable blocks.
     Extra right padding reserves space for the arrow area. */
  .ada-toplink {
    width: 100%;
    display: block;
     padding: 1.5rem 3rem 1.5rem 0.95rem; /* right padding for arrow region */
    background-color:#008279;
    border: none;
    line-height: 1.2;
    color:#ffffff!important;
    border-radius:10px 10px 0 0 ;
  }


  /* Remove the desktop pseudo-arrow to avoid double arrows. */
  .ada-has-mega .ada-toplink::after {
    content: "";
  }

  /* Hide the mega toggle checkbox but keep it functional. */
  .ada-mega-toggle {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }

  /* The overlay label that makes the whole row clickable to toggle the mega.
     NOTE: It's confined to .ada-nav-row (because .ada-nav-row is position:relative). */
  .ada-mega-hit {
    display: flex;
    align-items: center;               /* Vertically center arrow */
    justify-content: flex-end;         /* Arrow on the right */
    position: absolute;
    inset: 0;                          /* Cover exactly the nav-row area */
    padding-right: 14px;               /* Right spacing for arrow */
    cursor: pointer;
  }

  /* The arrow graphic in the overlay label. */
  .ada-mega-hit::after {
    content: "▾";
    font-size: 18px;
    opacity: .85;
    color:#ffffff;
  }

  /* Mobile mega is in-flow below the row (not absolutely positioned).
     We override desktop hiding behavior by making it display:none and toggled by checkbox. */
  .ada-has-mega > .ada-mega {
    position: static;
    width: 100%;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
    transition: none;

    display: none;                      /* Closed until checkbox checked */
    border: none;
    margin-top: 0;
  }

  /* Mobile mega becomes one column. */
  .ada-mega-inner {
    grid-template-columns: 1fr;
    padding: 0.9rem;
    gap: 0.75rem;
  }

  /* When mega checkbox is checked, show the mega panel. */
  .ada-mega-toggle:checked ~ .ada-mega {
    display: block;
  }

  /* When open, flip arrow. This selector relies on:
     input.mega-toggle + div.nav-row ... (adjacent sibling) */
  .ada-mega-toggle:checked + .ada-nav-row .ada-mega-hit::after {
    content: "▴";
  }
}

@media (max-width: 48em) {
    
      .ada-menu {
        padding: 10px 24px 40px; /* top padding pushes below header */
        margin-top:50px;
      }
    
    .ada-burger {
        position: fixed;      /* fixed so it stays clickable over the full-screen menu */
        top: 30px;            /* tweak to match your header */
        right: 20px;          /* tweak to match your header */
        width: 33px;                          /* Touch-friendly target */
        height: 33px;
        border: 2px solid #000000;    /* Light outline */
        z-index: 10003;       /* above the menu overlay */
        display: inline-flex; /* ensure it shows on mobile */
      }  
    .ada-burger span{
         width:17px; 
        height:2px;
    }
    .ada-burger *:last-child{
          width:12px; 
        margin-right:5px;
    }
}