:root{
  --bg:#5b3a1a;--bg2:#7a4b22;--accent-blue:#1f4ed1;--accent-green:#5aa02c;--white:#fff;--muted:#ddd;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Helvetica,Arial,sans-serif;background:linear-gradient(180deg,var(--bg),var(--bg2));color:var(--white)}
a{color:var(--accent-green);text-decoration:none}
a:hover{text-decoration:underline}
.container{width:min(1200px,92vw);margin:0 auto}

/* ===== Header ===== */
header{position:sticky;top:0;z-index:60;background:rgba(0,0,0,.25);backdrop-filter:blur(8px);border-bottom:1px solid rgba(255,255,255,.08)}
.header-inner{position:relative;display:flex;align-items:center;gap:16px;padding:14px 0} /* +2px padding gives more air overall */
.brand{display:flex;gap:10px;align-items:center}
.brand img{height:44px;width:auto}
.brand h1{ white-space:nowrap; display:inline-block; }

/* Hebrew badge pinned top-right, now with a touch more space above */
.hebrew-badge{position:absolute;right:12px;top:-4px;font-weight:800;letter-spacing:.05em;z-index:61}
.hebrew-badge span{display:inline-block;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);padding:6px 12px;border-radius:12px}

/* Desktop nav + spacing from Hebrew */
nav{margin-left:auto;padding-top:14px}
nav ul{display:flex;gap:18px;list-style:none;margin:0;padding:0;align-items:center;flex-wrap:wrap}
nav a{color:var(--white);opacity:.95;font-weight:600}
nav a:hover{opacity:1;color:var(--accent-blue)}

/* Menu button hidden on desktop */
.menu-btn{display:none !important;margin-left:auto;margin-right:0;width:40px;height:40px;border-radius:8px;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.08);color:#fff;font-size:20px;align-items:center;justify-content:center}

/* ===== Sections ===== */
section{padding:64px 0;border-top:1px solid rgba(255,255,255,.06)}
section h2{margin:0 0 14px 0;font-size:28px}
.lead{opacity:.92;max-width:78ch;line-height:1.65}
.hero{padding:80px 0 48px 0;background:radial-gradient(1200px 400px at 50% -50%, rgba(255,255,255,.12), transparent)}
.hero h2{font-size:36px;margin-bottom:10px}
.hero .cta{display:flex;gap:14px;margin-top:16px;flex-wrap:wrap}
.button{background:var(--accent-green);color:var(--white);padding:10px 16px;border-radius:10px;font-weight:700;border:none;cursor:pointer}
.button.alt{background:var(--accent-blue)}

.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media (max-width:900px){.grid-3{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.grid-3{grid-template-columns:1fr}}

.card{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:16px;padding:18px}
.card img{max-width:100%;height:auto}

/* Logo wrap */
.wrapbox{position:relative}
.wrapbox .logo-right{float:right;margin:0 0 10px 16px;width:min(40%,260px);max-width:260px}
.wrapbox .logo-left{float:left;margin:0 16px 10px 0;width:min(40%,260px);max-width:260px}
.wrapbox::after{content:"";display:block;clear:both}
@media (max-width:700px){
  .wrapbox .logo-right,.wrapbox .logo-left{float:none;display:block;margin:0 auto 12px auto;width:min(70%,320px);max-width:320px}
}

/* ===== Gallery ===== */
.gallery{position:relative;overflow:hidden;border-radius:16px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.04)}
.gallery-track{display:flex;scroll-behavior:smooth;overflow-x:auto;scroll-snap-type:x mandatory;gap:4px}
.gallery-track::-webkit-scrollbar{height:10px}
.gallery-track::-webkit-scrollbar-thumb{background:rgba(255,255,255,.2);border-radius:6px}
.gallery-item{min-width:100%;scroll-snap-align:center;display:flex;align-items:center;justify-content:center;aspect-ratio:16/9}
.gallery-item img{width:100%;height:100%;object-fit:cover}
.gallery .arrow{position:absolute;top:50%;transform:translateY(-50%);background:rgba(0,0,0,.45);border:1px solid rgba(255,255,255,.3);color:#fff;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;font-size:20px;cursor:pointer}
.gallery .arrow:hover{background:rgba(0,0,0,.6)}
.gallery .prev{left:10px}.gallery .next{right:10px}

/* ===== YouTube embeds ===== */
.youtube-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media (max-width:1024px){.youtube-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.youtube-grid{grid-template-columns:1fr}}
.youtube-embed{position:relative;width:100%;padding-bottom:56.25%;border-radius:16px;overflow:hidden;border:1px solid rgba(255,255,255,.1);background:#000}
.youtube-embed iframe{position:absolute;width:100%;height:100%;left:0;top:0}

/* ===== Locations ===== */
.locations table{width:100%;border-collapse:separate;border-spacing:0 12px}
.locations th,.locations td{padding:12px 16px;background:rgba(255,255,255,.06)}
.locations th{background:rgba(255,255,255,.12);text-align:left}
.locations tr{border-radius:12px}
.locations td:first-child,.locations th:first-child{border-top-left-radius:12px;border-bottom-left-radius:12px}
.locations td:last-child,.locations th:last-child{border-top-right-radius:12px;border-bottom-right-radius:12px}

/* ===== Forms ===== */
form{display:grid;gap:12px}
input,textarea,select{padding:12px;border-radius:10px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.08);color:var(--white);width:100%}
::placeholder{color:#eee;opacity:.7}
.success,.error{padding:12px;border-radius:10px;margin-top:10px}
.success{background:rgba(20,120,20,.45)}.error{background:rgba(150,30,30,.45)}

/* ===== Footer ===== */
footer{padding:40px 0;color:var(--muted);text-align:center;border-top:1px solid rgba(255,255,255,.06)}

/* ===== Mobile breakpoint ===== */
@media (max-width:920px){
  .hebrew-badge{right:10px;top:2px} /* add tiny space above on mobile */
  .menu-btn{display:flex !important;order:3}
  nav{order:4;width:100%;padding-top:10px}
  nav ul{display:none;flex-direction:column;gap:10px;padding:10px 0;align-items:flex-end;text-align:right}
  nav.open ul{display:flex}
}

/* ===== Back-to-top button ===== */
.to-top{
  position:fixed;right:20px;bottom:22px;width:48px;height:48px;border-radius:999px;
  background:var(--accent-blue);color:#fff;border:none;box-shadow:0 6px 22px rgba(0,0,0,.35);
  display:grid;place-items:center;font-size:22px;cursor:pointer;z-index:70;
  opacity:0;pointer-events:none;transition:opacity .25s ease, transform .25s ease;
}
.to-top.show{opacity:1;pointer-events:auto;transform:translateY(0)}
.to-top:hover{transform:translateY(-2px)}

/* --- Mobile header refinements (menu button + brand line) --- */
.brand h1{ white-space:nowrap; display:inline-block; }
.brand h1 sup{ font-size:.6em; line-height:0; margin-left:.15em; vertical-align:super; }

@media (max-width:920px){
  /* keep Hebrew badge slightly above menu row */
  .hebrew-badge{ right:10px; top:-4px; }
  /* place the menu button at far right, in-flow (so it won't overlap links) */
  .menu-btn{
    display:flex !important;
    order:3;
    position:static;      /* back in normal flow */
    margin-left:auto;     /* push to the far right */
  }
  nav{ order:4; width:100%; padding-top:10px; }
  nav ul{ align-items:flex-end; text-align:right; }
}

/* --- Mobile fine-tune: brand size + button inset (desktop unaffected) --- */
@media (max-width: 920px){
  .brand h1{ font-size: clamp(20px, 6vw, 28px); } /* gentle scale on small screens */
  .menu-btn{ margin-right: 10px; }                /* pull slightly in from the edge */
}

/* Franchise mobile size tweak — match other sections */
@media (max-width: 920px){
  #franchise .franchise-logos{
    width: min(60%, 240px) !important; /* ~same visual size as About / CoffeeSpot */
    gap: 10px;
  }
  #franchise .franchise-logos img{ width:100%; height:auto; }
}
/* === Franchise: lock desktop right column + shrink on mobile (high specificity) === */

/* Desktop (right column, fixed width so it never balloons) */
@media (min-width: 921px){
  #franchise .card.wrapbox{
    display: grid !important;
    grid-template-columns: 1fr 220px !important;  /* right column size */
    column-gap: 24px;
    align-items: start;
    padding-right: 18px;
  }
  #franchise .card.wrapbox > p.lead{ grid-column:1; grid-row:1; }
  #franchise .card.wrapbox > .franchise-logos{
    grid-column:2; grid-row:1;
    display:flex; flex-direction:column; gap:16px;
    width:220px !important; justify-self:end; align-items:flex-end; margin:0;
  }
  #franchise .card.wrapbox > .franchise-logos img{
    width:100% !important; height:auto; display:block;
  }
}

/* Mobile/tablet (stack above text at a smaller size) */
@media (max-width: 920px){
  #franchise .card.wrapbox{ display:block !important; padding-right:18px; }
  #franchise .card.wrapbox > .franchise-logos{
    position:static !important;
    display:flex; flex-direction:column; gap:10px;
    width:clamp(150px, 55vw, 200px) !important;   /* similar scale to other sections */
    margin:0 auto 12px !important; align-items:center;
  }
  #franchise .card.wrapbox > .franchise-logos img{ width:100% !important; height:auto; }
}