/* Mobile navigation.
 *
 * Kept out of style.css so this theme's own additions stay separate from the
 * ~690 lines carried over from the static site, which remain easy to diff
 * against PhotoGeotag/website/styles.css. Loaded after style.css, so the rules
 * below win at equal specificity — which is what lets `.nav nav` escape the
 * source's `display: none`.
 *
 * The source hid the four primary links entirely under 900px, leaving them
 * reachable only from the footer. The links are the same ones; this only
 * changes how they are reached on a small screen.
 */

/* Desktop keeps the source's inline row; the button exists only on mobile. */
.nav-toggle { display: none; }

@media (max-width: 900px) {

  /* Group the CTA and the toggle at the right, leaving the brand on the left.
     The panel itself is out of flow, so only these three sit in the bar. */
  .nav-inner { gap: 12px; }
  .nav .cta-btn.small { margin-left: auto; }

  .nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;               /* 40px square: a comfortable touch target */
    height: 40px;
    padding: 0;
    background: transparent;
    border: 1px solid rgba(0, 0, 0, .12);
    border-radius: 11px;       /* matches .cta-btn.small beside it */
    color: var(--ink);
    cursor: pointer;
  }
  .nav-toggle:hover { border-color: rgba(0, 0, 0, .25); }
  .nav-toggle:focus-visible { outline: 2px solid var(--manual); outline-offset: 2px; }

  /* Three bars from one element: the middle is the span, the outer two are its
     pseudo-elements, which is what makes the cross transition cheap. */
  .nav-toggle-bars,
  .nav-toggle-bars::before,
  .nav-toggle-bars::after {
    display: block;
    width: 17px;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    transition: transform .2s ease, opacity .2s ease, background-color .2s ease;
  }
  .nav-toggle-bars { position: relative; }
  .nav-toggle-bars::before { content: ""; position: absolute; top: -6px; }
  .nav-toggle-bars::after  { content: ""; position: absolute; top: 6px; }

  /* Open: the middle bar disappears and the outer two cross. */
  .nav-toggle[aria-expanded="true"] .nav-toggle-bars { background: transparent; }
  .nav-toggle[aria-expanded="true"] .nav-toggle-bars::before { transform: translateY(6px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] .nav-toggle-bars::after  { transform: translateY(-6px) rotate(-45deg); }

  /* The panel hangs off the header, which is position:fixed and therefore
     already the containing block for this. Same translucent blur as the bar so
     the two read as one surface. */
  .nav nav {
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin: 0;
    padding: 4px 26px 14px;
    background: rgba(247, 247, 249, .97);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(0, 0, 0, .06);

    /* Closed. visibility (not just opacity) so the links leave the tab order
       and are not announced while hidden. */
    visibility: hidden;
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity .18s ease, transform .18s ease, visibility .18s;
  }
  .nav nav[data-open="true"] {
    visibility: visible;
    opacity: 1;
    transform: none;
  }

  /* Full-width rows: the whole strip is the target, not just the words. */
  .nav nav a {
    display: block;
    padding: 13px 0;
    font-size: 16px;
    color: var(--ink);
    border-bottom: 1px solid rgba(0, 0, 0, .06);
  }
  .nav nav a:last-child { border-bottom: 0; }

  /* Language switcher, inside the same slide-down panel as the primary
     links (see header.php — it is #site-nav's last child). A block-level
     flex item here (the panel's `display: block` above), set off from the
     links above it with its own divider and stretched to match their
     full-width feel, rather than the small pill it is on desktop. */
  .nav nav .lang-switcher {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(0, 0, 0, .06);
  }
  .nav nav .lang-switcher-toggle { width: 100%; text-align: center; }
  .nav nav .lang-switcher-menu { left: 0; right: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .nav nav,
  .nav-toggle-bars,
  .nav-toggle-bars::before,
  .nav-toggle-bars::after { transition: none; }
}