/* PI Treatment Network — shared brand styles.
   Loaded by every page BEFORE its own <style>, so page styles can override.
   Owns: color tokens, the logo, the gold shimmer, the gold button, focus outlines. */

:root {
  --navy: #1B2A4A;
  --navy-deep: #152238;
  --gold: #C9A227;
  --gold-soft: #E5C766;
  --mist: #F2F5F9;
  --line: #DCE3EC;
  --ink: #22314F;
  --ink-muted: #5A6B85;
  --white: #FFFFFF;
  --radius: 10px;
}

/* ── logo ── */
.logo {
  display: flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
}
.logo-mark {
  font-family: "Archivo", "Segoe UI", sans-serif;
  font-weight: 800;
  font-size: 1.48rem;
  color: var(--navy);
  letter-spacing: -0.01em;
}
.logo-bar {
  width: 2.5px;
  height: 32px;
  background: var(--gold);
  border-radius: 1px;
  transition: transform 0.25s ease, background-color 0.25s ease;
}
.logo:hover .logo-bar {
  transform: scaleY(1.12);
  background: var(--gold-soft);
}
.logo-word { line-height: 1.05; font-family: "Archivo", "Segoe UI", sans-serif; }
.logo-word .top {
  font-weight: 800;
  font-size: 1.1rem;
  color: var(--navy);
  letter-spacing: 0.02em;
}
.logo-word .bottom {
  font-weight: 700;
  font-size: 0.65rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold);
}
/* dark-background variant: add class "on-dark" to the .logo element */
.logo.on-dark .logo-mark,
.logo.on-dark .logo-word .top { color: var(--white); }

/* ── gold shimmer accent ── */
.shimmer {
  background: linear-gradient(90deg, #C9A227 0%, #C9A227 42%, #E5C766 50%, #C9A227 58%, #C9A227 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: text-shimmer 9s linear infinite;
}
@keyframes text-shimmer {
  0% { background-position: 200% 50%; }
  100% { background-position: 0% 50%; }
}

/* ── gold button ── */
.btn-gold {
  display: inline-block;
  font-family: "Archivo", "Segoe UI", sans-serif;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.01em;
  color: var(--navy-deep);
  background: var(--gold);
  text-decoration: none;
  padding: 15px 28px;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(201, 162, 39, 0.28);
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.btn-gold:hover {
  background: var(--gold-soft);
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(201, 162, 39, 0.38);
}
.btn-gold:disabled { opacity: 0.7; cursor: default; transform: none; }
.btn-gold .arrow { display: inline-block; margin-left: 8px; transition: transform 0.2s ease; }
.btn-gold:hover .arrow { transform: translateX(4px); }

/* ── focus (light backgrounds; dark pages override with gold-soft) ── */
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .shimmer { animation: none; }
  .btn-gold:hover { transform: none; }
  .logo:hover .logo-bar { transform: none; }
}