/*
 * base.css — Global reset and foundational styles.
 * Design tokens live in theme.json. This file adds only structural rules
 * and component primitives that theme.json cannot express.
 */

/* ============================================================
   Box model reset
   ============================================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
}

/* ============================================================
   Media elements
   ============================================================ */
img,
video,
iframe {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

/* ============================================================
   Scroll and rendering
   ============================================================ */
:root {
  scroll-behavior: smooth;
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ============================================================
   Typographic helpers
   ============================================================ */
h1,
h2,
h3,
h4 {
  text-wrap: balance;
}

/* ============================================================
   Focus — accessible, brand-consistent ring
   ============================================================ */
:focus-visible {
  outline: 2px solid var(--wp--preset--color--accent-gold);
  outline-offset: 3px;
  border-radius: var(--wp--custom--radius--xs-1);
}

/* ============================================================
   Links
   theme.json sets element link color to accent-gold globally.
   Component-level colour overrides live in header.css / footer.css.
   ============================================================ */
a {
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* ============================================================
   Button components
   .bit-btn is placed on the WP block wrapper (.wp-block-button).
   Styles target the inner .wp-block-button__link so visual output
   is correct whether the class is on a WP block wrapper or a
   direct <a> element.
   ============================================================ */
.bit-btn .wp-block-button__link,
a.bit-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.625rem 1.5rem; /* 10px 24px */
  border-radius: var(--wp--custom--radius--sm); /* 8px */
  font-family: var(--wp--preset--font-family--dm-sans);
  font-weight: 500;
  font-size: var(--wp--preset--font-size--body); /* 16px */
  line-height: 1.5;
  white-space: nowrap;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease;
}

/* Gold: solid accent-gold fill, dark text — used in footer CTA and general contexts */
.bit-btn--gold .wp-block-button__link,
a.bit-btn--gold {
  background-color: var(--wp--preset--color--accent-gold);
  border-color: var(--wp--preset--color--accent-gold);
  color: var(--wp--preset--color--bg-elevated);
}

.bit-btn--gold .wp-block-button__link:hover,
a.bit-btn--gold:hover {
  background-color: #ffd233;
  border-color: #ffd233;
  color: var(--wp--preset--color--bg-elevated);
  text-decoration: none;
}

/* Secondary: transparent background, white border */
.bit-btn--secondary .wp-block-button__link,
a.bit-btn--secondary {
  background-color: transparent;
  border-color: var(--wp--preset--color--white-40);
  color: var(--wp--preset--color--white);
}

.bit-btn--secondary .wp-block-button__link:hover,
a.bit-btn--secondary:hover {
  border-color: var(--wp--preset--color--white);
  text-decoration: none;
}

/* ============================================================
   Reduced motion
   ============================================================ */
@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;
  }
}