/* ============================================================
   howToNav.css — site top-nav + footer chrome for the
   standalone how-to article pages (howToAssess*.html).

   Those pages ship a complete, self-contained design system
   (own reset, own typography, own .btn set) and deliberately do
   NOT load aaAsCustomCss.css: that file restyles html/body/a/
   h1-h6/p site-wide and would fight the article styles. So the
   small amount of .topNav-* chrome the nav actually needs is
   ported here instead, plus the handful of resets required
   where the article's own rules leak into the injected nav and
   footer.

   Load order on those pages:
       bootstrap.min.css
       ... page <style> ...          <- article wins over Bootstrap
       asCss/publicNav.css           <- dark nav treatment + wordmark
       asCss/howToNav.css            <- this file

   Built by publish_howtos.py. See OMA-style runbook notes in
   the website-howto-content folder.
   ============================================================ */


/* ------------------------------------------------------------
   1. Nav chrome — ported verbatim from aaAsCustomCss.css so the
      fixed/transparent bar behaves exactly as on the other
      public pages. publicNav.css only recolours it; it assumes
      this base already exists.
   ------------------------------------------------------------ */
.topNav-header .topNav-navbar {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1030;
    background-color: transparent;
    border: none;
    padding-top: 1rem;
    padding-bottom: 1rem;
    padding-left: 25px;
    padding-right: 25px;
    transition: background-color 0.6s ease-in-out, padding 0.6s ease-in-out;
}

.custom-navbar-container {
    max-width: 1300px;
    padding-left: 25px;
    padding-right: 25px;
    margin: 0 auto;
}

@media (min-width: 1200px) {
    .custom-navbar-container {
        padding-left: 50px;
        padding-right: 50px;
    }
}

@media (max-width: 768px) {
    .topNav-header .topNav-navbar {
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
    }
}

.topNav-header .topNav-navbar.navbar-shrink {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

.navbar-shrink .navbar-brand img {
    height: 60px;
    transition: height 0.8s ease-in-out;
}

.topNav-search-icon {
    color: #6c757d;
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 1.2rem;
    padding: 0.25rem;
}

.topNav-search-icon:hover {
    color: #1ABC9C;
}


/* ------------------------------------------------------------
   1a. Nav rules now come from the SITE stylesheet, not from here.

      publish_howtos.py extracts every nav/footer-scoped rule out
      of aaAsCustomCss.css at build time and inlines it just above
      the publicNav.css link. A rule is taken only when every
      comma-part of its selector is anchored to nav chrome, so it
      cannot reach article prose -- which is why the whole file
      still cannot simply be <link>ed (its bare html/body/a/p/
      h1-h6 rules would rewrite the article's typography).

      Consequence: do NOT re-port nav rules into this file. Change
      the nav in aaAsCustomCss.css and rebuild. Hand-copying is
      what let these pages drift into showing Bootstrap dropdown
      carets and the article's Inter body type in the menu.

      What stays here is only what is genuinely how-to-specific:
      containment of the article's own globals, hero clearance and
      footer spacing.
   ------------------------------------------------------------ */


/* ------------------------------------------------------------
   2. Contain the article's own global rules.

      The article sets a global
          a { color: var(--teal); border-bottom: 1px solid ... }
      which would draw a teal rule under every nav item, dropdown
      item and footer link. Bare `a` is specificity 0,0,1 so any
      class selector beats it for colour — but the border-bottom
      is not re-declared by the nav/footer CSS, so it survives
      and must be cleared explicitly.
   ------------------------------------------------------------ */
.topNav-header a,
#footerMenu a {
    border-bottom: none;
}

/* The article's .btn is a 42px-min inline-flex pill. Both the
   navbar toggler and the search icon carry class="btn", so that
   rule lands on them and distorts the bar. Reset within the nav
   only — the article's own buttons are untouched. */
.topNav-header .btn {
    display: inline-block;
    min-height: 0;
    padding: 0.25rem 0.75rem;
    font-size: 1rem;
    font-weight: 400;
    border-radius: 0.375rem;
    gap: 0;
}

.topNav-header .btn.topNav-search-icon {
    padding: 0.25rem;
    font-size: 1.2rem;
}

.topNav-header .navbar-toggler:focus {
    box-shadow: none;
}


/* ------------------------------------------------------------
   3. Hero clearance.

      publicNav.css drops body padding and repads `.eco-hero`,
      but these pages use their own `.hero` / `.hero-inner`, so
      that rule does not reach them. Without this the fixed nav
      sits on top of the H1.

      Values track the measured nav height (~106px desktop,
      ~74px phone) plus the article's original breathing room.
   ------------------------------------------------------------ */
.hero .hero-inner {
    padding-top: 150px;
}

@media (min-width: 1200px) {
    .hero .hero-inner {
        padding-top: 168px;
    }
}

@media (max-width: 767px) {
    .hero .hero-inner {
        padding-top: 116px;
    }
}

/* The article's sticky sidebar/TOC offsets assume no fixed
   header. Push their sticky origin below the bar so headings
   are not hidden when jumping to an anchor. */
html {
    scroll-padding-top: 120px;
}

.sidebar {
    top: 124px !important;
}

@media (max-width: 767px) {
    html {
        scroll-padding-top: 92px;
    }
}


/* ------------------------------------------------------------
   4. Site footer sits directly against the article body. The
      article's last section has its own bottom padding, so just
      guarantee separation and stop the footer inheriting the
      article's link colour.
   ------------------------------------------------------------ */
#footerMenu {
    margin-top: 0;
}