/* ============================================================================
   FOREPLAY GOLF — shared stylesheet
   Everything that must look identical on every page: tokens, the reset, the
   navigation, the footer and the recurring section furniture.

   Page-specific CSS stays in that page's own <style> block, which must come
   AFTER this file in the <head> so it can override.

   Webflow note: this file is the site-wide custom code. Per-page CSS goes in
   that page's own settings panel. Keeping the split here means the port is a
   copy-paste rather than an untangling job.
   ========================================================================= */

:root {
  /* sampled from the hero film */
  --night: #06080b;
  --night-2: #0d1116;
  --sun: #f2a63a;
  --ember: #c05a1e;
  --acid: #8fd14f;        /* the swing trail, and the brand highlight */
  --green: #72b843;       /* brand primary, from the logo artwork */
  --deep: #2f6b23;
  /* sampled from the bay photograph */
  --turf: #2b9c31;
  --simsky: #7fd0c8;
  --timber: #6e6954;
  /* the white-out */
  --paper: #ffffff;
  --bone: #f4f2ea;
  --ash: #9aa2a4;

  --display: "Archivo", "Helvetica Neue", Arial, system-ui, sans-serif;
  --data: "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace;
  --gutter: clamp(20px, 4.2vw, 76px);
  --section: clamp(78px, 11vw, 168px);
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --line: rgba(244, 242, 234, .17);

  /* radius steps down with the element: a 16px corner on a 44px control reads
     far rounder than the same corner on a 300px card */
  --r-card: 16px;
  --r-glass: 14px;
  --r-control: 12px;

  /* elevation. only cards and buttons ever carry these */
  --e-slab:
    inset 0 1px 0 rgba(255, 255, 255, .6),
    0 2px 4px rgba(6, 8, 11, .06),
    0 12px 24px rgba(6, 8, 11, .1),
    0 28px 56px rgba(6, 8, 11, .11);
  --e-slab-hover:
    inset 0 1px 0 rgba(255, 255, 255, .6),
    0 4px 8px rgba(6, 8, 11, .07),
    0 20px 38px rgba(6, 8, 11, .14),
    0 44px 80px rgba(6, 8, 11, .18);
  --e-slab-dark:
    inset 0 1px 0 rgba(255, 255, 255, .14),
    0 2px 4px rgba(6, 8, 11, .1),
    0 12px 24px rgba(6, 8, 11, .18),
    0 28px 56px rgba(6, 8, 11, .2);
  --e-slab-dark-hover:
    inset 0 1px 0 rgba(255, 255, 255, .14),
    0 4px 8px rgba(6, 8, 11, .12),
    0 20px 38px rgba(6, 8, 11, .24),
    0 44px 80px rgba(6, 8, 11, .3);
  --e-glass: 0 10px 30px rgba(0, 0, 0, .3);
  --e-glass-hover: 0 18px 44px rgba(0, 0, 0, .4);
  --e-control:
    inset 0 1px 0 rgba(255, 255, 255, .28),
    0 1px 2px rgba(6, 8, 11, .3),
    0 6px 14px rgba(6, 8, 11, .34);
  --e-control-hover:
    inset 0 1px 0 rgba(255, 255, 255, .28),
    0 2px 4px rgba(6, 8, 11, .32),
    0 10px 22px rgba(6, 8, 11, .42);
  --e-control-light:
    inset 0 1px 0 rgba(255, 255, 255, .18),
    0 1px 2px rgba(6, 8, 11, .1),
    0 6px 14px rgba(6, 8, 11, .16);
  --e-control-light-hover:
    inset 0 1px 0 rgba(255, 255, 255, .18),
    0 2px 4px rgba(6, 8, 11, .12),
    0 10px 22px rgba(6, 8, 11, .22);

  --nav-h: 72px;
}

/* ---------------------------------------------------------------- base */

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

html {
  background: var(--night);
  color: var(--bone);
  font-family: var(--display);
  -webkit-font-smoothing: antialiased;
}

body { margin: 0; min-width: 320px; background: var(--night); overflow-x: clip; }

a { color: inherit; }
img { max-width: 100%; }
button, a { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 2px solid var(--acid); outline-offset: 4px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.micro {
  font-family: var(--data);
  font-size: 10px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: .09em;
  text-transform: uppercase;
}

/* ---------------------------------------------------------------- preview bar */
/* build-time only. says out loud what is not wired yet, so no page in progress
   can be mistaken for finished. delete the elements and this rule to ship */

.preview-note {
  position: relative; z-index: 100;
  display: flex; flex-wrap: wrap; gap: 4px 18px; align-items: baseline;
  padding: 9px var(--gutter);
  background: var(--ember); color: var(--bone);
}

.preview-note strong { font-weight: 500; letter-spacing: .12em; }

/* ---------------------------------------------------------------- nav */
/* Two variants of one component. The default is the solid sticky bar every
   underlying page uses. `.nav--film` is the home page: fixed and transparent
   over the film, gaining `.is-solid` once the film is done and `.is-light`
   across the white-out, where the logo and button both have to invert. */

.nav {
  position: sticky; top: 0; z-index: 90;
  display: grid; grid-template-columns: auto 1fr auto auto;
  align-items: center; gap: 18px;
  padding: max(14px, env(safe-area-inset-top)) var(--gutter) 14px;
  background: rgba(6, 8, 11, .92);
  border-bottom: 1px solid rgba(244, 242, 234, .14);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  transition: background 400ms ease, border-color 400ms ease, color 400ms ease;
}

.nav--film {
  position: fixed; inset: 0 0 auto;
  background: transparent;
  border-bottom-color: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.nav--film.is-solid {
  background: rgba(6, 8, 11, .92);
  border-bottom-color: rgba(244, 242, 234, .14);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

/* the home nav is fixed, so in-page anchors stop clear of it rather than under */
#play, #groups, #visit, #wednesday { scroll-margin-top: clamp(84px, 9vh, 108px); }

.nav__brand { position: relative; display: inline-flex; align-items: center; min-height: 44px; width: 132px; }
.nav__logo { display: block; width: 132px; height: auto; transition: opacity 260ms ease; }
.nav__logo--dark { position: absolute; inset: 50% auto auto 0; transform: translateY(-50%); opacity: 0; }

.nav.is-light .nav__logo--light { opacity: 0; }
.nav.is-light .nav__logo--dark { opacity: 1; }

/* ---- the link row */

.nav__links {
  justify-self: center;
  display: flex; align-items: center; gap: clamp(12px, 1.6vw, 26px);
}

/* on the film the links stay out of the way until the page proper begins */
.nav--film .nav__links { opacity: 0; visibility: hidden; transition: opacity 400ms ease, visibility 400ms; }
.nav--film.is-solid .nav__links { opacity: 1; visibility: visible; }

.nav__links > a,
.nav__trigger {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px;
  text-decoration: none; color: inherit;
  transition: color 200ms ease;
}

.nav__links > a:hover, .nav__trigger:hover { color: var(--green); }
.nav__links a[aria-current="page"] { color: var(--acid); }

/* ---- the Ways to play dropdown */
/* grouped under the section name the home page already uses for these six, so
   the header mirrors a structure people have scrolled rather than a new one */

.nav__group { position: relative; }

.nav__trigger {
  appearance: none; -webkit-appearance: none;
  border: 0; background: none; padding: 0;
  font: inherit; letter-spacing: inherit; text-transform: inherit;
  cursor: pointer;
}

.nav__trigger::after {
  content: ""; width: 6px; height: 6px; margin-top: -3px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform 240ms var(--ease-out);
}

.nav__trigger[aria-expanded="true"] { color: var(--acid); }
.nav__trigger[aria-expanded="true"]::after { transform: rotate(-135deg); margin-top: 2px; }

/* a control surface, not a card: control radius, control shadow, and solid
   rather than glass because it can open over film, photography or bone */
.nav__menu {
  position: absolute; top: calc(100% + 12px); left: 50%;
  z-index: 5;
  display: grid; min-width: 248px;
  transform: translateX(-50%);
  padding: 8px;
  border-radius: var(--r-control);
  border: 1px solid rgba(244, 242, 234, .18);
  background: rgba(6, 8, 11, .97);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  box-shadow: var(--e-control);
}

.nav__menu[hidden] { display: none; }

.nav__menu a {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 44px; padding: 0 12px;
  border-radius: 8px;
  color: rgba(244, 242, 234, .82); text-decoration: none;
  transition: background 180ms ease, color 180ms ease;
}

.nav__menu a::after { content: "→"; opacity: 0; transition: opacity 180ms ease; }
.nav__menu a:hover, .nav__menu a:focus-visible { background: rgba(244, 242, 234, .08); color: var(--bone); }
.nav__menu a:hover::after, .nav__menu a:focus-visible::after { opacity: .5; }
.nav__menu a[aria-current="page"] { color: var(--acid); }

/* ---- the booking button: the slab at control scale */
/* always visible, never inside a menu. bookings are the site's job */

.nav__book {
  justify-self: end;
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 44px; padding: 0 18px;
  border-radius: var(--r-control);
  border: 1px solid var(--acid);
  background: var(--acid); color: var(--night);
  font-family: var(--data); font-size: 11px; font-weight: 500;
  letter-spacing: .09em; text-transform: uppercase; text-decoration: none;
  white-space: nowrap;
  box-shadow: var(--e-control);
  transition: background 220ms ease, color 220ms ease,
              transform 220ms var(--ease-out), box-shadow 220ms var(--ease-out);
}

/* the fill shifts rather than emptying to transparent: a shadow cast by a
   see-through button has nothing casting it */
.nav__book:hover {
  background: var(--green); color: var(--night);
  transform: translateY(-2px);
  box-shadow: var(--e-control-hover);
}

/* acid on a light surface fails contrast, so the fill drops to deep fairway and
   the shadow drops with it — one pitched for a dark bar goes muddy on bone */
.nav.is-light .nav__book {
  background: var(--deep); border-color: var(--deep); color: var(--bone);
  box-shadow: var(--e-control-light);
}

.nav.is-light .nav__book:hover {
  background: var(--night); border-color: var(--night); color: var(--bone);
  box-shadow: var(--e-control-light-hover);
}

.nav.is-light .nav__trigger[aria-expanded="true"] { color: var(--deep); }

/* ---- the menu button */

.nav__burger {
  display: none;
  justify-self: end;
  width: 44px; height: 44px; padding: 0;
  appearance: none; -webkit-appearance: none;
  align-items: center; justify-content: center;
  flex-direction: column; gap: 5px;
  border: 1px solid rgba(244, 242, 234, .3);
  border-radius: var(--r-control);
  background: rgba(6, 8, 11, .3);
  cursor: pointer;
  transition: border-color 200ms ease, background 200ms ease;
}

.nav__burger:hover { border-color: rgba(244, 242, 234, .6); }
.nav.is-light .nav__burger { border-color: rgba(6, 8, 11, .3); background: rgba(255, 255, 255, .3); }

.nav__burger span {
  display: block; width: 18px; height: 1.5px;
  background: var(--bone);
  transition: transform 260ms var(--ease-out), opacity 200ms ease;
}

.nav.is-light .nav__burger span { background: var(--night); }

.nav__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* ---- the mobile drawer */
/* sits under the fixed nav so the close button stays reachable */

/* --drawer-top is measured from the real nav on open rather than assumed. a
   banner above the nav, a safe-area inset or a taller logo all move that edge,
   and a guessed constant hides the first link underneath the bar */
.nav-drawer {
  position: fixed; inset: 0; z-index: 85;
  display: grid; align-content: start;
  padding: calc(var(--drawer-top, 72px) + 16px) var(--gutter) 40px;
  background: rgba(6, 8, 11, .98);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.nav-drawer[hidden] { display: none; }

.nav-drawer__label {
  padding: 22px 0 10px;
  color: var(--ash);
}

.nav-drawer a {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 56px; padding: 6px 0;
  border-bottom: 1px solid var(--line);
  color: var(--bone); text-decoration: none;
  font-size: 19px; font-weight: 600; letter-spacing: -.02em;
}

.nav-drawer a::after { content: "→"; color: var(--ash); font-size: 15px; }
.nav-drawer a:hover { color: var(--acid); }
.nav-drawer a[aria-current="page"] { color: var(--acid); }

.nav-drawer__book {
  margin-top: 28px;
  display: inline-flex; align-items: center; justify-content: space-between; gap: 20px;
  min-height: 56px; padding: 0 22px;
  border-radius: var(--r-control);
  border: 1px solid var(--acid);
  background: var(--acid); color: var(--night) !important;
  font-family: var(--data); font-size: 11px; font-weight: 500;
  letter-spacing: .09em; text-transform: uppercase; text-decoration: none;
  box-shadow: var(--e-control);
}

.nav-drawer__book::after { color: var(--night) !important; }

body.drawer-open { overflow: hidden; }

/* ---------------------------------------------------------------- sections */

.section { padding: var(--section) var(--gutter); }
.section--bone { background: var(--bone); color: var(--night); }

.section__head {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(20px, 4vw, 60px); align-items: end;
  padding-bottom: clamp(22px, 2.6vw, 34px);
  border-bottom: 1px solid var(--line);
}

.section--bone .section__head { border-bottom-color: rgba(6, 8, 11, .22); }

.section__title {
  margin: 0;
  font-size: clamp(40px, 6.4vw, 96px); font-weight: 790;
  font-variation-settings: "wdth" 88;
  letter-spacing: -.06em; line-height: .86; text-transform: uppercase;
}

.section__aside { margin: 0; font-size: clamp(16px, 1.25vw, 19px); line-height: 1.5; color: rgba(244, 242, 234, .68); }
.section--bone .section__aside { color: rgba(6, 8, 11, .68); }

.eyebrow { display: flex; align-items: center; gap: 12px; margin: 0 0 18px; color: var(--acid); }
.eyebrow::before { content: ""; width: 28px; height: 2px; background: var(--acid); }

/* ---------------------------------------------------------------- readout */
/* the signature component: real verified quantities only */

.readout {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}

.readout--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.readout__cell {
  display: flex; flex-direction: column; gap: 10px;
  padding: clamp(22px, 3vw, 40px) clamp(16px, 2vw, 30px);
  background: var(--night);
}

.readout__value {
  font-size: clamp(34px, 5vw, 72px); font-weight: 800;
  font-variation-settings: "wdth" 84;
  letter-spacing: -.06em; line-height: .9; color: var(--acid);
}

.readout__label { color: var(--ash); }

/* ---------------------------------------------------------------- hours */

.hours { width: 100%; border-collapse: collapse; }
.hours th, .hours td { padding: 13px 0; text-align: left; border-bottom: 1px solid var(--line); font-weight: 400; }
.hours th { font-family: var(--data); font-size: 10px; letter-spacing: .09em; text-transform: uppercase; color: var(--ash); }
.hours td { font-size: 16px; }
.hours .is-shut td, .hours .is-shut th { color: var(--ash); }

/* ---------------------------------------------------------------- footer */

.site-footer {
  display: flex; flex-wrap: wrap; gap: 14px 30px;
  justify-content: space-between; align-items: center;
  padding: 30px var(--gutter) max(30px, env(safe-area-inset-bottom));
  border-top: 1px solid var(--line); color: var(--ash);
}

.site-footer a { color: var(--acid); }

/* ---------------------------------------------------------------- breakpoints */

@media (max-width: 1080px) {
  .nav__links { gap: 12px; }
}

/* the link row and the dropdown give way to the drawer together */
@media (max-width: 900px) {
  .nav { grid-template-columns: auto 1fr auto auto; gap: 12px; }
  .nav__links { display: none; }
  .nav__burger { display: inline-flex; }
  .nav--film .nav__burger { opacity: 0; visibility: hidden; transition: opacity 400ms ease, visibility 400ms; }
  .nav--film.is-solid .nav__burger { opacity: 1; visibility: visible; }
}

@media (max-width: 620px) {
  .nav__brand, .nav__logo { width: 112px; }
  .nav__book { padding: 0 14px; font-size: 10px; }
  .section__head { grid-template-columns: 1fr; align-items: start; }
  .readout, .readout--3 { grid-template-columns: 1fr; }
}

@media (max-width: 420px) {
  /* below this the button and the burger cannot both sit beside the logo */
  .nav__book { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .nav__book:hover { transform: none; }
  .nav__burger span, .nav__trigger::after, .nav__logo { transition: none; }
}
