/*
Theme Name: Thalatha Food Hub
Theme URI: https://aymangad.net
Author: Ayman Gad
Description: A multi-restaurant hub theme — one home page introducing three restaurants (بيت صنوان، دكان جريد، فرع القهوة), each with its own branded page and full accordion menu.
Version: 1.1
Requires at least: 5.8
Requires PHP: 7.4
Text Domain: thalatha-hub
*/

:root{
  --paper:#FAF7F2;
  --paper-2:#F1EBE0;
  --ink:#221E1A;
  --muted:#8A8178;
  --line:rgba(34,30,26,0.10);
  --radius:18px;

  /* default accent (hub/home) */
  --accent:#B8860B;
  --accent-2:#221E1A;
}

/* per-restaurant accent themes */
body.rest-sanawan{ --accent:#7A8B4F; --accent-2:#C9A227; }
body.rest-jareed{ --accent:#683918; --accent-2:#3D2410; }
body.rest-coffee{ --accent:#6F4E37; --accent-2:#B8935A; }

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  background:var(--paper); color:var(--ink);
  font-family:'IBM Plex Sans Arabic', sans-serif;
  line-height:1.7; overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
::selection{ background:var(--accent); color:#fff; }

h1,h2,h3{ font-weight:800; }
.wrap{ max-width:1080px; margin-inline:auto; padding-inline:24px; }
.eyebrow{
  font-family:'IBM Plex Mono', monospace; font-size:11px; letter-spacing:0.2em;
  text-transform:uppercase; color:var(--accent); margin-bottom:10px; display:block;
}

.reveal{ opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s ease; }
.reveal.is-visible{ opacity:1; transform:translateY(0); }

/* ---------------- HEADER ---------------- */
header{
  position:sticky; top:0; z-index:100; background:rgba(250,247,242,0.9);
  backdrop-filter:blur(10px); border-bottom:1px solid var(--line);
}
.nav-row{ display:flex; align-items:center; justify-content:space-between; padding:16px 0; }
.brand{ font-weight:800; font-size:18px; color:var(--ink); }
.brand span{ color:var(--accent); }
.nav-links{ display:flex; gap:24px; flex-wrap:wrap; }
.nav-links a{ font-size:13.5px; font-weight:600; color:var(--muted); transition:color .2s ease; }
.nav-links a:hover, .nav-links a.is-current{ color:var(--accent); }

/* ---------------- HUB HOME ---------------- */
.hub-hero{ padding:90px 0 60px; text-align:center; }
.hub-hero h1{ font-size:clamp(30px,5vw,52px); margin-bottom:16px; }
.hub-hero p{ color:var(--muted); font-size:16px; max-width:560px; margin-inline:auto; }

.rest-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; padding:20px 0 100px; }
@media(max-width:860px){ .rest-grid{ grid-template-columns:1fr; } }
.rest-card{
  border-radius:24px; overflow:hidden; border:1px solid var(--line); background:#fff;
  display:flex; flex-direction:column; transition:transform .3s ease, box-shadow .3s ease;
}
.rest-card:hover{ transform:translateY(-6px); box-shadow:0 20px 44px rgba(34,30,26,0.12); }
.rest-card-top{
  height:170px; display:flex; align-items:center; justify-content:center;
  font-size:15px; font-weight:800; letter-spacing:0.02em; color:#fff; text-align:center; padding:20px;
}
.rest-card-top img{ width:110px; height:110px; object-fit:contain; background:#fff; border-radius:50%; padding:8px; }
.rest-card.c-sanawan .rest-card-top{ background:linear-gradient(135deg,#7A8B4F,#4F5C33); }
.rest-card.c-jareed .rest-card-top{ background:linear-gradient(135deg,#8B4A22,#3D2410); }
.rest-card.c-coffee .rest-card-top{ background:linear-gradient(135deg,#6F4E37,#3B2A1E); }
.rest-card-body{ padding:22px 22px 26px; flex:1; display:flex; flex-direction:column; }
.rest-card-body h3{ font-size:19px; margin-bottom:8px; }
.rest-card-body p{ color:var(--muted); font-size:13.5px; flex:1; margin-bottom:16px; }
.rest-card-cta{
  display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:700; color:var(--accent);
}
.rest-card.c-sanawan .rest-card-cta{ color:#7A8B4F; }
.rest-card.c-jareed .rest-card-cta{ color:#683918; }
.rest-card.c-coffee .rest-card-cta{ color:#6F4E37; }

/* ---------------- RESTAURANT PAGE HERO ---------------- */
.rhero{
  position:relative; padding:80px 0 60px; text-align:center; overflow:hidden;
  background:
    radial-gradient(ellipse 60% 50% at 20% 0%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 60%),
    radial-gradient(ellipse 60% 50% at 80% 100%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 65%),
    linear-gradient(180deg, color-mix(in srgb, var(--accent) 10%, var(--paper)) 0%, var(--paper) 100%);
}
.rhero::before{
  content:''; position:absolute; inset:0; opacity:0.5; pointer-events:none;
  background-image: radial-gradient(color-mix(in srgb, var(--accent) 35%, transparent) 1px, transparent 1px);
  background-size:26px 26px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, #000 0%, transparent 75%);
}
.rhero > .wrap{ position:relative; z-index:1; }
.rhero-badge{
  width:120px; height:120px; border-radius:50%; margin:0 auto 20px; display:flex; align-items:center; justify-content:center;
  background:#fff; color:#fff; font-size:26px; font-weight:800; overflow:hidden; box-shadow:0 8px 30px rgba(0,0,0,0.1);
}
.rhero-badge img{ width:100%; height:100%; object-fit:contain; padding:6px; }
.rhero-badge.no-logo{ background:var(--accent); }
.rhero h1{ font-size:clamp(32px,5.5vw,54px); margin-bottom:14px; }
.rhero p{ color:var(--muted); font-size:15.5px; max-width:520px; margin-inline:auto; }
.rhero-tags{ display:flex; justify-content:center; gap:10px; margin-top:22px; flex-wrap:wrap; }
.rhero-tag{
  font-size:12px; font-weight:700; padding:7px 16px; border-radius:999px;
  background:#fff; border:1px solid var(--line); color:var(--accent);
}

/* ---------------- MENU (accordion) ---------------- */
.rmenu{ padding:20px 0 100px; }
.rmenu-inner{ max-width:760px; margin-inline:auto; }
.accordion-item{ border-bottom:1px solid var(--line); }
.accordion-item:first-child{ border-top:1px solid var(--line); }
.group-title{
  width:100%; background:none; border:none; cursor:pointer;
  font-size:20px; font-weight:800; padding:20px 2px; margin:0; color:var(--ink);
  display:flex; align-items:center; justify-content:space-between; gap:12px; text-align:start; font-family:inherit;
}
.group-title .count{ font-size:12px; font-weight:600; color:var(--muted); margin-inline-end:auto; margin-inline-start:10px; }
.group-title .chev{ color:var(--accent); flex-shrink:0; transition:transform .3s ease; }
.accordion-item.is-open .group-title .chev{ transform:rotate(180deg); }
.accordion-panel{ max-height:0; overflow:hidden; transition:max-height .45s ease; }
.accordion-item.is-open .accordion-panel{ max-height:3000px; }
.accordion-panel .item-list{ padding-bottom:20px; }

.item-row{
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  padding:11px 4px; border-bottom:1px dashed var(--line);
}
.item-row .name{ font-size:14.5px; font-weight:600; color:var(--ink); }
.item-row .price{
  font-family:'IBM Plex Mono', monospace; font-size:14px; font-weight:700; color:var(--accent); white-space:nowrap;
}

/* ---------------- BRANCH SELECTOR ---------------- */
.branch-select{ padding:0 0 10px; }
.branch-select-inner{ max-width:760px; margin-inline:auto; text-align:center; }
.branch-select-label{
  display:flex; align-items:center; justify-content:center; gap:10px;
  font-size:15px; font-weight:800; color:var(--ink); letter-spacing:0.01em; margin-bottom:20px;
}
.pin-pulse{ position:relative; display:inline-flex; color:var(--accent); }
.pin-ring{
  position:absolute; inset:-6px; border-radius:50%; border:2px solid var(--accent);
  animation:pinPulse 1.8s ease-out infinite;
}
@keyframes pinPulse{
  0%{ transform:scale(0.6); opacity:0.8; }
  100%{ transform:scale(1.8); opacity:0; }
}
.branch-tabs{ display:flex; justify-content:center; gap:10px; flex-wrap:wrap; margin-bottom:20px; }
.branch-tab{
  padding:10px 22px; border-radius:999px; font-size:13.5px; font-weight:700;
  background:#fff; border:1.5px solid var(--line); color:var(--muted);
  cursor:pointer; transition:all .2s ease;
}
.branch-tab.is-active{ background:var(--accent); border-color:var(--accent); color:#fff; }
.branch-info{
  display:none; align-items:center; justify-content:center; gap:10px;
  background:#fff; border:1px solid var(--line); border-radius:14px; padding:14px 22px;
  font-size:13.5px; color:var(--ink); max-width:480px; margin-inline:auto;
}
.branch-info.is-active{ display:flex; }
.branch-info svg{ color:var(--accent); flex-shrink:0; }
.branch-info a{ color:var(--accent); font-weight:700; margin-inline-start:auto; white-space:nowrap; }

/* ---------------- FOOTER ---------------- */
footer{ background:var(--ink); color:#D8D2C8; padding:50px 0 30px; text-align:center; }
.footer-links{ display:flex; justify-content:center; gap:22px; margin-bottom:18px; flex-wrap:wrap; }
.footer-links a{ font-size:13px; color:#D8D2C8; opacity:0.85; }
.footer-links a:hover{ opacity:1; color:var(--accent); }
.footer-copy{ font-size:11.5px; opacity:0.5; }
.footer-credit{ font-size:11px; opacity:0.5; margin-top:6px; }
.footer-credit a{ color:#C9A227; font-weight:600; opacity:1; }