/* =========================================================
   MRFood — Bold Flat (dark)
   Geen gradients, geen glow, strakke hoeken, flat kleur.
   Laadt ALLEEN op het klantendeel (templates/layout.twig),
   ná site.css. Admin blijft ongewijzigd.
   ========================================================= */

/* ===== Design tokens ===== */
:root{
    --bg:#161412;            /* warm bijna-zwart */
    --fg:#f4efe8;            /* gebroken wit */
    --muted:#a59a8c;
    --brand:#ff5126;         /* flat oranje-rood, smakelijk */
    --brand-600:#e23d18;     /* hover donkerder */
    --card:#201c18;
    --line:#3a332b;
    --radius:4px;            /* scherp i.p.v. rond */
    --shadow:none;

    --ink:#161210;           /* tekst op brand-vlak */
    --font-display:'Archivo', system-ui, sans-serif;
    --font-body:'DM Sans', system-ui, Segoe UI, Roboto, Arial, sans-serif;
}

/* ===== Typografie ===== */
body{
    font-family:var(--font-body);
    background:var(--bg);
    color:var(--fg);
}
h1,h2,h3{
    font-family:var(--font-display);
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:-.02em;
    line-height:.98;
    color:var(--fg);
}
h1{font-size:clamp(2.6rem, 6vw, 4.6rem)}
h2{font-size:clamp(1.8rem, 3vw, 2.4rem)}
h3{font-size:1.15rem;letter-spacing:.01em}

/* kleine eyebrow-achtige labels */
.muted{color:var(--muted)}

/* ===== Nav (solide balk, geen blur) ===== */
.nav{
    background:var(--bg);
    backdrop-filter:none;
    border-bottom:2px solid var(--fg);
}
.brand{
    font-family:var(--font-display);
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.02em;
    font-size:1.25rem;
}
.brand__em{color:var(--brand)}
.nav__links a{
    text-transform:uppercase;
    font-size:.8rem;
    font-weight:700;
    letter-spacing:.08em;
    opacity:1;
    padding:.2rem 0;
    border-bottom:2px solid transparent;
}
.nav__links a:hover,.nav__links a:focus-visible{
    border-bottom-color:var(--brand);
}
.cart-mini{
    border:2px solid var(--fg);
    border-radius:0;
    background:transparent;
    text-transform:uppercase;
    font-size:.8rem;
    font-weight:700;
    letter-spacing:.06em;
}
.cart-mini #cart-count{
    background:var(--brand);
    color:var(--ink);
    border-radius:0;
    font-weight:800;
}

/* ===== Hero (plat, groot, geen gradient-tekst) ===== */
.hero::before{
    background:none;
    border-bottom:1px solid var(--line);
}
.hero h1{
    color:var(--fg);
    -webkit-text-fill-color:currentColor;
}
.hero h1 + p,
.hero__content p{
    color:var(--muted);
    font-size:1.05rem;
    max-width:46ch;
}
.hero__image img{
    border-radius:var(--radius);
    border:1px solid var(--line);
    box-shadow:none;
}

/* ===== Buttons (flat, rechthoekig, uppercase) ===== */
.btn{
    border-radius:var(--radius);
    border:2px solid var(--fg);
    background:transparent;
    color:var(--fg);
    text-transform:uppercase;
    font-weight:700;
    letter-spacing:.05em;
    padding:.8rem 1.4rem;
    transition:background .12s ease, color .12s ease, border-color .12s ease;
}
.btn:hover,.btn:focus-visible{
    transform:none;
    background:var(--fg);
    color:var(--ink);
}
.btn--primary{
    background:var(--brand);
    border-color:var(--brand);
    color:var(--ink);
    box-shadow:none;
}
.btn--primary:hover,.btn--primary:focus-visible{
    background:var(--brand-600);
    border-color:var(--brand-600);
    color:var(--ink);
}
.btn--subtle{background:transparent;border-color:var(--line)}

.btn.add{
    background:var(--brand);
    border:2px solid var(--brand);
    color:var(--ink);
    border-radius:var(--radius);
    text-transform:uppercase;
    font-weight:800;
}
.btn.add:hover,.btn.add:focus-visible{
    background:var(--brand-600);
    border-color:var(--brand-600);
    transform:none;
}

/* ===== Cards (flat met accent-rand, geen schaduw) ===== */
.card{
    background:var(--card);
    border:1px solid var(--line);
    border-top:3px solid var(--brand);
    border-radius:0;
    box-shadow:none;
    transition:border-color .12s ease;
}
.card:hover{
    border-color:var(--line);
    border-top-color:var(--brand);
    box-shadow:none;
    transform:none;
}
.card--hours .opening-today{color:var(--brand);font-weight:700;text-transform:uppercase;letter-spacing:.04em}

/* ===== Prijzen ===== */
.price-current{color:var(--brand);font-weight:800}
.price-old{color:rgba(244,239,232,.45)}

/* ===== Forms (scherp, flat) ===== */
input,textarea,select{
    background:#1a1612;
    border:1px solid var(--line);
    border-radius:var(--radius);
    color:var(--fg);
}
input:focus-visible,textarea:focus-visible,select:focus-visible{
    border-color:var(--brand);
    box-shadow:none;
}
label{text-transform:uppercase;font-size:.78rem;letter-spacing:.06em}

/* ===== Qty controls (vierkant) ===== */
button.q{
    border-radius:var(--radius);
    border:1px solid var(--line);
    background:transparent;
}
button.q:hover,button.q:focus-visible{
    background:var(--brand);border-color:var(--brand);color:var(--ink);
    box-shadow:none;
}

/* ===== Toast ===== */
.toast{background:var(--card);border:1px solid var(--line);border-radius:var(--radius)}

/* ===== Footer ===== */
.footer{background:var(--bg);border-top:2px solid var(--fg)}
.footer__inner p{color:var(--muted)}
.footer__inner p a{color:var(--brand)}

/* ===== Mobile floating cart (vierkant, flat) ===== */
.fab-cart{
    background:var(--brand) !important;
    color:var(--ink) !important;
    border-radius:var(--radius) !important;
    box-shadow:none;
}

/* =========================================================
   Menu- / bestelpagina (menu.css) — flat & scherp
   ========================================================= */
.menu-nav__list a{border-radius:var(--radius)}
.menu-nav__list a:hover{background:var(--card)}
.menu-card{
    background-color:var(--card);
    border:1px solid var(--line);
    border-radius:0;
}
.menu-card:hover{
    border-color:var(--brand);
    background-color:var(--card);
    transform:none;
    box-shadow:none;
}
.opt-details{
    background:var(--card);
    border:1px solid var(--line);
    border-radius:var(--radius);
}
.opt-group input:checked{
    border-color:var(--brand);
    background:#2a1c14;
}
.menu-card :focus-visible,
.opt-group :focus-visible,
.menu input:focus-visible,
.menu select:focus-visible,
.menu textarea:focus-visible{
    box-shadow:none;
    outline:2px solid var(--brand);
    outline-offset:1px;
}