/* Charlie Brown's, Hale — site styles */
:root {
  --bg: #0E0D0B;
  --bg-warm: #1A1714;
  --panel: rgba(48, 48, 50, 0.94);
  --cream: #F2EDE4;
  --muted: #BDB5A8;
  --faint: #8E877C;
  --gold: #D9A441;
  --line: rgba(242, 237, 228, 0.18);
}

*, *::before, *::after { box-sizing: border-box; }

html, body { margin: 0; }

body {
  background: var(--bg);
  color: var(--cream);
  font-family: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--cream); transition: color 0.2s ease; }
a:hover, a:focus-visible { color: var(--gold); }
a:focus-visible, button:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

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

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* ---------- Page frame ---------- */
.page {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  background: var(--bg);
}
.page--warm { background: var(--bg-warm); }

/* Background media */
.bg-media {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0;
}
.bg-media--right { left: auto; right: 0; width: 68%; }
.bg-shade { position: absolute; inset: 0; z-index: 1; pointer-events: none; }

/* ---------- Header (desktop) ---------- */
.logo {
  position: absolute; top: 89px; left: 28px; z-index: 5;
  display: block; line-height: 0;
}
.logo img { height: 80px; width: auto; }

.site-header {
  position: absolute; top: 0; left: 0; right: 0; z-index: 4;
  padding: 28px 28px 0;
  font-size: 13.5px; letter-spacing: 0.02em; text-transform: uppercase; line-height: 1.25;
}
.site-header__inner { display: flex; flex-direction: column; gap: 44px; }

.main-nav { display: flex; flex-wrap: wrap; gap: 16px 48px; padding-left: 90px; }
.main-nav a { text-decoration: none; }
.main-nav a[aria-current="page"] { color: var(--gold); }

/* Menu dropdown in the header */
.nav-drop { position: relative; }
.nav-drop__btn {
  background: none; border: 0; padding: 0; margin: 0; cursor: pointer;
  color: var(--cream); font: inherit; letter-spacing: inherit; text-transform: inherit;
}
.nav-drop__btn:hover, .nav-drop:focus-within .nav-drop__btn, .nav-drop.is-open .nav-drop__btn { color: var(--gold); }
.nav-drop__list {
  position: absolute; left: -14px; top: 100%; z-index: 10;
  display: none; flex-direction: column; min-width: 170px;
  padding: 14px 14px 10px; margin-top: 0;
  background: rgba(14,13,11,0.94); border: 1px solid rgba(242,237,228,0.12);
}
.nav-drop:hover .nav-drop__list, .nav-drop:focus-within .nav-drop__list, .nav-drop.is-open .nav-drop__list { display: flex; }
.nav-drop__list a { text-decoration: none; padding: 6px 0; white-space: nowrap; }

/* "See the menus" chooser on the homepage */
.menu-pick { position: relative; }
.menu-pick summary { list-style: none; cursor: pointer; }
.menu-pick summary::-webkit-details-marker { display: none; }
.menu-pick[open] summary { border-color: var(--gold); color: var(--gold); }
.menu-pick__list {
  position: absolute; left: 0; top: calc(100% + 6px); z-index: 10;
  display: flex; flex-direction: column; min-width: 100%;
  background: rgba(14,13,11,0.94); border: 1px solid rgba(242,237,228,0.25);
}
.menu-pick__list a { padding: 10px 16px; font-size: 15px; text-decoration: none; white-space: nowrap; }
.menu-pick__list a + a { border-top: 1px solid rgba(242,237,228,0.1); }

.info-row { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 24px 48px; padding-left: 90px; }
.info-col { display: flex; flex-direction: column; gap: 12px; }
/* keep the Social column fixed in place whatever the hours text says */
.site-header .info-col:nth-child(2) { min-width: 13.6em; }
.info-col__head { text-decoration: underline; text-underline-offset: 3px; }
.info-col a.plain { text-decoration: none; }

.menu-toggle, .mobile-bar, .mobile-menu { display: none; }

/* ---------- Shared bits ---------- */
.kicker {
  margin: 0; font-size: 13px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold);
}
.title-img { margin: 0; line-height: 0; }

.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 40px; padding: 9px 26px;
  font-size: 15px; text-decoration: none; line-height: 1.3;
  border: 1px solid rgba(242, 237, 228, 0.5); color: var(--cream);
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.btn:hover, .btn:focus-visible { border-color: var(--gold); color: var(--gold); }
.btn--solid { background: var(--cream); color: var(--bg); border-color: var(--cream); font-weight: 600; }
.btn--solid:hover, .btn--solid:focus-visible { background: var(--gold); border-color: var(--gold); color: var(--bg); }
.btn--gold { background: var(--gold); color: var(--bg); border-color: var(--gold); font-weight: 600; }
.btn--gold:hover, .btn--gold:focus-visible { background: var(--cream); border-color: var(--cream); color: var(--bg); }

.content {
  position: absolute; left: 28px; top: 300px; z-index: 3;
  display: flex; flex-direction: column; gap: 22px;
}
.body-copy { margin: 0; font-size: 17px; line-height: 1.6; color: var(--cream); }

/* ---------- Home ---------- */
.home { display: flex; align-items: flex-end; }
.home__media { object-position: 50% 46%; }
.home__inner { position: static; }
/* Title block starts at the same height and left edge as the titles on the other pages */
.home__intro { position: absolute; left: 28px; top: 300px; z-index: 3; }
.home__intro .kicker { position: absolute; bottom: 100%; left: 0; white-space: nowrap; }
.home__title img { width: 820px; }
.home__inner .kicker { margin-bottom: 16px; }
.home__inner .btn-row { margin-top: 36px; }
.home__strap {
  position: absolute; right: 28px; bottom: 25px; z-index: 2; margin: 0;
  text-align: right; color: var(--muted); font-size: 17px; line-height: 1.8; letter-spacing: 0.01em;
  white-space: nowrap;
}

/* ---------- Reservations ---------- */
.reserve .content { gap: 28px; }
.reserve__title { width: 563px; }
.reserve__note { margin: 12px 0 0; font-size: 16px; line-height: 1.6; max-width: 710px; }
.reserve__note a { text-underline-offset: 3px; }
.reserve .btn-row { margin-top: 8px; }

/* ---------- What's on / Private hire (photo on the right) ---------- */
/* Shared look: photo on the right 68%, solid dark on the left fading into it.
   Used by Home, Reserve a table, What's on and Private hire. */
.side-shade {
  background:
    linear-gradient(90deg, #0E0D0B 0%, #0E0D0B 33%, rgba(14,13,11,0.85) 39%, rgba(14,13,11,0.55) 47%, rgba(14,13,11,0.2) 56%, rgba(14,13,11,0) 64%),
    linear-gradient(180deg, rgba(14,13,11,0.6) 0%, rgba(14,13,11,0) 30%),
    linear-gradient(0deg, rgba(14,13,11,0.9) 0%, rgba(14,13,11,0.5) 16%, rgba(14,13,11,0) 32%);
}
.whats-on .content { width: 640px; }
.whats-on__title img { width: 372px; }
.events { display: flex; flex-direction: column; margin: 8px 0 0; padding: 0; list-style: none; }
.event {
  display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 20px; align-items: baseline;
  padding: 18px 0; border-top: 1px solid var(--line);
}
.event:last-child { border-bottom: 1px solid var(--line); }
.event__when { font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.event__what { font-size: 20px; }
.event__detail { display: block; margin-top: 6px; font-size: 15px; line-height: 1.5; color: var(--muted); }

.hire .content { max-width: 640px; }
.hire__title img { width: 560px; }
.hire__email { align-self: flex-start; font-size: 17px; color: var(--gold); text-underline-offset: 4px; }
.hire__email:hover { color: var(--cream); }

/* ---------- Pints & Pickles ---------- */
.pp__shade {
  background:
    linear-gradient(90deg, rgba(14,13,11,0.88) 0%, rgba(14,13,11,0.7) 45%, rgba(14,13,11,0.45) 100%),
    linear-gradient(180deg, rgba(14,13,11,0.6) 0%, rgba(14,13,11,0) 32%);
}
.pp .content { top: 264px; width: 560px; gap: 16px; }
.pp .kicker { color: var(--gold); }
.pp__headline { position: relative; height: 180px; }
.pp__title img { width: 340px; }
.pp__sub {
  position: absolute; left: 256px; top: 118px; margin: 0;
  display: grid; grid-template-columns: auto auto; column-gap: 12px;
  font-size: 20px; line-height: 1.35; white-space: nowrap;
}
.pp__dash { align-self: center; }
.pp__intro { margin: 28px 0 0; color: var(--muted); font-size: 16px; line-height: 1.6; }
.pp__brand {
  margin-top: 8px; border-top: 1px solid var(--line); padding-top: 16px;
  display: flex; flex-direction: column; gap: 2px;
}
.pp__brand strong { font-weight: 600; letter-spacing: 0.2em; font-size: 18px; }
.pp__brand span { color: var(--muted); letter-spacing: 0.08em; font-size: 13px; }
.pp .btn-row { margin-top: 8px; }

/* Gallery: stays hidden until photos are added (see js/main.js) */
.gallery {
  position: absolute; right: 28px; top: 89px; z-index: 3; width: 640px;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px;
}
/* Narrower laptop screens: keep it below the Social column so they never overlap */
@media (min-width: 1101px) and (max-width: 1340px) { .gallery { top: 190px; } }
.gallery[hidden] { display: none; }
.gallery__main { grid-column: span 2; position: relative; height: 300px; background: #221D17; overflow: hidden; }
.gallery__slide {
  position: absolute; inset: 0; background-size: cover; background-position: center;
  opacity: 0; transition: opacity 0.9s ease;
}
.gallery__slide.is-active { opacity: 1; }
.gallery__video { width: 100%; height: 100%; object-fit: cover; display: block; }
.gallery__dots { position: absolute; left: 6px; bottom: 6px; display: flex; gap: 2px; z-index: 2; }
.gallery__dots button {
  width: 44px; height: 44px; border: 0; padding: 0; background: transparent; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.gallery__dots span { display: block; width: 24px; height: 2px; background: rgba(242,237,228,0.35); }
.gallery__dots button[aria-current="true"] span { background: var(--cream); }
.gallery__tile { height: 314px; background: #1E1A15 center / cover no-repeat; }
.gallery__tile[hidden] { display: none; }
.gallery .is-empty { visibility: hidden; }

/* ---------- Designer credit (fine print, bottom left of every page) ---------- */
.credit {
  position: absolute; left: 28px; bottom: 22px; z-index: 3; margin: 0;
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(242, 237, 228, 0.45);
}

/* ---------- Short desktop screens: let pages scroll rather than overlap ---------- */
@media (min-width: 1101px) and (max-height: 860px) {
  .page { min-height: 860px; }
}

/* =========================================================
   Phone & tablet
   ========================================================= */
@media (max-width: 1100px) {
  body { font-size: 16px; }

  .site-header, .logo { display: none; }

  .mobile-bar {
    display: flex; align-items: center; justify-content: space-between;
    position: absolute; top: 0; left: 0; right: 0; z-index: 20;
    padding: 18px 20px;
  }
  .mobile-bar .logo-sm { display: block; line-height: 0; }
  .mobile-bar .logo-sm img { height: 56px; width: auto; }
  .menu-toggle {
    display: inline-flex; align-items: center; gap: 10px;
    min-height: 44px; padding: 0 4px; background: none; border: 0; cursor: pointer;
    color: var(--cream); font: inherit; font-size: 14px; letter-spacing: 0.14em; text-transform: uppercase;
  }
  .menu-toggle__icon { position: relative; width: 22px; height: 12px; }
  .menu-toggle__icon::before, .menu-toggle__icon::after {
    content: ""; position: absolute; left: 0; right: 0; height: 1.5px; background: currentColor;
    transition: transform 0.25s ease, top 0.25s ease;
  }
  .menu-toggle__icon::before { top: 0; }
  .menu-toggle__icon::after { top: 10px; }
  .menu-open .menu-toggle__icon::before { top: 5px; transform: rotate(45deg); }
  .menu-open .menu-toggle__icon::after { top: 5px; transform: rotate(-45deg); }

  .mobile-menu {
    position: fixed; inset: 0; z-index: 15;
    background: var(--bg);
    padding: 110px 24px 40px;
    display: flex; flex-direction: column; gap: 40px;
    overflow-y: auto;
    opacity: 0; visibility: hidden; transition: opacity 0.25s ease, visibility 0.25s ease;
  }
  .menu-open .mobile-menu { opacity: 1; visibility: visible; }
  .menu-open { overflow: hidden; }
  .mobile-menu nav { display: flex; flex-direction: column; gap: 6px; }
  .mobile-menu nav a {
    font-size: 30px; line-height: 1.3; text-decoration: none; padding: 6px 0;
  }
  .mobile-menu nav a[aria-current="page"] { color: var(--gold); }
  .mobile-menu__menus { display: flex; flex-direction: column; padding: 6px 0; }
  .mobile-menu__menus span { font-size: 30px; line-height: 1.3; padding: 6px 0 2px; }
  .mobile-menu__menus a { font-size: 20px !important; padding: 6px 0 6px 18px !important; color: var(--muted); }
  .mobile-menu .info-row { padding-left: 0; gap: 28px 40px; font-size: 14px; letter-spacing: 0.02em; text-transform: uppercase; line-height: 1.5; }
  .mobile-menu .info-col { gap: 10px; }

  /* Content flows normally on small screens */
  .content, .pp .content, .whats-on .content, .hire .content {
    position: relative; left: auto; top: auto; width: auto; max-width: 640px;
    padding: 140px 24px 56px;
  }

  .bg-media--right { width: 100%; }
  .side-shade, .pp__shade {
    background: linear-gradient(180deg, rgba(14,13,11,0.75) 0%, rgba(14,13,11,0.6) 40%, rgba(14,13,11,0.92) 100%);
  }

  /* Home */
  .home { min-height: 100svh; }
  .home__inner { position: relative; z-index: 3; width: 100%; padding: 0 24px 64px; }
  .home__intro { position: static; }
  .home__intro .kicker { position: static; white-space: normal; }
  .credit { left: 24px; bottom: 20px; font-size: 10px; }
  .home__title img { width: 100%; max-width: 560px; }
  .home__strap {
    position: static; white-space: normal; text-align: left;
    margin-top: 28px; font-size: 15px; line-height: 1.7;
  }

  /* Reservations */
  .reserve { overflow: visible; padding-bottom: 64px; }
  .reserve__title { width: 100%; max-width: 420px; }
  .reserve__note { max-width: none; }

  /* What's on / Hire */
  .whats-on__title img { width: 70%; max-width: 300px; }
  .hire__title img { width: 100%; max-width: 440px; }
  .event { grid-template-columns: 1fr; gap: 4px; }
  .event__what { font-size: 18px; }
  .hire__email { word-break: break-all; }

  /* Pints & Pickles */
  .pp__headline { height: auto; }
  .pp__title img { width: 260px; }
  .pp__sub { position: static; display: block; margin-top: 14px; white-space: normal; font-size: 18px; }
  .pp__dash { display: none; }
  .home__hero-shade { background: linear-gradient(180deg, rgba(14,13,11,0.6) 0%, rgba(14,13,11,0.35) 30%, rgba(14,13,11,0.8) 60%, rgba(14,13,11,0.95) 100%); }
  .pp__intro { margin-top: 8px; }
  .gallery {
    position: relative; right: auto; top: auto; width: auto;
    margin: 0 24px 56px; z-index: 3;
  }
  .gallery__main { height: auto; aspect-ratio: 4 / 3; }
  .gallery__tile { height: auto; aspect-ratio: 1 / 1; }
  .gallery .is-empty { display: none; }
}

@media (max-width: 420px) {
  .btn-row .btn { flex: 1 1 auto; }
  .pp__title img { width: 230px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}