/* ============================================================
   The Marina Bar — design system
   Waterfront / Sutton Harbour. Deep teal water + brass evening light.
   All colour & type decisions live in :root — retune the whole site here.
   ============================================================ */

:root{
  /* Palette */
  --c-deep:    #0E2A35;   /* near-black harbour water */
  --c-teal:    #16424F;   /* harbour teal — dark sections */
  --c-teal-2:  #1E5A6B;   /* mid water */
  --c-brass:   #C9A24A;   /* brass / evening light — accent */
  --c-brass-2: #E2C275;   /* lighter brass — hover */
  --c-paper:   #F5F2E9;   /* warm sea-paper — page bg */
  --c-paper-2: #ECE7D8;   /* slightly deeper paper */
  --c-mist:    #DDE5E4;   /* misty stone */
  --c-ink:     #142A31;   /* body ink on light */
  --c-ink-soft:#4C6168;   /* muted text */
  --c-line:    rgba(20,42,49,.14);

  /* Type */
  --font-display: "Fraunces", Georgia, serif;
  --font-body: "Mulish", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Rhythm */
  --section-y: clamp(3.5rem, 8vw, 7rem);
  --radius: 14px;
  --shadow: 0 18px 50px -24px rgba(14,42,53,.55);
  --header-h: 76px;
}

*{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation:none !important; transition:none !important; }
}

body{
  font-family:var(--font-body);
  color:var(--c-ink);
  background:var(--c-paper);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

h1,h2,h3,h4,.display-font{ font-family:var(--font-display); font-weight:600; line-height:1.08; letter-spacing:-.01em; }

a{ color:var(--c-teal-2); text-decoration-thickness:1px; text-underline-offset:3px; }
a:hover{ color:var(--c-teal); }

img{ max-width:100%; height:auto; }

.skip-link{
  position:absolute; top:.5rem; left:.5rem; z-index:2000;
  background:var(--c-deep); color:#fff; padding:.5rem .9rem; border-radius:8px;
}

/* ---------- Signature: the waterline rule ---------- */
.waterline{
  height:2px; width:100%;
  background:linear-gradient(90deg, transparent, var(--c-brass) 18%, var(--c-brass) 82%, transparent);
  position:relative; opacity:.85;
}
.eyebrow{
  display:inline-flex; align-items:center; gap:.6rem;
  font-family:var(--font-body); font-weight:700;
  text-transform:uppercase; letter-spacing:.18em; font-size:.74rem;
  color:var(--c-brass); margin:0 0 1rem;
}
.eyebrow::before{
  content:""; width:34px; height:2px; background:currentColor; display:inline-block;
}
.section-dark .eyebrow{ color:var(--c-brass-2); }

/* ---------- Buttons ---------- */
.btn{ font-family:var(--font-body); font-weight:700; letter-spacing:.01em; border-radius:999px; padding:.7rem 1.5rem; }
.btn-brass{ background:var(--c-brass); border:none; color:var(--c-deep); }
.btn-brass:hover{ background:var(--c-brass-2); color:var(--c-deep); }
.btn-outline-deep{ border:1.5px solid var(--c-deep); color:var(--c-deep); background:transparent; }
.btn-outline-deep:hover{ background:var(--c-deep); color:#fff; }
.btn-ghost-light{ border:1.5px solid rgba(255,255,255,.55); color:#fff; background:transparent; }
.btn-ghost-light:hover{ background:#fff; color:var(--c-deep); border-color:#fff; }

/* ============================================================
   Header / Nav
   ============================================================ */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:1030;
  transition:background .35s ease, box-shadow .35s ease, padding .35s ease;
  padding:.4rem 0;
}
.site-header .navbar{ padding:.4rem 0; }
.navbar-brand{ display:flex; align-items:center; gap:.6rem; }
.brand-mark{
  width:14px; height:14px; border-radius:50%;
  background:var(--c-brass); box-shadow:0 0 0 4px rgba(201,162,74,.25);
}
.brand-text{ font-family:var(--font-display); font-weight:600; font-size:1.3rem; color:#fff; letter-spacing:-.01em; }

.site-header .nav-link{
  color:rgba(255,255,255,.9); font-weight:600; font-size:.96rem;
  padding:.5rem .9rem; position:relative;
}
.site-header .nav-link:hover{ color:#fff; }
.site-header .nav-link.active{ color:var(--c-brass-2); }

/* scrolled state */
.site-header.scrolled{ background:var(--c-deep); box-shadow:0 10px 30px -20px rgba(0,0,0,.8); }

.dropdown-menu{
  border:none; border-radius:12px; box-shadow:var(--shadow);
  padding:.4rem; margin-top:.6rem; background:#fff;
}
.dropdown-item{ border-radius:8px; font-weight:600; font-size:.92rem; padding:.55rem .8rem; color:var(--c-ink); }
.dropdown-item:hover,.dropdown-item.active{ background:var(--c-paper-2); color:var(--c-teal); }

/* custom hamburger */
.navbar-toggler{ border:none; padding:.4rem; }
.navbar-toggler:focus{ box-shadow:none; }
.toggler-bar{ display:block; width:26px; height:2px; background:#fff; margin:5px 0; transition:.3s; }

.offcanvas{ background:var(--c-deep); color:#fff; }
.offcanvas .nav-link{ color:rgba(255,255,255,.92); font-size:1.05rem; padding:.6rem 0; }
.offcanvas .dropdown-menu{ background:transparent; box-shadow:none; padding-left:.6rem; }
.offcanvas .dropdown-item{ color:rgba(255,255,255,.85); }
.offcanvas .dropdown-item:hover{ background:rgba(255,255,255,.08); color:#fff; }
.offcanvas .btn-close{ filter:invert(1); }

/* ============================================================
   Hero
   ============================================================ */
.hero{
  position:relative; min-height:92vh; display:flex; align-items:center;
  color:#fff; padding:8rem 0 5rem;
  background:
    linear-gradient(180deg, rgba(14,42,53,.55) 0%, rgba(14,42,53,.78) 55%, var(--c-deep) 100%),
    url("https://marinabar.co.uk/wp-content/uploads/2024/11/Deck-e1730733430397-539x303.jpg") center/cover no-repeat;
  background-color:var(--c-deep);
}
.hero::after{ /* faint horizon shimmer line */
  content:""; position:absolute; left:0; right:0; bottom:18%; height:1px;
  background:linear-gradient(90deg,transparent,rgba(226,194,117,.5),transparent);
}
.hero-inner{ max-width:760px; }
.hero h1{
  font-size:clamp(2.6rem, 6.5vw, 5rem); color:#fff; margin:0 0 1.2rem;
}
.hero h1 em{ font-style:italic; color:var(--c-brass-2); }
.hero-lead{ font-size:clamp(1.05rem,2.2vw,1.4rem); color:rgba(255,255,255,.9); max-width:34ch; margin-bottom:2rem; }
.hero-ctas{ display:flex; flex-wrap:wrap; gap:.9rem; }

/* ============================================================
   Section scaffolding
   ============================================================ */
.section{ padding:var(--section-y) 0; }
.section-paper-2{ background:var(--c-paper-2); }
.section-dark{ background:var(--c-teal); color:#fff; }
.section-dark h2,.section-dark h3{ color:#fff; }
.section-deep{ background:var(--c-deep); color:#fff; }
.section-head{ max-width:620px; margin-bottom:3rem; }
.section-head h2{ font-size:clamp(2rem,4.4vw,3rem); }
.section-head p{ color:var(--c-ink-soft); font-size:1.08rem; margin-top:.6rem; }
.section-dark .section-head p,.section-deep .section-head p{ color:rgba(255,255,255,.78); }

/* ============================================================
   Offerings grid
   ============================================================ */
.offer-card{
  position:relative; display:block; border-radius:var(--radius); overflow:hidden;
  height:100%; min-height:300px; color:#fff; text-decoration:none;
  box-shadow:var(--shadow); isolation:isolate;
}
.offer-card img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2;
  transition:transform .7s cubic-bezier(.2,.7,.2,1);
}
.offer-card::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(14,42,53,.05) 0%, rgba(14,42,53,.35) 45%, rgba(14,42,53,.92) 100%);
}
.offer-card:hover img{ transform:scale(1.06); }
.offer-body{ position:absolute; left:0; right:0; bottom:0; padding:1.6rem 1.5rem; }
.offer-body h3{ color:#fff; font-size:1.5rem; margin:0 0 .2rem; }
.offer-body p{ color:rgba(255,255,255,.85); margin:0; font-size:.95rem; }
.offer-card .arrow{
  display:inline-block; margin-top:.7rem; color:var(--c-brass-2); font-weight:700;
  letter-spacing:.04em; font-size:.85rem; text-transform:uppercase;
}
.offer-card.tall{ min-height:100%; }

/* ============================================================
   Live music
   ============================================================ */
.music-card{
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12);
  border-radius:var(--radius); overflow:hidden; height:100%; display:flex;
}
.music-card img{ width:42%; object-fit:cover; }
.music-card .mc-body{ padding:1.5rem 1.6rem; align-self:center; }
.music-card h3{ font-size:1.5rem; margin:0 0 .3rem; }
.music-card .when{ color:var(--c-brass-2); font-weight:700; letter-spacing:.06em; text-transform:uppercase; font-size:.8rem; }
@media (max-width:540px){ .music-card{ display:block; } .music-card img{ width:100%; height:180px; } }

/* ============================================================
   Find us / map
   ============================================================ */
.map-frame{ border:0; width:100%; height:100%; min-height:420px; border-radius:var(--radius); display:block; }
.fb-frame{ border:0; overflow:hidden; width:100%; height:300px; border-radius:var(--radius); background:#fff; }
.contact-line{ display:flex; gap:.7rem; align-items:baseline; margin-bottom:.4rem; }
.contact-line .lbl{ color:var(--c-brass); font-weight:700; min-width:64px; }

/* ============================================================
   Footer
   ============================================================ */
.site-footer{ background:var(--c-deep); color:rgba(255,255,255,.82); padding:4rem 0 2rem; }
.footer-brand{ font-family:var(--font-display); font-size:1.6rem; color:#fff; margin:0 0 .6rem; }
.footer-tag{ max-width:34ch; color:rgba(255,255,255,.7); }
.footer-head{ font-size:.78rem; text-transform:uppercase; letter-spacing:.18em; color:var(--c-brass); margin-bottom:1rem; }
.footer-address{ font-style:normal; margin-bottom:.8rem; }
.site-footer a{ color:rgba(255,255,255,.82); text-decoration:none; }
.site-footer a:hover{ color:var(--c-brass-2); }
.footer-links{ list-style:none; padding:0; margin:0; }
.footer-links li{ margin-bottom:.35rem; }
.footer-base{
  margin-top:3rem; padding-top:1.5rem; border-top:1px solid rgba(255,255,255,.12);
  font-size:.85rem; color:rgba(255,255,255,.5);
}

/* ---------- Back to top ---------- */
.back-to-top{
  position:fixed; right:1.2rem; bottom:1.2rem; z-index:1020;
  width:46px; height:46px; border-radius:50%; border:none;
  background:var(--c-brass); color:var(--c-deep); font-size:1.2rem; font-weight:700;
  box-shadow:var(--shadow); opacity:0; pointer-events:none; transition:opacity .3s, transform .3s;
}
.back-to-top.show{ opacity:1; pointer-events:auto; }
.back-to-top:hover{ transform:translateY(-3px); }

/* ---------- Reveal on scroll ---------- */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s ease; }
.reveal.in{ opacity:1; transform:none; }

/* ---------- Generic page header (interior pages) ---------- */
.page-hero{
  background:linear-gradient(160deg,var(--c-deep),var(--c-teal));
  color:#fff; padding:calc(var(--header-h) + 4rem) 0 3.5rem; text-align:center;
}
.page-hero h1{ font-size:clamp(2.2rem,5vw,3.4rem); color:#fff; }
.page-hero p{ color:rgba(255,255,255,.8); max-width:50ch; margin:.6rem auto 0; }

/* ============================================================
   Interior content components (used across inner pages)
   ============================================================ */
.prose{ font-size:1.12rem; }
.prose p{ margin-bottom:1.1rem; }
.lead-line{ font-size:1.3rem; font-family:var(--font-display); color:var(--c-teal); line-height:1.3; }
.section-dark .lead-line{ color:var(--c-brass-2); }
.media-shot{ border-radius:var(--radius); box-shadow:var(--shadow); width:100%; object-fit:cover; }

/* pricing */
.price-card{
  background:#fff; border:1px solid var(--c-line); border-radius:var(--radius);
  padding:2.2rem; height:100%; box-shadow:var(--shadow);
}
.price-card.featured{ background:var(--c-deep); color:#fff; border-color:transparent; }
.price-card .when{ text-transform:uppercase; letter-spacing:.12em; font-size:.76rem; font-weight:700; color:var(--c-brass); margin-bottom:.6rem; }
.price-card .amount{ font-family:var(--font-display); font-size:3rem; font-weight:600; line-height:1; }
.price-card .amount span{ font-size:1rem; font-family:var(--font-body); color:var(--c-ink-soft); font-weight:600; }
.price-card.featured .amount span{ color:rgba(255,255,255,.7); }
.price-card p{ margin:.8rem 0 0; color:var(--c-ink-soft); }
.price-card.featured p{ color:rgba(255,255,255,.75); }

/* timeline of the evening */
.timeline{ list-style:none; margin:0; padding:0; }
.timeline li{ position:relative; padding:0 0 1.7rem 2.3rem; }
.timeline li::before{ content:""; position:absolute; left:5px; top:.4rem; width:12px; height:12px; border-radius:50%; background:var(--c-brass); z-index:1; }
.timeline li::after{ content:""; position:absolute; left:10px; top:1.1rem; bottom:-.2rem; width:2px; background:rgba(255,255,255,.18); }
.timeline li:last-child::after{ display:none; }
.timeline .t-time{ font-family:var(--font-display); font-size:1.2rem; color:var(--c-brass-2); display:block; margin-bottom:.1rem; }
.timeline .t-desc{ color:rgba(255,255,255,.82); }

/* add-on pills */
.pill{ display:inline-block; border:1px solid var(--c-line); border-radius:999px; padding:.4rem 1.1rem; font-weight:600; font-size:.92rem; margin:0 .4rem .5rem 0; }
.section-dark .pill{ border-color:rgba(255,255,255,.25); color:#fff; }

/* CTA band */
.cta-band{ background:var(--c-brass); color:var(--c-deep); border-radius:var(--radius); padding:clamp(2rem,4vw,3.2rem); box-shadow:var(--shadow); }
.cta-band .eyebrow{ color:var(--c-deep); opacity:.7; }
.cta-band h2{ color:var(--c-deep); margin-bottom:.6rem; }
.cta-band .big-contact{ font-family:var(--font-display); font-size:clamp(1.4rem,3vw,2rem); color:var(--c-deep); }
.cta-band .big-contact a{ color:var(--c-deep); text-decoration:underline; text-decoration-thickness:2px; }

/* ============================================================
   Weddings + menu pages: stats, menu price-list, gallery grid
   ============================================================ */
.stat .num{ font-family:var(--font-display); font-size:clamp(2.6rem,6vw,4rem); color:var(--c-brass); line-height:1; }
.stat .lbl{ display:block; font-weight:600; color:var(--c-ink-soft); margin-top:.35rem; }
.section-dark .stat .lbl{ color:rgba(255,255,255,.82); }

.bundle-note{ background:var(--c-mist); border-left:4px solid var(--c-brass); border-radius:8px; padding:1rem 1.25rem; font-weight:600; }

/* menu price list with dotted leaders */
.menu-list{ list-style:none; margin:0; padding:0; }
.menu-list li{ display:flex; align-items:baseline; gap:.75rem; padding:1rem 0; border-bottom:1px solid var(--c-line); }
.menu-list li:last-child{ border-bottom:none; }
.menu-list .m-name{ font-family:var(--font-display); font-size:1.25rem; color:var(--c-ink); text-decoration:none; }
a.m-name:hover{ color:var(--c-teal); }
.menu-list .m-dots{ flex:1 1 auto; border-bottom:1px dotted var(--c-line); transform:translateY(-5px); min-width:1.5rem; }
.menu-list .m-price{ font-weight:700; color:var(--c-teal); white-space:nowrap; }

/* gallery grid */
.g-item{ display:block; border-radius:var(--radius); overflow:hidden; aspect-ratio:1/1; box-shadow:var(--shadow); }
.g-item img{ width:100%; height:100%; object-fit:cover; transition:transform .6s cubic-bezier(.2,.7,.2,1); }
.g-item:hover img{ transform:scale(1.07); }

/* ============================================================
   Image page-hero variant + simple info cards (food pages)
   ============================================================ */
.page-hero.has-image{
  background:
    linear-gradient(180deg, rgba(14,42,53,.62), rgba(14,42,53,.85)),
    var(--img, none) center/cover no-repeat;
  background-color:var(--c-deep);
}

.info-card{ background:#fff; border:1px solid var(--c-line); border-radius:var(--radius); padding:1.8rem; height:100%; box-shadow:var(--shadow); }
.info-card .ic-kicker{ text-transform:uppercase; letter-spacing:.12em; font-size:.75rem; font-weight:700; color:var(--c-brass); }
.info-card h3{ font-size:1.4rem; margin:.45rem 0 .5rem; }
.info-card p{ margin:0; color:var(--c-ink-soft); }

/* ============================================================
   Tick list + dark callout note
   ============================================================ */
.ticklist{ list-style:none; padding:0; margin:0; }
.ticklist li{ position:relative; padding-left:1.9rem; margin-bottom:.7rem; font-size:1.05rem; }
.ticklist li::before{ content:"✓"; position:absolute; left:0; top:0; color:var(--c-brass); font-weight:800; }
.note-dark{ border-left:4px solid var(--c-brass); padding:.7rem 1.1rem; background:rgba(255,255,255,.06); border-radius:8px; font-weight:600; }

/* ============================================================
   Masonry gallery + lightbox
   ============================================================ */
.masonry{ column-gap:1.1rem; column-count:1; }
@media(min-width:576px){ .masonry{ column-count:2; } }
@media(min-width:992px){ .masonry{ column-count:3; } }
.m-cell{ display:block; break-inside:avoid; margin-bottom:1.1rem; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); cursor:zoom-in; }
.m-cell img{ width:100%; display:block; transition:transform .6s cubic-bezier(.2,.7,.2,1); background:var(--c-mist); }
.m-cell:hover img{ transform:scale(1.05); }

.lb-overlay{ position:fixed; inset:0; z-index:2000; background:rgba(8,22,28,.93); display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none; transition:opacity .3s; }
.lb-overlay.open{ opacity:1; pointer-events:auto; }
.lb-overlay img{ max-width:92vw; max-height:84vh; border-radius:10px; box-shadow:0 30px 80px -20px rgba(0,0,0,.8); }
.lb-btn{ position:absolute; background:rgba(255,255,255,.12); border:none; color:#fff; width:52px; height:52px; border-radius:50%; font-size:1.5rem; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .2s; }
.lb-btn:hover,.lb-btn:focus-visible{ background:rgba(255,255,255,.28); outline:none; }
.lb-close{ top:1.2rem; right:1.2rem; }
.lb-prev{ left:1.2rem; top:50%; transform:translateY(-50%); }
.lb-next{ right:1.2rem; top:50%; transform:translateY(-50%); }
.lb-counter{ position:absolute; bottom:1.1rem; left:0; right:0; text-align:center; color:rgba(255,255,255,.7); font-size:.9rem; }
@media(max-width:540px){ .lb-prev{ left:.4rem; } .lb-next{ right:.4rem; } .lb-btn{ width:44px; height:44px; } }

/* ============================================================
   Menu document (food pages)
   ============================================================ */
.menu-price-badge{ display:inline-block; background:var(--c-brass); color:var(--c-deep); font-weight:700; border-radius:999px; padding:.45rem 1.3rem; font-size:1.05rem; }
.menu-doc{ max-width:760px; margin:0 auto; }
.course{ margin-bottom:2.6rem; }
.course:last-child{ margin-bottom:0; }
.course-title{ font-family:var(--font-display); font-size:1.55rem; color:var(--c-teal); display:flex; align-items:center; gap:1rem; margin-bottom:1.1rem; }
.course-title::after{ content:""; flex:1 1 auto; height:1px; background:var(--c-line); }
.dish{ padding:.6rem 0; font-size:1.12rem; line-height:1.5; }
.dish + .dish{ border-top:1px dashed var(--c-line); }
.veg{ display:inline-block; font-size:.68rem; font-weight:800; letter-spacing:.05em; color:#3c7a3c; border:1px solid #bcd9bc; background:#eef6ee; border-radius:6px; padding:.08rem .4rem; margin-right:.55rem; vertical-align:middle; }
.allergen{ font-style:italic; color:var(--c-ink-soft); margin-top:1.5rem; }

/* more-menus pills */
.menu-pills{ display:flex; flex-wrap:wrap; gap:.6rem; justify-content:center; }
.menu-pill{ display:inline-block; border:1px solid var(--c-line); background:#fff; border-radius:999px; padding:.5rem 1.1rem; font-weight:600; font-size:.92rem; text-decoration:none; color:var(--c-ink); transition:.2s; }
.menu-pill:hover{ border-color:var(--c-brass); color:var(--c-teal); }
.menu-pill.is-current{ background:var(--c-deep); color:#fff; border-color:var(--c-deep); pointer-events:none; }

/* ============================================================
   Print: clean menu printout
   ============================================================ */
@media print{
  .site-header,.site-footer,.back-to-top,.no-print,.lb-overlay{ display:none !important; }
  body{ background:#fff; color:#000; }
  .page-hero{ background:none !important; color:#000 !important; padding:.5rem 0 1rem !important; }
  .page-hero h1,.page-hero p,.course-title{ color:#000 !important; }
  .eyebrow{ color:#000 !important; }
  .menu-price-badge{ background:none; border:1px solid #000; color:#000; }
  .section{ padding:.6rem 0 !important; }
}

/* priced dish row (e.g. hog roast tiers) */
.dish-priced{ display:flex; align-items:baseline; gap:.6rem; }
.dish-priced .dn{ flex:0 1 auto; }
.dish-priced .m-dots{ flex:1 1 auto; }

/* ============================================================
   Legal / terms page
   ============================================================ */
.legal{ max-width:820px; margin:0 auto; }
.legal .intro-note{ background:var(--c-mist); border-left:4px solid var(--c-brass); padding:1rem 1.25rem; border-radius:8px; margin-bottom:2.5rem; font-weight:600; }
ol.clauses{ list-style:none; counter-reset:clause; padding:0; margin:0; }
ol.clauses > li{ counter-increment:clause; position:relative; padding-left:3.2rem; margin-bottom:2rem; }
ol.clauses > li::before{
  content:counter(clause); position:absolute; left:0; top:.1rem;
  width:2.1rem; height:2.1rem; background:var(--c-deep); color:#fff; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:600; font-size:.95rem;
}
.legal ul{ margin:.7rem 0 0; padding-left:1.2rem; }
.legal ul li{ margin-bottom:.5rem; }
.legal .sub-p{ margin:.7rem 0 0; }
.legal .roman{ list-style:lower-roman; }