/* Prevent horizontal overflow */
html { width: 100%; max-width: 100%; box-sizing: border-box; }
body { overflow-x: hidden; width: 100%; max-width: 100%; box-sizing: border-box; background-color: white !important; }



/* =========================================================
   Unified content link styling (everything inside <main>)
   - Use standard underline everywhere (same thickness)
   - Remove Ananke's border-bottom underline
   - Keep visited color the same
   ========================================================= */
:root {
  --content-link-color: #357edd;
  --content-underline-thickness: 1px;
  --content-underline-offset: 2px;
}

main a:link,
main a:visited {
  color: var(--content-link-color) !important;
  text-decoration: underline;
  text-decoration-thickness: var(--content-underline-thickness);
  text-underline-offset: var(--content-underline-offset);
  border-bottom: none !important; /* kill Ananke border underline */
}

main a:hover,
main a:focus-visible {
  color: var(--content-link-color) !important;
}

/* Keep the email "special format" if it has inline text-decoration:none; no extra rule needed. */

/* Do not affect navigation links */
nav.sticky-nav a,
nav.sticky-nav a:visited {
  text-decoration: none !important;
  border-bottom: none !important;
}



/* =========================================================
   Theme variables (single place to edit colors + spacing)
   ========================================================= */
:root{
  /* brand / accent */
  --accent: #357edd;
  --accent-10: #357edd1a;

  /* nav colors */
  --nav-bg: #1d1d1d;
  --nav-text: rgba(255,255,255,0.9);

  /* dropdown highlight */
  --dropdown-row-bg: rgba(53,126,221,0.36);
  --dropdown-row-shadow: 0 1px 6px rgba(53,126,221,0.08);

  /* spacing */
  --menu-gap-desktop: 0.4rem;
  --menu-pad-x-desktop: 0.9rem;
  --menu-pad-y-desktop: 0.5rem;

  --dropdown-gap: 0.25rem;
  --dropdown-pad: 0.5rem;
  --dropdown-item-pad-y: 0.7rem;
  --dropdown-item-pad-x: 1.2rem;
}

/* =========================================================
   Sticky Navigation Bar (single, consistent system)
   Markup: #menu-toggle + #menu-items + .menu-link
   JS: toggles .is-open on #menu-items
   ========================================================= */
.sticky-nav{
  position: sticky !important;
  top: 0;
  z-index: 1000;
  background-color: var(--nav-bg) !important;
  box-shadow: 0 2px 4px rgba(0,0,0,0.3);
  padding: 1rem 1rem;
  width: 100%;
  box-sizing: border-box;
}
.sticky-nav .nav-inner{ position: relative; }

/* Remove tap highlight boxes */
nav.sticky-nav a,
nav.sticky-nav button{ -webkit-tap-highlight-color: transparent; }

/* Site title: white by default, blue on hover/keyboard focus */
nav.sticky-nav .site-title,
nav.sticky-nav .site-title:link,
nav.sticky-nav .site-title:visited,
nav.sticky-nav .site-title:active{
  color: var(--nav-text) !important;
  background: transparent !important;
  transition: color 0.2s;
}
nav.sticky-nav .site-title:hover,
nav.sticky-nav .site-title:focus-visible{
  color: var(--accent) !important;
  background: transparent !important;
}
/* Touch: do not let focus stick */
@media (hover: none) and (pointer: coarse){
  nav.sticky-nav .site-title:focus,
  nav.sticky-nav .site-title:focus-visible{
    color: var(--nav-text) !important;
    background: transparent !important;
  }
}

/* Burger button */
.hamburger{
  display: none;
  align-items: center;
  justify-content: center;
  padding: 0.25rem;
  background: transparent;
  border: 0;
  color: var(--nav-text) !important;
  cursor: pointer;
  line-height: 0;
}
.hamburger:focus{ outline: none; }
.hamburger:focus-visible{
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 0.35rem;
}
@media (hover: hover) and (pointer: fine){
  .hamburger:hover{ color: var(--accent) !important; }
}

/* Menu structure */
.menu-list{
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Menu links: FORCE white even when visited (prevents red) */
nav.sticky-nav #menu-items a.menu-link,
nav.sticky-nav #menu-items a.menu-link:link,
nav.sticky-nav #menu-items a.menu-link:visited,
nav.sticky-nav #menu-items a.menu-link:active{
  color: var(--nav-text) !important;
  text-decoration: none !important;
  background: transparent !important;
  display: block;
}

/* Desktop (>=60em): menu always visible, white->blue on hover */
@media (min-width: 60em){
  .hamburger{ display: none !important; }

  #menu-items{
    position: static;
    max-height: none;
    overflow: visible;
    visibility: visible;
    pointer-events: auto;
  }

  #menu-items .menu-list{
    display: flex;
    align-items: center;
    gap: var(--menu-gap-desktop);
  }

  #menu-items .menu-link{
    padding: var(--menu-pad-y-desktop) var(--menu-pad-x-desktop);
  }

  #menu-items .menu-link:hover,
  #menu-items .menu-link:focus-visible{
    color: var(--accent) !important;
    background: transparent !important;
  }
}

/* Mobile/tablet (<60em): dropdown panel (JS controls open/close with .is-open) */
@media (max-width: 60em){
  .hamburger{ display: inline-flex !important; }

  #menu-items{
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--nav-bg);
    border-radius: 0.6rem;
    box-shadow: 0 12px 30px rgba(0,0,0,0.35);

    max-height: 0;
    overflow: hidden;
    visibility: hidden;
    pointer-events: none;
    transition: max-height 0.25s ease, visibility 0s linear 0.25s;
  }

  #menu-items.is-open{
    max-height: 520px;
    visibility: visible;
    pointer-events: auto;
    transition: max-height 0.25s ease, visibility 0s;
  }

  #menu-items .menu-list{
    display: flex;
    flex-direction: column;
    padding: var(--dropdown-pad);
    gap: var(--dropdown-gap);
  }

  #menu-items .menu-link{
    width: 100%;
    box-sizing: border-box;
    padding: var(--dropdown-item-pad-y) var(--dropdown-item-pad-x);
    border-left: 4px solid transparent;
    border-radius: 0.4rem;
  }

  /* Full-row highlight with background + left blue bar */
  #menu-items.is-open .menu-link:hover,
  #menu-items.is-open .menu-link:active{
    background: var(--dropdown-row-bg) !important;
    color: var(--accent) !important;
    border-left-color: var(--accent) !important;
    box-shadow: var(--dropdown-row-shadow);
  }

  /* Touch devices: never keep a focused item highlighted after close */
  @media (hover: none) and (pointer: coarse){
    #menu-items .menu-link:focus,
    #menu-items .menu-link:focus-visible{
      background: transparent !important;
      border-left-color: transparent !important;
      box-shadow: none !important;
      color: var(--nav-text) !important;
    }
  }
}

/* Stable header image sizing */
header[class*="cover"] {
  min-height: 300px;
  background-size: cover;
  background-position: center;
  position: relative !important;
}
@media screen and (max-width: 40em) { header[class*="cover"] { min-height: 200px; } }
@media screen and (min-width: 60em) { header[class*="cover"] { min-height: 400px; } }

/* Ensure overlay stays within header bounds */
header[class*="cover"] > div {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
}
header[class*="cover"] > div > div {
  text-align: left !important;
  margin-left: 0 !important;
  max-width: 100% !important;
  position: relative !important;
  z-index: 1 !important;
}
header[class*="cover"] h1,
header[class*="cover"] h2 {
  text-align: left !important;
  margin-left: 0 !important;
}

/* Section spacing */
.content-section {
  min-height: 50vh;
  padding: 0;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow-x: hidden;
  border-bottom: 2px solid #999 !important;
}
.content-section:last-of-type {
  border-bottom: none !important;
  min-height: 0 !important;
  height: auto !important;
  max-height: fit-content !important;
}

/* Links tiles styling */
.links-grid {
  display: flex;
  gap: 2rem;
  margin-top: 2rem;
  margin-bottom: 0;
  justify-content: center;
  align-items: center;
}
.link-icon {
  display: inline-block;
  transition: all 0.3s ease;
  opacity: 0.8;
}
.link-icon:hover {
  transform: translateY(-3px);
  opacity: 1;
}

/* =========================================================
   FORCE MENU LINK COLORS (prevents red visited links)
   ========================================================= */
nav.sticky-nav #menu-items a.menu-link,
nav.sticky-nav #menu-items a.menu-link:link,
nav.sticky-nav #menu-items a.menu-link:visited,
nav.sticky-nav #menu-items a.menu-link:active {
  color: rgba(255, 255, 255, 0.9) !important;  /* white */
  text-decoration: none !important;
  background: transparent !important;
}

/* Hover / keyboard focus = blue (same as title + burger hover) */
nav.sticky-nav #menu-items a.menu-link:hover,
nav.sticky-nav #menu-items a.menu-link:focus-visible {
  color: #357edd !important;
}

/* =========================================================
   FORCE dropdown row highlight background (li + a)
   Put this at the very end of custom.css
   ========================================================= */
@media (max-width: 60em) {
  nav.sticky-nav {
    --row-bg: rgba(120, 190, 255, 0.12); /* <-- make brighter/lighter here */
  }

  /* Make sure the clickable area is a full-width row */
  nav.sticky-nav #menu-items .menu-item,
  nav.sticky-nav #menu-items .menu-link {
    width: 100%;
  }

  /* Apply highlight to BOTH the row and the link (covers all implementations) */
  nav.sticky-nav #menu-items.is-open .menu-item:hover,
  nav.sticky-nav #menu-items.is-open .menu-item:active,
  nav.sticky-nav #menu-items.is-open .menu-item:focus-within,
  nav.sticky-nav #menu-items.is-open .menu-item:hover > a.menu-link,
  nav.sticky-nav #menu-items.is-open .menu-item:active > a.menu-link,
  nav.sticky-nav #menu-items.is-open .menu-item:focus-within > a.menu-link,
  nav.sticky-nav #menu-items.is-open a.menu-link:hover,
  nav.sticky-nav #menu-items.is-open a.menu-link:active,
  nav.sticky-nav #menu-items.is-open a.menu-link:focus-visible {
    background-color: var(--row-bg) !important;
  }
}