/* ======================= */
/* BASE HEADER & SKIP LINK */
/* ======================= */

#skip-link {
  display: none;
  position: absolute;
  left: -999px;
  top: 0;
  padding: 1rem;
  background: var(--color-white);
  color: var(--color-accent);
  z-index: var(--z-max);
}

#skip-link:focus {
  left: 0;
}


/* ================ */
/* MAIN SITE HEADER */
/* ================ */

.site-header {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  height: 5rem;
  padding-left: 2rem;
  padding-right: 2rem;
  position: relative;
  border-bottom: solid 1px var(--color-accent);
}

a.logo-link img {
  height: 1.5rem;
  width: auto;
  display: block;
}

a.logo-link .logo-monotone {
  display: none;
}


/* ======================== */
/* MAIN NAVIGATION (DESKTOP) */
/* ======================== */

#main-menu {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 1rem;
}


/* --- Standard links --- */

.main-menu-link {
  margin-left: 0.5rem;
  margin-right: 0.5rem;
  font-size: 1.2rem;
  text-decoration: none;
  color: var(--color-accent);
  transition: color 0.2s ease;
  display: inline-flex;
  align-items: center;
}

.main-menu-link span {
  padding-bottom: 0.25rem;
  border-bottom: 1px dotted var(--color-accent);
  transition: border-color 0.2s ease;
}

.main-menu-link:hover span {
  border-bottom: 1px solid var(--color-accent);
}

/* Active State */
.main-menu-link.menu-item-active {
  font-weight: 650;
  border-bottom: none !important;
  /* Override old rule */
}

.main-menu-link.menu-item-active span {
  border-bottom: solid 1px var(--color-accent) !important;
}

/* --- Dropdown --- */

.dropdown-wrapper {
  position: relative;
  /* For the absolute panel to sit right */
  display: flex;
  align-items: center;
}


a.main-menu-link.dropdown-trigger {
  cursor: pointer;
  padding: 0;
  /* padding-bottom: 0.25rem; Removed to match standard link alignment */
}


.dropdown-panel {
  display: none;
  position: absolute;
  top: calc(100% + 1rem);
  left: 50%;
  transform: translateX(-50%);
  background-color: var(--color-white);
  min-width: 260px;
  padding: 1.5rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  z-index: var(--z-header);
  flex-direction: column;
  border-top: solid 0.2rem var(--color-accent-light);
  border-radius: 0rem 0rem 0.5rem 0.5rem;
}

/* 2. Transparent Bridge (Ensures hover state is maintained) */
.dropdown-panel::before {
  content: '';
  position: absolute;
  top: -2.5rem;
  left: 0;
  right: 0;
  height: 2.5rem;
  background: transparent;

}

/* 3. Speech Bubble Arrow */
.dropdown-panel::after {
  content: '';
  position: absolute;
  top: -10px;
  /* Positioned at the top edge */
  left: 50%;
  transform: translateX(-50%);
  /* Center alignment */
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid var(--color-accent-light);
}

/* Show panel on hover or keyboard focus */

.dropdown-wrapper:hover .dropdown-panel,

.dropdown-wrapper:focus-within .dropdown-panel {
  display: flex;
}

/* Caret Styling & Animation */
.dropdown-caret-svg {
  width: 12px;
  height: auto;
  margin-left: 0.2rem;
  transition: transform 0.3s ease;
  vertical-align: middle;
}

.dropdown-caret-svg path {
  stroke: var(--color-accent-medium);
  transition: stroke 0.2s ease;
}

/* Rotate on hover (Desktop) */
.dropdown-wrapper:hover .dropdown-caret-svg,
.dropdown-wrapper:focus-within .dropdown-caret-svg {
  transform: rotate(180deg);
}

.sub-menu-link {
  display: block;
  width: fit-content;
  padding: 0.5rem 0 0.25rem 0;
  text-decoration: none;
  color: var(--color-accent);
  border-bottom: solid 0.1rem var(--color-white);
  font-size: 1rem;
  transition: background-color 0.2s, color 0.2s;
  white-space: nowrap;
}

.sub-menu-link:hover {
  border-bottom: .1rem solid var(--color-accent-medium);
}


/* Active State for Sub-links (Desktop) */
.sub-menu-link.menu-item-active {
  color: var(--color-accent);
  /* Keep text dark on desktop? Or accent? User said "highlightd with the accent color border bottom". I'll assume just border unless specified, but mobile uses accent text. Let's check desktop main link active: it uses accent border. */
  border-bottom: solid 0.1rem var(--color-accent-medium) !important;
}

/* ================ */
/* HAMBURGER BUTTON */
/* ================ */

/* ... inside @media (max-width: 1125px) ... */

#hamburger-btn {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 10px;
  z-index: var(--z-max);
  grid-column: 2;
  justify-self: end;
}


#hamburger-btn .line {
  display: block;
  height: 2px;
  border-radius: 2px;
  margin: 2px 0;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

#hamburger-btn .line1 {
  width: 24px;
  background-color: rgba(255, 255, 255, 0.65);
}

#hamburger-btn .line2 {
  width: 30px;
  background-color: rgba(255, 255, 255, 0.8);
}

#hamburger-btn .line3 {
  width: 24px;
  background-color: rgba(255, 255, 255, 1);
}

/* --- Hamburger animation --- */

#hamburger-btn.is-active .line1 {
  transform: translateY(8px) rotate(45deg);
}


#hamburger-btn.is-active .line2 {
  opacity: 0;
}


#hamburger-btn.is-active .line3 {
  transform: translateY(-8px) rotate(-45deg);
}




/* =========================== */
/* [[[[ RESPONSIVE STYLES ]]]] */
/* =========================== */



@media (max-width: 1125px) {

  .site-header {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    transition: background-color 0.3s ease;
    /* Smooth transition */
  }

  .site-header.menu-open {
    background-color: var(--color-accent-dark);
    border-bottom: solid 1px var(--color-accent-light);
  }

  a.logo-link .logo-original {
    display: block;
  }

  a.logo-link .logo-monotone {
    display: none;
  }

  .site-header.menu-open a.logo-link .logo-original {
    display: none;
  }

  .site-header.menu-open a.logo-link .logo-monotone {
    display: block;
  }


  #hamburger-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  #hamburger-btn .line1 {
    background-color: rgb(from var(--color-accent) r g b / 0.65);
  }

  #hamburger-btn .line2 {
    background-color: rgb(from var(--color-accent) r g b / 0.8);
  }

  #hamburger-btn .line3 {
    background-color: rgb(from var(--color-accent) r g b / 1);
  }

  .site-header.menu-open #hamburger-btn .line1 {
    background-color: rgba(255, 255, 255, 0.65);
  }

  .site-header.menu-open #hamburger-btn .line2 {
    background-color: rgba(255, 255, 255, 0.8);
  }

  .site-header.menu-open #hamburger-btn .line3 {
    background-color: rgba(255, 255, 255, 1);
  }

  /* --- Mobile menu container --- */
  #main-menu {
    display: none;
    position: absolute;
    top: 5rem;
    left: 0;
    right: 0;
    width: 100%;
    min-height: calc(100vh - 5rem);
    background-color: var(--color-accent-dark);
    transition: background-color 0.3s ease;
    padding: 2rem;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 0.5rem;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    z-index: var(--z-max);
  }


  #main-menu.menu-open {
    display: flex;
  }

  /* --- Mobile menu links --- */
  .main-menu-link {
    width: 100%;
    font-size: 1.2rem;
    margin: 0;
    padding: 1rem 0;
    color: var(--color-accent-lightest);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  .main-menu-link.menu-item-active {
    border-bottom: 1px solid var(--color-white);
  }

  /* --- Dropdown menu --- */
  .dropdown-wrapper {
    width: 100%;
    flex-direction: column;
    /* Make the wrapper stack vertically */
    align-items: flex-start;
    position: static;
    /* Removes absolute positioning context */
  }

  .dropdown-panel {
    position: static;
    width: 100%;
    box-shadow: none;
    border-top: none;
    padding: 0;
    background: transparent;
    border-radius: 0;

    /* Mobile: Hidden by default, toggled by JS */
    display: none;
    flex-direction: column;
    gap: 0;
    transform: none;
    /* Reset desktop centering */
  }

  .dropdown-panel.is-open {
    display: flex;
    animation: slideDown 0.3s ease forwards;
  }

  @keyframes slideDown {
    from {
      opacity: 0;
      transform: translateY(-10px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  /* Reset hover behavior on mobile to prevent double-open */
  .dropdown-wrapper:hover .dropdown-panel,
  .dropdown-wrapper:focus-within .dropdown-panel {
    display: none;
    /* Only .is-open class should show it */
  }

  /* But wait, .is-open sets display:flex. We need ensuring :hover doesn't force it flex if it's closed? 
     Actually, on mobile touch, :hover is sticky. It's safer to rely on JS class.
     The :hover rule above is loose. 
     Let's override:
  */
  .dropdown-wrapper:hover .dropdown-panel:not(.is-open) {
    display: none;
  }

  .dropdown-wrapper:hover .dropdown-panel.is-open {
    display: flex;
  }


  /* Restore trigger interactivity */
  a.main-menu-link.dropdown-trigger {
    display: block;
    width: 100%;
    /* Full width tap target */
    text-align: left;
    margin: 0;
    padding: 1rem 0 0.5rem 0;
    pointer-events: auto;
    /* Re-enable clicking */
    color: var(--color-accent-light);
    opacity: 1;
    border: none;
    text-transform: none;
    letter-spacing: normal;
    cursor: pointer;
  }

  /* Caret Color on Mobile */
  .dropdown-caret-svg path {
    stroke: var(--color-accent-light);
  }

  /* Rotate caret when open */
  .dropdown-trigger[aria-expanded="true"] .dropdown-caret-svg {
    transform: rotate(180deg);
  }

  /* Hide the desktop arrow on mobile */
  .dropdown-panel::after {
    display: none;
  }

  /* Indent sub-links */
  .sub-menu-link {
    padding: 0.75rem 0 0.25rem 1.5rem;
    width: fit-content;
    font-size: 1.4rem;
    color: var(--color-accent-lightest);
    border-left: none;
    border-bottom: 0.1rem solid transparent;
    transition: border-color 0.2s ease, color 0.2s ease;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  /* Mobile Links Base Styles */
  .main-menu-link {
    width: fit-content;
    font-size: 1.4rem;
    margin: 0;
    padding: 1rem 0 0.25rem 0;
    /* Tighter bottom padding to match desktop */
    color: var(--color-accent-light);
    border-bottom: 0.1rem solid transparent;
  }

  .main-menu-link:hover,
  .sub-menu-link:hover {
    border-bottom: 0.1rem solid var(--color-accent-lightest);
  }

  /* Active State */
  .main-menu-link.menu-item-active,
  .sub-menu-link.menu-item-active {
    color: var(--color-white);
    border-bottom: 0.1rem solid var(--color-white);
  }
}