/* LiveWell shared styles: container, nav and mobile menu, buttons, sections, footer,
   skip link and reveal-on-scroll. Loaded through each page's own stylesheet,
   which imports this file. styles.css loads the design tokens. */
@import url('styles.css'); /* design tokens */

/* tokens/base.css gives every link a bottom border; the pages style their own links. */
a { border-bottom: 0; }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { margin: 0; padding: 0; background: var(--bg-page); color: var(--fg-1); font-family: var(--font-sans); }
img, svg { max-width: 100%; display: block; }
a { color: inherit; }

/* ===== Container ===== */
.lw-container { max-width: 1280px; margin: 0 auto; padding: 0 32px; }
@media (min-width: 768px) { .lw-container { padding: 0 48px; } }
@media (min-width: 1100px) { .lw-container { padding: 0 72px; } }

/* ===== Top nav ===== */
.lw-nav {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in oklab, var(--lw-whisper) 92%, transparent);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--border-soft);
}
.lw-nav-inner {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 14px; padding-bottom: 14px; gap: 16px;
}
.lw-nav-logo { display: flex; align-items: center; text-decoration: none; }
.lw-nav-logo img { height: 40px; width: auto; }
.lw-nav-links { display: none; gap: 28px; align-items: center; }
@media (min-width: 900px) { .lw-nav-links { display: flex; } }
.lw-nav-links a {
  font-family: var(--font-sans); font-size: 13px; color: var(--fg-1);
  text-decoration: none; letter-spacing: 0.02em;
  position: relative; padding: 4px 0;
  transition: color var(--t-fast) var(--ease-out);
}
.lw-nav-links a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -4px;
  height: 1px; background: var(--lw-fog); transform: scaleX(0); transform-origin: left;
  transition: transform var(--t-base) var(--ease-out);
}
.lw-nav-links a:hover::after { transform: scaleX(1); }
.lw-nav-cta {
  font-family: var(--font-sans); font-size: 13px; color: var(--lw-fog);
  text-decoration: none; padding: 10px 20px; border-radius: var(--r-pill);
  border: 1px solid var(--lw-fog);
  display: inline-flex; align-items: center; gap: 6px;
  transition: background var(--t-base) var(--ease-out), color var(--t-base) var(--ease-out);
}
.lw-nav-cta:hover { background: var(--lw-fog); color: var(--lw-whisper); }
.lw-nav-cta .chev { transition: transform var(--t-base) var(--ease-out); }
.lw-nav-cta:hover .chev { transform: translateX(3px); }

/* ===== Buttons ===== */
.lw-btn {
  font-family: var(--font-sans); font-size: 14px; font-weight: 400;
  padding: 14px 24px; border-radius: var(--r-pill); cursor: pointer;
  border: 1px solid transparent; text-decoration: none;
  display: inline-flex; align-items: center; gap: 8px;
  transition: all var(--t-base) var(--ease-out);
  letter-spacing: 0.01em;
}
.lw-btn .chev { font-family: var(--font-display); font-weight: 300; transition: transform var(--t-base) var(--ease-out); }
.lw-btn:hover .chev { transform: translateX(3px); }
.lw-btn-primary { background: var(--lw-fog); color: var(--lw-whisper); }
.lw-btn-primary:hover { background: #1f2520; }
.lw-btn-secondary { background: transparent; color: var(--lw-fog); border-color: var(--lw-fog); }
.lw-btn-secondary:hover { background: var(--lw-fog); color: var(--lw-whisper); }
.lw-btn-onfog { background: var(--lw-whisper); color: var(--lw-fog); }
.lw-btn-onfog:hover { background: var(--lw-light); }
.lw-btn-onfog-secondary { background: transparent; color: var(--lw-whisper); border-color: var(--lw-whisper); }
.lw-btn-onfog-secondary:hover { background: var(--lw-whisper); color: var(--lw-fog); }

/* ===== Section ===== */
.lw-section { padding: 96px 0; }
.lw-section--alt { background: var(--lw-whisper); }
.lw-section--fog { background: var(--lw-fog); color: var(--lw-whisper); }
.lw-section--fog .lw-eyebrow { color: color-mix(in oklab, white 55%, transparent); }
.lw-section--fog .lw-lede { color: color-mix(in oklab, white 78%, transparent); }

.lw-eyebrow {
  font-family: var(--font-sans); font-size: 12px; font-weight: 400;
  letter-spacing: var(--tr-eyebrow); text-transform: uppercase;
  color: var(--fg-3); margin: 0 0 22px;
  display: inline-flex; align-items: center; gap: 10px;
}
.lw-eyebrow::before {
  content: ''; width: 24px; height: 1px; background: currentColor; opacity: 0.55;
}

.lw-title {
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(2rem, 2.6vw + 1rem, 3rem);
  line-height: 1.1; letter-spacing: var(--tr-tight);
  margin: 0 0 24px; text-wrap: balance;
}
.lw-title em {
  font-family: var(--font-serif); font-style: italic; font-weight: 400;
}

.lw-lede {
  font-family: var(--font-sans); font-size: 18px; font-weight: 400;
  line-height: 1.6; color: var(--fg-2); max-width: 640px;
  margin: 0 0 32px;
}

/* ===== Section header (one column, or two with --split from 900px) ===== */
.lw-section-head { display: grid; grid-template-columns: 1fr; gap: 24px; margin-bottom: 56px; }
.lw-section-head--split {
  grid-template-columns: 1fr;
  align-items: end;
}
@media (min-width: 900px) {
  .lw-section-head--split { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 64px; }
}

/* ===== Footer ===== */
.lw-footer { padding: 80px 0 32px; border-top: 1px solid var(--border-soft); background: var(--bg-page); }
.lw-footer--fog { background: var(--lw-fog); color: var(--lw-whisper); border-top: 0; }
.lw-footer-top {
  display: grid; grid-template-columns: 1fr; gap: 48px; margin-bottom: 56px;
  padding-bottom: 56px; border-bottom: 1px solid var(--border-soft);
}
.lw-footer--fog .lw-footer-top { border-bottom-color: color-mix(in oklab, white 18%, transparent); }
@media (min-width: 900px) {
  .lw-footer-top { grid-template-columns: 1.4fr repeat(3, 1fr); gap: 48px; }
}
.lw-footer-brand img { height: 44px; margin-bottom: 20px; }
.lw-footer-brand p {
  font-family: var(--font-serif); font-style: italic; font-size: 16px;
  line-height: 1.5; color: var(--fg-2); max-width: 320px; margin: 0;
}
.lw-footer--fog .lw-footer-brand p { color: color-mix(in oklab, white 70%, transparent); }
.lw-footer-col h4 {
  font-family: var(--font-sans); font-size: 11px; font-weight: 700;
  letter-spacing: var(--tr-eyebrow); text-transform: uppercase;
  color: var(--fg-3); margin: 0 0 18px;
}
.lw-footer--fog .lw-footer-col h4 { color: color-mix(in oklab, white 60%, transparent); }
.lw-footer-col a {
  display: block; font-family: var(--font-sans); font-size: 15px;
  color: inherit; text-decoration: none; padding: 5px 0; opacity: 0.85;
  transition: opacity var(--t-fast) var(--ease-out);
}
.lw-footer-col a:hover { opacity: 1; }
.lw-footer-base {
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 16px;
  font-family: var(--font-sans); font-size: 13px; color: var(--fg-3);
}
.lw-footer--fog .lw-footer-base { color: color-mix(in oklab, white 55%, transparent); }
.lw-footer-base nav { display: flex; gap: 22px; }
.lw-footer-base a { color: inherit; text-decoration: none; opacity: 0.85; }
.lw-footer-base a:hover { opacity: 1; }

/* ===== Reveal-on-scroll =====
   Progressive enhancement: elements only start hidden once site.js adds
   html.reveal-ready, so without JS everything is visible. site.js shows
   everything at once if IntersectionObserver is missing or never reports.
   The transform and timings here are overridden by the Motion block under Refinements.
   Under reduced motion nothing moves or fades. */
.reveal-ready .lw-reveal {
  opacity: 0; transform: translateY(12px);
  transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out);
  will-change: opacity, transform;
}
.reveal-ready .lw-reveal.is-in { opacity: 1; transform: none; }
.reveal-ready .lw-reveal[data-delay="1"] { transition-delay: 80ms; }
.reveal-ready .lw-reveal[data-delay="2"] { transition-delay: 160ms; }
.reveal-ready .lw-reveal[data-delay="3"] { transition-delay: 240ms; }
.reveal-ready .lw-reveal[data-delay="4"] { transition-delay: 320ms; }
@media (prefers-reduced-motion: reduce) {
  .reveal-ready .lw-reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}


/* ===== Refinements (shared) =====
   These come later in the file, so they override the rules above. Add new adjustments here. */

/* Container: wider on large screens, so big monitors aren't mostly margin. */
@media (min-width: 1600px) { .lw-container { max-width: 1480px; } }
@media (min-width: 1920px) { .lw-container { max-width: 1600px; } }

/* Buttons and nav: larger text, and medium weight on the buttons, so they read clearly.
   Both use IBM Plex Sans, the guidelines' UI face (p.23). */
.lw-btn { font-size: 15px; font-weight: 500; padding: 15px 26px; }
.lw-nav-cta { font-size: 14px; font-weight: 500; }
.lw-nav-links a { font-size: 14px; }

/* Skip link for keyboard users: hidden until focused. */
.lw-skip {
  position: absolute; left: 16px; top: -64px; z-index: 100;
  background: var(--lw-fog); color: var(--lw-whisper);
  padding: 10px 18px; border-radius: var(--r-pill);
  font-family: var(--font-sans); font-size: 14px; text-decoration: none;
  transition: top var(--t-base) var(--ease-out);
}
.lw-skip:focus { top: 12px; }

/* Nav: a soft shadow once the page has scrolled (site.js sets html.is-scrolled). */
.lw-nav { transition: box-shadow var(--t-base) var(--ease-out); }
.is-scrolled .lw-nav { box-shadow: 0 6px 24px rgba(47, 55, 47, 0.07); }

/* Mobile menu: below 900px the nav links open from a menu button (site.js sets html.nav-open). */
.lw-nav-toggle { display: none; }
@media (max-width: 899px) {
  .lw-nav-toggle {
    display: inline-flex; align-items: center; justify-content: center; flex: none;
    width: 44px; height: 44px; margin-right: -10px; padding: 0;
    background: transparent; border: 0; border-radius: 50%;
    color: var(--fg-1); cursor: pointer;
  }
  .lw-nav-toggle svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
  .lw-nav-toggle .ic-close { display: none; }
  .nav-open .lw-nav-toggle .ic-open { display: none; }
  .nav-open .lw-nav-toggle .ic-close { display: block; }
  .lw-nav-links {
    display: flex; flex-direction: column; align-items: stretch; gap: 0;
    position: absolute; left: 0; right: 0; top: 100%;
    padding: 4px 32px 20px;
    background: var(--lw-whisper);
    border-bottom: 1px solid var(--border-soft);
    box-shadow: 0 16px 32px rgba(47, 55, 47, 0.10);
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-out), visibility 0s linear var(--t-base);
  }
  .nav-open .lw-nav-links {
    opacity: 1; visibility: visible; transform: none;
    transition: opacity var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-out);
  }
  .lw-nav-links a { font-size: 17px; padding: 14px 0; border-bottom: 1px solid var(--border-soft); }
  .lw-nav-links a:last-child { border-bottom: 0; }
  .lw-nav-links a::after { display: none; }
}

/* Motion: subtle, and off for people who ask for reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  /* Buttons lift slightly on hover (mouse and trackpad only). */
  @media (hover: hover) {
    .lw-btn:hover, .lw-nav-cta:hover { transform: translateY(-1px); }
  }

  /* Section labels: the short rule before each eyebrow draws in as it appears. */
  .reveal-ready .lw-reveal .lw-eyebrow::before {
    transform: scaleX(0); transform-origin: left center;
    transition: transform 900ms var(--ease-out) 200ms;
  }
  .reveal-ready .lw-reveal.is-in .lw-eyebrow::before { transform: scaleX(1); }

  /* Photos settle into place as they appear (site.js adds .lw-settle). */
  .lw-settle { animation: lw-settle 1600ms var(--ease-out) backwards; }

  /* Hero photos slowly zoom in and out, 18 seconds each way. */
  .lw-hero-drift { animation: lw-hero-drift 18s ease-in-out infinite alternate; }
}
@keyframes lw-settle { from { transform: scale(1.06); } }
@keyframes lw-hero-drift { from { transform: scale(1.02); } to { transform: scale(1.08); } }
/* Full-width photo strips ease in from a slight zoom as they scroll into view
   (site.js adds .is-in to .lw-ease-in sections). */
@media (prefers-reduced-motion: no-preference) {
  .reveal-ready .lw-ease-in > img { transform: scale(1.07); transition: transform 2400ms var(--ease-out); }
  .reveal-ready .lw-ease-in.is-in > img { transform: scale(1); }
}
/* Printing or saving as PDF: show every section, including ones not yet scrolled to,
   unpin the nav, and leave out the menu button and skip link. */
@media print {
  .reveal-ready .lw-reveal { opacity: 1 !important; transform: none !important; }
  .lw-nav-toggle, .lw-skip { display: none !important; }
  .lw-nav { position: static !important; box-shadow: none !important; }
}
/* Button hover colours. tokens/base.css styles every link on hover (a:hover sets the colour
   and border-bottom-color), so each button variant sets its own hover colour to keep its
   text readable. */
a.lw-btn-primary:hover,
a.lw-btn-secondary:hover,
a.lw-nav-cta:hover { color: var(--lw-whisper); }
a.lw-btn-onfog:hover,
a.lw-btn-onfog-secondary:hover { color: var(--lw-fog); }

/* Button borders on hover. The same a:hover rule in tokens/base.css recolours every link's
   bottom border, so each button variant sets its own hover border colour and keeps one
   even colour on all four sides. */
a.lw-btn-primary:hover,
a.lw-btn-onfog:hover { border-color: transparent; }
a.lw-btn-secondary:hover,
a.lw-nav-cta:hover { border-color: var(--lw-fog); }
a.lw-btn-onfog-secondary:hover { border-color: var(--lw-whisper); }

/* Motion: things drift in gently rather than pop. These timings override the reveal, photo
   and button timings set earlier in this file, using a soft curve (--lw-ease-soft) and a
   short stagger between items. */
:root { --lw-ease-soft: cubic-bezier(0.22, 1, 0.36, 1); }
@media (prefers-reduced-motion: no-preference) {
  .reveal-ready .lw-reveal {
    transform: translateY(28px);
    transition: opacity 1100ms var(--lw-ease-soft), transform 1400ms var(--lw-ease-soft);
  }
  .reveal-ready .lw-reveal[data-delay="1"] { transition-delay: 150ms; }
  .reveal-ready .lw-reveal[data-delay="2"] { transition-delay: 300ms; }
  .reveal-ready .lw-reveal[data-delay="3"] { transition-delay: 450ms; }
  .reveal-ready .lw-reveal[data-delay="4"] { transition-delay: 600ms; }
  .reveal-ready .lw-reveal .lw-eyebrow::before { transition: transform 1400ms var(--lw-ease-soft) 350ms; }
  .lw-settle { animation: lw-settle 2400ms var(--lw-ease-soft) backwards; }
  .reveal-ready .lw-ease-in > img { transition: transform 3200ms var(--lw-ease-soft); }
  .lw-btn, .lw-nav-cta { transition-duration: 350ms; }
}
/* Phones and tablets: form fields at 16px so iOS doesn't zoom in when a field is tapped
   (!important so it also wins over inline and page-level font sizes on form fields). */
@media (max-width: 899px) {
  input, select, textarea { font-size: 16px !important; }
}

/* Touch screens: text links get a comfortable 44px tap area. The list includes
   page-specific links (master- and burp- classes) as well as shared ones. */
@media (pointer: coarse) {
  .master-precinct .lk,
  .master-partner .lk,
  .master-contact-block a,
  .burp-visit-row .v a,
  .lw-footer-base a { display: inline-flex; align-items: center; min-height: 44px; }
  .lw-footer-col a { padding: 10px 0; }
  .lw-footer-base nav { flex-wrap: wrap; row-gap: 0; }
}
/* Nav button: never wraps; hidden under 560px, where the same link is in the menu and the hero. */
.lw-nav-cta { white-space: nowrap; }
@media (max-width: 559px) { .lw-nav-cta { display: none; } }