/* Modern warm cafe theme */
:root{
  --primary: #0b3d91; /* deep blue */
  --primary-dark: #07264a;
  --light: #e8f4ff; /* light blue */
  --accent: #4f8bff; /* accent blue */
  --text-dark: #07264a;
  --text-light: #ffffff;
  --muted: #5b6b80;
  --card-bg: linear-gradient(180deg,#ffffff,#f4fbff);
  --max-width:1100px;
}
*{box-sizing:border-box}
.body, body{font-family:Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial; margin:0; color:var(--text-dark); background:var(--light); -webkit-font-smoothing:antialiased}
.container{max-width:var(--max-width); margin:0 auto; padding:1rem}
.site-header{background:var(--primary); color:var(--text-light); position:sticky; top:0; z-index:50; padding:0.75rem 0}
.header-inner{display:flex; align-items:center; justify-content:space-between; gap:2rem; padding:0 1rem}
.brand{font-weight:700; font-size:1.3rem; color:var(--text-light); text-decoration:none; display:flex; align-items:center; gap:1rem; flex-shrink:0; transition:opacity .2s ease}
.brand:hover{opacity:0.9}
.brand .logo{height:50px; width:auto; display:block; object-fit:contain}
.brand span{display:inline-block; letter-spacing:0.5px}
.nav ul{display:flex; gap:1.5rem; list-style:none; margin:0; padding:0}
.nav a{color:var(--text-light); text-decoration:none; padding:0.5rem; border-radius:6px}
.nav a:hover{background:rgba(255,255,255,0.06)}
.nav-toggle{display:none; background:transparent; border:0; color:var(--text-light); font-size:1.25rem}
.hero{padding:3rem 0; background:transparent}

/* Page content uses the same light background so there is no dark frame */
main{background:transparent; color:inherit}
.hero-content{display:grid; grid-template-columns:1fr 1fr; gap:2rem; align-items:center}
.hero-text h1{font-size:2rem; margin:0 0 .5rem; color:var(--text-dark)}
.tagline{font-weight:600; color:var(--accent)}
.btn{display:inline-block; padding:0.6rem 1rem; border-radius:8px; text-decoration:none; color:var(--text-dark); background:transparent; border:2px solid transparent; transition:all .2s ease}
.btn.primary{background:linear-gradient(90deg,var(--primary),var(--accent)); color:var(--text-light); box-shadow:0 10px 30px rgba(11,61,145,0.12)}
.btn.primary:hover{transform:translateY(-2px)}
.btn.ghost{background:transparent; border:1px solid rgba(43,43,43,0.06); color:var(--text-dark)}
.hero-image{border-radius:12px; box-shadow:0 8px 24px rgba(107,63,42,0.12); overflow:hidden; display:flex; align-items:center; justify-content:center}
.hero-image img{width:100%; height:100%; max-height:360px; object-fit:cover; display:block}
.featured{padding:2rem 0}
.featured-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1rem}
.card{background:var(--card-bg); border-radius:10px; overflow:hidden; box-shadow:0 8px 26px rgba(11,61,145,0.06); padding-bottom:1rem; border:1px solid rgba(79,139,255,0.06)}
.card img{width:100%; display:block; height:180px; object-fit:cover}
.card h3{margin:0.5rem 1rem}
.price{font-weight:700; color:var(--text-dark); margin:0.5rem 1rem}
.testimonials{padding:2rem 0}
.test-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1rem}
.testimonial{background:linear-gradient(180deg,#fff,#fffefb); padding:1rem; border-radius:8px; box-shadow:0 6px 16px rgba(0,0,0,0.04); border-left:4px solid var(--accent)}
.footer-grid{display:flex; gap:2rem; justify-content:space-between; align-items:flex-start}
.site-footer .socials a{margin-right:0.5rem; color:var(--text-light); text-decoration:none}

/* Owner / about */
.owner-card{display:flex; gap:1rem; align-items:center}
.owner-photo{flex:0 0 160px; border-radius:8px; overflow:hidden}
.owner-photo img{width:100%; height:160px; object-fit:cover; display:block}
.site-footer{background:linear-gradient(180deg,var(--primary-dark),#041428); color:var(--text-light); padding:2rem 0}
.copyright{padding:0.75rem; text-align:center; color:#ccc}
/* Menu and gallery */
.menu-grid, .gallery-grid{display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.menu-item, .gallery-item{background:#fff; border-radius:10px; overflow:hidden; box-shadow:0 6px 20px rgba(0,0,0,0.05); display:flex; gap:1rem; align-items:center}
.menu-item img, .gallery-item img{width:160px; height:120px; object-fit:cover; flex-shrink:0}
.menu-category{margin:1.25rem 0}
/* Price reveal on hover/focus */
.menu-item .price{overflow:hidden; max-height:0; opacity:0; transform:translateY(6px); transition:all .32s ease; margin:0 1rem}
.menu-item:hover .price,
.menu-item:focus-within .price{max-height:200px; opacity:1; transform:none; margin-top:0.5rem}

/* remove toggle button styles (we removed buttons) */
/* Contact */
.contact-grid{display:grid; grid-template-columns:1fr 360px; gap:2rem}
.contact-form label{display:block; margin-top:0.75rem}
.contact-form input, .contact-form textarea{width:100%; padding:0.5rem; border-radius:6px; border:1px solid #e6e6e6}
.map-placeholder{height:200px; background:linear-gradient(180deg,#eee,#e6e6e6); border-radius:8px; display:flex; align-items:center; justify-content:center; color:#666}
/* Responsive */
@media (max-width:900px){
  .hero-content{grid-template-columns:1fr}
  .nav ul{display:none}
  .nav-toggle{display:block}
  .contact-grid{grid-template-columns:1fr}
  .footer-grid{flex-direction:column}
  .brand span{font-size:1rem}
  .brand .logo{height:40px}
}

/* Show mobile nav when toggled open */
@media (max-width:900px){
  .nav.open ul{display:flex; flex-direction:column; gap:.6rem; padding:0.75rem; position:absolute; top:100%; left:0; right:0; background:var(--light); z-index:9999}
  .nav.open ul a{padding:0.6rem 0.5rem; color:var(--text-dark); background:transparent; border-radius:6px}
  .nav.open ul a:hover{background:rgba(11,61,145,0.06)}
}
/* small polish */
a:focus{outline:3px solid rgba(244,162,97,0.25); outline-offset:2px}
.gallery-grid .gallery-item{overflow:hidden}
.gallery-grid img{width:100%; height:220px; object-fit:cover; transition:transform .35s ease}
.gallery-grid img:hover{transform:scale(1.05)}

/* Animations: scroll-in and hover polish */
.animate{opacity:0; transform:translateY(18px); transition:opacity .6s ease,var(--transform, transform) .6s ease; will-change:opacity,transform}
.animate.fade-slow{transition-duration: .9s}
.in-view{opacity:1; transform:none}

.card:hover{transform:translateY(-6px); transition:transform .25s ease}

/* stagger children inside hero */
.hero-text .animate{transition-delay:.12s}
.featured-grid .card.animate{transition-delay:.08s}
.gallery-grid .gallery-item.animate{transition-delay:.06s}

/* reduced motion support */
@media (prefers-reduced-motion: reduce){
  .animate, .card, .gallery-grid img{transition:none!important; transform:none!important}
}

/* Policy pages (Terms & Conditions, Privacy Policy) */
.policy-page{padding:2rem 0; line-height:1.8}
.policy-page h1{font-size:2rem; margin-bottom:0.5rem; color:var(--text-dark)}
.policy-page .last-updated{color:var(--muted); font-size:0.9rem; margin-bottom:2rem; font-style:italic}
.policy-page section{margin-bottom:2rem; padding-bottom:1.5rem; border-bottom:1px solid rgba(79,139,255,0.1)}
.policy-page section:last-child{border-bottom:none}
.policy-page h2{font-size:1.25rem; color:var(--primary); margin-top:1.5rem; margin-bottom:0.75rem}
.policy-page h3{font-size:1.1rem; color:var(--text-dark); margin-top:1rem; margin-bottom:0.5rem}
.policy-page ul{margin:1rem 0; padding-left:2rem}
.policy-page li{margin-bottom:0.5rem; color:var(--text-dark)}
.policy-page address{font-style:normal; margin-top:1rem; padding:1rem; background:rgba(79,139,255,0.06); border-radius:8px; border-left:4px solid var(--accent)}
.policy-page a{color:var(--accent); text-decoration:none}
.policy-page a:hover{text-decoration:underline}
.copyright a{color:var(--text-light); text-decoration:none}
.copyright a:hover{text-decoration:underline}