/* Tenebris mobile-only navigation. Desktop keeps its existing .tn-topnav. */
.tn-mobile-nav { display: none; }

@media (max-width: 640px) {
  /* Desktop markup remains available to MyAAC quick-search for real routes,
     but neither it nor its links take up space on small screens. */
  body.tanebris .tn-topnav { display: none; }

  body.tanebris .tn-masthead {
    min-height: 0;
    padding: 19px 0 18px;
    gap: 0;
  }
  body.tanebris .tn-masthead::before { height: 145px; }
  body.tanebris .tn-emblem-link {
    width: 49px;
    height: 53px;
    margin-bottom: 2px;
  }
  body.tanebris .tn-emblem {
    width: 42px;
    height: 49px;
  }
  body.tanebris .tn-masthead .tn-wordmark {
    font-size: clamp(34px, 9vw, 43px);
    line-height: 1.16;
    letter-spacing: .095em;
  }
  body.tanebris .tn-masthead .tn-tagline {
    margin-top: 6px;
    font-size: clamp(8px, 2.45vw, 10px);
    letter-spacing: .065em;
    line-height: 1.45;
  }

  .tn-mobile-nav {
    display: block;
    position: relative;
    z-index: 35;
    overflow: visible;
    border: 1px solid #40516c;
    border-radius: 8px;
    background: #121c2d;
    box-shadow: 0 8px 25px #0005, inset 0 1px #ffffff0a;
  }
  .tn-mobile-menu { margin: 0; }
  .tn-mobile-menu > summary {
    display: flex;
    min-height: 55px;
    align-items: center;
    gap: 12px;
    padding: 0 118px 0 17px;
    color: #eacc90;
    background: linear-gradient(125deg, #162339, #131e2f);
    cursor: pointer;
    list-style: none;
    user-select: none;
    font-size: 13px;
    font-weight: 750;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: .105em;
  }
  .tn-mobile-menu > summary::-webkit-details-marker,
  .tn-mobile-group > summary::-webkit-details-marker { display: none; }
  .tn-mobile-menu > summary::marker,
  .tn-mobile-group > summary::marker { content: ""; }
  .tn-mobile-menu[open] > summary { background: linear-gradient(125deg, #1a2b43, #17243a); }
  .tn-mobile-hamburger {
    display: flex;
    flex: 0 0 21px;
    flex-direction: column;
    justify-content: space-between;
    width: 21px;
    height: 16px;
  }
  .tn-mobile-hamburger i {
    display: block;
    width: 100%;
    height: 2px;
    background: #e8c583;
    border-radius: 2px;
    transition: transform .2s ease, opacity .15s ease;
  }
  .tn-mobile-menu[open] .tn-mobile-hamburger i:first-child { transform: translateY(7px) rotate(45deg); }
  .tn-mobile-menu[open] .tn-mobile-hamburger i:nth-child(2) { opacity: 0; }
  .tn-mobile-menu[open] .tn-mobile-hamburger i:last-child { transform: translateY(-7px) rotate(-45deg); }
  .tn-mobile-nav-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    position: absolute;
    z-index: 2;
    top: 5px;
    right: 8px;
  }
  .tn-mobile-nav-action {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    color: #dfbf81 !important;
    cursor: pointer;
    text-decoration: none;
  }
  .tn-mobile-nav-action svg {
    display: block;
    width: 21px;
    height: 21px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .tn-mobile-nav-action:hover,
  .tn-mobile-nav-action:focus-visible {
    background: #263953;
    border-color: #6e614b;
    color: #ffdb9e !important;
  }
  .tn-mobile-search-trigger[hidden] { display: none !important; }
  /* Floating drawer: positioned against the small top bar, not in page flow.
     This allows Latest News to remain directly below the collapsed bar. */
  .tn-mobile-menu-panel {
    position: absolute;
    z-index: 10;
    top: calc(100% + 7px);
    left: 0;
    right: 0;
    padding: 6px 8px 7px;
    border: 1px solid #445771;
    border-top: 2px solid #be985c;
    border-radius: 7px;
    background: linear-gradient(170deg, #182942, #101b2d);
    box-shadow: 0 22px 42px #000c, inset 0 1px #ffffff0c;
    max-height: 68vh;
    max-height: 68dvh;
    overflow-y: auto;
    overscroll-behavior: contain;
    animation: tn-mobile-reveal .18s ease-out;
  }
  .tn-mobile-group { margin: 0; border-radius: 5px; }
  .tn-mobile-group > summary {
    display: flex;
    min-height: 42px;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0 12px;
    border-bottom: 1px solid #ffffff0b;
    color: #d9e0ec;
    cursor: pointer;
    list-style: none;
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 650;
    letter-spacing: .065em;
    transition: color .15s ease, background-color .15s ease;
  }
  .tn-mobile-group > summary::after {
    content: "";
    flex: 0 0 8px;
    width: 8px;
    height: 8px;
    border-right: 1.5px solid #bea474;
    border-bottom: 1.5px solid #bea474;
    transform: rotate(45deg) translateY(-2px);
    transition: transform .2s ease;
  }
  .tn-mobile-group[open] > summary::after { transform: rotate(225deg) translateY(-1px); }
  .tn-mobile-group[open] > summary,
  .tn-mobile-group[data-current-group="true"] > summary {
    background: #21334b;
    color: #f0cd8e;
  }
  .tn-mobile-group[open] > summary {
    border-bottom-color: #b08b4e;
  }
  .tn-mobile-group-links {
    padding: 3px 5px 6px 9px;
    background: #101c2d;
    animation: tn-mobile-reveal .16s ease-out;
  }
  .tn-mobile-group-links a {
    display: block;
    min-height: 44px;
    padding: 10px 12px;
    border-bottom: 1px solid #ffffff0a;
    border-left: 2px solid transparent;
    color: #d6deea;
    font-size: 14px;
    line-height: 1.4;
    overflow-wrap: anywhere;
  }
  .tn-mobile-group-links a:last-child { border-bottom: 0; }
  .tn-mobile-group-links a:hover,
  .tn-mobile-group-links a:focus-visible,
  .tn-mobile-group-links a[aria-current="page"] {
    color: #f1d49d;
    background: #23354d;
    border-left-color: #d0a658;
  }
  @keyframes tn-mobile-reveal {
    from { opacity: .25; transform: translateY(-5px); }
    to { opacity: 1; transform: translateY(0); }
  }
}

@media (max-width: 640px) and (prefers-reduced-motion: reduce) {
  .tn-mobile-nav *, .tn-mobile-nav *::before, .tn-mobile-nav *::after {
    animation: none !important;
    transition: none !important;
  }
}