/* ==========================================================================
   GRAHAM SHADOWS RV & MOBILE HOME PARK — site theme
   Lead color: pine-teal (a deeper step of the Five-Star teal). Accent: family gold.
   Sky blue carries the "Mt. Graham" mountain-view story. Loaded after base.css.
   ========================================================================== */
:root {
  --brand: #1f6660;
  --brand-deep: #0e3a36;
  --brand-soft: #e4f1ef;
  --accent: #f4d35e;
  --accent-hover: #ebc83f;
  --on-accent: #0e3a36;
  --heading: #0e3a36;
  --eyebrow: #1f6660;
  --link: #1f6660;
  --tint: #f1f6f5;
}

/* Wordmark */
.brand__mark { width: 2.9rem; height: 2.9rem; flex: none; }
.brand__text { display: grid; gap: .3rem; }
.brand__text strong { font: 900 1.3rem/1 var(--font-display); letter-spacing: -.02em; color: var(--pine-deep); }
.brand__text small { font: 700 .6rem/1.1 var(--font-sans); letter-spacing: .17em; text-transform: uppercase; color: var(--eyebrow); }
.footer-brand .brand__text strong { color: #fff; }
.footer-brand .brand__text small { color: var(--accent); }
.footer-brand .brand__mark { width: 3.4rem; height: 3.4rem; }
.footer-brand .brand { color: #fff; }

/* Ridge dividers — the recurring mountain motif */
.ridge { position: absolute; left: 0; right: 0; bottom: -1px; z-index: 3; width: 100%; height: clamp(34px, 6vw, 84px); fill: var(--paper); pointer-events: none; }
.ridge--tint { fill: var(--tint); }

/* Full-bleed mountain hero */
.hero--mountain { background: var(--pine-deep); }
.hero__bg { position: absolute; inset: 0; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 58%; }
.hero--mountain::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(14, 58, 54, .72) 0%, rgba(14, 58, 54, .42) 42%, rgba(8, 28, 34, .9) 100%);
}
.hero--mountain .hero__content {
  position: relative; z-index: 2; display: grid; align-content: end; gap: 1.25rem; justify-items: start;
  min-height: clamp(30rem, 74vh, 44rem); padding-block: clamp(3rem, 8vw, 6rem) clamp(5.5rem, 10vw, 8rem);
}
.hero--mountain h1 { max-width: 15em; }
.hero--mountain .lead { color: rgba(255, 255, 255, .9); max-width: 38rem; }
.facts { position: relative; z-index: 4; margin-top: clamp(-2.75rem, -4vw, -2rem); }

.page-hero { padding-bottom: clamp(4rem, 8vw, 6rem); }

/* Route chips: how close everything is */
.route { display: flex; flex-wrap: wrap; gap: .6rem; list-style: none; }
.route li { display: inline-flex; align-items: center; gap: .5rem; padding: .5rem .9rem; border: 1px solid color-mix(in srgb, var(--brand) 28%, transparent); background: #fff; border-radius: 99px; font-size: .88rem; font-weight: 700; color: var(--brand); }
.route .icon { color: var(--eyebrow); }

/* The park sign */
.sign { background: #fff; border-radius: var(--radius-lg); padding: .9rem; box-shadow: var(--shadow-md); border: 1px solid var(--line); }
.sign img { width: 100%; border-radius: 8px; }
.sign figcaption { font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); padding: .75rem .35rem .1rem; }

/* RV callout */
.rv-callout {
  display: grid; grid-template-columns: auto 1fr auto; gap: 1.5rem 2rem; align-items: center;
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-deep) 100%); color: #fff;
  border-radius: var(--radius-lg); padding: clamp(1.75rem, 4vw, 2.75rem); box-shadow: var(--shadow-lg);
}
.rv-callout h2, .rv-callout h3 { color: #fff; }
.rv-callout p { color: rgba(255, 255, 255, .86); margin-top: .4rem; }
.rv-callout .icon-badge { width: 4.5rem; height: 4.5rem; background: rgba(255, 255, 255, .12); color: var(--accent); }
.rv-callout .icon-badge .icon { width: 2.3rem; height: 2.3rem; }

@media (max-width: 960px) {
  .rv-callout { grid-template-columns: 1fr; justify-items: start; }
}

/* Rates at a glance */
.rate-board { display: grid; gap: .65rem; }
.rate-row {
  display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "lot price chip" "dep dep dep";
  gap: .35rem 1.1rem; align-items: center;
  padding: 1rem 1.25rem; background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-sm); text-decoration: none; color: inherit;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s;
}
.rate-row:hover { transform: translateX(4px); box-shadow: var(--shadow-md); border-color: color-mix(in srgb, var(--brand) 40%, var(--line)); }
.rate-row__lot { grid-area: lot; min-width: 4.6rem; font: 700 .95rem/1.2 var(--font-display); color: var(--heading); }
.rate-row__price { grid-area: price; font: 700 1.5rem/1 var(--font-display); color: var(--heading); font-variant-numeric: tabular-nums; }
.rate-row__price small { font: 600 .78rem var(--font-sans); color: var(--ink-soft); margin-left: .2rem; }
.rate-row__dep { grid-area: dep; font-size: .88rem; color: var(--ink-soft); }
.rate-row .chip { grid-area: chip; }
.rate-row--soon { background: var(--tint); box-shadow: none; }