/* ==========================================================================
   Hobby Lookout — Phase 1 (Homepage: About / Contact / Branding)
   All colors, fonts, and spacing are driven by CSS variables below so the
   look can be swapped once branding is confirmed with the client. Avoid
   hardcoding raw color/font values elsewhere in this stylesheet.
   ========================================================================== */

:root {
  /* --- Palette, sampled directly from the digital logo kit
     (assets/images/Components + Hobby Lookout Logo). These replace the earlier
     slate tones taken off the printed flyer — the digital artwork is the
     source of truth for colour now. --- */
  --color-bg: #f6f8fc;
  --color-surface: #ffffff;
  --color-surface-alt: #e9eef8;
  --color-text: #141a33;
  --color-text-muted: #55607d;
  --color-border: #d7deec;

  --color-primary: #1a226a;      /* tower navy — the logo's dominant solid */
  --color-primary-dark: #010541; /* deepest navy in the tower shading */
  --color-primary-contrast: #ffffff;

  --color-sky: #2c67a3;          /* mid-gradient blue */
  --color-sky-light: #3d8ec5;    /* bottom of the sky gradient */
  --color-moonlight: #ecf0f7;    /* the d20's lit faces */

  --color-accent-purple: #4a5aa8; /* indigo mid-tone, replaces the flyer's dusty purple */
  --color-accent-gold: #dea84f;   /* gold — flyer WhatsApp banner text, kept as the warm accent */
  --color-accent-gold-dark: #bd8935;

  /* --- Night sky (the hero gradient, read top-to-bottom off IMG_7185) --- */
  --color-night: #121946;
  --color-night-deep: #0b1030;
  --color-night-mid: #1d3b71;
  --color-text-on-dark: #f2f5fc;
  --color-text-muted-on-dark: #a9b8da;

  /* --- Typography (matched to the flyer: bold condensed headings, serif wordmark) --- */
  --font-heading: "Oswald", "Segoe UI", Helvetica, Arial, sans-serif;
  --font-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* --- Layout --- */
  --container-width: 1120px;
  --radius: 10px;
  --shadow-sm: 0 1px 2px rgba(20, 18, 14, 0.06);
  --shadow-md: 0 8px 24px rgba(20, 18, 14, 0.10);

  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;
  --space-5: 4rem;
  --space-6: 6rem;
}

/* --- Reset --- */
* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

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

/* Anchor targets must clear the sticky header, or jumping to #about parks the
   heading underneath it. --header-h is kept current by js/main.js; the
   fallback covers the first paint before that runs. Only scroll-margin-top is
   set here — pairing it with scroll-padding-top on <html> makes the two
   offsets stack and overshoot by a whole header's height. */
section[id] {
  scroll-margin-top: calc(var(--header-h, 72px) + var(--space-3));
}

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

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

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

a:hover,
a:focus-visible {
  text-decoration: underline;
}

h1, h2, h3 {
  font-family: var(--font-heading);
  line-height: 1.2;
  margin: 0 0 var(--space-2);
  color: var(--color-text);
}

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

.section-label {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  font-family: var(--font-heading);
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: var(--space-1);
}

/* The d20 from the logo, used consistently as *the* section mark across the
   page — one recurring brand motif rather than an assortment of icons.
   Drawn as a line icon rather than the artwork PNG, which collapses into an
   unreadable white dot at this size; masking it with currentColor lets each
   section tint the die to its own label colour. */
.section-label::before {
  content: "";
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  background-color: var(--color-accent-gold);
  -webkit-mask: url("../assets/images/brand/d20-icon.svg") center / contain no-repeat;
  mask: url("../assets/images/brand/d20-icon.svg") center / contain no-repeat;
}

.section-intro {
  max-width: 640px;
  margin-bottom: var(--space-4);
}

.section-intro h2 {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
}

.section-intro p {
  color: var(--color-text-muted);
  margin: 0;
}

/* --- Header / Nav --- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-2) var(--space-3);
  max-width: var(--container-width);
  margin: 0 auto;
}

.nav-brand {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

.nav-brand-mark {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
}

.nav-brand-word {
  width: auto;
  height: 17px;
}

.nav-brand:hover,
.nav-brand:focus-visible {
  text-decoration: none;
}

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 0.4rem 0.6rem;
  cursor: pointer;
  color: var(--color-text);
}

.nav-toggle .bar {
  display: block;
  width: 22px;
  height: 2px;
  background: currentColor;
  margin: 4px 0;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-links a {
  color: var(--color-text);
  font-family: var(--font-heading);
  font-size: 0.95rem;
}

.nav-links a:hover,
.nav-links a:focus-visible {
  color: var(--color-primary);
  text-decoration: none;
}

/* `.nav-links a` would otherwise out-specify .btn-primary's own colour and
   leave the button's label navy-on-navy. */
.nav-links a.btn-primary,
.nav-links a.btn-primary:hover,
.nav-links a.btn-primary:focus-visible {
  color: var(--color-primary-contrast);
}

.btn {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 600;
  padding: 0.65rem 1.3rem;
  border-radius: var(--radius);
  border: 1px solid transparent;
  cursor: pointer;
}

.btn:hover,
.btn:focus-visible {
  text-decoration: none;
}

.btn-primary {
  background: var(--color-primary);
  color: var(--color-primary-contrast);
}

.btn-primary:hover,
.btn-primary:focus-visible {
  background: var(--color-primary-dark);
}

.btn-outline {
  background: transparent;
  border-color: var(--color-border);
  color: var(--color-text);
}

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

.btn-whatsapp {
  display: block;
  width: 100%;
  text-align: center;
  background: var(--color-primary-dark);
  color: var(--color-accent-gold);
  border-color: var(--color-primary-dark);
}

.btn-whatsapp:hover,
.btn-whatsapp:focus-visible {
  background: var(--color-primary);
  color: var(--color-accent-gold);
}

.btn-gold {
  background: var(--color-accent-gold);
  color: var(--color-night-deep);
  border-color: var(--color-accent-gold);
}

.btn-gold:hover,
.btn-gold:focus-visible {
  background: var(--color-accent-gold-dark);
  border-color: var(--color-accent-gold-dark);
}

.btn-ghost-light {
  background: transparent;
  border-color: rgba(242, 244, 250, 0.4);
  color: var(--color-text-on-dark);
}

.btn-ghost-light:hover,
.btn-ghost-light:focus-visible {
  border-color: var(--color-text-on-dark);
  color: var(--color-text-on-dark);
}

/* Chevron "ribbon" shape — echoes the flyer's own WhatsApp banner cut */
.btn-ribbon {
  clip-path: polygon(1.1em 0, 100% 0, calc(100% - 1.1em) 50%, 100% 100%, 1.1em 100%, 0 50%);
  padding-left: 1.9rem;
  padding-right: 1.9rem;
}

/* --- Hero ---
   The brand illustration is rebuilt here from its own source layers rather
   than used as one flat image, so the moon, tower and ridge can drift at
   different rates on scroll. The text sits in its own grid column and the
   art in another, which is what keeps the telescope from ever landing behind
   the headline (the failure mode of the earlier full-bleed treatment). --- */
.hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse 70% 55% at 72% 18%, rgba(61, 142, 197, 0.30) 0%, transparent 62%),
    linear-gradient(178deg,
      var(--color-night-deep) 0%,
      var(--color-night) 34%,
      var(--color-night-mid) 78%,
      var(--color-sky) 100%);
  color: var(--color-text-on-dark);
  padding-bottom: 3.5rem;
}

/* Decorative sky layer: starfield wash + the drifting dragon. Sits behind
   the content but above the gradient. */
.hero-sky {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

/* Scattered pin-point stars, drawn as gradients so they cost no requests */
.hero-sky::before {
  content: "";
  position: absolute;
  inset: -10% 0 20%;
  background-image:
    radial-gradient(1.6px 1.6px at 12% 22%, rgba(255, 255, 255, 0.9) 50%, transparent 100%),
    radial-gradient(1.3px 1.3px at 28% 64%, rgba(255, 255, 255, 0.7) 50%, transparent 100%),
    radial-gradient(1.8px 1.8px at 47% 14%, rgba(255, 255, 255, 0.85) 50%, transparent 100%),
    radial-gradient(1.2px 1.2px at 63% 48%, rgba(255, 255, 255, 0.65) 50%, transparent 100%),
    radial-gradient(1.7px 1.7px at 81% 28%, rgba(255, 255, 255, 0.8) 50%, transparent 100%),
    radial-gradient(1.3px 1.3px at 91% 62%, rgba(255, 255, 255, 0.7) 50%, transparent 100%),
    radial-gradient(1.5px 1.5px at 7% 78%, rgba(255, 255, 255, 0.6) 50%, transparent 100%),
    radial-gradient(1.4px 1.4px at 37% 88%, rgba(255, 255, 255, 0.55) 50%, transparent 100%);
  animation: star-twinkle 6s ease-in-out infinite alternate;
}

@keyframes star-twinkle {
  from { opacity: 0.45; }
  to   { opacity: 1; }
}

/* Soft moonlight bloom behind the artwork */
.hero-glow {
  position: absolute;
  top: -12%;
  right: 4%;
  width: 46%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(236, 240, 247, 0.16) 0%, transparent 68%);
}

/* Easter egg: the dragon from the tower window, out for a long slow glide.
   Deliberately small, low-contrast and slow — noticeable on a second look,
   not competing with the headline. */
.hero-dragon {
  position: absolute;
  top: 16%;
  left: -8%;
  width: clamp(26px, 3.2vw, 46px);
  height: auto;
  opacity: 0.32;
  filter: brightness(1.7);
  animation: dragon-glide 34s linear infinite;
}

@keyframes dragon-glide {
  0%   { transform: translate(0, 0) scaleX(1); opacity: 0; }
  6%   { opacity: 0.34; }
  48%  { transform: translate(52vw, -3vh) scaleX(1); opacity: 0.34; }
  54%  { transform: translate(58vw, -2vh) scaleX(1); opacity: 0; }
  100% { transform: translate(126vw, 2vh) scaleX(1); opacity: 0; }
}

.hero-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-6) var(--space-3) var(--space-5);
  max-width: var(--container-width);
  margin: 0 auto;
}

.hero-copy {
  max-width: 520px;
}

/* The scene box mirrors the artwork's original square canvas; every layer is
   positioned as a percentage of it, which is what holds the tower, telescope
   and moon in register at any size. */
.hero-scene {
  position: relative;
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  aspect-ratio: 1 / 1;
}

.scene-layer {
  position: absolute;
  height: auto;
  will-change: transform;
}

/* Coordinates below are the layers' true positions on the 5000x5000 source
   canvas, expressed as percentages — do not nudge them individually or the
   telescope stops lining up with the die. */
.scene-moon  { left: 29.86%; top:  2.84%; width: 56.24%; }
.scene-stars { left: 14.88%; top: 33.14%; width: 66.24%; animation: star-twinkle 5s ease-in-out infinite alternate; }
.scene-tower { left: 29.06%; top: 25.56%; width: 33.42%; }
.scene-ridge { left:  2.54%; top: 66.46%; width: 83.56%; }

/* All hero motion is decorative — twinkle, the dragon's glide and the
   scroll parallax (applied in js/main.js) all drop out together here, leaving
   the same illustration rendered statically. */
@media (prefers-reduced-motion: reduce) {
  .hero-sky::before,
  .scene-stars {
    animation: none;
    opacity: 1;
  }

  .hero-dragon {
    animation: none;
    top: 14%;
    left: 8%;
    opacity: 0.3;
  }

  .scene-layer {
    transform: none !important;
    will-change: auto;
  }
}

.hero-copy h1 {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 5vw, 3.8rem);
  color: var(--color-text-on-dark);
}

.hero-tagline {
  font-size: 1.15rem;
  color: var(--color-text-muted-on-dark);
  margin: 0 0 var(--space-2);
  max-width: 46ch;
}

.hero-supporting {
  font-size: 1rem;
  color: var(--color-text-muted-on-dark);
  margin: 0 0 var(--space-3);
  max-width: 50ch;
  opacity: 0.9;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.section-divider {
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  width: 100%;
  height: 60px;
}

/* --- Scroll reveal (applied by js/main.js; skipped for reduced motion) --- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal.in {
  opacity: 1;
  transform: translateY(0);
}

/* .gallery-item declares its own (faster) hover transition later in this
   file at equal specificity, which would otherwise win and make the entrance
   animate at hover speed. Raise specificity so the entrance keeps its own
   timing; once revealed, the tile falls back to the quick hover transition. */
.gallery-item.reveal:not(.in) {
  transition: opacity 0.7s ease, transform 0.7s ease;
}

/* Gallery tiles cascade rather than all landing at once */
.gallery-item.reveal:nth-child(2) { transition-delay: 0.07s; }
.gallery-item.reveal:nth-child(3) { transition-delay: 0.14s; }
.gallery-item.reveal:nth-child(4) { transition-delay: 0.21s; }
.gallery-item.reveal:nth-child(5) { transition-delay: 0.28s; }
.gallery-item.reveal:nth-child(6) { transition-delay: 0.35s; }

.contact-card.reveal:nth-child(2) { transition-delay: 0.09s; }
.contact-card.reveal:nth-child(3) { transition-delay: 0.18s; }

/* --- About --- */
.about {
  position: relative;
  overflow: hidden;
  padding: var(--space-6) 0;
  background:
    radial-gradient(ellipse 700px 500px at 88% 12%, rgba(26, 34, 106, 0.07) 0%, transparent 70%),
    var(--color-bg);
}

/* The wordmark's moon-"O" as a small ink accent tucked behind the heading —
   sized and placed against the copy rather than floating in open space,
   where a large faint disc just reads as a smudge on the background. */
.about-copy {
  position: relative;
}

.about-copy::before {
  content: "";
  position: absolute;
  top: -1.6rem;
  left: -2.2rem;
  width: clamp(76px, 8vw, 104px);
  aspect-ratio: 218 / 240;
  background: url("../assets/images/brand/ink-blob.png") center / contain no-repeat;
  opacity: 0.11;
  pointer-events: none;
  z-index: 0;
}

.about-copy > * {
  position: relative;
  z-index: 1;
}

.about-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
  align-items: center;
}

.about-media img {
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
}

.about-copy p {
  color: var(--color-text-muted);
  margin: 0 0 var(--space-2);
}

.feature-box {
  margin-top: var(--space-3);
  border: 1.5px dashed var(--color-primary);
  border-radius: var(--radius);
  padding: var(--space-3);
}

.feature-box-header {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: var(--space-2);
}

.feature-box-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--color-accent-gold);
  color: var(--color-night-deep);
  flex-shrink: 0;
}

.feature-box-badge svg {
  width: 15px;
  height: 15px;
}

.feature-box-header span {
  font-family: var(--font-heading);
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  font-size: 0.85rem;
  color: var(--color-primary);
}

.about-highlights {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--space-2);
}

.about-highlights li {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  color: var(--color-text);
  line-height: 1.5;
}

/* Category title on its own line above its description — a single long line
   broken by a dash is markedly harder to scan down. */
.highlight-text {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  color: var(--color-text-muted);
}

.highlight-text strong {
  color: var(--color-text);
  font-family: var(--font-heading);
  font-weight: 600;
  letter-spacing: 0.01em;
}

.about-highlights .icon {
  width: 22px;
  height: 22px;
  margin-top: 0.15em;
  color: var(--color-primary);
  flex-shrink: 0;
}

/* --- Gallery: the page's "night showcase" ---
   Dropping this one section back into the night-sky palette does two things:
   it gives the page a light/dark rhythm instead of one continuous field of
   white, and it makes the shop photos glow the way lit product shots do
   against a dark wall. About and Contact stay light for reading comfort. */
.gallery {
  position: relative;
  overflow: hidden;
  padding: var(--space-6) 0;
  background:
    radial-gradient(ellipse 80% 60% at 82% 6%, rgba(61, 142, 197, 0.22) 0%, transparent 64%),
    linear-gradient(175deg, var(--color-night-deep) 0%, var(--color-night) 55%, var(--color-night-mid) 100%);
  color: var(--color-text-on-dark);
}

/* Same pin-point starfield as the hero, so the two dark bands read as the
   same sky rather than two unrelated dark blocks. */
.gallery::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(1.5px 1.5px at 9% 16%, rgba(255, 255, 255, 0.75) 50%, transparent 100%),
    radial-gradient(1.2px 1.2px at 24% 72%, rgba(255, 255, 255, 0.55) 50%, transparent 100%),
    radial-gradient(1.6px 1.6px at 52% 9%, rgba(255, 255, 255, 0.7) 50%, transparent 100%),
    radial-gradient(1.3px 1.3px at 69% 84%, rgba(255, 255, 255, 0.5) 50%, transparent 100%),
    radial-gradient(1.5px 1.5px at 88% 34%, rgba(255, 255, 255, 0.65) 50%, transparent 100%);
  animation: star-twinkle 7s ease-in-out infinite alternate;
}

.gallery .container {
  position: relative;
  z-index: 1;
}

.gallery .section-label {
  color: var(--color-accent-gold);
}

.gallery .section-intro h2 {
  color: var(--color-text-on-dark);
}

.gallery .section-intro p {
  color: var(--color-text-muted-on-dark);
}

@media (prefers-reduced-motion: reduce) {
  .gallery::before {
    animation: none;
    opacity: 1;
  }
}

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

.gallery-item {
  display: block;
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid rgba(236, 240, 247, 0.16);
  box-shadow: 0 6px 20px rgba(5, 9, 28, 0.45);
  transition: box-shadow 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}

.gallery-item:hover,
.gallery-item:focus-visible {
  border-color: var(--color-accent-gold);
  box-shadow: 0 14px 34px rgba(5, 9, 28, 0.6), 0 0 0 1px rgba(222, 168, 79, 0.35);
  transform: translateY(-3px);
}

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

.gallery-item:hover img,
.gallery-item:focus-visible img {
  transform: scale(1.04);
}

/* --- Contact --- */
.contact {
  background: var(--color-surface-alt);
  border-top: 1px solid var(--color-border);
  padding: var(--space-6) 0;
}

.contact-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
}

.contact-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-3);
  box-shadow: var(--shadow-sm);
}

.contact-card h3 {
  font-size: 1.05rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.contact-card .icon {
  width: 20px;
  height: 20px;
  color: var(--color-primary);
  flex-shrink: 0;
}

.contact-card address {
  font-style: normal;
  color: var(--color-text-muted);
  margin: 0 0 var(--space-2);
}

.contact-card p {
  color: var(--color-text-muted);
  margin: 0 0 var(--space-1);
}

/* Landmark line under the address — smaller than the address itself so it
   reads as a helper, not part of the postal address. */
.contact-card .contact-note {
  font-size: 0.9rem;
  font-style: italic;
  margin: 0 0 var(--space-2);
}

.contact-card ul {
  list-style: none;
  margin: 0;
  padding: 0;
  color: var(--color-text-muted);
}

.contact-card li {
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
  padding: 0.25rem 0;
  border-bottom: 1px dashed var(--color-border);
}

.contact-card li:last-child {
  border-bottom: none;
}

.contact-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: var(--space-2);
}

/* --- Embedded map --- */
.contact-map {
  margin: var(--space-4) 0 0;
}

.contact-map iframe {
  display: block;
  width: 100%;
  height: 380px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  /* The embed paints white while loading, which flashes against the section */
  background: var(--color-surface-alt);
}

.contact-map figcaption {
  margin-top: var(--space-1);
  font-size: 0.9rem;
  color: var(--color-text-muted);
}

.contact-map figcaption a {
  font-weight: 600;
  white-space: nowrap;
}

.contact-card-actions .btn {
  flex: 1;
  text-align: center;
  white-space: nowrap;
}

/* The Hobby Lookout ⇄ Starving Bard switcher and portal-transition styles
   lived here; removed for the Phase 1 launch along with their markup. See the
   note in index.html — git commit 07972df has the full implementation. */

/* --- Footer --- */
.site-footer {
  padding: var(--space-3) 0;
  text-align: center;
  color: var(--color-text-muted);
  font-size: 0.85rem;
}

.site-footer p {
  margin: 0.25rem 0;
}

/* --- Responsive --- */
@media (max-width: 860px) {
  .hero-inner,
  .about-inner {
    grid-template-columns: 1fr;
  }

  /* The illustration stays *below* the copy on narrow screens: the store name,
     tagline and the two contact buttons are what a phone visitor needs first,
     and leading with a tall square image pushed all of it below the fold. */
  .hero-scene {
    order: 1;
    max-width: 340px;
  }

  .hero-copy {
    order: 0;
  }

  .hero-inner {
    padding-top: var(--space-5);
    gap: var(--space-3);
  }

  .about-media {
    order: -1;
  }

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

  .contact-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .nav-toggle {
    /* Column, not row — the three .bar spans are flex children here and would
       otherwise sit side by side instead of stacking into a hamburger. */
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* 44px is the minimum comfortable touch target */
    min-width: 44px;
    min-height: 44px;
  }

  .nav-links {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--space-1) var(--space-3) var(--space-3);
    display: none;
    box-shadow: var(--shadow-md);
  }

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

  /* Full-width rows rather than small inline links — the whole row is tappable */
  .nav-links li {
    border-bottom: 1px solid var(--color-border);
  }

  .nav-links li:last-child {
    border-bottom: none;
    margin-top: var(--space-2);
  }

  .nav-links a {
    display: flex;
    align-items: center;
    min-height: 48px;
    font-size: 1.05rem;
  }

  .nav-links .btn {
    width: 100%;
    justify-content: center;
    text-align: center;
    min-height: 48px;
  }

  /* Single column: two columns at phone width left each photo too small to
     read, and the tiles are the main draw of the section. */
  .gallery-grid {
    grid-template-columns: 1fr;
    gap: var(--space-2);
  }

  /* Full-width CTAs, comfortably tappable */
  .hero-actions {
    gap: 0.75rem;
  }

  .hero-actions .btn,
  .contact-card-actions .btn,
  .contact-card .btn-outline {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 48px;
  }

  /* The chevron cut eats into the label at full width, so square these off */
  .hero-actions .btn-ribbon,
  .contact-card-actions .btn-ribbon {
    clip-path: none;
    padding-left: 1.3rem;
    padding-right: 1.3rem;
  }

  .contact-card-actions {
    flex-direction: column;
  }

  .contact-card-actions .btn {
    flex: none;
  }

  .about,
  .gallery,
  .contact {
    padding: var(--space-5) 0;
  }

  .contact-map iframe {
    height: 280px;
  }
}