/* ============================================
   Sydenham Souvlaki — site styles
   (SIPO-injected component styles live in api/api-styles.css)
   ============================================ */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:Poppins,sans-serif;background:#f5eadc;color:#fff;overflow-x:hidden}
a{text-decoration:none;color:inherit}
img{max-width:100%}

:root{
  --red:#d93418;
  --red-dark:#b93618;
  --navy:#243182;
  --brown:#733118;
  --brown-soft:#6d3d2a;
  --cream:#fff6e9;
  --strip-height:0px;
}

/* ---------- Header ---------- */
header{
  position:fixed;top:0;left:0;width:100%;z-index:999;
  background:rgba(255,248,238,.96);
  display:flex;justify-content:space-between;align-items:center;
  padding:14px 8%;box-shadow:0 4px 18px rgba(0,0,0,.08);
  transition:top .3s ease;
}
body.has-status-strip header{top:var(--strip-height)}
.header-logo{height:55px;width:auto;object-fit:contain}
nav{display:flex;align-items:center;flex-wrap:wrap}
nav a{color:#17213b;margin-left:26px;font-size:14px;font-weight:700}
nav a:hover,nav a.active{color:var(--red)}
nav a.nav-order-btn{background:var(--red);color:#fff;padding:10px 20px;border-radius:6px}
nav a.nav-order-btn:hover{background:var(--navy);color:#fff}

section{padding:95px 8%;scroll-margin-top:calc(var(--strip-height) + 80px)}

.btn{
  display:inline-block;padding:15px 36px;border-radius:6px;
  background:var(--navy);color:#fff;font-weight:600;font-size:14px;
  transition:.35s;box-shadow:0 10px 22px rgba(0,0,0,.15)
}
.btn:hover{transform:translateY(-5px);background:var(--red)}
.btn.red{background:#df231f}
.btn.cream{background:#fff1dd;color:#9c401d}
.btn.outline{background:transparent;color:var(--red);border:2px solid var(--red);box-shadow:none}
.btn.outline:hover{background:var(--red);color:#fff}

/* ---------- Indian menu popup ---------- */
.popup-overlay{position:fixed;inset:0;background:rgba(0,0,0,.82);z-index:9999;display:none;align-items:center;justify-content:center;padding:20px}
.vibrant-popup{width:95%;max-width:850px;background:linear-gradient(135deg,#fff5df,#ffe0b3);color:#6b2d16;border-radius:30px;overflow:hidden;display:grid;grid-template-columns:1fr 1fr;position:relative;box-shadow:0 35px 100px rgba(0,0,0,.55);animation:pop .5s ease}
.popup-img img{width:100%;height:100%;min-height:470px;object-fit:cover}
.popup-content{padding:50px 42px;text-align:left;display:flex;flex-direction:column;justify-content:center}
.popup-content span{display:inline-block;width:max-content;background:var(--red);color:#fff;padding:10px 22px;border-radius:50px;font-size:13px;font-weight:800;letter-spacing:1.5px;margin-bottom:18px}
.popup-content h2{font-family:"Playfair Display",serif;font-size:46px;line-height:1;color:var(--red-dark);margin-bottom:18px}
.popup-content p{font-size:16px;line-height:1.8;color:#6b3d2a;margin-bottom:18px}
.popup-content ul{margin:10px 0 18px;padding-left:20px;color:#6b3d2a;line-height:1.9}
.popup-actions{margin-top:20px;display:flex;gap:12px;flex-wrap:wrap}
.popup-btn{background:var(--red);color:#fff;padding:14px 28px;border-radius:8px;font-weight:700;transition:.3s;border:none;cursor:pointer}
.popup-btn:hover{background:var(--navy);transform:translateY(-4px)}
.popup-btn-secondary{padding:14px 28px;border:none;border-radius:8px;background:#444;color:#fff;font-weight:700;cursor:pointer;transition:.3s}
.popup-btn-secondary:hover{background:#000}
.close-popup{position:absolute;top:15px;right:15px;width:42px;height:42px;border:none;border-radius:50%;background:var(--red);color:#fff;font-size:20px;font-weight:bold;cursor:pointer;z-index:99999;transition:.3s;display:flex;align-items:center;justify-content:center}
.close-popup:hover{background:var(--navy);transform:rotate(90deg)}

/* ---------- Hero ---------- */
.hero{
  min-height:760px;padding-top:150px;
  background:linear-gradient(rgba(249,238,218,.85),rgba(249,238,218,.85)),url("https://www.transparenttextures.com/patterns/paper-fibers.png");
  display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:60px;color:#875037;
}
.logo-box{margin-bottom:25px}
.logo-img{width:260px;max-width:100%;object-fit:contain;filter:drop-shadow(0 15px 20px rgba(0,0,0,.25))}
.hero h1{font-family:"Playfair Display",serif;font-size:68px;line-height:1}
.hero p{letter-spacing:5px;margin:24px 0 34px;font-size:17px}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap}
.hero-food{text-align:center;position:relative}
.food-circle{width:330px;height:330px;background:var(--red);border-radius:50%;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);box-shadow:0 25px 60px rgba(217,52,24,.35)}
.hero-food img{position:relative;z-index:2;width:480px;height:480px;object-fit:cover;border-radius:50%;box-shadow:0 25px 45px rgba(0,0,0,.22);animation:float 3s infinite ease-in-out}

/* ---------- About ---------- */
.about{background:#a64b23;display:grid;grid-template-columns:1fr 1.15fr;gap:80px;align-items:center}
.about-img{min-height:520px;background:#d49635;border-radius:0 120px 0 120px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.about-img img{width:100%;height:520px;object-fit:cover}
.about h2{font-family:"Playfair Display",serif;font-size:46px;margin-bottom:25px}
.about p{font-size:15px;line-height:1.85;color:#fff7ef}

/* ---------- Order banner ---------- */
.order{background:radial-gradient(circle at center,#ce0000,#800000);display:grid;grid-template-columns:1fr 1fr;align-items:center;min-height:560px}
.order img{width:520px;height:360px;object-fit:cover;border-radius:30px;box-shadow:0 25px 60px rgba(0,0,0,.35);animation:float 3s infinite ease-in-out}
.order h3{font-size:54px}
.order h2{font-family:Rye,serif;font-size:92px;line-height:.9;margin:8px 0 35px}

/* ---------- Section headings ---------- */
.section-head{text-align:center;margin-bottom:50px}
.section-head h4{color:var(--red);font-size:18px;letter-spacing:3px;text-transform:uppercase;margin-bottom:8px}
.section-head h2{font-family:"Playfair Display",serif;font-size:56px;color:var(--red-dark);line-height:1.05}
.section-head p{color:var(--brown-soft);max-width:680px;margin:14px auto 0;line-height:1.7}

/* ---------- Popular items (home, from get_menu) ---------- */
.popular{background:#eeeeee;color:var(--brown)}
.popular .center{text-align:center;margin-top:45px}
.menu-loading{text-align:center;color:var(--brown-soft);padding:40px 0;grid-column:1/-1}
.items-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.items-grid .menu-card{background:#fff;border-radius:22px;overflow:hidden;box-shadow:0 18px 40px rgba(115,49,24,.14);display:flex;flex-direction:column;border-bottom:5px solid var(--red);transition:transform .35s}
.items-grid .menu-card:hover{transform:translateY(-8px)}
.menu-image-container{position:relative;height:230px;overflow:hidden;background:#f6efe4;color:var(--brown)}
.menu-image-container img{width:100%;height:100%;object-fit:cover}
.menu-category-badge{position:absolute;top:14px;left:14px;background:var(--red);color:#fff;padding:5px 14px;border-radius:50px;font-size:12px;font-weight:700}
.menu-details{padding:22px 24px 26px;display:flex;flex-direction:column;flex:1}
.menu-details h3{color:var(--red-dark);font-size:21px;line-height:1.25}
.menu-price{color:#fff;background:var(--navy);padding:5px 12px;border-radius:50px;font-weight:700;font-size:14px;white-space:nowrap}
.menu-details p{color:#71412d;font-size:14px;line-height:1.6;flex:1;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.btn-primary{display:inline-block;align-self:flex-start;background:var(--red);color:#fff;border-radius:6px;font-weight:700;transition:.3s}
.btn-primary:hover{background:var(--navy)}

/* ---------- Indian (coming soon) ---------- */
.indian{background:var(--cream);color:var(--brown);text-align:center;position:relative;overflow:hidden}
.indian:before{content:"";position:absolute;width:420px;height:420px;border-radius:50%;background:#f2c08a;opacity:.35;left:-130px;top:-120px}
.indian:after{content:"";position:absolute;width:360px;height:360px;border-radius:50%;background:var(--red);opacity:.12;right:-100px;bottom:-100px}
.indian-content{position:relative;z-index:2}
.coming-badge{display:inline-block;background:var(--red);color:#fff;padding:12px 30px;border-radius:50px;font-weight:700;margin-bottom:18px;letter-spacing:1px}
.indian h2{font-family:"Playfair Display",serif;font-size:56px;color:var(--red-dark);margin-bottom:16px}
.indian .sub{max-width:850px;margin:0 auto 50px;line-height:1.8;font-size:17px;color:var(--brown-soft)}
.indian-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;margin-bottom:45px}
.indian-card{background:#fff;border-radius:24px;overflow:hidden;box-shadow:0 20px 45px rgba(115,49,24,.18);transition:.35s;border-bottom:5px solid var(--red)}
.indian-card:hover{transform:translateY(-12px) scale(1.02)}
.indian-card img{width:100%;height:210px;object-fit:cover}
.indian-card-content{padding:24px}
.indian-card-content h3{color:var(--red);font-size:23px;margin-bottom:10px}
.indian-card-content p{color:#71412d;font-size:14px;line-height:1.6}

/* ---------- Contact block (home + contact page) ---------- */
.contact{background:#eee3d3;color:#88451d;display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.contact .logo-img{width:360px}
.contact h2{font-family:Rye,serif;color:#cb6b35;font-size:58px;line-height:.95;margin-bottom:30px}
.contact p{font-size:16px;margin:13px 0;line-height:1.6}
.contact a:hover{color:var(--red)}

/* ---------- Inner page header ---------- */
.page-header{
  padding:170px 8% 80px;text-align:center;color:#fff;
  background:linear-gradient(rgba(60,15,5,.72),rgba(60,15,5,.72)),url("../../about us.png") center/cover;
}
.page-header h1{font-family:Rye,serif;font-size:64px;line-height:1}
.page-header p{margin-top:14px;letter-spacing:3px;font-size:15px;opacity:.9}

/* ---------- Full menu page (from get_menu via app.js) ---------- */
.menu-page{background:#f5eadc;color:var(--brown);padding-top:60px}
.menu-tabs{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-bottom:40px}
.menu-tab{border:2px solid var(--red);background:#fff;color:var(--red);padding:10px 20px;border-radius:50px;font-family:inherit;font-weight:700;font-size:13px;letter-spacing:.5px;cursor:pointer;transition:.25s}
.menu-tab:hover{background:#ffe9e2}
.menu-tab.active{background:var(--red);color:#fff}
.menu-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:26px}
.menu-grid .menu-card{background:#fff;border-radius:20px;overflow:hidden;box-shadow:0 14px 34px rgba(115,49,24,.12);display:flex;flex-direction:column;animation:fadeUp .45s ease both}
.menu-card-img{height:210px;overflow:hidden;color:var(--brown)}
.menu-card-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.menu-grid .menu-card:hover .menu-card-img img{transform:scale(1.06)}
.menu-card-body{padding:20px 22px 22px;display:flex;flex-direction:column;flex:1}
.menu-card-body h3{color:var(--red-dark);font-size:19px;margin-bottom:8px}
.menu-card-body p{color:#71412d;font-size:13.5px;line-height:1.6;flex:1}
.menu-card-sizes{list-style:none;margin:12px 0 0;border-top:1px dashed #e6cdb8;padding-top:10px}
.menu-card-sizes li{display:flex;justify-content:space-between;font-size:13.5px;padding:3px 0;color:var(--brown-soft)}
.menu-card-sizes li span:last-child{font-weight:700;color:var(--brown)}
.menu-card-footer{display:flex;justify-content:space-between;align-items:center;margin-top:16px}
.menu-card-footer .price{font-size:20px;font-weight:800;color:var(--navy)}
.menu-card-footer .order-link{background:var(--red);color:#fff;padding:8px 16px;border-radius:6px;font-weight:700;font-size:13px;transition:.3s}
.menu-card-footer .order-link:hover{background:var(--navy)}
.menu-empty{text-align:center;color:var(--brown-soft);padding:2rem;grid-column:1/-1}

/* ---------- Contact page ---------- */
.contact-page{background:#f5eadc;color:var(--brown);display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start}
.info-card{min-width:0;overflow-wrap:anywhere;background:#fff;border-radius:22px;padding:34px;box-shadow:0 14px 34px rgba(115,49,24,.12)}
.info-card h3{font-family:"Playfair Display",serif;color:var(--red-dark);font-size:28px;margin-bottom:20px}
.info-row{display:flex;gap:16px;align-items:flex-start;padding:14px 0;border-bottom:1px solid #f0e2d3}
.info-row:last-child{border-bottom:none}
.info-icon{width:44px;height:44px;flex:0 0 44px;border-radius:50%;background:#ffe9e2;color:var(--red);display:flex;align-items:center;justify-content:center;font-size:19px}
.info-row small{display:block;text-transform:uppercase;letter-spacing:1.5px;font-size:11px;color:#a07a66;margin-bottom:3px}
.info-row > div{min-width:0}
.info-row a,.info-row span{font-size:16px;font-weight:600;color:var(--brown);line-height:1.5}
.info-row a:hover{color:var(--red)}
.hours-table{display:flex;flex-direction:column}
.hours-row{display:flex;justify-content:space-between;gap:16px;padding:12px 14px;border-radius:10px;font-size:15px}
.hours-row:nth-child(odd){background:#fbf5ee}
.hours-row .day{font-weight:700}
.hours-row .time{text-align:right;color:var(--brown-soft)}
.hours-row.today{background:var(--red);color:#fff}
.hours-row.today .time{color:#fff}
.closed-day{color:#b91c1c}
.map-wrap{grid-column:1/-1;border-radius:22px;overflow:hidden;box-shadow:0 14px 34px rgba(115,49,24,.12);height:420px}
.map-wrap iframe{width:100%;height:100%;border:0;display:block}

/* ---------- Footer ---------- */
footer{background:#120a06;color:#e9d9c4;padding:70px 8% 0}
.footer-grid{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:50px}
.footer-grid .footer-logo{height:80px;width:auto;margin-bottom:16px}
.footer-grid p{font-size:14px;line-height:1.7;opacity:.85}
.footer-grid h4{color:#d9bd68;font-size:15px;letter-spacing:2px;text-transform:uppercase;margin-bottom:18px}
.footer-contact li{list-style:none;font-size:14px;margin-bottom:12px;line-height:1.6}
.footer-contact a:hover{color:#d9bd68}
.footer-hours{list-style:none;font-size:13.5px}
.footer-hours li{display:flex;justify-content:space-between;gap:12px;padding:5px 0;border-bottom:1px dashed rgba(255,255,255,.12)}
.footer-hours li .time{text-align:right}
.footer-hours li.today{color:#ff8a6b;font-weight:700}
.footer-bottom{margin-top:50px;padding:22px 0;border-top:1px solid rgba(255,255,255,.1);display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;font-size:12px;color:#d9bd68}

/* ---------- Floating order button ---------- */
.floating-order{position:fixed;right:25px;bottom:25px;z-index:998;background:var(--red);color:#fff;padding:16px 25px;border-radius:50px;font-weight:800;box-shadow:0 15px 40px rgba(0,0,0,.28);animation:pulse 2s infinite}
.floating-order:hover{background:var(--navy)}

/* ---------- Animations ---------- */
.reveal{opacity:0;transform:translateY(60px);transition:1s}
.reveal.active{opacity:1;transform:translateY(0)}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-20px)}}
@keyframes pop{from{transform:scale(.75);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes pulse{0%{transform:scale(1)}50%{transform:scale(1.08)}100%{transform:scale(1)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}

/* ---------- Responsive ---------- */
@media(max-width:1100px){
  .items-grid{grid-template-columns:repeat(2,1fr)}
  .indian-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:900px){
  header{padding:12px 5%;flex-direction:column;gap:8px}
  .header-logo{height:44px}
  nav{justify-content:center}
  nav a{margin:0 7px;font-size:12px}
  nav a.nav-order-btn{padding:7px 12px}
  section{padding:70px 5%}
  .hero,.about,.order,.contact,.contact-page{grid-template-columns:1fr;text-align:center}
  .hero{padding-top:190px;gap:30px}
  .hero-actions{justify-content:center}
  .hero h1{font-size:44px}
  .hero-food img{width:300px;height:300px}
  .food-circle{width:220px;height:220px}
  .about-img{min-height:auto}
  .about-img img{height:340px}
  .order img{width:100%;height:260px}
  .order h2{font-size:58px}
  .section-head h2,.indian h2{font-size:40px}
  .items-grid,.indian-grid{grid-template-columns:1fr}
  .contact .logo-img{width:240px}
  .contact h2{font-size:42px}
  .page-header{padding:200px 5% 60px}
  .page-header h1{font-size:44px}
  .info-card{text-align:left;padding:24px}
  .map-wrap{height:320px}
  .footer-grid{grid-template-columns:1fr;gap:34px}
  .vibrant-popup{grid-template-columns:1fr}
  .popup-img img{min-height:200px;max-height:220px}
  .popup-content{padding:28px 22px;text-align:center;align-items:center}
  .popup-content h2{font-size:32px}
  .popup-content ul{text-align:left}
  .popup-actions{justify-content:center}
  .floating-order{right:15px;bottom:15px;padding:13px 18px;font-size:13px}
}