/* =============================================================================
   Companion Animal -- Small Animal & Companion Practice
   =============================================================================
   For a small-animal vet: a warm, reassuring teal-and-amber theme with rounded shapes, written for the owner sitting in the waiting room worrying about their dog.

   SCOPING RULE (see .claude section 1.5 -- every theme must follow it).
   This file is loaded on EVERY page of the install, because `data-theme` sits on
   <html>: the public site, the admin and user control panels, and the printable
   CV at portfolio_pdf.php all link the active theme's theme.css. So it is split:

     1. TOKENS -- `[data-theme="vet_companion"] { ... }` sets brand colors and fonts
        only. These reach the control panels too, which is intended.
     2. PUBLIC -- everything structural is scoped to something that exists on
        public pages alone: `main` (emitted by public-header.php and nowhere
        else), `.site-header`, `.site-footer`, `.bg-animated`.

   The .cv sheet stays ink-on-paper in every theme: it is the same markup the PDF
   export prints.
   ============================================================================= */

/* ---------- 1. Tokens (shared with the control panels) ---------- */
[data-theme="vet_companion"] {
    --color-primary: #12857f;
    --color-primary-dark: #0c625e;
    --color-accent: #e8963c;
    --font-heading: "Segoe UI Rounded", "SF Pro Rounded", Nunito, "Segoe UI", system-ui, sans-serif;
    --bg-gradient: linear-gradient(165deg, #eaf7f6 0%, #ffffff 48%, #fdf5ea 100%);

    --sp-ink: #132033;
    --sp-muted: #5b6b82;
    --sp-line: #e3e8f0;
    --sp-tint: color-mix(in srgb, #12857f 9%, #ffffff);
    --sp-radius: 20px;
}

/* ---------- 2. Canvas ---------- */
[data-theme="vet_companion"] .bg-animated { background: var(--bg-gradient); }
[data-theme="vet_companion"] .bg-grid-line { stroke: #12857f; opacity: 0.055; }
[data-theme="vet_companion"] .bg-blob { opacity: 0.30; }

/* ---------- 3. Public chrome ---------- */
[data-theme="vet_companion"] .site-header {
    background: rgba(255, 255, 255, 0.82);
    backdrop-filter: saturate(150%) blur(12px);
    -webkit-backdrop-filter: saturate(150%) blur(12px);
    border-bottom: 1px solid var(--sp-line);
}
[data-theme="vet_companion"] .site-nav a { color: var(--sp-muted); font-weight: 600; }
[data-theme="vet_companion"] .site-nav a:hover { color: #0c625e; }
[data-theme="vet_companion"] main { color: var(--sp-ink); }
[data-theme="vet_companion"] main h1,
[data-theme="vet_companion"] main h2,
[data-theme="vet_companion"] main h3 { color: var(--sp-ink); }
[data-theme="vet_companion"] .site-footer { background: #ffffff; border-top: 1px solid var(--sp-line); }

[data-theme="vet_companion"] main .btn,
[data-theme="vet_companion"] .site-header .btn {
    border-radius: 999px;
    box-shadow: 0 10px 24px -14px #12857f;
}
[data-theme="vet_companion"] main .btn:hover,
[data-theme="vet_companion"] .site-header .btn:hover { transform: translateY(-1px); }

/* ---------- 4. Hero ---------- */
[data-theme="vet_companion"] .hp-hero { padding: 78px 0 46px; }
[data-theme="vet_companion"] .hp-eyebrow {
    background: var(--sp-tint);
    color: #0c625e;
    border: 1px solid var(--sp-line);
    letter-spacing: 0.12em;
}
[data-theme="vet_companion"] .hp-headline {
    font-size: clamp(2.2rem, 5vw, 3.4rem);
    letter-spacing: -0.02em;
    line-height: 1.08;
    color: var(--sp-ink);
}
[data-theme="vet_companion"] .hp-subheadline { color: var(--sp-muted); font-size: 1.08rem; line-height: 1.65; }
[data-theme="vet_companion"] .hp-hero-photo {
    border-radius: 24px;
    box-shadow: 0 30px 60px -34px #12857f;
}

/* ---------- 5. Sections ---------- */
[data-theme="vet_companion"] .hp-section-title { letter-spacing: -0.02em; }
[data-theme="vet_companion"] .hp-section-title::before {
    content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 50%;
    background: #e8963c; margin-right: 12px; vertical-align: middle;
}

[data-theme="vet_companion"] .hp-grid-card,
[data-theme="vet_companion"] .hp-work-card,
[data-theme="vet_companion"] .hp-post-card,
[data-theme="vet_companion"] .hp-testimonial,
[data-theme="vet_companion"] main .surface {
    border-radius: var(--sp-radius);
    border: 1px solid var(--sp-line);
    background: #ffffff;
    box-shadow: 0 14px 34px -30px rgba(15, 23, 42, 0.7);
}
[data-theme="vet_companion"] .hp-grid-card:hover,
[data-theme="vet_companion"] a.hp-work-card:hover,
[data-theme="vet_companion"] .hp-post-card:hover {
    border-color: #12857f;
    box-shadow: 0 22px 46px -28px #12857f;
}
[data-theme="vet_companion"] .hp-grid-icon {
    background: var(--sp-tint);
    color: #0c625e;
    border-radius: 16px;
}
[data-theme="vet_companion"] .hp-stat-value { color: #0c625e; letter-spacing: -0.02em; }
[data-theme="vet_companion"] .hp-chip,
[data-theme="vet_companion"] .hp-skill-chip {
    background: var(--sp-tint);
    color: #0c625e;
    border: 1px solid var(--sp-line);
}
[data-theme="vet_companion"] .hp-timeline { border-left-color: var(--sp-line); }
[data-theme="vet_companion"] .hp-timeline-item::before { background: #12857f; box-shadow: 0 0 0 4px var(--sp-tint); }
[data-theme="vet_companion"] .hp-cta {
    border-radius: 26px;
    background: linear-gradient(135deg, #0c625e, #12857f 55%, #e8963c);
}
[data-theme="vet_companion"] .hp-cta .btn { background: #ffffff; color: #0c625e; }

/* ---------- 6. Signature motion ----------
   Each specialization gets one movement of its own, defined here rather than in
   assets/css/homepage-hero.css: a theme package cannot add to that shared file, so anything
   beyond the stock .hh-* classes has to travel with the theme. */
[data-theme="vet_companion"] .sig-pad { animation: vcPad 3.2s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes vcPad { 0%, 100% { transform: scale(1); opacity: .85; } 50% { transform: scale(1.09); opacity: 1; } }
[data-theme="vet_companion"] .sig-beat { stroke-dasharray: 300; animation: vcBeat 3.4s linear infinite; }
@keyframes vcBeat { 0% { stroke-dashoffset: 300; } 100% { stroke-dashoffset: -300; } }
[data-theme="vet_companion"] .sig-tag { animation: vcTag 4.4s ease-in-out infinite; transform-box: fill-box; transform-origin: top center; }
@keyframes vcTag { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg); } }

@media (prefers-reduced-motion: reduce) {
    [data-theme="vet_companion"] .homepage-hero-art *,
    [data-theme="vet_companion"] .hp-eyebrow::before { animation: none !important; }
}

/* ---------- 7. Print ---------- */
@media print {
    [data-theme="vet_companion"] .bg-animated,
    [data-theme="vet_companion"] .site-header,
    [data-theme="vet_companion"] .site-footer { display: none !important; }
    [data-theme="vet_companion"] main { color: #1e293b; }
}