/* ==========================================================
   Sniffs Small Animal Boarding — brand theme
   Loaded AFTER css/style.css so it overrides the base theme.
   ========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500;600;700&family=Nunito:wght@400;500;600;700&family=Caveat:wght@500;600;700&display=swap');

:root {
  /* Greens */
  --sage:        #7E9A78;
  --sage-dark:   #2F4A38;
  --sage-light:  #DCE6D7;
  --sage-mid:    #A8BCA1;

  /* Blush pinks */
  --blush:       #DFA29C;
  --blush-dark:  #C4837C;
  --blush-light: #F6E2DF;

  /* Creams */
  --cream:       #F7F2E8;
  --cream-mid:   #EFE8DA;
  --cream-dark:  #E2D9C7;

  /* Text */
  --text:        #33372F;
  --text-muted:  #7A7A6E;

  --radius:      12px;
  --radius-lg:   18px;
  --shadow:      0 2px 10px rgba(47,74,56,.06);

  --font-display: 'Playfair Display', Georgia, serif;
  --font-body:    'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-script:  'Caveat', cursive;
}

body {
  background: var(--cream) !important;
  font-family: var(--font-body) !important;
  color: var(--text);
}

h1, h2, h3, .page-header h1 {
  font-family: var(--font-display) !important;
  color: var(--sage-dark) !important;
  letter-spacing: -.2px;
}

.card {
  background: #FFFDF8;
  border: 1px solid var(--cream-dark);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}

.card-title, .section-title {
  font-family: var(--font-display) !important;
  color: var(--sage-dark) !important;
  font-weight: 600;
}

.btn.primary {
  background: var(--sage-dark);
  border-color: var(--sage-dark);
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: .2px;
}
.btn.primary:hover { background: var(--sage); border-color: var(--sage); }

/* ── Nav ── */
.nav { background: #FFFDF8; border-bottom: 1px solid var(--cream-dark); }
.nav-logo {
  font-family: var(--font-display) !important;
  font-weight: 700;
  color: var(--sage-dark) !important;
  font-size: 20px;
  display: flex; align-items: center; gap: 10px;
}
.nav-logo img { height: 46px; width: auto; display: block; }
.nav-logo i { color: var(--sage); }

/* ── Decorative helpers ── */
.script { font-family: var(--font-script); color: var(--blush-dark); font-weight: 600; }
.heart { color: var(--blush); }

.brand-rule {
  display: flex; align-items: center; justify-content: center;
  gap: 12px; margin: .4rem 0 0;
  font-size: 12px; letter-spacing: 3px; text-transform: uppercase;
  color: var(--sage); font-weight: 600;
}
.brand-rule::before, .brand-rule::after {
  content: ''; height: 1px; width: 40px; background: var(--blush);
}

/* ── Hero ── */
.hero {
  background: #FFFDF8;
  border: 1px solid var(--cream-dark);
  border-radius: 24px;
  padding: 2.5rem 1.75rem 2.25rem;
  text-align: center;
  box-shadow: var(--shadow);
  margin-bottom: 1.5rem;
}
.hero img.logo { max-width: 260px; width: 62%; height: auto; margin: 0 auto .5rem; display: block; }
.hero h1 {
  font-family: var(--font-display);
  font-size: 2rem; font-weight: 700; color: var(--sage-dark);
  margin: .5rem 0 .35rem;
}
.hero .tagline {
  font-family: var(--font-script);
  font-size: 1.5rem; color: var(--blush-dark); margin-bottom: .75rem;
}
.hero p.sub {
  font-size: 15px; color: var(--text-muted); line-height: 1.8;
  max-width: 540px; margin: 0 auto 1.5rem;
}
.btn.big {
  font-size: 16px; padding: 13px 30px; border-radius: 999px;
  background: var(--sage-dark); color: #fff; border: none;
  font-weight: 600; font-family: var(--font-body);
  display: inline-flex; align-items: center; gap: 8px;
}
.btn.big:hover { background: var(--sage); }

/* ── Section heading with banner ── */
.banner-title {
  text-align: center; margin-bottom: 1.25rem;
}
.banner-title span {
  display: inline-block;
  background: var(--sage-mid); color: #fff;
  font-family: var(--font-body); font-weight: 700;
  letter-spacing: 4px; text-transform: uppercase; font-size: 13px;
  padding: 8px 26px; border-radius: 6px;
}

/* ── Price list (styled like the price card) ── */
.price-box {
  border: 2px solid var(--sage-mid);
  border-radius: 20px;
  padding: 1.75rem 1.5rem 1.5rem;
  background: #FFFDF8;
  position: relative;
}
.price-row {
  display: flex; align-items: baseline; gap: 10px;
  padding: 10px 0; font-size: 15px;
}
.price-row + .price-row { border-top: 1px dashed var(--cream-dark); }
.price-row .bullet { color: var(--blush); flex-shrink: 0; font-size: 13px; }
.price-row .name { color: var(--text); }
.price-row .name small { display: block; color: var(--text-muted); font-size: 13px; }
.price-row .dots { flex: 1; border-bottom: 2px dotted var(--cream-dark); min-width: 20px; }
.price-row .amount {
  color: var(--blush-dark); font-weight: 700; font-size: 17px; white-space: nowrap;
}
.discount-note {
  text-align: center; font-size: 13px; color: var(--text-muted);
  margin-top: 1rem; font-style: italic;
}

/* ── FAQs ── */
.faq-item {
  background: var(--blush-light);
  border-radius: var(--radius-lg);
  padding: 1rem 1.25rem;
  margin-bottom: 10px;
}
.faq-item:nth-child(even) { background: var(--sage-light); }
.faq-q {
  font-family: var(--font-display); font-weight: 600;
  font-size: 16px; color: var(--sage-dark); margin-bottom: 6px;
  display: flex; gap: 8px; align-items: baseline;
}
.faq-a { font-size: 14px; color: var(--text); line-height: 1.75; white-space: pre-wrap; }

/* ── Photos ── */
/* Flex + centre so a single photo sits in the middle rather than hugging the left.
   height:auto keeps the full image — no cropping, no forced shrink. */
.photo-grid {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 14px; margin-bottom: 1.5rem;
}
.photo-grid img {
  width: auto; max-width: min(100%, 480px); height: auto;
  border-radius: var(--radius-lg); border: 3px solid #FFFDF8;
  box-shadow: var(--shadow); display: block;
}
/* A lone photo can run a little wider */
.photo-grid img:only-child { max-width: min(100%, 620px); }

/* Full-width gallery — images stretch to fill the page width.
   A single photo spans the whole row; several share it evenly. */
.photo-grid.full { align-items: flex-start; }
.photo-grid.full img,
.photo-grid.full img:only-child {
  flex: 1 1 320px;
  width: 100%;
  max-width: 100%;
}

/* ── Opening hours ── */
.hours-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px,1fr)); gap: 10px; }
.hours-card {
  background: var(--cream); border: 1px solid var(--cream-dark);
  border-radius: var(--radius); padding: 12px; font-size: 13px;
}
.hours-card .day { font-weight: 700; color: var(--sage-dark); margin-bottom: 4px; }

/* ── CTA band ── */
.cta-band {
  background: var(--sage-light); border: 1px solid var(--sage-mid);
  border-radius: 20px; padding: 1.75rem; text-align: center; margin-top: 1.5rem;
}
.cta-band .line {
  font-family: var(--font-script); font-size: 1.5rem;
  color: var(--sage-dark); margin-bottom: .75rem;
}

/* ── Footer ── */
.site-footer {
  text-align: center; padding: 2rem 0 1.5rem;
  font-size: 13px; color: var(--text-muted);
}
.site-footer a { color: var(--sage-dark); }
.site-footer .sig { font-family: var(--font-script); font-size: 1.25rem; color: var(--blush-dark); margin-bottom: .5rem; }

.prose { font-size: 14.5px; line-height: 1.85; color: var(--text); white-space: pre-wrap; }

@media (max-width: 640px) {
  .hero { padding: 2rem 1.25rem; }
  .hero h1 { font-size: 1.6rem; }
  .price-row { flex-wrap: wrap; }
  .price-row .dots { display: none; }
}