/* ==========================================================
   كبابجي كارم — shared styles (all pages)
   Colours:  orange #FF7B17 · blue #214C6F · dark brown #2B1200
             cream #FFF7EE · deep brown #2A1204
   Fonts:    Cairo (text) · Kufam 800 (headlines)
   ========================================================== */

body{margin:0;background:#2A1204;color:#FFFFFF;font-family:'Cairo',system-ui,sans-serif;font-size:17px;line-height:1.6}
a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible{outline:3px solid #2B1200;outline-offset:3px}
.home a:focus-visible,.home button:focus-visible,.page-hero a:focus-visible,.page-hero button:focus-visible{outline-color:#FFFFFF}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
img{max-width:100%}

.glass{backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.btn{transition:transform .15s ease,filter .15s ease}
.btn:hover{transform:translateY(-2px);filter:brightness(1.06)}
.foot:hover{text-decoration:underline}
.tel:hover{text-decoration:underline}
button,a{-webkit-tap-highlight-color:transparent;touch-action:manipulation}

/* ---------- header: logo centred above the nav pill ---------- */
.site-header{position:relative;display:flex;flex-direction:column;align-items:center;gap:14px;padding:24px clamp(20px,4vw,56px) 8px}
.brand{display:flex;align-items:center;flex:none}
.brand img{display:block;height:68px;width:auto}
.nav{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px;padding:8px;border-radius:40px;background:rgba(30,12,2,.42);border:1px solid rgba(255,255,255,.22)}
.nav a{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 clamp(16px,2vw,32px);border-radius:999px;color:#FFFFFF;font-size:clamp(16px,1.4vw,20px);font-weight:600;transition:background-color .15s ease}
.nav a:hover{background:rgba(255,255,255,.16)}
.nav a.is-active{background:#FFFFFF;color:#5A2000;font-weight:700}
.nav a.is-active:hover{background:#FFFFFF}
@media (max-width:700px){
  .site-header{padding-top:14px;gap:10px}
  .brand img{height:44px}
  .nav{align-self:stretch;flex-wrap:nowrap;justify-content:space-between;gap:2px;padding:5px;border-radius:999px}
  .nav a{flex:1 1 auto;min-height:44px;padding:0 6px;font-size:15px;white-space:nowrap}
}

/* ---------- inner-page hero (about / menu / location) ---------- */
.page-hero{position:relative;overflow:hidden;min-height:200px;display:flex;flex-direction:column;background:#2A1204}
.page-hero > img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.page-hero .shade,.home .shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(138,58,0,.52) 0%,rgba(138,58,0,.68) 100%)}
.page-hero .title{position:relative;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:4px;padding:12px clamp(20px,4vw,56px) 20px;text-align:center}
.page-hero h1{margin:0;font-family:'Kufam','Cairo',sans-serif;font-weight:800;font-size:clamp(28px,3.4vw,44px);line-height:1.2;text-shadow:0 4px 32px rgba(0,0,0,.6)}
.page-hero p{margin:0;font-size:clamp(14px,1.1vw,16px);font-weight:600;text-shadow:0 2px 16px rgba(0,0,0,.6)}

/* ---------- home hero ---------- */
.home{position:relative;overflow:hidden;min-height:100vh;display:flex;flex-direction:column;background:#2A1204}
.home .slide{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.home .slide[hidden],.home .headline[hidden]{display:none}
.home .hero-in{position:relative;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(14px,2vw,22px);padding:32px clamp(20px,4vw,56px) 40px;text-align:center}
.headline{margin:0;font-family:'El Messiri','Kufam','Cairo',sans-serif;font-weight:700;font-size:clamp(48px,9vw,136px);line-height:1.3;text-shadow:0 4px 32px rgba(0,0,0,.6);text-wrap:balance}
.cta{display:inline-flex;align-items:center;justify-content:center;min-height:68px;padding:0 clamp(36px,4vw,56px);border-radius:999px;background:#FF7B17;color:#2B1200;font-size:clamp(18px,1.6vw,23px);font-weight:700;transition:transform .15s ease,filter .15s ease}
.cta:hover{transform:translateY(-2px);filter:brightness(1.06)}
.dots{position:relative;display:flex;align-items:center;justify-content:center;padding:0 0 28px}
.dot{width:44px;height:44px;padding:0;border:0;background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center}
.dot span{display:block;width:13px;height:13px;border-radius:50%;background:rgba(255,255,255,.6)}
.dot[aria-current="true"] span{width:16px;height:16px;background:#FFFFFF}

/* ---------- location map card ---------- */
.mapcard{transition:transform .15s ease,filter .15s ease}
.mapcard:hover{transform:translateY(-2px);filter:brightness(1.05)}
.mapcard:focus-visible{outline-color:#2B1200}
/* phone numbers are links: give a thumb a proper target */
.tel{display:inline-flex;align-items:center;min-height:44px}

/* slides fade in instead of jumping */
@keyframes kk-fade{from{opacity:0}to{opacity:1}}
@keyframes kk-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.home .slide:not([hidden]){animation:kk-fade .7s ease}
.home .headline:not([hidden]){animation:kk-rise .7s ease}
@media (prefers-reduced-motion:reduce){.home .slide,.home .headline{animation:none!important}}

/* smoothness: GPU-friendly slides, no live blur behind the moving pictures on phones, lighter shadows */
.home .slide{will-change:opacity;backface-visibility:hidden}
@media (max-width:760px){.glass{-webkit-backdrop-filter:none!important;backdrop-filter:none!important;background:rgba(42,18,4,.62)!important}.headline{text-shadow:0 2px 12px rgba(0,0,0,.65)!important}}

/* moving between pages: a short cross-fade instead of a blank flash (browsers that do not know it just load the next page) */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.18s}

/* location page map */
.mapbtn{position:absolute;z-index:500;inset-inline:16px;bottom:16px;display:flex;align-items:center;justify-content:center;min-height:54px;border-radius:999px;background:#FF7B17;color:#214C6F;font-weight:800;font-size:18px;box-shadow:0 8px 20px -8px rgba(33,76,111,.6)}
.mapbtn:hover{filter:brightness(1.06)}

/* video hero + a slow zoom on the photos so the hero always feels alive */
.home .hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .8s ease;pointer-events:none}
.home.has-video .hero-video{opacity:1}
.home.has-video .slide{visibility:hidden;transition:visibility 0s .9s}
@keyframes kk-zoom{from{transform:scale(1)}to{transform:scale(1.1)}}
.home .slide:not([hidden]){animation:kk-fade .7s ease,kk-zoom 8s ease-out forwards}
.hero-pause{position:absolute;z-index:30;inset-inline-end:16px;bottom:24px;width:44px;height:44px;border-radius:50%;border:2px solid rgba(255,255,255,.8);background:rgba(33,76,111,.7);color:#fff;font-size:15px;line-height:1;cursor:pointer}
.hero-pause:hover{background:rgba(33,76,111,.9)}
/* the home hero: one even 40% tint over the whole picture */
.home .shade{background:rgba(138,58,0,.4)}
/* the poster is the picture until the video plays: always visible, no fade */
.home .hero-video{opacity:1;transition:none}

/* phones: tighter everywhere, so more of the page fits on the screen */
@media (max-width:600px){
  body{font-size:15px}
  .site-header{padding:10px 14px 4px;gap:8px}
  .brand img{height:34px}
  .nav{padding:4px}
  .nav a{min-height:38px;font-size:14px;padding:0 4px}
  .page-hero{min-height:0}
  .page-hero .title{padding:4px 16px 12px}
  .page-hero h1{font-size:24px}
}
@media (max-width:600px){
  footer>div{padding:22px 16px 16px!important;gap:16px!important}
  footer>div>div{gap:16px 28px!important}
  footer div[style*="gap:40px 72px"]{gap:14px 36px!important}
  footer div[style*="gap:16px"],footer div[style*="gap:10px"]{gap:6px!important}
  footer [style*="font-size:17px"]{font-size:14px!important}
  footer img{height:40px!important}
  footer svg{height:20px}
}

/* ---------- home page: what the hero says besides the headline ---------- */
.home{min-height:88vh;min-height:88svh}   /* not the full screen, so the strip under it peeks out and says "there is more" */
.hero-sub{margin:0;max-width:32ch;font-size:clamp(17px,1.6vw,22px);font-weight:700;line-height:1.6;text-shadow:0 2px 16px rgba(0,0,0,.6)}
.hero-status{display:inline-flex;align-items:center;gap:10px;margin:0;padding:8px 18px;border-radius:24px;background:rgba(30,12,2,.6);border:1px solid rgba(255,255,255,.25);font-size:clamp(15px,1.2vw,17px);font-weight:700}
.hero-status[hidden]{display:none}
.hero-status i{flex:none;width:10px;height:10px;border-radius:50%;background:#3DDC84;box-shadow:0 0 0 4px rgba(61,220,132,.28)}
.hero-status.is-closed i{background:#FF5A4E;box-shadow:0 0 0 4px rgba(255,90,78,.28)}
.hero-ctas{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 16px;margin-top:clamp(6px,1.4vw,18px)}
.cta-ghost{background:rgba(30,12,2,.25);color:#FFFFFF;box-shadow:inset 0 0 0 2px #FFFFFF}
.cta-dark{background:#2B1200;color:#FFFFFF}
@media (max-width:600px){
  .hero-ctas{align-self:stretch;flex-wrap:nowrap;gap:10px}
  .hero-ctas .cta{flex:1 1 0;min-height:56px;padding:0 12px;font-size:17px}
}

/* ---------- home page: the sections under the hero ---------- */
.hm-wrap{max-width:1200px;margin:0 auto;padding:0 clamp(20px,4vw,40px);box-sizing:border-box}
.hm-h2{margin:0;font-family:'Kufam','Cairo',sans-serif;font-weight:800;font-size:clamp(28px,3.6vw,44px);line-height:1.3}

.hm-promo{display:block;padding:14px 20px;background:#2B1200;color:#FFFFFF;text-align:center;font-size:clamp(16px,1.3vw,19px);font-weight:700;line-height:1.7}
.hm-promo[hidden]{display:none}
.hm-promo bdi{display:inline-block;margin:0 2px;padding:0 12px;border-radius:8px;background:#FF7B17;color:#2B1200;font-weight:800;letter-spacing:.04em}
.hm-promo:hover{text-decoration:underline}

.hm-info{background:#FFF7EE;color:#2B1200;padding:clamp(20px,3vw,32px) 0;border-bottom:1px solid rgba(43,18,0,.1)}
.hm-info-row{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.hm-fact{display:flex;align-items:center;gap:14px;font-size:16px;line-height:1.5}
.hm-fact svg{flex:none;width:46px;height:46px;padding:11px;box-sizing:border-box;border-radius:50%;background:#2B1200;color:#FFFFFF}
.hm-fact b{display:block;font-size:18px;font-weight:800}

.hm-cats{background:#FFF7EE;color:#2B1200;padding:clamp(36px,6vw,80px) 0}
.hm-cats .hm-h2{margin-bottom:clamp(16px,2.5vw,32px)}
.hm-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(10px,1.6vw,20px)}
.hm-cat{position:relative;display:block;aspect-ratio:4 / 3;border-radius:clamp(16px,2vw,24px);overflow:hidden;background:#2A1204;transition:transform .15s ease}
.hm-cat:hover{transform:translateY(-3px)}
.hm-cat img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hm-cat::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 45%,rgba(30,12,2,.8) 100%)}
.hm-cat span{position:absolute;z-index:1;inset-inline-start:16px;bottom:12px;color:#FFFFFF;font-family:'Kufam','Cairo',sans-serif;font-weight:800;font-size:clamp(19px,2vw,26px);text-shadow:0 2px 10px rgba(0,0,0,.5)}
.hm-more{display:inline-flex;align-items:center;min-height:44px;margin-top:14px;font-size:18px;font-weight:800;color:#214C6F}
.hm-more:hover{text-decoration:underline}

.hm-cater{background:#FF7B17;color:#2B1200;padding:clamp(40px,6vw,80px) 0}
.hm-cater-row{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(24px,4vw,56px)}
.hm-cater-row img{flex:1 1 380px;min-width:0;width:100%;aspect-ratio:4 / 3;object-fit:cover;border-radius:24px}
.hm-cater-txt{flex:1 1 360px;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:16px}
.hm-cater-txt p{margin:0;font-size:clamp(17px,1.4vw,20px);line-height:1.8;font-weight:600}

.hm-proof{background:#FFF7EE;color:#2B1200;padding:clamp(36px,5vw,64px) 0}
.hm-proof-row{display:flex;flex-wrap:wrap;align-items:center;gap:24px clamp(32px,5vw,72px)}
.hm-stat{display:flex;flex-direction:column}
.hm-stat[hidden]{display:none}
.hm-stat b{font-family:'Kufam','Cairo',sans-serif;font-weight:800;font-size:clamp(30px,4vw,48px);line-height:1.35}
.hm-stat > span{font-size:17px;font-weight:600}
.hm-follow{margin-inline-start:auto}
.hm-social{display:flex;gap:12px}
.hm-soc{display:inline-flex;align-items:center;justify-content:center;min-height:56px;padding:0 24px;border-radius:999px;border:2px solid #2B1200;color:#2B1200;font-size:18px;font-weight:700;text-decoration:none}

@media (max-width:600px){
  .hm-info-row{gap:8px}
  .hm-fact{flex-direction:column;text-align:center;gap:8px;font-size:13px;line-height:1.45}
  .hm-fact svg{width:40px;height:40px;padding:9px}
  .hm-fact b{font-size:15px}
  .hm-grid{grid-template-columns:repeat(2,1fr)}
  .hm-cat span{inset-inline-start:12px;bottom:8px}
  .hm-cater-txt .cta,.hm-follow{align-self:stretch;min-height:56px}
  .hm-proof-row{gap:18px 32px}
  .hm-follow{margin-inline-start:0;flex:1 1 100%}
  .hm-social{flex:1 1 100%}
  .hm-soc{flex:1}
}

/* floating WhatsApp button (js/wa.js) */
.wa-fab{position:fixed;left:16px;bottom:18px;z-index:60;width:56px;height:56px;border-radius:50%;background:#25D366;color:#FFFFFF;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 18px rgba(0,0,0,.3);text-decoration:none;transition:transform .15s ease}
.wa-fab:hover{transform:scale(1.07)}
.wa-fab:focus-visible{outline:3px solid #FFFFFF;outline-offset:3px;box-shadow:0 0 0 6px #214C6F}
.wa-fab svg{width:32px;height:32px;display:block}
@media (max-width:600px){.wa-fab{left:12px;bottom:14px;width:50px;height:50px}.wa-fab svg{width:28px;height:28px}}
/* home on phones: hidden while the hero fills the screen (js/home.js sets .hero-on) */
@media (max-width:600px){.wa-fab{transition:transform .15s ease,opacity .2s ease,visibility .2s}.hero-on .wa-fab{opacity:0;visibility:hidden;transform:scale(.8)}}
/* menu on phones: once the orange order bar shows, it is the one button to press, so the bubble steps aside */
@media (max-width:900px){body.menu-page:has(.mbar) .wa-fab{display:none}}
/* phones: room under the footer's last line so the bubble never sits on it */
@media (max-width:600px){footer{padding-bottom:72px}}
/* checkout: the WhatsApp bubble covered the order total; the page has its own WhatsApp fallback and «اتصل بينا» */
body.checkout-page .wa-fab{display:none}
/* phones: the footer links are short lines of text; a little height makes each one easy to hit with a thumb */
@media (max-width:600px){footer a.foot{padding-block:7px}footer a.tel{display:inline-block;padding-block:6px}}