/* =====================================================================
   LUCKY DOGS KITCHEN — STYLESHEET
   ---------------------------------------------------------------------
   Layout/geometry modeled on jackallenskitchen.com (client-approved
   design reference, cloned via .claude/skills/clone-site). Palette and
   type substituted for Lucky Dogs Kitchen's own brand — see
   _clone-work/CLONE-REPORT.md for the full fidelity/deviation log.
   ===================================================================== */


/* =========================================================
   TOKENS
   ========================================================= */
:root{
  /* Surfaces */
  --bg: #FFFFFF;
  --surface: #FCF0E0;           /* cream, sampled from the client logo badge */

  /* Brand — sampled directly from client-input/logos/Lucky Dogs Logo.svg */
  --brand-primary: #DA0100;     /* logo red */
  --brand-primary-dark: #A80100;
  --brand-accent: #171310;      /* near-black, from logo mascot/outline */

  /* Text */
  --ink: #171310;
  --ink-soft: #55504A;
  --ink-on-dark: #FFFFFF;
  --ink-on-dark-soft: rgba(255,255,255,.82);

  /* Lines */
  --rule: rgba(23,19,16,.12);
  --rule-strong: rgba(23,19,16,.22);

  /* Type stacks
     The source site's paid "Veneer" / "Veneer Clean" fonts (which can't be
     redistributed without a license — see CLONE-REPORT.md) have been fully
     removed from the codebase: no font files, no @font-face, no references
     anywhere. Every place that used to render in Veneer/Veneer Clean
     (assets/css/bundle.min.css — headings, nav, buttons, labels, card
     names) now uses the client-supplied "Anxious Naomi" display font
     instead. Anton/Oswald below are this file's own placeholder display
     stacks, unrelated to that substitution. Syncopate and Georgia are used
     on the source site and are free/system fonts, so they're kept as-is. */
  --display: "Anton", "Arial Narrow", sans-serif;
  --display-h2: "Anxious Naomi", "Oswald", -apple-system, "Segoe UI", sans-serif;
  --sans-alt: "Oswald", -apple-system, "Segoe UI", sans-serif;
  --tracked: "Syncopate", -apple-system, "Segoe UI", sans-serif;
  --serif: Georgia, "Times New Roman", serif;

  /* Layout */
  --maxw: 1230px;
  --maxw-narrow: 1180px;
  --gut: clamp(20px, 4vw, 40px);
}


/* =========================================================
   RESET
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--serif);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img, picture, svg { display: block; max-width: 100%; height: auto; }
button { font: inherit; cursor: pointer; }
a { color: var(--brand-primary); text-decoration: none; }
a:hover { color: var(--brand-primary-dark); }
::-moz-selection { color: #fff; background-color: #8F0403; }
::selection { color: #fff; background-color: #8F0403; }
h1, h2, h3, h4 { font-family: var(--display); font-weight: 400; margin: 0; text-transform: uppercase; }
h2, h2.heading-4, h2.about-cta-title { font-family: var(--display-h2); }
.wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gut); }
.wrap--narrow { max-width: var(--maxw-narrow); }
.skip-link{ position:absolute; left:-9999px; top:0; background:var(--brand-primary); color:#fff; padding:12px 20px; z-index:999; }
.skip-link:focus{ left:12px; top:12px; }


/* =========================================================
   HEADER / NAV
   ========================================================= */
.site-header{
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  padding: 18px 0;
  transition: background-color .25s ease, padding .25s ease, box-shadow .25s ease;
}
.site-header .wrap{ max-width: 1500px; display:flex; align-items:center; justify-content:space-between; gap: 24px; }

.brand{ display:flex; align-items:center; gap:12px; z-index: 2; }
.brand img{ width: 76px; height: 76px; transition: width .25s ease, height .25s ease; }
.brand-name{ font-family: var(--display); font-size: 20px; letter-spacing: .02em; color: var(--ink-on-dark); transition: color .25s ease; }

#nav{ display:flex; align-items:center; gap:20px; }
#nav[data-open="false"] #navLinks{ display: none; }
.nav-list{ list-style:none; display:flex; align-items:center; gap: 30px; margin:0; padding:0; }
.nav-list a{
  font-family: var(--tracked); font-weight:700; font-size: 12px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-on-dark); transition: color .25s ease;
}
.nav-list a:hover{ color: var(--brand-primary); }
.nav-cta{
  font-family: var(--sans-alt); font-weight:600; font-size:14px; letter-spacing:.04em; text-transform:uppercase;
  background: var(--brand-primary); color:#fff !important; padding: 12px 22px; border-radius: 2px;
}
.nav-cta:hover{ background: var(--brand-primary-dark); }

.menu-btn{
  display:none; background:none; border:0; padding:8px; z-index:2;
  flex-direction:column; gap:5px; width:36px;
}
.menu-btn span{ display:block; height:2px; background: var(--ink-on-dark); transition: background .25s ease; }

.site-header.is-scrolled{
  background: var(--bg);
  padding: 10px 0;
  box-shadow: 0 2px 14px rgba(0,0,0,.08);
}
.site-header.is-scrolled .brand img{ width: 54px; height: 54px; }
.site-header.is-scrolled .brand-name,
.site-header.is-scrolled .nav-list a{ color: var(--ink); }
.site-header.is-scrolled .menu-btn span{ background: var(--ink); }

/* Static (always-light) header variant — used on interior pages without a dark hero */
.site-header.is-static{ position: static; background: var(--bg); box-shadow: 0 1px 0 var(--rule); }
.site-header.is-static .brand-name,
.site-header.is-static .nav-list a{ color: var(--ink); }
.site-header.is-static .menu-btn span{ background: var(--ink); }


/* =========================================================
   HERO
   ========================================================= */
.hero{
  position: relative;
  min-height: 700px;
  display: flex; align-items:center; justify-content:center;
  padding: 160px var(--gut) 80px;
  text-align:center;
  overflow: hidden;
}
.hero picture, .hero img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;
}
.hero::after{
  content:""; position:absolute; inset:0; z-index:1;
  background: linear-gradient(180deg, rgba(10,8,7,.55) 0%, rgba(10,8,7,.35) 45%, rgba(10,8,7,.72) 100%);
}
.hero-content{ position:relative; z-index:2; max-width: 720px; }
.hero .eyebrow{
  font-family: var(--tracked); font-weight:700; font-size:13px; letter-spacing:.18em;
  text-transform:uppercase; color: var(--brand-primary); margin: 0 0 18px;
}
.hero h1{
  color:#fff; font-size: clamp(44px, 8vw, 100px); line-height: 0.95; letter-spacing: .01em;
  margin: 0 0 22px;
}
.hero p{ color: var(--ink-on-dark-soft); font-size: 18px; line-height:1.6; margin: 0 auto 32px; max-width: 56ch; }
.hero-ctas{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }

.btn{
  display:inline-block; font-family: var(--sans-alt); font-weight:600; font-size:15px;
  letter-spacing:.04em; text-transform:uppercase; padding: 15px 28px; border-radius:2px;
  border: 1px solid transparent; transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.btn-primary{ background: var(--brand-primary); border-color: var(--brand-primary); color:#fff; }
.btn-primary:hover{ background: var(--brand-primary-dark); border-color: var(--brand-primary-dark); color:#fff; }
.btn-outline{ background: transparent; border-color: rgba(255,255,255,.7); color:#fff; }
.btn-outline:hover{ background: rgba(255,255,255,.12); color:#fff; }
.btn-outline.on-light{ border-color: var(--ink); color: var(--ink); }
.btn-outline.on-light:hover{ background: var(--ink); color:#fff; }


/* =========================================================
   ABOUT ("The Heart of Lucky Dogs Kitchen")
   ========================================================= */
.about{ padding: 96px 0; }
.about .wrap{ display:flex; align-items:center; gap: 60px; }
.about-copy{ flex: 0 0 380px; max-width: 380px; }
.about-copy .eyebrow{
  font-family: var(--tracked); font-weight:700; font-size:12px; letter-spacing:.12em;
  text-transform:uppercase; color: var(--brand-primary); margin:0 0 10px;
}
.about-copy h2{ font-size: clamp(34px, 4vw, 52px); line-height:1; color: var(--ink); margin-bottom: 18px; }
.about-copy p{ color: var(--ink-soft); font-size:17px; line-height:1.7; margin: 0 0 22px; }
.about-media{ flex:1; border-radius: 4px; overflow:hidden; }
.about-media img{ width:100%; height:100%; object-fit:cover; aspect-ratio: 3/2; }


/* =========================================================
   INFO STRIP (Hours / Menu / Where We Roll)
   ========================================================= */
.info-strip{ background: var(--surface); padding: 44px 0; }
.info-strip .wrap{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.info-card h3{ font-size: 22px; letter-spacing:.02em; color: var(--ink); margin-bottom:8px; }
.info-card p{ color: var(--ink-soft); font-size:15px; line-height:1.6; margin:0 0 8px; }
.info-card a{ font-family: var(--sans-alt); font-weight:600; font-size:13px; letter-spacing:.04em; text-transform:uppercase; }


/* =========================================================
   FEATURE BLOCKS (Daily Specials / Book Us / Follow Us)
   ========================================================= */
.features{ padding: 96px 0; }
.features .wrap{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 48px; }
.feature-card{ text-align:center; }
.feature-media{ border-radius:4px; overflow:hidden; margin-bottom: 22px; aspect-ratio: 4/3; }
.feature-media img{ width:100%; height:100%; object-fit:cover; }
.feature-icon{
  width:64px; height:64px; margin: 0 auto 22px; border-radius:50%;
  background: var(--surface); display:flex; align-items:center; justify-content:center;
}
.feature-icon svg{ width:28px; height:28px; }
.feature-card h3{ font-size: 24px; color: var(--ink); margin-bottom: 12px; }
.feature-card p{ color: var(--ink-soft); font-size:15px; line-height:1.65; margin: 0 0 16px; }
.social-row{ display:flex; gap:14px; justify-content:center; }
.social-row a, .social-row span{
  width:40px; height:40px; border-radius:50%; border:1px solid var(--rule-strong);
  display:flex; align-items:center; justify-content:center; color: var(--ink);
}
.social-row a:hover{ border-color: var(--brand-primary); color: var(--brand-primary); }
.social-note{ font-size: 13px; color: var(--ink-soft); margin-top: 10px; }


/* =========================================================
   SERVICE AREA ("Where We Roll")
   ========================================================= */
.service-area{ position:relative; padding: 110px 0; text-align:center; overflow:hidden; }
.service-area picture, .service-area img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.service-area::after{ content:""; position:absolute; inset:0; z-index:1; background: rgba(23,19,16,.72); }
.service-area .wrap{ position:relative; z-index:2; max-width: 720px; }
.service-area .eyebrow{
  font-family: var(--tracked); font-weight:700; font-size:12px; letter-spacing:.14em;
  text-transform:uppercase; color: var(--brand-primary); margin:0 0 14px;
}
.service-area h2{ color:#fff; font-size: clamp(32px, 4.5vw, 56px); margin-bottom:18px; }
.service-area p{ color: var(--ink-on-dark-soft); font-size:17px; line-height:1.7; margin: 0 auto 30px; }


/* =========================================================
   BOOK US / CONTACT
   ========================================================= */
.book-us{ padding: 96px 0; }
.book-us .wrap{ max-width: 640px; text-align:center; }
.book-us .eyebrow{
  font-family: var(--tracked); font-weight:700; font-size:12px; letter-spacing:.14em;
  text-transform:uppercase; color: var(--brand-primary); margin:0 0 12px;
}
.book-us h2{ font-size: clamp(32px, 4vw, 48px); margin-bottom: 16px; }
.book-us > .wrap > p{ color: var(--ink-soft); font-size:16px; line-height:1.7; margin: 0 0 36px; }

.qf-form{ text-align:left; display:grid; gap:18px; }
.qf-field{ display:flex; flex-direction:column; gap:6px; }
.qf-field label{ font-family: var(--sans-alt); font-size:13px; font-weight:600; letter-spacing:.03em; text-transform:uppercase; color: var(--ink); }
.qf-field input, .qf-field textarea{
  font-family: var(--serif); font-size:16px; padding: 13px 14px; border:1px solid var(--rule-strong);
  border-radius:2px; background:#fff; color: var(--ink);
}
.qf-field textarea{ min-height: 120px; resize: vertical; }
.qf-form .btn-primary{ justify-self:start; border:0; }
.qf-note{ font-size:13px; color: var(--ink-soft); margin-top:16px; }


/* =========================================================
   FOOTER
   ========================================================= */
.site-footer{ background: var(--ink); color: var(--ink-on-dark-soft); padding: 64px 0 28px; }
.footer-top{ display:flex; justify-content:space-between; gap:40px; flex-wrap:wrap; margin-bottom:40px; }
.footer-brand{ display:flex; align-items:center; gap:14px; }
.footer-brand img{ width:56px; height:56px; }
.footer-brand span{ font-family: var(--display); font-size:20px; color:#fff; text-transform:uppercase; }
.footer-nav{ list-style:none; display:flex; gap:28px; flex-wrap:wrap; margin:0; padding:0; }
.footer-nav a{
  font-family: var(--tracked); font-weight:700; font-size:11px; letter-spacing:.08em;
  text-transform:uppercase; color: var(--ink-on-dark-soft);
}
.footer-nav a:hover{ color: var(--brand-primary); }
.footer-bottom{
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px;
  padding-top:24px; border-top:1px solid rgba(255,255,255,.12);
  font-size:13px; color: rgba(255,255,255,.55);
}
.footer-bottom a{ color: rgba(255,255,255,.55); text-decoration:underline; text-underline-offset:3px; }
.footer-bottom a:hover{ color:#fff; }
.footer-social{ display:flex; gap:14px; }
.footer-social a, .footer-social span{
  width:34px; height:34px; border-radius:50%; border:1px solid rgba(255,255,255,.22);
  display:flex; align-items:center; justify-content:center; color: rgba(255,255,255,.75);
}
.footer-social a:hover{ border-color: var(--brand-primary); color: var(--brand-primary); }


/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 900px){
  .menu-btn{ display:flex; }
  .nav-list{ flex-direction:column; align-items:flex-start; gap:18px; }
  #nav[data-open="true"] #navLinks{
    display:flex; position:absolute; top:100%; left:0; right:0; background: var(--bg);
    padding: 28px var(--gut); box-shadow: 0 12px 24px rgba(0,0,0,.12);
  }
  #nav[data-open="true"] #navLinks .nav-list a{ color: var(--ink); }
  #nav[data-open="true"] #navLinks .nav-cta{ color:#fff !important; }

  .about .wrap{ flex-direction:column; }
  .about-copy{ flex-basis:auto; max-width:100%; text-align:center; }

  .info-strip .wrap{ grid-template-columns: 1fr; text-align:center; }
  .features .wrap{ grid-template-columns: 1fr; }
}

@media (max-width: 600px){
  .hero{ min-height:560px; padding-top:130px; }
  .hero h1{ font-size: clamp(38px, 12vw, 60px); }
  .about{ padding: 64px 0; }
  .features{ padding: 64px 0; }
  .service-area{ padding: 72px 0; }
  .book-us{ padding: 64px 0; }
  .footer-top{ flex-direction:column; }
}


/* =========================================================
   COMING SOON (kept for reference / other environments)
   ========================================================= */
body.coming-soon {
  min-height: 100vh; display:flex; flex-direction:column; justify-content:center; align-items:center;
  padding: clamp(24px, 6vw, 64px); text-align:center;
}
body.coming-soon main { max-width: 56ch; margin: auto 0; }
body.coming-soon h1 { font-size: clamp(40px, 8vw, 84px); line-height: 1.05; margin: 0 0 20px; text-transform:none; }
body.coming-soon .lede { font-family: var(--serif); font-size: clamp(18px, 2.2vw, 22px); color: var(--ink-soft); margin: 0 0 16px; }


/* =========================================================
   PRIVACY POLICY (simple legal page)
   ========================================================= */
.legal{ padding: 160px 24px 96px; max-width: 760px; margin-inline:auto; box-sizing: border-box; }
.legal h1{ font-size: clamp(32px, 5vw, 48px); margin-bottom: 24px; }
.legal h2{ font-size: 22px; text-transform:none; margin: 36px 0 12px; font-family: var(--sans-alt); font-weight:600; }
.legal p, .legal li{ color: var(--ink-soft); font-size:16px; line-height:1.75; font-family: var(--serif); }
.legal ul{ padding-left: 22px; }

/* Final QA (2026-08-26): in-prose links were distinguished by colour alone,
   which Lighthouse flags and which fails for colour-blind readers. Underline
   them so they read as links without relying on hue. Nav/CTA links are
   excluded - they already read as controls from their position and styling. */
.legal p a,
.legal li a{
  color: var(--brand-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.legal p a:hover,
.legal li a:hover{ color: var(--brand-primary-dark); }