/* ============================================================
   MOBILE NAVIGATION. Shared by every page on the site.

   Added 2026-08-12 after launch: below 900px the original design hid every
   nav link and gave nothing back, so mobile visitors had no way to navigate.
   LinkedIn traffic is overwhelmingly mobile, so this is load bearing.

   IMPORTANT: this file must be linked AFTER each page's own styles
   (after the inline <style> block on the five main pages, and after
   blog.css on the blog and utility pages). It relies on source order to
   override the legacy rule:
       @media (max-width: 900px) { .nav-links a:not(.nav-cta) { display: none; } }
   Same specificity, later wins. No !important anywhere.
   ============================================================ */

.nav-toggle { display: none; }

@media (max-width: 900px) {

  .nav-inner { position: relative; }

  /* ---- the button ---- */
  .nav-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; padding: 0;          /* 44px = minimum comfortable tap target */
    background: transparent; color: #284838;
    border: 1px solid #E4E2D6; border-radius: 4px;
    cursor: pointer; flex-shrink: 0;
  }
  .nav-toggle:focus-visible { outline: 2px solid #B8985A; outline-offset: 2px; }

  .nav-toggle .bar,
  .nav-toggle .bar::before,
  .nav-toggle .bar::after {
    display: block; width: 20px; height: 2px;
    background: currentColor; border-radius: 2px;
  }
  .nav-toggle .bar { position: relative; }
  .nav-toggle .bar::before, .nav-toggle .bar::after {
    content: ""; position: absolute; left: 0;
    transition: transform .18s ease;
  }
  .nav-toggle .bar::before { top: -6px; }
  .nav-toggle .bar::after  { top:  6px; }

  /* open state turns the bars into an X */
  nav[data-open="true"] .nav-toggle .bar { background: transparent; }
  nav[data-open="true"] .nav-toggle .bar::before { transform: translateY(6px) rotate(45deg); }
  nav[data-open="true"] .nav-toggle .bar::after  { transform: translateY(-6px) rotate(-45deg); }

  /* ---- the panel ---- */
  .nav-links {
    display: none;
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: #F8F8F4;
    border-top: 1px solid #E4E2D6; border-bottom: 1px solid #E4E2D6;
    padding: 6px 0 16px;
    box-shadow: 0 12px 26px rgba(40, 72, 56, 0.10);
    max-height: calc(100vh - 82px); overflow-y: auto;
  }
  nav[data-open="true"] .nav-links { display: flex; }

  /* undo the legacy hide */
  .nav-links a:not(.nav-cta) {
    display: block;
    padding: 15px 28px; font-size: 17px;
    border-bottom: 1px solid #EFEDE3;
  }
  .nav-links a:not(.nav-cta):last-of-type { border-bottom: none; }

  .nav-cta {
    margin: 14px 28px 0; padding: 15px 22px;
    text-align: center; border-radius: 3px;
  }
}

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