/* The app's home page: the delivery app's list of restaurants. Builds on shared/order.css (same font, same night palette). */
.home{max-width:1100px;margin:0 auto;padding:0 0 calc(120px + var(--safe-b))}
.hero{padding:18px 16px 4px;display:grid;gap:14px}
.hero__row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.hero h1{font-size:44px;line-height:.95;font-weight:900;font-stretch:62%;text-transform:uppercase;letter-spacing:-.005em;white-space:nowrap}
.hero__sub{margin:0;font-size:17px;line-height:1.35;color:var(--haze)}
.hero__sub b{color:var(--cream)}
.hero__facts{margin:-4px 0 0;font-size:14.5px}
.hero{grid-template-columns:minmax(0,1fr)}
/* smallest phones while closed: "Opens tonight 10 PM" goes on two lines instead of pushing the page sideways */
@media (max-width:359px){.hero h1{font-size:38px}.sign span{max-width:120px}}

/* the OPEN sign: the one glowing thing on the page */
.sign{flex:0 1 auto;min-width:0;max-width:56%;display:inline-flex;flex-direction:column;align-items:center;gap:2px;padding:6px 10px 7px;border:2px solid #40557A;border-radius:9px;color:#8FA0BF;text-transform:uppercase}
.sign b{font:900 22px/.9 var(--font);font-stretch:62%;letter-spacing:.05em}
.sign span{font:800 10.5px/1.15 var(--font);font-stretch:75%;letter-spacing:.07em;text-align:center;text-wrap:balance}
.sign.is-on{border-color:var(--sodium);color:var(--sodium);box-shadow:0 0 22px rgba(255,201,60,.28),inset 0 0 14px rgba(255,201,60,.12)}
.sign.is-on b{text-shadow:0 0 6px rgba(255,201,60,.9),0 0 20px rgba(255,201,60,.5)}
.sign.is-last{border-color:#FF9F43;color:#FF9F43;box-shadow:0 0 22px rgba(255,159,67,.28),inset 0 0 14px rgba(255,159,67,.12)}
.sign.is-last b{text-shadow:0 0 6px rgba(255,159,67,.9),0 0 20px rgba(255,159,67,.5)}
.sign.is-on.flick{animation:flick 1.1s steps(1,end) 1}
@keyframes flick{0%{opacity:.25}12%{opacity:1}18%{opacity:.35}26%{opacity:1}40%{opacity:.6}48%{opacity:1}}
@media (prefers-reduced-motion:reduce){.sign.is-last{border-color:#FF9F43;color:#FF9F43;box-shadow:0 0 22px rgba(255,159,67,.28),inset 0 0 14px rgba(255,159,67,.12)}
.sign.is-last b{text-shadow:0 0 6px rgba(255,159,67,.9),0 0 20px rgba(255,159,67,.5)}
.sign.is-on.flick{animation:none}}

/* search across every menu */
.search{position:relative;display:block}
.search svg{position:absolute;left:16px;top:50%;width:20px;height:20px;transform:translateY(-50%);color:var(--haze);pointer-events:none}
.search input{width:100%;height:54px;padding:0 16px 0 48px;border:0;border-radius:14px;background:var(--cream);color:var(--night);font:600 16.5px/1 var(--font)}
.search input::placeholder{color:#5C6A85}
.search input:focus{outline:3px solid var(--sodium);outline-offset:2px}
.results{padding:10px 16px 0}
.results__n{margin:8px 0 0;color:var(--haze);font:700 14px/1 var(--font)}
.results__none{margin:20px 0 0;color:var(--haze);font-size:16px}
.chips--suggest{margin-top:12px}
.chip--btn{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border:0;border-radius:999px;background:var(--night-3);color:var(--cream);font:600 15px/1.1 var(--font)}
.chip--btn:hover{background:var(--rule)}

/* the five restaurants in one row, right under the search */
.quick{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.quick:empty{display:none}
.qk{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0;text-decoration:none;text-align:center}
.qk img{width:100%;max-width:64px;aspect-ratio:1;height:auto;border-radius:16px;object-fit:cover;background:var(--night-2);box-shadow:0 0 0 2px var(--night),0 0 0 4px var(--shop)}
.qk__c{max-width:100%;font:700 13px/1.15 var(--font);font-stretch:84%;color:var(--cream);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qk__n{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.qk:hover img{transform:translateY(-2px)}
@media (prefers-reduced-motion:no-preference){.qk img{transition:transform .2s}}
@media (max-width:359px){.quick{gap:6px}.qk__c{font-size:11.5px}}

.hsec{padding:34px 16px 0}
.hsec{position:relative}
.hsec__t{font-size:25px;font-weight:900;font-stretch:75%;letter-spacing:0}
/* prev/next arrows for the dish rail: only on wide screens, where a mouse can't swipe */
.railnav{display:none}
@media (min-width:760px){
  .railnav{position:absolute;top:36px;right:24px;display:flex;gap:8px}
  .railnav button{width:44px;height:44px;border:0;border-radius:50%;background:var(--night-3);color:var(--cream);display:grid;place-items:center}
  .railnav button:hover:not(:disabled){background:var(--rule)}
  .railnav button:disabled{opacity:.35;cursor:default}
  .railnav svg{width:22px;height:22px}
  .railnav [data-dir="1"] svg{transform:scaleX(-1)}
}


.hfoot{margin:28px 16px 0;color:#7F8DA6;font-size:12.5px;line-height:1.5}
.hfoot p{margin:0}


@media (min-width:760px){
  .hero{padding:40px 24px 8px;grid-template-columns:minmax(0,1fr) 420px;align-items:center;column-gap:40px}
  .hero__row{grid-column:1/-1;justify-content:flex-start;gap:24px}
  .hero h1{font-size:72px}
  .sign b{font-size:30px}
  .sign span{font-size:12px}
  .quick{grid-column:1/-1;grid-template-columns:repeat(5,84px);gap:14px}
  .hsec{padding:44px 24px 0}
  .rail{margin:12px -24px 0;padding:0 24px 6px;scroll-padding-inline:24px}
  .hfoot{margin-left:24px;margin-right:24px}
  .results{padding:10px 24px 0}
}

/* home cards are links: they open the dish on its own restaurant's page */
.row--link,.feat--link{text-decoration:none;color:inherit}
.feat--link{display:block}
@media (hover:hover){.row--link:hover .row__name,.feat--link:hover .feat__name{text-decoration:underline;text-underline-offset:3px}}

/* an order already started at a restaurant: the way back to it */
.mine{padding-top:22px;display:grid;gap:8px}
.mine__row{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:52px;padding:10px 14px;border-radius:var(--r);background:var(--night-2);border-left:4px solid var(--shop);text-decoration:none}
.mine__t{font-weight:800;font-size:15.5px;line-height:1.25}
.mine__d{flex:none;color:var(--haze);font:700 14px/1.2 var(--font)}