/* 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 moved to enhanced hover below */ }
.cat-card:hover { /* transform moved to enhanced hover below */ }
.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: var(--brand-amber-pale) !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: var(--surface-secondary) !important;
  transition: max-height .3s cubic-bezier(.4,0,.2,1),
              padding .3s ease !important;
}
.faq-a.open { display: block !important; }
.faq-q.open span { transform: rotate(45deg) !important; }
.faq-a a { color: var(--text-accent-dark) !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), var(--brand-amber-bright)) !important; }
.check-icon, .check { color: var(--brand-amber) !important; }
a { color: var(--text-accent-dark); }
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;
}

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

  /* Body copy at a readable size. Do NOT add span/div back into this
     selector: they match every nested wrapper, so the rule cascades into
     headings, table cells and buttons and flattens the whole page to one
     size. That was the bug this block used to have (14px everywhere,
     fixed 2026-07-30). Target the elements that actually hold prose. */
  p, li { font-size: 16px !important; line-height: 1.7 !important; }

  /* Heading hierarchy. On desktop h1 is ~3.6x the h2; on mobile it had
     collapsed to 0.9x, so the page title read as smaller than its own
     subheadings. These keep the steps visible at phone width. */
  h1 { font-size: 33px !important; line-height: 1.18 !important; }
  h2 { font-size: 23px !important; line-height: 1.3 !important; }
  h3 { font-size: 18.5px !important; line-height: 1.35 !important; }

  .ar-cat,
  .article-row span,
  .count {
    font-size: 14px !important;
  }

  /* Small print stays smaller than body copy, but not below 13px */
  small, .small-text {
    font-size: 13.5px !important;
  }

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

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

  .comparison-table td,
  table td {
    padding: 8px 6px !important;
    font-size: 13px !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    line-height: 1.45 !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 {
    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%;
}

/* --- 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;
  }
}

/* --- Fallback for browsers without scroll-driven animation support ---
   Six rules above use `animation-timeline: view()` together with
   `animation-fill-mode: both`. Where view() timelines are unsupported the
   timeline property is dropped but the fill-mode is not, which can leave
   below-the-fold elements parked on their first keyframe (opacity: 0) —
   the page then looks empty as you scroll into it. This guard shows the
   content outright rather than animating it. Added 2026-07-30. */
@supports not (animation-timeline: view()) {
  .fcard, .cat-card,
  h2, h3,
  .stat-num, .hero-stat .num,
  .score-bar, .score-fill,
  footer {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}