/* PawPicks — Global Theme (Token-based)
   Uses design-tokens.css for all colors. Load design-tokens.css BEFORE this file.
   This file only overrides component-specific styles. */

:root {
  /* Legacy variable support for existing HTML — mapped to new tokens */
  --blue: var(--brand-amber);
  --blue-dark: var(--brand-amber-dark);
  --blue-light: var(--brand-amber-light);
  --blue-pale: var(--brand-amber-pale);
  --accent: var(--brand-amber);
  --accent-dark: var(--brand-amber-dark);
  --off-white: var(--surface-secondary);
  --white: var(--surface-primary);
  --gray-900: var(--text-primary);
  --gray-800: var(--surface-dark-secondary);
  --gray-700: var(--text-secondary);
}

/* Body warm paper background */
body {
  background: var(--surface-primary) !important;
  color: var(--text-primary) !important;
  -webkit-font-smoothing: antialiased;
}

/* Nav — warm background, amber logo */
nav {
  background: var(--surface-primary) !important;
  border-bottom: 1px solid var(--border-light) !important;
}
.logo { color: var(--text-primary) !important; letter-spacing: -.03em; }
.logo span, .logo em { color: var(--brand-amber) !important; }
.nav-links a { color: var(--text-primary) !important; }
.nav-links a:hover { color: var(--brand-amber) !important; }
.nav-cta { background: var(--brand-amber) !important; color: var(--text-light) !important; }
.nav-cta:hover { background: var(--brand-amber-dark) !important; }

/* Trust bar — deep ink */
.trust-bar { background: var(--surface-dark) !important; color: var(--text-light) !important; }

/* Buttons */
.btn-primary {
  background: var(--brand-amber) !important;
  color: var(--text-light) !important;
  box-shadow: 0 4px 20px rgba(196,122,15,.35) !important;
}
.btn-primary:hover { background: var(--brand-amber-dark) !important; }
.btn-secondary {
  border-color: var(--border-medium) !important;
  color: var(--text-secondary) !important;
}
.btn-secondary:hover { border-color: var(--brand-amber) !important; color: var(--brand-amber) !important; }

/* Section labels + kickers */
.section-label { color: var(--brand-amber) !important; }

/* Cards hover */
.fcard:hover, .cat-card:hover { border-color: var(--border-accent) !important; }
.fcard:hover { transform: translateY(-6px) rotate(-.3deg) !important; }
.cat-card:hover { transform: translateY(-5px) rotate(.3deg) !important; }
.fcard:hover .fcard-cta { background: var(--brand-amber) !important; color: var(--text-light) !important; }
.link-review { background: var(--brand-amber-light) !important; color: var(--brand-amber) !important; }
.link-review:hover { background: var(--brand-amber) !important; color: var(--text-light) !important; }
.fcard-tag { color: var(--brand-amber) !important; }
.fcard-cta { background: var(--brand-amber-light) !important; color: var(--brand-amber) !important; }

/* Rating stars */
.stars { color: var(--brand-amber) !important; }

/* Sit cards */
.sit-card:hover { border-color: var(--brand-amber) !important; background: var(--brand-amber-pale) !important; }
.sit-card-label { color: var(--brand-amber) !important; }

/* Steps */
.step-num {
  background: var(--brand-amber-pale) !important;
  color: var(--brand-amber) !important;
  border: 2px solid var(--brand-amber-light) !important;
}

/* Author section */
.author-section { background: var(--surface-secondary) !important; }
.author-eyebrow { color: var(--brand-amber) !important; }
.author-cta .primary { background: var(--brand-amber) !important; color: var(--text-light) !important; }
.author-cta .primary:hover { background: var(--brand-amber-dark) !important; }

/* Hero badge */
.hero-card-badge { background: var(--brand-amber-light) !important; color: var(--brand-amber) !important; }
.hero-card-badge.green { background: #dcfce7 !important; color: #15803d !important; }
.hero-card:hover { transform: translateX(6px) rotate(-.3deg) !important; }
.hero-eyebrow { background: var(--surface-primary) !important; color: var(--brand-amber) !important; border-color: var(--brand-amber-light) !important; }
.hero h1 em { color: var(--brand-amber) !important; }
.stat-num { color: var(--brand-amber) !important; }

/* Category label */
.cat-label { color: var(--brand-amber) !important; }
.cat-rating .stars { color: var(--brand-amber) !important; }

/* FAQ - Improved Styling */
.faq-section { background: var(--surface-secondary) !important; padding: 60px 5% !important; }
.faq-inner { max-width: 760px !important; }
.faq-item { background: var(--surface-primary) !important; border-radius: 8px !important; margin-bottom: 12px !important; box-shadow: 0 2px 8px rgba(26,14,6,.08) !important; }
.faq-q {
  padding: 16px 18px !important;
  font-weight: 500 !important;
  font-size: 15px !important;
  color: var(--text-primary) !important;
  cursor: pointer !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 12px !important;
  background: var(--surface-primary) !important;
  border: none !important;
  width: 100% !important;
  text-align: left !important;
  transition: background 200ms ease !important;
}
.faq-q:hover { background: #FFF9EE !important; color: var(--text-primary) !important; }
.faq-q:focus-visible { outline: 2px solid var(--brand-amber) !important; outline-offset: 2px !important; }
.faq-q span {
  color: var(--brand-amber) !important;
  font-size: 18px !important;
  flex-shrink: 0 !important;
  transition: transform 200ms ease !important;
  font-weight: 400 !important;
}
.faq-a {
  padding: 0 18px 14px 18px !important;
  font-size: 14px !important;
  color: var(--text-secondary) !important;
  line-height: 1.7 !important;
  display: none !important;
  font-weight: 400 !important;
  background: #FFFAF8 !important;
}
.faq-a.open { display: block !important; }
.faq-q.open span { transform: rotate(45deg) !important; }
.faq-a a { color: var(--brand-amber) !important; text-decoration: underline !important; }

/* Newsletter — dark background with strong contrast text */
.newsletter { background: linear-gradient(140deg, var(--surface-dark), var(--surface-dark)) !important; }
.newsletter h2, .newsletter h3, .newsletter p { color: var(--text-light) !important; }
.newsletter-note { color: var(--text-light-secondary) !important; }
.email-form button {
  background: var(--brand-amber) !important;
  color: var(--text-light) !important;
}
.email-form button:hover { background: var(--brand-amber-dark) !important; }
.email-form input {
  border-color: var(--brand-amber-light) !important;
  color: var(--text-primary) !important;
  background: var(--surface-primary) !important;
}
.email-form input::placeholder { color: var(--text-tertiary) !important; opacity: 1 !important; }

/* Footer — dark background with proper contrast text */
footer {
  background: var(--surface-dark) !important;
  color: var(--text-light) !important;
}
footer p { color: var(--text-light-secondary) !important; }
footer a { color: var(--text-light-secondary) !important; }
footer a:hover { color: var(--brand-amber) !important; }
.footer-logo { color: var(--text-light) !important; }
.footer-logo span, .footer-logo em { color: var(--brand-amber) !important; }
.footer-col ul a:hover { color: var(--brand-amber) !important; }
.footer-bottom a:hover { color: var(--brand-amber) !important; }

/* Affiliate notice — cream background with dark text (WCAG AAA) */
.affiliate-notice {
  background: var(--brand-amber-light) !important;
  border: 1.5px solid var(--brand-amber) !important;
  color: var(--text-primary) !important;
  padding: 14px 16px !important;
  border-radius: 6px !important;
}
.affiliate-notice strong { color: var(--text-primary) !important; font-weight: 700 !important; }

/* Search */
.search-input { border-color: var(--brand-amber) !important; }
.search-input::placeholder { color: var(--text-tertiary) !important; }
.search-result-cat { color: var(--brand-amber) !important; }
.search-result-item:hover { background: var(--brand-amber-pale) !important; }
.search-overlay { background: rgba(26,14,6,.78) !important; }

/* Article page specifics */
.article-tag { color: var(--brand-amber) !important; }
.highlight-box {
  background: var(--brand-amber-pale) !important;
  border-color: var(--brand-amber) !important;
}
.highlight-box strong { color: var(--brand-amber) !important; }
.page-hero { background: linear-gradient(135deg, var(--brand-amber-pale) 0%, var(--surface-secondary) 100%) !important; }
.page-hero h1 { color: var(--text-primary) !important; }
.page-tag { background: var(--brand-amber-light) !important; color: var(--brand-amber-dark) !important; }
.product-badge { background: var(--brand-amber-light) !important; color: var(--brand-amber) !important; }
.score-bar-fill { background: linear-gradient(90deg, var(--brand-amber), #E8920A) !important; }
.check-icon, .check { color: var(--brand-amber) !important; }
a { color: var(--brand-amber); }
a:hover { color: var(--brand-amber-dark); }

/* HIDE all Chewy buttons and links site-wide — program inactive */
.link-chewy,
a[href*="chewy.com"]:not([href*="chewy-fresh-step"]),
.btn-chewy {
  display: none !important;
}

/* Trending bar */
.trending-bar { background: var(--brand-amber-pale) !important; border-color: var(--border-light) !important; }

/* Input styling — ensure text visibility (use design-tokens.css base) */
input[type="text"],
input[type="email"],
input[type="search"],
textarea,
select {
  color: var(--text-primary) !important;
  background: var(--surface-primary) !important;
  border-color: var(--border-medium) !important;
}

input[type="text"]::placeholder,
input[type="email"]::placeholder,
input[type="search"]::placeholder,
textarea::placeholder {
  color: var(--text-tertiary) !important;
  opacity: 1 !important;
}

/* Hero background */
.hero {
  background: linear-gradient(155deg, var(--brand-amber-light) 0%, var(--brand-amber-pale) 40%, var(--surface-primary) 75%) !important;
}

.hero h1 { color: var(--text-primary) !important; }
.hero p { color: var(--text-primary) !important; }

/* Section backgrounds */
.categories,
.how-it-works,
section[style*="var(--off-white)"] {
  background: var(--surface-secondary) !important;
}

/* Card backgrounds stay white */
.fcard, .cat-card, .hero-card, .sit-card, .faq-item {
  background: var(--surface-primary) !important;
  color: var(--text-primary) !important;
}

/* Better card shadows */
.fcard, .cat-card, .hero-card {
  box-shadow: 0 1px 3px rgba(26,14,6,.05), 0 6px 24px rgba(196,122,15,.1), 0 16px 48px rgba(26,14,6,.07) !important;
  border-color: var(--border-light) !important;
}

/* KEYBOARD NAVIGATION - Focus States (WCAG A11y) */
button:focus-visible,
input:focus-visible,
a:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--brand-amber) !important;
  outline-offset: 2px !important;
}

.hamburger:focus-visible {
  outline: 2px solid var(--brand-amber) !important;
  outline-offset: 2px !important;
}

.nav-links a:focus-visible {
  outline: 2px solid var(--brand-amber) !important;
  outline-offset: 2px !important;
  color: var(--brand-amber) !important;
}

.btn-primary:focus-visible,
.btn-secondary:focus-visible {
  outline: 2px solid var(--brand-amber) !important;
  outline-offset: 2px !important;
}

.faq-q:focus-visible {
  outline: 2px solid var(--brand-amber) !important;
  outline-offset: 2px !important;
}

/* Touch target sizing - Mobile a11y */
.hamburger {
  min-width: 48px !important;
  min-height: 48px !important;
  padding: 10px !important;
}

.nav-links a {
  min-height: 48px !important;
  display: flex !important;
  align-items: center !important;
}

button {
  min-height: 44px !important;
  min-width: 44px !important;
  padding: 12px 16px !important;
}

a {
  min-height: 44px !important;
  display: inline-flex !important;
  align-items: center !important;
}

/* Mobile typography improvements */
@media (max-width: 768px) {
  body { font-size: 16px !important; }

  p, span, div { min-font-size: 14px !important; }

  /* Minimum 16px for body text on mobile */
  .ar-cat,
  .article-row span,
  .count {
    font-size: 14px !important;
  }

  /* Increase small text that's below 14px */
  small, .small-text {
    font-size: 14px !important;
  }

  /* Product comparison tables - mobile responsive (no horizontal scroll) */
  .comparison-table,
  table {
    width: 100% !important;
    font-size: 11px !important;
    table-layout: fixed !important;
  }

  .comparison-table th,
  table th {
    padding: 6px 4px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
  }

  .comparison-table td,
  table td {
    padding: 6px 4px !important;
    font-size: 11px !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    line-height: 1.3 !important;
  }

  /* Expand review buttons to proper touch targets */
  .link-review,
  a.link-review,
  [class*="review-btn"] {
    min-height: 48px !important;
    padding: 14px 16px !important;
    font-size: 15px !important;
  }

  /* Footer links proper size */
  footer a,
  footer link {
    min-height: 48px !important;
    padding: 12px 8px !important;
    display: inline-flex !important;
    align-items: center !important;
  }

  /* Breadcrumb links */
  .breadcrumb a,
  [class*="breadcrumb"] a {
    min-height: 44px !important;
    padding: 8px 4px !important;
  }

  /* Category filters */
  .category-btn,
  [class*="category"] a,
  .cat-label {
    min-height: 44px !important;
    padding: 10px 12px !important;
    font-size: 15px !important;
    display: inline-flex !important;
    align-items: center !important;
  }
}

/* ============================================================
   PAWPICKS — PREMIUM ANIMATIONS
   Scroll-driven (CSS-native, no JS), hover physics, ambient glow
   ============================================================ */

/* Keyframes */
@keyframes pawFadeUp {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes pawFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes pawSlideRight {
  from { opacity: 0; transform: translateX(-24px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes pawGlowPulse {
  0%, 100% { box-shadow: 0 4px 20px rgba(196,122,15,.35); }
  50%       { box-shadow: 0 4px 32px rgba(196,122,15,.65), 0 0 0 6px rgba(196,122,15,.12); }
}
@keyframes pawShimmer {
  0%   { background-position: -200% center; }
  100% { background-position:  200% center; }
}
@keyframes pawFloat {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  33%       { transform: translateY(-6px) rotate(.5deg); }
  66%       { transform: translateY(-3px) rotate(-.3deg); }
}
@keyframes pawCountUp {
  from { opacity: 0; transform: scale(.8) translateY(8px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes pawUnderlineGrow {
  from { width: 0; }
  to   { width: 100%; }
}
@keyframes pawRingPulse {
  0%   { transform: scale(1);    opacity: .7; }
  100% { transform: scale(2.2);  opacity: 0; }
}
@keyframes pawGrainDrift {
  0%   { transform: translate(0,0); }
  25%  { transform: translate(-1%,-1%); }
  50%  { transform: translate(1%,1%); }
  75%  { transform: translate(-1%,1%); }
  100% { transform: translate(0,0); }
}
@keyframes pawBarGrow {
  from { width: 0; }
}

/* --- Scroll-driven fade-in for cards and sections --- */
/* Uses CSS animation-timeline: view() — Chrome 115+, progressive enhancement */
.fcard, .cat-card, .hero-card, .sit-card {
  animation: pawFadeUp .55s cubic-bezier(.22,.68,0,1.2) both;
  animation-timeline: view();
  animation-range: entry 0% entry 35%;
}

/* Stagger via nth-child so cards don't all pop at once */
.fcard:nth-child(2), .cat-card:nth-child(2) { animation-delay: .08s; }
.fcard:nth-child(3), .cat-card:nth-child(3) { animation-delay: .16s; }
.fcard:nth-child(4), .cat-card:nth-child(4) { animation-delay: .24s; }
.fcard:nth-child(5), .cat-card:nth-child(5) { animation-delay: .32s; }
.fcard:nth-child(6), .cat-card:nth-child(6) { animation-delay: .40s; }

/* Section headings slide in from left */
h2, h3 {
  animation: pawSlideRight .5s cubic-bezier(.22,.68,0,1.2) both;
  animation-timeline: view();
  animation-range: entry 0% entry 30%;
}

/* Stat numbers pop in */
.stat-num, .hero-stat .num {
  animation: pawCountUp .6s cubic-bezier(.34,1.56,.64,1) both;
  animation-timeline: view();
  animation-range: entry 0% entry 40%;
}

/* --- Enhanced card hover (physical feel) --- */
.fcard {
  transition: transform .28s cubic-bezier(.34,1.56,.64,1),
              box-shadow .28s ease !important;
  will-change: transform;
}
.fcard:hover {
  transform: translateY(-10px) rotate(-.4deg) !important;
  box-shadow:
    0 2px 4px rgba(26,14,6,.04),
    0 12px 40px rgba(196,122,15,.22),
    0 28px 60px rgba(26,14,6,.12) !important;
}

.cat-card {
  transition: transform .28s cubic-bezier(.34,1.56,.64,1),
              box-shadow .28s ease !important;
}
.cat-card:hover {
  transform: translateY(-8px) rotate(.4deg) !important;
  box-shadow: 0 16px 48px rgba(196,122,15,.2) !important;
}

/* --- Primary button: amber glow pulse + ring --- */
.btn-primary, .nav-cta, a.nav-cta {
  position: relative;
  overflow: visible !important;
  transition: transform .18s ease, box-shadow .18s ease, background .15s ease !important;
  animation: pawGlowPulse 3s ease-in-out infinite !important;
}
.btn-primary:hover, .nav-cta:hover {
  transform: translateY(-2px) scale(1.03) !important;
  box-shadow: 0 8px 32px rgba(196,122,15,.5) !important;
}
/* Ripple ring on hover */
.btn-primary::after, .nav-cta::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 2px solid rgba(196,122,15,.6);
  opacity: 0;
  pointer-events: none;
}
.btn-primary:hover::after, .nav-cta:hover::after {
  animation: pawRingPulse .6s ease-out forwards;
}

/* --- Hero badge floating --- */
.hero-eyebrow, .product-badge, .hero-card-badge {
  animation: pawFloat 5s ease-in-out infinite !important;
}

/* --- Affiliate notice shimmer on load --- */
.affiliate-notice {
  position: relative;
  overflow: hidden;
}
.affiliate-notice::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg,
    transparent 40%,
    rgba(255,255,255,.4) 50%,
    transparent 60%);
  background-size: 200% 100%;
  animation: pawShimmer 2.5s ease .4s 1 forwards;
}

/* --- Nav links: animated amber underline on hover --- */
.nav-links a {
  position: relative;
}
.nav-links a::after {
  content: '';
  position: absolute;
  bottom: 4px;
  left: 0;
  height: 2px;
  width: 0;
  background: var(--brand-amber);
  border-radius: 2px;
  transition: width .25s cubic-bezier(.22,.68,0,1.2);
}
.nav-links a:hover::after { width: 100%; }

/* --- Section labels: slide-in underline --- */
.section-label {
  position: relative;
  display: inline-block;
}
.section-label::after {
  content: '';
  position: absolute;
  bottom: -3px;
  left: 0;
  height: 2px;
  background: var(--brand-amber);
  animation: pawUnderlineGrow .6s ease .2s both;
  animation-timeline: view();
  animation-range: entry 0% entry 30%;
}

/* --- FAQ open/close smooth --- */
.faq-a {
  transition: max-height .3s cubic-bezier(.4,0,.2,1),
              padding .3s ease !important;
}

/* --- Ambient grain texture overlay (premium print feel) --- */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: .025;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
  animation: pawGrainDrift 8s steps(2) infinite;
}

/* --- Hero section entrance --- */
.hero {
  animation: pawFadeIn .8s ease both;
}
.hero h1 {
  animation: pawFadeUp .7s cubic-bezier(.22,.68,0,1.2) .1s both !important;
}
.hero p, .hero .hero-sub {
  animation: pawFadeUp .7s cubic-bezier(.22,.68,0,1.2) .2s both !important;
}
.hero .btn-primary, .hero .btn-secondary {
  animation: pawFadeUp .6s cubic-bezier(.22,.68,0,1.2) .35s both !important;
}

/* --- Score bars: width animates in --- */
.score-bar-fill {
  animation: pawBarGrow .8s cubic-bezier(.22,.68,0,1.2) both;
  animation-timeline: view();
  animation-range: entry 10% entry 50%;
}

/* --- Reduce motion: respect user preference --- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}