/*
Theme Name: Bites
Theme URI: https://bites.fi/
Author: Evex Creative
Author URI: https://evexcreative.com/
Description: Bites Burgers Kallio. Yksisivuinen teema: musta pohja, punainen korostus, tiivistetty otsikkofontti.
Version: 1.0
Requires at least: 6.0
Tested up to: 7.0
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: bites
*/

:root{
  --bg:#000; --fg:#fff; --red:#ff3737; --muted:#a8a8a8; --line:#222;
  --head:"Oswald","Rift","Arial Narrow",Impact,sans-serif;
  --body:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--fg);
  font-family:var(--body);font-size:17px;line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--red);text-decoration:none}
a:hover,a:focus-visible{text-decoration:underline}
.wrap{width:100%;max-width:1060px;margin:0 auto;padding:0 20px}

.skip-link{position:absolute;left:-9999px}
.skip-link:focus{left:10px;top:10px;z-index:99;background:#fff;color:#000;padding:10px}

header.site{
  position:sticky;top:0;z-index:20;background:rgba(0,0,0,.92);
  backdrop-filter:blur(6px);border-bottom:1px solid var(--line);
}
.bar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 0}
.logo img,.custom-logo{width:118px;height:auto}
.custom-logo-link{display:block;line-height:0;flex:0 0 auto}
.logo .txt{font-family:var(--head);font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:#fff;font-size:1.3rem}
nav.main{display:flex;gap:22px}
nav.main a{
  color:var(--fg);font-family:var(--head);font-weight:600;
  text-transform:uppercase;letter-spacing:.09em;font-size:15px;
}
nav.main a:hover{color:var(--red);text-decoration:none}

.hero{position:relative;min-height:64vh;display:grid;place-items:center;overflow:hidden}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.45),rgba(0,0,0,.8))}
.hero .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero .inner{position:relative;z-index:2;text-align:center;padding:80px 20px}
h1{
  font-family:var(--head);font-weight:700;text-transform:uppercase;
  letter-spacing:.06em;line-height:1.02;margin:0;
  font-size:clamp(2.6rem,10vw,5.6rem);
}
.tag{margin:18px auto 0;max-width:44ch;color:#e6e6e6;font-size:1.02rem}
.rule{width:64px;height:4px;background:var(--red);margin:26px auto 0;border:0}

section{padding:76px 0;border-top:1px solid var(--line)}
h2{
  font-family:var(--head);font-weight:700;text-transform:uppercase;
  letter-spacing:.07em;font-size:clamp(1.9rem,5.5vw,2.9rem);margin:0 0 8px;
}
.kicker{color:var(--red);font-family:var(--head);text-transform:uppercase;
  letter-spacing:.18em;font-size:.83rem;margin:0 0 10px}
.lead{color:var(--muted);max-width:60ch;margin:0 0 30px}

.menu-grid{display:grid;gap:34px;align-items:start}
.menu-card{border:1px solid var(--line);background:#0b0b0b;padding:12px}
.menu-card img{width:100%}
.btn{
  display:inline-block;margin-top:20px;background:var(--red);color:#fff;
  font-family:var(--head);font-weight:600;text-transform:uppercase;
  letter-spacing:.09em;padding:14px 26px;font-size:15px;
}
.btn:hover{background:#e02b2b;text-decoration:none}
.btn.ghost{background:transparent;color:var(--fg);border:1px solid #3a3a3a}
.btn.ghost:hover{border-color:var(--red);color:var(--red)}

.cols{display:grid;gap:34px}
.entry p{margin:0 0 1.1em}
.addr{font-family:var(--head);text-transform:uppercase;letter-spacing:.05em;
  font-size:clamp(1.15rem,3.6vw,1.6rem);line-height:1.35;margin:0 0 6px}
.addr a{color:var(--fg)}
.addr a:hover{color:var(--red)}
.links{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}

footer.site{border-top:1px solid var(--line);padding:34px 0 46px;color:#6f6f6f;font-size:.82rem}
.foot{display:flex;flex-wrap:wrap;gap:8px 18px;justify-content:space-between}
footer.site a{color:#6f6f6f}

@media (max-width:480px){
  .logo img,.custom-logo{width:94px}
  nav.main{gap:15px}
  nav.main a{font-size:13px;letter-spacing:.06em}
  .bar{padding:11px 0}
  section{padding:56px 0}
  .hero{min-height:56vh}
}
@media (min-width:760px){
  .menu-grid{grid-template-columns:.85fr 1.15fr;gap:48px}
  .cols{grid-template-columns:1fr 1fr;gap:48px}
  .hero{min-height:72vh}
}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}