/* Structural layout: container, header/footer chrome, and section rhythm. */

.container {
  width: 100%;
  max-width: var(--content-max-width);
  margin-inline: auto;
  padding-inline: var(--content-padding-inline);
}

.site-main {
  display: block;
}

.section {
  padding-block: var(--space-16);
}

.section--tight {
  padding-block: var(--space-10);
}

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

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

.section--green-alt {
  background-color: var(--color-green-800);
}

/* Announcement bar */
.announcement-bar {
  background-color: var(--color-green-900);
  color: var(--color-white);
}

.announcement-bar__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding-block: var(--space-2);
  text-align: center;
  font-size: var(--font-size-sm);
}

.announcement-bar__message {
  flex: 1 1 auto;
}

.announcement-bar__link {
  font-weight: 600;
  color: var(--color-gold-400);
  text-underline-offset: 2px;
  text-decoration: underline;
}

.announcement-bar__link:hover {
  color: var(--color-gold-500);
}

.announcement-bar__close {
  flex-shrink: 0;
  color: rgba(255, 255, 255, 0.8);
  padding: var(--space-1);
  border-radius: var(--radius-sm);
}

.announcement-bar__close:hover {
  color: var(--color-white);
}

.announcement-bar[hidden] {
  display: none;
}

/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background-color: rgba(255, 255, 255, 0.97);
  border-bottom: 1px solid var(--color-border);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  height: var(--header-height);
}

.primary-nav {
  display: none;
}

.primary-nav__list {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.primary-nav__link {
  display: inline-block;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--color-text-muted);
}

.primary-nav__link:hover {
  background-color: var(--color-green-50);
  color: var(--color-green-800);
}

.header-actions {
  display: none;
  align-items: center;
  gap: var(--space-3);
}

.mobile-menu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-2);
  border-radius: var(--radius-sm);
  color: var(--color-charcoal);
}

.mobile-menu-toggle:hover {
  background-color: var(--color-green-50);
}

.mobile-menu-toggle .icon--close {
  display: none;
}

.mobile-menu-toggle[aria-expanded="true"] .icon--menu {
  display: none;
}

.mobile-menu-toggle[aria-expanded="true"] .icon--close {
  display: block;
}

/* Mobile menu panel */
.mobile-menu {
  border-top: 1px solid var(--color-border);
  background-color: var(--color-white);
}

.mobile-menu[hidden] {
  display: none;
}

.mobile-menu__list {
  display: flex;
  flex-direction: column;
  padding-block: var(--space-4);
}

.mobile-menu__link {
  display: block;
  padding: var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-md);
  font-weight: 500;
  color: var(--color-charcoal);
}

.mobile-menu__link:hover {
  background-color: var(--color-green-50);
}

.mobile-menu__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-3);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}

/* Footer */
.site-footer {
  background-color: var(--color-green-900);
  color: var(--color-white);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  /* Tight on mobile - the accordion rows below (.footer-column) supply
     their own border dividers, so a large grid gap here would just add
     redundant empty space between compact collapsed rows. Widened back out
     at the tablet/desktop breakpoints in responsive.css, where columns sit
     side by side and need real breathing room. */
  gap: var(--space-8) 0;
  padding-block: var(--space-10);
}

.footer-grid .footer-brand {
  padding-bottom: var(--space-2);
}

.footer-brand__description {
  max-width: 24rem;
  margin-top: var(--space-4);
  font-size: var(--font-size-sm);
  color: rgba(255, 255, 255, 0.7);
}

.footer-brand__contact {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-6);
  font-size: var(--font-size-sm);
  color: rgba(255, 255, 255, 0.7);
}

.footer-brand__contact a:hover {
  color: var(--color-white);
}

.footer-contact-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.footer-contact-item .icon {
  color: var(--color-gold-400);
}

.footer-social {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

.footer-social__link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--radius-full);
  background-color: rgba(255, 255, 255, 0.1);
  color: var(--color-white);
}

.footer-social__link:hover {
  background-color: rgba(255, 255, 255, 0.2);
}

/* Footer columns are native <details>/<summary> elements: a compact,
   collapsible accordion on phones/small screens (where the full footer was
   too long), forced fully open on desktop via the override in
   responsive.css. No JS required, and works consistently across Chrome,
   Safari, Firefox, Edge, and Samsung Internet. */
.footer-column {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-column:last-of-type {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-column__title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-block: var(--space-4);
  cursor: pointer;
  font-size: var(--font-size-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-gold-400);
  list-style: none;
}

/* Hide the native disclosure triangle - list-style:none above covers
   Firefox, this covers the WebKit/Blink family (Chrome, Safari, Edge,
   Samsung Internet), same pattern already used for the dashboard's account
   menu (see dashboard.css: .dashboard-user-menu__trigger). */
.footer-column__title::-webkit-details-marker {
  display: none;
}

.footer-column__chevron {
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
  transition: transform var(--transition-base);
}

.footer-column[open] .footer-column__chevron {
  transform: rotate(180deg);
}

.footer-column__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding-bottom: var(--space-4);
}

.footer-column__link {
  font-size: var(--font-size-sm);
  color: rgba(255, 255, 255, 0.7);
}

.footer-column__link:hover {
  color: var(--color-white);
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-block: var(--space-8);
}

.footer-bottom p {
  font-size: var(--font-size-sm);
  color: rgba(255, 255, 255, 0.7);
}

.footer-bottom__copyright {
  margin-top: var(--space-3);
  color: rgba(255, 255, 255, 0.5) !important;
}