/*
  Pillow & Paw Dog Retreat – Custom Stylesheet

  This stylesheet defines the design system for the Pillow & Paw website. It
  establishes a modern, responsive layout using flexbox and grid and
  introduces a calm yet sophisticated colour palette inspired by the
  brand's teal and taupe logo variants. Global variables make it easy to
  tweak hues, typography and spacing in one place. Accessibility and
  responsiveness have been carefully considered throughout: all text
  meets contrast guidelines and the layout gracefully adapts from large
  monitors down to small mobile devices.
*/

/* ====================
   Colour palette
   ==================== */
:root {
  /* Primary palette drawn from the brand logos */
  --color-primary: #5f8787;    /* muted teal for backgrounds and accents */
  --color-secondary: #8d806f;  /* warm taupe for highlights */
  --color-accent: #e9e4dc;     /* light cream for subtle backgrounds */
  --color-dark: #333333;       /* dark grey for primary text */
  --color-light: #ffffff;      /* white for text on dark backgrounds */
  --color-muted: #f7f7f7;      /* very light grey for alternating sections */

  /* Font sizing and spacing */
  --font-base: 16px;
  --line-height: 1.6;
  --border-radius: 0.5rem;
  --transition-speed: 0.3s;
}

/* ====================
   Global resets
   ==================== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  font-size: var(--font-base);
  color: var(--color-dark);
  background-color: var(--color-light);
  line-height: var(--line-height);
  scroll-behavior: smooth;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color var(--transition-speed) ease;
}

a:hover, a:focus {
  color: var(--color-secondary);
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 600;
  color: var(--color-dark);
  line-height: 1.2;
}

p {
  margin-bottom: 1rem;
}

/* ====================
   Layout helpers
   ==================== */
.container {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
}

.btn {
  display: inline-block;
  background-color: var(--color-primary); /* blue */
  color: var(--color-light); /* always white text */
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: var(--border-radius);
  cursor: pointer;
  font-weight: 600;
  transition: background-color var(--transition-speed) ease;
  outline: none;
}

.btn:hover,
.btn:focus {
  background-color: var(--color-secondary); /* brown */
  color: var(--color-light); /* always white text */
}

.btn:active {
  background-color: var(--color-primary); /* revert to blue when active */
  color: var(--color-light);
}

/* Outline button variant */
.btn-outline {
  display: inline-block;
  background-color: transparent;
  color: var(--color-primary);
  border: 2px solid var(--color-primary);
  padding: 0.4em 1em;
  border-radius: 2em;
  font-weight: 600;
  text-decoration: none;
  transition: all var(--transition-speed) ease;
  cursor: pointer;
  font-size: 0.9rem;
}

.btn-outline:hover,
.btn-outline:focus {
  background-color: var(--color-primary);
  color: var(--color-light);
  border-color: var(--color-primary);
}

@media (max-width: 600px) {
  .btn-outline {
    padding: 0.3em 0.8em;
    font-size: 0.8rem;
  }
}

@media (max-width: 400px) {
  .btn-outline {
    padding: 0.25em 0.6em;
    font-size: 0.75rem;
  }
}

.section {
  padding: 4rem 0;
}

.section-alt {
  background-color: var(--color-muted);
}

/* ====================
   Header & Navigation
   ==================== */
header {
  background-color: var(--color-light);
  border-bottom: 1px solid #e0e0e0;
  position: sticky;
  top: 0;
  z-index: 1000;
}

.header-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 6rem;
  padding: 0.5rem 0;
}

.logo {
  display: flex;
  align-items: center;
}

.logo img {
  /* Set logo size to be slightly smaller than header height */
  height: 4.5rem; /* Slightly smaller than 6rem header height */
  width: auto;
  max-width: none;
  filter: drop-shadow(0 2px 8px rgba(95, 135, 135, 0.25));
  transition: height 0.3s, filter 0.3s, opacity 0.3s ease;
  /* Hide logo initially when at top of page */
  opacity: 0;
}

/* Show logo when scrolled */
header.scrolled .logo img {
  opacity: 1;
}

nav ul {
  list-style: none;
  display: flex;
  gap: 2rem;
  align-items: center;
}

nav li a {
  font-weight: 500;
  color: var(--color-dark);
  position: relative;
  padding: 0.25rem 0;
  display: inline-block;
}

nav li a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  height: 2px;
  width: 0;
  background-color: var(--color-primary);
  transition: width var(--transition-speed) ease;
}

nav li a:hover::after, nav li a:focus::after {
  width: 100%;
}

/* Active page styling */
nav li a.active {
  color: var(--color-primary);
  font-weight: 600;
}

nav li a.active::after {
  width: 100%;
}

/* Mobile navigation */
.hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 2rem;
  height: 2rem;
  cursor: pointer;
  gap: 0.3rem;
}

.hamburger span {
  width: 100%;
  height: 2px;
  background-color: var(--color-dark);
  transition: transform var(--transition-speed) ease, opacity var(--transition-speed) ease;
}

/* Hamburger animation when open */
.hamburger.open span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}

.hamburger.open span:nth-child(2) {
  opacity: 0;
}

.hamburger.open span:nth-child(3) {
  transform: rotate(-45deg) translate(7px, -6px);
}

@media (max-width: 768px) {
  .logo img {
    height: 3.5rem; /* Smaller on mobile */
  }
  nav ul {
    position: absolute;
    top: 6.5rem;
    right: 0;
    background-color: var(--color-light);
    flex-direction: column;
    width: 200px;
    border: 1px solid #e0e0e0;
    box-shadow: 0 4px 8px rgba(0,0,0,0.05);
    display: none;
    padding: 1rem;
    gap: 1rem;
    z-index: 1001;
    align-items: stretch;
  }
  nav ul.open {
    display: flex;
  }
  .hamburger {
    display: flex;
  }
}

/* ====================
   Hero Section
   ==================== */
/*
  Hero styling
  ------------
  The hero section uses a large full‑bleed background image to set the mood
  for each page.  We previously used a photo of dogs running which some
  visitors found distracting.  To better showcase the retreat itself, we
  now default to a tranquil shot of the kennel building framed by lush
  fields and a rainbow.  If you wish to change this image later, simply
  update the URL below or override it on individual pages with inline
  styles.
*/
.hero {
  position: relative;
  min-height: 70vh;
  /* Default hero background. Individual pages override this with page-specific classes. */
  background-image: url('assets/kennel-field.jpg');
  background-size: cover;
  background-position: center;
  color: var(--color-light);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* Page-specific hero backgrounds */
.hero-home { background-image: url('assets/hero-home.jpg'); }
.hero-about { background-image: url('assets/hero-about.jpg'); }
.hero-services { background-image: url('assets/hero-services.jpg'); }
.hero-booking { background-image: url('assets/hero-booking.jpg'); }
.hero-contact { background-image: url('assets/hero-contact.jpg'); }
.hero-404 { background-image: url('assets/dog-hero.jpg'); }

.hero::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  /* Darken the hero image further so that the overlaid logo and text remain legible. */
  background: rgba(0,0,0,0.6);
}

.hero-content {
  position: relative;
  z-index: 1;
  max-width: 800px;
  padding: 0 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  /* Ensure consistent logo positioning by using min-height for the content area */
  min-height: 50vh;
  justify-content: flex-start;
  padding-top: 8vh;
}

/* Logo overlay inside the hero content */
.hero-logo {
  /* Increase the logo size in the hero for greater prominence */
  width: 300px;
  height: auto;
  margin: 0 auto 1.5rem;
  display: block;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
  /* Ensure consistent position across all pages */
  flex-shrink: 0;
}

.hero-content h1 {
  font-size: 2.5rem;
  margin-bottom: 1rem;
  color: var(--color-light);
}

/* Hero paragraph spacing for button alignment */
.hero-content p {
  font-size: 1.2rem;
  margin-bottom: 0.5rem;
  color: var(--color-accent);
}

/* Hero button container and CTA */
.hero-button-container {
  margin-top: 1.25rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

@media (max-width: 600px) {
  .hero-button-container {
    margin-top: 2rem;
    margin-bottom: 2.5rem;
  }
  .hero-cta-btn {
    padding: 0.85rem 1.7rem;
    font-size: 1.1rem;
  }
}

@media (max-width: 400px) {
  .hero-button-container {
    margin-top: 1.5rem;
    margin-bottom: 2rem;
  }
  .hero-cta-btn {
    padding: 0.7rem 1.3rem;
    font-size: 1rem;
    white-space: normal;
    line-height: 1.3;
  }
  .hero-content {
    padding-top: 5vh;
  }
  .hero-logo {
    width: 250px;
  }
}

@media (max-width: 600px) {
  .hero-content {
    padding-top: 6vh;
  }
}

@media (min-width: 768px) {
  .hero-content h1 {
    font-size: 3.5rem;
  }
  .hero-content p {
    font-size: 1.4rem;
  }
  .hero-cta-btn {
    padding: 0.7rem 1.3rem;
    font-size: 1rem;
  }
}

/* ====================
   Features & services
   ==================== */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
  margin-top: 2rem;
}

.card {
  background-color: var(--color-light);
  border-radius: var(--border-radius);
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
  padding: 2rem;
  text-align: center;
  transition: transform var(--transition-speed) ease, box-shadow var(--transition-speed) ease;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.card svg {
  width: 48px;
  height: 48px;
  fill: var(--color-primary);
  margin: 0 auto 1rem;
}

/* Testimonials responsive grid */
.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin-top: 2rem;
}

.testimonials-grid .card {
  display: flex;
  flex-direction: column;
  justify-content: stretch;
  align-items: stretch;
  min-height: 340px;
  height: 100%;
}

@media (max-width: 992px) {
  .testimonials-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .testimonials-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}

/* ====================
   Table styling
   ==================== */
table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 1rem;
}

th, td {
  padding: 0.75rem 1rem;
  border: 1px solid #ddd;
  text-align: left;
}

th {
  background-color: var(--color-primary);
  color: var(--color-light);
}

tr:nth-child(even) td {
  background-color: var(--color-muted);
}

/* ====================
   Booking form
   ==================== */
.booking-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 2rem;
  background-color: var(--color-light);
  border-radius: var(--border-radius);
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.form-step {
  display: none;
}

.form-step.active {
  display: block;
}

.form-navigation {
  display: flex;
  justify-content: space-between;
  margin-top: 1.5rem;
}

.form-navigation .btn {
  width: 48%;
}

label {
  display: block;
  font-weight: 500;
  margin-bottom: 0.5rem;
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="date"],
input[type="time"],
select,
textarea {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid #ccc;
  border-radius: var(--border-radius);
  font-size: 1rem;
  margin-bottom: 1rem;
  transition: border-color var(--transition-speed) ease;
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(95,135,135,0.2);
}

.progress-bar {
  display: flex;
  justify-content: space-between;
  margin-bottom: 2rem;
}

.progress-bar .step-indicator {
  flex: 1;
  height: 6px;
  margin: 0 4px;
  background-color: #e0e0e0;
  border-radius: 3px;
  position: relative;
}

.progress-bar .step-indicator.active {
  background-color: var(--color-primary);
}

.summary {
  background-color: var(--color-muted);
  padding: 1rem;
  border-radius: var(--border-radius);
  margin-top: 1rem;
}

.summary h3 {
  margin-bottom: 1rem;
}

/* ====================
   Footer
   ==================== */
footer {
  background-color: var(--color-primary);
  color: var(--color-light);
  padding: 2rem 0;
}

footer .footer-content {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: space-between;
}

footer h3 {
  color: var(--color-light);
  margin-bottom: 1rem;
}

footer ul {
  list-style: none;
}

footer ul li {
  margin-bottom: 0.5rem;
}

footer a {
  color: var(--color-accent);
}

footer a:hover {
  color: var(--color-secondary);
}

/* ====================
   Photo Gallery
   ==================== */
/* The gallery displays photos from our collection in a responsive grid. */
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1rem;
  margin-top: 1.5rem;
}

.gallery img {
  width: 100%;
  height: auto;
  border-radius: var(--border-radius);
  object-fit: cover;
}

/* Story photos styling for images embedded within the about page narrative */
.story-photos {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 1rem;
}

.story-photos img {
  flex: 1 1 280px;
  border-radius: var(--border-radius);
  object-fit: cover;
  width: 100%;
  max-height: 500px;
}

/* Routine grid for daily schedule */
.routine-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}

.routine-item h3 {
  margin-bottom: 0.5rem;
  color: var(--color-primary);
  font-size: 1.3rem;
}

.routine-item p {
  font-size: 0.95rem;
  line-height: 1.4;
}

/* Enrichment photos grid */
.enrichment-photos {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 1rem;
}

.enrichment-photos img {
  flex: 1 1 200px;
  border-radius: var(--border-radius);
  object-fit: cover;
  width: 100%;
  max-height: 180px;
}

@media (max-width: 600px) {
  .footer-content {
    flex-direction: column;
  }
  .form-navigation .btn {
    width: 100%;
    margin-bottom: 1rem;
  }
}

/* ====================
   Map Circle Overlay
   ==================== */
/*
  A simple circle outline drawn on top of the OpenStreetMap iframe to indicate
  our approximate location without revealing an exact address. The circle
  remains centred within its parent and does not intercept pointer events.
*/
.map-container {
  position: relative;
}
.map-circle {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 120px;
  height: 120px;
  border: 3px solid var(--color-primary);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
}

/* ====================
   Additional Responsive Fixes
   ==================== */
/* Contact page flex layout */
.contact-flex {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  align-items: stretch;
}

.contact-section {
  flex: 1 1 300px;
  display: flex;
  flex-direction: column;
}

@media (max-width: 768px) {
  .contact-flex {
    flex-direction: column;
    gap: 1.5rem;
  }
  
  .contact-section {
    flex: none;
  }
}

/* Story photos responsive */
@media (max-width: 600px) {
  .story-photos {
    flex-direction: column !important;
    gap: 15px !important;
    margin: 20px 0 !important;
  }
  
  .story-photos img {
    width: 100% !important;
  }
}

/* ====================
   FAQ Styles
   ==================== */
.faq-category {
  background: var(--color-primary);
  color: var(--color-light);
  padding: 1rem 1.5rem;
  margin: 2rem 0 1.5rem 0;
  border-radius: var(--border-radius);
  font-size: 1.3em;
  font-weight: 600;
}

.faq-item {
  background: var(--color-light);
  margin-bottom: 1rem;
  border-radius: var(--border-radius);
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
  overflow: hidden;
  transition: box-shadow var(--transition-speed) ease;
}

.faq-item:hover {
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.faq-question {
  padding: 1.5rem;
  font-weight: 600;
  color: var(--color-dark);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: background-color var(--transition-speed) ease;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  font-size: 1rem;
}

.faq-question:hover {
  background-color: var(--color-accent);
}

.faq-question::after {
  content: '+';
  font-size: 1.5em;
  color: var(--color-primary);
  transition: transform var(--transition-speed) ease;
  flex-shrink: 0;
  margin-left: 1rem;
}

.faq-item.active .faq-question::after {
  transform: rotate(45deg);
}

.faq-answer {
  padding: 0 1.5rem;
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--transition-speed) ease, padding var(--transition-speed) ease;
  color: var(--color-dark);
  line-height: var(--line-height);
}

.faq-item.active .faq-answer {
  padding: 0 1.5rem 1.5rem 1.5rem;
  max-height: 1000px;
}

.important-note {
  background: #fff3cd;
  border-left: 4px solid #ffc107;
  padding: 1rem;
  margin: 1rem 0;
  border-radius: var(--border-radius);
}

.important-note strong {
  color: #856404;
}

@media (max-width: 768px) {
  .faq-question {
    padding: 1.25rem;
    font-size: 0.95rem;
  }
  
  .faq-answer {
    padding: 0 1.25rem;
  }
  
  .faq-item.active .faq-answer {
    padding: 0 1.25rem 1.25rem 1.25rem;
  }
  
  .faq-category {
    font-size: 1.1em;
    padding: 0.75rem 1rem;
  }
}