:root {
  /* Colors */
  --color-primary:          #F3D27B;
  --color-background:       #1B1B1B;
  --color-background-blue:  #1B2B44;
  --color-body:             #171616;
  --color-footer-primary:   #3A3A38; /* #3C3C3C */
  --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-header-speed:    0.4s;

  /* 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;
}

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);
}

.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;
  align-self: flex-start;
}

.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;
}

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

main h1, main h2 {
  font-size: 32px;
}

main h1 {
  margin: 0;
}

noscript img {
  max-width: 100%;
}

@media (max-width: 46rem) {

  .hero-seal {
    display: none;
  }

}