/* =====================================================
   MEGA NAVIGATION
   Loaded only when the "Use new navigation" toggle is on for the active menu.
   Everything is scoped under body.mega-nav-active so the current navigation is unaffected.

   Colors are exposed as custom properties so other sites can rebrand without forking this file.
   ===================================================== */

body.mega-nav-active {
  --mega-accent: #F47B20;
  --mega-accent-hover: #e36a10;
  --mega-dark: #163E52;
  --mega-sand: #f4f1ec;
  --mega-sand-alt: #f0ece6;
  --mega-border: #d8d3ca;
  --mega-text: #4a5560;
  --mega-text-muted: #5b6770;
  --mega-gradient: linear-gradient(90deg, #F7941D 0%, #EE4023 100%);
  --mega-breakpoint: 1010px;
  /* Height of .c-header__mobile — keep in sync with the parent theme's _header.css. */
  --mega-header-h: 90px;
}
body.mega-nav-active .c-primary-nav .c-primary-nav__item::before {
   display: none;
}

body.mega-nav-active {
  .c-preheader__link {
    text-transform: capitalize;
    font-size: 14px;
    font-weight: 500;
  }

body.mega-nav-active .c-primary-nav__link {
    padding: 8px;
    padding-left: 12px;
  }


  .hanger-button-desktop .c-btn {
    font-size: 14px;
  }

  @media (min-width: 47em) and (min-width: 90em) {
    .c-primary-nav__link {
      font-size: 16px;
    }
  }

  @media (min-width: 40em) {
    .c-primary-nav__item {
      margin-right: .5rem;
    }
  }
}

/* ===== Top-level triggers ===== */
body.mega-nav-active {
  .c-primary-nav__link {
    font-family: inherit;
    cursor: pointer;
    background: none;
    border: 1.5px solid transparent;
    transition: all .2s ease;
    white-space: nowrap;
    color: #6e6f72;
  }

  .c-primary-nav__item {
    border: 1.5px solid transparent;
   
  }
  .c-primary-nav__link{
     line-height: 22px;
    border-radius: 50px;
    font-size: 16px;
    padding: 0 10px;
  }

  .c-primary-nav__item:hover > .c-primary-nav__link,
  .c-primary-nav__item.has-dropdown.is-open > .c-primary-nav__link,
  .c-primary-nav__item.is-open > .c-primary-nav__link{
    color: var(--mega-accent);
    border-color: var(--mega-accent);
    line-height: 36px;
  }

  


  /* Regular (non-mega) dropdown: reuses the parent theme's .c-primary-nav__childlist styling.
     Own class so the bundle's .has-submenu handler never double-toggles these. */
  .has-subnav[aria-expanded="true"] + .c-primary-nav__childlist {
    display: block;
  }
}

/* Sticky header shifts up by 27px; mirror the parent theme's submenu compensation
   (_sticky-nav.css does this for .has-submenu, which the new nav deliberately does not use). */
@media all and (min-width: 47em) and (max-width: 959px) {
  body.mega-nav-active .stuck .has-subnav[aria-expanded="true"] + .c-primary-nav__childlist {
    transform: translateY(-20px);
  }
}

body.mega-nav-active {

  /* Visible keyboard focus on every interactive nav element. */
  .c-primary-nav__link:focus-visible,
  .c-mega__list a:focus-visible,
  .c-mega__title a:focus-visible,
  .c-mega__card-btn:focus-visible,
  .c-mega__card-link:focus-visible,
  .c-primary-nav__childlink:focus-visible,
  .c-mobile-list__item:focus-visible,
  .c-accordion__head:focus-visible,
  .c-mobile-back:focus-visible,
  .c-mobile-section__bar:focus-visible,
  .c-mobile-toggle:focus-visible,
  .c-find-clinic__location:focus-visible {
    outline: 2px solid var(--mega-accent);
    outline-offset: 2px;
  }

  /* The accent outline has too little contrast against the card's dark background, and none at
     all against the orange section bar. */
  .c-mega__card-btn:focus-visible,
  .c-mega__card-link:focus-visible,
  .c-mobile-section__bar:focus-visible {
    outline-color: #fff;
  }
}

/* ===== Dropdown panels ===== */
body.mega-nav-active {
  .c-dropdown {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    background: white;
    border-top: 3px solid var(--mega-accent);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity .2s ease, transform .2s ease, visibility .2s;
    z-index: 60;
  }

  .c-dropdown.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  .c-dropdown--find-clinic {
    background: var(--mega-sand);
  }
}

/* ===== Find a Clinic panel ===== */
body.mega-nav-active {
  .c-dropdown__find-clinic {
    padding: 36px 0 40px;
    max-width: 720px;
  }

  .c-find-clinic__label {
    display: block;
    color: var(--mega-accent);
    font-weight: 700;
    letter-spacing: .12em;
    font-size: 14px;
    margin-bottom: 14px;
  }

  .c-find-clinic__form {
    display: flex;
    gap: 14px;
    align-items: stretch;
    width: 100%;
  }

  .c-find-clinic__input {
    flex: 1;
    padding: 16px 20px;
    border-radius: 10px;
    border: 1px solid var(--mega-border);
    background: #fff;
    font-size: 16px;
    color: #1f2a36;
    outline: none;
    transition: border-color .2s ease, box-shadow .2s ease;

    &::placeholder {
      color: #9aa0a6;
    }

    &:focus {
      border-color: var(--mega-accent);
      box-shadow: 0 0 0 3px rgba(244, 123, 32, 0.15);
    }
  }

  .c-btn--search {
    padding: 0 38px;
    border-radius: 10px;
    background: var(--mega-accent);
    color: #fff;
    font-weight: 700;
    letter-spacing: .08em;
    font-size: 15px;
    transition: background .2s ease;

    &:hover {
      background: var(--mega-accent-hover);
    }
  }

  .c-find-clinic__location {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 18px;
    color: var(--mega-text);
    font-size: 15px;
    font-weight: 500;

    &:hover {
      color: var(--mega-accent);
    }

    svg {
      flex-shrink: 0;
    }
  }
}

/* ===== Mega menu grid ===== */
body.mega-nav-active {
  .c-mega {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    padding: 36px 0 44px;
    align-items: self-start;
  }

  .c-mega--2col {
    grid-template-columns: repeat(2, 1fr);
  }

  .c-mega--4col {
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
  }

  /* The promo card takes a fixed trailing column when present. */
  .c-mega--has-card {
    grid-template-columns: repeat(3, 1fr) 320px;
  }

  .c-mega--has-card.c-mega--2col {
    grid-template-columns: repeat(2, 1fr) 320px;
  }

  .c-mega--has-card.c-mega--4col {
    grid-template-columns: repeat(4, 1fr) 320px;
  }

  .c-mega__title {
    font-size: 20px;
    color: var(--mega-dark);
    margin: 0 0 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--mega-border);
    font-weight: 700;

    a {
      color: inherit;

      &:hover {
        color: var(--mega-accent);
      }
    }
  }

  .c-mega__list li {
    margin: 0;
  }

  .c-mega__list a {
    display: block;
    padding: 8px 0;
    font-size: 16px;
    color: var(--mega-text);
    transition: color .15s ease;

    &:hover,
    &.is-active {
      color: var(--mega-accent);
    }
  }
}

/* ===== Promo card ===== */
body.mega-nav-active {
  .c-mega__card {
    background: var(--mega-dark);
    color: #fff;
    border-radius: 8px;
    padding: 26px 26px 28px;
    position: relative;
    overflow: hidden;

    > * {
      position: relative;
      z-index: 1;
    }

    h4 {
      font-size: 20px;
      margin: 0 0 12px;
      line-height: 1.25;
      font-weight: 700;
      color: white;
    }

    p {
      font-size: 15px;
      margin: 0 0 22px;
      line-height: 1.5;
      color: #d6dce0;
    }
  }

  /* Background image variant. The card's text, button and link are all white, so a photo needs a
     scrim or the copy stops being readable over light areas. ::before carries the scrim and
     ::after keeps the existing dot grid; direct children already sit above both via z-index: 1. */
  .c-mega__card--has-bg {
    /* The inline style only sets background-image, so keep a solid colour underneath for while
       the image loads (and if it 404s). */
    background-color: var(--mega-dark);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;

    &::before {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, rgba(22, 62, 82, 0.55) 0%, rgba(22, 62, 82, 0.85) 100%);
      pointer-events: none;
    }
  }

  /* Preferred-clinic variant. Inherits the card's background, dot grid and h4 styling; only the
     clinic name and its link need rules of their own. The card is [hidden] until mega-nav.js
     confirms the visitor has a clinic saved. */
  .c-mega__card--my-clinic {
    /* Everything inside is a grid/flex descendant, so it picks up an author `display` that beats
       the user agent's `[hidden] { display: none }` — without this every state would paint at
       once. Same fix as .c-mobile-overlay below. */
    [hidden] {
      display: none;
    }

    .c-my-clinic-card__prompt {
      font-size: 15px;
      margin: 0 0 18px;
      line-height: 1.5;
      color: #d6dce0;
    }

    /* Non-blocking notice when geolocation is declined or the lookup fails. */
    .c-my-clinic-card__error {
      font-size: 14px;
      margin: 0 0 16px;
      line-height: 1.45;
      color: #ffd9c7;
    }

    .c-my-clinic-card__address {
      font-size: 15px;
      margin: 6px 0 0;
      line-height: 1.45;
      color: #d6dce0;
    }

    .c-my-clinic-card__distance {
      font-size: 14px;
      font-weight: 600;
      margin: 0 0 10px;
      color: #d6dce0;
    }

    .c-my-clinic-card__phone {
      display: inline-block;
      margin-top: 8px;
      font-size: 15px;
      color: #fff;
      text-decoration: none;

      &:hover,
      &:focus-visible {
        text-decoration: underline;
      }
    }

    .c-my-clinic-card__more,
    .c-my-clinic-card__search {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      margin-top: 18px;
      font-size: 15px;
      font-weight: 600;
      color: #fff;
      text-decoration: none;

      &:hover,
      &:focus-visible {
        text-decoration: underline;
      }
    }

    /* The locate button sits above the search link, so it carries the gap instead of a margin. */
    .c-mega__card-btn {
      margin-bottom: 4px;
      border: 0;
      font-family: inherit;
      cursor: pointer;

      &[disabled] {
        cursor: default;
        opacity: .7;
      }
    }

    .c-my-clinic-card__label {
      font-size: 13px;
      letter-spacing: .08em;
      text-transform: uppercase;
      margin-bottom: 10px;
      color: #d6dce0;
    }

    .c-my-clinic-card__link {
      display: inline-flex;
      align-items: baseline;
      gap: 10px;
      color: #fff;
      font-size: 18px;
      font-weight: 700;
      line-height: 1.35;
      text-decoration: none;

      &:hover,
      &:focus-visible {
        text-decoration: underline;
      }

      /* The arrow must not wrap onto a line of its own when the name is long. */
      span[aria-hidden] {
        flex: none;
        font-size: 20px;
        line-height: 1;
      }
    }
  }

  .c-mega__card-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 22px;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    border-radius: 6px;
    font-size: 15px;
    font-weight: 600;
    transition: background .2s ease;

    &:hover {
      background: rgba(255, 255, 255, 0.2);
    }

    span {
      font-size: 18px;
      line-height: 1;
    }
  }

  /* Optional secondary link under the button: a text link, so it reads as lighter-weight than
     the solid button above it. Sits on the card's dark background, hence the light colour.
     `flex` (not inline-flex) puts it on its own line below the button, and width:fit-content
     keeps the underline and hit area tight to the text. */
  .c-mega__card-link {
    display: flex;
    width: fit-content;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: rgba(255, 255, 255, 0.4);
    transition: color .2s ease, text-decoration-color .2s ease;

    &:hover,
    &:focus-visible {
      color: #fff;
      text-decoration-color: #fff;
    }

    /* Nudge the arrow on hover, matching the card button's affordance. */
    &:hover .c-mega__card-link-arrow {
      transform: translateX(3px);
    }
  }

  .c-mega__card-link-arrow {
    font-size: 17px;
    line-height: 1;
    transition: transform .2s ease;
  }

  /* When the button is absent the link is the only action, so it needs no top gap. */
  .c-mega__card-btn + .c-mega__card-link {
    margin-top: 14px;
  }

  .c-mega__card h4 + .c-mega__card-link,
  .c-mega__card p + .c-mega__card-link {
    margin-top: 4px;
  }

  /* Inside the drawer the card is a block in the flow, not a grid column, so it needs its own
     width guard or the padding pushes it past the panel edge. */
  .c-mega__card--mobile {
    margin: 18px 24px 8px;
    max-width: calc(100% - 48px);
    box-sizing: border-box;
  }
}

@media (min-width: 1000px) and (max-width: 1209px) {
  body.mega-nav-active .hanger-primary-nav {
    width: 95%;
  }

}
/* =====================================================
   MOBILE: hamburger + drawer
   ===================================================== */

body.mega-nav-active {
  /* Hamburger icon (replaces the legacy .js-nav-trigger while the new nav is on) */
  .c-mobile-toggle {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #1f2a36;
    border: 0;
    background: transparent;
    border-radius: 6px;
    cursor: pointer;
    transition: background .2s ease;

    &:hover {
      background: rgba(0, 0, 0, 0.05);
    }
  }


  .c-mobile-toggle__bars {
    display: inline-flex;
    flex-direction: column;
    justify-content: space-between;
    width: 24px;
    height: 18px;

    span {
      display: block;
      height: 2.4px;
      width: 100%;
      background: currentColor;
      border-radius: 2px;
    }
  }

  /* Overlay backdrop. Starts below the mobile header so the hamburger stays clickable. */
  .c-mobile-overlay {
    position: fixed;
    top: var(--mega-header-h);
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    opacity: 0;
    transition: opacity .25s ease;
    z-index: 80;

    &.is-visible {
      opacity: 1;
    }

    &[hidden] {
      display: none;
    }
  }

  /* Drawer.
     Sits below the mobile header, whose height is --mega-header-h (90px, matching
     .c-header__mobile in the parent theme's _header.css). Anchored left AND right so it always
     spans the viewport regardless of any inherited width. */
  .c-mobile-drawer {
    position: fixed;
    top: var(--mega-header-h);
    left: 0;
    right: 0;
    width: auto;
    max-width: 100%;
    height: calc(100vh - var(--mega-header-h));
    /* Dynamic viewport height where supported, so mobile browser chrome doesn't clip the drawer. */
    height: calc(100dvh - var(--mega-header-h));
    background: #fff;
    z-index: 90;
    transform: translateX(100%);
    transition: transform .3s cubic-bezier(.4, .0, .2, 1);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-sizing: border-box;

    &.is-open {
      transform: translateX(0);
    }

    &[hidden] {
      display: none;
    }
  }

  /* Body scroll lock while the drawer is open */
  &.is-mobile-nav-open {
    overflow: hidden;
  }

  /* Panels stack */
  .c-mobile-panels {
    flex: 1;
    position: relative;
    overflow: hidden;
  }

  .c-mobile-panel {
    position: absolute;
    inset: 0;
    overflow-y: auto;
    /* Nothing inside a panel may push it sideways — that would fight the slide transform. */
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    padding: 8px 0 36px;
    box-sizing: border-box;
    /* transform: translateX(100%); */
    left: 100%;
    visibility: hidden;
    transition: transform .3s cubic-bezier(.4, .0, .2, 1), visibility 0s .3s;
    background: #fff;

    &.is-active,
    &.is-prev {
      visibility: visible;
      /* Showing must be immediate: focus moves into this panel on the same frame. */
      transition: transform .3s cubic-bezier(.4, .0, .2, 1), visibility 0s 0s;
    }

    &.is-active {
      /* transform: translateX(0); */
      left: 0;
    }

    &.is-prev {
      transform: translateX(-30%);
    }
  }

  /* Footer (gray links area) */
  .c-mobile-footer {
    background: var(--mega-sand-alt);
    margin-top: 22px;
    padding: 22px 24px;
  }

  .c-mobile-footer__links {
    display: flex;
    flex-direction: column;
    gap: 14px;
    list-style: none;
    margin: 0;
    padding: 0;

    li {
      margin: 0;
      padding: 0;
      list-style: none;
    }

    a {
      color: #6b6b6b;
      font-size: 14px;
      font-weight: 700;
      letter-spacing: .08em;
      text-transform: uppercase;

      &:hover {
        color: var(--mega-accent);
      }
    }
  }

  /* Phone */
  .c-mobile-phone {
    display: block;
    text-align: center;
    color: var(--mega-accent);
    font-size: 22px;
    font-weight: 700;
    padding: 26px 24px 14px;
  }

  /* Social icons */
  .c-mobile-social {
    display: flex;
    justify-content: center;
    gap: 14px;
    padding: 0 24px 28px;
    list-style: none;
    margin: 0;

    li {
      margin: 0;
      padding: 0;
      list-style: none;
    }

    a {
      width: 38px;
      height: 38px;
      border-radius: 50%;
      border: 1px solid #cdd2d6;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: var(--mega-text-muted);
      transition: color .2s ease, border-color .2s ease;
      background-image: none;
      padding: 0;

      &:hover {
        color: var(--mega-accent);
        border-color: var(--mega-accent);
      }
    }

    svg {
      width: 18px;
      height: 18px;
    }
  }

  /* Back button */
  .c-mobile-back {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 0px 24px 8px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .12em;
    color: var(--mega-text-muted);
    text-transform: uppercase;
    border: 0;
    background: transparent;
    cursor: pointer;

    svg {
      width: 10px;
      height: 14px;
      padding: 8px;
      box-sizing: content-box;
      background: #f1ede7;
      border-radius: 50%;
      color: var(--mega-text-muted);
      /* Down caret from the sprite, rotated into a back arrow. */
      transform: rotate(90deg);
    }

    &:hover {
      color: var(--mega-accent);
    }
  }

  /* Orange gradient section bar. It is a <button> that returns to the main menu, so it needs the
     button reset (browsers give buttons their own font, border and centred text). */
  .c-mobile-section__bar {
    background: var(--mega-gradient);
    color: #fff;
    padding: 6px 24px;
    font-size: 22px;
    font-weight: 700;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    border: 0;
    font-family: inherit;
    text-align: left;
    cursor: pointer;

    svg {
      color: #fff;
    }
  }

  /* Trailing caret on the section bar. */
  .c-mobile-section__icon {
    width: 14px;
    height: 10px;
    flex-shrink: 0;
  }

  /* The find-a-clinic label inside a panel body. */
  .c-mobile-section__body .c-find-clinic__label {
    margin-bottom: 12px;
  }

  /* Section body (find a clinic form on mobile) */
  .c-mobile-section__body {
    background: var(--mega-sand);
    padding: 28px 24px 32px;

    .c-find-clinic__form {
      flex-direction: row;
      gap: 10px;
    }

    /* flex-basis:0 + min-width:0 lets the input shrink below its intrinsic size instead of
       forcing the row wider than the drawer. */
    .c-find-clinic__input {
      min-width: 0;
      flex: 1 1 0;
      padding: 14px 16px;
    }

    .c-btn--search {
      padding: 0 14px;
      flex-shrink: 0;
      white-space: nowrap;
    }
  }

  /* Accordion */
  .c-mobile-accordion {
    padding: 0;
    margin: 0;
    list-style: none;
  }

  .c-accordion__item {
    border-bottom: 1px solid #ebe7e0;
    margin: 0;
    list-style: none;

    &.is-open {
      background: var(--mega-sand);
    }
  }

  /* Either a <button> (toggles the body) or an <a> (a column with no child links). */
  .c-accordion__head {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 24px;
    font-size: 20px;
    font-weight: 700;
    color: var(--mega-dark);
    background: transparent;
    text-align: left;
    border: 0;
    cursor: pointer;

    &:hover {
      color: var(--mega-accent);
    }
  }

  .c-accordion__icon {
    width: 14px;
    height: 18px;
    color: var(--mega-accent);
    transition: transform .25s ease;
    flex-shrink: 0;
    /* Closed points sideways; open rotates back to the sprite's natural down caret. */
    transform: rotate(-90deg);
  }

  .c-accordion__item.is-open .c-accordion__icon {
    transform: rotate(0deg);
  }

  /* The body is a <ul>, so the list chrome has to go. */
  .c-accordion__body {
    display: none;
    background: var(--mega-sand);
    padding: 8px 24px 18px;
    margin: 0;
    list-style: none;

    li {
      border: 0;
      margin: 0;
      list-style: none;
    }

    a {
      display: block;
      padding: 10px 22px;
      color: var(--mega-text);
      font-size: 15px;

      &:hover {
        color: var(--mega-accent);
      }
    }
  }

  .c-accordion__item.is-open .c-accordion__body {
    display: block;
  }
  .c-accordion__body li:before {
    display: none;
}

.c-accordion__body ul {
    padding: 0;
}

  /* MAIN list */
  .c-mobile-list {
    padding: 6px 0;
    margin: 0;
    list-style: none;

    li {
      margin: 0;
      padding: 0;
      list-style: none;
    }
  }

  .c-mobile-list__item {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 24px;
    font-size: 22px;
    font-weight: 700;
    color: var(--mega-text-muted);
    text-align: left;
    background: transparent;
    border: 0;
    cursor: pointer;

    &:hover {
      color: var(--mega-accent);
    }
  }

  .c-mobile-list__item--plain {
    justify-content: flex-start;
  }

  .c-mobile-list__chevron {
    width: 10px;
    height: 16px;
    color: #aab2bb;
    flex-shrink: 0;
    /* Sprite only ships a down caret; rotate it into the side chevron the list needs. */
    transform: rotate(-90deg);
  }

  .c-mobile-cta {
    margin: 18px auto;
    text-align: center;
  }

  /* The CTA carries .c-btn directly on the <a>, so the parent theme's button styling applies;
     this only widens it to the drawer's gutters. */
  .c-btn--appointment-mobile {
    display: inline-block;
    max-width: calc(100% - 48px);
  }
}

/* Below the breakpoint the desktop header is hidden entirely and the drawer takes over.
   The parent theme assumes the fixed desktop header exists from 47em up, so it pads the body
   (183px / 123px in _header.css) and hides .c-header__mobile. Both have to be undone across the
   47em–1010px band, where the new nav shows the mobile header instead. */
@media (max-width: 1010px) {
  body.mega-nav-active {
    padding-top: 0 !important;

    header#offCanvasRight {
      display: none !important;
    }

    /* Beats the parent's `@media (min-width:47em) .c-header__mobile { display:none }`. */
    .c-header__mobile {
      display: block !important;
      height: var(--mega-header-h);

      /* The parent stretches this to 220px above 47em, which is desktop-only sizing. */
      .c-header__inner {
        height: var(--mega-header-h);
      }
    }

    .c-logo img {
      height: 40px;
    }
  }
}