/* Shared mobile nav fix. Loaded by every page that has the brand nav.
 *
 * The bug: `nav` has a hard `height: 72px` on all 12 pages, and inside it sits
 * a 46px seal beside a two-line text block — "Bergen Tutors" over "Real
 * Teachers. Real Tutoring.", the subtitle tracked out at 0.25em. On a narrow
 * phone both lines wrap, the block grows past 72px, and because the nav is
 * centred the title clips off the top while the subtitle bleeds through the
 * gold bottom border.
 *
 * The fix keeps `height: 72px` deliberately. `.mobile-menu` on several pages is
 * positioned with `top: 72px`, so letting the nav grow taller would tuck the
 * open menu under it. Instead the brand is made to fit: smaller seal, smaller
 * type, and nothing allowed to wrap.
 *
 * Selectors are `nav .nav-*` (0,1,1) rather than `.nav-*` (0,1,0) so these win
 * over each page's inline <style> no matter where the <link> sits in the head.
 *
 * Each page keeps its own nav CSS for desktop. This file only overrides the
 * phone sizes, so it cannot change how any page looks above 760px.
 */

@media (max-width: 760px) {
  /* Side gutter. The pages disagreed about this: the signup and login pages
   * drop to 1.25rem on a phone, while the profile page and others keep their
   * desktop 2rem / 2.5rem, which pinches the brand between 32-40px gutters on
   * a 390px screen. With the title no longer allowed to wrap, that squeezed it
   * left-to-right against the hamburger. One gutter for every page.
   *
   * `body nav` (0,0,2) rather than `nav` (0,0,1) so it beats each page's own
   * nav rule without depending on where the <link> sits. */
  body nav {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  nav .nav-brand {
    gap: 0.5rem;
    min-width: 0;        /* lets the flex item shrink instead of forcing a wrap */
  }

  nav .nav-logo-seal {
    width: 38px;
    height: 38px;
  }

  nav .nav-text {
    min-width: 0;
  }

  nav .nav-title {
    font-size: 1rem;
    line-height: 1.15;
    white-space: nowrap;
  }

  nav .nav-subtitle {
    font-size: 0.55rem;
    letter-spacing: 0.08em;   /* 0.25em is what pushed it over the edge */
    white-space: nowrap;
  }
}

/* Under ~400px even the tightened subtitle competes with the sign-in button.
 * The tagline is decoration; the brand name and the button are not. */
@media (max-width: 400px) {
  nav .nav-subtitle {
    display: none;
  }
}

/* Dashboard only: the account button holds an avatar circle, the tutor's name
 * and a caret, all inside one button opening one menu. Three elements for one
 * job, sitting opposite a brand block with three of its own — on a phone the
 * bar reads as clutter. The circle and the name say the same thing, so the
 * name goes and the circle stays: it is the bigger tap target, it already
 * carries their initials or photo, and the menu it opens says "Signed in as"
 * with their email anyway.
 *
 * The caret stays. Without it the circle looks like decoration rather than
 * something to press.
 *
 * These classes exist only on the dashboard, so this is a no-op elsewhere. */
@media (max-width: 640px) {
  nav .nav-name {
    display: none;
  }

  nav .nav-right {
    gap: 0.5rem;
  }
}