/* =====================================================================
   SydCafe — public stylesheet
   Palette:  espresso #241612 · roast #3B241B · crema #E7D3B3
             cherry #C23A2B · milk #FFFDF9 · ink #1B1310
   Type:     Bricolage Grotesque (display) · Inter (body/UI)
   Mobile-first; desktop enhancements via min-width queries.
   ===================================================================== */

:root{
  --espresso:#241612;
  --roast:#3b241b;
  --roast-2:#4d2f22;
  --crema:#e7d3b3;
  --crema-dim:#cdb692;
  --cherry:#c23a2b;
  --cherry-bright:#e0533f;
  --milk:#fffdf9;
  --paper:#f6efe6;
  --ink:#1b1310;
  --ink-soft:#5a4a40;
  --line:#e3d6c6;

  --shadow-sm:0 1px 3px rgba(36,22,18,.10);
  --shadow-md:0 8px 28px rgba(36,22,18,.16);
  --radius:14px;
  --radius-sm:9px;
  --wrap:1120px;

  --font-display:"Bricolage Grotesque",system-ui,sans-serif;
  --font-body:"Inter",system-ui,-apple-system,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--paper);
  line-height:1.55;
  font-size:16px;
}
img{max-width:100%;display:block}
a{color:var(--cherry);text-decoration:none}
a:hover{text-decoration:underline}

h1,h2,h3,h4{font-family:var(--font-display);line-height:1.08;margin:0 0 .4em;font-weight:800;letter-spacing:-.01em}
h1{font-size:clamp(2rem,7vw,3.4rem)}
h2{font-size:clamp(1.5rem,4vw,2.2rem)}
h3{font-size:1.25rem}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:18px}
.site-main{display:block;min-height:50vh}

/* ---------- Header / nav ---------- */
.site-header{
  position:sticky;top:0;z-index:1000;
  background:var(--espresso);
  color:var(--milk);
  border-bottom:3px solid var(--cherry);
}
.site-header__inner{position:relative;display:flex;align-items:center;justify-content:space-between;min-height:60px;gap:14px}
.brand{display:inline-flex;align-items:center;gap:9px;color:var(--milk);font-family:var(--font-display);font-weight:800;font-size:1.35rem;letter-spacing:-.02em}
.brand:hover{text-decoration:none}
.brand__mark{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--cherry);color:var(--milk)}
.brand__accent{color:var(--crema)}
.brand--footer .brand__name{color:var(--milk);font-size:1.5rem;font-family:var(--font-display);font-weight:800}

.mainnav{display:flex;gap:4px}
.mainnav__link{
  color:var(--crema);font-weight:600;font-size:.98rem;
  padding:8px 12px;border-radius:999px;letter-spacing:.01em;
}
.mainnav__link:hover{color:var(--milk);background:rgba(255,255,255,.07);text-decoration:none}
.mainnav__link.is-active{color:var(--espresso);background:var(--crema)}

/* Mobile nav toggle (hamburger) */
.navtoggle{
  display:none;align-items:center;justify-content:center;
  width:42px;height:42px;padding:0;border:0;border-radius:10px;
  background:transparent;color:var(--milk);cursor:pointer;
}
.navtoggle:hover{background:rgba(255,255,255,.08)}
.navtoggle svg{display:block}

@media (max-width:679.98px){
  .navtoggle{display:inline-flex}
  .mainnav{
    position:absolute;left:0;right:0;top:100%;
    display:none;flex-direction:column;gap:2px;
    background:var(--espresso);
    border-bottom:3px solid var(--cherry);
    padding:8px 18px 14px;
    box-shadow:var(--shadow-md);
  }
  .mainnav.is-open{display:flex}
  .mainnav__link{width:100%;border-radius:10px;padding:11px 14px}
}

/* ---------- Buttons / pills ---------- */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-body);font-weight:600;font-size:.95rem;
  padding:11px 18px;border-radius:999px;border:1.5px solid transparent;cursor:pointer;
  transition:transform .08s ease, background .15s ease;
}
.btn:hover{text-decoration:none}
.btn:active{transform:translateY(1px)}
.btn--primary{background:var(--cherry);color:var(--milk)}
.btn--primary:hover{background:var(--cherry-bright)}
.btn--ghost{background:transparent;color:var(--espresso);border-color:var(--crema-dim)}
.btn--ghost:hover{background:var(--milk)}
.btn--light{background:var(--milk);color:var(--espresso)}

.pill{display:inline-block;font-size:.74rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  padding:4px 10px;border-radius:999px;background:var(--crema);color:var(--roast)}
.pill--cherry{background:var(--cherry);color:var(--milk)}
.pill--cat{background:transparent;color:var(--cherry);border:1px solid var(--line);margin-left:6px}

.eyebrow{font-size:.8rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--cherry)}

/* ---------- Stars ---------- */
.stars{display:inline-flex;gap:1px;color:var(--crema-dim);line-height:1;white-space:nowrap}
.stars--sm{font-size:.95rem}
.stars--md{font-size:1.15rem}
.stars--lg{font-size:1.7rem}
.star--full{color:var(--cherry)}
.star--empty{color:rgba(0,0,0,.16)}
.theme-public .site-header .star--empty,.scorecard .star--empty{color:rgba(255,255,255,.22)}
.star--half{position:relative;color:rgba(0,0,0,.16)}
.star--half .star__fill{position:absolute;left:0;top:0;width:50%;overflow:hidden;color:var(--cherry)}

/* ---------- Hero ---------- */
.hero{background:var(--espresso);color:var(--milk);position:relative;overflow:hidden}
.hero::after{content:"";position:absolute;inset:0;
  background:radial-gradient(60% 120% at 85% -10%, rgba(194,58,43,.35), transparent 60%);pointer-events:none}
.hero__inner{position:relative;z-index:1;padding-block:46px 40px;max-width:760px}
.hero h1{color:var(--milk)}
.hero h1 em{font-style:normal;color:var(--cherry-bright)}
.hero__tag{color:var(--crema);font-size:1.08rem;margin:.4em 0 1.4em;max-width:48ch}
.hero__cta{display:flex;gap:10px;flex-wrap:wrap}

/* Hero with a photo on the right */
.hero__text{position:relative;z-index:1}
.hero__media{margin:0;position:relative;z-index:1}
.hero__media img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;
  border-radius:var(--radius);box-shadow:var(--shadow-md)}
.hero__caption{margin-top:10px;color:var(--crema-dim);font-size:.85rem;line-height:1.45}
@media(max-width:859.98px){
  .hero--media .hero__media{margin-top:28px;max-width:80%}
}
@media(min-width:860px){
  .hero--media .hero__inner{max-width:none;display:flex;justify-content:center;
    align-items:center;gap:40px}
  .hero--media .hero__text{max-width:600px}
  .hero--media .hero__media{flex:0 0 20%;max-width:220px}
}

/* ---------- Section scaffolding ---------- */
.section{padding:38px 0}
.section--tight{padding:26px 0}
.section__head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:18px;flex-wrap:wrap}
.section__head h2{margin:0}
.section__link{font-weight:600;white-space:nowrap}

/* ---------- Review cards ---------- */
.card-grid{display:grid;gap:16px;grid-template-columns:1fr}
.review-card{
  background:var(--milk);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;
  transition:transform .12s ease, box-shadow .12s ease;
}
.review-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);text-decoration:none}
.review-card__media{aspect-ratio:16/10;background:var(--roast);position:relative;overflow:hidden}
.review-card__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.review-card__placeholder{position:absolute;inset:0;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--roast),var(--espresso));color:var(--crema-dim)}
.review-card__score{position:absolute;top:10px;right:10px;
  background:var(--espresso);color:var(--milk);font-family:var(--font-display);font-weight:800;
  font-size:1.05rem;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;
  border:2px solid var(--cherry);box-shadow:var(--shadow-sm)}
.review-card__body{padding:15px 16px 18px;display:flex;flex-direction:column;gap:7px;flex:1}
.review-card__meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:.82rem;color:var(--ink-soft)}
.review-card__title{font-family:var(--font-display);font-weight:800;font-size:1.2rem;color:var(--ink);margin:0;line-height:1.12}
.review-card__sub{color:var(--ink-soft);font-size:.92rem;margin:0}
.review-card__foot{margin-top:auto;padding-top:6px}

/* ---------- The scorecard (signature element) ---------- */
.scorecard{
  background:var(--espresso);color:var(--milk);border-radius:var(--radius);
  padding:20px;box-shadow:var(--shadow-md);position:relative;overflow:hidden;
  border:1px solid rgba(255,255,255,.06);
}
.scorecard::before{content:"";position:absolute;left:0;top:0;bottom:0;width:6px;background:var(--cherry)}
.scorecard__top{display:flex;align-items:center;gap:18px;padding-bottom:16px;margin-bottom:14px;
  border-bottom:1px dashed rgba(231,211,179,.35)}
.scorecard__big{font-family:var(--font-display);font-weight:800;font-size:3.2rem;line-height:.9;color:var(--milk)}
.scorecard__big small{display:block;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--crema-dim);font-weight:600;font-family:var(--font-body);margin-top:6px}
.scorecard__topright{display:flex;flex-direction:column;gap:6px}
.scorecard__verdict{color:var(--crema);font-size:.95rem}
.scorecard__rows{display:grid;gap:11px}
.scorecard__row{display:grid;grid-template-columns:1fr auto;align-items:center;gap:10px}
.scorecard__label{font-size:.95rem;color:var(--crema)}

/* ---------- Review detail page ---------- */
.review-hero{background:var(--espresso);color:var(--milk)}
.review-hero__inner{padding-block:34px 28px;max-width:780px}
.review-hero__meta{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:12px;color:var(--crema);font-size:.9rem}
.review-hero h1{color:var(--milk);margin-bottom:.15em}
.review-hero__sub{color:var(--crema);font-size:1.15rem;font-family:var(--font-display);font-weight:600}

.review-layout{display:grid;gap:26px;grid-template-columns:1fr;padding:30px 0 50px}
.prose{font-size:1.05rem;color:var(--ink)}
.prose p{margin:0 0 1em}
.prose h2,.prose h3{margin-top:1.2em}
.prose img{border-radius:var(--radius-sm);margin:1em 0}

.review-cover{margin:0 0 22px;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);
  background:var(--roast);aspect-ratio:16/9}
.review-cover img{display:block;width:100%;height:100%;object-fit:cover}
.gallery-heading{font-family:var(--font-display);font-weight:800;font-size:1.2rem;margin:26px 0 2px}

.gallery{display:grid;gap:10px;grid-template-columns:repeat(2,1fr);margin:18px 0}
.gallery img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius-sm);cursor:zoom-in}
.gallery--single{grid-template-columns:1fr}

.addressbar{display:flex;gap:10px;align-items:flex-start;background:var(--milk);border:1px solid var(--line);
  border-radius:var(--radius-sm);padding:13px 15px;margin:6px 0 14px;color:var(--ink)}
.addressbar svg{flex:0 0 auto;color:var(--cherry);margin-top:2px}

/* ---------- Maps ---------- */
.map{width:100%;height:320px;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);z-index:0}
.map--tall{height:440px}
.leaflet-container{font-family:var(--font-body)}
.map-popup__title{font-family:var(--font-display);font-weight:800;font-size:1rem;margin:0 0 2px}
.map-popup__score{color:var(--cherry);font-weight:700}
.map-popup a{font-weight:600}

/* ---------- Filters ---------- */
.toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:20px}
.toolbar__right{margin-left:auto}
.field-inline{display:flex;align-items:center;gap:7px}
.select,.input{
  font-family:var(--font-body);font-size:.95rem;padding:9px 12px;border:1.5px solid var(--line);
  border-radius:10px;background:var(--milk);color:var(--ink)
}
.select:focus,.input:focus{outline:2px solid var(--cherry);outline-offset:1px;border-color:var(--cherry)}

/* ---------- Articles ---------- */
.article-card{background:var(--milk);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  box-shadow:var(--shadow-sm);transition:transform .12s ease,box-shadow .12s ease}
.article-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);text-decoration:none}
.article-card__media{aspect-ratio:16/9;background:linear-gradient(135deg,var(--roast),var(--espresso))}
.article-card__media img{width:100%;height:100%;object-fit:cover}
.article-card__body{padding:16px 18px 20px}
.article-card__title{font-family:var(--font-display);font-weight:800;font-size:1.25rem;color:var(--ink);margin:.1em 0 .3em}
.article-card__sub{color:var(--ink-soft)}

.article-page{max-width:740px;margin-inline:auto;padding:30px 0 50px}
.article-page__cover{border-radius:var(--radius);overflow:hidden;margin:18px 0 24px}

/* ---------- About tile (home foot) ---------- */
.about-tile{background:var(--roast);color:var(--milk);border-radius:var(--radius);
  padding:30px;display:grid;gap:22px;position:relative;overflow:hidden}
.about-tile::after{content:"";position:absolute;right:-40px;bottom:-40px;width:180px;height:180px;border-radius:50%;
  background:radial-gradient(circle,rgba(194,58,43,.4),transparent 70%)}
.about-tile__text{display:grid;gap:14px;position:relative;z-index:1;align-content:start}
.about-tile h2{color:var(--milk);position:relative;z-index:1}
.about-tile p{color:var(--crema);max-width:60ch;position:relative;z-index:1;margin:0}
.about-tile .btn{position:relative;z-index:1;justify-self:start}
.about-tile__media{position:relative;z-index:1}
.about-tile__media img{display:block;width:100%;height:100%;object-fit:cover;
  border-radius:var(--radius-sm);aspect-ratio:16/10;box-shadow:var(--shadow-md)}
@media(min-width:760px){
  .about-tile--media{grid-template-columns:1.5fr 1fr;align-items:stretch;gap:30px}
  .about-tile--media .about-tile__media img{aspect-ratio:auto;min-height:240px}
}

/* ---------- Footer ---------- */
.site-footer{background:var(--espresso);color:var(--crema);margin-top:40px;border-top:3px solid var(--cherry)}
.site-footer__inner{padding-block:30px;display:grid;gap:16px}
.site-footer__tag{color:var(--crema-dim);max-width:42ch;margin:.4em 0 0}
.site-footer__nav{display:flex;gap:16px;flex-wrap:wrap}
.site-footer__nav a{color:var(--crema)}
.site-footer__nav a:hover{color:var(--milk)}
.site-footer__copy{color:var(--crema-dim);font-size:.82rem;margin:0}

/* ---------- Empty state ---------- */
.empty{text-align:center;padding:50px 20px;color:var(--ink-soft)}
.empty h3{color:var(--ink)}

/* ---------- Lightbox ---------- */
.lightbox{position:fixed;inset:0;background:rgba(20,12,9,.92);display:none;align-items:center;justify-content:center;z-index:2000;padding:20px}
.lightbox.is-open{display:flex}
.lightbox img{max-width:100%;max-height:90vh;border-radius:8px}
.lightbox__close{position:absolute;top:16px;right:20px;color:var(--milk);font-size:2rem;background:none;border:0;cursor:pointer}

/* =====================================================================
   Desktop enhancements
   ===================================================================== */
@media (min-width:680px){
  .card-grid{grid-template-columns:repeat(2,1fr)}
  .gallery{grid-template-columns:repeat(3,1fr)}
  .site-footer__inner{grid-template-columns:1fr auto;align-items:center}
  .site-footer__copy{grid-column:1/-1}
}
@media (min-width:920px){
  .card-grid{grid-template-columns:repeat(3,1fr)}
  .hero__inner{padding-block:62px 56px}
  .review-layout{grid-template-columns:1.5fr 1fr;align-items:start}
  .review-layout__aside{position:sticky;top:84px}
  .scorecard__big{font-size:3.6rem}
}

/* ---------- Accessibility ---------- */
:focus-visible{outline:2px solid var(--cherry);outline-offset:2px}
@media (prefers-reduced-motion:reduce){
  *{transition:none !important;animation:none !important}
}