/* CASCADE-LAYER: intentionally-unlayered — page composition. See .planning/phases/01-foundation-activation/01-CONTEXT.md D-01. */
/* stylelint-disable media-feature-name-disallowed-list -- Phase 6: max-width media queries retained; mobile-first conversion deferred (D-08). Strict-value/!important/order cleaned. */

/**
 * Services Page Styles
 *
 * Clean, accessible styling using design tokens.
 * Animations kept to hover/focus interactions only.
 *
 * @package RhuarcsPetSupplies
 * @since 1.3.4
 */

/* ================================
   HERO SECTION
   Uses shared hero pattern from style.css.
   Only services-specific overrides here.
   ================================ */

.services-hero-section {
    position: relative;
    padding: var(--space-16) 0 var(--space-12);
    color: var(--text-on-purple);
    background: var(--gradient-purple);
    text-align: center;
    overflow: hidden;
}

.services-hero-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="paw-pattern" width="40" height="40" patternUnits="userSpaceOnUse"><path d="M20,10 Q15,5 10,10 Q15,15 20,10 M30,15 Q25,10 20,15 Q25,20 30,15 M10,25 Q5,20 0,25 Q5,30 10,25 M30,30 Q25,25 20,30 Q25,35 30,30" fill="rgba(255,255,255,0.1)" stroke="none"/></pattern></defs><rect width="100" height="100" fill="url(%23paw-pattern)"/></svg>');
    opacity: 0.3;
}

.services-hero-section .hero-content {
    position: relative;
    z-index: 1;
    max-width: 800px;
    margin: 0 auto;
}

.services-hero-section .hero-content h1 {
    font-size: clamp(2rem, 4vw + 1rem, 3.5rem);
    margin-bottom: var(--space-6);
    font-weight: var(--font-bold);
    text-shadow: 0 4px 8px rgb(0 0 0 / 30%);
    color: var(--text-on-purple);
}

.services-hero-description {
    font-size: clamp(1rem, 1.5vw + 0.5rem, 1.3rem);
    line-height: var(--leading-relaxed);
    opacity: 0.95;
    margin-bottom: var(--space-10);
    text-shadow: 0 2px 4px rgb(0 0 0 / 20%);
}

/* Hero decoration - text needs sufficient contrast */
.services-hero-section .hero-decoration {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: var(--space-4);
}

.services-hero-section .decoration-icon {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 32px;
    height: 32px;
    color: var(--text-on-purple);
}

.services-hero-section .decoration-text {
    padding: var(--space-1) var(--space-3);
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: var(--text-on-purple);
    background: rgb(0 0 0 / 25%);
    border-radius: var(--radius-sm);
    letter-spacing: var(--tracking-wide);
    text-shadow: 0 2px 8px rgb(0 0 0 / 50%);
}

/* ================================
   SKIP NAVIGATION
   ================================ */

.services-skip-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-4) var(--space-4);
    background: var(--neutral-50);
    border-bottom: 1px solid var(--border-light);
}

.services-skip-nav a {
    padding: var(--space-2) var(--space-4);
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: var(--primary-color);
    border: 1px solid var(--border-purple);
    border-radius: var(--radius-full);
    transition: var(--transition-fast);
    text-decoration: none;
}

.services-skip-nav a:hover,
.services-skip-nav a:focus {
    color: var(--text-on-purple);
    background: var(--primary-color);
    border-color: var(--primary-color);
}

/* ================================
   SERVICES PAGE LAYOUT
   ================================ */

.services-page {
    min-height: 70vh;
    padding: var(--space-16) 0;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
}

.services-content {
    padding: var(--space-12) var(--space-8);
}

/* ================================
   SERVICE CATEGORIES
   ================================ */

.service-category {
    margin-bottom: var(--space-16);
    scroll-margin-top: var(--space-8);
}

.service-category:last-child {
    margin-bottom: 0;
}

/* ================================
   CATEGORY HEADERS
   ================================ */

.category-header {
    position: relative;
    max-width: 900px;
    padding: var(--space-12) var(--space-8);
    background: white;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    text-align: center;
    margin-bottom: var(--space-8);
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
}

/* Category accent top borders */
.therapy-category .category-header::before,
.rescue-category .category-header::before,
.professional-category .category-header::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 4px;
}

.therapy-category .category-header::before {
    background: linear-gradient(90deg, #96CEB4, #FFEAA7, #DDA0DD);
}

.rescue-category .category-header::before {
    background: linear-gradient(90deg, #FF6B6B, #FF8E8E, #FFB6B6);
}

.professional-category .category-header::before {
    background: linear-gradient(90deg, #45B7D1, #74C0FC, #91CAF7);
}

.category-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 60px;
    height: 60px;
    /* stylelint-disable-next-line scale-unlimited/declaration-strict-value -- off-scale display size — no --text-* token is byte-identical; literal preserves zero-diff */
    font-size: 2.5rem;
    color: var(--primary-color);
    margin-bottom: var(--space-4);
    margin-left: auto;
    margin-right: auto;
}

.category-icon .icon {
    width: 40px;
    height: 40px;
}

.category-header h2 {
    font-family: var(--font-family-secondary);
    font-size: clamp(1.5rem, 3vw + 0.5rem, 2.5rem);
    font-weight: var(--font-bold);
    line-height: var(--leading-tight);
    color: var(--primary-color);
    margin-bottom: var(--space-4);
}

.category-description {
    font-family: var(--font-family-base);
    font-size: var(--text-base);
    line-height: var(--leading-relaxed);
    color: var(--text-secondary);
    margin-bottom: var(--space-4);
}

/* ================================
   THERAPY LIST
   ================================ */

.therapy-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-4);
    padding: var(--space-8);
    margin: var(--space-8) 0;
    background: white;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    list-style: none;
}

.therapy-list li {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3);
    font-family: var(--font-family-base);
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: var(--primary-color);
    background: var(--neutral-50);
    border-radius: var(--radius-md);
    transition: var(--transition-fast);
}

.therapy-list li:hover {
    background: var(--purple-50);
    box-shadow: var(--shadow-sm);
}

.therapy-list li .list-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 24px;
    height: 24px;
    color: var(--primary-color);
    flex-shrink: 0;
}

.therapy-list li .list-icon .icon {
    width: 18px;
    height: 18px;
}

/* ================================
   SERVICES GRID
   ================================ */

.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--space-8);
    margin-bottom: var(--space-8);
}

/* ================================
   SERVICE CARDS
   ================================ */

.service-card {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 320px;
    padding: var(--space-8);
    background: white;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    transition: var(--transition-base);
}

.service-card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-3px);
    border-color: var(--primary-color);
}

.service-card.featured {
    background: linear-gradient(135deg, rgb(92 31 113 / 2%) 0%, rgb(92 31 113 / 5%) 100%); /* token-exempt: compound rgba gradient tint — no token covers this 2-stop alpha variant */
    border: 2px solid var(--primary-color);
}

.service-card.featured::before {
    content: "FEATURED PARTNER";
    position: absolute;
    top: -1px;
    right: var(--space-4);
    padding: var(--space-1) var(--space-3);
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    color: var(--text-on-purple);
    background: var(--primary-color);
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
}

/* ================================
   SERVICE LOGOS
   ================================ */

.service-logo {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: var(--space-6);
    height: 80px;
}

.logo-placeholder {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 80px;
    /* stylelint-disable-next-line scale-unlimited/declaration-strict-value -- off-scale display size — no --text-* token is byte-identical; literal preserves zero-diff */
    font-size: 1.8rem;
    font-weight: var(--font-bold);
    border-radius: var(--radius-lg);
    transition: var(--transition-base);
    aspect-ratio: 1 / 1;
    overflow: hidden;
}

.service-card:hover .logo-placeholder {
    transform: scale(1.05);
}

/* Logo Variants */
.valley-logo {
    flex-direction: column;
    /* stylelint-disable-next-line scale-unlimited/declaration-strict-value -- off-scale display size — no --text-* token is byte-identical; literal preserves zero-diff */
    font-size: 1.2rem;
    line-height: 1;
    color: var(--text-on-purple);
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    border: 3px solid white;
    text-align: center;
}

.pawsitive-logo {
    /* stylelint-disable-next-line scale-unlimited/declaration-strict-value -- off-scale display size — no --text-* token is byte-identical; literal preserves zero-diff */
    font-size: 2rem;
    color: var(--text-on-purple);
    background: linear-gradient(135deg, #8B4513 0%, #D2691E 100%);
}

.lost-dogs-logo {
    flex-direction: column;
    padding: var(--space-2);
    /* stylelint-disable-next-line scale-unlimited/declaration-strict-value -- off-scale display size — no --text-* token is byte-identical; literal preserves zero-diff */
    font-size: 0.6rem;
    line-height: 1;
    color: var(--text-on-purple);
    background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 100%);
    text-align: center;
}

.save-a-dog-logo {
    flex-direction: column;
    /* stylelint-disable-next-line scale-unlimited/declaration-strict-value -- off-grid 6px (between --space-1=4px and --space-2=8px) — no --space-* byte-matches; literal preserves zero-diff */
    padding: 6px;
    /* stylelint-disable-next-line scale-unlimited/declaration-strict-value -- off-scale display size — no --text-* token is byte-identical; literal preserves zero-diff */
    font-size: 0.7rem;
    line-height: 1.1;
    /* stylelint-disable-next-line scale-unlimited/declaration-strict-value -- decorative brand/org hex (partner-logo / social tint) — no semantic token; literal preserves zero-diff */
    color: #fbbf24;
    background: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%);
    text-align: center;
}

.cheltenham-logo {
    flex-direction: column;
    /* stylelint-disable-next-line scale-unlimited/declaration-strict-value -- off-grid 6px (between --space-1=4px and --space-2=8px) — no --space-* byte-matches; literal preserves zero-diff */
    padding: 6px;
    /* stylelint-disable-next-line scale-unlimited/declaration-strict-value -- off-scale display size — no --text-* token is byte-identical; literal preserves zero-diff */
    font-size: 0.5rem;
    line-height: 1.1;
    color: var(--text-on-purple);
    background: linear-gradient(135deg, #7c2d12 0%, #dc2626 100%);
    text-align: center;
}

.starting-over-logo {
    font-size: var(--text-2xl);
    color: var(--text-on-purple);
    background: linear-gradient(135deg, #1f2937 0%, #374151 100%);
}

.petrescue-logo {
    flex-direction: column;
    padding: var(--space-2);
    /* stylelint-disable-next-line scale-unlimited/declaration-strict-value -- off-scale display size — no --text-* token is byte-identical; literal preserves zero-diff */
    font-size: 0.8rem;
    line-height: 1.1;
    color: var(--text-on-purple);
    background: linear-gradient(135deg, var(--emerald-600) 0%, var(--emerald-500) 100%);
    text-align: center;
}

.prodog-logo {
    flex-direction: column;
    /* stylelint-disable-next-line scale-unlimited/declaration-strict-value -- off-grid 6px (between --space-1=4px and --space-2=8px) — no --space-* byte-matches; literal preserves zero-diff */
    padding: 6px;
    /* stylelint-disable-next-line scale-unlimited/declaration-strict-value -- off-scale display size — no --text-* token is byte-identical; literal preserves zero-diff */
    font-size: 0.6rem;
    line-height: 1.1;
    color: var(--text-on-purple);
    background: linear-gradient(135deg, #1f2937 0%, #f59e0b 100%);
    text-align: center;
}

.looseLead-logo {
    font-size: var(--text-2xl);
    color: var(--text-on-purple);
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
}

.yours-in-paws-logo {
    font-size: var(--text-2xl);
    color: var(--text-on-purple);
    background: linear-gradient(135deg, #ec4899 0%, #f97316 100%);
}

/* ================================
   SERVICE INFORMATION
   ================================ */

.service-info {
    display: flex;
    flex: 1;
    flex-direction: column;
}

.service-info h3 {
    font-family: var(--font-family-secondary);
    font-size: var(--text-xl);
    font-weight: var(--font-bold);
    line-height: var(--leading-tight);
    color: var(--primary-color);
    margin-bottom: var(--space-2);
}

.service-type {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    /* stylelint-disable-next-line scale-unlimited/declaration-strict-value -- off-grid micro padding (0.2rem/0.6rem) — no --space-* byte-matches; literal preserves zero-diff */
    padding: 0.2rem 0.6rem;
    font-family: var(--font-family-base);
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: var(--text-secondary);
    background: var(--neutral-50);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    font-style: normal;
    margin-bottom: var(--space-4);
}

.service-type .icon {
    width: 14px;
    height: 14px;
}

.service-description {
    flex: 1;
    font-family: var(--font-family-base);
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    color: var(--text-secondary);
    margin-bottom: var(--space-4);
}

.therapist-name {
    font-family: var(--font-family-base);
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
    margin-bottom: var(--space-4);
}

/* ================================
   CONTACT INFORMATION
   ================================ */

.service-contact {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.contact-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    /* stylelint-disable-next-line scale-unlimited/declaration-strict-value -- off-scale display size — no --text-* token is byte-identical; literal preserves zero-diff */
    font-size: 0.9rem;
    font-weight: var(--font-semibold);
    color: var(--text-primary);
    background: var(--neutral-50);
    border: 2px solid transparent;
    border-radius: var(--radius-md);
    transition: var(--transition-fast);
    text-decoration: none;
    /* stylelint-disable-next-line declaration-property-value-keyword-no-deprecated -- `word-break: break-word` is deprecated, but it is NOT render-equivalent to overflow-wrap HERE: it eagerly breaks long contact strings (e.g. natasha@cheltenhamcatrescue.org.au wraps to 2 lines) whereas overflow-wrap defers the break and keeps it on 1 line. The eager wrap is the captured baseline render; swapping to overflow-wrap is a +1-line/-Npx visual delta (verified via before/after pixel diff). services.css carries ZERO sanctioned visual delta, so the deprecated keyword is retained under this scoped disable to preserve zero-diff. */
    word-break: break-word;
}

.contact-link:hover {
    color: var(--text-on-purple);
    background: var(--primary-color);
    transform: translateX(4px);
}

.contact-link.phone {
    font-size: var(--text-base);
    font-weight: var(--font-bold);
    color: var(--success);
}

.contact-link.phone:hover {
    background: var(--success);
}

.contact-link.email {
    color: var(--info);
}

.contact-link.email:hover {
    background: var(--info);
}

.contact-link.website {
    color: var(--primary-color);
}

.contact-link.facebook {
    /* stylelint-disable-next-line scale-unlimited/declaration-strict-value -- decorative brand/org hex (partner-logo / social tint) — no semantic token; literal preserves zero-diff */
    color: #1877f2;
}

.contact-link.facebook:hover {
    background: #1877f2;
}

.contact-link.petrescue {
    /* stylelint-disable-next-line scale-unlimited/declaration-strict-value -- decorative brand/org hex (partner-logo / social tint) — no semantic token; literal preserves zero-diff */
    color: #e91e63;
}

.contact-link.petrescue:hover {
    background: #e91e63;
}

.contact-link.mobile {
    color: var(--warning);
}

.contact-link.mobile:hover {
    background: var(--warning);
}

.contact-label {
    margin: var(--space-2) 0 0;
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

/* Service Addresses */
.service-address {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    padding: var(--space-4);
    margin: 0;
    /* stylelint-disable-next-line scale-unlimited/declaration-strict-value -- off-scale display size — no --text-* token is byte-identical; literal preserves zero-diff */
    font-size: 0.9rem;
    line-height: var(--leading-normal);
    color: var(--text-secondary);
    background: var(--neutral-50);
    border-radius: var(--radius-md);
}

.service-address i {
    color: var(--primary-color);
    /* stylelint-disable-next-line scale-unlimited/declaration-strict-value -- off-grid 1-2px nudge — no --space-* token byte-matches; literal preserves zero-diff */
    margin-top: 2px;
    flex-shrink: 0;
}

.service-locations {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.location {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    padding: var(--space-4);
    margin: 0;
    /* stylelint-disable-next-line scale-unlimited/declaration-strict-value -- off-scale display size — no --text-* token is byte-identical; literal preserves zero-diff */
    font-size: 0.9rem;
    line-height: 1.4;
    color: var(--text-secondary);
    background: var(--neutral-50);
    border-radius: var(--radius-md);
}

.location i {
    color: var(--primary-color);
    /* stylelint-disable-next-line scale-unlimited/declaration-strict-value -- off-grid 1-2px nudge — no --space-* token byte-matches; literal preserves zero-diff */
    margin-top: 2px;
    flex-shrink: 0;
}

.location strong {
    color: var(--text-primary);
}

/* ================================
   SERVICE NOTES
   ================================ */

.service-note {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-4);
    background: linear-gradient(135deg, rgb(59 130 246 / 10%) 0%, rgb(59 130 246 / 5%) 100%);
    border: 1px solid rgb(59 130 246 / 20%);
    border-radius: var(--radius-md);
    margin-top: var(--space-4);
}

.service-note i,
.service-note .icon {
    color: var(--info);
    /* stylelint-disable-next-line scale-unlimited/declaration-strict-value -- off-grid 1-2px nudge — no --space-* token byte-matches; literal preserves zero-diff */
    margin-top: 2px;
    flex-shrink: 0;
}

.service-note .icon {
    width: 18px;
    height: 18px;
}

.service-note p {
    margin: 0;
    /* stylelint-disable-next-line scale-unlimited/declaration-strict-value -- off-scale display size — no --text-* token is byte-identical; literal preserves zero-diff */
    font-size: 0.9rem;
    line-height: var(--leading-normal);
    color: var(--text-primary);
}

/* ================================
   SERVICES CONTACT SECTION
   ================================ */

.services-contact {
    padding: var(--space-12) var(--space-8);
    color: var(--text-on-purple);
    background: var(--gradient-purple-subtle);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    text-align: center;
    margin-top: var(--space-12);
}

.services-contact .contact-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 64px;
    height: 64px;
    margin: 0 auto var(--space-6);
    color: var(--text-on-purple);
}

.services-contact .contact-icon .icon {
    width: 48px;
    height: 48px;
}

.services-contact h2 {
    font-size: clamp(1.5rem, 2.5vw + 0.5rem, 2rem);
    font-weight: var(--font-bold);
    margin-bottom: var(--space-4);

    /* The section sits on the purple band — without this the heading
       inherits style.css's dark heading color (unreadable on purple). */
    color: var(--text-on-purple);
}

.services-contact p {
    max-width: 600px;
    font-size: var(--text-lg);
    line-height: var(--leading-relaxed);
    opacity: 0.9;
    margin-bottom: var(--space-8);
    margin-left: auto;
    margin-right: auto;
}

.contact-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: var(--space-4);
}

/* ------------------------------------------------------------------
   .contact-actions buttons — KEPT as emergency-band variants (A4 / D-04).
   These are NOT duplicates of the canonical css/components/button.css
   shapes: that .btn is a FILLED purple gradient with white text, sized for
   LIGHT surfaces. The .services-contact band sits on a PURPLE background
   (--gradient-purple-subtle), so this set is the inverse — light-on-purple,
   always pill (--radius-full), with phone-vs-secondary sizing the canonical
   pair does not express. Folding any of these into the canonical filled
   shape would re-render the emergency band (purple-on-purple = invisible CTAs)
   — a regression. Each rule is tokenised in place and KEPT.
   ------------------------------------------------------------------ */

/* KEEP (variant): inverted pill base — larger padding + --text-base on a purple
   surface; canonical .btn is a smaller filled rectangle. No exact-duplicate match. */
.contact-actions .btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-4) var(--space-8);
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    border: 2px solid transparent;
    border-radius: var(--radius-full);
    transition: var(--transition-base);
    text-decoration: none;
}

/* KEEP (variant): phone = primary CTA — inverted (white fill, purple text) and
   intentionally LARGER (--text-lg, --space-10) than the canonical filled primary. */
.contact-actions .btn-primary {
    padding: var(--space-4) var(--space-10);
    font-size: var(--text-lg);
    font-weight: var(--font-bold);
    color: var(--primary-color);
    background: white;
}

.contact-actions .btn-primary:hover {
    background: var(--neutral-50);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

/* KEEP (variant): secondary CTA — translucent-white on purple, smaller; no
   canonical equivalent (canonical has no surface-inverted secondary). */
.contact-actions .btn-secondary {
    padding: var(--space-3) var(--space-6);
    font-size: var(--text-sm);
    color: var(--text-on-purple);
    background: rgb(255 255 255 / 10%);
    border-color: rgb(255 255 255 / 30%);
}

.contact-actions .btn-secondary:hover {
    background: rgb(255 255 255 / 20%);
    border-color: rgb(255 255 255 / 50%);
    transform: translateY(-2px);
}

/* KEEP (variant): outline CTA — WHITE 2px border on purple. The canonical
   .btn--outline uses a purple border (invisible on this purple band), so this
   surface-inverted outline is a genuine variant, not a fold-in. */
.contact-actions .btn-outline {
    padding: var(--space-3) var(--space-6);
    font-size: var(--text-sm);
    color: var(--text-on-purple);
    background: transparent;
    border-color: var(--text-on-purple);
}

.contact-actions .btn-outline:hover {
    color: var(--primary-color);
    background: white;
    transform: translateY(-2px);
}

/* KEEP (structural): icon wrappers — layout-only, no canonical counterpart. */
.contact-actions .btn .btn-icon {
    display: inline-flex;
    align-items: center;
}

.contact-actions .btn .btn-icon .icon {
    width: 18px;
    height: 18px;
}

/* ================================
   EMERGENCY SECTION
   Purple palette with red accent for brand cohesion
   ================================ */

.emergency-section {
    position: relative;
    padding: var(--space-16) 0;
    color: var(--text-on-purple);
    background: linear-gradient(135deg, var(--purple-900) 0%, var(--purple-800) 50%, var(--purple-700) 100%);
    overflow: hidden;
    border-top: 6px solid var(--error);
}

.emergency-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="emergency-pattern" width="30" height="30" patternUnits="userSpaceOnUse"><path d="M15,5 L20,10 L15,15 L10,10 Z" fill="rgba(255,255,255,0.05)"/></pattern></defs><rect width="100" height="100" fill="url(%23emergency-pattern)"/></svg>');
    opacity: 0.5;
}

.emergency-content {
    position: relative;
    z-index: 1;

    /* The content sits inside style.css's near-white .emergency-content
       card (rgba(255,255,255,0.95)) — override this sheet's dark-design
       .emergency-section { color: var(--text-on-purple) } so the
       description/disclaimer are not white-on-white. Scoped to the
       services page; the front-page emergency section is untouched. */
    color: var(--text-primary);
}

.emergency-header {
    text-align: center;
    margin-bottom: var(--space-12);
}

.emergency-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 80px;
    height: 80px;
    margin: 0 auto var(--space-6);
    background: var(--error);
    border-radius: var(--radius-circle);
    /* stylelint-disable-next-line scale-unlimited/declaration-strict-value -- bespoke status-tinted glow (emergency-red / vet-cyan / clinic-green) — no --shadow-* byte-matches; literal preserves zero-diff */
    box-shadow: 0 0 0 8px rgb(229 57 53 / 30%);
}

.emergency-icon .icon {
    width: 40px;
    height: 40px;
    color: var(--text-on-purple);
}

.emergency-title {
    font-size: clamp(2rem, 3.5vw + 0.5rem, 3rem);
    margin-bottom: var(--space-6);
    font-weight: var(--font-bold);
}

.emergency-description {
    max-width: 700px;
    margin: 0 auto;
    font-size: clamp(1rem, 1.5vw + 0.5rem, 1.2rem);
    line-height: var(--leading-relaxed);
    opacity: 0.95;
}

.emergency-disclaimer {
    font-size: var(--text-sm);
    opacity: 0.8;
    margin-top: var(--space-4);
    font-style: italic;
}

/* ================================
   VET CLINIC CARDS
   ================================ */

.vet-clinics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--space-8);
    margin-top: var(--space-12);
}

.vet-clinic {
    padding: var(--space-8);
    color: var(--text-primary);
    background: white;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    transition: var(--transition-base);
}

.vet-clinic:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-3px);
}

.clinic-header {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--space-4);
    margin-bottom: var(--space-6);
}

.clinic-header h4 {
    margin: 0;
    font-size: var(--text-xl);
    font-weight: var(--font-bold);
    line-height: var(--leading-snug);
    color: var(--primary-color);
}

.clinic-badge {
    padding: var(--space-2) var(--space-4);
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    border-radius: var(--radius-full);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    white-space: nowrap;
}

.emergency-badge {
    color: var(--text-on-purple);
    background: var(--error);
    /* stylelint-disable-next-line scale-unlimited/declaration-strict-value -- bespoke status-tinted glow (emergency-red / vet-cyan / clinic-green) — no --shadow-* byte-matches; literal preserves zero-diff */
    box-shadow: 0 2px 10px rgb(229 57 53 / 30%);
}

.specialist-badge {
    color: var(--text-on-purple);
    background: linear-gradient(135deg, #45B7D1, #74C0FC);
    /* stylelint-disable-next-line scale-unlimited/declaration-strict-value -- bespoke status-tinted glow (emergency-red / vet-cyan / clinic-green) — no --shadow-* byte-matches; literal preserves zero-diff */
    box-shadow: 0 2px 10px rgb(69 183 209 / 30%);
}

.referral-badge {
    color: var(--text-primary);
    background: linear-gradient(135deg, #96CEB4, #B8E6D3);
    /* stylelint-disable-next-line scale-unlimited/declaration-strict-value -- bespoke status-tinted glow (emergency-red / vet-cyan / clinic-green) — no --shadow-* byte-matches; literal preserves zero-diff */
    box-shadow: 0 2px 10px rgb(150 206 180 / 30%);
}

.clinic-details {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.clinic-contact {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    margin: 0;
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
}

.clinic-contact .contact-icon {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 20px;
    height: 20px;
    color: var(--primary-color);
    opacity: 0.8;
    flex-shrink: 0;
    /* stylelint-disable-next-line scale-unlimited/declaration-strict-value -- off-grid 1-2px nudge — no --space-* token byte-matches; literal preserves zero-diff */
    margin-top: 1px;
}

.clinic-contact .contact-icon .icon {
    width: 16px;
    height: 16px;
}

.clinic-contact a {
    font-weight: var(--font-semibold);
    color: var(--primary-color);
    text-decoration: none;
}

.clinic-contact a:hover {
    text-decoration: underline;
}

/* ================================
   RESPONSIVE DESIGN
   ================================ */

/* Tablet landscape (640px-767px) */
@media (width >= 640px) and (width <= 767px) {
    .services-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .vet-clinics {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Tablet portrait and below */
@media (width <= 768px) {
    .services-content {
        padding: var(--space-8) var(--space-6);
    }

    .services-grid {
        gap: var(--space-6);
    }

    .service-card {
        min-height: 280px;
        padding: var(--space-6);
    }

    .therapy-list {
        grid-template-columns: 1fr;
        gap: var(--space-3);
        padding: var(--space-6);
    }

    .category-header {
        padding: var(--space-8) var(--space-6);
        margin-bottom: var(--space-6);
    }

    .contact-actions {
        flex-direction: column;
        align-items: center;
    }

    .contact-actions .btn {
        justify-content: center;
        width: 100%;
        max-width: 300px;
    }

    .vet-clinics {
        gap: var(--space-6);
    }

    .clinic-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .service-logo {
        height: 60px;
    }

    .logo-placeholder {
        width: 60px;
        /* stylelint-disable-next-line scale-unlimited/declaration-strict-value -- off-scale display size — no --text-* token is byte-identical; literal preserves zero-diff */
        font-size: 1.3rem;
    }

    .services-skip-nav {
        gap: var(--space-1);
        padding: var(--space-3);
    }

    .services-skip-nav a {
        padding: var(--space-1) var(--space-3);
        font-size: var(--text-xs);
    }
}

/* Small mobile */
@media (width <= 480px) {
    .services-hero-section {
        padding: var(--space-12) 0 var(--space-8);
    }

    .services-content {
        padding: var(--space-8) 0;
    }

    .category-header {
        padding: var(--space-6) var(--space-4);
    }

    .service-card {
        padding: var(--space-6);
        margin: 0 var(--space-2);
    }

    .services-grid {
        grid-template-columns: 1fr;
    }

    .vet-clinics {
        grid-template-columns: 1fr;
    }

    .service-category {
        margin-bottom: var(--space-12);
    }

    .services-contact {
        padding: var(--space-8) var(--space-4);
    }

    .contact-actions .btn {
        min-width: 100%;
        max-width: 100%;
    }

    .services-hero-section .hero-decoration {
        gap: var(--space-2);
    }

    .services-hero-section .decoration-text {
        font-size: var(--text-xs);
    }
}

/* ================================
   ACCESSIBILITY & FOCUS STYLES
   ================================ */

/* CONS-05: the divergent 3px var(--tertiary-color) rings here were REMOVED.
   --tertiary-color is the legacy --purple-400 alias (wrong ring colour); the
   canonical site-wide ring is base.css :focus-visible (3px var(--purple-500),
   @layer base). The .btn rule was a :focus (not :focus-visible) override —
   base.css now covers keyboard focus for both the links and the buttons, and
   the card :focus-within rings were divergent extras with no base counterpart.
   No replacement added (D-11/CONS-05). */

/* High contrast mode support.
   D-07: !important removed — these overrides win by source order (they sit after
   the base rules in this same file) and matched specificity. .service-card is
   bumped to .service-card.service-card (0,2,0) so it beats the .service-card.featured
   border (0,2,0, css/services.css base) without !important; .contact-link and the
   hero h1 have no higher-specificity competitor, so source order alone wins. */
/* stylelint-disable-next-line media-feature-name-value-no-unknown -- `high` is a valid prefers-contrast value (MDN); this stylelint build's dictionary lags the spec */
@media (prefers-contrast: high) {
    .service-card.service-card {
        border: 2px solid var(--text-primary);
    }

    .contact-link {
        border: 2px solid var(--text-primary);
    }

    .services-hero-section .hero-content h1 {
        color: var(--text-on-purple);
        text-shadow: none;
    }
}

/* Reduced motion: the universal `*,::before,::after` animation/transition guard
   lives ONCE in css/accessibility.css (lines ~211, enqueued BEFORE this sheet —
   theme-setup.php accessibility@306 < services@475). It is byte-identical to the
   block that used to live here, so the local copy was a pure duplicate. Removed
   (D-07) — accessibility.css's earlier guard still applies site-wide; zero render
   change. Eliminates 4 !important with no survivor. */

/* ================================
   PRINT STYLES
   D-07: !important removed — every rule sits after its base counterpart in this
   same file (matched single-class specificity → source order wins). .service-card
   is bumped to .service-card.service-card so its print border beats the
   .service-card.featured border (0,2,0) without !important.
   ================================ */

@media print {
    .services-hero-section {
        /* stylelint-disable-next-line scale-unlimited/declaration-strict-value -- pure print ink reset (black on white); no semantic token for #000; literal is the print-correct value */
        color: black;
        background: white;
    }

    .service-card.service-card {
        border: 1px solid #ccc;
        box-shadow: none;
        break-inside: avoid;
    }

    .services-contact {
        /* stylelint-disable-next-line scale-unlimited/declaration-strict-value -- pure print ink reset (black on white); no semantic token for #000; literal is the print-correct value */
        color: black;
        background: white;
        border: 1px solid #ccc;
    }

    .emergency-section {
        /* stylelint-disable-next-line scale-unlimited/declaration-strict-value -- pure print ink reset (black on white); no semantic token for #000; literal is the print-correct value */
        color: black;
        background: white;
        border-top: 3px solid #ccc;
    }

    .services-skip-nav {
        display: none;
    }
}