/* ================================================================
   Franklin Ranch Pups — Modern Polish
   Site-wide refinements for a cleaner, more modern feel.
   Goals: less visual noise, softer shadows, flatter surfaces,
   tighter typography, more generous whitespace.
   Designed to layer on top of styles.css without breaking it.
   ================================================================ */

:root {
  /* Refined neutral palette */
  --fp-ink:       #111827;
  --fp-ink-2:     #374151;
  --fp-muted:     #6b7280;
  --fp-line:      #e5e7eb;
  --fp-line-soft: #f1f1f1;
  --fp-bg:        #ffffff;
  --fp-bg-soft:   #fafafa;
  --fp-bg-tint:   #f7f5f4;
  --fp-brand:     #a6362b;
  --fp-brand-soft:#fdf6f5;

  /* Softer shadow ramp */
  --fp-shadow-xs: 0 1px 2px rgba(17, 24, 39, .04);
  --fp-shadow-sm: 0 2px 8px rgba(17, 24, 39, .05);
  --fp-shadow-md: 0 6px 18px rgba(17, 24, 39, .06);
  --fp-radius:    14px;
}

/* ---------- Typography polish ---------- */
body { color: var(--fp-ink); letter-spacing: -0.005em; }
h1, h2, h3, h4 { color: var(--fp-ink); letter-spacing: -0.015em; }
h2 { font-weight: 700; }
h3 { font-weight: 600; }
.muted, .muted p { color: var(--fp-muted) !important; }

/* Keep the Cedarville script accent for H1 signature — don't override. */
/* But tame the H2 script accent (used on homepage section titles) */
.script-accent {
  font-size: clamp(1.6rem, 3.5vw, 2.2rem) !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
}

/* ---------- Cards: flat, bordered, subtle ---------- */
.card {
  background: #fff !important;
  border: 1px solid var(--fp-line) !important;
  box-shadow: var(--fp-shadow-xs) !important;
  border-radius: var(--fp-radius) !important;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease !important;
}
.card:hover {
  box-shadow: var(--fp-shadow-md) !important;
  border-color: #d8d8d8 !important;
  transform: translateY(-2px) !important;
}

/* ---------- Why-Us cards: quieter, icon-first ---------- */
.why-card {
  text-align: left;
  padding: .25rem;
}
.why-card .body {
  padding: 1.5rem !important;
}
.why-card-icon {
  font-size: 1.5rem !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-bottom: 1rem !important;
  border-radius: 10px;
  background: var(--fp-brand-soft);
  /* Filter drops color saturation on emoji slightly for a quieter feel */
  filter: saturate(0.85);
}
.why-card strong {
  font-size: 1.05rem !important;
  margin-bottom: .5rem !important;
  color: var(--fp-ink) !important;
}
.why-card p,
.why-card .muted {
  font-size: .95rem;
  line-height: 1.6;
  color: var(--fp-muted) !important;
}

/* ---------- Flatten gradient boxes to solid tint ---------- */
.about-highlight,
.no-pups-hero,
.notice {
  background: var(--fp-brand-soft) !important;
  border: 1px solid #f3d6d2 !important;
  box-shadow: none !important;
}
.about-highlight h3 {
  color: var(--fp-brand) !important;
}

/* ---------- Buttons: cleaner, subtler shadow ---------- */
.btn {
  box-shadow: var(--fp-shadow-xs) !important;
  font-weight: 600 !important;
  padding: .8rem 1.25rem !important;
  border-radius: 10px !important;
  transition: transform .12s ease, box-shadow .2s ease, background-color .2s ease !important;
}
.btn:hover {
  box-shadow: var(--fp-shadow-md) !important;
  transform: translateY(-1px) !important;
}
.btn--ghost {
  box-shadow: none !important;
  background: transparent !important;
}
.btn--ghost:hover {
  background: var(--fp-brand-soft) !important;
  box-shadow: none !important;
}

/* ---------- Header: simpler, less blur ---------- */
.site-header {
  background: rgba(255, 255, 255, 0.92) !important;
  backdrop-filter: saturate(1.05) blur(10px) !important;
  border-bottom: 1px solid var(--fp-line) !important;
}
.nav a {
  font-size: .92rem;
  font-weight: 500;
  color: var(--fp-ink-2) !important;
  transition: color .15s ease, background-color .15s ease;
}
.nav a:hover {
  background: var(--fp-bg-tint) !important;
  color: var(--fp-ink) !important;
}
.nav a.active {
  background: var(--fp-brand-soft) !important;
  color: var(--fp-brand) !important;
  font-weight: 600;
}

/* ---------- Footer: quieter ---------- */
.footer {
  background: var(--fp-bg-soft) !important;
  border-top: 1px solid var(--fp-line) !important;
}
.footer-inner {
  padding: 2.5rem 0 !important;
}
.footer a {
  color: var(--fp-ink-2) !important;
  font-size: .92rem;
  transition: color .15s ease;
}
.footer a:hover { color: var(--fp-brand) !important; }
.footer .copyright {
  color: var(--fp-muted) !important;
  font-size: .85rem;
}

/* ---------- Sections: more breathing room ---------- */
.section {
  padding: clamp(3rem, 7vw, 5rem) 0 !important;
}

/* ---------- Breadcrumbs: subtler ---------- */
.breadcrumbs {
  font-size: .85rem;
  color: var(--fp-muted) !important;
  margin-bottom: 1rem;
}
.breadcrumbs a {
  color: var(--fp-muted) !important;
  transition: color .15s ease;
}
.breadcrumbs a:hover { color: var(--fp-brand) !important; }

/* ---------- Badges (status pills) ---------- */
.badge {
  border: 1px solid transparent;
}

/* ---------- Sticky CTA: simpler ---------- */
.sticky-cta {
  background: rgba(255, 255, 255, 0.96) !important;
  backdrop-filter: blur(8px) !important;
  border-top: 1px solid var(--fp-line) !important;
}

/* ---------- Forms: cleaner focus states ---------- */
input, select, textarea {
  border: 1px solid var(--fp-line) !important;
  border-radius: 10px !important;
  transition: border-color .15s ease, box-shadow .15s ease !important;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--fp-brand) !important;
  box-shadow: 0 0 0 3px rgba(166, 54, 43, .12) !important;
}

/* ---------- Brand-intro section (homepage) ---------- */
.brand-intro {
  background: var(--fp-bg-tint) !important;
  border-bottom: 1px solid var(--fp-line) !important;
}
.brand-intro .logo-wrap img {
  box-shadow: var(--fp-shadow-sm) !important;
  filter: none !important;
}
.brand-intro-h1 {
  letter-spacing: -0.02em !important;
}
.brand-intro .tagline {
  font-size: clamp(1rem, 1.6vw, 1.1rem) !important;
  color: var(--fp-ink-2) !important;
  line-height: 1.6 !important;
}

/* ---------- FAQ: flatter ---------- */
.faq-item {
  border-bottom: 1px solid var(--fp-line) !important;
}
.faq-q {
  font-weight: 600 !important;
  font-size: 1rem;
}

/* ---------- Kicker label: subtler ---------- */
.kicker {
  color: var(--fp-brand) !important;
  font-size: .75rem !important;
  letter-spacing: .14em !important;
}

/* ---------- Notice box: single subtle tint ---------- */
.notice__icon {
  background: var(--fp-brand) !important;
  box-shadow: none !important;
}

/* ---------- Images in cards: slightly rounded, nothing flashy ---------- */
.card .media img,
.card img {
  transition: transform .3s ease;
}
.card:hover .media img,
.card:hover img {
  transform: scale(1.02);
}

/* ---------- Prose links: underline on hover only (cleaner) ---------- */
.prose a,
main p a {
  color: var(--fp-brand);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid rgba(166, 54, 43, 0.3);
  transition: border-color .15s ease;
}
.prose a:hover,
main p a:hover {
  border-bottom-color: var(--fp-brand);
}

/* ---------- Container: a touch wider breathing room ---------- */
.container {
  padding-inline: clamp(1.25rem, 4vw, 2rem) !important;
}

/* ---------- Smooth fade-in for loaded gallery ---------- */
#pastGallery .card,
#parentGrid .card {
  animation: fpFadeIn .4s ease both;
}
@keyframes fpFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  #pastGallery .card,
  #parentGrid .card { animation: none; }
}

/* ---------- Small screens: tighten spacing ---------- */
@media (max-width: 640px) {
  .why-card .body { padding: 1.25rem !important; }
  .brand-intro { padding: 2.5rem 0 !important; }
  .section { padding: 2.5rem 0 !important; }
}