/* Ombré Café — IslandLuxe Theme (2025-11-21)
   Palette: Ivory #FAF7F1, Charcoal #1B1B1C, Gold #C7A23A, Leaf #169B45, Soft Border #E8E3D8
   Typography: Display serif for headings, clean sans for body
*/

@font-face{
  font-family:"Gloock";
  src:local("Gloock"), local("Times New Roman");
  font-display:swap;
}
:root{
  --ivory:#FAF7F1;
  --paper:#FFFCF5;
  --charcoal:#1B1B1C;
  --muted:#5B5B5C;
  --gold:#C7A23A;
  --leaf:#169B45;
  --border:#E8E3D8;
  --shadow:0 20px 40px rgba(27,27,28,.08);
  --radius:20px;
  --container:1160px;
}

html,body{
  background: var(--ivory);
  color: var(--charcoal);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  line-height:1.7;
}

h1,h2,h3,h4{
  font-family:"Gloock", ui-serif, Georgia, Cambria, "Times New Roman", serif;
  letter-spacing:.2px;
  color: var(--charcoal);
}

a{ color: var(--charcoal); text-decoration: none; }
a:hover{ color: var(--gold); }

.container{ max-width: var(--container); margin:0 auto; padding: 0 20px; }

header.site-header{
  position: sticky; top:0; z-index:60;
  background: rgba(250,247,241,.8); backdrop-filter: blur(10px);
  border-bottom:1px solid var(--border);
}

.navbar, .site-nav{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  min-height:72px;
}
.navbar .logo img, .site-nav .logo img{ max-height:54px; border-radius:12px; }

.navbar .menu a, .site-nav .menu a{
  padding:.6rem .95rem;
  border:1px solid transparent;
  border-radius:999px;
}
.navbar .menu a:hover{ border-color: var(--border); background: #fff; }

.btn, .button, button, input[type="submit"]{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.8rem 1.15rem; border-radius:999px; font-weight:700; cursor:pointer;
  box-shadow: var(--shadow); border: 1px solid var(--border);
  background:white; color:var(--charcoal);
}

.btn-cta, .reserve-btn, .btn-primary, a[href*="wa.me"], a[href*="api.whatsapp.com"]{
  background: var(--leaf); color:white !important; border-color: var(--leaf);
}
.btn-cta:hover{ filter: brightness(1.05); }
.btn-outline{ background:transparent; border-color: var(--gold); color: var(--gold); }
.btn-outline:hover{ background: #fff8e6; }

.hero{
  position:relative;
  background:
    radial-gradient(80% 60% at 50% 0%, #fff 0%, rgba(255,255,255,0) 55%),
    linear-gradient(180deg, rgba(199,162,58,.06), rgba(199,162,58,0));
  padding: 90px 0 56px;
}
.hero .container{ display:grid; grid-template-columns: 1.2fr 1fr; gap: 36px; align-items:center; }
.hero .media{
  background: #ffffff; border:1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow); overflow:hidden;
}
.hero .copy h1{ font-size:clamp(2rem,4vw,3.1rem); margin:0 0 .5rem; }
.hero .copy p{ color: var(--muted); margin:0 0 1.25rem; }
.hero .badges{ display:flex; gap:.6rem; flex-wrap:wrap; margin-top:.5rem; }
.badge{ border:1px dashed var(--border); padding:.35rem .65rem; border-radius:999px; color:var(--muted); font-size:.9rem; }

.section{ padding: 56px 0; border-top:1px solid var(--border); }
.section .grid{ display:grid; gap: 18px; }
.grid-3{ grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.card{
  background:#fff; border:1px solid var(--border); border-radius: var(--radius); padding:18px;
  box-shadow: var(--shadow);
}
.card .title{ font-weight:800; margin:.25rem 0 .5rem; }
.card .meta{ color: var(--muted); font-size:.92rem; }

.figure-xl img, .media img, .media video{ width:100%; height:auto; display:block; }

.list-leaf>li{ list-style:none; position:relative; padding-left:1.25rem; margin:.4rem 0; }
.list-leaf>li::before{
  content:""; position:absolute; left:0; top:.58rem; width:.6rem; height:.6rem;
  background: var(--leaf); border-radius:999px; box-shadow:0 0 0 3px rgba(22,155,69,.15);
}

.footer{
  background: #fff; border-top:1px solid var(--border); color: var(--muted); padding: 28px 0;
}
.footer a{ color: var(--charcoal); }

hr{ border:0; border-top:1px dashed var(--border); margin: 24px 0; }

img, video{ border-radius: 16px; }

.k-eeta, a[href*="keeta"], a[data-partner="keeta"]{
  border-color: #0ea5e9; color:#0ea5e9;
}
.k-eeta:hover{ background: #eef8ff; }

/* Remove any remnants of Talabat if HTML cleanup misses */
a[href*="talabat"], [class*="talabat"], [id*="talabat"]{ display:none !important; visibility:hidden !important; }