/* ============================================================
   oceanparksm.com — SHARED DESIGN TOKENS
   One source of truth. Every page references these tokens;
   nothing downstream declares a raw color, font, or type size.
   Tints/shades: color-mix() on these tokens only.
   Approved design: "Sunset at the Pier" v1 · 2026-07-11
   ============================================================ */
:root{
  /* -- Font (ONE font — weights do the work) ---------------- */
  --font-site: 'Nunito', 'Segoe UI', system-ui, sans-serif;

  /* -- Palette : "Sunset at the Pier" ------------------------ */
  --op-ink:    #14324A;   /* deep pacific navy — all text      */
  --op-ocean:  #0E7FA5;   /* pacific blue — links, accents     */
  --op-sunset: #FF6B4A;   /* coral — primary CTA               */
  --op-sun:    #FFB637;   /* sun gold — secondary accent       */
  --op-palm:   #2E9E6B;   /* palm green — tips / success       */
  --op-sand:   #F6E7CE;   /* warm sand — soft section bg       */
  --op-foam:   #FDFAF3;   /* foam white — page background      */
  --op-white:  #FFFFFF;   /* cards                             */

  /* -- Type ladder ------------------------------------------- */
  --fs-hero:  clamp(2.3rem, 5vw, 3.6rem);   --fw-hero: 900;
  --fs-h2:    clamp(1.5rem, 2.6vw, 1.9rem); --fw-h2: 900;
  --fs-h3:    1.2rem;                        --fw-h3: 800;
  --fs-body:  1.05rem;                       --fw-body: 400;
  --fs-small: .9rem;

  /* -- Shape --------------------------------------------------- */
  --radius-card: 18px;
  --radius-pill: 999px;
  --shadow-card: 0 6px 18px color-mix(in srgb, var(--op-ink) 12%, transparent);

  /* -- Composites (defined once, referenced everywhere) -------- */
  --grad-hero: linear-gradient(180deg,
    color-mix(in srgb, var(--op-sun) 42%, var(--op-white)) 0%,
    color-mix(in srgb, var(--op-sunset) 35%, color-mix(in srgb, var(--op-sun) 60%, var(--op-white))) 34%,
    color-mix(in srgb, var(--op-sunset) 55%, color-mix(in srgb, var(--op-sun) 55%, var(--op-white))) 62%,
    color-mix(in srgb, var(--op-sunset) 88%, var(--op-white)) 100%);
}

/* -- Shared base -------------------------------------------- */
*{margin:0;padding:0;box-sizing:border-box}
body{
  font-family:var(--font-site);
  font-size:var(--fs-body);
  font-weight:var(--fw-body);
  color:var(--op-ink);
  background:var(--op-foam);
}

/* -- "Not in service" watermark (tiled, non-interactive) ------ */
.watermark{
  position:fixed;
  inset:0;
  z-index:9998;
  pointer-events:none;
  background-repeat:repeat;
  background-position:top left;
}

/* ============================================================
   SHARED CHROME — header, buttons, kicker, newsletter, footer.
   Moved here from home.css 2026-07-13 when /stay/ became the
   second page: cross-page chrome lives in ONE place. Values
   unchanged from the approved homepage.
   ============================================================ */

/* -- Header --------------------------------------------------- */
.site-head{
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  flex-wrap:wrap;max-width:1160px;margin:0 auto;padding:16px 34px;
  background:var(--op-foam);
}
.wordmark{display:flex;flex-direction:column;line-height:1;text-decoration:none}
.wordmark .wm-top{font-size:1.45rem;font-weight:900;letter-spacing:-.02em;color:var(--op-ink)}
.wordmark .wm-top em{font-style:normal;color:var(--op-sunset)}
.wordmark svg{margin-top:3px}
.wordmark .wm-sub{
  font-size:.72rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  color:var(--op-ocean);margin-top:5px;
}
.site-nav{display:flex;gap:26px;flex-wrap:wrap}
.site-nav a{
  color:var(--op-ink);text-decoration:none;font-weight:800;font-size:.98rem;
  padding-bottom:3px;border-bottom:3px solid transparent;
}
.site-nav a:hover{border-bottom-color:var(--op-ocean)}
.site-nav a.money{color:var(--op-sunset)}
.site-nav a[aria-current="page"]{border-bottom-color:var(--op-sunset)}

/* -- Buttons ---------------------------------------------------- */
.btn{
  display:inline-block;text-decoration:none;font-weight:900;font-size:1.02rem;
  padding:15px 30px;border-radius:var(--radius-pill);
}
.btn-primary{
  background:var(--op-sunset);color:var(--op-white);
  box-shadow:0 8px 20px color-mix(in srgb, var(--op-sunset) 45%, transparent);
}
.btn-ghost{
  background:color-mix(in srgb, var(--op-white) 75%, transparent);
  color:var(--op-ink);border:3px solid var(--op-ink);
}

/* -- Kicker ------------------------------------------------------ */
.kicker{
  text-align:center;font-size:.8rem;font-weight:900;letter-spacing:.26em;
  text-transform:uppercase;color:var(--op-ocean);margin-bottom:8px;
}

/* -- Newsletter band --------------------------------------------- */
.news{background:var(--op-ink);color:var(--op-foam);padding:54px 34px;text-align:center}
.news h2{font-size:var(--fs-h2);font-weight:var(--fw-h2);text-align:center;color:var(--op-foam);margin-bottom:10px}
.news p{
  max-width:480px;margin:0 auto 26px;font-size:var(--fs-body);
  color:color-mix(in srgb, var(--op-foam) 80%, transparent);
}
.news form{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.news input{
  font-family:inherit;font-size:1rem;font-weight:700;padding:14px 20px;
  border-radius:var(--radius-pill);border:none;min-width:270px;color:var(--op-ink);
}
.news button{
  font-family:inherit;font-weight:900;font-size:1rem;padding:14px 28px;
  border-radius:var(--radius-pill);border:none;
  background:var(--op-ocean);color:var(--op-white);cursor:pointer;
}
.news-thanks{
  font-weight:800;font-size:1.05rem;
  color:color-mix(in srgb, var(--op-foam) 92%, var(--op-ocean));
}

/* ============================================================
   PHOTO HERO — date-on-photo + sunrise/sunset countdown.
   Rendered by inc/photo-hero.php on EVERY page. One block here =
   one place to change the look everywhere. Countdown math lives
   in js/sun-countdown.js (loaded once, in inc/site-footer.php).
   ============================================================ */
.page-hero{
  position:relative;
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--op-ink) 62%, transparent) 0%,
      color-mix(in srgb, var(--op-ocean) 34%, transparent) 40%,
      color-mix(in srgb, var(--op-ink) 60%, transparent) 100%),
    var(--hero-photo) center 55% / cover no-repeat;
  text-align:center;
  padding:0 24px 64px;
}
.page-hero.hero-overlap{ padding-bottom:140px; } /* room for a card overlapping the hero, e.g. /stay/'s booking box */
.page-hero .hero-body{padding-top:34px}
.page-hero .kicker{color:color-mix(in srgb, var(--op-foam) 92%, transparent)}
.page-hero h1{
  font-size:var(--fs-hero);font-weight:var(--fw-hero);letter-spacing:-.02em;
  max-width:720px;margin:0 auto 14px;color:var(--op-white);
  text-shadow:0 2px 16px color-mix(in srgb, var(--op-ink) 70%, transparent);
}
.page-hero h1 .hl{
  background:color-mix(in srgb, var(--op-ocean) 82%, transparent);
  border-radius:8px;padding:0 .18em;
}
.page-hero p{
  font-size:1.15rem;max-width:560px;margin:0 auto;font-weight:700;
  color:color-mix(in srgb, var(--op-foam) 94%, transparent);
  text-shadow:0 1px 10px color-mix(in srgb, var(--op-ink) 65%, transparent);
}
.page-hero .ctas{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:22px;position:relative;z-index:3}

/* -- Date + local time + sun countdowns, sitting on the picture -- */
.hero-strip{
  display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
  gap:8px 22px;
  margin:0 -24px;
  padding:11px 20px;
  background:color-mix(in srgb, var(--op-ink) 58%, transparent);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  border-bottom:1px solid color-mix(in srgb, var(--op-foam) 22%, transparent);
  color:var(--op-foam);
  font-weight:800;font-size:var(--fs-small);
}
.hero-strip .hs-time{color:color-mix(in srgb, var(--op-ocean) 45%, var(--op-white))}
.hero-strip .hs-ev{
  display:inline-flex;align-items:center;gap:6px;
  color:color-mix(in srgb, var(--op-foam) 88%, transparent);
}
.hero-strip .hs-ev b{color:var(--op-white);font-variant-numeric:tabular-nums}
.hero-strip .hs-sep{opacity:.5}

/* -- Footer ------------------------------------------------------ */
.site-foot{
  background:color-mix(in srgb, var(--op-ink) 92%, black);
  color:color-mix(in srgb, var(--op-foam) 62%, var(--op-ink));
  padding:34px;text-align:center;font-size:.85rem;line-height:1.9;
}
.site-foot .links{margin-bottom:10px}
.site-foot a{color:var(--op-foam);text-decoration:none;font-weight:800;margin:0 12px}
.site-foot .disclosure{
  max-width:560px;margin:0 auto 8px;
  color:color-mix(in srgb, var(--op-foam) 52%, var(--op-ink));
}