/* ==========================================================================
   TRIPOLIS SWEETS — Design System
   Espresso / Antique Gold / Cream — Lebanese pastry boutique, est. 1973
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,500&family=Montserrat:wght@300;400;500;600;700&family=Markazi+Text:wght@500;600;700&family=Tajawal:wght@400;500;700&display=swap');

:root{
  /* ---- Brand palette ---- */
  --espresso:#2C2119;
  --dark-brown:#4A3828;
  --chocolate:#5A4432;
  --gold:#B08A45;
  --light-gold:#D4B875;
  --cream:#F7F1E3;
  --ivory:#FCFAF5;
  --taupe:#CDBFA9;
  --text:#3B3027;
  --white:#FFFFFF;

  /* ---- Type ---- */
  --font-display:'Cormorant Garamond', 'Playfair Display', serif;
  --font-body:'Montserrat','Lato',sans-serif;
  --font-ar-display:'Markazi Text', serif;
  --font-ar-body:'Tajawal', sans-serif;

  --container: 1180px;
  --gap: clamp(1.5rem, 4vw, 3.5rem);
  --radius: 6px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; }
}

body{
  margin:0;
  font-family:var(--font-body);
  color:var(--text);
  background:var(--ivory);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{ font-family:var(--font-display); font-weight:600; margin:0 0 0.5em; color:var(--espresso); line-height:1.15; }
p{ margin:0 0 1em; line-height:1.75; }

.container{ width:100%; max-width:var(--container); margin:0 auto; padding:0 clamp(1.25rem, 4vw, 2.5rem); }

.arabic{ font-family:var(--font-ar-body); direction:rtl; unicode-bidi:isolate; }
.arabic-display{ font-family:var(--font-ar-display); direction:rtl; unicode-bidi:isolate; }

:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }

/* ---- Eyebrow / gold label ---- */
.eyebrow{
  display:inline-flex; align-items:center; gap:0.6em;
  font-family:var(--font-body); font-weight:600; font-size:0.72rem;
  letter-spacing:0.28em; text-transform:uppercase; color:var(--gold);
  margin-bottom:1rem; max-width:100%;
}
.eyebrow::before, .eyebrow::after{
  content:""; width:26px; height:1px; background:var(--gold); flex-shrink:0;
}
@media (max-width:600px){
  .eyebrow{ letter-spacing:0.18em; gap:0.5em; }
  .eyebrow::before, .eyebrow::after{ width:18px; }
}

/* ---- Buttons ---- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:0.5em;
  font-family:var(--font-body); font-weight:600; font-size:0.78rem;
  letter-spacing:0.14em; text-transform:uppercase;
  padding:0.95em 2em; border-radius:3px; border:1px solid transparent;
  cursor:pointer; transition:background .35s ease, color .35s ease, border-color .35s ease, transform .2s ease;
  white-space:nowrap;
}
.btn-primary{
  background:var(--espresso); color:var(--cream); border-color:var(--gold);
}
.btn-primary:hover{ background:var(--gold); color:var(--espresso); }
.btn-secondary{
  background:transparent; color:var(--dark-brown); border-color:var(--gold);
}
.btn-secondary:hover{ background:var(--gold); color:var(--espresso); }
.btn-on-dark.btn-secondary{ color:var(--cream); }
.btn-on-dark.btn-secondary:hover{ background:var(--gold); color:var(--espresso); }
.btn-row{ display:flex; flex-wrap:wrap; gap:1rem; }

/* ---- Divider ---- */
.divider{
  width:64px; height:2px; margin:0 0 1.75rem;
  background:linear-gradient(90deg, var(--gold), var(--light-gold));
}
.divider.center{ margin-left:auto; margin-right:auto; }

.pattern-rule{
  height:34px;
  background-image:url("../images/pattern.svg");
  background-repeat:repeat-x;
  background-size:60px 60px;
  background-position:center;
  opacity:0.55;
}

/* ==========================================================================
   HEADER / NAV
   ========================================================================== */
.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(44,33,25,0.97);
  border-bottom:1px solid rgba(176,138,69,0.35);
  backdrop-filter:saturate(140%) blur(6px);
}
.nav-wrap{
  display:flex; align-items:center; justify-content:space-between;
  gap:1.25rem; padding-top:0.7rem; padding-bottom:0.7rem;
}
.brand{ display:flex; align-items:center; gap:0.75rem; flex-shrink:0; }
.brand-mark{ width:46px; height:46px; border-radius:50%; }
.brand-text{ display:flex; flex-direction:column; line-height:1.1; }
.brand-en{ font-family:var(--font-display); font-weight:600; font-size:1.28rem; color:var(--ivory); letter-spacing:0.02em; }
.brand-ar{ font-family:var(--font-ar-body); font-size:0.78rem; color:var(--light-gold); margin-top:2px; }

.main-nav{ display:flex; gap:2.1rem; margin:0 auto; }
.main-nav a{
  font-size:0.78rem; font-weight:600; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--cream); position:relative; padding:0.4em 0;
}
.main-nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:var(--gold); transform:scaleX(0); transform-origin:right;
  transition:transform .35s ease;
}
.main-nav a:hover::after, .main-nav a.active::after{ transform:scaleX(1); transform-origin:left; }
.main-nav a.active{ color:var(--light-gold); }

.nav-cta{ flex-shrink:0; }

.nav-call{
  display:none; align-items:center; justify-content:center;
  width:40px; height:40px; border:1px solid rgba(176,138,69,0.5);
  border-radius:3px; flex-shrink:0; transition:background .3s ease, border-color .3s ease;
}
.nav-call svg{ width:18px; height:18px; fill:var(--cream); }
.nav-call:hover, .nav-call:focus-visible{ background:var(--gold); border-color:var(--gold); }
.nav-call:hover svg, .nav-call:focus-visible svg{ fill:var(--espresso); }
.nav-actions{ display:flex; align-items:center; gap:0.6rem; flex-shrink:0; }

.hamburger{
  display:none; flex-direction:column; justify-content:center; gap:5px;
  width:40px; height:40px; background:none; border:1px solid rgba(176,138,69,0.5);
  border-radius:3px; cursor:pointer; padding:0;
}
.hamburger span{ display:block; width:18px; height:1.5px; background:var(--cream); margin:0 auto; transition:transform .3s ease, opacity .3s ease; }
.hamburger[aria-expanded="true"] span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
.hamburger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.hamburger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }

@media (max-width:900px){
  .main-nav{
    position:absolute; top:100%; left:0; right:0;
    background:var(--espresso); flex-direction:column; gap:0;
    max-height:0; overflow:hidden; transition:max-height .4s ease;
    border-bottom:1px solid rgba(176,138,69,0.35);
  }
  .main-nav.open{ max-height:400px; }
  .main-nav a{ padding:1rem clamp(1.25rem,4vw,2.5rem); border-top:1px solid rgba(176,138,69,0.15); }
  .main-nav a::after{ display:none; }
  .nav-cta{ display:none; }
  .nav-call{ display:flex; }
  .hamburger{ display:flex; }
}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{
  position:relative; min-height:88vh; display:flex; align-items:center;
  background-size:cover; background-position:center;
  color:var(--ivory); overflow:hidden;
}
.hero::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(20,15,10,0.55) 0%, rgba(20,15,10,0.62) 45%, rgba(20,15,10,0.88) 100%);
}
.hero-inner{ position:relative; z-index:2; text-align:center; margin:0 auto; padding:6rem 1.5rem; }
.hero-mark{ width:64px; height:64px; margin:0 auto 1.75rem; opacity:0.95; }
.hero-ar{ font-family:var(--font-ar-display); font-size:clamp(1.6rem,3vw,2.2rem); color:var(--light-gold); margin-bottom:0.6rem; }
.hero h1{
  color:var(--ivory); font-size:clamp(2.6rem,6vw,4.6rem); letter-spacing:0.01em; margin-bottom:0.5rem;
}
.hero-tagline{
  font-family:var(--font-body); font-weight:600; letter-spacing:0.24em; text-transform:uppercase;
  font-size:clamp(0.72rem,1.4vw,0.85rem); color:var(--light-gold); margin-bottom:1.6rem;
}
.hero-sub{
  font-family:var(--font-display); font-style:italic; font-size:clamp(1.15rem,2vw,1.5rem);
  color:var(--taupe); margin-bottom:2.4rem;
}
.hero .btn-row{ justify-content:center; }

.page-hero{
  position:relative; min-height:46vh; display:flex; align-items:center; justify-content:center;
  background-size:cover; background-position:center; color:var(--ivory); text-align:center;
}
.page-hero::before{ content:""; position:absolute; inset:0; background:rgba(28,20,14,0.68); }
.page-hero-inner{ position:relative; z-index:2; padding:5rem 1.5rem 3.5rem; }
.page-hero .eyebrow{ justify-content:center; color:var(--light-gold); }
.page-hero .eyebrow::before, .page-hero .eyebrow::after{ background:var(--light-gold); }
.page-hero h1{ color:var(--ivory); font-size:clamp(2.4rem,5vw,3.6rem); }
.page-hero .ar-line{ font-family:var(--font-ar-display); color:var(--taupe); font-size:1.4rem; margin-top:0.35rem; }

/* ==========================================================================
   SECTIONS (generic)
   ========================================================================== */
section{ padding:clamp(4rem,8vw,7rem) 0; }
.section-cream{ background:var(--cream); }
.section-ivory{ background:var(--ivory); }
.section-dark{ background:var(--espresso); color:var(--cream); }
.section-dark h2, .section-dark h3{ color:var(--ivory); }
.section-head{ max-width:680px; margin-bottom:3rem; }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
.section-head h2{ font-size:clamp(2rem,4vw,2.9rem); }
.section-sub{ font-family:var(--font-body); color:var(--chocolate); font-size:1.02rem; }
.section-dark .section-sub{ color:var(--taupe); }

/* ---- Intro two-column ---- */
.split{
  display:grid; grid-template-columns:1fr 1fr; gap:var(--gap); align-items:center;
}
.split img{ border-radius:var(--radius); box-shadow:0 20px 50px -20px rgba(44,33,25,0.45); }
.split-text .divider{ margin-top:1.5rem; }
@media (max-width:860px){ .split{ grid-template-columns:1fr; } }
.split.reverse .split-media{ order:2; }
@media (max-width:860px){ .split.reverse .split-media{ order:0; } }

/* ---- Category tiles ---- */
.category-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1.75rem; }
@media (max-width:760px){ .category-grid{ grid-template-columns:1fr; } }
.category-card{
  position:relative; border-radius:var(--radius); overflow:hidden; min-height:380px;
  display:flex; align-items:flex-end; background:var(--dark-brown);
}
.category-card img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .8s ease; }
.category-card:hover img{ transform:scale(1.06); }
.category-card::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(30,22,16,0.05) 30%, rgba(20,14,10,0.92) 100%);
  z-index:1;
}
.category-card-body{ position:relative; z-index:2; padding:2.25rem; color:var(--ivory); }
.category-card .cat-ar{ font-family:var(--font-ar-display); color:var(--light-gold); font-size:1.5rem; }
.category-card h3{ color:var(--ivory); font-size:2rem; margin:0.15rem 0 0.6rem; }
.category-card p{ color:var(--taupe); margin-bottom:1rem; font-size:0.92rem; }

/* ---- Editorial gallery ---- */
.gallery{ display:grid; grid-template-columns:repeat(6,1fr); gap:1.5rem; }
.gallery-item{ position:relative; border-radius:var(--radius); overflow:hidden; }
.gallery-item img{ width:100%; height:100%; object-fit:cover; transition:transform .7s ease; }
.gallery-item:hover img{ transform:scale(1.05); }
.gallery-item .cap{
  position:absolute; left:0; right:0; bottom:0; padding:1.1rem 1.25rem;
  background:linear-gradient(0deg, rgba(20,14,10,0.85), transparent);
  color:var(--ivory); font-family:var(--font-display); font-size:1.15rem; letter-spacing:0.01em;
}
.gallery-item.g-wide{ grid-column:span 4; aspect-ratio:16/11; }
.gallery-item.g-tall{ grid-column:span 2; grid-row:span 2; aspect-ratio:9/16; }
.gallery-item.g-sq{ grid-column:span 2; aspect-ratio:1/1; }
.gallery-item.g-full{ grid-column:span 6; aspect-ratio:21/9; }
@media (max-width:860px){
  .gallery{ grid-template-columns:repeat(2,1fr); }
  .gallery-item.g-wide, .gallery-item.g-tall, .gallery-item.g-sq, .gallery-item.g-full{ grid-column:span 2; grid-row:auto; aspect-ratio:4/3; }
}

/* ---- Product cards (menu pages) ---- */
.product-section + .product-section{ border-top:1px solid rgba(176,138,69,0.25); }
.product-section{ padding:clamp(3rem,6vw,5rem) 0; }
.product-section-head{ display:flex; align-items:baseline; justify-content:space-between; gap:1.5rem; margin-bottom:2.5rem; flex-wrap:wrap; }
.product-section-head h2{ font-size:clamp(1.8rem,3vw,2.4rem); margin-bottom:0.15rem; }
.product-section-head .ar{ font-family:var(--font-ar-display); color:var(--gold); font-size:1.5rem; }

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

.product-card{
  background:var(--ivory); border:1px solid rgba(176,138,69,0.3); border-radius:var(--radius);
  overflow:hidden; transition:transform .3s ease, box-shadow .3s ease;
}
.product-card:hover{ transform:translateY(-4px); box-shadow:0 20px 40px -24px rgba(44,33,25,0.4); }
.product-card .pc-media{ aspect-ratio:4/3; overflow:hidden; background:var(--taupe); }
.product-card .pc-media img{ width:100%; height:100%; object-fit:cover; }
.product-card.no-photo .pc-media{
  display:flex; align-items:center; justify-content:center; background:var(--dark-brown);
}
.product-card.no-photo .pc-media .ph-ar{ font-family:var(--font-ar-display); color:var(--light-gold); font-size:2rem; }
.pc-body{ padding:1.4rem 1.5rem 1.6rem; }
.pc-body .pc-ar{ font-family:var(--font-ar-body); color:var(--gold); font-size:0.85rem; display:block; margin-bottom:0.15rem; }
.pc-body h4{ font-size:1.28rem; margin-bottom:0.4rem; }
.pc-body p{ font-size:0.9rem; color:var(--chocolate); margin-bottom:0; }

/* ---- Simple list rows (for items without photos, denser) ---- */
.item-list{ display:grid; grid-template-columns:1fr 1fr; gap:0 3rem; }
@media (max-width:760px){ .item-list{ grid-template-columns:1fr; } }
.item-row{ display:flex; justify-content:space-between; align-items:baseline; gap:1rem; padding:1.1rem 0; border-bottom:1px dashed rgba(176,138,69,0.4); }
.item-row .it-name{ font-family:var(--font-display); font-size:1.2rem; color:var(--espresso); }
.item-row .it-ar{ font-family:var(--font-ar-body); color:var(--gold); font-size:0.95rem; white-space:nowrap; }

/* ---- Featured banner (petit four / manakeesh style spotlight) ---- */
.spotlight{
  display:grid; grid-template-columns:1fr 1fr; gap:0; border-radius:var(--radius); overflow:hidden;
  background:var(--dark-brown);
}
.spotlight img{ width:100%; height:100%; object-fit:cover; min-height:320px; }
.spotlight-body{ padding:clamp(2.25rem,4vw,3.5rem); color:var(--ivory); display:flex; flex-direction:column; justify-content:center; }
.spotlight-body h3{ color:var(--ivory); font-size:clamp(1.8rem,3vw,2.6rem); }
.spotlight-body .sp-ar{ font-family:var(--font-ar-display); color:var(--light-gold); font-size:1.6rem; margin-bottom:0.3rem; }
.spotlight-body p{ color:var(--taupe); }
@media (max-width:800px){ .spotlight{ grid-template-columns:1fr; } .spotlight img{ min-height:260px; } }

/* ---- Story / heritage block ---- */
.story-block{ max-width:760px; margin:0 auto; text-align:center; }
.story-block p{ font-size:1.08rem; color:var(--chocolate); }
.story-quote{
  font-family:var(--font-display); font-style:italic; font-size:clamp(1.3rem,2.4vw,1.7rem);
  color:var(--espresso); line-height:1.5; margin:2rem 0;
}

/* ---- Visit / contact ---- */
.visit-grid{ display:grid; grid-template-columns:1.05fr 0.95fr; gap:var(--gap); align-items:start; }
@media (max-width:900px){ .visit-grid{ grid-template-columns:1fr; } }
.info-card{
  background:var(--espresso); color:var(--ivory); border-radius:var(--radius);
  padding:clamp(2rem,4vw,2.75rem); border:1px solid rgba(176,138,69,0.4);
}
.info-card h3{ color:var(--ivory); font-size:1.5rem; }
.info-card .ar{ font-family:var(--font-ar-display); color:var(--light-gold); font-size:1.3rem; }
.info-line{ display:flex; gap:0.9rem; padding:0.9rem 0; border-top:1px solid rgba(176,138,69,0.25); }
.info-line:first-of-type{ border-top:none; margin-top:1.25rem; }
.info-line .label{ font-weight:600; letter-spacing:0.08em; text-transform:uppercase; font-size:0.72rem; color:var(--gold); min-width:78px; padding-top:0.15em; }
.info-line a{ color:var(--ivory); }
.info-line a:hover{ color:var(--light-gold); }
.hours-table{ width:100%; border-collapse:collapse; font-size:0.92rem; }
.hours-table td{ padding:0.35rem 0; border-top:1px solid rgba(176,138,69,0.2); }
.hours-table tr:first-child td{ border-top:none; }
.hours-table td:last-child{ text-align:right; color:var(--taupe); }
.hours-table td.day{ color:var(--ivory); font-weight:500; }

.map-wrap{ border-radius:var(--radius); overflow:hidden; border:1px solid rgba(176,138,69,0.3); }
.map-wrap iframe{ width:100%; height:420px; border:0; display:block; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer{ background:var(--espresso); color:var(--taupe); }
.footer-top{ padding-top:clamp(3rem,6vw,4.5rem); padding-bottom:2.5rem; }
.footer-grid{ display:grid; grid-template-columns:1.3fr 0.8fr 1fr; gap:2.5rem; }
@media (max-width:800px){ .footer-grid{ grid-template-columns:1fr; gap:2.25rem; } }
.footer-brand{ display:flex; align-items:center; gap:0.85rem; margin-bottom:1rem; }
.footer-brand img{ width:50px; height:50px; border-radius:50%; }
.footer-brand-text .fen{ font-family:var(--font-display); font-size:1.35rem; color:var(--ivory); }
.footer-brand-text .far{ font-family:var(--font-ar-body); font-size:0.85rem; color:var(--light-gold); }
.footer-tag{ font-size:0.78rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--gold); margin-bottom:1rem; }
.footer-addr{ font-size:0.92rem; line-height:1.7; }
.footer-col h5{ font-family:var(--font-body); font-weight:600; letter-spacing:0.14em; text-transform:uppercase; font-size:0.72rem; color:var(--gold); margin-bottom:1.1rem; }
.footer-col ul li{ margin-bottom:0.7rem; font-size:0.92rem; }
.footer-col a:hover{ color:var(--light-gold); }
.footer-social{ display:flex; gap:0.75rem; margin-top:1.25rem; }
.footer-social a{
  width:38px; height:38px; border:1px solid rgba(176,138,69,0.5); border-radius:50%;
  display:flex; align-items:center; justify-content:center; transition:background .3s ease, border-color .3s ease;
}
.footer-social a:hover{ background:var(--gold); border-color:var(--gold); }
.footer-social svg{ width:16px; height:16px; fill:var(--cream); }
.footer-bottom{
  border-top:1px solid rgba(176,138,69,0.2); padding:1.5rem 0; text-align:center;
  font-size:0.8rem; letter-spacing:0.03em; color:var(--taupe);
}

/* ==========================================================================
   REVEAL ANIMATION
   ========================================================================== */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .8s ease, transform .8s ease; }
.reveal.is-visible{ opacity:1; transform:none; }

/* ==========================================================================
   UTIL
   ========================================================================== */
.text-center{ text-align:center; }
.mt-lg{ margin-top:3rem; }
.tel-link{ white-space:nowrap; }