/* =========================
FILE: styles.css
Empire State Chefs — Moodboard Luxury + B/W Nav + Sous Embed Styling
Drop-in replacement for your entire CSS
========================= */

/* -------- THEME TOKENS -------- */
:root{
    /* Moodboard palette */
    --bg: #F9F1E3;          /* cream */
    --bg2:#F3E4D0;          /* warm cream */
    --surface:#F0E3D2;      /* soft cream */
    --surface2:#D7C2AA;     /* sand */
    --taupe:#6A5540;        /* taupe */
    --espresso:#2E2218;     /* espresso */
    --charcoal:#15110B;     /* charcoal */
    --gold:#C4A373;         /* gold accent */
    --gold2:#B8925F;        /* deeper gold */
  
    --text: var(--charcoal);
    --muted: rgba(21,17,11,.70);
  
    --border: rgba(21,17,11,.12);
    --border2: rgba(21,17,11,.18);
  
    --shadow: 0 16px 44px rgba(21,17,11,.14);
    --shadow2: 0 10px 26px rgba(21,17,11,.10);
  
    --radius: 18px;
    --radius2: 24px;
  
    --max: 1120px;
    --navH: 84px;
  
    --fontA: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    --fontB: "Playfair Display", Georgia, "Times New Roman", serif;
  }
  
  /* -------- RESET / BASE -------- */
  *{ box-sizing:border-box; }
  html{ scroll-behavior:smooth; }
  body{
    margin:0;
    font-family: var(--fontA);
    color: var(--text);
    background:
      radial-gradient(1200px 650px at 18% 0%, #FFF7EB 0%, var(--bg) 56%, var(--bg2) 100%);
    line-height:1.55;
  }
  
  img{ max-width:100%; display:block; }
  a{ color:inherit; text-decoration:none; }
  .container{ width:min(var(--max), calc(100% - 40px)); margin-inline:auto; }
  
  section{ padding: 84px 0; }
  
  /* selection */
  ::selection{ background: rgba(196,163,115,.35); }
  
  /* -------- BLACK & WHITE NAV (MENU BAR) -------- */
  .site-header{
    position: sticky; top: 0; z-index: 1000;
    height: var(--navH);
    background: #fff;
    border-bottom: 2px solid #000;
    display:flex;
    align-items:center;
  }
  
  .nav{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap: 16px;
    width: 100%;
  }
  
  .brand{
    display:flex;
    flex-direction:column;
    line-height:1.05;
  }
  
  .brand-mark{
    font-family: var(--fontB);
    font-weight: 700;
    font-size: 18px;
    letter-spacing: .16em;
    color:#000;
  }
  
  .brand-sub{
    font-size: 12px;
    letter-spacing: .06em;
    color: rgba(0,0,0,.70);
  }
  .brand-sub em{
    font-family: var(--fontB);
    font-style: italic;
    font-weight: 700;
    color: #000;
  }
  
  .nav-toggle{
    display:none;
    width: 46px;
    height: 46px;
    border: 2px solid #000;
    border-radius: 14px;
    background: #fff;
    cursor:pointer;
  }
  
  .nav-toggle span{
    display:block;
    width: 18px;
    height: 2px;
    background:#000;
    margin: 5px auto;
  }
  
  .nav-links{
    display:flex;
    align-items:center;
    gap: 22px;
  }
  
  .nav-links a{
    font-weight: 800;
    color:#000;
    opacity: .92;
    transition: opacity .15s ease, text-decoration-color .15s ease;
  }
  
  .nav-links a:hover{
    opacity: 1;
    text-decoration: underline;
  }
  
  .nav-links a.active{
    opacity: 1;
    border-bottom: 2px solid #000;
    padding-bottom: 4px;
  }
  
  /* -------- BUTTONS -------- */
  .btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius: 999px;
    padding: 12px 18px;
    font-weight: 800;
    letter-spacing:.02em;
    border: 1px solid transparent;
    cursor:pointer;
    user-select:none;
    transition: transform .15s ease, box-shadow .2s ease, opacity .2s ease;
  }
  
  .btn:hover{ transform: translateY(-1px); box-shadow: var(--shadow2); }
  .btn:active{ transform: translateY(0); }
  
  .btn-lg{ padding: 14px 24px; font-size: 16px; }
  .btn-sm{ padding: 10px 14px; font-size: 13px; }
  .btn-pill{ padding: 12px 18px; }
  
  /* Default primary button for SITE (gold) */
  .btn-primary{
    background: linear-gradient(180deg, var(--gold), var(--gold2));
    color: #1A140D;
    border-color: rgba(21,17,11,.18);
  }
  .btn-primary:hover{ box-shadow: 0 18px 40px rgba(21,17,11,.18); }
  
  /* B/W nav "Book Now" button only (keep menu black/white) */
  .nav-links .btn-primary{
    background:#000;
    color:#fff;
    border: 2px solid #fff;
    box-shadow:none;
  }
  .nav-links .btn-primary:hover{
    background:#fff;
    color:#000;
    border: 2px solid #000;
    box-shadow:none;
  }
  
  .btn-light{
    background: rgba(249,241,227,.92);
    color: var(--text);
    border-color: var(--border);
  }
  
  .btn-ghost{
    background: transparent;
    color: #F9F1E3;
    border-color: rgba(196,163,115,.55);
  }
  
  /* -------- TITLES -------- */
  .section-title{
    font-weight: 900;
    letter-spacing: .20em;
    font-size: 12px;
    color: rgba(21,17,11,.78);
    margin: 0 0 26px;
    text-transform: uppercase;
  }
  .center{ text-align:center; }
  .accent{ color: var(--gold); }
  
  /* -------- HERO (VIDEO) -------- */
  .hero-video{ padding:0; }
  
  .video-wrap{
    position: relative;
    height: calc(100vh - var(--navH));
    min-height: 640px;
    overflow:hidden;
    border-bottom: 1px solid var(--border);
  }
  
  .hero-video-el{
    position:absolute; inset:0;
    width:100%; height:100%;
    object-fit:cover;
    filter: contrast(1.05) saturate(.92) brightness(.88);
  }
  
  .hero-overlay{
    position:absolute; inset:0;
    background:
      radial-gradient(900px 520px at 30% 20%, rgba(196,163,115,.20), transparent 60%),
      linear-gradient(180deg, rgba(21,17,11,.28), rgba(21,17,11,.72));
  }
  
  .hero-content{
    position:relative; z-index:2;
    height:100%;
    display:grid;
    align-content:center;
    justify-items:center;
    text-align:center;
    color:#fff;
    padding: 0 12px;
  }
  
  .hero-content h1{
    font-family: var(--fontB);
    font-weight: 700;
    font-size: clamp(40px, 4.8vw, 68px);
    line-height: 1.05;
    margin: 0 0 12px;
    letter-spacing: .01em;
    text-shadow: 0 22px 55px rgba(0,0,0,.35);
  }
  
  .italic{ font-style: italic; }
  
  .hero-sub{
    margin: 0 0 20px;
    font-size: clamp(14px, 1.5vw, 18px);
    color: rgba(255,255,255,.86);
    max-width: 760px;
  }
  
  .hero-cta{ display:flex; gap: 12px; flex-wrap:wrap; justify-content:center; }
  
  .hero-foot{
    margin: 18px 0 10px;
    font-size: 14px;
    color: rgba(255,255,255,.80);
  }
  
  /* -------- REVEAL ANIMATION -------- */
  .reveal{
    opacity:0;
    transform: translateY(18px);
    transition: opacity .70s ease, transform .70s ease;
  }
  .reveal.is-visible{
    opacity:1;
    transform: translateY(0);
  }
  
  /* -------- TESTIMONIALS -------- */
  .cards-3{
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
  }
  
  .t-card{
    background: rgba(240,227,210,.70);
    border: 1px solid var(--border);
    border-radius: var(--radius2);
    padding: 24px;
    box-shadow: var(--shadow2);
  }
  
  .t-card--highlight{
    background: rgba(249,241,227,.92);
    box-shadow: var(--shadow);
  }
  
  .stars{
    color: var(--gold);
    font-size: 18px;
    letter-spacing: 2px;
    margin-bottom: 10px;
    opacity:.95;
  }
  
  .t-card h3{
    margin: 0 0 10px;
    font-size: 20px;
    font-family: var(--fontB);
    font-weight: 700;
    color: rgba(21,17,11,.92);
  }
  
  .t-card p{
    margin: 0 0 12px;
    color: rgba(21,17,11,.85);
  }
  
  .t-author{
    margin-top: 12px;
    font-weight: 900;
    letter-spacing: .06em;
    text-transform: uppercase;
    font-size: 12px;
    color: rgba(21,17,11,.68);
  }
  
  /* -------- GALLERY -------- */
  .gallery-grid{
    display:grid;
    grid-template-columns: 1.35fr 1fr;
    gap: 16px;
    align-items: stretch;
  }
  
  .gallery-left img,
  .gallery-right img,
  .gallery-strip img{
    border-radius: var(--radius2);
    width:100%;
    object-fit: cover;
    box-shadow: var(--shadow2);
    border: 1px solid rgba(21,17,11,.10);
  }
  
  .gallery-right{ display:grid; gap: 16px; }
  
  .gallery-right-top{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }
  
  .gallery-right-top img{ height: 260px; }
  .gallery-right-bottom img{ height: 260px; }
  .gallery-left img{ height: calc(260px + 16px + 260px); }
  
  .gallery-strip{
    margin-top: 16px;
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }
  .gallery-strip img{ height: 240px; }
  
  /* -------- SIGNATURE / RATES CARD -------- */
  .signature-wrap{ display:grid; }
  
  .signature-card{
    display:grid;
    grid-template-columns: 1fr 1.25fr;
    gap: 26px;
    background: rgba(249,241,227,.92);
    border-radius: 24px;
    border: 1px solid var(--border);
    overflow:hidden;
    box-shadow: var(--shadow);
  }
  
  .signature-media{
    position:relative;
    min-height: 520px;
    background: var(--espresso);
  }
  
  .signature-media img{
    width:100%;
    height:100%;
    object-fit: cover;
    filter: contrast(1.02) saturate(.95);
  }
  
  .signature-media-overlay{
    position:absolute; inset:0;
    background:
      linear-gradient(180deg, rgba(21,17,11,.10), rgba(21,17,11,.62)),
      radial-gradient(500px 300px at 30% 20%, rgba(196,163,115,.18), transparent 60%);
    display:flex;
    align-items:flex-end;
    padding: 22px;
  }
  
  .signature-media-actions{
    display:flex;
    flex-direction:column;
    gap: 12px;
    width:100%;
  }
  
  .signature-content{ padding: 30px; }
  
  .signature-content h2{
    margin: 0 0 10px;
    font-family: var(--fontB);
    font-size: 44px;
    line-height: 1.03;
    letter-spacing: .01em;
  }
  
  .small-kicker{
    font-family: var(--fontA);
    font-size: 12px;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: rgba(21,17,11,.70);
  }
  
  .checklist{
    list-style:none;
    padding:0;
    margin: 18px 0 20px;
    display:grid;
    gap: 12px;
  }
  
  .checklist li{
    position:relative;
    padding-left: 30px;
    color: rgba(21,17,11,.86);
  }
  
  .checklist li::before{
    content:"✓";
    position:absolute;
    left:0; top:0;
    color: var(--gold);
    font-weight: 900;
  }
  
  /* Pricing block (new) */
  .pricing-list{
    display:grid;
    gap:14px;
    margin-top:12px;
  }
  .pricing-item{
    background: rgba(240,227,210,.55);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 14px 14px;
  }
  .pricing-top{
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    gap:12px;
  }
  .pricing-name{
    font-weight: 900;
    letter-spacing:.02em;
    color: var(--text);
  }
  .pricing-price{
    font-weight: 900;
    color: var(--gold);
    font-size: 30px;
    line-height:1;
    text-shadow: 0 10px 26px rgba(21,17,11,.10);
  }
  .pricing-price span{
    font-size: 14px;
    font-weight: 800;
    color: rgba(21,17,11,.65);
  }
  .pricing-sub{
    margin-top:6px;
    font-weight: 800;
    color: rgba(21,17,11,.65);
    font-size: 13px;
  }
  
  /* -------- INNER PAGES HERO -------- */
  .page-hero{
    padding: 62px 0 18px;
  }
  
  .page-hero h1{
    font-family: var(--fontB);
    font-size: clamp(34px, 4vw, 56px);
    margin: 0 0 10px;
    letter-spacing: .01em;
  }
  
  .page-hero p{
    margin:0;
    color: rgba(21,17,11,.70);
    max-width: 780px;
  }
  
  /* -------- FORMS (IF STILL USED) -------- */
  .form-card{
    background: rgba(249,241,227,.92);
    border: 1px solid var(--border);
    border-radius: 24px;
    box-shadow: var(--shadow);
    padding: 22px;
  }
  
  .form-grid{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
  }
  
  .field{ display:flex; flex-direction:column; gap: 8px; }
  
  label{
    font-weight: 900;
    color: rgba(21,17,11,.80);
    font-size: 12px;
    letter-spacing: .14em;
    text-transform: uppercase;
  }
  
  input, select, textarea{
    border: 1px solid var(--border2);
    border-radius: 14px;
    padding: 12px 12px;
    font: inherit;
    background: rgba(240,227,210,.55);
    color: var(--text);
    outline: none;
    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
  }
  
  input:focus, select:focus, textarea:focus{
    border-color: rgba(196,163,115,.70);
    box-shadow: 0 0 0 4px rgba(196,163,115,.18);
    background: rgba(249,241,227,.92);
  }
  
  textarea{ min-height: 140px; resize: vertical; }
  .full{ grid-column: 1 / -1; }
  
  .help-row{
    margin-top: 18px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap: 14px;
    flex-wrap:wrap;
    color: rgba(21,17,11,.80);
    font-weight: 800;
  }
  
  /* =================================================
  BOOKING PAGE EMBED STYLING (Sous iframe)
  Matches rest of site
  ================================================= */
  .embed-card{
    background: rgba(249,241,227,.92);
    border: 1px solid var(--border);
    border-radius: 24px;
    box-shadow: var(--shadow);
    overflow: hidden;
    position: relative;
  }
  
  /* optional subtle top sheen */
  .embed-card::before{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    background:
      radial-gradient(600px 260px at 20% 0%, rgba(196,163,115,.16), transparent 55%),
      linear-gradient(180deg, rgba(255,255,255,.20), transparent 35%);
  }
  
  #sousIframeContainer{
    position:relative;
    z-index:1;
    padding: 10px; /* creates a nice frame */
  }
  
  /* iframe sizing + look */
  #sousIframe{
    width:100%;
    border:0 !important;
    display:block;
    background: rgba(240,227,210,.55);
    border-radius: 18px;
    min-height: 980px; /* safe default */
  }
  
  /* helper block below iframe */
  .booking-help{
    margin-top: 18px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    flex-wrap:wrap;
    color: rgba(21,17,11,.80);
    font-weight: 800;
  }
  .booking-help p{ margin: 0; }
  
  /* -------- FOOTER -------- */
  .footer{
    padding: 46px 0;
    border-top: 2px solid #000; /* ties into the B/W nav */
    background: #fff;
    color:#000;
  }
  
  .footer .container{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap: 18px;
    flex-wrap:wrap;
  }
  
  .footer small{ color: rgba(0,0,0,.70); }
  
  /* -------- RESPONSIVE -------- */
  @media (max-width: 980px){
    .cards-3{ grid-template-columns: 1fr; }
    .gallery-grid{ grid-template-columns: 1fr; }
    .gallery-left img{ height: 340px; }
    .gallery-right-top img, .gallery-right-bottom img{ height: 240px; }
    .signature-card{ grid-template-columns: 1fr; }
    .signature-media{ min-height: 380px; }
    .form-grid{ grid-template-columns: 1fr; }
  }
  
  @media (max-width: 860px){
    .nav-toggle{ display:block; }
  
    .nav-links{
      position:absolute;
      top: var(--navH);
      left:0; right:0;
      background: #000; /* keep mobile menu B/W */
      border-bottom: 2px solid #000;
      display:none;
      flex-direction:column;
      padding: 16px 20px 18px;
      gap: 12px;
    }
  
    .nav-links.is-open{ display:flex; }
    .nav-links a{ color:#fff; opacity: .95; }
    .nav-links a.active{ border-bottom: 2px solid #fff; }
    .nav-links .btn-primary{
      background:#fff;
      color:#000;
      border: 2px solid #fff;
    }
    .nav-links .btn-primary:hover{
      background:#000;
      color:#fff;
      border: 2px solid #fff;
    }
  }
  
  @media (max-width: 640px){
    section{ padding: 70px 0; }
    .video-wrap{ min-height: 560px; }
    .signature-content h2{ font-size: 38px; }
  }