/* legacy-bridge.css
 *
 * Loaded LAST on the pages still built against styles.css, after both
 * index2styles.css and styles.css.
 *
 * WHY A BRIDGE AND NOT A STYLESHEET SWAP
 * --------------------------------------
 * Twenty-two classes those pages depend on for layout - .row, .column,
 * .container, .patiencepic, .CAlogo, .divWidth90 and the rest - exist only in
 * styles.css. Swapping it for index2styles.css collapses every one of them, so
 * index2styles is loaded FIRST and styles.css second: the legacy layout keeps
 * winning wherever both define a class, and the pages gain the vocabulary
 * index2styles adds on its own (.navbar, .menu, .gradient-text).
 *
 * The cost of that order is the few places styles.css reaches something the
 * site navbar needs. This file is those places and nothing else - it is
 * deliberately short, because every rule here is a rule fighting another
 * stylesheet, and a long list of those is a rewrite pretending to be a patch.
 *
 * WHAT IS NOT HERE, AND WHY. An earlier draft resized .logo and .leftTitle to
 * 45px, on the assumption that a 150x100 logo overflowing a 70px bar was the
 * bug. It is not: index.html measures the same 150x99 with the logo hanging
 * below the bar, and styles.css's own comment calls it "the overhang". It is
 * the site's design. Those rules were removed - the navbar here now matches
 * the homepage because it is left alone, not because it was corrected.
 */

/* styles.css styles the BARE `nav` ELEMENT - sticky, teal, 40px tall - and the
 * site navbar contains a nested <nav> for its menu. So the menu wrapper picked
 * up a teal sticky bar inside the black one. Measured on pages/about.html:
 * NAV at top 15, height 40, background rgb(0, 128, 128).
 *
 * Scoped to the navbar's own child so the page's separate section nav (#navbar
 * on these pages) keeps the teal styling it was designed with. */
.navbar > nav {
  position: static;
  background-color: transparent;
  height: auto;
  padding: 0;
  width: auto;
  margin: 0;
  z-index: auto;
}

/* THE FIXED BAR NEEDS THE PAGE TO GET OUT FROM UNDER IT. <header> computes to
 * zero height when its only child is position:fixed, so the first section
 * started at 40px with a 70px bar over it. index.html hides this behind a hero
 * that has its own top spacing; these pages open with content. */
body {
  padding-top: 96px;
}

/* The page's own section nav sits below the site bar rather than competing
 * with it for the top of the screen. */
#navbar {
  position: static;
}

@media (max-width: 1200px) {
  body {
    padding-top: 84px;
  }
}