/* ===================================================
   BOCHI CAFÉ — UNIFIED STYLE SHEET
   - Barbra font loaded from uploaded path
   - Poppins used for UI text
   - Brand: --bochi-red, --cream
   =================================================== */

/* -----------------------
   FONT (local Barbra)
   ----------------------- */
@font-face{
  font-family: "Barbra";
  src: url("/mnt/data/Barbra-Regular.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* -----------------------
   ROOT / DESIGN TOKENS
   ----------------------- */
:root{
  --bochi-red: #972517;
  --cream: #fff5ec;
  --bg: #fff5ec;
  --text: #4a2e2a;
  --muted: #7a4a42;
  --card: #fffaf5;

  --space-xs: 6px;
  --space-sm: 12px;
  --space-md: 20px;
  --space-lg: 32px;
  --space-xl: 56px;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;

  --shadow-soft: 0 6px 20px rgba(20,16,14,0.06);
  --shadow-strong: 0 12px 40px rgba(20,16,14,0.08);

  --max-content: 1100px;
}

/* -----------------------
   BASE + RESET
   ----------------------- */
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, Arial;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.5;
  overflow-x:hidden;
}

section:not(.hero){
  max-width:var(--max-content);
  margin:0 auto;
  padding:60px 20px;
}
.container{max-width:var(--max-content);margin:0 auto;padding:0 20px}
a{color:inherit}
:focus{outline:3px solid rgba(151,37,23,0.14);outline-offset:3px}

/* -----------------------
   HEADER / NAV
   ----------------------- */
.header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:18px 28px;
  background: linear-gradient(0deg, rgba(255,245,236,0.96), rgba(255,245,236,0.96));
  position:sticky;top:0;z-index:70;
  border-bottom:1px solid rgba(151,37,23,0.06);
  backdrop-filter: blur(4px);
}

.logo{
  font-family:"Barbra";
  font-size:26px;color:var(--bochi-red);letter-spacing:.6px;line-height:1;
}

.nav a{
  color:var(--bochi-red);
  text-decoration:none;
  margin-left:20px;font-weight:600;font-size:15px;
}
.nav a:hover{opacity:.85}

/* -----------------------
   HERO (FULL SCREEN CENTERED & FIXED)
   ----------------------- */
.hero{
  position: relative;
  width: 100%;
  height: 100vh;            /* true full screen */
  min-height: 560px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  z-index: 10;
  background: var(--cream);
}

.hero-img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 60% center;   /* ⭐ CENTER FIX */
  z-index: 1;
  display: block;
}

.hero::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(255,245,236,0.20) 0%,
    rgba(255,245,236,0.55) 70%
  );
  z-index: 2;
}

.hero-overlay{
  position: relative;
  z-index: 3;
  text-align: center;
  padding: 0 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.hero-bochi{
  font-family: "Barbra";
  color: var(--bochi-red);
  font-size: clamp(48px, 9.8vw, 140px);
  line-height: 0.9;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin: 0;
  text-shadow: 0 8px 28px rgba(0,0,0,0.16);
}

.hero-slogan{
  margin-top: 6px;
  color: var(--bochi-red);
  font-size: clamp(16px, 2.4vw, 28px);
  font-weight: 500;
  text-transform: lowercase;
  opacity: .98;
}

.hero-buttons{
  margin-top: 28px;
  display: flex;
  gap: 18px;
  justify-content: center;
  flex-wrap: wrap;
}

/* -----------------------
   BUTTONS
   ----------------------- */
.btn{
  text-decoration:none;
  display:inline-block;
  padding:14px 34px;
  border-radius:10px;
  font-weight:700;
  font-size:clamp(14px,1.6vw,18px);
  transition: transform .14s ease, box-shadow .14s ease, opacity .12s;
  font-family:"Poppins",sans-serif;
  cursor:pointer;
}
.btn:focus{box-shadow:0 0 0 4px rgba(151,37,23,0.12)}

.btn.primary{
  background:var(--bochi-red); color:#fff; border:0;
  box-shadow:0 14px 40px rgba(151,37,23,0.10);
}
.btn.primary:hover{transform:translateY(-4px);opacity:0.97}

/* ⭐ BUTTON OUTLINE FIX — RED OUTLINE, VISIBLE ON CREAM */
.btn.outline{
  background:transparent;
  color:var(--bochi-red);
  border:2px solid var(--bochi-red);
}
.btn.outline:hover{transform:translateY(-3px);opacity:0.96}

/* -----------------------
   ABOUT
   ----------------------- */
.about h2{
  font-family:"Barbra";
  font-size:34px;color:var(--bochi-red);text-align:center;margin-bottom:14px;
}
.about p{max-width:920px;margin:10px auto;color:var(--muted)}

/* -----------------------
   GALLERY
   ----------------------- */
.gallery{padding-top:48px}
.gallery h2{font-family:"Barbra";font-size:32px;color:var(--bochi-red);text-align:center;margin-bottom:18px}

.gallery-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
  align-items:stretch;
}
.gallery-img{
  width:100%;height:240px;object-fit:cover;border-radius:12px;
  background:#fff;padding:6px;border:4px solid #fff;box-shadow:var(--shadow-soft);
}

/* -----------------------
   MENU
   ----------------------- */
.menu-section{
  background:#ffe8df;border-radius:14px;padding:40px 20px;text-align:center;
}
.menu-section h2{font-family:"Barbra";color:var(--bochi-red);font-size:30px;margin-bottom:12px}
.menu-caption{color:var(--muted);margin-bottom:12px}
.menu-image-wrap{display:flex;justify-content:center}
.menu-img{max-width:760px;width:100%;border-radius:12px;border:4px solid #fff;box-shadow:var(--shadow-strong)}

/* -----------------------
   TOURNAMENT
   ----------------------- */
.tournament{padding-top:40px}
.tournament h2{font-family:"Barbra";color:var(--bochi-red);text-align:center;font-size:30px;margin-bottom:18px}

.tournament-wrapper{display:flex;gap:24px;justify-content:center;flex-wrap:wrap}
.tournament-column{background:var(--card);border-radius:14px;padding:22px;width:460px;text-align:center;box-shadow:var(--shadow-strong)}
.poster-img,.leaderboard-img{width:100%;border-radius:12px;margin-bottom:12px}
.tourney-text{color:var(--text);margin-bottom:12px}
#countdown-timer{font-size:28px;color:var(--bochi-red);font-weight:800;margin-top:8px}

.leaderboard-box{background:var(--card);border-radius:14px;padding:22px;margin-top:18px;text-align:center;box-shadow:var(--shadow-strong)}

.social-links{margin-top:18px;text-align:center}
.social-links a{display:inline-block;background:var(--bochi-red);color:#fff;padding:9px 14px;border-radius:8px;margin-right:8px;text-decoration:none}

/* -----------------------
   ORDER / LOCATION
   ----------------------- */
.order{text-align:center;padding-top:32px}
.order h2{font-family:"Barbra";color:var(--bochi-red);font-size:30px;margin-bottom:12px}

.location{text-align:center}
.location h2{font-family:"Barbra";color:var(--bochi-red);font-size:30px;margin-bottom:10px}
.findus-text{margin-bottom:18px;color:var(--text)}

/* -----------------------
   FOOTER
   ----------------------- */
.footer{background:var(--bochi-red);color:var(--cream);padding:36px 20px;margin-top:36px}
.footer-inner{max-width:var(--max-content);margin:0 auto;display:flex;gap:24px;justify-content:space-between;align-items:flex-start;flex-wrap:wrap}
.footer-bochi{font-family:"Barbra";color:var(--cream);font-size:36px;text-transform:uppercase;letter-spacing:1.6px}
.footer-hours{color:var(--cream);text-align:center;line-height:1.9}
.footer-socials{text-align:right;color:var(--cream)}
.footer-social-links a{color:var(--cream);text-decoration:none;margin:0 6px;font-weight:600}
.footer-map-link{display:inline-block;margin-top:10px;color:var(--cream);text-decoration:underline}

/* -----------------------
   MICRO ANIMATIONS
   ----------------------- */
.fade-in {animation: fadeUp .6s cubic-bezier(.2,.9,.2,1) both;}
@keyframes fadeUp{
  from{opacity:0;transform:translateY(8px)}
  to{opacity:1;transform:translateY(0)}
}

/* -----------------------
   RESPONSIVE BREAKPOINTS
   ----------------------- */
@media (max-width:1000px){
  .gallery-grid{grid-template-columns:repeat(3,1fr)}
  .hero-bochi{font-size:clamp(48px,8.6vw,110px)}
}

@media (max-width:800px){
  .gallery-grid{grid-template-columns:repeat(2,1fr)}
  .hero{
    height:100vh;  /* ⭐ HERO FIX — FULL SCREEN ON MOBILE */
  }
  .hero-bochi{font-size:clamp(40px,12vw,84px)}
  .menu-img{max-width:95%}
  .tournament-column{width:100%}
  .footer-inner{flex-direction:column;text-align:center;align-items:center;gap:12px}
  .footer-socials{text-align:center}
}

@media (max-width:480px){
  .gallery-img{height:180px}
  .hero-bochi{font-size:46px}
  .hero-slogan{font-size:14px}
  .hero-buttons{flex-direction:column;gap:10px}
  .btn{width:86%;text-align:center;padding:12px 18px}
}

@font-face {
  font-family: "Barbra";
  src: url("fonts/Barbra-Regular.otf") format("opentype");
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: "Poppins", sans-serif;
  background: #fff5ec;
  color: #4a2e2a;
}

/* HEADER */
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  position: sticky;
  top: 0;
  background: #fff5ec;
  z-index: 100;
}

.logo {
  font-family: "Barbra";
  font-size: 26px;
  color: #972517;
}

/* BURGER */
.burger {
  background: none;
  border: none;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.burger span {
  width: 26px;
  height: 3px;
  background: #972517;
  border-radius: 2px;
}

/* NAV */
.nav {
  position: absolute;
  top: 64px;
  left: 0;
  width: 100%;
  background: #fff5ec;
  display: none;
  flex-direction: column;
  text-align: center;
}

.nav a {
  padding: 14px;
  text-decoration: none;
  color: #972517;
  font-weight: 600;
}

.nav.show {
  display: flex;
}

/* HERO */
.hero {
  height: 75vh;
  position: relative;
}

.hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.hero-bochi {
  font-family: "Barbra";
  font-size: 64px;
  color: #972517;
}

.hero-slogan {
  font-size: 18px;
}

.hero-buttons {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* BUTTONS */
.btn {
  padding: 14px 22px;
  border-radius: 10px;
  text-decoration: none;
  text-align: center;
  font-weight: 600;
}

.primary {
  background: #972517;
  color: #fff;
}

.outline {
  border: 2px solid #972517;
  color: #972517;
}

/* SECTIONS */
section {
  padding: 48px 20px;
  text-align: center;
}

.about p {
  margin-top: 14px;
}

/* MENU */
.menu-img {
  width: 100%;
  max-width: 720px;
  margin: 18px auto;
  border-radius: 12px;
}

/* SOCIALS */
.social-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}