/* ==========================================================================
   High Ground Crossing RV Park — Design System
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Bevan&family=Jost:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=Courier+Prime:wght@400;700&display=swap');

:root {
  /* Color tokens — pulled from the logo */
  --pine-deep: #16261a;
  --pine: #22381f;
  --forest-mid: #33502c;
  --bark: #5a3820;
  --bark-light: #83592f;
  --wood-plank: #7a4d28;
  --cream: #f3e8cd;
  --cream-dim: #e5d5ac;
  --gold: #d7a94c;
  --gold-bright: #eec06a;
  --ember: #d9793a;
  --sky-dawn: #f2c368;

  --shadow-deep: 0 20px 50px rgba(10, 15, 8, 0.45);
  --shadow-soft: 0 8px 24px rgba(10, 15, 8, 0.25);

  --font-display: 'Bevan', 'Georgia', serif;
  --font-body: 'Jost', -apple-system, sans-serif;
  --font-mono: 'Courier Prime', monospace;

  --max-width: 1240px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

body {
  font-family: var(--font-body);
  background: var(--cream);
  color: var(--pine-deep);
  line-height: 1.6;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 32px;
}

/* --------------------------------------------------------------------------
   Wood-grain / canvas texture utilities (CSS-generated, no external images)
   -------------------------------------------------------------------------- */

.tex-wood-dark {
  background-color: var(--pine-deep);
  background-image:
    repeating-linear-gradient(90deg, rgba(0,0,0,0.12) 0px, transparent 2px, transparent 6px),
    linear-gradient(180deg, rgba(0,0,0,0.15), rgba(0,0,0,0.05) 40%, rgba(0,0,0,0.25));
}

.tex-wood-plank {
  background-color: var(--wood-plank);
  background-image:
    repeating-linear-gradient(0deg, rgba(0,0,0,0.08) 0, rgba(0,0,0,0.08) 1px, transparent 1px, transparent 5px),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.03) 0px, transparent 3px, transparent 90px, rgba(0,0,0,0.06) 92px),
    linear-gradient(180deg, rgba(255,255,255,0.06), rgba(0,0,0,0.12));
}

.tex-canvas {
  background-color: var(--cream);
  background-image:
    radial-gradient(rgba(90,56,32,0.05) 1px, transparent 1px);
  background-size: 4px 4px;
}

/* --------------------------------------------------------------------------
   Mountain ridge divider (signature element — echoes the logo silhouette)
   -------------------------------------------------------------------------- */

.ridge-divider {
  position: relative;
  width: 100%;
  height: 90px;
  overflow: hidden;
  line-height: 0;
}
.ridge-divider svg {
  width: 100%;
  height: 100%;
  display: block;
}
.ridge-divider.flip { transform: scaleY(-1); }

/* --------------------------------------------------------------------------
   Carved wood plaque — signature panel treatment for section headers
   -------------------------------------------------------------------------- */

.plaque {
  display: inline-block;
  position: relative;
  padding: 14px 38px;
  background: var(--wood-plank);
  background-image:
    repeating-linear-gradient(90deg, rgba(0,0,0,0.08) 0px, transparent 2px, transparent 8px),
    linear-gradient(180deg, rgba(255,255,255,0.08), rgba(0,0,0,0.18));
  border-radius: 6px;
  box-shadow:
    inset 0 0 0 2px rgba(243,232,205,0.15),
    inset 0 2px 4px rgba(255,255,255,0.15),
    inset 0 -3px 6px rgba(0,0,0,0.35),
    var(--shadow-soft);
  clip-path: polygon(
    2% 12%, 10% 0, 90% 0, 98% 12%,
    100% 88%, 90% 100%, 10% 100%, 0% 88%
  );
}

.plaque .eyebrow {
  font-family: var(--font-mono);
  font-size: 1.06rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-bright);
  display: block;
  margin-bottom: 4px;
}

.plaque h2, .plaque h1 {
  font-family: var(--font-display);
  color: var(--cream);
  font-size: clamp(1.6rem, 3.2vw, 2.6rem);
  letter-spacing: 0.02em;
  text-shadow: 0 2px 0 rgba(0,0,0,0.35);
}

.section-head {
  text-align: center;
  margin-bottom: 56px;
}

.section-head p.lede {
  max-width: 640px;
  margin: 18px auto 0;
  color: var(--bark);
  font-size: 1.05rem;
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  letter-spacing: 0.03em;
  font-size: 1rem;
  padding: 16px 34px;
  border-radius: 4px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.btn-primary {
  background: linear-gradient(180deg, var(--gold-bright), var(--gold));
  color: var(--pine-deep);
  box-shadow: 0 6px 0 #a97c2f, var(--shadow-soft);
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 0 #a97c2f, var(--shadow-deep);
}
.btn-primary:active {
  transform: translateY(2px);
  box-shadow: 0 3px 0 #a97c2f;
}

.btn-lg {
  font-size: 1.25rem;
  padding: 20px 46px;
}

.btn-outline {
  background: transparent;
  border-color: var(--cream);
  color: var(--cream);
}
.btn-outline:hover {
  background: rgba(243,232,205,0.1);
}

.btn-dark {
  background: var(--pine-deep);
  color: var(--cream);
}
.btn-dark:hover { background: var(--pine); }

/* --------------------------------------------------------------------------
   Header / Navigation
   -------------------------------------------------------------------------- */

.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  background: rgba(22, 38, 26, 0.0);
  transition: background 0.35s ease, box-shadow 0.35s ease, padding 0.35s ease;
  padding: 18px 0;
}
.site-header.scrolled {
  background: rgba(22, 38, 26, 0.94);
  box-shadow: var(--shadow-soft);
  padding: 10px 0;
  backdrop-filter: blur(6px);
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.brand {
  display: flex;
  align-items: center;
  gap: 14px;
}
.brand img {
  height: 58px;
  width: auto;
  transition: height 0.35s ease;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.4));
}
.site-header.scrolled .brand img { height: 46px; }

.brand-text {
  font-family: var(--font-display);
  color: var(--cream);
  line-height: 1.1;
}
.brand-text .top {
  font-size: 1.15rem;
  letter-spacing: 0.03em;
}
.brand-text .bottom {
  font-family: var(--font-mono);
  font-size: 0.96rem;
  letter-spacing: 0.28em;
  color: var(--gold-bright);
  text-transform: uppercase;
}

.main-nav ul {
  display: flex;
  gap: 34px;
  list-style: none;
  align-items: center;
}
.main-nav a {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.98rem;
  color: var(--cream);
  letter-spacing: 0.02em;
  position: relative;
  padding: 4px 0;
}
.main-nav a::after {
  content: '';
  position: absolute;
  left: 0; bottom: -3px;
  width: 0%;
  height: 2px;
  background: var(--gold-bright);
  transition: width 0.25s ease;
}
.main-nav a:hover::after,
.main-nav a.active::after { width: 100%; }
.main-nav a.active { color: var(--gold-bright); }

.main-nav a.nav-cta {
  font-family: var(--font-display);
  background: linear-gradient(180deg, var(--gold-bright), var(--gold));
  color: var(--pine-deep);
  padding: 10px 22px;
  border-radius: 4px;
  font-size: 0.9rem;
  box-shadow: 0 4px 0 #a97c2f;
  transition: transform 0.2s ease, background 0.2s ease;
}
.main-nav a.nav-cta:hover { transform: translateY(-2px); background: linear-gradient(180deg, var(--gold), var(--gold-bright)); }

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
}
.nav-toggle span {
  width: 26px;
  height: 3px;
  background: var(--cream);
  border-radius: 2px;
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.site-footer {
  background: var(--pine-deep);
  color: var(--cream-dim);
  padding: 70px 0 26px;
  position: relative;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 1.1fr;
  gap: 40px;
  padding-bottom: 44px;
  border-bottom: 1px solid rgba(243,232,205,0.15);
}

.footer-brand img { height: 64px; margin-bottom: 14px; }
.footer-brand p { font-size: 0.92rem; color: var(--cream-dim); max-width: 280px; }

.footer-col h4 {
  font-family: var(--font-display);
  color: var(--gold-bright);
  font-size: 0.95rem;
  letter-spacing: 0.05em;
  margin-bottom: 16px;
  text-transform: uppercase;
}
.footer-col ul { list-style: none; }
.footer-col li { margin-bottom: 10px; font-size: 0.92rem; }
.footer-col a:hover { color: var(--gold-bright); }

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 22px;
  font-size: 1.14rem;
  font-family: var(--font-mono);
  color: rgba(243,232,205,0.55);
  flex-wrap: wrap;
  gap: 10px;
}

.social-row { display: flex; gap: 14px; }
.social-row a {
  width: 36px; height: 36px;
  border: 1px solid rgba(243,232,205,0.3);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.social-row a:hover { background: var(--gold); border-color: var(--gold); }

/* --------------------------------------------------------------------------
   Page hero (interior pages)
   -------------------------------------------------------------------------- */

.page-hero {
  position: relative;
  padding: 190px 0 100px;
  background: linear-gradient(180deg, var(--pine-deep), var(--pine) 60%, var(--forest-mid));
  text-align: center;
  overflow: hidden;
}
.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 0%, rgba(215,169,76,0.25), transparent 60%);
}
.page-hero .eyebrow {
  font-family: var(--font-mono);
  color: var(--gold-bright);
  letter-spacing: 0.3em;
  font-size: 1.1rem;
  text-transform: uppercase;
  position: relative;
}
.page-hero h1 {
  font-family: var(--font-display);
  color: var(--cream);
  font-size: clamp(2.4rem, 6vw, 4rem);
  margin-top: 14px;
  position: relative;
  text-shadow: 0 4px 0 rgba(0,0,0,0.3);
}
.page-hero p {
  max-width: 560px;
  margin: 18px auto 0;
  color: var(--cream-dim);
  position: relative;
}

/* --------------------------------------------------------------------------
   Shared section spacing
   -------------------------------------------------------------------------- */

section { padding: 100px 0; }
@media (max-width: 768px) { section { padding: 70px 0; } }

.tag-label {
  font-family: var(--font-mono);
  font-size: 1.08rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--ember);
}

/* Scroll reveal */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.in-view { opacity: 1; transform: translateY(0); }
.reveal.delay-1 { transition-delay: 0.1s; }
.reveal.delay-2 { transition-delay: 0.2s; }
.reveal.delay-3 { transition-delay: 0.3s; }

/* --------------------------------------------------------------------------
   Responsive nav
   -------------------------------------------------------------------------- */

@media (max-width: 1100px) {
  .nav-toggle { display: flex; }
  .main-nav {
    position: fixed;
    top: 0; right: 0;
    width: 78%;
    max-width: 340px;
    height: 100vh;
    background: var(--pine-deep);
    transform: translateX(100%);
    transition: transform 0.35s ease;
    box-shadow: -10px 0 30px rgba(0,0,0,0.3);
    padding: 100px 34px 40px;
  }
  .main-nav.open { transform: translateX(0); }
  .main-nav ul {
    flex-direction: column;
    align-items: flex-start;
    gap: 26px;
  }
  .nav-cta { margin-top: 10px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 560px) {
  .footer-grid { grid-template-columns: 1fr; }
  .container { padding: 0 20px; }
}

/* Keeps the header's logo + brand text compact enough to always stay on
   one line on phones. Without this, "High Ground Crossing" can wrap to
   two lines on narrow screens, making the header taller than expected and
   causing it to overlap the hero content below it (the header floats on
   top of the hero rather than pushing it down). */
@media (max-width: 480px) {
  .brand { gap: 10px; }
  .brand img { height: 36px; }
  .site-header.scrolled .brand img { height: 32px; }
  .brand-text .top { font-size: 0.82rem; white-space: nowrap; }
  .brand-text .bottom { font-size: 0.62rem; letter-spacing: 0.18em; white-space: nowrap; }
}

/* The homepage hero centers its content across the full viewport height.
   On short mobile viewports that centered content can land close enough
   to the fixed header to overlap it. This guarantees a minimum clearance
   on phones without affecting the centered look on taller/desktop screens. */
@media (max-width: 640px) {
  .hero { min-height: calc(100vh + var(--announcement-h, 0px)) !important; }
  .hero-content { padding-top: calc(100px + var(--announcement-h, 0px)); }
}

/* --------------------------------------------------------------------------
   Responsive grids
   Several sections use inline grid-template-columns for layout; these rules
   collapse them at tablet and phone widths. !important is required because
   inline styles otherwise always win over stylesheet rules.
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr) !important; }
  .grid-2 { grid-template-columns: 1fr !important; }
  .card-split { grid-template-columns: 1fr !important; }
  .card-media { min-height: 200px !important; }
}

@media (max-width: 640px) {
  .grid-3, .grid-4 { grid-template-columns: 1fr !important; }
}

/* --------------------------------------------------------------------------
   Announcement banner (index.html only)
   Hidden unless a message is set — see announcement/announcement.txt for
   how to turn it on/off, and admin/announcement-editor.php for the
   password-protected editor.
   -------------------------------------------------------------------------- */

.announcement-bar {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1002;
  box-shadow: 0 2px 10px rgba(0,0,0,0.2);
}
.announcement-bar.is-visible { display: block; }

/* Color themes — pick one of these seven, never a raw color, so the banner
   always stays on-brand. Applied as a modifier class alongside
   .announcement-bar by main.js, based on announcement.txt's color field. */
.announcement-bar--gold  { background: linear-gradient(180deg, #eec06a, #d7a94c); color: var(--pine-deep); }
.announcement-bar--pine  { background: linear-gradient(180deg, #22381f, #16261a); color: var(--cream); }
.announcement-bar--ember { background: linear-gradient(180deg, #f0995f, #d9793a); color: var(--pine-deep); }
.announcement-bar--cream { background: linear-gradient(180deg, #f3e8cd, #e5d5ac); color: var(--pine-deep); }
.announcement-bar--red   { background: linear-gradient(180deg, #c2503c, #8f2a1c); color: var(--cream); }
.announcement-bar--blue  { background: linear-gradient(180deg, #3d7d8f, #234a56); color: var(--cream); }
.announcement-bar--white { background: linear-gradient(180deg, #ffffff, #ede8db); color: var(--pine-deep); }

.announcement-bar__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 46px;
  position: relative;
  text-align: center;
}
.announcement-bar__icon { flex-shrink: 0; margin-top: 2px; align-self: flex-start; }
.announcement-bar__text {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  line-height: 1.5;
}
.announcement-bar__text strong { font-weight: 700; }
.announcement-bar__close {
  position: absolute;
  right: 10px;
  top: 14px;
  background: none;
  border: none;
  color: inherit;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  padding: 8px 10px;
  opacity: 0.65;
}
.announcement-bar__close:hover { opacity: 1; }

/* Pushes the fixed header down by the banner's measured height (set via a
   CSS variable in JS) — only ever applies when body.has-announcement is
   present, which only happens on index.html when a message is showing. */
body.has-announcement .site-header { top: var(--announcement-h, 0px); }

@media (max-width: 640px) {
  .announcement-bar__inner { padding: 10px 40px; gap: 8px; }
  .announcement-bar__text { font-size: 0.85rem; }
}

/* Amenity labels on campground.html — switched from the heavy Bevan
   display font (meant for large headlines) to the body font at a
   semibold weight, which reads far more clearly at this small size. */
.amenity-title {
  font-family: var(--font-body);
  font-weight: 600;
  color: var(--cream);
  font-size: 1.05rem;
  letter-spacing: 0.02em;
  margin-bottom: 6px;
}

/* --------------------------------------------------------------------------
   Site type cards (campground.html) — optional framed thumbnail photo,
   or a "Currently Unavailable" badge, both sitting on the card's colored
   header. If neither is present, the colored gradient alone is the
   fallback — exactly as it looked before this was added.
   -------------------------------------------------------------------------- */

.site-type-media {
  height: 170px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.site-type-thumb {
  height: 76%;
  max-width: 78%;
  width: auto;
  object-fit: cover;
  border: 4px solid var(--cream);
  border-radius: 4px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.35);
}

.site-type-unavailable {
  display: inline-block;
  padding: 16px 26px;
  background: linear-gradient(180deg, rgba(0,0,0,0.12), rgba(0,0,0,0.32));
  border-radius: 6px;
  box-shadow:
    inset 0 0 0 2px rgba(243,232,205,0.4),
    inset 0 2px 4px rgba(255,255,255,0.12),
    inset 0 -3px 6px rgba(0,0,0,0.3);
  clip-path: polygon(
    3% 14%, 12% 0, 88% 0, 97% 14%,
    100% 86%, 88% 100%, 12% 100%, 0% 86%
  );
  text-align: center;
}
.site-type-unavailable span {
  display: block;
  font-family: var(--font-display);
  color: var(--cream);
  font-size: 1.2rem;
  line-height: 1.3;
  text-shadow: 0 2px 0 rgba(0,0,0,0.35);
}

@media (max-width: 480px) {
  .site-type-unavailable { padding: 12px 18px; }
  .site-type-unavailable span { font-size: 1.02rem; }
}