/* Shared page reset and browser defaults. */
@layer base {
  html, body { margin: 0; padding: 0; }
  html { scroll-behavior: smooth; scroll-padding-top: 7.5rem; }
  body { min-width: 320px; overscroll-behavior-x: none; }
  main > :first-child { margin-top: 0 !important; }
  main > :last-child { margin-bottom: 0 !important; }
  img { max-width: 100%; }
  button, input, select, textarea { font: inherit; }
}

/* Use a steady reading width and consistent section rhythm on every page. */
main { min-height: calc(100svh - 7.5rem); }
main section[class*="py-space-3xl"] {
  padding-block: clamp(3rem, 5.5vw, 4.5rem) !important;
}
main section[class*="pb-space-3xl"] {
  padding-bottom: clamp(3rem, 5.5vw, 4.5rem) !important;
}
main section[class*="pt-space-3xl"] {
  padding-top: clamp(3rem, 5.5vw, 4.5rem) !important;
}

/* Keep page content aligned and prevent text from becoming too wide. */
main .max-w-7xl {
  width: 100%;
  box-sizing: border-box;
}
main :is(h1, h2, h3) { text-wrap: balance; }
main h1 {
  font-size: clamp(2.25rem, 5.2vw, 3.5rem) !important;
  line-height: 1.1 !important;
}
main [class~="text-headline-xl"] {
  font-size: clamp(1.75rem, 3.5vw, 2.5rem) !important;
  line-height: 1.2 !important;
}
main p { text-wrap: pretty; }
main :is(input, select, textarea) { max-width: 100%; }
main :is(input, select, textarea):focus-visible,
main a:focus-visible,
main button:focus-visible {
  outline: 3px solid #fea619;
  outline-offset: 3px;
}

/* Avoid cramped page gutters on phones and tablets. */
@media (max-width: 639px) {
  html { scroll-padding-top: 6rem; }
  main { min-height: calc(100svh - 6rem); }
  main section[class*="py-space-3xl"] {
    padding-block: 3rem !important;
  }
  main section[class*="pb-space-3xl"] { padding-bottom: 3rem !important; }
  main section[class*="pt-space-3xl"] { padding-top: 3rem !important; }
  main .max-w-7xl.px-margin-mobile { padding-inline: 1.25rem !important; }
}

/* Keep the full site navigation available when the desktop row no longer fits. */
@media (max-width: 1279px) {
  header > div:last-child { height: auto !important; min-height: 5rem; flex-wrap: wrap; row-gap: .5rem; padding-block: .75rem; }
  header > div:last-child > div:first-child { order: 1; }
  header > div:last-child > div:last-child { order: 2; margin-left: auto; }
  header nav[data-active-classes] {
    display: flex !important;
    order: 3;
    flex: 0 0 100%;
    min-width: 0;
    gap: .25rem;
    overflow-x: auto;
    padding-bottom: .25rem;
    scrollbar-width: thin;
  }
  header nav[data-active-classes] a { flex: 0 0 auto; white-space: nowrap; }
  main { padding-top: 10.5rem !important; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}


/* Accessible contrast for shared text and accent utilities. */
.text-secondary-container { color: #603c00 !important; }
.text-emerald-efficiency { color: #046b4f !important; }
.text-on-primary-container { color: #44474c !important; }

/* Light accents remain bright and readable on dark branded panels. */
.bg-primary-container .text-secondary-container,
.bg-tertiary-container .text-secondary-container,
.text-on-primary .text-secondary-container,
[class~="bg-primary-container/90"] .text-secondary-container,
[class~="bg-primary-container/80"] .text-secondary-container {
  color: #fef3c7 !important;
}
.bg-primary-container .text-emerald-efficiency,
.bg-tertiary-container .text-emerald-efficiency,
.text-on-primary .text-emerald-efficiency {
  color: #6ee7b7 !important;
}
.bg-primary-container .text-on-primary-container,
.bg-tertiary-container .text-on-primary-container,
.text-on-primary .text-on-primary-container {
  color: #b4c0d2 !important;
}

/* Restore dark foregrounds inside light cards nested in dark sections. */
.bg-primary-container :is(.bg-surface, .bg-surface-bright, .bg-surface-container, .bg-surface-container-low, .bg-surface-container-lowest, .bg-surface-container-high, .bg-surface-subtle, .bg-solar-gold-light) .text-secondary-container,
.bg-tertiary-container :is(.bg-surface, .bg-surface-bright, .bg-surface-container, .bg-surface-container-low, .bg-surface-container-lowest, .bg-surface-container-high, .bg-surface-subtle, .bg-solar-gold-light) .text-secondary-container {
  color: #603c00 !important;
}
.bg-primary-container :is(.bg-surface, .bg-surface-bright, .bg-surface-container, .bg-surface-container-low, .bg-surface-container-lowest, .bg-surface-container-high, .bg-surface-subtle, .bg-solar-gold-light) .text-emerald-efficiency,
.bg-tertiary-container :is(.bg-surface, .bg-surface-bright, .bg-surface-container, .bg-surface-container-low, .bg-surface-container-lowest, .bg-surface-container-high, .bg-surface-subtle, .bg-solar-gold-light) .text-emerald-efficiency {
  color: #046b4f !important;
}
.bg-primary-container :is(.bg-surface, .bg-surface-bright, .bg-surface-container, .bg-surface-container-low, .bg-surface-container-lowest, .bg-surface-container-high, .bg-surface-subtle, .bg-solar-gold-light) .text-on-primary-container,
.bg-tertiary-container :is(.bg-surface, .bg-surface-bright, .bg-surface-container, .bg-surface-container-low, .bg-surface-container-lowest, .bg-surface-container-high, .bg-surface-subtle, .bg-solar-gold-light) .text-on-primary-container {
  color: #44474c !important;
}

/* Dark text on gold buttons passes where white text does not. */
.bg-secondary-container.text-on-primary,
.bg-secondary-container .text-on-primary,
.bg-secondary-container.text-on-secondary,
.bg-secondary-container .text-on-secondary {
  color: #0d1c2f !important;
}
.bg-secondary-container { background-color: #fea619 !important; }


/* Keep accent colors readable when a text element shares its background class. */
.bg-primary-container.text-secondary-container,
.bg-tertiary-container.text-secondary-container,
[class*="bg-primary-container/"].text-secondary-container,
[class*="bg-tertiary-container/"].text-secondary-container {
  color: #fef3c7 !important;
}
.bg-primary-container.text-emerald-efficiency,
.bg-tertiary-container.text-emerald-efficiency,
[class*="bg-primary-container/"].text-emerald-efficiency,
[class*="bg-tertiary-container/"].text-emerald-efficiency {
  color: #6ee7b7 !important;
}
.bg-primary-container.text-on-primary-container,
.bg-tertiary-container.text-on-primary-container,
[class*="bg-primary-container/"].text-on-primary-container,
[class*="bg-tertiary-container/"].text-on-primary-container {
  color: #b4c0d2 !important;
}
.bg-secondary-container.text-on-primary-container,
.bg-secondary-container .text-on-primary-container,
.bg-secondary-container.text-on-primary,
.bg-secondary-container .text-on-primary,
.bg-secondary-container.text-on-secondary,
.bg-secondary-container .text-on-secondary {
  color: #0d1c2f !important;
}
.bg-emerald-efficiency,
.bg-emerald-efficiency .text-on-primary,
.bg-emerald-efficiency .text-on-secondary,
.bg-emerald-efficiency .text-surface-container-lowest {
  color: #0d1c2f !important;
}
.text-solar-gold-hover { color: #855300 !important; }
.bg-primary-container .text-solar-gold-hover,
.bg-tertiary-container .text-solar-gold-hover,
.text-on-primary .text-solar-gold-hover {
  color: #fef3c7 !important;
}