/* ─────────────────────────────────────────────────────────────────────────────
 * Animal Massage Awareness — Global utilities
 *
 * Variables (--gvid-*, --gcid-*) are defined by:
 *   1. divi-layouts/00-design-system.json (Divi import — produces gcid-* color
 *      custom properties at :root)
 *   2. theme/animal-massage-awareness/custom-css/design-system.css (generated
 *      twin file — produces gvid-* number/spacing/typescale custom properties)
 *
 * No raw hex values in this file. No !important hacks. Everything resolves
 * through the design tokens so a single YAML edit re-themes the whole site.
 * ───────────────────────────────────────────────────────────────────────────── */

/* ── Base reset hooks ─────────────────────────────────────────────────────── */

html { scroll-behavior: smooth; }

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

body {
  background-color: var(--gcid-color-ground, #F5F0E6);
  color: var(--gcid-color-text-secondary, #52443B);
  font-family: "DM Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── Focus rings — accessibility, brand-coloured ──────────────────────────── */

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--gcid-color-interactive, #0A847E);
  outline-offset: 3px;
  border-radius: var(--gvid-radius-sm, 4px);
}

/* Remove default browser focus on mouse click — keep only keyboard */
a:focus:not(:focus-visible),
button:focus:not(:focus-visible) {
  outline: none;
}

/* ── Editorial kicker (eyebrow label) ─────────────────────────────────────── */

.ama-kicker p {
  margin-bottom: var(--gvid-space-xs, 4px) !important;
  display: inline-block;
  position: relative;
  padding-left: 0;
}

.ama-kicker--with-rule p::before {
  content: "";
  display: inline-block;
  width: 24px;
  height: 1px;
  background: var(--gcid-color-accent, #9E6538);
  vertical-align: middle;
  margin-right: 10px;
}

.ama-kicker--on-dark p::before {
  background: rgba(255,255,255,0.5);
}

/* ── Copper divider helper ────────────────────────────────────────────────── */

.ama-divider-copper {
  border: none;
  border-top: 1px solid var(--gcid-color-accent, #9E6538);
  width: 96px;
  margin: var(--gvid-space-md, 16px) 0;
}

/* ── Link defaults — wrapped in :where() so Divi's link colour picker wins.
 * Hover keeps normal specificity so the copper underline animation is
 * consistent even when the base colour is overridden in the UI.
 * ───────────────────────────────────────────────────────────────────────── */

:where(.et_pb_text a, .et_pb_blurb_description a) {
  color: var(--gcid-color-interactive, #0A847E);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color .2s ease, border-color .2s ease;
}

.et_pb_text a:hover,
.et_pb_blurb_description a:hover {
  border-bottom-color: currentColor;
}

/* ── Buttons — extend Divi defaults for hover lift ───────────────────────── */

.et_pb_button {
  transition: background-color .2s ease, border-color .2s ease,
              color .2s ease, transform .2s ease, box-shadow .2s ease;
}

.et_pb_button:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(29, 28, 22, 0.08);
}

.et_pb_button::after {
  display: none !important; /* Disable Divi's default arrow — our labels include their own glyphs */
}

/* ── Card surfaces — Divi column / blurb / group rendered as a card ───── */

.et_pb_blurb_position_top .et_pb_blurb_container { padding-top: var(--gvid-space-md, 16px); }
.et_pb_blurb_description p:last-child { margin-bottom: 0; }

/* Subtle hover on card-style columns */
.et_pb_column.ama-card-hover { transition: transform .25s ease, box-shadow .25s ease; }
.et_pb_column.ama-card-hover:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(29, 28, 22, 0.08);
}

/* ── Image rendering ──────────────────────────────────────────────────────── */

.et_pb_image img,
.et_pb_blurb img {
  display: block;
  width: 100%;
  height: auto;
}

/* ── Container hardening — keep editorial column intact at 1280 ─────────── */

.et_pb_row {
  padding-left: clamp(20px, 4vw, 48px);
  padding-right: clamp(20px, 4vw, 48px);
}

/* ── Skip nav link ────────────────────────────────────────────────────────── */

.ama-skip-link {
  position: absolute;
  top: -100px;
  left: 0;
  background: var(--gcid-color-text-primary, #1D1C16);
  color: var(--gcid-color-text-on-interactive, #FFFFFF);
  padding: 12px 20px;
  z-index: 9999;
  text-decoration: none;
  border-radius: 0 0 var(--gvid-radius-md, 8px) 0;
}

.ama-skip-link:focus { top: 0; }