/*
Theme Name: Rosemary's Cuisine
Theme URI: https://example.com
Author: Rosemary's Cuisine
Author URI: https://example.com
Description: A bespoke one-page theme for Rosemary's Cuisine, an Afro Italian cafe & takeaway. Black & gold palette matching the shopfront signage, featuring real food photography, an editable menu and gallery, and a visit-us section. Built as a classic (PHP template) WordPress theme.
Version: 1.2
Requires at least: 6.0
Requires PHP: 7.4
Tested up to: 6.6
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: rosemarys-cuisine
*/

:root{
    --black:#141210;
    --panel:#1B1815;
    --gold:#C9A24B;
    --gold-soft:#E4CE94;
    --cream:#F6F1E7;
    --line:rgba(201,162,75,0.35);
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  body{ background:var(--cream); color:var(--black); font-family:'Jost', sans-serif; -webkit-font-smoothing:antialiased; }
  .serif{ font-family:'Cormorant Garamond', serif; }
  a{ color:inherit; text-decoration:none; }
  img,svg{ max-width:100%; display:block; }
  .wrap{ max-width:1140px; margin:0 auto; padding:0 28px; }

  header{ background:var(--black); padding:18px 0; border-bottom:4px solid var(--gold); }
  .signbar{ border:2px solid var(--gold); border-radius:2px; padding:22px 34px; }
  .signbar-top{ display:flex; align-items:center; gap:26px; justify-content:space-between; flex-wrap:wrap; }
  .brand{ display:flex; align-items:center; gap:22px; }
  .monogram{ width:70px; height:70px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
  .monogram img{ width:100%; height:100%; object-fit:contain; }
  .brand-text .name{ font-family:'Cormorant Garamond', serif; font-size:38px; color:var(--gold-soft); line-height:1; }
  .signbar-divider{ height:1px; background:var(--gold); opacity:0.35; margin:20px 0 16px; }
  .signbar-details{ display:flex; justify-content:center; align-items:baseline; gap:14px; flex-wrap:wrap; font-size:12.5px; letter-spacing:0.05em; color:var(--gold); text-align:center; }
  .signbar-details .sep{ opacity:0.45; }
  nav{ display:flex; gap:26px; align-items:center; }
  nav a{ font-size:12px; letter-spacing:0.12em; text-transform:uppercase; color:var(--gold-soft); font-weight:500; }
  nav a:hover{ color:var(--gold); }
  @media(max-width:860px){ nav{ display:none; } }

  /* HERO — real plated dish photo */
  .hero{ background:var(--black); color:var(--cream); padding:80px 0 100px; position:relative; overflow:hidden; }
  .hero::before{ content:''; position:absolute; inset:0; background-image: radial-gradient(circle at 1px 1px, rgba(201,162,75,0.10) 1px, transparent 0); background-size:22px 22px; opacity:0.5; }
  .hero-inner{ position:relative; display:grid; grid-template-columns:1.05fr 0.95fr; gap:60px; align-items:center; }
  @media(max-width:900px){ .hero-inner{ grid-template-columns:1fr; } }
  .hero-copy .eyebrow{ font-size:12px; letter-spacing:0.28em; text-transform:uppercase; color:var(--gold); margin-bottom:20px; }
  .hero-copy h1{ font-family:'Cormorant Garamond', serif; font-weight:500; font-size:52px; line-height:1.1; color:var(--cream); margin-bottom:26px; }
  .hero-copy h1 em{ font-style:italic; color:var(--gold-soft); }
  .hero-copy p{ font-size:16px; line-height:1.75; color:rgba(246,241,231,0.72); max-width:460px; margin-bottom:36px; }
  .hero-actions{ display:flex; gap:16px; flex-wrap:wrap; }
  .btn-gold{ background:var(--gold); color:var(--black); padding:15px 30px; border-radius:2px; font-size:12.5px; font-weight:600; letter-spacing:0.1em; text-transform:uppercase; display:inline-block; }
  .btn-outline{ border:1px solid var(--gold); color:var(--gold-soft); padding:15px 30px; border-radius:2px; font-size:12.5px; font-weight:600; letter-spacing:0.1em; text-transform:uppercase; display:inline-block; }

  .hero-photo-frame{ position:relative; display:flex; align-items:center; justify-content:center; }
  .hero-photo-ring{ position:absolute; width:420px; height:420px; border:1px solid var(--line); border-radius:50%; }
  .hero-photo-ring.small{ width:340px; height:340px; }
  .hero-photo{
    width:320px; height:320px; border-radius:50%; object-fit:cover; object-position:center 30%;
    border:3px solid var(--gold); box-shadow:0 30px 60px rgba(0,0,0,0.55);
    position:relative; z-index:2;
  }
  .hero-photo-tag{
    position:absolute; bottom:-6px; left:50%; transform:translateX(-50%); z-index:3;
    background:var(--gold); color:var(--black); font-size:11px; letter-spacing:0.08em; text-transform:uppercase;
    font-weight:700; padding:8px 18px; border-radius:20px; white-space:nowrap;
  }

  .details-strip{ background:var(--panel); padding:26px 0; border-bottom:1px solid var(--line); }
  .details-row{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:18px; color:var(--gold-soft); font-size:13px; letter-spacing:0.03em; }
  .details-row div{ display:flex; align-items:center; gap:10px; }

  .section{ padding:96px 0; }
  .section-head{ text-align:center; max-width:560px; margin:0 auto 56px; }
  .section-head .eyebrow{ font-size:12px; letter-spacing:0.26em; text-transform:uppercase; color:var(--gold); margin-bottom:14px; }
  .section-head h2{ font-family:'Cormorant Garamond', serif; font-size:38px; font-weight:500; }

  /* ABOUT — real photo instead of illustration */
  .about{ background:var(--cream); }
  .about-grid{ display:grid; grid-template-columns:0.9fr 1.1fr; gap:60px; align-items:center; }
  @media(max-width:900px){ .about-grid{ grid-template-columns:1fr; } }
  .about-frame{ aspect-ratio:4/5; border:1px solid var(--gold); padding:18px; position:relative; }
  .about-frame-inner{ width:100%; height:100%; overflow:hidden; position:relative; }
  .about-frame-inner img{ width:100%; height:100%; object-fit:cover; }
  .about-copy p{ font-size:15.5px; line-height:1.85; color:#332c22; margin-bottom:18px; max-width:480px; }
  .about-copy .signature{ font-family:'Cormorant Garamond', serif; font-style:italic; font-size:24px; color:var(--gold); margin-top:10px; }

  /* MENU — elegant text list matching the printed flyer's categories & prices */
  .menu{ background:var(--black); color:var(--cream); }
  .menu .section-head h2{ color:var(--gold-soft); }
  .menu-flow{ column-count:2; column-gap:70px; }
  @media(max-width:800px){ .menu-flow{ column-count:1; } }
  .menu-group{ margin-bottom:44px; break-inside:avoid; }
  .menu-group:last-child{ margin-bottom:0; }
  .menu-group h3{ font-family:'Cormorant Garamond', serif; font-size:24px; color:var(--gold); letter-spacing:0.03em; margin-bottom:18px; text-transform:uppercase; }
  .menu-item{ display:flex; justify-content:space-between; gap:14px; align-items:baseline; border-bottom:1px dotted rgba(201,162,75,0.25); padding:10px 0; }
  .menu-item .mi-name{ font-size:15px; color:rgba(246,241,231,0.88); }
  .menu-item .mi-price{ font-family:'Cormorant Garamond', serif; font-size:18px; color:var(--gold); white-space:nowrap; }
  .menu-more{ text-align:center; margin-top:50px; font-size:13px; color:rgba(246,241,231,0.55); letter-spacing:0.04em; }
  .menu-more a{ color:var(--gold-soft); text-decoration:underline; text-underline-offset:3px; }

  /* GALLERY — real photography */
  .gallery{ background:var(--cream); }
  .gallery-grid{ display:grid; grid-template-columns:repeat(6,1fr); grid-auto-rows:150px; gap:14px; }
  @media(max-width:900px){ .gallery-grid{ grid-template-columns:repeat(2,1fr); grid-auto-rows:180px; } }
  .gallery-card{ position:relative; border-radius:4px; overflow:hidden; box-shadow:0 14px 30px rgba(20,18,16,0.14); }
  .gallery-card img{ width:100%; height:100%; object-fit:cover; transition:transform .4s ease; }
  .gallery-card:hover img{ transform:scale(1.06); }
  .gallery-card .g-label{
    position:absolute; left:0; right:0; bottom:0; padding:14px 16px 10px;
    background:linear-gradient(to top, rgba(20,18,16,0.85), transparent);
    color:#fff; font-family:'Cormorant Garamond', serif; font-size:15px;
  }
  .g-span-2{ grid-column:span 2; }
  .g-row-2{ grid-row:span 2; }
  @media(max-width:900px){ .g-span-2{ grid-column:span 1; } .g-row-2{ grid-row:span 1; } }

  .strip{ background:var(--gold); padding:70px 0; }
  .strip-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:30px; text-align:center; }
  @media(max-width:760px){ .strip-grid{ grid-template-columns:1fr; } }
  .strip-item .num{ font-family:'Cormorant Garamond', serif; font-size:44px; color:var(--black); }
  .strip-item .lbl{ font-size:12px; letter-spacing:0.14em; text-transform:uppercase; color:#3a2f14; margin-top:8px; }

  .visit{ background:var(--cream); }
  .visit-grid{ display:grid; grid-template-columns:1fr 1fr; gap:50px; align-items:center; }
  @media(max-width:900px){ .visit-grid{ grid-template-columns:1fr; } }
  .visit-card{ background:var(--black); color:var(--cream); padding:44px; border:1px solid var(--gold); }
  .visit-card h3{ font-family:'Cormorant Garamond', serif; font-size:26px; color:var(--gold-soft); margin-bottom:20px; }
  .visit-card .row{ display:flex; gap:14px; margin-bottom:16px; font-size:14px; color:rgba(246,241,231,0.8); }
  .visit-card .row b{ color:var(--gold-soft); display:block; font-weight:500; margin-bottom:2px; }
  .map-panel{ aspect-ratio:1/1; border:1px solid var(--line); background: repeating-linear-gradient(0deg, #e9e0cb 0 1px, transparent 1px 42px), repeating-linear-gradient(90deg, #e9e0cb 0 1px, transparent 1px 42px), #f1e9d5; position:relative; }
  .map-panel .pin{ position:absolute; left:50%; top:46%; width:26px; height:26px; border-radius:50% 50% 50% 0; background:var(--gold); transform:translate(-50%,-100%) rotate(-45deg); box-shadow:0 6px 14px rgba(0,0,0,0.25); }
  .map-panel iframe{ width:100%; height:100%; border:0; display:block; filter:grayscale(0.25) sepia(0.12); }

  footer{ background:var(--panel); color:var(--gold-soft); padding:56px 0 30px; text-align:center; }
  .foot-brand{ font-family:'Cormorant Garamond', serif; font-style:italic; font-size:26px; margin-bottom:18px; }
  .foot-nav{ display:flex; justify-content:center; gap:26px; flex-wrap:wrap; margin-bottom:22px; }
  .foot-nav a{ font-size:11.5px; letter-spacing:0.1em; text-transform:uppercase; opacity:0.8; }
  .foot-nav a:hover{ opacity:1; }
  footer .copy{ font-size:11px; opacity:0.45; margin-top:20px; letter-spacing:0.04em; }

footer.site-footer{ background:var(--panel); color:var(--gold-soft); padding:56px 0 30px; text-align:center; }
.foot-brand{ font-family:'Cormorant Garamond', serif; font-style:italic; font-size:26px; margin-bottom:18px; }
.foot-nav ul{ list-style:none; display:flex; justify-content:center; gap:26px; flex-wrap:wrap; margin-bottom:22px; }
.foot-nav a{ font-size:11.5px; letter-spacing:0.1em; text-transform:uppercase; opacity:0.8; }
.foot-nav a:hover{ opacity:1; }
footer .copy{ font-size:11px; opacity:0.45; margin-top:20px; letter-spacing:0.04em; }

nav.primary-nav ul{ list-style:none; display:flex; gap:26px; align-items:center; flex-wrap:wrap; }

.screen-reader-text{ position:absolute !important; clip:rect(1px,1px,1px,1px); width:1px; height:1px; overflow:hidden; }
a:focus-visible, button:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }
@media (prefers-reduced-motion: reduce){ *{ transition:none !important; } }

/* --- Menu slider (added: pages through menu sections horizontally) --- */
.menu-slider{ position:relative; overflow:hidden; }
.menu-slider-track{ display:flex; transition:transform 0.4s ease; }
.menu-slide{ min-width:100%; box-sizing:border-box; }
.menu-slider-prev, .menu-slider-next{
  position:absolute; top:50%; transform:translateY(-50%);
  width:38px; height:38px; border-radius:50%;
  background:transparent; border:1px solid var(--gold); color:var(--gold-soft);
  font-size:16px; cursor:pointer; z-index:2;
}
.menu-slider-prev:hover, .menu-slider-next:hover{ background:var(--gold); color:var(--black); }
.menu-slider-prev{ left:-6px; }
.menu-slider-next{ right:-6px; }
@media(max-width:800px){
  .menu-slider-prev{ left:-2px; }
  .menu-slider-next{ right:-2px; }
}
.menu-slider-dots{ display:flex; justify-content:center; gap:8px; margin-top:30px; }
.menu-slider-dot{ width:8px; height:8px; border-radius:50%; background:var(--line); border:none; cursor:pointer; padding:0; }
.menu-slider-dot.active{ background:var(--gold); }

/* --- Grand Opening lead magnet popup --- */
.lead-magnet-overlay{
  position:fixed; inset:0; z-index:9999;
  background:rgba(4,10,6,0.82);
  display:flex; align-items:center; justify-content:center;
  padding:20px;
  transition:opacity 0.4s ease;
}
.lead-magnet-overlay.is-hidden{ opacity:0; pointer-events:none; }
.lead-magnet-box{
  position:relative;
  max-width:420px; width:100%;
  max-height:90vh;
  animation: leadMagnetIn 0.35s ease;
}
.lead-magnet-box img{
  width:100%; height:auto; max-height:90vh; object-fit:contain;
  border-radius:10px;
  box-shadow:0 20px 60px rgba(0,0,0,0.5);
  display:block;
}
.lead-magnet-close{
  position:absolute; top:-14px; right:-14px;
  width:36px; height:36px; border-radius:50%;
  background:var(--gold); color:var(--black);
  border:none; font-size:22px; line-height:1;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
}
.lead-magnet-close:hover{ background:var(--gold-soft); }
@keyframes leadMagnetIn{
  from{ opacity:0; transform:scale(0.95); }
  to{ opacity:1; transform:scale(1); }
}