/* ============================================================
   brand.css — single source of truth for the color system.
   South Texas Vascular Institute (STVI). Navy leads, red punctuates,
   gold accents (dark backgrounds only). Derived from confirmed brand
   collateral (infographics + tri-fold brochure) — see CLAUDE.md.
   Recolor check (every build): accent-deep vs bg >=4.5:1 ·
   accent-bright(gold) vs dark >=4.5:1 · muted vs bg-2 >=4.5:1.
   ============================================================ */
:root {
  /* — Core palette (hex) — */
  --color-primary:      #0A1F5C;  /* deep navy — hero/dark sections, footer, nav, primary surface */
  --color-primary-mid:  #1A3A8F;  /* mid navy — hover, secondary buttons, borders/dividers on dark */
  --color-accent:       #C8102E;  /* red — the "pop" / CTA + urgency accent (active brand color, not semantic-only) */
  --color-accent-deep:  #8F0C22;  /* red hover / pressed — clears 4.5:1 on white */
  --color-accent-bright:#C79A3B;  /* GOLD — the on-DARK decorative accent (link-arrows, stat numbers, dividers on navy). Gold goes low-contrast on light, so it is reserved for dark backgrounds only; red remains the accent used for buttons on any background. */
  --color-accent-gold-deep: #9A7420; /* on-LIGHT gold fallback — only if gold text is ever needed on a light bg */
  --color-dark:         #0A1F5C;  /* single canonical dark-section bg (== primary) — never let a second near-navy drift in */
  --color-dark-3:       #12296B;  /* deepest dark-elevation surface (slightly lighter navy step) */
  --color-ink:          #111827;  /* body + heading text */
  --color-muted:        #5B6472;  /* muted / secondary text — kept darker than usual for older-user contrast */
  --color-muted-light:  #A9B3C9;  /* muted text on dark navy backgrounds */
  --color-line:         #CBD2DC;  /* hairlines / borders / chrome ("silver") */
  --color-bg:           #FFFFFF;  /* page background */
  --color-bg-2:         #F3F4F7;  /* light section tint */
  --color-rating:       #C79A3B;  /* star-rating gold — ties the review widget to brand gold */

  /* — Channel triplets (R, G, B) for rgba() tinting — */
  --color-primary-rgb:       10, 31, 92;
  --color-primary-mid-rgb:   26, 58, 143;
  --color-accent-rgb:        200, 16, 46;
  --color-accent-deep-rgb:   143, 12, 34;
  --color-accent-bright-rgb: 199, 154, 59;
  --color-dark-rgb:          10, 31, 92;
  --color-dark-3-rgb:        18, 41, 107;
  --color-ink-rgb:           17, 24, 39;

  /* size the nav off the client logo — see CLAUDE.md logo rules */
  --nav-height:         104px;  /* nav bar height — slightly taller for the full practice name lockup */
  --nav-logo-height:    56px;   /* client logo <img> height in the nav (once supplied) */
  --footer-logo-height: 84px;   /* client logo <img> height in the footer (once supplied) */
}

/* ============================================================
   Uniform content-photo container — used for EVERY content photo
   site-wide. One ratio (4:3) so no photo differs in size from
   another. Never use a fixed h-[Npx]. The ONLY exception is
   people/owner portraits: add --portrait (3:4, top-anchored).
   ============================================================ */
.photo-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 16px;
  background: var(--color-bg-2);
  box-shadow: 0 20px 45px -24px rgba(var(--color-dark-rgb), 0.60),
              0 0 0 1px rgba(var(--color-dark-rgb), 0.06) inset;
}
.photo-frame > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.photo-frame--portrait { aspect-ratio: 3 / 4; }
.photo-frame--portrait > img { object-position: center top; }