/* ═══════════════════════════════════════════════════════════════
   THE FACULTY LOUNGE — Standard Nav Stylesheet
   Include on every page (except signin, onboarding, auth_callback):
     <link rel="stylesheet" href="/nav.css">
   All nav customization lives here. Do NOT add nav CSS to individual pages.
   ═══════════════════════════════════════════════════════════════ */

/* ── NAV SHELL ─────────────────────────────────────────────────── */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  height: 60px;
  background: var(--forest, #1d6349);
  display: flex;
  align-items: center;
  padding: 0 28px;
  gap: 12px;
}

/* ── BRAND ──────────────────────────────────────────────────────── */
.nav-brand {
  font-family: 'Lora', Georgia, serif;
  font-weight: 700;
  /* Fluid between 320px and ~410px of viewport, flat 1.05rem above that.
     A hard font-size step left the wordmark ellipsizing for ~20px either
     side of the step; ramping it keeps "The Faculty Lounge" whole down to
     320px. Written in px, not rem, so it does not depend on the 106.25%
     root size that individual pages set. */
  font-size: clamp(12.9px, 5.5vw - 4.7px, 1.05rem);
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
  flex: 1;
  /* July 27, 2026: the brand is the only flexible item in the bar (every
     control to its right is flex-shrink: 0), but the default min-width:auto
     on a flex item means it refuses to shrink below its nowrap text width
     (~166px). Below ~362px that pushed the hamburger off-screen by up to
     43px. min-width: 0 lets it absorb the shrink instead; the ellipsis is a
     never-should-fire backstop, since the fluid font-size above keeps the
     full name fitting all the way down to 320px. */
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── CENTER LINKS ───────────────────────────────────────────────── */
.nav-center {
  display: flex;
  gap: 2px;
}

.nav-center a {
  font-size: 0.9375rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.75);
  padding: 6px 14px;
  border-radius: 20px;
  text-decoration: none;
  transition: color 0.15s, background 0.15s;
}

.nav-center a:hover  { color: #fff; background: rgba(255, 255, 255, 0.10); }
.nav-center a.active { color: #fff; background: rgba(255, 255, 255, 0.18); font-weight: 600; }

/* ── GUEST / LOGGED-IN SHOW-HIDE ────────────────────────────────── */
.nav-center-loggedin          { display: none; }
body.logged-in .nav-center-guest    { display: none; }
body.logged-in .nav-center-loggedin { display: flex; }

.nav-guest-right    { display: flex; flex: 1; justify-content: flex-end; align-items: center; gap: 8px; }
.nav-loggedin-right { display: none; }
body.logged-in .nav-guest-right    { display: none; }
body.logged-in .nav-loggedin-right { display: flex; align-items: center; gap: 8px; flex: 1; justify-content: flex-end; }

/* ── BUTTONS (guest right) ──────────────────────────────────────── */
.nav-join {
  background: #fff;
  color: var(--forest, #1d6349);
  font-family: 'DM Sans', sans-serif;
  font-weight: 600;
  font-size: 0.9375rem;
  /* 11px vertical, not 8px, so the button clears 44px. The <=400px block
     below trims it back for tiny phones where bar width is the constraint. */
  padding: 11px 22px;
  border-radius: 22px;
  border: none;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  transition: transform 0.15s, box-shadow 0.15s;
  white-space: nowrap;
}
.nav-join:hover { transform: translateY(-1px); box-shadow: 0 3px 12px rgba(0, 0, 0, 0.20); }

.nav-signin {
  background: transparent;
  color: #fff;
  font-family: 'DM Sans', sans-serif;
  font-weight: 600;
  font-size: 0.9375rem;
  padding: 7px 18px;
  border-radius: 22px;
  border: 1.5px solid rgba(255, 255, 255, 0.45);
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  transition: border-color 0.15s, background 0.15s;
  white-space: nowrap;
}
.nav-signin:hover { border-color: #fff; background: rgba(255,255,255,0.08); }

/* ── MESSAGES ICON (logged-in right) ───────────────────────────── */
.nav-messages {
  /* 34px -> 40px, August 2, 2026. Signed-in primary controls; the
     44px standard is unreachable here without the bar overflowing at
     320px, so 40px is the measured maximum. Raise .nav-messages,
     .nav-notif-btn and .nav-avatar together or the bar looks broken. */
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.10);
  cursor: pointer;
  text-decoration: none;
  position: relative;
  transition: background 0.15s;
  flex-shrink: 0;
}
.nav-messages:hover { background: rgba(255, 255, 255, 0.20); }
.nav-messages svg {
  width: 17px; height: 17px;
  stroke: #fff; fill: none;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}

.nav-badge {
  position: absolute;
  /* Straddle the top-right edge of the 34px icon circle: the badge centre sits on
     the circle's border, so about half of the red overlaps the circle and about
     half sits outside on the top-right. The forest ring keeps the overlap clean
     against both the lighter icon circle and the darker nav bar. */
  top: -4px; right: -4px;
  background: #e74c3c;
  color: #fff;
  font-size: 0.7rem; /* 12px, mobile legibility floor (was 0.6rem/10px) */
  font-weight: 700;
  min-width: 17px;
  height: 17px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  box-shadow: 0 0 0 2px var(--forest, #1d6349);
  pointer-events: none;
}

/* ── NOTIFICATIONS BELL (logged-in right) ──────────────────────── */
.nav-notif-wrap { position: relative; display: flex; align-items: center; }
.nav-notif-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.10);
  border: none;
  cursor: pointer;
  position: relative;
  transition: background 0.15s;
  flex-shrink: 0;
  padding: 0;
}
.nav-notif-btn:hover { background: rgba(255, 255, 255, 0.20); }
.nav-notif-btn[aria-expanded="true"] { background: rgba(255, 255, 255, 0.24); }
.nav-notif-btn svg {
  width: 17px; height: 17px;
  stroke: #fff; fill: none;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.nav-notif-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 340px;
  max-width: calc(100vw - 32px);
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 28px rgba(0, 0, 0, 0.16), 0 1px 4px rgba(0, 0, 0, 0.08);
  z-index: 300;
  overflow: hidden;
}
.nav-notif-panel[hidden] { display: none; }
.nav-notif-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; border-bottom: 1px solid #eef3f0;
  font-size: 0.95rem; font-weight: 600; color: #1A2820;
}
.nav-notif-clear {
  background: none; border: none; cursor: pointer;
  font-family: inherit; font-size: 0.8125rem; color: #1d6349; padding: 2px 4px;
}
.nav-notif-clear:hover { text-decoration: underline; }
.nav-notif-list { max-height: 380px; overflow-y: auto; }
.nav-notif-empty { padding: 26px 16px; text-align: center; color: #4F6D5F; font-size: 0.875rem; }
.nav-notif-item {
  display: flex; align-items: flex-start; gap: 11px;
  padding: 12px 16px; text-decoration: none;
  border-bottom: 1px solid #f2f6f4; transition: background 0.12s;
}
.nav-notif-item:last-child { border-bottom: none; }
.nav-notif-item:hover { background: #f5fbf7; }
.nav-notif-item.unread { background: #eef8f3; }
.nav-notif-item.unread:hover { background: #e6f5ef; }
.nav-notif-ic {
  flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.nav-notif-ic svg { width: 16px; height: 16px; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.nav-notif-ic-match  { background: #e6f5ef; } .nav-notif-ic-match svg  { stroke: #1d6349; }
.nav-notif-ic-reply  { background: #e6f1fb; } .nav-notif-ic-reply svg  { stroke: #185FA5; }
.nav-notif-ic-reply2 { background: #eeedfe; } .nav-notif-ic-reply2 svg { stroke: #534AB7; }
.nav-notif-body { flex: 1; min-width: 0; }
.nav-notif-title { display: block; font-size: 0.875rem; font-weight: 600; color: #1A2820; line-height: 1.35; }
.nav-notif-sub { display: block; font-size: 0.8125rem; color: #4F6D5F; line-height: 1.35; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-notif-time { flex-shrink: 0; font-size: 0.75rem; color: #9fb2a7; }

/* A notification you can answer without leaving the page (a mentee request).
   Same two buttons as the Dashboard's request card, same wording and order, so
   answering from the bell and answering from the Dashboard read as one
   decision rather than two different features. */
.nav-notif-item-act { cursor: default; }
.nav-notif-item-act:hover { background: #fff; }
.nav-notif-item-act.unread:hover { background: #eef8f3; }
.nav-notif-open { display: block; text-decoration: none; }
/* The one-line ellipsis on .nav-notif-sub would cut this message in half, and a
   message you are being asked to act on has to be readable in full. */
.nav-notif-sub-full { white-space: normal; overflow: visible; text-overflow: clip; }
.nav-notif-acts { display: flex; gap: 8px; margin-top: 9px; }
.nav-notif-acts button {
  font-family: inherit; font-size: 0.8125rem; font-weight: 600;
  padding: 6px 14px; border-radius: 8px; cursor: pointer; line-height: 1.2;
}
.nav-notif-accept { background: #2e7d5e; color: #fff; border: 1px solid #2e7d5e; }
.nav-notif-accept:hover:not(:disabled) { background: #256a4f; }
.nav-notif-decline { background: #fff; color: #1d6349; border: 1px solid #C8E8D8; }
.nav-notif-decline:hover:not(:disabled) { background: #f2f9f5; }
.nav-notif-acts button:disabled { opacity: 0.55; cursor: default; }
.nav-notif-done { display: inline-block; margin-top: 9px; font-size: 0.8125rem; font-weight: 600; color: #4F6D5F; }

/* ── AVATAR (logged-in right) ───────────────────────────────────── */
.nav-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  border: 1.5px solid rgba(255, 255, 255, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;   /* was 0.72rem; the circle grew to 40px */
  font-weight: 700;
  color: #fff;
  cursor: pointer;
  text-decoration: none;
  transition: border-color 0.15s;
  flex-shrink: 0;
}
.nav-avatar:hover { border-color: #fff; }

/* ── DROPDOWN ───────────────────────────────────────────────────── */
.nav-has-dropdown { position: relative; display: flex; align-items: center; }
.nav-trigger      { display: flex; align-items: center; }

.nav-dropdown {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(-4px);
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 28px rgba(0, 0, 0, 0.13), 0 1px 4px rgba(0, 0, 0, 0.07);
  padding: 10px 6px;
  min-width: 175px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s;
  pointer-events: none;
  z-index: 200;
}

.nav-has-dropdown:hover .nav-dropdown,
.nav-has-dropdown:focus-within .nav-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}

/* Dropdown link overrides — must beat .nav-center a specificity */
.nav-dropdown a {
  display: block !important;
  padding: 9px 16px !important;
  color: #1d6349 !important;
  border-radius: 8px !important;
  font-size: 0.9375rem !important;
  font-weight: 500 !important;
  background: transparent !important;
  white-space: nowrap;
  transition: background 0.12s, color 0.12s;
}
.nav-dropdown a:hover {
  background: #eef8f3 !important;
  color: #1d6349 !important;
}

/* Avatar dropdown — aligns right */
.nav-avatar-wrap { display: flex; align-items: center; }
.nav-avatar-dropdown {
  left: auto !important;
  right: 0 !important;
  transform: translateX(0) translateY(-4px) !important;
  min-width: 150px !important;
}
.nav-has-dropdown:hover .nav-avatar-dropdown,
.nav-has-dropdown:focus-within .nav-avatar-dropdown {
  transform: translateX(0) translateY(0) !important;
}

.nav-signout-link         { color: #c0392b !important; }
.nav-signout-link:hover   { background: #fff5f5 !important; color: #a93226 !important; }

/* ── FOCUS STATES ───────────────────────────────────────────────── */
.nav a:focus, .nav button:focus { outline: none; }
.nav a:focus-visible, .nav button:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.7);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ── MOBILE MENU (hamburger) ────────────────────────────────────── */
/* Hidden on desktop; the hamburger only exists at or below 640px. */
.nav-hamburger { display: none; }

.nav-mobile-menu {
  position: absolute;
  top: 100%; left: 0; right: 0;
  background: var(--forest, #1d6349);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
  max-height: calc(100vh - 60px);
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.18s ease-out, transform 0.18s ease-out, visibility 0.18s;
}
.nav-mobile-menu a {
  display: flex;
  align-items: center;
  min-height: 48px; /* comfortable tap target */
  padding: 0 24px;
  color: rgba(255, 255, 255, 0.92);
  font-size: 1rem;
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.nav-mobile-menu a:last-child { border-bottom: none; }
.nav-mobile-menu a:active { background: rgba(255, 255, 255, 0.10); }

/* Only the menu matching the login state can open */
body.logged-in .nav-mobile-guest { display: none; }
body:not(.logged-in) .nav-mobile-loggedin { display: none; }
.nav.nav-menu-open .nav-mobile-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Hamburger icon: three bars that form an X when open */
.nav-hamburger-bar {
  display: block;
  width: 18px; height: 2px;
  border-radius: 1px;
  background: #fff;
  transition: transform 0.18s ease-out, opacity 0.18s ease-out;
}
.nav-menu-open .nav-hamburger-bar:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-menu-open .nav-hamburger-bar:nth-child(2) { opacity: 0; }
.nav-menu-open .nav-hamburger-bar:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (prefers-reduced-motion: reduce) {
  .nav-mobile-menu, .nav-hamburger-bar { transition: none; }
}

/* ── RESPONSIVE ─────────────────────────────────────────────────── */
/* July 27, 2026: this breakpoint was 640px, but the full desktop bar needs
   ~774px (guest) / ~817px (signed in) to fit. That left every page scrolling
   horizontally across 641-816px — 6px at 768px, up to 176px at 641px, with
   the search button and avatar clipped off the right edge. Raised to 819px so
   the hamburger takes over before the bar runs out of room. Nothing is lost:
   the mobile menu already carries every link in the bar. */
@media (max-width: 819px) {
  .nav-center { display: none !important; }
  /* Beats site-shared.js's "body.logged-in .nav-center-loggedin { display: flex !important }"
     (higher specificity), so signed-in mobile doesn't get a 480px-wide link row
     forcing horizontal scroll. Links live in the hamburger menu instead. */
  body.logged-in .nav .nav-center-loggedin { display: none !important; }

  .nav-hamburger {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 44px; height: 44px; /* full-size tap target */
    margin-right: -8px; /* optically align icon with nav edge */
    background: transparent;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    flex-shrink: 0;
  }
}

/* July 27, 2026: was 840px. Above that the signed-in "Mentorship" CTA came
   back while the link row was still full width, which overflowed again across
   841-993px (94px at 900px — Surface and tablet-landscape widths). Raised to
   1000px, where the bar genuinely has room for it. */
@media (max-width: 1000px) {
  /* At 768px the full link row + Sign In/Join overflowed by ~2px. */
  .nav-center a { padding: 6px 10px; }
  /* Signed in, the "Find a Mentor/Mentee →" CTA (~170px) pushed the nav
     70-150px past the viewport on phones and tablets. Hidden here; the same
     action lives on the dashboard, in page content, and in the mobile menu. */
  .nav-loggedin-right .nav-join { display: none; }
}

/* At 375px the Sign In + Join buttons overflowed the viewport by 7px
   with the desktop 28px side padding. 16px padding still left the
   guest bar (brand + search + Join + hamburger) ~4px too wide at
   375px, which showed as horizontal scroll on pages without
   overflow-x: clip (found July 17, 2026 on feedback.html). 12px
   padding and a 6px gap give it room to spare.
   July 27, 2026: split out of the 480px query below and widened to 600px.
   The Sign In button reappears at 481px but the side padding jumped back to
   28px at the same moment, so guest overflowed by 9px across 481-489px.
   Dropping the padding earlier than the button returns clears it. */
@media (max-width: 600px) {
  .nav { padding: 0 12px; gap: 6px; }
}

@media (max-width: 480px) {
  /* With the hamburger added there is no longer room for the "Sign In"
     text button on small phones; it moves into the mobile menu instead.
     "Join" stays visible as the primary action. */
  .nav-guest-right .nav-signin { display: none; }
  /* Signed in, the right cluster (search + messages + notifications +
     avatar) plus the hamburger overflowed the 375px viewport by ~29px,
     which showed as horizontal scroll on every page without
     overflow-x: clip (found July 2026 mobile review). The Messages icon
     moves off the bar here — it already has a "Messages" entry in the
     mobile menu, so nothing is lost — which clears the overflow and
     de-clutters the bar to four controls (search, notifications, avatar,
     hamburger). */
  body.logged-in .nav-loggedin-right .nav-messages { display: none; }
}
/* ── TINY PHONES (July 27, 2026) ─────────────────────────────────── */
/* At 320-362px the bar was ~43px too wide even with the hamburger: the
   brand alone was 166px, leaving too little for search + Join + hamburger.
   The fluid .nav-brand font-size above does most of the work; these three
   trims cover the rest so the wordmark never has to ellipsize at 320px
   (iPhone SE, small Android). The 44px hamburger tap target is untouched. */
/* Narrowed from 460px to 360px on August 2, 2026. The wordmark's fluid
   font-size (above) already does the heavy lifting, so the bar only actually
   runs out of room at 320-360px. At 375-430px (iPhone SE 2/3 through 16 Pro
   Max, which is nearly every visitor) shrinking search to 38px was costing a
   44px tap target for nothing. Measured signed-out AND signed-in at 320, 344,
   360, 375, 390, 414 and 430px: no nav overflow, wordmark never ellipsizes.
   If you widen this again, re-check the SIGNED-IN bar, which carries two more
   controls and is the tighter of the two. */
@media (max-width: 360px) {
  .nav { padding: 0 10px; }
  .nav-join { padding: 8px 14px; }
  /* .nav prefix so this beats the 44px tap-target rule in the SITE SEARCH
     block further down the file. */
  .nav .nav-search-btn { width: 38px; height: 38px; }
  /* The signed-in bar carries two more controls than the guest one, and at
     320px the 40px versions pushed the wordmark into an ellipsis. They stay
     at 34px here only. Measured: 344px and up is fine at 40px.
     August 2, 2026. */
  .nav .nav-messages, .nav .nav-notif-btn, .nav .nav-avatar { width: 34px; height: 34px; }
  .nav .nav-avatar { font-size: 0.72rem; }
}

/* On larger screens the mobile menu never shows, so its Sign In entry
   only exists where the bar-level button is hidden. */
@media (min-width: 481px) {
  .nav-mobile-signin { display: none; }
}

/* ── SITE SEARCH (July 2026) ────────────────────────────────────── */
/* Magnifying-glass button in the bar; white results panel drops below
   the nav. Index lazy-loads on first open (see nav.js). */
/* July 29, 2026: the button was a 10%-white circle with no border, sitting
   flush against the right edge of the bar after "Join". Signed out it read as
   part of the background rather than a control, and search looked like a
   members-only feature it has never been. The 1.5px border is the same
   treatment as the Sign In pill next to it, so the two read as one row of
   controls. Search has always worked for guests; it just could not be found. */
.nav-search-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.10);
  border: 1.5px solid rgba(255, 255, 255, 0.45);
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s, border-color 0.15s;
}
.nav-search-btn:hover { background: rgba(255, 255, 255, 0.20); border-color: #fff; }
.nav-search-btn[aria-expanded="true"] { background: rgba(255, 255, 255, 0.24); }
.nav-search-btn svg {
  width: 17px; height: 17px;
  stroke: #fff; fill: none;
  stroke-width: 1.8; stroke-linecap: round;
}

.nav-search-panel {
  position: absolute;
  top: 100%;
  right: 16px;
  margin-top: 8px;
  width: min(560px, calc(100vw - 32px));
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18), 0 2px 8px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  z-index: 210;
}
.nav-search-panel[hidden] { display: none; }

.nav-search-box {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  border-bottom: 1px solid #e4efe8;
}
.nav-search-box-icon {
  width: 18px; height: 18px;
  stroke: #5a7566; fill: none;
  stroke-width: 2; stroke-linecap: round;
  flex-shrink: 0;
}
.nav-search-input {
  flex: 1;
  min-width: 0;
  min-height: 28px;
  border: none;
  outline: none;
  background: transparent;
  font-family: 'DM Sans', sans-serif;
  font-size: 1.0625rem;
  color: #123e2c;
}
.nav-search-input::placeholder { color: #5a7566; } /* 5.0:1 on white; #8aa495 failed 4.5:1 */
.nav-search-esc {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.7rem;
  font-weight: 600;
  color: #5a7566;
  border: 1px solid #d3e3d9;
  border-radius: 5px;
  padding: 2px 6px;
  flex-shrink: 0;
}

.nav-search-results {
  max-height: min(430px, calc(100vh - 140px));
  overflow-y: auto;
  padding: 6px;
}
.nav-search-result {
  display: block;
  padding: 10px 12px;
  border-radius: 10px;
  text-decoration: none;
  transition: background 0.12s;
}
.nav-search-result:hover,
.nav-search-result.active { background: #eef8f3; }
.nav-search-result:focus-visible {
  outline: 2px solid #1d6349; /* white panel needs a dark outline, not the nav's white one */
  outline-offset: -2px;
}
.nav-search-result-top {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 2px;
}
.nav-search-result-title {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.9375rem;
  font-weight: 600;
  color: #123e2c;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nav-search-result-title mark {
  background: #dff2e6;
  color: inherit;
  border-radius: 3px;
  padding: 0 1px;
}
.nav-search-result-desc {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.875rem;
  line-height: 1.5;
  color: #5a7566;
}

/* Type badges */
.nav-search-badge {
  flex-shrink: 0;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 9px;
  background: #eef2f0; color: #4a5f54; /* default (Page) */
}
.nav-search-badge-guide  { background: #e2f3e9; color: #1d6349; }
.nav-search-badge-tool   { background: #e3edf8; color: #2c5f8f; }
.nav-search-badge-blog   { background: #f8efdd; color: #8a6420; }
.nav-search-badge-forum  { background: #efe7f6; color: #6b4494; }
.nav-search-badge-rubric { background: #e0f2f1; color: #1f6f66; }

.nav-search-note {
  padding: 20px 18px;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: #5a7566;
  text-align: center;
}
.nav-search-note a { color: #1d6349; font-weight: 600; }

@media (max-width: 640px) {
  /* Full-width sheet under the bar; bigger tap target on the button */
  .nav-search-btn { width: 44px; height: 44px; }
  .nav-search-panel {
    left: 0; right: 0;
    width: auto;
    margin-top: 0;
    border-radius: 0 0 14px 14px;
  }
  .nav-search-esc { display: none; }
  .nav-search-result { padding: 12px; }
  .nav-search-result-title { white-space: normal; } /* titles may wrap on phones */
}

/* ── FOOTER BASELINE (July 2026, static bake) ───────────────────── */
/* The footer markup is baked into every page by bake-nav.js, and some
   pages never had inline footer CSS of their own. This scoped baseline
   guarantees a correctly styled footer everywhere. Pages with the
   standard inline footer block declare the same values, so nothing
   changes visually on them. */
/* Vertical rhythm tightened July 2026 (David): 60px top -> 40px, and the
   gap between the link columns and the bottom bar 48px -> 28px, so the
   footer reads as a closing band rather than a second page. */
#tfl-footer {
  background: #1A2820; color: rgba(255,255,255,0.55);
  padding: 40px 32px 36px;
}
#tfl-footer .footer-inner {
  max-width: 1120px; margin: 0 auto 28px;
  display: grid; grid-template-columns: 1.4fr 1fr 1fr;
  gap: 48px;
}
/* Phones keep the two link columns side by side at a smaller size (July 29,
   2026, David). Stacking them turned the footer into roughly a screen and a
   half of links under every page. The same block is mirrored in site-shared.js,
   which injects its own copy for pages with no inline footer CSS. */
@media (max-width: 720px) {
  #tfl-footer { padding: 32px 20px 28px; }
  #tfl-footer .footer-inner { grid-template-columns: 1fr 1fr; gap: 22px 18px; margin: 0 auto 20px; }
  #tfl-footer .footer-brand-col { grid-column: 1 / -1; }
  #tfl-footer .footer-brand-col p { font-size: 0.8125rem; line-height: 1.6; max-width: none; }
  #tfl-footer .footer-col h5 { margin-bottom: 10px; }
}
#tfl-footer .footer-brand {
  font-family: 'Lora', serif; font-weight: 700; color: #fff;
  font-size: 1.1rem; display: block; margin-bottom: 12px;
}
#tfl-footer .footer-brand-col p { font-size: 0.875rem; line-height: 1.7; max-width: 260px; }
#tfl-footer .footer-col h5 {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: rgba(255,255,255,0.55);
  margin-bottom: 16px;
}
#tfl-footer .footer-col ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 10px;
}
#tfl-footer .footer-col ul li a {
  font-size: 0.875rem; color: rgba(255,255,255,0.6);
  text-decoration: none; transition: color 0.15s;
}
#tfl-footer .footer-col ul li a:hover { color: #fff; }
#tfl-footer .footer-bottom {
  max-width: 1120px; margin: 0 auto;
  padding-top: 20px; border-top: 1px solid rgba(255,255,255,0.1);
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 12px;
  font-size: 0.82rem; color: rgba(255,255,255,0.5);
}

/* ── CLOSING TAGLINE vs THE CHAT BUBBLE ─────────────────────────── */
/* The chat launcher is fixed at right:22px and is 56px wide, so it
   occupies the rightmost 78px of the viewport. On a wide monitor the
   1120px footer-bottom is centered far clear of it, but as the window
   narrows the right end of that row (the "Always free. No ads. No
   catch." tagline) slides underneath the bubble.

   The clamp slides the tagline left by exactly the amount of the
   collision and no more, so nothing moves on a wide screen:
     needed clearance from the viewport edge = 78px bubble + 14px gap = 92px
     actual clearance                        = (100vw - 1120px) / 2
     shift = 92px - (100vw - 1120px)/2  =>  652px - 50vw
   It reaches 0 at 1304px (nothing to fix above that) and is capped at
   60px, which is where the row hits the footer's own 32px gutter.
   Only above 640px: below that the bottom bar stacks centered and the
   tagline is already well clear of the bubble. */
@media (min-width: 641px) {
  #tfl-footer .footer-bottom > span:last-of-type {
    margin-right: clamp(0px, 652px - 50vw, 60px);
  }
}

/* ── FOOTER SOCIAL ICONS ─────────────────────────────────────────── */
/* Between the two closing taglines in .footer-bottom (its flex
   space-between centers them on desktop). Light-green (#a8ddc0)
   circles with dark forest glyphs, per David's approved mockup
   (July 17, 2026). The baked markup carries layout, circle, and
   fill inline as a stale-stylesheet fallback, so hover overrides
   below need !important to beat those inline styles. */
#tfl-footer .footer-social { display: flex; align-items: center; gap: 22px; }
#tfl-footer .footer-social-link { transition: transform 0.15s; }
#tfl-footer .footer-social-link svg { transition: fill 0.15s; }
#tfl-footer .footer-social-link svg { display: block; }
#tfl-footer .footer-social-link:hover { transform: translateY(-2px); }
#tfl-footer .footer-social-link:hover svg { fill: #fff; }
#tfl-footer .footer-social-link:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
@media (max-width: 640px) {
  /* Stack the bottom bar: tagline / icons / tagline, centered. */
  #tfl-footer .footer-bottom { flex-direction: column; justify-content: center; text-align: center; gap: 10px; }
  #tfl-footer .footer-social { gap: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  #tfl-footer .footer-social-link { transition: none; }
  #tfl-footer .footer-social-link:hover { transform: none; }
}

/* ── FOOTER TAP TARGETS (mobile) ────────────────────────────────── */
/* Footer links were ~19px tall. Padding brings the tap area to ~27px
   while tighter gaps keep total footer growth under 20%. Scoped to
   #tfl-footer so these outrank both per-page inline .footer-col rules
   and the baseline block above. */
@media (max-width: 768px) {
  #tfl-footer .footer-col ul { gap: 6px; }
  /* July 2026 mobile review: 4px left the hit area ~19-23px, just under the
     24px secondary-link floor. 7px clears it comfortably (~29px). */
  #tfl-footer .footer-col ul li a { display: inline-block; padding: 7px 0; }
}
/* Two-column footer sizing (July 29, 2026). 0.8125rem is 13px, above the 12px
   mobile type floor; 5px of padding on a 13px line keeps the hit area ~28px,
   above the 24px secondary-link floor. Placed after the block above so it wins
   the tie on font-size and padding. */
@media (max-width: 720px) {
  #tfl-footer .footer-col ul { gap: 2px; }
  #tfl-footer .footer-col ul li a { font-size: 0.8125rem; padding: 5px 0; }
}

/* ── "BEST ON DESKTOP" TAG (mobile) ─────────────────────────────── */
/* Shared cue for tools that are hidden on phones (currently the Seating
   Chart Maker, which blocks at <=700px). Hidden by default; appears only
   at the widths where the tool itself is unavailable, so mobile teachers
   know before they tap in. Added July 2026 mobile review. */
.fl-desktop-tag { display: none; }
@media (max-width: 700px) {
  .fl-desktop-tag {
    display: inline-block; margin-left: 8px; vertical-align: middle;
    font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.04em;
    text-transform: uppercase; color: var(--forest, #1d6349);
    background: var(--pale-g, #eaf5ef); border: 1px solid var(--mint, #C8E8D8);
    border-radius: 10px; padding: 2px 8px; white-space: nowrap; line-height: 1.5;
  }
}

/* ── PER-PHOTO AVATAR FRAMING ───────────────────────────────────── */
/* Most headshots sit fine with the default centre crop. James Okwu's
   portrait is a tall frame with his face high in it, so the default
   crop cut him off at the chin. Pulling the crop to the top of the
   image drops his face into the middle of the circle. */
img[src*="/3_Photos/James"],
img[src*="3_Photos/James"] {
  object-position: center top;
}

/* ══════════════════════════════════════════════════════════════
   BREADCRUMB BAR  (site-wide, August 2, 2026)
   Every breadcrumb sits in a full-width dark green band that runs
   continuous with the nav above it, so there is no pale strip of
   page background between the two. Text has to be light to stay
   readable on that ground.

   To put a page in the band, wrap its breadcrumb:
     <div class="breadcrumb-bar"><nav class="breadcrumb">...</nav></div>

   Everything is scoped under .breadcrumb-bar so it outranks each
   page's own inline .breadcrumb rules on specificity, which means
   it works whether nav.css loads before or after that inline
   <style> block (both orders exist on this site).
   ══════════════════════════════════════════════════════════════ */
.breadcrumb-bar { background: var(--forest, #1d6349); }
.breadcrumb-bar .breadcrumb { padding: 12px 24px; color: rgba(255,255,255,0.6); }
.breadcrumb-bar .breadcrumb a { color: rgba(255,255,255,0.8); }
.breadcrumb-bar .breadcrumb a:hover { color: #fff; text-decoration: underline; }
.breadcrumb-bar .breadcrumb a:focus-visible { outline-color: #fff; }
.breadcrumb-bar .breadcrumb-sep { stroke: rgba(255,255,255,0.45); }
.breadcrumb-bar .breadcrumb-current { color: #fff; font-weight: 600; }

/* The band butts straight against whatever follows it. Without this,
   a hero carrying its own margin-top lets the page gradient show
   through as a pale seam under the dark band. */
.breadcrumb-bar + .hero,
.breadcrumb-bar + .page-hero,
.breadcrumb-bar + .page-header,
.breadcrumb-bar + .article-header,
.breadcrumb-bar + main { margin-top: 0; }

@media (max-width: 640px) {
  .breadcrumb-bar .breadcrumb { padding: 10px 18px; }
}

/* Print: no dark ink, and no white text on white paper. */
@media print {
  .breadcrumb-bar { background: none !important; }
  .breadcrumb-bar .breadcrumb,
  .breadcrumb-bar .breadcrumb a,
  .breadcrumb-bar .breadcrumb-current { color: #000 !important; }
  .breadcrumb-bar .breadcrumb-sep { stroke: #000 !important; }
}