/* ==========================================================================
   SCHNAUZER KINDERGARTEN — Custom Design System
   Warm, professional, family-breeder aesthetic
   Overrides: style.css  |  Fonts: Playfair Display + Lato
   ========================================================================== */

/* 1. Design tokens
   ========================================================================== */
:root {
  color-scheme: light only;

  --c-cream:      #faf8f4;
  --c-cream-mid:  #f0e9de;
  --c-cream-dark: #e4d8c8;
  --c-deep:       #2c1a0e;   /* near-black warm brown — text, dark buttons  */
  --c-brown:      #7a5a38;   /* medium brown — secondary text, links         */
  --c-gold:       #c9a870;   /* warm gold — decorative accent                */
  --c-gold-dark:  #b5913f;   /* deeper gold — CTA hover, highlights          */
  --c-gold-light: #f5e9d0;   /* pale gold — badge bg, price band             */
  --c-white:      #ffffff;
  --c-border:     #e2d4c0;
  --c-muted:      #6a5847;

  /* Bootstrap primary override — affects .text-primary, .border-primary */
  --bs-primary:     #b5913f;
  --bs-primary-rgb: 181, 145, 63;
  --bs-link-color:        #7a5a38;
  --bs-link-hover-color:  #b5913f;

  --shadow-sm: 0 2px 8px  rgba(44, 26, 14, .07);
  --shadow-md: 0 6px 24px rgba(44, 26, 14, .11);
  --shadow-lg: 0 14px 44px rgba(44, 26, 14, .17);

  --radius:    14px;
  --radius-sm: 8px;

  --font-display: 'Playfair Display', Georgia, serif;
  --font-body:    'Lato', 'Open Sans', system-ui, sans-serif;
  --ease: .22s ease;
}

/* 2. Base reset / typography
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  background: var(--c-cream) !important;
  color: var(--c-deep) !important;
  font-family: var(--font-body) !important;
  font-size: 16px !important;
  line-height: 1.75 !important;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display) !important;
  color: var(--c-deep) !important;
  line-height: 1.2 !important;
}

p { color: var(--c-muted); line-height: 1.8; }
a { color: var(--c-brown); transition: color var(--ease) !important; }
a:hover { color: var(--c-gold-dark) !important; text-decoration: none !important; }
img { max-width: 100%; height: auto; }

/* 3. Header & Navigation
   ========================================================================== */
.header-area,
.main-header-area {
  background: var(--c-white) !important;
}

.main-header-area {
  box-shadow: 0 1px 0 var(--c-border), var(--shadow-sm) !important;
  padding: 0 !important;
  border: none !important;
}

/* Logo */
.logo h1,
.main-header-area .logo a h1 {
  font-family: var(--font-display) !important;
  font-size: 1rem !important;
  color: var(--c-deep) !important;
  font-weight: 700 !important;
  letter-spacing: .2px;
}

/* Nav links */
#navigation > li > a {
  font-family: var(--font-body) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  color: var(--c-brown) !important;
  padding: 28px 13px !important;
  transition: color var(--ease) !important;
  background: none !important;
}

#navigation > li > a:hover {
  color: var(--c-gold-dark) !important;
}

/* Apply link — subtle pill highlight */
#navigation li a[href="apply.html"] {
  background: var(--c-gold-light) !important;
  color: var(--c-deep) !important;
  border-radius: 4px;
  padding-top: 8px !important;
  padding-bottom: 8px !important;
  margin: auto 4px;
  border: 1px solid var(--c-cream-dark);
}
#navigation li a[href="apply.html"]:hover {
  background: var(--c-gold-dark) !important;
  color: var(--c-white) !important;
  border-color: var(--c-gold-dark);
}

/* Dropdown submenu */
#navigation .submenu {
  background: var(--c-white) !important;
  border: 1px solid var(--c-border) !important;
  border-radius: var(--radius-sm) !important;
  box-shadow: var(--shadow-md) !important;
  padding: 8px 0 !important;
}
#navigation .submenu li a {
  font-size: 12px !important;
  color: var(--c-brown) !important;
  padding: 8px 20px !important;
  letter-spacing: .5px !important;
}
#navigation .submenu li a:hover {
  color: var(--c-gold-dark) !important;
  background: var(--c-cream) !important;
}

/* 4. Breadcrumb / page banner
   ========================================================================== */
.bradcam_area,
.bradcam_area.breadcam_bg {
  background: var(--c-cream-mid) !important;
  background-image: none !important;
  padding: 64px 0 !important;
  border-bottom: 1px solid var(--c-border);
}

.bradcam_text h3 {
  font-family: var(--font-display) !important;
  font-size: clamp(1.8rem, 4vw, 2.8rem) !important;
  color: var(--c-deep) !important;
  font-weight: 700 !important;
  margin: 0 !important;
}

/* 5. Hero / Slider
   ========================================================================== */
.slider_area .single_slider,
.slider_area .slider_bg_1 {
  background: var(--c-cream-mid) !important;
  background-image: none !important;
  min-height: 500px;
  display: flex;
  align-items: center;
}

.slider_text h3 {
  font-family: var(--font-display) !important;
  font-size: clamp(2rem, 5vw, 3.5rem) !important;
  color: var(--c-deep) !important;
  line-height: 1.18 !important;
  font-weight: 700 !important;
  margin-bottom: 1.25rem !important;
}

.slider_text h3 span { color: var(--c-gold-dark) !important; }

.slider_text p {
  font-size: 1rem !important;
  color: var(--c-muted) !important;
  max-width: 440px;
  line-height: 1.8 !important;
  margin-bottom: 2rem !important;
}

/* 6. Buttons
   ========================================================================== */
/* Dark filled button */
.boxed-btn3,
.boxed-btn,
.button.button-contactForm,
button.button-contactForm {
  display: inline-block !important;
  background: var(--c-deep) !important;
  color: var(--c-white) !important;
  border: 2px solid var(--c-deep) !important;
  border-radius: 6px !important;
  font-family: var(--font-body) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  padding: 14px 32px !important;
  cursor: pointer !important;
  transition: background var(--ease), color var(--ease) !important;
  text-decoration: none !important;
  line-height: 1.4 !important;
}
.boxed-btn3:hover,
.boxed-btn:hover,
.button.button-contactForm:hover,
button.button-contactForm:hover {
  background: transparent !important;
  color: var(--c-deep) !important;
}

/* Gold filled button */
.boxed-btn4 {
  display: inline-block !important;
  background: var(--c-gold-dark) !important;
  color: var(--c-white) !important;
  border: 2px solid var(--c-gold-dark) !important;
  border-radius: 6px !important;
  font-family: var(--font-body) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  padding: 14px 32px !important;
  cursor: pointer !important;
  transition: background var(--ease), color var(--ease) !important;
  text-decoration: none !important;
  line-height: 1.4 !important;
}
.boxed-btn4:hover {
  background: transparent !important;
  color: var(--c-gold-dark) !important;
}

/* Bootstrap .btn-primary (puppy card Apply buttons) */
.btn.btn-primary,
.btn-primary {
  background-color: var(--c-deep) !important;
  border-color: var(--c-deep) !important;
  border-radius: 6px !important;
  font-family: var(--font-body) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 2px !important;
  padding: 12px 28px !important;
  transition: background var(--ease), border-color var(--ease) !important;
  box-shadow: none !important;
}
.btn.btn-primary:hover,
.btn.btn-primary:focus,
.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--c-gold-dark) !important;
  border-color: var(--c-gold-dark) !important;
  box-shadow: none !important;
}

/* 7. Pet Care / About section
   ========================================================================== */
.pet_care_area {
  background: var(--c-white) !important;
  padding: 90px 0 !important;
}

.pet_info .section_title h3 {
  font-size: clamp(1.8rem, 3.5vw, 2.6rem) !important;
  margin-bottom: 1.25rem !important;
}

.pet_info .section_title h3 span { color: var(--c-gold-dark) !important; }

.pet_info .section_title p {
  font-size: 1rem !important;
  line-height: 1.85 !important;
  color: var(--c-muted) !important;
}

.pet_info .section_title p span {
  color: var(--c-gold-dark) !important;
  font-weight: 700;
}

.pet_thumb img {
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-md) !important;
  width: 100%;
  object-fit: cover;
}

/* 8. Homepage — puppy section heading
   ========================================================================== */
h3.display-5 {
  font-family: var(--font-display) !important;
  color: var(--c-deep) !important;
}

h3.display-5 span { color: var(--c-gold-dark) !important; }

h3.display-5 + p {
  color: var(--c-muted) !important;
  font-size: .95rem !important;
}

/* 9. Puppy listing section (toypoodle.html / minigoldendoodle.html)
   ========================================================================== */
.container-fluid.py-5 {
  background: var(--c-cream) !important;
  padding-top: 80px !important;
  padding-bottom: 80px !important;
}

/* Accent bar & heading */
.border-start.border-5.border-primary {
  border-left: 4px solid var(--c-gold) !important;
  padding-left: 28px !important;
  max-width: none !important;
}

.border-start.border-5.border-primary h1 {
  font-family: var(--font-display) !important;
  font-size: clamp(1.5rem, 2.8vw, 2.1rem) !important;
  color: var(--c-deep) !important;
  font-weight: 700 !important;
  text-transform: none !important;
}

/* Card grid gap */
.row.g-5 {
  --bs-gutter-x: 1.5rem;
  --bs-gutter-y: 1.75rem;
}

/* Individual puppy card */
.col-lg-4 .bg-light,
.col-md-6 .bg-light {
  background: var(--c-white) !important;
  border-radius: var(--radius) !important;
  overflow: hidden !important;
  border: 1px solid var(--c-border) !important;
  box-shadow: var(--shadow-sm) !important;
  padding-top: 0 !important;
  margin-top: 0 !important;
  transition: box-shadow var(--ease), transform var(--ease) !important;
}

.col-lg-4 .bg-light:hover,
.col-md-6 .bg-light:hover {
  box-shadow: var(--shadow-lg) !important;
  transform: translateY(-6px) !important;
}

/* Puppy photo — square-ish crop */
.col-lg-4 .bg-light > img.img-fluid,
.col-md-6 .bg-light > img.img-fluid {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center top;
  display: block;
  border-radius: 0 !important;
}

/* Price band — swap blue for warm gold */
.col-lg-4 .bg-light .text-center.bg-primary,
.col-md-6 .bg-light .text-center.bg-primary {
  background: var(--c-gold-light) !important;
  padding: 14px 22px !important;
  margin-bottom: 0 !important;
  border-bottom: 1px solid var(--c-cream-dark) !important;
}

.col-lg-4 .bg-light .text-center.bg-primary h1,
.col-md-6 .bg-light .text-center.bg-primary h1 {
  color: var(--c-deep) !important;
  font-family: var(--font-display) !important;
  font-size: 1.85rem !important;
  font-weight: 700 !important;
  margin: 0 !important;
}

.col-lg-4 .bg-light .text-center.bg-primary h1 small,
.col-md-6 .bg-light .text-center.bg-primary h1 small {
  color: var(--c-brown) !important;
}

/* Card body */
.col-lg-4 .bg-light .text-center.p-4,
.col-md-6 .bg-light .text-center.p-4 {
  padding: 18px 22px 22px !important;
  text-align: left !important;
}

/* Puppy name heading */
.col-lg-4 .bg-light h1.display-5,
.col-md-6 .bg-light h1.display-5 {
  font-family: var(--font-display) !important;
  font-size: 1.4rem !important;
  color: var(--c-deep) !important;
  font-weight: 700 !important;
  margin-bottom: 6px !important;
  text-transform: capitalize !important;
}

/* Info rows */
.col-lg-4 .bg-light .d-flex.align-items-center.justify-content-between,
.col-md-6 .bg-light .d-flex.align-items-center.justify-content-between {
  display: block !important;
  margin-bottom: 4px !important;
}

.col-lg-4 .bg-light .d-flex span,
.col-md-6 .bg-light .d-flex span {
  font-size: 13.5px;
  color: var(--c-muted);
  line-height: 1.5;
  display: block;
}

/* Age/gender — pill badge (first .d-flex after name .d-flex) */
.col-lg-4 .bg-light .text-center.p-4 > .d-flex:nth-of-type(1) span,
.col-md-6 .bg-light .text-center.p-4 > .d-flex:nth-of-type(1) span {
  display: inline-block !important;
  background: var(--c-cream-mid) !important;
  border: 1px solid var(--c-cream-dark) !important;
  border-radius: 20px !important;
  padding: 3px 12px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .8px !important;
  color: var(--c-brown) !important;
  margin-bottom: 10px !important;
  text-transform: uppercase !important;
}

/* Apply button fill width */
.col-lg-4 .bg-light a.btn,
.col-md-6 .bg-light a.btn {
  display: block !important;
  text-align: center !important;
  margin-top: 14px !important;
}

/* 10. Stats / Adopt section
   ========================================================================== */
.adapt_area {
  background: var(--c-cream-mid) !important;
  padding: 90px 0 !important;
}

.adapt_help .section_title h3 {
  font-size: clamp(1.6rem, 3.5vw, 2.4rem) !important;
}

.adapt_help .section_title h3 span { color: var(--c-gold-dark) !important; }
.adapt_help .section_title p { color: var(--c-muted) !important; }

.single_adapt {
  background: var(--c-white) !important;
  border-radius: var(--radius) !important;
  padding: 28px 20px !important;
  margin-bottom: 20px !important;
  box-shadow: var(--shadow-sm) !important;
  border: 1px solid var(--c-border) !important;
}

.adapt_content h3 {
  font-size: 2.1rem !important;
  color: var(--c-deep) !important;
}

.adapt_content h3 .counter { color: var(--c-gold-dark) !important; }
.adapt_content p { color: var(--c-muted) !important; font-size: .9rem !important; }

/* 11. Gallery
   ========================================================================== */
.row.px-3 {
  gap: 3px;
  display: flex;
  flex-wrap: wrap;
}

.row.px-3 > div { padding: 0 !important; }

.row.px-3 img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: center;
  transition: filter var(--ease);
}

.row.px-3 .col-12 img { aspect-ratio: 16 / 9; }
.row.px-3 img:hover { filter: brightness(1.07); }

/* Gallery section heading */
.col-lg-5 > H3 span,
.col-lg-5 > h3 span {
  font-size: clamp(1.5rem, 3vw, 2.1rem) !important;
  color: var(--c-deep) !important;
}

/* 12. "Why get a puppy" / CTA dark banner
   ========================================================================== */
.contact_anipat.anipat_bg_1,
.contact_anipat {
  background: var(--c-deep) !important;
  background-image: none !important;
  padding: 90px 0 !important;
}

.contact_text .section_title h3 {
  color: var(--c-white) !important;
  font-size: clamp(1.8rem, 3.5vw, 2.6rem) !important;
}

.contact_text .section_title p {
  color: rgba(255, 255, 255, .70) !important;
  font-size: 1rem !important;
}

/* 13. Review / Testimonial cards
   ========================================================================== */
.container.mt-5 { margin-top: 0 !important; }
.container.mt-5.pt-5 { padding-top: 80px !important; padding-bottom: 80px !important; }

.d-flex.flex-column.text-center.mb-5 h1 {
  font-family: var(--font-display) !important;
  font-size: clamp(1.8rem, 3.5vw, 2.8rem) !important;
  color: var(--c-deep) !important;
}

.d-flex.flex-column.text-center.mb-5 h1 span.text-primary {
  color: var(--c-gold-dark) !important;
}

.team.card {
  background: var(--c-white) !important;
  border-radius: var(--radius) !important;
  border: 1px solid var(--c-border) !important;
  box-shadow: var(--shadow-sm) !important;
  overflow: hidden !important;
  transition: box-shadow var(--ease), transform var(--ease) !important;
}

.team.card:hover {
  box-shadow: var(--shadow-md) !important;
  transform: translateY(-4px) !important;
}

.team.card .card-img-top {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: center top;
}

.team.card .card-body {
  padding: 20px 20px 24px !important;
  text-align: left !important;
}

.test_content h4,
.test_content h4 span {
  font-family: var(--font-display) !important;
  font-size: 1rem !important;
  color: var(--c-deep) !important;
  font-weight: 700 !important;
  margin-bottom: 10px !important;
  display: block;
}

.test_content p {
  font-size: 13.5px !important;
  color: var(--c-muted) !important;
  line-height: 1.7 !important;
  font-style: italic;
  margin: 0 !important;
}

/* 14. Contact Form
   ========================================================================== */
.contact-section {
  background: var(--c-cream) !important;
  padding: 90px 0 !important;
}

.contact-title {
  font-family: var(--font-display) !important;
  font-size: clamp(1.8rem, 3.5vw, 2.4rem) !important;
  color: var(--c-deep) !important;
  margin-bottom: 10px !important;
  font-weight: 700 !important;
}

.form-contact .form-control,
.apply-form .form-control {
  border: 1.5px solid var(--c-border) !important;
  border-radius: var(--radius-sm) !important;
  background: var(--c-white) !important;
  color: var(--c-deep) !important;
  padding: 13px 16px !important;
  font-family: var(--font-body) !important;
  font-size: 15px !important;
  height: auto !important;
  transition: border-color var(--ease), box-shadow var(--ease) !important;
}

.form-contact .form-control:focus,
.apply-form .form-control:focus {
  border-color: var(--c-gold-dark) !important;
  box-shadow: 0 0 0 3px rgba(181, 145, 63, .13) !important;
  outline: none !important;
}

.form-contact .form-control::placeholder,
.apply-form .form-control::placeholder { color: #bbb !important; }

.contact-info__icon {
  background: var(--c-gold-light) !important;
  color: var(--c-gold-dark) !important;
  border-radius: 50% !important;
}

.media.contact-info { margin-bottom: 28px; }

.contact-info h3 {
  font-family: var(--font-display) !important;
  font-size: 1.05rem !important;
  color: var(--c-deep) !important;
  margin-bottom: 4px !important;
}

.contact-info p {
  font-size: .9rem !important;
  color: var(--c-muted) !important;
  margin: 0 !important;
}

/* 15. Apply page — banners
   ========================================================================== */
.success-banner {
  background: #eef8f2 !important;
  border-color: #2cb67d !important;
  border-radius: var(--radius-sm) !important;
}
.success-banner h4 { color: #1a6640 !important; font-family: var(--font-display) !important; }
.success-banner p  { color: #2a5f42 !important; }

.error-banner {
  background: #fef0f0 !important;
  border: 1.5px solid #e05252 !important;
  border-radius: var(--radius-sm) !important;
}

.puppy-selected-banner {
  background: var(--c-gold-light) !important;
  border-color: var(--c-gold) !important;
  border-radius: var(--radius-sm) !important;
}

.puppy-selected-banner .ps-name { color: var(--c-deep) !important; }

/* Apply form labels */
.apply-label { color: var(--c-brown) !important; }

/* 16. Footer
   ========================================================================== */
.footer,
.footer .footer_top,
footer.footer { background: var(--c-deep) !important; }

.footer_top { padding: 64px 0 44px !important; }

.footer_title {
  font-family: var(--font-display) !important;
  font-size: .85rem !important;
  color: var(--c-gold) !important;
  text-transform: uppercase !important;
  letter-spacing: 1.8px !important;
  margin-bottom: 18px !important;
  font-weight: 700 !important;
}

.footer .links li,
.footer .address_line li { margin-bottom: 9px; }

.footer .links li a,
.footer .address_line li a,
.footer .address_text {
  color: rgba(255, 255, 255, .58) !important;
  font-size: 14px !important;
  transition: color var(--ease) !important;
}

.footer .links li a:hover { color: var(--c-gold) !important; }

.copy-right_text {
  background: rgba(0, 0, 0, .22) !important;
  padding: 18px 0 !important;
}

.bordered_1px { border-color: rgba(255, 255, 255, .1) !important; }

.copy_right,
.copy_right p { color: rgba(255, 255, 255, .36) !important; font-size: 12px !important; }
.copy_right h1 { color: rgba(255, 255, 255, .55) !important; font-size: .8rem !important; }

.socail_links ul { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.socail_links ul li { margin: 0 !important; }

.socail_links ul li a {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 38px !important;
  height: 38px !important;
  background: rgba(255, 255, 255, .08) !important;
  color: rgba(255, 255, 255, .62) !important;
  border-radius: 50% !important;
  font-size: 15px !important;
  transition: background var(--ease), color var(--ease) !important;
}

.socail_links ul li a:hover {
  background: var(--c-gold) !important;
  color: var(--c-deep) !important;
}

/* 17. Responsive
   ========================================================================== */
@media (max-width: 1199px) {
  #navigation > li > a { padding: 28px 9px !important; font-size: 10.5px !important; }
}

@media (max-width: 991px) {
  .pet_care_area             { padding: 60px 0 !important; }
  .adapt_area                { padding: 60px 0 !important; }
  .contact_anipat.anipat_bg_1{ padding: 60px 0 !important; }
  .contact-section           { padding: 60px 0 !important; }
  .container-fluid.py-5     { padding-top: 60px !important; padding-bottom: 60px !important; }
  .col-lg-4 .bg-light        { margin-top: 0 !important; }
}

@media (max-width: 767px) {
  body { font-size: 15px; }

  .slider_text h3 { font-size: 1.8rem !important; }
  .slider_text p  { font-size: .95rem !important; max-width: 100%; }

  .row.g-5 { --bs-gutter-y: 1.25rem; }

  .bradcam_area { padding: 44px 0 !important; }

  .single_adapt { padding: 22px 16px !important; }

  .footer_top { padding: 44px 0 28px !important; }

  .container.mt-5.pt-5 { padding-top: 50px !important; padding-bottom: 50px !important; }
}

@media (max-width: 480px) {
  .boxed-btn3, .boxed-btn4, .boxed-btn,
  .button.button-contactForm { padding: 12px 22px !important; letter-spacing: 1.5px !important; }

  .col-lg-4 .bg-light .text-center.p-4 { padding: 14px 16px 18px !important; }
}