/* ==========================================================================
   THK — shared site styles
   --------------------------------------------------------------------------
   Loaded by EVERY page, before that page's own stylesheet.
   Holds the nav, footer and palette that every page shares.

   HOW THIS FILE IS ORGANISED
     1. Design tokens      — colours and spacing, change them in one place
     2. Base               — html/body resets
     3. Navigation         — the top bar, shared by every page
     4. Footer             — shared by every page
     5. Modal              — the Disclaimer popup
     6. Small screens      — everything below 992px

   THE ONE RULE TO UNDERSTAND
   Desktop (992px and up) sizes most type and spacing in `vw`, which means
   "percent of window width". That is why the desktop site grows as you widen
   the browser, and it is intentional.

   Below 992px `vw` sizing collapses to unreadable sizes (0.9vw on a phone is
   about 3px), so section 6 gives the small screens real mobile values.
   ========================================================================== */


/* 1. DESIGN TOKENS ========================================================= */

:root {
  /* Brand palette. --primary is the maroon used for headings, links and
     active states. --primary-light is the lighter shade used for the active
     Cumberland/Oakland toggle on the contact page. */
  --primary: #6f041f;
  --primary-light: #880526;  /* = lighten(#6f041f, 5%) */
  --bg: #f8f8f8;
  --bg-dark: #ebebeb; /* = darken(#f8f8f8, 5%), used by the services cards */
  --white: #fff;

  /* Spacing */
  --pad: 15px;

  /* Matches Bootstrap's .rounded, which is what the home page photos and the
     contact phone pills already use. The site is otherwise square-cornered,
     so anything larger reads as out of place. */
  --radius: 0.375rem;

  /* Minimum comfortable reading size on small screens. */
  --text-min: 1rem;
}


/* 2. BASE ================================================================== */

/* Keep <html> plain. It needs a height for the sticky footer below and nothing
   else — in particular, no overflow.

   Setting overflow here rather than on the body makes <html> the page's scroll
   container, and two things break as a result:
     - Bootstrap's modal assumes hiding the BODY's overflow removes the
       scrollbar. It no longer does, so its compensating padding is applied
       against a scrollbar that is still there and the page jumps sideways.
     - With `height: 100%` as well, <html> becomes a fixed-height scrolling
       box, and the fixed navbar slides upward as the page scrolls instead of
       staying put.
   Neither belongs here. */
html {
  height: 100%;
}

/* Sticky footer.

   `height: 100%` on the body pinned it to exactly the window height, so on a
   short page — the contact page on a tall tablet, say — the footer ended
   where the content did and the body's own background showed below it.

   `min-height` plus a column flex layout fixes that at any content length:
   <main> takes whatever vertical space is left over, so the footer sits at
   the bottom of the window on a short page and directly after the content on
   a long one. The modals are direct children of <body> too, but they are
   `display: none` until opened and `position: fixed` once they are, so they
   never take part in this layout. */
body {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  width: 100%;
  margin: 0;
  padding: 0;
}

/* DO NOT put `overflow-x` on <body> or <html>. Both were tried; both broke
   something, because both are ancestors of the fixed navbar and the page's
   scroll container at the same time:

     overflow-x: hidden on <body>  — makes the viewport a horizontal scroll
       container. The fixed navbar then measures its right edge against the
       full window width while the content measures against the window minus
       the scrollbar, so the hamburger ends up sitting under the scrollbar and
       the banners look a few pixels short.
     overflow-x: clip on <body>    — no scroll container, so that misalignment
       goes away, but the clip applies to the fixed navbar as well and it
       scrolls away with the page instead of staying put.
     either one on <html>          — moves the scroll container off the body,
       and Bootstrap's modal handling assumes the body is where overflow lives.
       Its scrollbar compensation then applies against a scrollbar it did not
       actually remove, and the whole page jumps sideways.

   The clipping belongs on the content regions instead — see `main, #footer`
   below. Neither is an ancestor of the navbar, so none of the above applies. */

#nav-container,
#footer {
  flex: 0 0 auto;
}

main {
  flex: 1 0 auto;
}

/* Horizontal overflow is clipped here rather than at page level. `clip` and
   not `hidden`, because `hidden` would force overflow-y from `visible` to
   `auto` and give these their own vertical scrollbars. */
main,
#footer {
  overflow-x: clip;
}

body img {
  max-width: 100%;
  height: auto;
}

/* NO MODAL RULES HERE, DELIBERATELY.

   When a modal opens Bootstrap removes the page scrollbar and adds an equal
   padding-right to the body, the modal, and anything .fixed-top — so the
   content does not slide into the space the scrollbar leaves behind. The two
   halves cancel out and nothing appears to move.

   Each attempt to add a rule here has disabled one half and left the other
   running:
     - `body.modal-open { overflow-y: auto !important }` kept
       the scrollbar but not the padding: page shifted LEFT, gutter on the right
     - zeroing the padding kept the scrollbar removal but not the compensation:
       navbar widened to the RIGHT

   Bootstrap's handling is correct as long as the body is where overflow is
   set, which it is. Leave this alone. */


/* 3. NAVIGATION ============================================================ */

#nav-container {
  height: 6vw;
}

#nav-container nav {
  padding: 0;
}

#nav-container #logo {
  padding-top: 1vw;
  padding-bottom: 1vw;
  margin-left: 3vw;
}

/* IMPORTANT: the menu rules below hook `.navbar-collapse`, never `.collapse`.

   While the mobile menu is sliding open, Bootstrap removes the `collapse`
   class and adds `collapsing` instead. Anything scoped to `.collapse`
   therefore stops applying for the length of the animation, and every font
   size, colour and weight snaps in at the end — a visible jolt. Worse, the
   animation measures the menu's height in that unstyled state, so it expands
   to the wrong height and then jumps.

   `navbar-collapse` is present in all three states, so styles hooked to it
   hold steady throughout. */
#nav-container .navbar-collapse a {
  font-size: 1.25vw;
}

#nav-container .navbar-collapse #nav-list-bottom .active {
  border-bottom: 1.5px solid var(--primary);
}

#nav-container .navbar-collapse #nav-list-bottom .active a {
  color: var(--primary);
}

/* Desktop navigation ------------------------------------------------------ */
@media (min-width: 992px) {
  #nav-container img {
    height: 4vw;
  }

  #nav-container .navbar-collapse {
    padding: 1.5vw 3vw 1.5vw 0;
  }

  #nav-container .navbar-collapse a {
    font-size: 1.4vw;
  }

  #nav-container .navbar-collapse #nav-list-bottom {
    margin-left: auto;
  }

  #nav-container .navbar-collapse #nav-list-bottom .nav-link {
    margin-left: 0.5vw;
    margin-right: 0.5vw;
  }

  #nav-container .navbar-collapse #nav-list-bottom .portal-link {
    margin-left: 0.5vw;
    margin-right: 0;
  }
}


/* 4. FOOTER ================================================================ */

/* All four pages use <footer id="footer">. Selected by id rather than element
   so the rules stay put if the element ever changes again. */
/* Same CSS-applied maroon wash as the page banners, so the footer and the
   banner above it are the same colour rather than two Photoshop guesses that
   nearly agree. `footer-bg.jpg` is the plain photograph — IMG_2894, a
   calculator, tax forms and a pen — and these three layers do the tinting at
   paint time.

   Layers topmost first: --primary at 0.86 normal, flat --primary blended
   `color` so every pixel lands on hue 345, black at 0.60 normal to crush the
   highlights. Full derivation of the numbers is in contact.css.

   `cover` matters here: the footer is full-bleed at every window size, so the
   image has to fill it rather than tile. */
#footer {
  background-color: var(--primary);
  background-image:
    linear-gradient(rgba(111, 4, 31, 0.86), rgba(111, 4, 31, 0.86)),
    linear-gradient(#6f041f, #6f041f),
    linear-gradient(rgba(0, 0, 0, 0.60), rgba(0, 0, 0, 0.60)),
    url("../assets/footer-bg.jpg");
  background-blend-mode: normal, color, normal, normal;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: var(--white);
  font-size: 0.5em;
}

#footer p {
  margin: 0;
}

#footer a {
  color: var(--white);
}

#footer .footer-link {
  text-decoration: underline;
}

/* A Bootstrap .row carries -12px side margins, which are meant to be absorbed
   by padding on its parent. <footer> has none, so this row hung 12px off each
   side of the page, which is 24px of horizontal overflow on every page. Zeroing
   the margins fixes it at the source; the columns' own padding still keeps
   the content off the edges. */
#footer .addresses {
  margin-left: 0;
  margin-right: 0;
  padding-top: 2%;
  padding-bottom: 1vw;
}

#footer #qbBadge {
  padding-left: 12vw;
  padding-right: 12vw;
}

#footer #cpaLogos {
  padding-left: 7vw;
  padding-right: 7vw;
}

#footer #footerLinks {
  padding-top: 1vw;

}


/* Desktop footer ---------------------------------------------------------- */
@media (min-width: 992px) {
  #footer {
    font-size: 0.9vw;
  }

  #footer .addresses {
    padding-top: 1vw;
  }
}


/* 5. MODAL ================================================================= */

.modal-title {
  color: var(--primary);
}


/* 6. SMALL SCREENS (below 992px) ===========================================
   This range has its own sizes. Phones and tablets get real mobile values
   rather than scaled-down desktop ones.
   ========================================================================== */

@media (max-width: 991.98px) {

  /* The desktop 6vw nav height is 22px on a 375px phone, too short to contain
     the logo or the menu button.

     This container must be given an explicit height rather than `auto`. The
     <nav> inside it is position:fixed (Bootstrap's .fixed-top), so it adds no
     height to the page flow; with `auto` the container collapses to 0 and the
     first section of the page slides up underneath the opaque navbar.
     60px = 44px logo (200x100 source, capped by max-height) + 8px padding
     above and below. Keep this in sync with the logo sizing below. */
  #nav-container {
    height: 60px;
  }

  #nav-container #logo {
    margin-left: 1rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }

  #nav-container #logo img {
    max-height: 44px;
    width: auto;
  }

  /* The menu button sat flush against the right edge of the screen. Mirror
     the logo's 1rem inset so the bar is balanced on both sides. */
  #nav-container .navbar-toggler {
    margin-right: 1rem;
  }

  /* Readable menu text, and enough vertical padding that each item is a
     comfortable tap target (44px is the usual accessibility minimum). */
  #nav-container .navbar-collapse a {
    font-size: var(--text-min);
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
  }

  /* The current page is marked with an underline. That reads correctly in the
     horizontal desktop bar, but in the stacked mobile menu the border spans
     the full width and looks like a divider rule rather than a highlight.
     Mark the current page with colour and weight instead. */
  #nav-container .navbar-collapse #nav-list-bottom .active {
    border-bottom: none;
  }

  #nav-container .navbar-collapse #nav-list-bottom .active a {
    color: var(--primary);
    font-weight: 600;
  }

  /* The expanded menu needs a background — it overlays page content. */
  #nav-container .navbar-collapse {
    background-color: var(--bg);
    padding: 0.5rem 1rem 1rem;
  }

  /* Disclaimer and Peer Review Letter live in the footer on desktop. Small
     screens need the footer to stay compact, so they move into the menu here
     (the markup carries `d-lg-none`, so desktop never sees them). A rule and
     a smaller, lighter type size keep them clearly secondary to the four
     navigation links above. */
  #nav-container .nav-item-aux {
    margin-top: 0.25rem;
    border-top: 1px solid rgba(0, 0, 0, 0.12);
  }

  #nav-container .nav-item-aux + .nav-item-aux {
    margin-top: 0;
    border-top: none;
  }

  #nav-container .navbar-collapse .nav-item-aux a {
    font-size: 0.8125rem;
    padding-top: 0.35rem;
    padding-bottom: 0.35rem;
    opacity: 0.7;
  }

  /* The footer is secondary content — addresses, two links and three trade
     badges. It should read as a compact strip, not a second page. Everything
     below is deliberately tight. */
  #footer {
    font-size: 0.8125rem;
    padding-bottom: 0.75rem;
  }

  /* The desktop rules size the badges with 12vw/7vw side padding and let the
     image fill whatever is left. That only works while the columns are a third
     of the page; below 992px it produces badges several hundred pixels across.
     Cap each image instead, so the padding no longer controls the scale. */
  #footer #qbBadge,
  #footer #cpaLogos {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  #footer #qbBadge img,
  #footer #cpaLogos img {
    display: block;
    margin-left: auto;
    margin-right: auto;
  }

  /* The QuickBooks and NetClient badges are centred as a pair, with the gap
     set by the gap below rather than by the width of their columns. */
  #footer #badges {
    justify-content: center;
    flex-wrap: nowrap;
    gap: 1rem;
    margin-left: 0;
    margin-right: 0;
  }

  /* Padding zeroed so `gap` above is the whole story — mixing the two makes
     the spacing between badges hard to reason about. The negative margins a
     Bootstrap .row carries are zeroed for the same reason. */
  #footer #badges > [class*="col"] {
    flex: 0 0 auto;
    width: auto;
    padding-left: 0;
    padding-right: 0;
  }

  #footer .addresses {
    padding-top: 0.75rem;
    padding-bottom: 0.5rem;
    text-align: center;
  }

  /* Moved into the hamburger menu — see the .nav-item-aux rules above. */
  #footer #footerLinks {
    display: none;
  }
}


/* 6b. FOOTER ON TABLETS (768px to 991px) ===================================
   Three columns side by side, as on desktop — but not equal thirds. The two
   addresses need to sit next to each other without "Cumberland, MD 21502"
   wrapping, and at an equal third of 820px each address gets only ~112px
   against the ~135px that line needs. The badges need far less room than the
   text does, so the middle column takes the difference.
   ========================================================================== */

@media (min-width: 768px) and (max-width: 991.98px) {

  #footer #qbBadge {
    flex: 0 0 26%;
    width: 26%;
  }

  #footer #footerAddresses {
    flex: 0 0 46%;
    width: 46%;
  }

  #footer #cpaLogos {
    flex: 0 0 28%;
    width: 28%;
  }

  /* The QuickBooks badge is much taller than the other two columns, so centre
     them against it rather than letting them sit at the top. */
  #footer .addresses {
    align-items: center;
  }

  #footer #qbBadge,
  #footer #cpaLogos {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }

  #footer #quickbooks {
    max-width: 72px;
  }

  #footer #NCCS img {
    max-width: 58px;
  }

  #footer #cpaLogos img {
    max-width: 175px;
  }
}


/* 6c. FOOTER ON PHONES (below 768px) =======================================
   Two lines only: the addresses on top, then all three badges together on a
   single centred line.

   `order` lifts the addresses above the badges without touching the markup,
   which reads qbBadge, addresses, cpaLogos — the desktop order — in the HTML.
   Both badge columns are shrunk to their contents so the three images read as
   one centred group rather than sitting in fixed thirds.

   The badges are sized to be recognisable rather than readable. The
   QuickBooks badge is the expensive one: at 1042x1384 it is taller than it is
   wide, so every pixel of width costs 1.33 pixels of footer height.
   ========================================================================== */

@media (max-width: 767.98px) {

  /* Line 1. .col-12 sets `width: 100%`, so it already fills the line.

     10px is small even for a footer, but the addresses are the least likely
     thing anyone reads off a phone and each line saved comes straight off the
     footer's height. Raise this if it reads too small on a real handset. */
  #footer #footerAddresses {
    order: -1;
    margin-bottom: 0.75rem;
    font-size: 0.625rem;
  }

  #footer #footerAddresses p {
    line-height: 1.35;
  }

  /* Line 2. `width: auto` has to override .col-12's `width: 100%` as well as
     its flex basis, or these would each still claim a full line.

     The 0.5rem of padding on facing edges gives the NetClient-to-AICPA gap the
     same 1rem as the gap inside #badges, so all three images are evenly
     spaced. The nested .row in #cpaLogos has to be flattened for that to hold
     — its -12px margins would otherwise eat most of the gap. */
  #footer #qbBadge,
  #footer #cpaLogos {
    flex: 0 0 auto;
    width: auto;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    margin-bottom: 0;
  }

  #footer #cpaLogos .logos {
    margin-left: 0;
    margin-right: 0;
  }

  #footer #cpaLogos .logos > [class*="col"] {
    padding-left: 0;
    padding-right: 0;
  }

  #footer .addresses {
    justify-content: center;
    align-items: center;
  }

  /* Both of these are taller than they are wide (1.33:1 and 1.45:1), so they
     are the expensive badges — every pixel of width costs more than a pixel
     of footer height. Kept just large enough to be recognisable. */
  #footer #quickbooks {
    max-width: 46px;
  }

  #footer #NCCS img {
    max-width: 38px;
  }

  /* Wide rather than tall (800x165 after cropping, about 5:1), so this is the
     widest of the three badges while costing the least height. */
  #footer #cpaLogos img {
    max-width: 140px;
  }
}

/* 4K and up — corner radii. These were rem values (6px for cards, buttons and
   form fields), so they stayed 6px while everything else doubled, and the
   corners looked sharper than at 1080p. Radii are set in vw so they scale with
   the window. Below 2500px nothing changes. */
@media (min-width: 2500px) {
  :root {
    --bs-border-radius: 0.3125vw;
    --bs-border-radius-sm: 0.2083vw;
    --bs-border-radius-lg: 0.4167vw;
    --radius: 0.3125vw;
  }
}