/* ==========================================================================
   Jack Ranch Cafe & Market
   ========================================================================== */

:root{
  --brick:#7d1f1f;
  --brick-dk:#5c1414;
  --brick-lt:#9b2a2a;
  --cream:#f6ecd8;
  --cream-2:#efe2c8;
  --parch:#faf3e4;
  --wood:#2b1a12;
  --wood-2:#3d2417;
  --wood-3:#1c110b;
  --gold:#d3a45c;
  --gold-lt:#e8c283;
  --star:#e6a127;
  --ink:#2b1a12;
  --ink-soft:#6b5341;

  --f-slab:'Alfa Slab One',serif;
  /* Wood-type face for the display headings: unlike Alfa Slab it carries the
     spurs on the S, M, Y and the thin/thick stroke contrast that the painted
     h1 artwork has. It sets lighter than the artwork, so the headings add
     weight back with a text-stroke rather than a heavier cut (there is none). */
  --f-west:'Rye','Alfa Slab One',serif;
  --f-cond:'Oswald',sans-serif;
  --f-body:'Open Sans','Segoe UI',system-ui,sans-serif;
  --f-script:'Yellowtail',cursive;

  --band:clamp(3.2rem,5.6vw,5rem);
  /* Every inner page banner (About, History, Gallery, Market, Contact)
     is sized off this one value so the pages line up when you tab
     between them. The home hero is deliberately not on it. */
  --hero-h:clamp(430px,58vh,600px);
  --ease:cubic-bezier(.22,.85,.3,1);
  --shadow:0 18px 40px -18px rgba(28,17,11,.55);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--f-body);
  color:var(--ink);
  background:var(--parch);
  line-height:1.65;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,h5{margin:0;line-height:1.1}
p{margin:0}
button{font:inherit;border:0;background:none;cursor:pointer;color:inherit}

.wrap{width:min(1240px,100% - 2.5rem);margin-inline:auto}
.ic{width: 16px;height: 16px;fill:currentColor;flex:none}

.skip-link{
  position:fixed;left:.5rem;top:-4rem;z-index:200;
  background:var(--brick);color:var(--cream);padding:.6rem 1rem;border-radius:4px;
  transition:top .25s;
}
.skip-link:focus{top:.5rem}

/* ================================================================ TOPBAR == */
.topbar{
  background:linear-gradient(180deg,var(--brick-dk),#4a1010);
  color:#f2dcc0;font-family:var(--f-cond);font-size:.8rem;letter-spacing:.02em;
  /* Must sit below the header: the logo sign overhangs upward into this bar,
     and the sticky header scrolls up across it. */
  position:relative;z-index:1;
}
.topbar__inner{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:40px;flex-wrap:wrap}
/* The logo sign overhangs upward into this bar and is centred, so the list
   has to finish before it: tight gaps here, and the hours drop out at the
   narrow end (see the 680px block). */
.topbar__list{display:flex;gap:clamp(.9rem,1.6vw,1.5rem);list-style:none;margin:0;padding:0;flex-wrap:wrap}
.topbar__list li,.topbar__list a{display:inline-flex;align-items:center;gap:.45rem}
.topbar__list a:hover{color:var(--gold-lt)}
.topbar__social{display:flex;gap:.65rem}
.topbar__social a{
  width:26px;height:26px;display:grid;place-items:center;border-radius:50%;
  transition:transform .3s var(--ease),background .3s,color .3s;
  background:var(--gold);color:var(--wood);
}
.topbar__social a:hover{transform:translateY(-2px) scale(1.12)}

/* ================================================================ HEADER == */
.header{
  position:sticky;top:0;z-index:50;
  background:linear-gradient(180deg,#fdf7ea,#f2e6cf);
  border-bottom:3px solid rgba(125,31,31,.22);
  box-shadow:0 6px 24px -12px rgba(43,26,18,.4);
  transition:padding .35s var(--ease),box-shadow .35s;
}
.header__inner{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:78px}

.nav{display:flex;align-items:center;gap:1.6rem}
.nav--left{flex:1;justify-content:flex-end}
.nav--right{flex:1;justify-content:flex-start}
.nav__link{
  position:relative;font-family:var(--f-cond);font-weight:500;font-size:.86rem;
  letter-spacing:.13em;text-transform:uppercase;padding:.45rem 0;white-space:nowrap;
  display:inline-flex;align-items:center;gap:.25rem;transition:color .25s;
}
.nav__link::after{
  content:"";position:absolute;left:0;bottom:0;height:2px;width:100%;
  background:var(--brick);transform:scaleX(0);transform-origin:left;
  transition:transform .35s var(--ease);
}
.nav__link:hover{color:var(--brick)}
.nav__link:hover::after,.nav__link.is-active::after{transform:scaleX(1)}
.caret{width:16px;height:16px;fill:currentColor;transition:transform .3s var(--ease)}
.nav__drop{position:relative}
.nav__drop:hover .caret{transform:rotate(180deg)}
.nav__menu{
  position:absolute;top:calc(100% + .8rem);left:-1rem;min-width:230px;
  background:var(--parch);border:1px solid rgba(125,31,31,.25);border-radius:6px;
  box-shadow:var(--shadow);padding:.5rem;
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .28s var(--ease),transform .28s var(--ease),visibility .28s;
}
.nav__drop:hover .nav__menu,.nav__drop:focus-within .nav__menu,
.nav__drop.is-open .nav__menu{opacity:1;visibility:visible;transform:none}
.nav__drop.is-open .caret{transform:rotate(180deg)}
.nav__menu a{
  display:block;padding:.55rem .8rem;font-family:var(--f-cond);font-size:.84rem;
  letter-spacing:.07em;text-transform:uppercase;border-radius:4px;
  transition:background .22s,color .22s,padding-left .22s;
}
.nav__menu a:hover{background:var(--brick);color:var(--cream);padding-left:1.15rem}

/* ---- brand sign ---- */
/* The logo artwork already carries its own frame, plate and tagline, so it
   gets no extra border here -- only sizing, a drop shadow and the hover lift. */
.brand{flex:none;margin-block:-20px;position:relative;z-index:2}
.brand picture{display:block}
.brand__logo{
  display:block;width:clamp(178px,20vw,290px);height:auto;
  filter:drop-shadow(0 14px 24px rgba(43,26,18,.45));
  transition:width .35s var(--ease),transform .45s var(--ease),filter .45s var(--ease);
}
.brand:hover .brand__logo{
  transform:translateY(-4px) rotate(-.6deg);
  filter:drop-shadow(0 22px 32px rgba(43,26,18,.6));
}

/* Scrolled state. The topbar is gone by now, so the sign can no longer overhang
   upward without the viewport edge slicing its top border off -- pin it to the
   top of the bar and let the whole overhang fall below instead.
   The bar gets a fixed height rather than a min-height so the sign simply
   overflows it; with a min-height the bar would balloon to follow the logo
   while its width transition is still in flight. */
.header.is-stuck .header__inner{min-height:0;height:64px}
.header.is-stuck .brand{margin:0;align-self:flex-start}
.header.is-stuck .brand__logo{width:176px}

/* ---- burger ---- */
.burger{display:none;width:44px;height:38px;flex-direction:column;justify-content:center;gap:6px}
.burger span{display:block;height:3px;border-radius:3px;background:var(--brick);transition:transform .35s var(--ease),opacity .25s}
.burger.is-open span:nth-child(1){transform:translateY(9px) rotate(45deg)}
.burger.is-open span:nth-child(2){opacity:0}
.burger.is-open span:nth-child(3){transform:translateY(-9px) rotate(-45deg)}

/* Header ke theek neeche se neeche ki taraf khulta hai. `--drawer-top`
   main.js har baar khulte waqt likhta hai (header ki asli bottom position),
   kyunki mobile par topbar chhupa hota hai aur scroll par header sikud jata
   hai -- koi ek fixed number sahi nahi baithta. */
.drawer{
  position:fixed;
  left:0;
  right:0;
  top:var(--drawer-top,4.6rem);
  z-index:45;
  background:var(--parch);
  padding:1.1rem 1.5rem 1.6rem;
  display:flex;
  flex-direction:column;
  gap:.25rem;
  /* Apne hi top edge se neeche ki taraf khulta hai.
     translateY se hatana pada: drawer ka top header ke neeche (~171px) hota
     hai, to apni height jitna upar jaane par bhi uska neeche ka hissa viewport
     me reh jata tha aur topbar ke upar parchment ki patti dikhti thi.
     clip se wo hissa banta hi nahi -- upar kuch paint nahi hota. */
  clip-path:inset(0 0 100% 0);
  transform:translateY(-10px);
  transition:clip-path .45s var(--ease),transform .45s var(--ease);
  box-shadow:var(--shadow);
  max-height:calc(100vh - var(--drawer-top,4.6rem));
  overflow:auto;
}
.drawer.is-open{clip-path:inset(0);transform:none}
.drawer a{
  font-family:var(--f-cond);text-transform:uppercase;letter-spacing:.12em;
  padding:.85rem .25rem;border-bottom:1px solid rgba(125,31,31,.15);
}
/* `.drawer a` is one class + one element, so it out-ranks `.btn` and was
   flattening the Order Now button's side padding to .25rem -- the label then
   wrapped onto two lines. Restate the button's own padding here. */
.drawer .btn{margin-top:1.25rem;align-self:flex-start;border-bottom:0;padding:.9rem 1.7rem}

/* ================================================================ BUTTONS = */
.btn{
  --bg:var(--brick);--fg:var(--cream);
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  gap:.5rem;padding:.9rem 1.7rem;overflow:hidden;isolation:isolate;
  font-family:var(--f-cond);font-weight:600;font-size:.85rem;letter-spacing:.14em;
  text-transform:uppercase;background:var(--bg);color:var(--fg);
  border:2px solid var(--bg);border-radius:3px;cursor:pointer;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),color .3s,border-color .3s;
}
.btn::before{
  content:"";position:absolute;inset:0;z-index:-1;background:var(--wood);
  transform:translateY(101%);transition:transform .42s var(--ease);
}
.btn:hover{transform:translateY(-3px);box-shadow:0 14px 26px -12px rgba(43,26,18,.65)}
.btn:hover::before{transform:none}
.btn:active{transform:translateY(-1px)}
.btn--primary{--bg:var(--brick)}
.btn--order{--bg:var(--brick);box-shadow:0 6px 16px -8px rgba(125,31,31,.8)}
.btn--ghost{--bg:transparent;--fg:var(--wood);border-color:var(--wood)}
.btn--ghost:hover{color:var(--cream)}
.btn--outline{--bg:transparent;--fg:var(--cream);border-color:var(--gold)}
.btn--outline::before{background:var(--gold)}
.btn--outline:hover{color:var(--wood)}
.btn--gold{--bg:var(--gold-lt);--fg:var(--wood-3);border-color:var(--gold-lt)}
.btn--gold::before{background:#fff}
/* ================================================================= FOOTER = */
/* Real wood photo, no colour wash over it. The texture peaks at luminance 42,
   so cream text still clears 9.9:1 contrast without any darkening overlay.
   The solid colour behind is only a fallback while the image loads. */
.footer{
  color:#e6d6ba;
  background-color:#17100a;
  background-image:url("../img/footer-bg.png");
  background-image:image-set(url("../img/footer-bg.webp") type("image/webp"),
                             url("../img/footer-bg.png")  type("image/png"));
  /* Tiled at natural size, same as the Favorites section, so both dark bands
     read as the same piece of wood at the same grain scale. Fitting it to the
     width instead (`100% auto`) squashes the tile and repeats it ~14x, which is
     what makes tiling obvious; at 1:1 the repeat pitch is 461px and the seams
     measure smaller than the texture's own row-to-row variation. */
  background-size:auto;
  background-position:center top;
  background-repeat:repeat;
}
.footer__grid{
  /* Last track is the widest of the five: the "Live Local" artwork is the one
     picture in the footer and carries the sign-off, so it gets room to be read
     rather than being squeezed to the leftovers. */
  display:grid;grid-template-columns:1.35fr .95fr 1.15fr .75fr 1.8fr;gap:2rem;
  padding:3.2rem 0 2.6rem;align-items:start;
}
.footer__brand picture{display:block}
.footer__logo{
  display:block;width:min(215px,100%);height:auto;
  filter:drop-shadow(0 10px 18px rgba(0,0,0,.5));
}
.footer__brand p{font-size:.88rem;color:#c9b596;margin-top:1.1rem;max-width:20rem}
.footer__col h5{
  font-family:var(--f-cond);font-weight:600;font-size:.82rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--gold-lt);margin-bottom:1rem;
}
.footer__col a{
  display:block;font-size:.88rem;color:#c9b596;padding:.28rem 0;
  transition:color .25s,transform .3s var(--ease);
}
.footer__col a:hover{color:var(--gold-lt);transform:translateX(6px)}
.footer__social{display:flex;gap:.7rem}
.footer__social a{
  width:36px;height:36px;display:grid;place-items:center;border-radius:50%;
  border:1px solid rgba(211,164,92,.5);color:var(--gold-lt);
  transition:background .3s,color .3s,transform .35s var(--ease);
}
.footer__social a:hover{background:var(--gold-lt);color:var(--wood-3);transform:translateY(-4px) rotate(-8deg)}
/* ---- floating social dock ---- */
/* Sirf mobile par (680px block dekho). Wahan top bar se hours aur icons dono
   nikal jaate hain, to yahi icons back-to-top arrow ki tarah screen ke neeche
   chipak jaate hain -- arrow daayen kone me, ye baayen. Naap aur look `.totop`
   se milata-julta hai taaki dono ek jodi lagein. */
.dock{display:none}
/* The artwork already contains the "Live Local / Eat Local" lettering, so no
   text sits alongside it -- the alt text carries that wording instead. */
.footer__mark{position:relative;text-align:center;padding-top:.25rem}
.footer__mark picture{display:block}
.footer__mark img{
  width:min(320px,100%);height:auto;margin:0 auto;
  animation:rollIn 1s var(--ease) both;
}
@keyframes rollIn{from{opacity:0;transform:translateX(-40px)}to{opacity:1;transform:none}}
.footer__bar{
  border-top:1px solid rgba(211,164,92,.22);padding:1.1rem 0;
  font-size:.8rem;color:#b19c7e;text-align:center;
}

/* ---- contact column ---- */
/* Used by every page that puts the address, phone and hours in the footer
   instead of the social links. Shared, not page-specific: it lived in
   about.css and the icons blew up to their natural size everywhere else. */
/* Same footer as the home page, but the socials column is replaced by the
   contact block from the mock-up, which needs more room. */
.footer--about .footer__grid{grid-template-columns:1.3fr .85fr 1.1fr 1.15fr 1.7fr}
.footer__col--contact p{
  display:flex;gap:.6rem;font-size:.88rem;color:#c9b596;padding:.3rem 0;
  align-items:flex-start;
}
.footer__col--contact a{display:inline;padding:0}
.footer__col--contact a:hover{transform:none;color:var(--gold-lt)}
.fic{flex:none;width:1.05em;height:1.05em;margin-top:.28em;color:var(--brick-lt)}
.fic svg{width:100%;height:100%;fill:currentColor}

/* ================================================================= TO TOP = */
.totop{
  position:fixed;right:1.2rem;bottom:1.2rem;z-index:40;
  width:46px;height:46px;border-radius:50%;
  background:var(--brick);color:var(--cream);display:grid;place-items:center;
  box-shadow:0 12px 26px -10px rgba(0,0,0,.7);
  opacity:0;visibility:hidden;transform:translateY(14px) scale(.85);
  transition:opacity .35s,transform .35s var(--ease),visibility .35s,background .3s;
}
.totop svg{width:22px;height:22px;fill:currentColor}
.totop.is-on{opacity:1;visibility:visible;transform:none}
.totop:hover{background:var(--wood);transform:translateY(-4px)}

/* ============================================================ REVEAL BASE = */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .8s var(--ease),transform .8s var(--ease);transition-delay:var(--d,0s)}
.reveal.is-in{opacity:1;transform:none}

/* ============================================================ RESPONSIVE == */
@media (max-width:1080px){

  .footer__grid,.footer--about .footer__grid{grid-template-columns:1.4fr 1fr 1fr;row-gap:2.4rem}
  .footer__mark{grid-column:span 3}
  .footer__mark img{width:min(380px,100%)}
}

@media (max-width:960px){

  .nav{display:none}
  .burger{display:flex}
  .topbar{
    padding:1rem 0;
  }
  .header{
    padding:1rem 0;
  }
  .header__inner{justify-content:space-between}

  /* Yahan se aage poora header nahi, burger dikhta hai -- isliye chrome ka
     mobile roop yahin se shuru hota hai, 680px se nahi. Drawer ka Order Now
     hat jata hai aur uski jagah neeche wala fixed dock le leta hai; ek hi
     Order Now rehta hai, do nahi. */
  .drawer .btn{display:none}
  /* Is width par top bar me sirf pata aur phone bachte hain. Hours aur social
     icons dono `.topbar__social` me hain, aur wo poora block yahan off ho jata
     hai -- icons ki jagah neeche wala dock le leta hai. */
  .topbar__social{display:none}
  /* Footer wali "Follow Us" column bhi hat jati hai, warna icons do jagah
     dikhte -- ek dock me, ek footer me. */
  .footer__col--social{display:none}
  /* Ek hi patti: socials, phir Order Now. Daayin taraf back-to-top arrow ke
     liye jagah chhod di gayi hai, isliye 320px par bhi kuch overlap nahi
     karta -- pehle button viewport ke centre par tha aur icons se chipak
     jata tha. */
  .dock{
    position:fixed;left:1.2rem;right:calc(1.2rem + 46px + .8rem);bottom:1.2rem;
    z-index:40;display:flex;align-items:center;gap:.6rem;
    /* Container sirf clicks band karta hai -- dikhna-chhupna uske andar wale
       items khud karte hain. `visibility` transition step hoti hai, isliye
       chhupte waqt wo motion ke baad hi lagti hai. */
    visibility:hidden;
    transition:visibility .6s;
  }
  .dock.is-on{visibility:visible}

  /* Neeche se upar uthte hain, ek ke baad ek. Pehle poora dock ek saath 14px
     khiskta tha -- itni chhoti harkat dikhti hi nahi thi, bas "aa gaya" lagta
     tha. Ab har item apni poori unchai se aata hai, thode-thode antar par. */
  .social-dock a,.dock-order,.totop{
    opacity:0;transform:translateY(180%);
  }
  .dock.is-on .social-dock a,
  .dock.is-on .dock-order,
  .totop.is-on{
    opacity:1;transform:none;
  }
  /* Baayein se daayein: do icons, phir button, phir arrow. */
  .dock.is-on .social-dock a:nth-child(1){transition-delay:0s}
  .dock.is-on .social-dock a:nth-child(2){transition-delay:.07s}
  .dock.is-on .dock-order{transition-delay:.14s}
  .totop{transition:background .3s,opacity .45s,transform .55s var(--ease),visibility .6s}
  .totop.is-on{transition-delay:.21s}
  .totop.is-on:hover{transform:translateY(-4px)}
  .social-dock{display:flex;gap:.6rem;flex:none}
  .social-dock a{
    width:46px;height:46px;display:grid;place-items:center;border-radius:50%;
    background:var(--brick);color:var(--cream);
    box-shadow:0 12px 26px -10px rgba(0,0,0,.7);
    transition:background .3s,opacity .45s,transform .55s var(--ease);
  }
  /* Reveal rule (.dock.is-on ...) 3 class ka hai, isliye hover ko bhi utna
     hi specific likhna pada -- warna `transform:none` hover ko dabaa deta. */
  .dock.is-on .social-dock a:hover{background:var(--wood);transform:translateY(-4px)}
  .social-dock .ic{width:22px;height:22px}
  /* Icons ke baad, arrow ke pehle -- teeno ek hi unchai par. */
  .dock-order{
    /* Bachi hui poori jagah le leta hai -- socials ke baad se arrow ke
       liye chhodi gayi jagah tak. */
    display:grid;place-items:center;flex:1 1 auto;min-width:0;
    height:46px;padding:0 clamp(.7rem,3.5vw,1.35rem);border-radius:999px;
    background:var(--brick);color:var(--cream);
    font-family:var(--f-cond);font-weight:600;font-size:clamp(.68rem,3vw,.78rem);
    letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;
    box-shadow:0 12px 26px -10px rgba(0,0,0,.7);
    transition:background .3s,opacity .45s,transform .55s var(--ease);
  }
  .dock.is-on .dock-order:hover{background:var(--wood);transform:translateY(-4px)}
}

@media (max-width:680px){
  .topbar__inner{justify-content:center;font-size:.74rem}
  .topbar__list{gap:1rem}
  .footer__grid,.footer--about .footer__grid{grid-template-columns:1fr;text-align:center}
  .footer__col--contact p{justify-content:center}
  .footer__brand p{margin-inline:auto}
  .footer__mark{grid-column:auto}
  .footer__social{justify-content:center}
  .brand__logo{width:clamp(150px,44vw,210px)}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important;
  }
  .reveal{opacity:1;transform:none}
}