/* ==========================================================================
   BEARS BUNGALOW — STYLESHEET
   Rustic/cozy cabin theme. Mobile-first: base styles target small screens,
   media queries at the bottom scale things up for tablet/desktop.
   Shared by index.html and our-guests.html.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. FONTS (self-hosted)
   Both are variable fonts — one file each covers every weight we use.
   Self-hosted instead of linked from Google's CDN so no visitor IP address
   is ever sent to Google just from loading the site (an EU GDPR concern
   with the standard Google Fonts <link> embed).
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url("../fonts/fraunces-variable.woff2") format("woff2");
}

@font-face {
  font-family: "Nunito Sans";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../fonts/nunito-sans-variable.woff2") format("woff2");
}

/* --------------------------------------------------------------------------
   1. DESIGN TOKENS
   Change colors/fonts here and they update everywhere on the site.
   -------------------------------------------------------------------------- */
:root {
  /* Color palette — warm cabin tones */
  --color-forest: #33473a;        /* deep pine green — header, footer, dark text on light bg */
  --color-forest-dark: #22301c;   /* darker green — hover states, nav bg */
  --color-wood: #7a4b32;          /* warm brown — secondary accents */
  --color-amber: #d79a45;         /* gold/amber — buttons, highlights */
  --color-amber-dark: #b97d2e;    /* amber hover state */
  --color-terracotta: #9c4a24;    /* CTA accent — darkened from #b0562d for a safer AA contrast margin on cream */
  --color-cream: #faf4ea;         /* main background */
  --color-cream-alt: #f1e7d6;     /* alternating section background */
  --color-card: #fffdf9;          /* card background */
  --color-text: #2e2620;          /* primary text */
  --color-text-light: #5c5248;    /* secondary/muted text */
  --color-border: #e3d6bf;

  /* Typography */
  --font-heading: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;

  /* Layout */
  --max-width: 1180px;
  --radius: 14px;
  --shadow: 0 10px 30px rgba(34, 26, 15, 0.12);
}

/* --------------------------------------------------------------------------
   2. RESET & BASE
   -------------------------------------------------------------------------- */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* Skip link — hidden off-screen until keyboard-focused, then jumps
   above the header so it's the very first thing a keyboard user can act on. */
.skip-link {
  position: absolute;
  top: -100px;
  left: 12px;
  z-index: 1000;
  background: var(--color-forest-dark);
  color: var(--color-cream);
  padding: 12px 20px;
  border-radius: 8px;
  font-weight: 700;
  transition: top 0.15s ease;
}

.skip-link:focus {
  top: 12px;
}

body {
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-cream);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

a {
  color: inherit;
  text-decoration: none;
}

ul {
  list-style: none;
}

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: 600;
  line-height: 1.2;
  color: var(--color-forest);
}

.container {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 20px;
}

.section {
  padding: 64px 0;
}

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

.section-heading {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 40px;
}

.section-heading h2 {
  font-size: 2rem;
  margin-bottom: 12px;
}

.section-heading p {
  color: var(--color-text-light);
  font-size: 1.05rem;
}

.eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 0.75rem;
  color: var(--color-terracotta);
  margin-bottom: 10px;
}

/* Reusable button */
.btn {
  display: inline-block;
  padding: 16px 36px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 1rem;
  border: none;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.btn--primary {
  background: var(--color-amber);
  color: var(--color-forest-dark);
}

.btn--primary:hover {
  background: var(--color-amber-dark);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(183, 125, 46, 0.35);
}

.btn--outline {
  background: transparent;
  border: 2px solid var(--color-cream);
  color: var(--color-cream);
}

.btn--outline:hover {
  background: var(--color-cream);
  color: var(--color-forest-dark);
}

/* --------------------------------------------------------------------------
   3. SITE HEADER / NAV
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--color-forest);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
}

.site-logo {
  font-family: var(--font-heading);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--color-cream);
  letter-spacing: 0.02em;
}

.site-logo span {
  color: var(--color-amber);
}

.nav-links {
  display: none;
  gap: 32px;
}

.nav-links a {
  color: var(--color-cream);
  font-weight: 600;
  font-size: 0.95rem;
  transition: color 0.15s ease;
}

.nav-links a:hover {
  color: var(--color-amber);
}

.nav-cta {
  display: none;
}

/* Mobile menu toggle button */
.nav-toggle {
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.nav-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--color-cream);
}

/* Mobile nav panel */
.mobile-nav {
  display: none;
  flex-direction: column;
  background: var(--color-forest-dark);
  padding: 16px 20px 24px;
}

.mobile-nav.is-open {
  display: flex;
}

.mobile-nav a {
  color: var(--color-cream);
  padding: 12px 0;
  border-bottom: 1px solid rgba(250, 244, 234, 0.12);
  font-weight: 600;
}

.mobile-nav .btn {
  margin-top: 16px;
  text-align: center;
}

/* --------------------------------------------------------------------------
   4. HERO
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 88vh;
  display: flex;
  align-items: flex-end;
  background: linear-gradient(180deg, rgba(34, 26, 15, 0.15) 0%, rgba(24, 18, 10, 0.75) 100%),
    url("../images/hero-exterior.jpg") center/cover no-repeat;
}

.hero-content {
  color: var(--color-cream);
  padding-bottom: 64px;
  max-width: 640px;
}

.hero-content .eyebrow {
  color: var(--color-amber);
}

.hero-content h1 {
  font-size: 2.4rem;
  color: var(--color-cream);
  margin-bottom: 14px;
}

.hero-content p {
  font-size: 1.1rem;
  margin-bottom: 28px;
  color: #f2e9d8;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

/* --------------------------------------------------------------------------
   5. ABOUT THE SPACE + AMENITY ICONS
   -------------------------------------------------------------------------- */
.about-copy {
  max-width: 760px;
  margin: 0 auto 48px;
  text-align: center;
}

.about-copy p {
  color: var(--color-text-light);
  font-size: 1.08rem;
}

.amenities-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.amenity-card {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 24px 16px;
  text-align: center;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.amenity-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
}

.amenity-icon {
  width: 42px;
  height: 42px;
  margin: 0 auto 14px;
  color: var(--color-terracotta);
}

.amenity-card h3 {
  font-size: 1rem;
  margin-bottom: 6px;
}

.amenity-card p {
  font-size: 0.88rem;
  color: var(--color-text-light);
}

/* --------------------------------------------------------------------------
   6. PHOTO GALLERY
   -------------------------------------------------------------------------- */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.gallery-item {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  aspect-ratio: 4 / 3;
  cursor: pointer;
  background: var(--color-cream-alt);
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.35s ease;
}

.gallery-item:hover img {
  transform: scale(1.08);
}

.gallery-item figcaption {
  position: absolute;
  inset: auto 0 0 0;
  padding: 10px 12px;
  font-size: 0.78rem;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.55), transparent);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.gallery-item:hover figcaption {
  opacity: 1;
}

/* Lightbox (opened via js/main.js) */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(20, 15, 9, 0.92);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.lightbox.is-open {
  display: flex;
}

.lightbox img {
  max-width: 100%;
  max-height: 82vh;
  border-radius: 8px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.lightbox-close {
  position: absolute;
  top: 20px;
  right: 24px;
  background: none;
  border: none;
  color: #fff;
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
}

.lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.12);
  border: none;
  color: #fff;
  font-size: 1.6rem;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  cursor: pointer;
}

.lightbox-nav:hover {
  background: rgba(255, 255, 255, 0.25);
}

.lightbox-prev {
  left: 16px;
}

.lightbox-next {
  right: 16px;
}

/* --------------------------------------------------------------------------
   7. TESTIMONIALS
   -------------------------------------------------------------------------- */
.testimonials-grid {
  display: grid;
  gap: 20px;
}

.testimonial-card {
  background: var(--color-card);
  border-radius: var(--radius);
  padding: 28px 24px;
  box-shadow: var(--shadow);
}

.testimonial-stars {
  color: var(--color-amber);
  letter-spacing: 2px;
  margin-bottom: 12px;
}

.testimonial-card p.quote {
  font-style: italic;
  color: var(--color-text);
  margin-bottom: 16px;
}

.testimonial-author {
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--color-wood);
}

/* --------------------------------------------------------------------------
   8. CTA BAND
   -------------------------------------------------------------------------- */
.cta-band {
  background: var(--color-forest);
  color: var(--color-cream);
  text-align: center;
  padding: 64px 0;
}

.cta-band h2 {
  color: var(--color-cream);
  font-size: 1.9rem;
  margin-bottom: 12px;
}

.cta-band p {
  color: #d9cfbc;
  margin-bottom: 28px;
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
}

/* --------------------------------------------------------------------------
   9. FOOTER
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--color-forest-dark);
  color: #cfc5b3;
  padding: 48px 0 24px;
}

.footer-grid {
  display: grid;
  gap: 32px;
  margin-bottom: 32px;
}

.footer-col h4 {
  color: var(--color-cream);
  font-size: 1rem;
  margin-bottom: 14px;
}

.footer-col p,
.footer-col a {
  font-size: 0.92rem;
  color: #cfc5b3;
}

.footer-col a:hover {
  color: var(--color-amber);
}

.footer-contact li {
  margin-bottom: 8px;
}

.social-links {
  display: flex;
  gap: 14px;
  margin-top: 6px;
}

.social-links a {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(250, 244, 234, 0.08);
  transition: background 0.15s ease;
}

.social-links a:hover {
  background: var(--color-amber);
}

.social-links svg {
  width: 18px;
  height: 18px;
}

.footer-bottom {
  border-top: 1px solid rgba(250, 244, 234, 0.12);
  padding-top: 20px;
  text-align: center;
  font-size: 0.82rem;
  color: #a89c86;
}

/* --------------------------------------------------------------------------
   10. GUEST GUIDE PAGE (our-guests.html)
   -------------------------------------------------------------------------- */
.guide-hero {
  background: var(--color-forest);
  color: var(--color-cream);
  padding: 56px 0 40px;
  text-align: center;
}

.guide-hero h1 {
  color: var(--color-cream);
  font-size: 2.1rem;
  margin-bottom: 12px;
}

.guide-hero p {
  color: #e4dac5;
  max-width: 560px;
  margin: 0 auto;
}

.guide-quicklinks {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-top: 24px;
}

.guide-quicklinks a {
  background: rgba(250, 244, 234, 0.1);
  border: 1px solid rgba(250, 244, 234, 0.25);
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
}

.guide-quicklinks a:hover {
  background: var(--color-amber);
  color: var(--color-forest-dark);
  border-color: var(--color-amber);
}

.guide-section {
  padding: 40px 0;
  border-bottom: 1px solid var(--color-border);
}

.guide-section:last-of-type {
  border-bottom: none;
}

.guide-section h2 {
  font-size: 1.4rem;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.guide-section h2 .guide-icon {
  width: 28px;
  height: 28px;
  color: var(--color-terracotta);
  flex-shrink: 0;
}

.guide-section p,
.guide-section li {
  color: var(--color-text-light);
  font-size: 0.98rem;
}

.guide-section ul {
  padding-left: 4px;
  display: grid;
  gap: 8px;
}

.guide-section li::before {
  content: "\2022";
  color: var(--color-amber);
  font-weight: 700;
  margin-right: 8px;
}

.placeholder {
  background: #fff3d6;
  color: #7a5a1a;
  padding: 1px 6px;
  border-radius: 4px;
  font-weight: 700;
  font-size: 0.9em;
}

.info-box {
  background: var(--color-card);
  border: 1px dashed var(--color-amber);
  border-radius: var(--radius);
  padding: 20px;
}

.hunt-list {
  counter-reset: hunt;
}

.hunt-list li {
  counter-increment: hunt;
  position: relative;
  padding-left: 8px;
}

.hunt-list li::before {
  content: counter(hunt);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  background: var(--color-wood);
  color: #fff;
  border-radius: 50%;
  font-size: 0.75rem;
  font-weight: 700;
  margin-right: 10px;
}

/* --------------------------------------------------------------------------
   11. RESPONSIVE BREAKPOINTS
   -------------------------------------------------------------------------- */

/* Tablet: 700px+ */
@media (min-width: 700px) {
  .amenities-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .gallery-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .testimonials-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .hero-content h1 {
    font-size: 3rem;
  }
}

/* Desktop: 960px+ */
@media (min-width: 960px) {
  .nav-links {
    display: flex;
  }

  .nav-cta {
    display: inline-block;
  }

  .nav-toggle {
    display: none;
  }

  .section {
    padding: 88px 0;
  }

  .amenities-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .testimonials-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .footer-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .hero-content h1 {
    font-size: 3.6rem;
  }

  .hero-content p {
    font-size: 1.25rem;
  }
}