:root {
  /* Colors */
  --color-primary:          #F3D27B;
  --color-background:       #1B1B1B;
  --color-background-blue:  #1B2B44;
  --color-body:             #171616;
  --color-footer-primary:   #3A3A38; /* #1B1B1B */
  --color-footer-secondary: #2C2C2C;
  --color-text:             #FFFFFF;
  --color-text-hover:       #CFCFCF;
  --color-text-cta:         #000000;
  --color-text-cta-hover:   #404040;
  --color-announcement:     #0099e6;

  /* Sizes */
  --height-header:         50px;
  --padding-header-top:    0.8rem;
  --padding-header-bottom: 0.8rem;
  --content-edge-spacing:  3rem;
  --logo-height:           45px;
  --announcement-height:   40px;

  --max-page-width:        1000px;

  /* Animations */
  --transition-hamburger-speed:      0.2s;
  --transition-hamburger-fade-speed: 0.1s;
  --transition-header-speed:         0.4s;
  --transition-faq-speed:            0.3s;

  /* Effects */
  --glow-hover: 0 0 20px rgba(243, 210, 123, 0.3);
}

body {
  margin: 0px;
  color: var(--color-text);
  font-family: sans-serif;
  background-color: var(--color-body);
  font-size: 18px;
}

h3 {
  margin-bottom: 10px;
}

p {
  margin-top: 10px;
  margin-bottom: 40px;
  line-height: 1.6;
}

/* A paragraph introducing a list (e.g. faq.html) reads better sitting
   close to that list rather than at the standard paragraph spacing. */
p:has(+ ul) {
  margin-bottom: 10px;
}

/* hr sits between mismatched neighbors (p, ul, h2), each with its own
   margin, so the default collapsed gap is uneven depending on context
   (e.g. 40px above from a p, 20px below from a h2). Zeroing the margin
   on whichever element touches the hr hands full control to hr's own
   margin, so the gap is the same 30px on both sides everywhere it's used. */
:has(+ hr) {
  margin-bottom: 0;
}

hr {
  margin: 30px 0;
}

hr + * {
  margin-top: 0;
}

a {
  cursor: pointer;
  color: var(--color-text);
}

a:hover {
  color: var(--color-text-hover);
}

section {
  background-color: var(--color-background);
  padding: 80px var(--content-edge-spacing);
}

/* For pages that stack several short content sections back-to-back
   (e.g. privacy.html) rather than one large section per page - the full
   80px hero spacing and 40px paragraph rhythm leave too much dead space
   between them, so this trims both down. The last-child rule drops the
   trailing margin so the section's own padding is the only thing that
   controls the gap to the next section, instead of the two stacking. */
.section-tight {
  padding-top: 20px;
  padding-bottom: 20px;
}

.section-tight p {
  margin-bottom: 20px;
}

.section-tight > :last-child {
  margin-bottom: 0;
}

/* Regardless of whether the last section on a page is tight or full-size,
   the page should always close out with the full breathing room before
   whatever comes next - so this is keyed off page position, not the
   .section-tight class, and needs no per-page upkeep as sections are
   added or removed. :last-of-type (not :last-child) so this still finds
   the last section even on a page where something non-section - like a
   footer - ends up as main's last child. */
main > section:last-of-type {
  padding-bottom: 80px;
}

/* Error pages (403/404) have a single section-tight block that's also the
   page's last section, so the rule above pushes its bottom padding to 80px
   while .section-tight keeps the top at 20px. Unlike tos.html/privacy.html,
   it isn't stacked against other tight sections, so match the top to it. */
.section-tight.center-content {
  padding-top: 80px;
}

.section-blue {
  background-color: var(--color-background-blue);
}

/* Fixed and stacked directly below the header (which is pinned via top:0
   in nav.css), so both stay pinned at the top of the viewport while
   scrolling instead of the banner scrolling away with the page content.
   Since it's fixed like the header, main needs to clear the combined
   height of both - the :has() rule below adds the banner's height on top
   of the usual header-clearing padding, only when a banner is actually
   present, so nothing needs to be tuned per-page based on whether a given
   page includes announcement.shtml. */
.announcement-banner {
  position: fixed;
  top: calc(var(--padding-header-top) + var(--padding-header-bottom) + var(--height-header));
  left: 0;
  right: 0;
  width: 100%;
  height: var(--announcement-height);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--content-edge-spacing);
  background-color: var(--color-announcement);
  text-align: center;
  font-size: 14px;
}

.announcement-banner p {
  margin: 0;
}

body:has(> .announcement-banner) main {
  padding-top: calc(var(--padding-header-top) + var(--padding-header-bottom) + var(--height-header) + var(--announcement-height));
}

/* CTA Button */

.cta-button {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-primary);
  color: var(--color-text-cta);
  height: 40px;
  padding-left: 12px;
  padding-right: 12px;
  text-align: center;
  text-decoration: none;
  font-weight: bold;
  transition: var(--transition-header-speed);
  margin-top: 30px;
  width: auto;         /* Ensures it only takes up as much space as needed */
  min-width: fit-content;
}

.section-blue .cta-button {
  background-color: #FFFFFF;
}

.cta-button:hover {
  box-shadow: var(--glow-hover);
  color: var(--color-text-cta-hover);
}

.center-content,
.grid-section,
.home-capabilities-item {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  /* align-items:center only centers a child's box as a whole. On narrow
     screens a heading like "Specialized Capabilities" can wrap onto two
     lines, and once it wraps its box grows to fill the available width
     instead of shrinking to fit the text - at that point align-items has
     nothing left to center, and the wrapped lines fall back to default
     left text alignment inside that now full-width box. text-align keeps
     the text itself centered regardless of whether it wraps. */
  text-align: center;
}

main {
  max-width: var(--max-page-width);
  margin-left: auto;
  margin-right: auto;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.9);
  display: flow-root;
}

main h1 {
  font-size: 32px;
  margin: 0;
}

/* h2 defaults to the smaller in-content subsection size - most h2s on the
   site are subsection labels within a page (contact, privacy), not page
   headings, matching the h3 styling they used before being promoted to h2
   to fix skipped heading levels (h1 -> h3 with no h2). Hero-style h2s that
   act as page headings (home page) opt back up to the h1 size below. */
main h2 {
  font-size: 21px;
  margin-top: 20px;
  margin-bottom: 20px;
}

main h3 {
  font-size: 18px;
  margin-top: 20px;
}

/* FAQ page: each question/answer pair collapses behind a hidden
   checkbox + <label> toggle, same technique as the mobile nav menu below in
   nav.css (.menu-toggle / .header-buttons-wrapper), rather than native
   <details>. <details>'s own open/close has no reliable cross-browser way
   to animate the reveal in plain CSS, whereas this checkbox-driven max-height
   transition is the pattern already proven working elsewhere on the site. */
.faq-item {
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  padding-bottom: 30px;
  margin-bottom: 30px;
}

.faq-item:last-of-type {
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 0;
}

/* h2's margin-top has no border/padding above it to stop it at, so it
   collapses upward into the previous .faq-item's margin-bottom instead of
   adding to it - the visible gap above a closed question is just the 30px
   from that margin-bottom, not 30+20. margin-bottom is zeroed here (unlike
   the sitewide main h2 rule) so all of the space below the question comes
   from .faq-item's own padding-bottom, which is set to that same 30px
   above, keeping the question/icon row centered between the divider
   lines instead of drifting toward one side. */
.faq-item h2 {
  margin-top: 20px;
  margin-bottom: 0;
}

/* Visually hidden but still focusable/operable via keyboard (Tab + Space) -
   see the equivalent .menu-toggle comment in nav.css for why display:none
   isn't used here. */
.faq-toggle {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.faq-toggle:focus-visible + h2 .faq-question {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  cursor: pointer;
}

.faq-question:hover {
  color: var(--color-text-hover);
}

/* A rotating "+" reads as "x" once open, echoing the collapse action
   without needing separate open/closed icon assets. */
.faq-question::after {
  content: "+";
  flex-shrink: 0;
  font-size: 28px;
  color: var(--color-primary);
  transition: transform var(--transition-faq-speed);
}

.faq-toggle:checked + h2 .faq-question::after {
  transform: rotate(45deg);
}

/* Collapsed via max-height + overflow:hidden - the universal fallback,
   since animating to/from height:auto isn't supported everywhere yet. The
   @supports block below upgrades to the exact, always-correct height:auto
   version where it is, mirroring .header-buttons-wrapper in nav.css.
   Kept close to the longest actual answer's rendered height on purpose -
   see the equivalent comment on .header-buttons-wrapper in nav.css for why
   padding this out further makes the close animation feel stalled. */
.faq-answer {
  overflow: hidden;
  max-height: 0;
  transition: max-height var(--transition-faq-speed) ease;
}

.faq-toggle:checked ~ .faq-answer {
  max-height: 500px;
}

@supports (interpolate-size: allow-keywords) {

  .faq-answer {
    interpolate-size: allow-keywords;
    max-height: none;
    height: 0;
    transition: height var(--transition-faq-speed) ease;
  }

  .faq-toggle:checked ~ .faq-answer {
    max-height: none;
    height: auto;
  }

}

.faq-answer p:last-child,
.faq-answer ul:last-child {
  margin-bottom: 0;
}

.section-blue h2,
.grid-section h2 {
  font-size: 32px;
  margin: 0.83em 0;
}

noscript img {
  max-width: 100%;
}

@media (max-width: 46rem) {

  .hero-seal {
    display: none;
  }

}

/* Covers every transition/animation site-wide (menu slide, hamburger
   rotation, hover glows, footer fade-in, and anything added later) from one
   place, rather than gating each one individually across main/nav/footer
   .css. !important is needed since it must beat each rule's own duration
   regardless of that rule's specificity. */
@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

}