/* === FRP Unified Dark-Mode Fix (scoped) ==================================
   Purpose: Keep your site's light look on dark-mode devices WITHOUT
   changing your light-mode design. Only applies inside the dark MQ.
============================================================================ */

:root { --brand: #a6362b; }

/* 0) If a duplicate sticky header exists, hide it gracefully */
@media (prefers-color-scheme: dark){
  header#siteNav { display:none !important; }
}

/* 1) Header/nav stays light in dark OS mode */
@media (prefers-color-scheme: dark){
  header, .site-header, .navbar {
    background:#ffffff !important;
    color:#111111 !important;
    box-shadow: 0 1px 0 rgba(0,0,0,.06) !important;
  }
  header a, .site-header a, .navbar a {
    color:#111111 !important;
    -webkit-text-fill-color:#111111 !important;
  }
}

/* 2) Content tiles/cards/panels stay light */
@media (prefers-color-scheme: dark){
  .card, .panel, .content, .content-box, .info, .info-box,
  .feature, .feature-card, .value-card, .benefit, .stat-card,
  .grid .card, .grid .panel, .puppy-card, .breed-card, .cta-card,
  .testimonial, .kicker-box, .tile, .box {
    background:#ffffff !important;
    color:#111111 !important;
    border:1px solid #e5e7eb !important;
    box-shadow:0 10px 30px rgba(2,6,23,.06) !important;
  }
  /* Headings/text inside cards */
  .card h1, .card h2, .card h3, .card h4, .card h5, .card h6,
  .feature h1, .feature h2, .feature h3, .value-card h3, .info h3,
  .benefit h3, .stat-card h3, .puppy-card h3, .breed-card h3,
  .cta-card h3 {
    color:#111111 !important;
    -webkit-text-fill-color:#111111 !important;
  }
  /* Badges/chips */
  .badge, .pill, .chip, .tag {
    background:#ffffff !important;
    color:#111111 !important;
    border:1px solid #e5e7eb !important;
  }
  /* Prevent dark hover effects from dimming tiles */
  .card:hover, .panel:hover, .feature-card:hover, .value-card:hover,
  .benefit:hover, .stat-card:hover, .puppy-card:hover, .breed-card:hover,
  .cta-card:hover {
    box-shadow:0 10px 30px rgba(2,6,23,.06) !important;
    transform:none !important;
  }
}

/* 3) Forms match light look in dark OS mode */
@media (prefers-color-scheme: dark){
  .netlify-form, .contact-form, .form, .form-card, .form-panel, form {
    background:#f8fafc !important;
    color:#111111 !important;
    border:1px solid #e5e7eb !important;
    border-radius:16px !important;
    box-shadow:0 10px 30px rgba(2,6,23,.06) !important;
    transform:none !important;
  }
  .netlify-form:hover, .contact-form:hover, .form:hover, .form-card:hover, .form-panel:hover, form:hover{
    box-shadow:0 10px 30px rgba(2,6,23,.06) !important;
    transform:none !important;
  }
  form input[type="text"], form input[type="email"], form input[type="tel"], form input[type="url"],
  form input[type="number"], form input[type="date"], form input[type="time"], form input[type="search"],
  form input[type="password"], form select, form textarea {
    background:#ffffff !important;
    color:#111111 !important; -webkit-text-fill-color:#111111 !important;
    border:1px solid #e5e7eb !important;
    border-radius:10px !important;
    box-shadow:none !important;
  }
  form input::placeholder, form textarea::placeholder { color:#94a3b8 !important; }
  form label { color:#111111 !important; }
  form input:focus, form select:focus, form textarea:focus {
    outline:2px solid #cbd5e1 !important;
    outline-offset:2px !important;
    border-color:#d1d5db !important;
    box-shadow:none !important;
  }
}

/* 4) Buttons: keep text visible on dark OS (Safari-safe) */
@media (prefers-color-scheme: dark){
  a.btn, .btn, button.btn, input[type="submit"], input[type="button"]{
    color:#ffffff !important;
    -webkit-text-fill-color:#ffffff !important;
  }
  .btn--ghost, a.btn.btn--ghost, button.btn.btn--ghost{
    background:transparent !important;
    border:1px solid var(--brand) !important;
    color:var(--brand) !important;
    -webkit-text-fill-color:var(--brand) !important;
  }
  .btn *, .btn svg, .btn path { color:currentColor !important; fill:currentColor !important; stroke:currentColor !important; }
}

/* 5) FAQ rows neutral (never CTA red) */
@media (prefers-color-scheme: dark){
  .faq-q{
    background:transparent !important;
    color:inherit !important; -webkit-text-fill-color: currentColor !important;
    border:1px solid #e5e7eb !important;
    border-radius:10px !important;
    padding:.9rem 1rem;
  }
  .faq-q:hover{ background:#f8fafc !important; }
  .faq-item[aria-expanded="true"] .faq-q{ background:#fff !important; border-color:#e5e7eb !important; }
  .faq-q:focus, .faq-q:focus-visible{
    outline:2px solid #cbd5e1 !important;
    outline-offset:2px !important;
    border-radius:10px !important;
  }
}