/* Site chrome: the base elements and the parts every page shares (body,
   headings, links, buttons, the top navbar and the account button, the
   footer, the announcement banner, the back-to-top button, the skip link).
   It was an inline <style> block in templates/base.html until the
   2026-10-27 CSS audit and is linked from the same place now: after
   bootstrap_css, the shared sheets and every :root block the Site Theme
   tags render (the --site-* custom properties read below), and before each
   page's own extra_head, so the cascade is unchanged and the browser can
   cache it. */

body {
  background-color: var(--site-bg-color, #fff);
  color: var(--site-text-color, #1d1d1f);
}

/* Bootstrap's own .container caps its max-width at four fixed
   breakpoints (768/992/1200/1400px -> 720/960/1140/1320px), so the
   side margin jumps sharply larger right before each one snaps to
   the next tier (e.g. a wide 991px viewport is still held to the
   720px md cap) then drops back down once it crosses. Replacing
   those four stepped values with one continuously-scaling max-width
   removes that jump: the side gutter stays flat at ~30px (matching
   how 1200px -- the tightest "acceptable" width -- already looked)
   all the way up to 1380px, then grows smoothly past that, same
   1320px final cap Bootstrap's own xxl tier used. Left untouched
   below 768px (phones/small tablets) -- not where the jump was
   reported, and Bootstrap's native edge-to-edge behavior there is
   fine. Unscoped to .container itself (not a narrower selector) so
   the main content and footer -- both plain .container -- stay
   edge-aligned with each other at every width, same as before. (The
   navbar used to be one too; it now runs the full window width,
   see #siteNavbar > .container-fluid.) */
@media (min-width: 768px) {
  .container {
    max-width: min(1320px, 100% - 3.75rem);
  }
}

h1, h2, h3, h4, h5, h6 {
  color: var(--site-heading-color, #1d1d1f);
  font-family: var(--site-font-heading, inherit);
}

/* Heading sizes (Site Theme -> Typography -> h1_size..h6_size),
   --site-h{n}-size was already emitted by _site_typography_vars.html
   but nothing ever read it -- every heading rendered at whatever
   size Bootstrap's own default h1-h6 rules happened to set,
   regardless of what the admin form said. One rule per level (each
   needs its own variable); .h1-.h6 covered too since Bootstrap lets
   any element opt into a heading's visual size via those classes. */
h1, .h1 { font-size: var(--site-h1-size, 2.5rem); }
h2, .h2 { font-size: var(--site-h2-size, 2rem); }
h3, .h3 { font-size: var(--site-h3-size, 1.75rem); }
h4, .h4 { font-size: var(--site-h4-size, 1.5rem); }
h5, .h5 { font-size: var(--site-h5-size, 1.25rem); }
h6, .h6 { font-size: var(--site-h6-size, 1rem); }

/* Same dormant-variable bug the h1-h6 comment above describes, just
   for Bootstrap's .lead utility (the page_heading subtitle used it
   until 2026-10-18; it has .page-heading__subtitle now, below) --
   Site Theme -> Typography's
   "Lead text size" field (SiteTypography.lead_text_size) was emitted
   as --site-lead-text-size by _site_typography_vars.html but nothing
   ever read it, so every .lead rendered at Bootstrap's own hardcoded
   1.25rem regardless of what the admin form said. */
.lead { font-size: var(--site-lead-text-size, 1.25rem); }

/* Space around the standard title + subtitle
   (content/_page_heading.html): a 40px margin above and below from 768px
   (product owner, 2026-10-18; it was 50px earlier that day, and GitHub's
   112px / 64px from 768px before that), 24px below it (2026-11-05: the
   40px pushed the first card to 62% down a 667px phone). The main
   .container's own pt-3 (1rem) adds to the gap above, so the title sits
   56px under the bar from 768px, 40px under it on a phone. */
#main-content {
  --page-heading-space-top: 1.5rem;
  --page-heading-space-bottom: 1.5rem;
}

@media (min-width: 768px) {
  #main-content {
    --page-heading-space-top: 2.5rem;
    --page-heading-space-bottom: 2.5rem;
  }
}

/* Centred (product owner, 2026-10-18; it was left-aligned for part of
   that day). A back link or breadcrumb above it stays at the left
   edge, as does the content under it. */
.page-heading {
  margin-top: var(--page-heading-space-top);
  margin-bottom: var(--page-heading-space-bottom);
  text-align: center;
}

/* The Site Theme's h1 size (56px today) is the ceiling, not the size at
   every width: on a narrow screen the title shrinks with the window, but
   never below 2rem, so it still grows with the reader's text size and
   browser zoom (WCAG 1.4.4). It reaches the full size at 700px (8vw). */
.page-heading h1 {
  font-size: min(var(--site-h1-size, 2.5rem), max(2rem, 8vw));
}

/* A breadcrumb or back link above the title (the pre_heading block)
   takes that space above itself instead, so it stays beside the
   title it leads to. Flash messages (.alert) keep their place at the
   top. Without :has() the breadcrumb just stays at the top. */
#main-content > .container > :not(.alert):has(+ .page-heading) {
  margin-top: var(--page-heading-space-top);
}

#main-content > .container > :not(.alert) + .page-heading {
  margin-top: 0;
}

/* The subtitle: body-size text at the normal weight (Bootstrap's
   .lead, which it used before, is 1.25rem light), 16px under the
   title (it was 24px until 2026-11-05: with the title's own line
   leading that read as about 42px), and capped at 600px so a long one
   wraps instead of running the full width (centred under the title by
   the auto side margins). GitHub's Hero description again (product
   owner, 2026-10-18), measured at 16px on a 24px line at every width. */
.page-heading__subtitle {
  max-width: 37.5rem;
  margin-top: 1rem;
  margin-inline: auto;
  font-size: 1rem;
}

p {
  color: var(--site-paragraph-color, #1d1d1f);
}

a {
  color: var(--site-link-color, #0067b8);
}

a:hover {
  color: var(--site-link-hover-color, #005a9e);
}

/* .btn-primary/.btn-outline-* each define their own --bs-btn-bg/
   --bs-btn-hover-bg/--bs-btn-active-bg (Bootstrap's own per-component
   theming vars) as literal hardcoded hex values -- confirmed by
   reading the vendored bootstrap.min.css directly. Overriding the
   plain background-color/border-color/color properties instead (as
   this block used to) only ever touched the *base* (non-hover,
   non-active) state: Bootstrap's generic .btn:hover/:active rules
   read --bs-btn-hover-bg/--bs-btn-active-bg, not the literal
   background-color this element happens to have, so hovering or
   pressing a button silently reverted to Bootstrap's stock blue
   regardless of what SiteTheme said. Setting the --bs-btn-* custom
   properties themselves is what actually reaches every state. */
.btn-primary {
  --bs-btn-bg: var(--site-btn-primary-bg-color, #0067b8);
  --bs-btn-border-color: var(--site-btn-primary-bg-color, #0067b8);
  --bs-btn-color: var(--site-btn-primary-text-color, #fff);
  --bs-btn-hover-bg: var(--site-btn-primary-hover-bg-color, #005a9e);
  --bs-btn-hover-border-color: var(--site-btn-primary-hover-bg-color, #005a9e);
  --bs-btn-hover-color: var(--site-btn-primary-text-color, #fff);
  --bs-btn-active-bg: var(--site-btn-primary-active-bg-color, #004c85);
  --bs-btn-active-border-color: var(--site-btn-primary-active-bg-color, #004c85);
  --bs-btn-active-color: var(--site-btn-primary-text-color, #fff);
}

.btn-outline-primary,
.btn-outline-secondary {
  --bs-btn-bg: var(--site-btn-secondary-bg-color, #fff);
  --bs-btn-border-color: var(--site-btn-secondary-text-color, #0067b8);
  --bs-btn-color: var(--site-btn-secondary-text-color, #0067b8);
  --bs-btn-hover-bg: var(--site-btn-secondary-hover-bg-color, #0067b8);
  --bs-btn-hover-border-color: var(--site-btn-secondary-hover-bg-color, #0067b8);
  --bs-btn-hover-color: var(--site-btn-secondary-bg-color, #fff);
  /* Outline buttons render hover and active/selected identically in
     Bootstrap's own stock theme (fully filled, same shade for both)
     -- SiteTheme mirrors that with one shared field rather than a
     separate "active" color nobody would see differ from hover. */
  --bs-btn-active-bg: var(--site-btn-secondary-hover-bg-color, #0067b8);
  --bs-btn-active-border-color: var(--site-btn-secondary-hover-bg-color, #0067b8);
  --bs-btn-active-color: var(--site-btn-secondary-bg-color, #fff);
}
/* Bootstrap injects a background-image checkmark/exclamation icon into
   .is-invalid/.is-valid fields -- drop it (keep the red/green border
   and the separately-rendered error text) since it collides with
   overlay controls like the password show/hide toggle. */
.form-control.is-invalid,
.form-control.is-valid,
.was-validated .form-control:invalid,
.was-validated .form-control:valid {
  background-image: none;
  padding-right: 0.75rem;
}

/* Logo/nav-link vertical alignment: rather than relying on the
   inherited stretch/line-height/baseline behavior further up the
   tree (line-height tweaks and align-items on .navbar-nav were
   tried here and, per a screenshot, didn't actually fix it), both
   .navbar-brand and .nav-link are made flex containers with their
   own align-items: center below. That centers each one's content
   (the logo image; the link text + chevron) within whatever height
   that element's own box ends up being, regardless of what's
   stretching/sizing it from outside -- a much more direct fix than
   chasing the exact cause through several layers of nested flex
   defaults. */
.navbar-brand {
  display: flex;
  align-items: center;
}

#siteNavbar {
  /* The bar's height comes from this top/bottom padding around the
     ~32px logo row: 1rem here (the hamburger bar, ~65px), 1.25rem at
     xl+ (~73px, set in the xl+ layout block further down). Bootstrap's
     own .navbar variable, so its padding rule picks it up, and the
     xl+ flyout positioning below (which also reads it) stays flush
     with the bar's bottom edge. Matches the no-JS sticky-offset
     fallbacks in shared/css/list-controls.css and focus.css. */
  --bs-navbar-padding-y: 1rem;
  background-color: var(--site-navbar-bg-color, #fff);
  /* Thickness: SiteHeaderFooterStyles.navbar_border_width (Header &
     Footer page). Colour: SiteTheme.navbar_border_color (Colours
     page). Set the width to 0 to drop the border. */
  border-bottom: var(--site-navbar-border-width, 1px) solid var(--site-navbar-border-color, #dee2e6);
}

/* The bar runs the full window width (.container-fluid, see the
   markup), so this is the gap between the window's edges and the
   logo / account area: 16px, 24px from md, 32px from lg -- the same
   steps GitHub's header uses. */
#siteNavbar > .container-fluid {
  padding-left: 1rem;
  padding-right: 1rem;
}

@media (min-width: 768px) {
  #siteNavbar > .container-fluid {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

@media (min-width: 992px) {
  #siteNavbar > .container-fluid {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

/* Extra space between the main nav items, on top of each link's own
   padding. SiteNavigationStyles.nav_item_spacing (Site Theme ->
   Navigation); "0" (the default) is inert. At xl+ this is the
   horizontal gap between the row of links; in the collapsed menu it's
   the vertical gap between the stacked rows. */
#siteNavbar .navbar-nav {
  gap: var(--site-nav-item-spacing, 0);
}

/* Scoped to #siteNavbar (not just #mainNav) so #navAccountArea's
   logged-out Sign in/Join free links -- outside #mainNav's own
   collapse box -- get the same treatment as the main nav-links. */
#siteNavbar .nav-link {
  display: flex;
  align-items: center;
  color: var(--site-navbar-link-color, #1d1d1f);
  /* Admin-editable, see SiteNavigationStyles.nav_font_weight (Site
     Theme -> Navigation). Fallback matches that field's own default. */
  font-weight: var(--site-nav-font-weight, 500);
  /* #mainNav's dropdown-toggle items are real <button> elements (see
     markup) -- background:none + border:0 strip default browser
     button chrome so they render identically to the plain <a>
     nav-links (Pricing, Sign in) next to them. No border on hover or
     for the current section either (GitHub-style, product owner
     request 2026-10-18): hover changes the text colour and the
     current section underlines its label, both further down. */
  background: none;
  border: 0;
  /* Bootstrap's own nav-link padding is numerically equal on every
     side (0.5rem), but the label's normal line-height adds extra
     space above/below the glyph that padding alone doesn't, so the
     keyboard focus ring (drawn around the padding box) would sit
     noticeably tighter top/bottom than left/right. line-height: 1
     collapses that phantom space so all four sides read as the same
     width; explicit equal padding replaces Bootstrap's separate
     (and coincidentally-equal) x/y padding variables so this stays
     correct even if either one changes later. */
  padding: 0.5rem;
  line-height: 1;
  transition: color 0.15s ease;
}

#siteNavbar .nav-link:focus-visible {
  color: var(--site-navbar-link-hover-color, #0067b8);
}

/* Admin-editable, see SiteNavigationStyles.nav_font_size (Site Theme
   -> Navigation). Fallback matches that field's own default, so this
   changes nothing until an admin edits it. The nav CTA / account
   button below deliberately track the same value. */
#siteNavbar .nav-link,
#siteNavbar .dropdown-item {
  font-size: var(--site-nav-font-size, 0.875rem);
}

/* Dropdown link text -- the main nav's flyout menus, the mobile
   accordion menu, and the account menu alike. Admin-editable, see
   SiteNavigationStyles.dropdown_item_text_color (Site Theme ->
   Navigation admin page). Bootstrap's own default dropdown-item
   color (var(--bs-dropdown-link-color), itself var(--bs-body-color))
   is #212529 -- the fallback here matches it exactly, so this rule
   changes nothing until an admin actually edits the field. */
#siteNavbar .dropdown-item {
  color: var(--site-nav-dropdown-item-text-color, #212529);
}

/* No default Bootstrap caret (solid CSS triangle) at all -- an
   explicit bi-chevron-down icon in the markup stands in for it
   instead, shown at every width: the menus open on click, Enter and
   Space everywhere (and also on mouse hover at xl+, see
   shared/js/nav_hover_menus.js), so the affordance needs to be
   visible on desktop too, not just on mobile. */
#siteNavbar .dropdown-toggle::after {
  display: none;
}

#siteNavbar .dropdown-toggle .bi-chevron-down {
  font-size: 0.75em;
  margin-left: 0.4rem;
  transition: transform 0.2s ease;
}

#siteNavbar .dropdown-toggle[aria-expanded="true"] .bi-chevron-down {
  transform: rotate(180deg);
}

@media (prefers-reduced-motion: reduce) {
  #siteNavbar .nav-link,
  #siteNavbar .dropdown-toggle .bi-chevron-down {
    transition: none;
  }
}

/* Bootstrap's default navbar-toggler is sized/bordered for sitting
   alone against the brand logo -- it reads oversized and boxy at
   this navbar's scale. Shrunk (smaller font-size, which also scales
   the icon since it's sized in em) and its resting border dropped.
   It sits at the far left, ahead of the brand logo (first child of
   the bar's .container-fluid): the negative left margin cancels its
   own padding so the icon lines up with the bar's padding edge, and
   the right margin holds it off the logo. */
#siteNavbar .navbar-toggler {
  padding: 0.1875rem 0.5rem;
  font-size: 1rem;
  border: 0;
  margin-left: -0.5rem;
  margin-right: 0.25rem;
}

/* Bootstrap rings the menu button on any focus, so a dark box stayed
   around it after a tap or click (product owner: no box around nav
   items). Keyboard focus keeps the site's own ring
   (shared/css/focus.css, .navbar-toggler:focus-visible). */
#siteNavbar .navbar-toggler:focus:not(:focus-visible) {
  box-shadow: none;
}

/* Bootstrap's default toggler icon is a 3-line hamburger with no
   open/close state change. Swapped for a 2-line icon that becomes an
   X (via aria-expanded, which Bootstrap already flips on the button
   when #mainNav's collapse opens/closes) so the icon itself signals
   "tap to close" once the menu is open. */
#siteNavbar .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3e%3cpath stroke='%231d1d1f' stroke-width='2' stroke-linecap='round' d='M4 7h16M4 17h16'/%3e%3c/svg%3e");
}

#siteNavbar .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3e%3cpath stroke='%231d1d1f' stroke-width='2' stroke-linecap='round' d='M6 6l12 12M18 6L6 18'/%3e%3c/svg%3e");
}

.navbar-brand-logo {
  height: 22.4px;
  width: auto;
}

/* Hover: the label takes the navbar's hover colour
   (SiteTheme.navbar_link_hover_color, Colours page) -- no border, no
   fill (GitHub-style). A pointer cue only, so colour alone is fine
   here (it marks nothing a keyboard or screen-reader user misses);
   keyboard focus keeps its own two-tone ring further down. */
#siteNavbar .nav-link:hover {
  background-color: transparent;
  color: var(--site-navbar-link-hover-color, #0067b8);
}

/* The section the visitor is currently on (.active + aria-current,
   set server-side in the markup below), in the stacked hamburger
   menu below xl: its label in bold, the same cue as the current page
   inside a menu (#siteNavbar .dropdown-item.active below) -- a
   difference in weight, not just colour (WCAG 1.4.1). `bolder` is
   relative to the link's own weight (SiteNavigationStyles.
   nav_font_weight), so it still stands out if that's already heavy.
   At xl+ the 4px bar below marks it instead, and the label keeps its
   weight there so the row of links never shifts. */
@media (max-width: 1199.98px) {
  #siteNavbar .nav-link.active .nav-link__label {
    font-weight: bolder;
  }
}

/* xl+ (the links in one row): a 4px bar on the navbar's bottom edge
   under the current section's label (Clover-style, product owner
   request 2026-10-18), and the same bar grows in, left to right,
   under an item that's hovered, focused from the keyboard, or has
   its menu open -- the text colour change and the focus ring stay,
   so it's never the only cue. The stacked hamburger menu below xl
   marks the current section in bold instead (above).

   Drawn on the label's own ::after, so it spans the label's text and
   not the chevron beside it (product owner request). The <li>, link
   and label all stretch to the full row height (the label still
   centres its text), which puts the label's bottom a fixed 0.5rem
   (the link's padding) above the row's: `bottom` then reaches past
   that and the navbar's own padding to land it exactly on the
   navbar's inner bottom edge, above the 1px border. A border, not a
   background, so it survives Windows high-contrast (forced-colors)
   mode, which blanks backgrounds. Its colour is the navbar hover
   colour (SiteTheme, Colours page; #0067b8 is 5.6:1 on white, past
   the 3:1 WCAG 1.4.11 asks of a current-state cue). The grow is
   skipped for anyone who asks for reduced motion. */
@media (min-width: 1200px) {
  #mainNav,
  #mainNav .navbar-nav {
    align-self: stretch;
  }

  #mainNav .navbar-nav > .nav-item {
    display: flex;
  }

  #mainNav .nav-link__label {
    position: relative;
    align-self: stretch;
    display: flex;
    align-items: center;
  }

  #mainNav .nav-link__label::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(-1 * (var(--bs-navbar-padding-y, 0.5rem) + 0.5rem));
    height: 0;
    border-bottom: 4px solid var(--site-navbar-link-hover-color, #0067b8);
    transform: scaleX(0);
    transform-origin: left;
  }

  #mainNav .nav-link.active .nav-link__label::after,
  #mainNav .nav-link:hover .nav-link__label::after,
  html:not(.using-mouse) #mainNav .nav-link:focus-visible .nav-link__label::after,
  #mainNav .dropdown-toggle[aria-expanded="true"] .nav-link__label::after {
    transform: scaleX(1);
  }
}

@media (min-width: 1200px) and (prefers-reduced-motion: no-preference) {
  #mainNav .nav-link__label::after {
    transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
  }
}

/* The site-wide two-tone focus ring (static/shared/css/focus.css),
   rounded to these links' shape -- shows for genuine keyboard Tab
   navigation (WCAG 2.4.7). It used to be a soft rgba(0, 103, 184, .3)
   glow, about 1.5:1 against the navbar -- under WCAG 1.4.11's 3:1 for
   a focus indicator. Also covers .nav-account-btn (the logged-in
   "My account" trigger) -- same dropdown-toggle-button shape as
   #mainNav's own toggles, so it wants the same ring. */
#siteNavbar .nav-link:focus-visible,
#siteNavbar .nav-account-btn:focus-visible,
#siteNavbar .nav-notifications:focus-visible {
  outline: 2px solid var(--site-focus-ring-color, #0067b8);
  outline-offset: 2px;
  border-radius: 6px;
  box-shadow: 0 0 0 2px #fff;
}

/* The account trigger (a disc, or from md up a disc, the name and a
   chevron) and the bell keep a ring of their own shape: a pill, which
   is a circle on a square. */
#siteNavbar .nav-account-btn:focus-visible,
#siteNavbar .nav-notifications:focus-visible {
  border-radius: 980px;
}

/* :focus-visible alone isn't enough to keep this ring keyboard-only:
   these dropdown-toggle buttons open a popup menu, and several
   browsers' own :focus-visible heuristic treats "click opened a
   popup" as reason enough to show a focus indicator anyway, even
   though the interaction was a mouse click. html.using-mouse (see
   the modality-tracking script near the closing </body>) is the
   actual source of truth for "was the last interaction a pointer,"
   and forces the ring off whenever it applies -- regardless of what
   the browser's own heuristic decided. Covers .nav-account-btn too,
   for the same reason the rule above does. */
html.using-mouse #siteNavbar .nav-link:focus-visible,
html.using-mouse #siteNavbar .nav-account-btn:focus-visible,
html.using-mouse #siteNavbar .nav-notifications:focus-visible {
  outline: none;
  box-shadow: none;
}

/* Submenu panel: no border, no drop shadow, and no rounded corners
   -- a flat rectangle flush against the page beneath (Bootstrap's
   default --bs-dropdown-border-radius is 0.375rem). #mainNav's own
   flyout menus only -- the account menu moved to a slide-out tray,
   #navAccountOffcanvas, below. */
#siteNavbar .dropdown-menu {
  border: none;
  border-radius: 0;
  box-shadow: none;
}

/* Bootstrap's default .dropdown-item:hover/:focus fills a gray
   background (--bs-dropdown-link-hover-bg) -- dropped here to match
   the rest of #siteNavbar's hover style above (color change only, no
   background). This is the baseline for the mobile inline accordion;
   the lg+ media query below reintroduces a full-row highlight for
   #mainNav's own flyout menus specifically (see that block for why).
   #navAccountOffcanvas keeps its own copy of this rule (below,
   unscoped from #siteNavbar since that tray isn't nested inside it). */
#siteNavbar .dropdown-item:hover,
#siteNavbar .dropdown-item:focus {
  background-color: transparent;
}

/* The current-page row inside an open flyout/accordion menu.
   Bootstrap's own .dropdown-item.active fills a solid, saturated
   blue with white text -- but #siteNavbar .dropdown-item's own
   text-color rule above (more specific, via the #siteNavbar id)
   still wins the cascade for *color* while Bootstrap's blue still
   wins for *background*, leaving near-black text on a solid blue
   fill: a WCAG 1.4.3 contrast failure, and much louder than every
   other state this nav uses (hover above is a plain gray fill or
   color change, never a saturated color). So no fill at all: the
   row keeps the panel's own colour and its normal dark text, and its
   label is bold (product owner, 2026-10-18 -- a tint plus a left bar
   used to mark it and read as a stray border; an accent underline
   came next and was turned down). A difference in weight, not just
   colour, so it holds up under WCAG 1.4.1; aria-current="page" in the
   markup tells screen readers. `bolder` is relative to the row's own
   weight, so it still stands out if that's already heavy. On
   .nav-dropdown__label, so a "(5)" count keeps its normal weight. */
#siteNavbar .dropdown-item.active {
  background-color: transparent;
}

#siteNavbar .dropdown-item.active .nav-dropdown__label {
  font-weight: bolder;
}

/* Every #mainNav dropdown-toggle has data-bs-display="static" (see
   the markup) -- Bootstrap never hands these off to Popper.js, so
   positioning is entirely our own CSS from here down, at every
   width, rather than a floating auto-placed overlay. That overlay
   was the actual source of the "jarring" mobile dropdowns/the
   My Account menu getting clipped off the left edge: Popper's
   positioning inside a narrow, already-scrolled collapsed navbar
   doesn't have much room to work with, especially for a
   dropdown-menu-end menu near the right edge of a narrow viewport
   (the account menu sidestepped this altogether by becoming a
   slide-out tray instead -- #navAccountOffcanvas, below).

   At xl+ (the navbar's expand breakpoint), this replaces Popper with
   a plain "directly below, left-aligned" placement for #mainNav's own
   dropdowns -- these are short, simple menus with no real
   viewport-collision risk in this layout, so Popper's flip/shift
   logic was never doing much useful work here anyway. */
@media (min-width: 1200px) {
  #mainNav .dropdown-menu {
    position: absolute;
    /* #mainNav's <li> (this menu's positioning parent) spans the
       bar's content row (stretched, see the xl+ current-section bar
       rules), inside #siteNavbar's own top+bottom padding
       (--bs-navbar-padding-y) -- top:100% alone lands at the
       bottom of that row, one padding-y short of the navbar's
       actual bottom edge (where the page's next content, e.g. the
       announcement bar, actually starts). The extra padding-y
       reaches that true edge instead, so this panel's top lines up
       with the top of whatever sits directly below the navbar. The
       trailing +1px accounts for #siteNavbar's own border-bottom
       (see that rule above), so the panel starts just below the
       border rather than underneath it. */
    top: calc(100% + var(--bs-navbar-padding-y, 0.5rem) + 1px);
    left: 0;
    min-width: 16rem;
    padding: 0;
    /* Bootstrap's default .dropdown-menu carries a 2px margin-top
       (--bs-dropdown-spacer) -- left over here even without Popper
       positioning, and enough to show a sliver of whatever's behind
       the nav between the toggle and this panel's own #f2f2f2
       background below. Zeroed so the two sit flush. */
    margin-top: 0;
    /* Flyout surface -- matched to the open toggle's own background
       just below, so the button and the panel it opens read as one
       continuous surface with no visible seam. Admin-editable, see
       SiteNavigationStyles.dropdown_background_color (Site Theme ->
       Navigation admin page). */
    background-color: var(--site-nav-dropdown-bg-color, #f2f2f2);
  }

  /* The open toggle gets the same color as the panel it opens (see
     above), so the two read as a single connected surface rather
     than a white button sitting on top of a colored menu. */
  #mainNav .dropdown-toggle[aria-expanded="true"] {
    background-color: var(--site-nav-dropdown-bg-color, #f2f2f2);
  }

  /* The background-color above only fills the toggle's own nav-link
     padding box, leaving #siteNavbar's own top/bottom padding
     (--bs-navbar-padding-y) visible as white above and below it --
     the highlight doesn't reach the navbar's actual top edge, or
     (now that the panel starts at the navbar's true bottom edge
     above) its actual bottom edge either. A ::before extends the
     highlight both directions to close both gaps: positioned
     absolute against the parent <li> (already position:relative,
     for the dropdown-menu itself), sized past the <li>'s own box by
     the navbar's padding-y on top and bottom alike.

     z-index: -1 is load-bearing, not decorative: #siteNavbar is
     sticky-top (position: sticky), which makes it a stacking
     context, and within that context an auto-z-index positioned
     box (this pseudo's default) paints *after* the toggle's own
     in-flow text/icon regardless of source order -- without this,
     the now-larger highlight box paints over the "Solutions" label
     and blanks it out. A negative z-index moves it back behind
     that in-flow content, same layer as before the extension. */
  #mainNav .dropdown-toggle[aria-expanded="true"]::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: calc(var(--bs-navbar-padding-y, 0.5rem) * -1);
    bottom: calc(var(--bs-navbar-padding-y, 0.5rem) * -1);
    left: 0;
    right: 0;
    background-color: var(--site-nav-dropdown-bg-color, #f2f2f2);
  }

  /* Taller rows than Bootstrap's cramped default (0.25rem 1rem) --
     a flyout menu sitting on its own below the nav link has room to
     be a comfortable click target, not a dense list. 0.625rem
     top/bottom (rather than a rounder number) is deliberate: paired
     with this row's 21px text line-height, it lands the row at
     exactly 41px tall, matching .announcement-banner's own height
     (0.625rem padding + its own line-height) so the two rows read
     as the same size when the panel sits right above the banner. */
  #mainNav .dropdown-item {
    padding: 0.625rem 1.5rem;
  }

  /* The divider (the Plan menu's, between My work and the library
     links) sits flush against the rows on either side, so a hovered
     row's fill meets the line instead of stopping a strip of panel
     short of it (product owner, 2026-10-18). Bootstrap's 0.5rem
     margin stays in the hamburger menu below xl, which has no hover
     fill and tighter rows. */
  #mainNav .dropdown-divider {
    margin: 0;
  }

  /* Reintroduces a full-row hover/focus highlight for #mainNav's own
     flyout menus (overridden back to transparent above for the
     mobile accordion and the account menu) -- a flat fill,
     admin-editable independently of the panel's own background
     above, see SiteNavigationStyles.dropdown_item_hover_background_color
     (Site Theme -> Navigation admin page). */
  #mainNav .dropdown-item:hover,
  #mainNav .dropdown-item:focus {
    background-color: var(--site-nav-dropdown-item-hover-bg-color, #d9d9d9);
  }
}

/* Nav-item placement: the bar is a three-column grid at every width.
   The two side columns share the leftover space equally, so whatever
   sits in the middle column is centred on the window whatever the
   sides hold (the avatar signed in, Sign in + Get started signed
   out), but they never shrink below their own content: if a side
   ever outgrows its share, the middle shifts off centre rather than
   overlapping it. The grid only places the items; DOM (and so focus)
   order is unchanged.

   Below xl (the navbar's expand breakpoint): menu toggler | logo |
   account area, with the open menu (#mainNav) as a full-width second
   row (the max-width:1199.98px block further down).

   xl+ (1200px+): the toggler is hidden, so the columns are logo |
   nav links | account area -- logo at the window's left edge, the
   avatar at its right, 32px in from each (the full-width
   .container-fluid's padding), and Explore / Assess / Plan centred
   between them (product owner request, 2026-10-19; from 2026-10-18
   the links followed the logo at the left). */
#siteNavbar > .container-fluid {
  display: grid;
  grid-template-columns: minmax(min-content, 1fr) minmax(0, max-content) minmax(min-content, 1fr);
  align-items: center;
}

#siteNavbar #navAccountArea {
  justify-content: flex-end;
}

@media (min-width: 1200px) {
  #siteNavbar {
    --bs-navbar-padding-y: 1.25rem;
  }

  /* Keeps the links clear of the logo and the account area when the
     window is at its narrowest xl width. */
  #siteNavbar > .container-fluid {
    column-gap: 1.25rem;
  }

  /* Hugs the logo, so only the wordmark (not the whole left column)
     is the home link. */
  #siteNavbar .navbar-brand {
    justify-self: start;
    margin-right: 0;
  }

  #siteNavbar #mainNav {
    justify-content: center;
  }

  #siteNavbar #navAccountArea {
    justify-self: end;
  }

  /* Frosted sticky bar. --site-navbar-bg-opacity comes from
     SiteTheme.navbar_background_opacity (Colours page, 60-100%): below
     100 the fill goes translucent and the blur turns page content
     passing underneath into a soft frost. At 100% the color-mix is
     fully opaque and the blur paints nothing, so this is inert until
     an admin dials it down. Wide screens only -- below xl the bar can
     expand into a full hamburger menu, which must stay solid, so it
     keeps the opaque #siteNavbar rule further up. */
  #siteNavbar {
    background-color: color-mix(
      in srgb,
      var(--site-navbar-bg-color, #fff) var(--site-navbar-bg-opacity, 100%),
      transparent
    );
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
  }
}

/* Below xl (the navbar's expand breakpoint), dropdowns expand
   *inline* within the stacked mobile menu (an accordion, in effect)
   instead of floating on top of it -- no border/shadow/background of
   its own since it's not a separate floating panel anymore, and it's
   indented to read as nested under its toggle. */
@media (max-width: 1199.98px) {
  #mainNav .dropdown-menu {
    position: static;
    border: none;
    box-shadow: none;
    background-color: transparent;
    padding-left: 1rem;
  }

  /* Below xl the bar's grid (see "Nav-item placement" above) is menu
     toggler | logo | account area, with the open menu (#mainNav) as
     a full-width second row. The equal side columns centre the logo;
     on a phone it shifts a little left of centre instead, and on the
     narrowest screens its column (and the image with it) narrows. A
     wrapping flex row used to drop the account buttons onto a line of
     their own or squeeze them, wrapping the sign-up button over three
     lines and running "Sign in" across the logo (WCAG 1.4.10). */
  #mainNav {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  /* Stretched across its column (the grid default), icon at the
     left: the whole left side of the bar is the menu button's tap
     target, as it was in the old flex row. */
  #siteNavbar .navbar-toggler {
    text-align: left;
  }

  #siteNavbar #navAccountArea > * {
    flex-shrink: 0;
    white-space: nowrap;
  }

  /* Keeps the wordmark off the sign-up button when the phone's bar is
     full; the logo narrows to make the room. */
  #siteNavbar #navAccountArea {
    margin-inline-start: 0.5rem;
  }

  #siteNavbar .navbar-brand {
    margin-right: 0;
    min-width: 0;
  }

  /* Lets the wordmark narrow with its column; object-fit keeps its
     proportions, since its height is fixed (the .navbar-brand-logo
     rule further up, or the admin's own display height inline). */
  #siteNavbar .navbar-brand-logo {
    min-width: 0;
    max-width: 100%;
    object-fit: contain;
  }

  /* Slightly smaller account avatar on mobile, to match the tighter
     row (still well inside its 63px height). */
  #siteNavbar .nav-account-btn__avatar {
    width: 2.25rem;
    height: 2.25rem;
    font-size: 0.875rem;
  }

  /* The bell beside it, the same size. */
  #siteNavbar .nav-notifications {
    width: 2.25rem;
    height: 2.25rem;
  }
}

/* Join free: an explicit 980px radius (rather than Bootstrap's
   .rounded-pill, which is 50rem/800px) guarantees a full pill
   regardless of the button's height. font-size tracks the nav-link
   size (SiteNavigationStyles.nav_font_size) so the pill stays in
   proportion with the links beside it. */
#siteNavbar .nav-cta-btn {
  border-radius: 980px;
  font-size: var(--site-nav-font-size, 0.875rem);
}

/* Account trigger -- used once logged in, when the menu has too many
   items to inline as separate links the way logged-out's Sign in/Join
   free pair is. A circular avatar disc (see
   .nav-account-btn__avatar) rather than an icon + label. */
.nav-account-btn {
  display: flex;
  align-items: center;
  border: none;
  background: none;
  padding: 0;
  /* The bigger disc (below) would otherwise be the row's tallest item
     and make the whole navbar about 6px taller: these 3.2px a side come
     back out of the navbar's own padding, so the bar keeps its height
     (74.6px, 63px on a phone; measured) while the button still draws,
     and takes clicks, at its full size. */
  margin-block: -0.2rem;
}

/* The avatar itself: the member's profile photo as an <img> inside
   this span when they have one (overflow:hidden + the 50% radius clip
   it to the circle), else their initials ("JD", content.people.initials;
   one letter without both names). 2.5rem, the account tray's own disc
   (2026-10-21; it was 1.9rem), which the navbar's height already had
   room for. The type is sized so two wide letters ("MW") clear the
   edge. */
.nav-account-btn__avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--site-navbar-link-hover-color, #0067b8);
  color: #fff;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1;
  text-transform: uppercase;
  overflow: hidden;
  transition: box-shadow 0.15s ease, filter 0.15s ease;
}

.nav-account-btn__avatar > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The member's name and a chevron after the disc, from md up (below,
   the bar has room for the disc only; the tray shows the name). A long
   name stops at 12rem with an ellipsis; the button's aria-label and
   the tray carry it in full. */
.nav-account-btn__name,
.nav-account-btn__chevron {
  display: none;
}

@media (min-width: 768px) {
  .nav-account-btn {
    gap: 0.5rem;
    color: var(--site-navbar-link-color, #1d1d1f);
  }

  .nav-account-btn__name {
    display: block;
    max-width: 12rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--site-nav-font-size, 0.875rem);
    font-weight: var(--site-nav-font-weight, 500);
  }

  .nav-account-btn__chevron {
    display: block;
    font-size: 0.875rem;
    transition: transform 0.15s ease;
  }

  .nav-account-btn:hover .nav-account-btn__name,
  .nav-account-btn:hover .nav-account-btn__chevron {
    color: var(--site-navbar-link-hover-color, #0067b8);
  }

  .nav-account-btn[aria-expanded="true"] .nav-account-btn__chevron {
    transform: rotate(180deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .nav-account-btn__chevron {
    transition: none;
  }
}

/* The bell, left of the account button (templates/_nav_notifications.html):
   a 2.5rem round target like the disc, in the navbar's link colour, with
   the unread count as a badge on its corner. The badge's red (#b02a37,
   about 6:1 with white) is the one the organization pages use for
   danger text; its ring in the navbar's own colour keeps it apart from
   the bell. The same negative margin as the account button keeps the
   bar's height. */
.nav-notifications {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  margin-block: -0.2rem;
  border-radius: 50%;
  color: var(--site-navbar-link-color, #1d1d1f);
  font-size: 1.25rem;
  text-decoration: none;
}

.nav-notifications:hover {
  color: var(--site-navbar-link-hover-color, #0067b8);
  background-color: rgba(0, 0, 0, 0.05);
}

.nav-notifications__count {
  position: absolute;
  top: 0.125rem;
  right: 0;
  min-width: 1.125rem;
  height: 1.125rem;
  padding: 0 0.3rem;
  border-radius: 980px;
  background-color: #b02a37;
  color: #fff;
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1.125rem;
  text-align: center;
  box-shadow: 0 0 0 2px var(--site-navbar-bg-color, #fff);
}

@media (forced-colors: active) {
  .nav-notifications__count {
    border: 1px solid CanvasText;
  }
}

/* Hover / open: a soft ring in the navbar's own accent, plus a
   slight darken so the disc still responds even against a tinted
   navbar where the ring has little contrast. */
.nav-account-btn:hover .nav-account-btn__avatar,
.nav-account-btn[aria-expanded="true"] .nav-account-btn__avatar {
  box-shadow: 0 0 0 3px rgba(0, 103, 184, 0.25);
  filter: brightness(0.94);
}

/* Account tray (signed in; signed out it's the inline Sign in / Get
   started pair instead): a right-hand slide-out tray
   (#navAccountOffcanvas, markup just after </nav> -- see that markup's
   own comment for why it isn't a dropdown, and why it isn't nested
   inside #siteNavbar). Its content is templates/_account_menu.html
   (2026-10-21): who is signed in, six headed groups of links, then
   Sign out. Groups replaced the old indented parent/child rows. */
.account-menu__who {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #dee2e6;
}

/* The navbar avatar's disc, larger: the photo, else the initial. */
.account-menu__avatar {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--site-navbar-link-hover-color, #0067b8);
  color: #fff;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1;
  overflow: hidden;
}

.account-menu__avatar > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.account-menu__who-text {
  min-width: 0;
}

.account-menu__name {
  margin: 0;
  font-weight: 600;
  color: #16233c;
}

.account-menu__email {
  margin: 0;
  font-size: 0.875rem;
  color: #5c6672;
  overflow-wrap: anywhere;
}

/* Tightened 2026-10-22 (product owner): a row was 37.5px (the 17px icon
   at the body's 1.5 line height, plus 12px of padding) and a group began
   1.25rem below the last. Now ~30px a row, 0.875rem between groups, and
   the labels a notch (1px) under the navbar's own size. */
.account-menu__heading {
  margin: 0.875rem 0 0.125rem;
  padding: 0 0.75rem;
  font-size: 0.75rem;
  font-weight: 700;
  color: #5c6672;
}

.account-menu__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* A link, and the Sign out button, which looks the same. No hover fill
   (the navbar's own hover is a colour change only); the label
   underlines instead, the text only, not the icon before it. The size
   still follows the admin's navigation font size, 1px smaller. */
.account-menu__link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  padding: 0.3125rem 0.75rem;
  border: 0;
  border-radius: 0.5rem;
  background: none;
  font-size: calc(var(--site-nav-font-size, 0.875rem) - 0.0625rem);
  line-height: 1.4;
  color: var(--site-nav-dropdown-item-text-color, #212529);
  text-align: left;
  text-decoration: none;
}

.account-menu__link .bi {
  flex: 0 0 auto;
  width: 1.25rem;
  font-size: 1rem;
  line-height: 1;
  text-align: center;
}

.account-menu__link:hover .account-menu__label,
.account-menu__link:focus-visible .account-menu__label {
  text-decoration: underline;
}

/* The page being shown: a soft rounded pill in pale blue, the label bold
   and blue, and a short rounded mark in the pill's left margin, so it
   isn't marked by colour alone (the weight and the mark are shape cues).
   The mark is a pseudo-element, not a box-shadow, so it sits inside the
   pill's curve instead of bending around its corners. */
.account-menu__link[aria-current="page"] {
  background-color: #e8f1fb;
  color: #0067b8;
  font-weight: 600;
}

.account-menu__link[aria-current="page"]::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0.25rem;
  width: 0.1875rem;
  height: 1.125rem;
  border-radius: 999px;
  background-color: #0067b8;
  transform: translateY(-50%);
}

/* Forced colors drop authored backgrounds and shadows: keep the mark by
   painting it in the system highlight colour. */
@media (forced-colors: active) {
  .account-menu__link[aria-current="page"]::before {
    background-color: Highlight;
  }
}

.account-menu__signout {
  margin-top: 0.875rem;
  padding-top: 0.5rem;
  border-top: 1px solid #dee2e6;
}

/* Site-wide promotional strip (content/templatetags/content_tags.py's
   announcement_banner tag, admin/content/announcementbanner/) styled
   after microsoft.com/en-ca's own announcement__banner component --
   a thin, full-width bar with a short centered message and an
   optional trailing text link, sitting directly under the main nav
   and above the hero. background-color/color are both set inline on
   .announcement-banner itself (not on the text/link/close elements
   individually) per the admin's own color fields -- the message
   text, link, and close icon below all just inherit color from
   there, so all three always stay in sync automatically with a
   single admin field. underline+bold is what visually sets the link
   apart, not a different color. */
.announcement-banner {
  position: relative;
  padding: 0.625rem 0;
  text-align: center;
}

/* Padding on the container (not the outer bar, which would shift the
   button off the actual edge) reserves room for
   .announcement-banner__close below, so the centered message never
   runs under it on narrow screens. Applied to *both* sides, not just
   the right one the close button actually sits on -- padding-right
   alone was reserving space asymmetrically, which shifted the
   text-align:center message noticeably left of the bar's true
   center instead of just narrowing its available width evenly. */
.announcement-banner .container {
  padding-left: 2.5rem;
  padding-right: 2.5rem;
}

.announcement-banner__text {
  /* Without this, the global "p { color: ... }" typography rule
     above directly matches this <p> and wins over the color
     inherited from .announcement-banner's inline style, since a
     same-element rule always beats an inherited value regardless of
     the ancestor's specificity. */
  color: inherit;
  font-size: 0.875rem;
}

/* Same fix, same reasoning, as .announcement-banner__text just above
   -- #cookieConsentBanner's <p> was hitting the exact same bug (the
   global "p { color }" rule winning over the dark banner's own
   text-white, WCAG audit found this rendering at ~1.09:1 contrast --
   effectively invisible body text against the dark background). */
.cookie-consent-banner__text {
  color: inherit;
}

.announcement-banner__link {
  color: inherit;
  font-weight: 600;
  text-decoration: underline;
  /* Default underline placement sits right against the descenders --
     text-underline-offset adds breathing room between the text and
     the line without needing a border-bottom hack. */
  text-underline-offset: 0.35em;
  margin-left: 0.375rem;
}

.announcement-banner__link:hover,
.announcement-banner__link:focus-visible {
  /* Darkens whatever the current (inherited) color actually is,
     since the exact hex is admin-chosen and unknown ahead of time. */
  color: color-mix(in srgb, currentColor, black 20%);
}

/* Pinned to the far right of the bar itself (not just the centered
   container), matching where a dismiss control sits on most
   real-world announcement bars. color: inherit so the icon matches
   the message text's color the same way the link does above. */
.announcement-banner__close {
  position: absolute;
  top: 50%;
  right: 1rem;
  transform: translateY(-50%);
  background: none;
  border: none;
  padding: 0.25rem;
  line-height: 1;
  color: inherit;
  cursor: pointer;
  opacity: 0.7;
  /* Bootstrap Icons is a single-weight font -- browsers synthesize
     a heavier stroke for bold since there's no real bold variant to
     switch to. */
  font-weight: 700;
}

.announcement-banner__close:hover,
.announcement-banner__close:focus-visible {
  opacity: 1;
}

/* Styled after microsoft.com/en-ca's own footer -- small (12px-ish)
   muted-gray link text, thin full-width dividers between the link
   columns and the bottom legal row, no underline until hover. */
/* Background color matched to microsoft.com/en-ca's own footer
   (.uhf-footer's #f2f2f2) -- a light neutral gray instead of
   inheriting the page's own (usually white) background, so the
   footer reads as a visually distinct region the way theirs does. */
.site-footer {
  background-color: var(--site-footer-bg-color, #f2f2f2);
  background-image: var(--site-footer-bg-image, none);
  background-size: cover;
  background-position: center;
  color: var(--site-footer-text-color, #616161);
  border-top: var(--site-footer-border-width, 1px) var(--site-footer-border-style, solid) var(--site-footer-border-color, #dee2e6);
  padding: 48px 0 16px;
  font-size: 0.75rem;
}

/* No custom left/right spacing here anymore -- .site-footer
   .container now uses the exact same plain Bootstrap .container
   (responsive max-width + its own default gutter) as the page
   content above it, so the footer lines up flush with the content
   instead of running to its own, independently-tuned margins. (The
   top nav shared it too until 2026-10-18; it now runs the full
   window width, see #siteNavbar > .container-fluid.) */

/* Five side-by-side columns at lg+ (Explore / Assess / Plan /
   Membership / Company) -- _footer.html sets row-cols-lg-5 directly
   (Bootstrap's row-cols-* utilities go up to 6, so no custom width
   override is needed here, unlike the earlier 7-column layout) and keeps
   row-cols-1 for the full-width stacked accordion below lg. */

/* Below lg, each column is a full-width accordion row (row-cols-1 on
   .site-footer__columns in _footer.html) -- not applied at lg+, where
   row-cols-lg-5 puts the columns side-by-side. */
@media (max-width: 991.98px) {
  /* The 48px top padding is tuned for the lg+ multi-column layout;
     once the columns collapse into a stacked accordion it just reads
     as a big empty gap under the page content. */
  .site-footer {
    padding-top: 1.5rem;
  }
}

/* 14px for the link columns (product owner, 2026-10-21; it was the
   footer's own 12px). The legal row below keeps its smaller size. */
.site-footer__nav {
  font-size: 0.875rem;
}

/* Column headings render at the same size as the link text beneath
   them, as apple.com/ca's own global-footer directory columns
   (.ac-gf-directory-column-section-title-text) do -- weight is what
   differentiates a heading, not size. */
.site-footer__heading {
  font-size: inherit;
  font-weight: 600;
  color: #4a4a4a;
  margin-bottom: 0.75rem;
}

/* Mobile-only accordion trigger standing in for .site-footer__heading
   below lg (see _footer.html's d-none d-lg-block / d-lg-none pairing)
   -- same size/weight/color as the plain heading it replaces, just
   full-width, interactive, and with a chevron that flips to point
   up once its .collapse target is open (Bootstrap's own
   [aria-expanded] attribute, no extra JS needed to track that
   state). Reset to plain text button chrome first (no default
   border/background/padding) since this is a <button>, not an <a>. */
.site-footer__heading-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  border: none;
  background: none;
  padding: 0.625rem 0;
  font-size: inherit;
  font-weight: 400;
  color: #1d1d1f;
  margin-bottom: 0;
}

.site-footer__heading-toggle .bi-chevron-down {
  transition: transform 0.2s ease;
}

.site-footer__heading-toggle[aria-expanded="true"] .bi-chevron-down {
  transform: rotate(180deg);
}

.site-footer__list {
  list-style: none;
  padding-left: 0;
  margin-bottom: 0;
}

/* Indents the accordion's link items under their heading-toggle on
   mobile, so they read as nested content rather than flush with the
   toggle's own left edge. Declared after the unconditional rule
   above (not inside the earlier @media block further up) so its
   padding-left wins the cascade at this viewport -- same specificity,
   later in source order. Not applied at lg+, where columns sit
   side-by-side rather than as an accordion. */
@media (max-width: 991.98px) {
  .site-footer__list {
    padding: 0.25rem 0 0 0.5rem;
  }
}

/* 8px, matching microsoft.com/en-ca's own footer link spacing
   (.uhf-footer-nav-group-links li's own 8px bottom padding). */
.site-footer__list li {
  margin-bottom: 0.5rem;
}

.site-footer__list a,
.site-footer__legal a,
.site-footer__legal .site-footer__locale-toggle {
  color: #616161;
  text-decoration: none;
}

.site-footer__list a:hover,
.site-footer__list a:focus-visible,
.site-footer__legal a:hover,
.site-footer__legal a:focus-visible,
.site-footer__legal .site-footer__locale-toggle:hover,
.site-footer__legal .site-footer__locale-toggle:focus-visible {
  text-decoration: underline;
}

/* .btn-link (Bootstrap) otherwise renders this in the theme's bright
   link-blue at button-sized font -- overridden back down to match
   the rest of the muted, small .site-footer__legal row around it. */
.site-footer__locale-toggle {
  font-size: inherit;
  box-shadow: none;
}

.site-footer__locale-toggle:focus {
  box-shadow: none;
}

/* The <form> wrapping each language's submit button (_footer.html)
   shouldn't introduce a layout box of its own between .dropdown-menu
   and its .dropdown-item -- forms have no default margin, so this is
   just an explicit guarantee rather than relying on that silently. */
.site-footer__locale-form {
  margin: 0;
}

/* Bootstrap's .dropdown-menu/.dropdown-item render at the base body
   font-size by default (no inherited override reaches it from
   .site-footer__legal above, since .dropdown-item isn't set to
   inherit font-size in Bootstrap's own CSS) -- read noticeably
   larger than the "Canada – English" toggle text next to it.
   Matched explicitly to the same size instead. */
.site-footer__locale .dropdown-menu {
  font-size: 0.6875rem;
}

/* The legal-links row and the language picker are this element's
   own two direct flex children now (no separate wrapping row for
   either) -- centred together on the one line, and each wrapped
   line stays centred too (product owner, 2026-10-21). Combined
   margin-top + padding-top totals 30px, matching
   microsoft.com/en-ca's own footer legal row
   (.uhf-footer-base's padding-top). */
.site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem 1.25rem;
  margin-top: 1.25rem;
  padding-top: 0.625rem;
  font-size: 0.6875rem;
}

/* Below lg the columns stack, so the row sits right under them. After the
   rule above, so it wins without !important (until 2026-10-27 it sat
   before it with !important, and its padding-top: 1rem never applied). */
@media (max-width: 991.98px) {
  .site-footer__legal {
    margin-top: 0;
  }
}

.site-footer__legal-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  column-gap: 1.75rem;
}

.site-footer__legal-links > * {
  position: relative;
}

/* At least 24px tall (WCAG 2.5.8 Target Size): on a phone the row
   wraps, and two rows of bare 17px-tall links sat too close to pass
   the spacing exception (accessibility audit 2026-10-16, AX-20). */
.site-footer__legal-links a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
}

/* Pipe-separated legal links, apple.com/ca-style -- a plain "|"
   before every item but the first (the trailing copyright <span>
   included, not just the <a> links). Drawn in the middle of the
   column gap rather than inline, so it takes no room: an item that
   starts a wrapped line gets .is-line-start
   (static/shared/js/mark_line_starts.js) and its pipe is hidden, and
   since hiding it changes no widths, the row wraps the same either
   way. The empty alternative text keeps screen readers from reading
   out "vertical line" between the links (the first declaration is
   the fallback for browsers without that syntax). */
.site-footer__legal-links > *:not(:first-child)::before {
  content: "|";
  content: "|" / "";
  position: absolute;
  top: 50%;
  left: -0.875rem;
  transform: translate(-50%, -50%);
  color: rgba(0, 0, 0, 0.24);
}

.site-footer__legal-links > .is-line-start::before {
  visibility: hidden;
}

/* A tester's Exit testing control (ADR 0108), under the legal row and at the
   link columns' size: it's the one thing here a tester comes looking for. */
.site-footer__testing {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0 0.75rem;
  margin-top: 0.75rem;
  font-size: 0.875rem;
}

.site-footer__testing-exit {
  --bs-btn-padding-x: 0;
  --bs-btn-padding-y: 0;
  --bs-btn-font-size: 0.875rem;
  min-height: 24px;
}

/* Off-screen until focused (WCAG 2.4.1 Bypass Blocks) -- the first
   focusable element in <body>, so a keyboard/screen-reader user
   doesn't have to tab through the full nav (5 links + 3 dropdown
   submenus) on every single page just to reach the content. */
.skip-link {
  position: absolute;
  top: -100%;
  left: 1rem;
  z-index: 2000;
  padding: 0.5rem 1rem;
  background-color: #fff;
  color: #1d1d1f;
  border-radius: 0 0 6px 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  text-decoration: none;
}

.skip-link:focus {
  top: 0;
}

/* Contain any full-bleed decoration (e.g. the sticky search bar's
   page-wide shadow -- static/shared/css/list-controls.css) to the
   viewport width so a 100vw child can't add a horizontal scrollbar
   when a vertical one is present. `clip`, not `hidden`: it doesn't
   create a scroll container, so `position: sticky` descendants still
   stick. x-axis only -- vertical shadows/menus still escape. */
#main-content {
  overflow-x: clip;
}

/* Floating "back to top" control (#backToTop, near the closing
   </body>). Hidden until static/shared/js/back_to_top.js adds
   .is-visible once the page has scrolled ~1.5 screens down; clicking
   it returns to the top. z-index sits above the sticky navbar (1020)
   but below Bootstrap's modal layer (1055) so it never floats over
   an open dialog, and below #cookieConsentBanner (1080). The admin
   skin has its own separate .back-to-top (admin_theme/css/main.css),
   not loaded here. */
/* --cookie-banner-height (shared/js/scroll_clearance.js, 0 once the
   banner is dismissed) lifts the button above the cookie banner, which
   would otherwise cover it entirely (WCAG 2.4.11). */
.back-to-top {
  position: fixed;
  right: 1.25rem;
  bottom: calc(1.25rem + var(--cookie-banner-height, 0px));
  z-index: 1030;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 1px solid var(--site-btn-primary-bg-color, #0067b8);
  border-radius: 50%;
  background-color: var(--site-btn-primary-bg-color, #0067b8);
  color: var(--site-btn-primary-text-color, #fff);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(0.5rem);
  transition: opacity 0.2s ease, transform 0.2s ease,
    visibility 0.2s ease, background-color 0.15s ease,
    border-color 0.15s ease;
}

.back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.back-to-top:hover,
.back-to-top:focus-visible {
  background-color: var(--site-btn-primary-hover-bg-color, #005a9e);
  border-color: var(--site-btn-primary-hover-bg-color, #005a9e);
  color: var(--site-btn-primary-text-color, #fff);
}

.back-to-top .bi {
  font-size: 1.25rem;
  line-height: 1;
}

@media (max-width: 575.98px) {
  .back-to-top {
    right: 1rem;
    bottom: calc(1rem + var(--cookie-banner-height, 0px));
  }
}

/* Forced colours: Bootstrap shows a dropdown's current item and a progress
   bar's fill by background colour alone, which High Contrast repaints.
   Give them the system's selection colours back (and the track an outline,
   so the bar's length still reads). */
@media (forced-colors: active) {
  #siteNavbar .dropdown-item.active {
    forced-color-adjust: none;
    background-color: Highlight;
    color: HighlightText;
  }

  .progress {
    outline: 1px solid CanvasText;
  }

  .progress-bar {
    forced-color-adjust: none;
    background-color: Highlight;
  }
}

/* --- Breadcrumbs and back links line up with the logo ------------------------ */

/* On a page with the site's capped container (one that is not in the app frame,
   which already runs the window's width), a breadcrumb or back link that is a
   direct child of that container moves out to the top bar's left padding, so it
   starts under the logo (product owner, 2026-11-04). The shift is the container's
   left content edge less the bar's padding (#siteNavbar > .container-fluid: 16px,
   24px from 768px, 32px from 992px). The container's left edge is 0 below 768px,
   then the larger of 30px (the .container rule above: 100% - 3.75rem) and half
   of what is left of the window past its 1320px cap, plus Bootstrap's 12px
   padding. 100vw includes a classic scrollbar, so with one the edge can be off
   by half its width. Content below the link keeps the container's column. */
.container:not(.container--frame) {
  --edge-container-left: 0px;
  --edge-logo-padding: 1rem;
}

@media (min-width: 768px) {
  .container:not(.container--frame) {
    --edge-container-left: max(30px, (100vw - 1320px) / 2);
    --edge-logo-padding: 1.5rem;
  }
}

@media (min-width: 992px) {
  .container:not(.container--frame) { --edge-logo-padding: 2rem; }
}

.container:not(.container--frame) > nav[aria-label="breadcrumb" i],
.container:not(.container--frame) > .back-link,
.container:not(.container--frame) > :has(> a:first-child > .bi-arrow-left:first-child),
.container:not(.container--frame) > .assessment-results > nav[aria-label="breadcrumb" i],
.container:not(.container--frame) > .assessment-results > .back-link {
  margin-inline-start: calc(var(--edge-logo-padding) - var(--edge-container-left) - 0.75rem);
}