/* Life Force Dynamics: shared styles.
   Page layouts are written inline in each page; this file holds what every page shares. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; }
button, input, select { font: inherit; }

/* Brand tokens, for future edits */
:root {
  --olive: #9F974A;
  --basalt: #14130F;
  --deep-kai: #0D2F36;
  --napali-gold: #E3B868;
  --lehua: #7A2620;
  --sea-salt: #F4EFE3;
}

/* Keyboard focus */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible {
  outline: 2px solid var(--napali-gold);
  outline-offset: 3px;
}

/* Skip link */
.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  padding: 10px 16px; background: var(--olive); color: var(--basalt);
  font-family: 'Jost', sans-serif; font-size: 14px; text-decoration: none;
}
.skip-link:focus { top: 12px; }

/* Hamburger menu */
.menu-toggle {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 14px;
  border: 1px solid rgba(159,151,74,.6); background: transparent; color: #F2EBDA;
  font-family: 'Jost', sans-serif; font-size: 13px; font-weight: 500; text-transform: uppercase; cursor: pointer;
}
.menu-toggle:hover { border-color: var(--napali-gold); }
.menu-bars { display: inline-flex; flex-direction: column; gap: 4px; width: 20px; }
.menu-bars span { display: block; height: 1.5px; background: currentColor; }
body.menu-open { overflow: hidden; }
.site-menu {
  position: fixed; inset: 0; z-index: 200; overflow-y: auto;
  background: #0E0D0A; color: #F2EBDA; font-family: 'Jost', sans-serif;
}
.site-menu[hidden] { display: none; }
.site-menu-inner { max-width: 1240px; margin: 0 auto; padding: 16px 24px 64px; }
.site-menu-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-bottom: 16px; border-bottom: 1px solid rgba(159,151,74,.35); }
.site-menu-brand { display: flex; align-items: center; gap: 14px; color: #F2EBDA; text-decoration: none; font-family: 'Cormorant Garamond', serif; font-size: 22px; text-transform: uppercase; }
.site-menu-brand img { border-radius: 5px; box-shadow: 0 0 0 1px rgba(159,151,74,.7); }
.menu-close {
  width: 48px; height: 48px; border: 1px solid rgba(159,151,74,.6); background: transparent; color: #F2EBDA;
  font-size: 30px; line-height: 1; cursor: pointer;
}
.site-menu-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 40px 48px; margin-top: 48px; }
.menu-group { display: flex; flex-direction: column; gap: 12px; }
.menu-top {
  font-family: 'Cormorant Garamond', serif; font-size: 32px; line-height: 1.1;
  color: #F7F1E1; text-decoration: none; padding-bottom: 10px; border-bottom: 1px solid rgba(159,151,74,.35);
}
.menu-top[aria-current="page"] { color: var(--napali-gold); }
.menu-top:hover { color: var(--napali-gold); }
.menu-group ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.menu-group ul a { display: inline-flex; align-items: center; min-height: 36px; color: #CFC6A6; text-decoration: none; font-size: 15px; }
.menu-group ul a:hover { color: #F2EBDA; }
.site-menu-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: 56px; padding-top: 28px; border-top: 1px solid rgba(159,151,74,.35); }
.menu-cta {
  display: inline-flex; align-items: center; min-height: 50px; padding: 0 26px;
  background: var(--olive); color: var(--basalt); text-decoration: none; font-size: 13px; font-weight: 500; text-transform: uppercase;
}
.menu-cta-ghost { background: transparent; color: #F2EBDA; border: 1px solid rgba(242,235,218,.55); }
.menu-small { margin-left: auto; color: #B9B07A; font-size: 13px; }

/* Phones and small tablets */
@media (max-width: 720px) {
  .site section > div { padding-top: 64px !important; padding-bottom: 64px !important; }
  .site header > div { padding: 10px 16px !important; flex-wrap: nowrap !important; gap: 12px !important; }
  .site header > div > a:first-child { gap: 12px !important; min-width: 0; }
  .site header > div > a:first-child img { width: 48px !important; height: 48px !important; flex: none; }
  .site header > div > a:first-child span:first-of-type { font-size: 17px !important; }
  .menu-toggle { flex: none; padding: 0 12px; }
  .site section > div, .site footer > div { padding-left: 16px !important; padding-right: 16px !important; }
  .site article, .site form { padding-left: 22px !important; padding-right: 22px !important; }
  /* keep the photo caption clear of the hero buttons */
  .site section.hero-bg > div:first-child { padding-bottom: 104px !important; }
  .site section.hero-bg > div:last-child { padding: 0 !important; left: 16px !important; }
}

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