/**
 * Global base styles and resets.
 * Scoped additively on top of Astra parent output — we do not
 * re-reset the whole document, only normalize what the child
 * theme's own components rely on.
 */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  max-width: 100%;
  overflow-x: hidden;
}

/* A single oversized Elementor widget must never make the document wider
   than the viewport. iOS Safari otherwise allows the page to pan sideways. */
body,
#page {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

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

img,
svg,
video {
  max-width: 100%;
  height: auto;
  display: block;
}

button {
  font-family: inherit;
}

/* ===== Layout container ===== */
.container {
  width: 100%;
  max-width: var(--container-2xl);
  margin-inline: auto;
  padding-inline: var(--container-padding-inline);
}

.container--narrow {
  max-width: var(--container-lg);
}

/* ===== Skip link (accessibility) ===== */
.skip-link {
  position: absolute;
  top: -100px;
  left: var(--space-4);
  z-index: var(--z-modal);
  background: var(--color-brand-gold-500);
  color: var(--color-brand-green-900);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-sm);
  font-weight: var(--fw-semibold);
  text-decoration: none;
  transition: top var(--transition-fast);
}

.skip-link:focus {
  top: var(--space-4);
}

/* ===== Universal visible focus state (WCAG 2.1 AA) ===== */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--color-focus-ring);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Screen-reader only utility, matches WP core .screen-reader-text
   but redeclared here so the child theme is self-contained. */
.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  word-wrap: normal !important;
}

.screen-reader-text:focus {
  background-color: var(--color-white);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  clip: auto !important;
  clip-path: none;
  color: var(--color-text-heading);
  display: block;
  height: auto;
  left: var(--space-4);
  line-height: normal;
  padding: var(--space-3) var(--space-4);
  top: var(--space-4);
  width: auto;
  z-index: var(--z-modal);
}

/* Inner pages place the solid header above the hero; the homepage
   deliberately lets its header sit over the hero artwork. */
body {
  padding-top: var(--header-height);
}

body.is-front-page,
body.home {
  padding-top: 0;
}

@media (max-width: 921px) {
  body {
    padding-top: var(--header-height-mobile);
  }

  body.is-front-page,
  body.home {
    padding-top: 0;
  }
}

/* Lock body scroll while the off-canvas mobile menu is open. */
body.mobile-menu-open {
  overflow: hidden;
}