/* Food World visual pass (2026-10-19). Presentation only: no copy, link, query-param or hook changes.
   Palette per ADR 0006: deep green #0F433C / cream #FBF6EC / terracotta #C1683A (text tone #97512D).
   Scope:  .wwv-fhub  = the /foods hub.   .wwv-dish2 = dish detail, only while config('foods.detail_redesign') is on.
   Plain CSS on purpose (no Tailwind rebuild; the asset build is single-owner). Rollback = git revert. */

/* ---------- /foods hub ---------- */

/* Hero: deep green panel, cream type, white search bar */
.wwv-fhub .wwv-fhero{background:#0F433C;border-radius:24px;padding:clamp(28px,5vw,64px) clamp(20px,5vw,64px);position:relative;overflow:hidden}
.wwv-fhub .wwv-fhero::after{content:"";position:absolute;inset:auto -80px -120px auto;width:380px;height:380px;border-radius:50%;background:radial-gradient(closest-side,rgba(244,217,160,.22),rgba(244,217,160,0));pointer-events:none}
.wwv-fhub .wwv-fhero h1{color:#FBF6EC;font-size:clamp(38px,5.2vw,68px)}
.wwv-fhub .wwv-fhero p{color:rgba(251,246,236,.84);margin-top:16px;font-size:clamp(16px,1.7vw,20px)}
.wwv-fhub .wwv-fhero form{margin-top:24px;max-width:46rem;position:relative;z-index:1}
.wwv-fhub .wwv-fhero input[type=text]{border-color:transparent;box-shadow:0 1px 0 rgba(0,0,0,.08)}
.wwv-fhub .wwv-fhero select{border-color:transparent}
.wwv-fhub .wwv-fhero button[type=submit]{background:#C1683A;color:#fff}
.wwv-fhub .wwv-fhero button[type=submit]:hover{background:#A9582F}

/* Section headings: smaller, tighter, Booking-like rhythm */
.wwv-fhub section>h2,.wwv-fhub section>div>h2{font-size:clamp(24px,2.6vw,32px)!important;line-height:1.15!important}
.wwv-fhub section.wwv-fsec{padding-top:clamp(28px,4vw,44px)!important}

/* Category tiles: white cards, one scroll strip on phones */
.wwv-fhub .wwv-fcats{gap:10px!important}
.wwv-fhub .wwv-fcat{min-height:88px!important;border-radius:14px!important;background:#fff!important;border:1px solid #E4DDCB;padding:12px 10px!important;transition:border-color .15s,box-shadow .15s,transform .15s}
.wwv-fhub .wwv-fcat:hover{border-color:#C1683A;box-shadow:0 6px 18px -10px rgba(22,33,29,.35);transform:translateY(-1px)}
.wwv-fhub .wwv-fcat[aria-current=page]{background:#0F433C!important;border-color:#0F433C}
.wwv-fhub .wwv-fcat .text-2xl{font-size:22px;margin-bottom:6px!important}
@media (max-width:639.98px){
  .wwv-fhub .wwv-fcats{display:flex!important;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:20px;margin-inline:-20px;padding:2px 20px 8px;scrollbar-width:none}
  .wwv-fhub .wwv-fcats::-webkit-scrollbar{display:none}
  .wwv-fhub .wwv-fcat{flex:0 0 112px;scroll-snap-align:start}
}

/* Country pills: white chips */
.wwv-fhub #foods-country-list a{background:#fff!important;border:1px solid #E4DDCB}
.wwv-fhub #foods-country-list a:hover{border-color:#C1683A}
.wwv-fhub #foods-country-list a[aria-current=page]{background:#0F433C!important;border-color:#0F433C}

/* Dish cards */
.wwv-fhub [data-food-grid]>.grid{gap:16px!important}
:is(.wwv-fhub,.wwv-dish2) .f2-card{border-radius:14px!important;border-color:#E4DDCB;background:#fff;transition:box-shadow .2s,transform .2s,border-color .2s;height:100%}
:is(.wwv-fhub,.wwv-dish2) .f2-card:hover{box-shadow:0 14px 28px -16px rgba(22,33,29,.45)!important;transform:translateY(-2px);border-color:#d6cdb4}
:is(.wwv-fhub,.wwv-dish2) .f2-card>div:first-child{aspect-ratio:3/2!important;background:linear-gradient(135deg,#F4EBD6,#E7E2D2)!important}
:is(.wwv-fhub,.wwv-dish2) .f2-card>div:first-child img{transition:transform .45s ease}
:is(.wwv-fhub,.wwv-dish2) .f2-card:hover>div:first-child img{transform:scale(1.045)}
:is(.wwv-fhub,.wwv-dish2) .f2-card>div:first-child::after{content:"";position:absolute;inset:auto 0 0 0;height:38%;background:linear-gradient(to top,rgba(15,67,60,.28),rgba(15,67,60,0));pointer-events:none}
:is(.wwv-fhub,.wwv-dish2) .f2-card>div:first-child>span svg{width:44px;height:44px}
:is(.wwv-fhub,.wwv-dish2) .f2-card>div:last-child{padding:12px 14px 14px!important}
:is(.wwv-fhub,.wwv-dish2) .f2-card h3{font-size:17px!important;line-height:1.25!important;margin-bottom:4px!important}
:is(.wwv-fhub,.wwv-dish2) .f2-card p{font-size:13px!important;line-height:1.4!important}
:is(.wwv-fhub,.wwv-dish2) .f2-card>div:last-child>div:last-child{border-top:1px solid #EFEAE0;padding-top:8px;margin-top:8px}
@media (max-width:639.98px){
  /* phones: compact horizontal card, thumbnail left */
  .wwv-fhub [data-food-grid]>.grid{gap:10px!important}
  .wwv-fhub .f2-card{display:flex;align-items:stretch;min-height:112px}
  .wwv-fhub .f2-card>div:first-child{flex:0 0 118px;aspect-ratio:auto!important}
  .wwv-fhub .f2-card>div:last-child{flex:1;min-width:0;padding:10px 12px!important}
  .wwv-fhub .f2-card h3{font-size:16px!important}
  .wwv-fhub .f2-card p{-webkit-line-clamp:2}
}

/* Pagination + opt-in strip */
.wwv-fhub [data-show-all-optin]{background:#fff!important;border:1px solid #E4DDCB}

/* ---------- dish detail (flagged: config/foods_design.php) ---------- */

/* Hero becomes a deep-green card; photo keeps its slot and gains a soft shadow */
.wwv-dish2 .wwv-d2-hero{background:#0F433C;border-radius:28px;padding:clamp(20px,4vw,48px);margin-top:12px;gap:28px}
@media (min-width:1024px){.wwv-dish2 .wwv-d2-hero{column-gap:56px;align-items:center}}
.wwv-dish2 .wwv-d2-hero h1{color:#FBF6EC}
.wwv-dish2 .wwv-d2-hero>div:last-child p,.wwv-dish2 .wwv-d2-hero>div:last-child .text-brand-nav-muted{color:rgba(251,246,236,.82)!important}
.wwv-dish2 .wwv-d2-hero>div:last-child .text-brand-terracotta,.wwv-dish2 .wwv-d2-hero>div:last-child .text-brand-terracotta a,.wwv-dish2 .wwv-d2-hero a.text-brand-green{color:#F4D9A0!important}
.wwv-dish2 .wwv-d2-hero>div:last-child .border-t{border-color:rgba(251,246,236,.18)!important}
.wwv-dish2 .wwv-d2-hero>div:last-child .text-brand-ink,.wwv-dish2 .wwv-d2-hero>div:last-child strong,.wwv-dish2 .wwv-d2-hero>div:last-child .font-medium{color:#FBF6EC!important}
.wwv-dish2 .wwv-d2-hero>div:last-child .read-aloud-widget,.wwv-dish2 .wwv-d2-hero>div:last-child .read-aloud-widget *{color:#16211D!important;opacity:1}
.wwv-dish2 .wwv-d2-hero>div:first-child .relative{box-shadow:0 24px 48px -24px rgba(0,0,0,.55)}
.wwv-dish2 .wwv-d2-hero>div:first-child .relative.border-dashed{background:#F4EBD6!important;border-color:rgba(22,33,29,.2)}
@media (min-width:1024px){.wwv-dish2 .wwv-d2-hero>div:first-child .relative{height:clamp(420px,42vw,560px)!important}}

/* Tighter vertical rhythm, calmer headings */
.wwv-dish2 [class*="lg:mt-28"]{margin-top:clamp(48px,6vw,72px)!important}
.wwv-dish2 h2.font-serif{font-size:clamp(24px,2.6vw,34px)!important;line-height:1.15!important;position:relative}
.wwv-dish2 h2.font-serif::before{content:"";display:block;width:36px;height:3px;border-radius:2px;background:#C1683A;margin-bottom:10px}
.wwv-dish2 aside>div,.wwv-dish2 aside>div+div{box-shadow:0 10px 24px -18px rgba(22,33,29,.4)}
.wwv-dish2 .prose{color:#3a413b}

/* Real-photo credit line + AI label (text is only rendered for these cases) */
.wwv-d2-credit{margin-top:10px;font-size:12px;line-height:1.45;color:rgba(251,246,236,.78)}
.wwv-d2-credit a{color:#F4D9A0;text-decoration:underline;text-underline-offset:2px}
.wwv-d2-credit:not(.on-green){color:#4A5049}.wwv-d2-credit:not(.on-green) a{color:#0F433C}
.wwv-ai-tag{position:absolute;left:10px;bottom:10px;z-index:2;border-radius:999px;background:rgba(22,33,29,.72);color:#fff;font-size:11px;font-weight:600;line-height:1;padding:6px 10px;letter-spacing:.01em;pointer-events:none}

/* ---------- QA contrast + pagination pass (2026-10-19) ---------- */

/* Inactive rating stars: was 2.3:1 on cream. JS toggles text-brand-cream-border (inactive) / text-brand-terracotta (active). */
main:has(#f2-scope) :is(.vote-star,.rv-star).text-brand-cream-border{color:#8A7A52}
main:has(#f2-scope) :is(.vote-star,.rv-star).text-brand-cream-border:hover{color:#C1683A}
/* 12px helper line inside the gold vote strip: was 4.21:1 */
#vote-widget .text-brand-nav-muted{color:#4A5049}
/* White text on terracotta was 3.96:1: darker fill, 5.3:1 */
.wwv-fhub .wwv-fhero button[type=submit],#food-photo-submit{background:#A9532A}
.wwv-fhub .wwv-fhero button[type=submit]:hover{background:#8F4524}

/* Pagination (Laravel tailwind view, markup untouched): green/cream palette */
.wwv-fhub nav[aria-label="Pagination Navigation"] a,
.wwv-fhub nav[aria-label="Pagination Navigation"] [aria-disabled]>span,
.wwv-fhub nav[aria-label="Pagination Navigation"] [aria-current]>span{background:#fff;border-color:#E4DDCB;color:#0F433C;font-weight:600;box-shadow:none}
.wwv-fhub nav[aria-label="Pagination Navigation"] a:hover{background:#FBF6EC;border-color:#C1683A;color:#97512D}
.wwv-fhub nav[aria-label="Pagination Navigation"] a:focus-visible{outline:2px solid #C1683A;outline-offset:2px;box-shadow:none}
.wwv-fhub nav[aria-label="Pagination Navigation"] [aria-current]>span{background:#0F433C;border-color:#0F433C;color:#FBF6EC}
.wwv-fhub nav[aria-label="Pagination Navigation"] [aria-disabled]>span{background:#FBF6EC;color:#7A6B45}
.wwv-fhub nav[aria-label="Pagination Navigation"] p{color:#4A5049}
.wwv-fhub nav[aria-label="Pagination Navigation"] .shadow-sm{box-shadow:none}
@media (max-width:639.98px){
  .wwv-fhub nav[aria-label="Pagination Navigation"] a{border-radius:999px;padding-inline:18px;min-height:44px}
}