/* 7EMPLE — Shared components.
   Additive utility + component classes. Load AFTER inline <style> so these
   can be adopted incrementally without breaking existing page-prefixed styles. */

/* ---------- Unified button ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 14px 22px;
  font-family: inherit;
  font-size: var(--font-sm);
  font-weight: 600;
  letter-spacing: 0.02em;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text);
  cursor: pointer;
  text-decoration: none;
  transition:
    background var(--dur-fast) var(--ease-spring),
    color var(--dur-fast) var(--ease-spring),
    border-color var(--dur-fast) var(--ease-spring),
    transform var(--dur-fast) var(--ease-spring);
}

.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--primary {
  background: var(--orange);
  color: var(--text);
}
.btn--primary:hover { background: var(--orange-dark); }

.btn--ghost {
  background: transparent;
  color: var(--text);
  border-color: var(--border-strong);
}
.btn--ghost:hover { border-color: var(--text); }

.btn--pill {
  border-radius: var(--radius-pill);
  padding: 10px 20px;
}

.btn--ascend {
  background: var(--orange-soft);
  border-color: var(--orange-ring);
  color: var(--text);
}
.btn--ascend:hover {
  background: var(--orange);
  border-color: var(--orange);
}

/* ---------- State convention: .is-* ---------- */
/* Aliases so older state classes keep working while new code uses .is-* */
.is-open    { /* hook — page CSS defines visuals via .open or .is-open */ }
.is-active  { }
.is-visible { }
.is-hovered { }

/* ---------- Footer nav title ---------- */
/* After the h4 -> h2 heading-order fix, mirror the old .f-nav h4 styling
   onto the new class so the footer looks identical. */
.f-nav .f-nav-title,
.f-nav h2.f-nav-title {
  font-size: 11px;
  color: var(--dim);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 24px;
}

/* ---------- Inert accordion bodies ---------- */
/* Fallback visual for browsers that don't yet support [inert] — ensures
   closed accordion panels are not interactive and not announced. */
[inert] { pointer-events: none; }

/* ---------- Layout utility ---------- */
.wrap { max-width: var(--wrap-max); margin-inline: auto; }