/* The site's look, on the Stitch-served gallery pages (/widget/gallery/…).

   Stitch renders our <nav> and footer (pasted into its admin Photo
   Management page; the footer's source is deploy/stitch-pages/footer.html)
   around every public gallery page it serves on coffeyoffroad.com, with
   this stylesheet linked after its own widget.css. Two jobs:

   1. The page's palette. Stitch's pages are built on --st-* tokens, and
      this file loads after widget.css (and after the gallery's own widget
      stylesheet), so the :root block below wins at equal specificity and
      the whole page — the interactive gallery at /widget/gallery included
      — takes our colours. It is the gallery's whole theme now that the old
      gallery.html embed is gone (it 301s to /widget/gallery).
   2. The nav's and footer's own rules. Only those — style.css as a whole
      would fight widget.css over body/html — so a change to the nav or
      footer in style.css needs mirroring here.

   Kept in sync with: :root tokens, .text-gold/.text-cream, the "nav",
   "buttons", "footer" and "gallery page" blocks, .footer-cta-strip, the
   fadeIn/slideUp keyframes, and the nav, section and footer halves of the
   760px media query in style.css. */

@import url("https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;600;700;800&family=Barlow:wght@400;500;600&display=swap");

:root {
  --color-black: #141210;
  --color-black-rgb: 20,18,16;
  --color-card-hover: #1b1813;
  --color-card-hover-2: #201c16;
  --color-gold: #c9a96e;
  --color-gold-rgb: 201,169,110;
  --color-gold-hover: #d9b97e;
  --color-cream: #f0e8d8;
  --color-text-muted-2: #94886f;
  --color-text-dim: #8f8474;
  --color-text-dim-2: #8a7f71;
  --color-text-faint: #9a8f7f;
  --color-black-darker: #0d0b09;
  --color-black-strip: #1a1612;
  --border-hairline: rgba(255,255,255,0.04);
  --font-heading: 'Barlow Condensed', sans-serif;
  --font-body: 'Barlow', sans-serif;

  /* ── Stitch page theme — what Stitch.init({theme}) carried in the old gallery.html ── */
  --st-color-primary:       var(--color-gold);
  --st-color-primary-hover: var(--color-gold-hover);
  --st-color-primary-light: rgba(var(--color-gold-rgb), 0.09);
  --st-color-bg:            var(--color-black);
  --st-color-surface:       var(--color-card-hover);
  --st-color-surface-hover: var(--color-card-hover-2);
  --st-color-border:        rgba(var(--color-gold-rgb), 0.18);
  --st-color-text:          var(--color-cream);
  --st-color-text-muted:    var(--color-text-muted-2);
  --st-font-family:         var(--font-body);
  --st-font-family-heading: var(--font-heading);
  --st-radius:              2px;
  --st-radius-sm:           2px;
  --st-ring-color:          rgba(var(--color-gold-rgb), 0.28);
}

/* Stitch's filled button is white-on-primary; on our gold that is our own
   .btn--gold's rule, black on gold, so the Buy-original pill reads the way
   Book a Job does. */
.st-btn-primary,
.st-btn-primary:hover:not(:disabled) { color: var(--color-black); }

/* Stitch wraps the fragment in .st-chrome-tenant inside a padded page root;
   these margins pull the bar out to the viewport edge like it is on the
   marketing pages, and give the content below it room. */
.st-chrome-tenant {
  margin: calc(-1 * var(--st-spacing)) calc(-1 * var(--st-spacing)) 16px;
}

.text-gold { color: var(--color-gold); }
.text-cream { color: var(--color-cream); }

/* ── nav ── */
.nav-toggle-input { display: none; }

.nav-toggle-label {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 26px;
  cursor: pointer;
}
.nav-toggle-label span {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--color-cream);
}

.site-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(var(--color-black-rgb),0.96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(var(--color-gold-rgb),0.1);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 60px;
  height: 64px;
}
.nav-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.nav-brand img { height: 34px; width: auto; flex-shrink: 0; }
.nav-brand-text { font: 700 24px/1 var(--font-heading); letter-spacing: 0.04em; color: var(--color-cream); }

.nav-links { display: flex; align-items: center; gap: 36px; }
.nav-link {
  font: 600 17px/1 var(--font-heading);
  letter-spacing: 0.04em;
  color: var(--color-text-dim);
  text-decoration: none;
  text-transform: uppercase;
}
.nav-link:hover { color: var(--color-cream); }
.nav-phone {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 700 19px/1 var(--font-heading);
  letter-spacing: 0.01em;
  color: var(--color-gold);
  text-decoration: none;
  white-space: nowrap;
}
.nav-phone:hover { color: var(--color-cream); }
.nav-phone svg { flex-shrink: 0; width: 18px; height: 18px; }

/* ── buttons (the nav's "Book a Job") ── */
.btn {
  display: inline-flex;
  align-items: center;
  font: 700 15px/1 var(--font-heading);
  letter-spacing: 0.08em;
  text-decoration: none;
  text-transform: uppercase;
  border-radius: 2px;
}
.btn--gold { background: var(--color-gold); color: var(--color-black); }
.btn--gold:hover { background: var(--color-gold-hover); }
.btn--sm { padding: 11px 24px; }
.btn--md { padding: 13px 28px; flex-shrink: 0; }

/* ── gallery hero ──
   Stitch renders the gallery index's hero as a fixed shape —
   .st-gallery-hero > .st-gallery-hero-inner > (.st-gallery-hero-text >
   .st-gallery-eyebrow + h1.st-gallery-title) + .st-gallery-intro — from the
   Eyebrow, Title and Intro fields on its Photo Management page. These rules
   paint it as the site's own gallery header: the "gallery page" block of
   style.css (.gallery-header, -inner, -text, -eyebrow, -title, .gallery-desc)
   and its fadeIn/slideUp keyframes, renamed so they cannot collide with
   Stitch's own. The title's two lines ("Build / Gallery") come from
   width: min-content rather than a <br>, which the title field cannot hold. */
@keyframes coffey-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes coffey-slide-up {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* Full width like the header bar, and flush beneath it: the header carries
   a 16px bottom margin, which the hero takes back. */
.st-gallery-hero {
  margin: -16px calc(-1 * var(--st-spacing)) var(--st-spacing);
  background: var(--color-black);
  padding: 72px 60px 52px;
  border-bottom: 1px solid rgba(var(--color-gold-rgb),0.1);
}
.st-gallery-hero-inner {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
}
.st-gallery-hero-text { display: block; animation: coffey-slide-up 0.7s cubic-bezier(0.16,1,0.3,1) both; }
.st-gallery-hero .st-gallery-eyebrow {
  margin: 0 0 16px;
  font: 600 11px/1 var(--font-heading);
  letter-spacing: 0.3em;
  color: var(--color-gold);
  text-transform: uppercase;
}
.st-gallery-hero .st-gallery-title {
  width: min-content;
  margin: 0;
  font: 800 clamp(52px,7vw,96px)/0.92 var(--font-heading);
  color: var(--color-cream);
  text-transform: uppercase;
  letter-spacing: -0.015em;
}
.st-gallery-hero .st-gallery-intro {
  max-width: 380px;
  font: 400 15px/1.7 var(--font-body);
  color: var(--color-text-dim-2);
  animation: coffey-fade-in 0.7s ease 0.2s both;
}
.st-gallery-hero .st-gallery-intro p { margin: 0; }
/* The grid's gutter, from .gallery-grid-section (40px 60px 80px), less the
   16px Stitch's page root already pads with. */
.st-gallery-app { padding: 24px 44px 64px; }

/* ── footer (Stitch renders it in .st-chrome-tenant-footer, full width,
   outside the page's padded root) ──
   The gallery index also loads its widget bundle's Tailwind stylesheet,
   whose preflight zeroes margins and sets svg{display:block} — the values
   below are explicit where that would otherwise change them. */
/* No gap of its own: on the gallery index the grid's gutter (.st-gallery-app
   above) already ends 80px from it, as .gallery-grid-section did. */
.st-chrome-tenant-footer { margin-top: 0; }
.footer-cta-strip {
  background: var(--color-black-strip);
  border-top: 1px solid rgba(var(--color-gold-rgb),0.1);
  padding: 28px 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.footer-cta-text { margin: 0; font: 600 14px/1.4 var(--font-heading); letter-spacing: 0.06em; color: var(--color-text-dim-2); }
.site-footer {
  background: var(--color-black-darker);
  padding: 28px 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px 32px;
  flex-wrap: wrap;
  border-top: 1px solid var(--border-hairline);
}
.footer-brand-group { display: flex; align-items: center; gap: 18px; }
.footer-brand { font: 700 14px/1 var(--font-heading); letter-spacing: 0.1em; color: var(--color-text-dim); white-space: nowrap; }
.footer-social { display: inline-flex; color: var(--color-text-dim); }
.footer-social:hover { color: var(--color-gold); }
.footer-phone { font: 700 16px/1 var(--font-heading); letter-spacing: 0.01em; color: var(--color-cream); text-decoration: none; white-space: nowrap; }
.footer-phone:hover { color: var(--color-gold); }
.footer-copy { margin: 0; font: 400 13px/1.6 var(--font-body); color: var(--color-text-faint); text-align: right; }
.footer-poweredby { color: var(--color-text-faint); text-decoration: none; }
.footer-poweredby:hover { color: var(--color-gold); text-decoration: underline; }

@media (max-width: 760px) {
  .site-nav {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }

  .nav-toggle-label { display: flex; }

  .nav-links {
    display: none !important;
    position: fixed;
    top: 64px;
    left: 0;
    right: 0;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 20px !important;
    background: var(--color-black);
    padding: 24px;
    border-bottom: 1px solid rgba(var(--color-gold-rgb),0.15);
  }
  .nav-toggle-input:checked ~ .nav-links { display: flex !important; }

  .st-gallery-hero,
  .site-footer { padding-left: 24px; padding-right: 24px; }
  .st-gallery-app { padding-left: 8px; padding-right: 8px; }
  .site-footer { flex-direction: column; text-align: center; }
  .footer-copy { text-align: center; }
}