/* Allenberry — base tokens & typography */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,ital,wght@9..144,0,300..700;9..144,1,300..700&family=Cormorant+Garamond:ital,wght@0,300..600;1,300..600&family=Playfair+Display:ital,wght@0,400..700;1,400..700&family=EB+Garamond:ital,wght@0,400..600;1,400..600&family=DM+Serif+Display:ital@0;1&family=Libre+Caslon+Text:ital,wght@0,400;0,700;1,400&family=Instrument+Serif:ital@0;1&family=Cormorant:ital,wght@0,300..600;1,300..600&family=Inter:wght@300..600&family=Work+Sans:wght@300..600&family=Manrope:wght@300..600&family=Space+Grotesk:wght@300..600&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ---- PALETTE: Creek (default) ---- brand: #365d78 */
  --bg: #f4f1ea;
  --bg-elev: #fbf8f2;
  --ink: #1a2530;
  --ink-soft: #32414e;
  --ink-mute: #6a7582;
  --rule: #d2d4cf;
  --accent: #365d78;     /* brand slate-blue */
  --accent-2: #8a6d4a;   /* warm stone */
  --cream: #e8e2d2;
  --deep: #365d78;
  --shadow: 0 1px 2px rgba(54,93,120,.08), 0 12px 40px rgba(54,93,120,.14);

  /* ---- TYPE ---- */
  --display: 'Fraunces', 'Cormorant Garamond', Georgia, serif;
  --body: 'Inter', 'Work Sans', system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;

  /* ---- SPACING ---- */
  --gutter: clamp(20px, 4vw, 56px);
  --max: 1360px;
}

[data-palette="hearth"] {
  --bg: #f4ede1;
  --bg-elev: #fbf5ea;
  --ink: #1a2530;
  --ink-soft: #32414e;
  --ink-mute: #7a6452;
  --rule: #d9c6ab;
  --accent: #365d78;     /* brand */
  --accent-2: #9a5a2e;   /* warm amber for contrast */
  --cream: #ecdfc6;
  --deep: #365d78;
}

[data-palette="forest"] {
  --bg: #eaeef0;
  --bg-elev: #f4f7f8;
  --ink: #365d78;
  --ink-soft: #2a3742;
  --ink-mute: #5a6a78;
  --rule: #c9d1d6;
  --accent: #365d78;
  --accent-2: #233d4f;
  --cream: #dae2e6;
  --deep: #1a3145;
}

[data-type="classic"]   { --display: 'Cormorant Garamond', Georgia, serif; --body: 'Work Sans', system-ui, sans-serif; }
[data-type="modern"]    { --display: 'Fraunces', serif; --body: 'Inter', system-ui, sans-serif; }
[data-type="mixed"]     { --display: 'Fraunces', serif; --body: 'Work Sans', system-ui, sans-serif; }
[data-type="editorial"] { --display: 'Playfair Display', serif; --body: 'Inter', system-ui, sans-serif; }
[data-type="stately"]   { --display: 'EB Garamond', Georgia, serif; --body: 'Inter', system-ui, sans-serif; }
[data-type="bold"]      { --display: 'DM Serif Display', Georgia, serif; --body: 'Work Sans', system-ui, sans-serif; }
[data-type="heritage"]  { --display: 'Libre Caslon Text', Georgia, serif; --body: 'Work Sans', system-ui, sans-serif; }
/* New modern options */
[data-type="instrument"] { --display: 'Instrument Serif', Georgia, serif; --body: 'Inter', system-ui, sans-serif; }
[data-type="airy"]       { --display: 'Cormorant', Georgia, serif; --body: 'Manrope', system-ui, sans-serif; }
[data-type="grotesk"]    { --display: 'Fraunces', serif; --body: 'Space Grotesk', system-ui, sans-serif; }
[data-type="contrast"]   { --display: 'Playfair Display', serif; --body: 'Space Grotesk', system-ui, sans-serif; }
[data-type="journal"]    { --display: 'Instrument Serif', Georgia, serif; --body: 'Manrope', system-ui, sans-serif; }
/* A modern twist on heritage — Caslon-era serif, warm geometric body, tighter spacing */
[data-type="modheritage"] {
  --display: 'Libre Caslon Text', 'EB Garamond', Georgia, serif;
  --body: 'Manrope', system-ui, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--body);
  background: var(--bg);
  color: var(--ink);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }

h1,h2,h3,h4 { font-family: var(--display); font-weight: 400; letter-spacing: -0.01em; margin: 0; }
h1 { font-size: clamp(48px, 7vw, 112px); line-height: 0.95; letter-spacing: -0.025em; }
h2 { font-size: clamp(36px, 4.5vw, 68px); line-height: 1.02; letter-spacing: -0.02em; }
h3 { font-size: clamp(24px, 2.2vw, 34px); line-height: 1.1; }
h4 { font-size: clamp(18px, 1.4vw, 22px); line-height: 1.25; }

.eyebrow {
  font-family: var(--body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.marker {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-mute);
  letter-spacing: 0.06em;
}
.rule { height: 1px; background: var(--rule); border: 0; margin: 0; }
.container { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }

/* TODO(color-mix audit): this file uses color-mix(in oklab, ...) in
   ~16 rules below (placeholder gradients, button hover, ::selection,
   etc.) without an @supports fallback. color-mix has been broadly
   supported since mid-2023 (Chrome 111, Safari 16.2, Firefox 113), so
   coverage is fine in practice — but components/PagesMisc.jsx's
   InquiryPage scoped style block sets a precedent for guarding
   color-mix with @supports. If we want uniform defensive coverage,
   add @supports gates for each rule below. Out of scope for the
   inquiry-form restyle commit (199192c). */

/* Placeholder image — branded, striped, labeled */
.ph {
  background:
    repeating-linear-gradient(135deg, color-mix(in oklab, var(--accent), transparent 82%) 0 10px, transparent 10px 20px),
    linear-gradient(155deg,
      color-mix(in oklab, var(--accent), var(--cream) 72%) 0%,
      color-mix(in oklab, var(--accent), var(--cream) 40%) 55%,
      color-mix(in oklab, var(--accent), var(--deep) 40%) 100%);
  color: color-mix(in oklab, var(--accent), var(--ink) 60%);
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  padding: 16px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  overflow: hidden;
  position: relative;
}
.ph::before {
  content: "";
  position: absolute;
  inset: 12px;
  border: 1px solid color-mix(in oklab, var(--accent), transparent 55%);
  pointer-events: none;
}
.ph-dims {
  position: absolute;
  bottom: 16px;
  right: 16px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 8px;
  color: color-mix(in oklab, var(--accent), var(--ink) 60%);
  background: color-mix(in oklab, var(--cream), transparent 30%);
  border: 1px solid color-mix(in oklab, var(--accent), transparent 55%);
  z-index: 1;
  pointer-events: none;
}
.ph-filename {
  position: absolute;
  top: 16px;
  left: 16px;
  right: 16px;
  max-width: max-content;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: none;
  padding: 4px 8px;
  color: color-mix(in oklab, var(--accent), var(--ink) 60%);
  background: color-mix(in oklab, var(--cream), transparent 30%);
  border: 1px solid color-mix(in oklab, var(--accent), transparent 55%);
  z-index: 1;
  pointer-events: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ph::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 80% at 20% 15%, color-mix(in oklab, var(--accent), transparent 75%) 0%, transparent 60%);
  pointer-events: none;
}
.ph > *:not(.ph-dims):not(.ph-filename) { position: relative; z-index: 1; color: color-mix(in oklab, var(--accent), var(--ink) 45%); }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  font-family: var(--body);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-radius: 2px;
  transition: all .2s ease;
  cursor: pointer;
  white-space: nowrap;
}
.btn.primary { background: var(--accent); color: #fbf8f2; }
.btn.primary:hover { background: color-mix(in oklab, var(--accent), #000 18%); }
.btn.ghost { background: transparent; color: var(--accent); border: 1px solid var(--accent); }
.btn.ghost:hover { background: var(--accent); color: #fbf8f2; }
.btn.light { background: var(--bg); color: var(--ink); }
.btn.light:hover { background: var(--cream); }
.btn.link {
  padding: 0;
  background: none;
  border-bottom: 1px solid currentColor;
  border-radius: 0;
  padding-bottom: 3px;
  letter-spacing: 0.08em;
}

/* ---- Flybook permit-reservation button override ----
   SITE DESIGN RULE: every booking action across the site uses the
   filled-pill primary treatment, regardless of which vendor handles
   the booking. Cloudbeds (Stay) renders its own fixed-pill button;
   this Flybook (permits) button is restyled here to match — same
   brand-blue background, white text, .btn padding/font, pill radius.
   See HomeHero in components/Home1.jsx for the related outlined-pill
   rule that governs the "Live at Allenberry" secondary button.

   Resilience notes:
   - Flybook ships an inline `style="background-color: #ee5505;"` on
     the button. We can't remove that without forking their script,
     so we defeat it with !important on `background`.
   - The bootstrapper may regenerate the button DOM. All of these
     rules are class-based, so they reapply on re-render.
   - Visible label is injected via ::before. The native text content
     ("BOOK NOW") is hidden with `font-size: 0` rather than removed,
     which keeps it in the accessibility tree as a fallback if the
     pseudo-element ever fails. Pair with `aria-label` on the button
     in JSX for screen-reader correctness.
   - Don't relax !important without verifying that Flybook hasn't
     bumped specificity in their stylesheet. */
.flybook-book-now-button {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  padding: 14px 22px !important;
  font-family: var(--body) !important;
  font-size: 0;            /* hides the native "BOOK NOW" text */
  font-weight: 500 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  background: var(--accent) !important;
  color: #fbf8f2 !important;
  border: none !important;
  border-radius: 999px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  transition: all .2s ease !important;
}
.flybook-book-now-button::before {
  content: "Reserve Fishing Permit";
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.14em;
}
.flybook-book-now-button:hover {
  background: color-mix(in oklab, var(--accent), #000 18%) !important;
}

/* Sections */
.section { padding: clamp(72px, 10vw, 140px) 0; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 32px; margin-bottom: 48px; }
.section-head .eyebrow { flex: 0 0 auto; }

/* Utility grid */
.grid { display: grid; gap: 24px; }
.two { grid-template-columns: 1fr 1fr; }
.three { grid-template-columns: repeat(3, 1fr); }
.four { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 900px) {
  .two, .three, .four { grid-template-columns: 1fr; }
  .section-head { flex-direction: column; align-items: flex-start; gap: 12px; }
}

/* Scrollbar subtle */
::selection { background: color-mix(in oklab, var(--accent), transparent 70%); }

/* Animations */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
.reveal { animation: fadeUp .8s ease both; }

/* ---- Cloudbeds Immersive Experience 2.0 — <cb-book-now-button> fallback ----
   Each <cb-book-now-button> wraps a fallback <a> child with our existing
   button styling. Before the custom element upgrades (or if the widget
   script fails to load), the fallback <a> is what the user sees and clicks.
   `display: contents` on the non-defined host removes it from layout so the
   fallback sits correctly in flex/flow containers. Once the element is
   defined, Cloudbeds' shadow-DOM button takes over and we hide the fallback
   to avoid double-rendering. */
cb-book-now-button:not(:defined) { display: contents; }
cb-book-now-button:defined > a { display: none; }