/* 2026-10-01 design pass: real webfont (was plain Arial) + an icon set for
   the feature-list spots that were text-only. Both loaded as plain CSS
   @import so every page picks them up from this one file. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&display=swap');
@import url('https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css');

:root {
  /* Meramec Bluff palette (2026-10-01) -- chosen by Al from 3 real options
     compared against the live site; pulled from the actual limestone
     bluffs the Eureka lot sits under, stained with iron-oxide runoff.
     See the published palette-options artifact for the full rationale.
     --gold/--blue/--blue-lt kept as their old names (other files reference
     them by name) but remapped to this palette's accent/muted/line colors
     so nothing else needs editing. --red stays a true error color; the
     old decorative use of --red for the header/nav accent bar below is
     switched to --gold (now the rust accent) to read as intentional. */
  --brand: #23414C; --brand-2: #2c4f5c; --red: #c0392b; --blue: #5B6670;
  --blue-lt: #E2D9C8; --gold: #E8A020; --gold-ink: #23414C; --green: #2A7A3B; --ink: #20242A; --paper: #F3EEE4;
}
* { box-sizing: border-box; }
body { margin: 0; font-family: 'Inter', Arial, Helvetica, sans-serif; color: var(--ink); background: var(--paper); }
.btn {
  display: inline-block; padding: 14px 28px; border-radius: 8px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .5px; font-size: 13px; text-decoration: none;
  border: none; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(22,74,82,.25); }
.btn-gold { background: var(--gold); color: var(--gold-ink); }
.btn-outline-brand { background: transparent; color: var(--brand); border: 2px solid var(--brand); }

header {
  background: var(--brand); padding: 18px 5%; display: flex; align-items: center;
  justify-content: space-between; position: sticky; top: 0; z-index: 10;
  border-bottom: 3px solid var(--gold);
}
header .brand { display: flex; align-items: center; gap: 10px; }
header .brand a { text-decoration: none; }
header .brand-text { color: #fff; font-weight: 800; font-size: 18px; line-height: 1.1; }
header .brand-text span { display: block; color: var(--blue); font-size: 12px; font-weight: 700; }
/* 2026-10-01: the real BigRiver logo, added to the public site for the
   first time (it previously only existed in the admin tool's own navbar).
   The logo's own text is dark navy, which disappears directly against the
   dark header -- a light plate behind it is the standard fix for a dark
   logo on a dark bar, same pattern used in the palette-options comparison
   artifact this was checked against first. */
header .brand-logo-plate { background: #fdfbf7; border-radius: 8px; padding: 6px 12px; display: inline-flex; align-items: center; }
header .brand-logo-plate img { display: block; height: 32px; width: auto; }
nav a { color: #cdd8e2; text-decoration: none; margin-left: 28px; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; }
nav a:hover, nav a.active { color: var(--gold); }

.page-hero {
  background: linear-gradient(rgba(30,42,58,.78), rgba(30,42,58,.6)), url('/img/hero-page.webp');
  background-size: cover; background-position: center;
  color: #fff; padding: 54px 5% 50px 5%; text-align: center;
}
.page-hero .eyebrow { color: var(--gold); font-weight: 800; letter-spacing: 2px; font-size: 12px; text-transform: uppercase; margin-bottom: 10px; }
.page-hero h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); font-weight: 800; margin: 0; }

section { padding: 60px 5%; max-width: 900px; margin: 0 auto; }
section.narrow { max-width: 760px; }
h2.h2 { font-size: 1.6rem; font-weight: 800; color: var(--brand); margin: 0 0 10px 0; }

/* Rich 4-column footer (2026-10-04, matches Matt's reference structure --
   quick links, full per-location directory, "we store" categories -- in
   our own palette/tokens, not his navy/amber scheme). */
footer { background: var(--brand); color: #9fb0bf; padding: 48px 5% 24px 5%; font-size: 13px; }
.footer-inner { max-width: 900px; margin: 0 auto; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 32px; margin-bottom: 32px; text-align: left; }
.footer-brand-name { font-size: 15px; font-weight: 800; color: #fff; margin-bottom: 10px; }
.footer-col h4 { font-size: 12px; font-weight: 800; color: #fff; letter-spacing: .06em; text-transform: uppercase; margin: 0 0 12px 0; }
.footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.footer-col ul a { color: #9fb0bf; text-decoration: none; }
.footer-col ul a:hover { color: var(--gold); }
.footer-loc { margin-bottom: 14px; }
.footer-loc:last-child { margin-bottom: 0; }
.footer-loc-name { font-weight: 700; color: #fff; margin-bottom: 2px; }
.footer-loc-addr { line-height: 1.5; }
.footer-loc-phone a { color: var(--gold); font-weight: 700; text-decoration: none; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.12); padding-top: 18px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; font-size: 12px; text-align: left; }
.footer-bottom a { color: #9fb0bf; text-decoration: none; }
.footer-bottom a:hover { color: var(--gold); }
@media (max-width: 720px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; text-align: center; }
}

/* FAQ */
.faq-item { border-bottom: 1px solid var(--blue-lt); padding: 22px 0; }
.faq-item h3 { margin: 0 0 8px 0; font-size: 16px; color: var(--brand); }
.faq-item p { margin: 0; font-size: 14px; line-height: 1.65; color: #3a4a5c; }

/* Contact */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.contact-grid .locs { font-size: 13.5px; line-height: 1.9; color: #3a4a5c; }
.contact-grid .locs strong { color: var(--brand); }
.form-row { margin-bottom: 14px; }
.form-row label { display: block; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--brand); margin-bottom: 5px; }
.form-row input, .form-row select, .form-row textarea {
  width: 100%; padding: 10px 12px; border: 1px solid #cddce6; border-radius: 4px; font-size: 14px; font-family: inherit;
}
.form-note { font-size: 12px; color: #8a97a3; margin-top: 8px; font-style: italic; }

/* Legal */
.legal p, .legal li { font-size: 13.5px; line-height: 1.75; color: #3a4a5c; }
.legal h3 { font-size: 15px; color: var(--brand); margin: 26px 0 8px 0; }

/* Mobile nav toggle (2026-10-01) -- the old rule just hid `nav` below
   720px with nothing replacing it, so a phone visitor had no way to reach
   any page except the homepage's own hero CTA. `.nav-toggle` is the
   hamburger button (hidden on desktop, shown here); `nav.mobile-open` is
   toggled by shared.js's toggleMobileNav(). `header` already has
   `position: sticky`, which is enough to anchor this absolutely-positioned
   dropdown without any other layout change. */
.nav-toggle {
  display: none; background: none; border: none; color: #fff; font-size: 26px;
  line-height: 1; cursor: pointer; padding: 4px 6px;
}
@media (max-width: 720px) {
  .nav-toggle { display: block; }
  nav { display: none; }
  nav.mobile-open {
    display: flex; flex-direction: column; gap: 16px; position: absolute;
    top: 100%; left: 0; right: 0; background: var(--brand); padding: 20px 6%;
    border-top: 3px solid var(--gold); box-shadow: 0 12px 20px rgba(0,0,0,.2);
  }
  nav.mobile-open a { margin-left: 0; font-size: 15px; }
  .contact-grid { grid-template-columns: 1fr; }
}

/* Blog */
section.blog-section { max-width: 1100px; }
.blog-wrap { display: grid; grid-template-columns: 1fr 280px; gap: 32px; align-items: start; }
.blog-main { min-width: 0; }
.blog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 28px; margin-top: 10px; }
.blog-card { display: block; text-decoration: none; color: inherit; border: 1px solid var(--blue-lt); border-radius: 6px; overflow: hidden; background: #fff; }
.blog-card img { width: 100%; height: 160px; object-fit: cover; display: block; }
.blog-card-body { padding: 16px; }
.blog-card-tag { font-size: 11px; font-weight: 800; color: var(--green); letter-spacing: .06em; text-transform: uppercase; margin-bottom: 6px; }
.blog-card-body h2 { font-size: 16px; color: var(--brand); margin: 0 0 8px 0; }
.blog-card-body p { font-size: 13.5px; color: #3a4a5c; line-height: 1.6; margin: 0 0 10px 0; }
.blog-meta { font-size: 12px; color: #8a97a3; text-transform: uppercase; letter-spacing: .3px; }

/* Blog sidebar */
.blog-sidebar { position: sticky; top: 90px; }
.sidebar-cta { background: var(--brand); border-radius: 6px; padding: 20px; text-align: center; color: #fff; margin-bottom: 20px; }
.sidebar-cta h3 { font-size: 15px; font-weight: 800; margin: 0 0 6px 0; color: #fff; }
.sidebar-cta p { font-size: 13px; color: rgba(255,255,255,.85); margin: 0 0 14px 0; line-height: 1.5; }
.sidebar-cta a { display: block; background: var(--gold); color: var(--gold-ink); font-size: 13px; font-weight: 700; padding: 10px 16px; border-radius: 4px; text-decoration: none; margin-bottom: 8px; text-align: center; }
.sidebar-cta a:hover { background: #d8931c; }
.sidebar-cta a.phone { background: transparent; color: var(--gold); font-size: 15px; font-weight: 800; padding: 4px 0 0; margin-bottom: 0; }
.sidebar-cta a.phone:hover { background: transparent; color: #f5ba40; }
.sidebar-card { background: var(--paper); border-radius: 6px; padding: 18px 20px; margin-bottom: 20px; border: 1px solid var(--blue-lt); }
.sidebar-card h3 { font-size: 13px; font-weight: 800; color: var(--brand); margin: 0 0 12px 0; padding-bottom: 10px; border-bottom: 1px solid var(--blue-lt); text-transform: uppercase; letter-spacing: .04em; }
.sidebar-links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.sidebar-links li { border-bottom: 1px solid var(--blue-lt); }
.sidebar-links li:last-child { border-bottom: none; }
.sidebar-links a { display: block; font-size: 13px; color: var(--brand); padding: 9px 0; text-decoration: none; font-weight: 500; }
.sidebar-links a:hover, .sidebar-links a.active-link { color: var(--green); }
.locations-list { display: flex; flex-direction: column; gap: 12px; }
.loc-item { font-size: 13px; color: #3a4a5c; line-height: 1.5; }
.loc-item strong { display: block; font-weight: 700; color: var(--brand); }
.loc-item a { color: var(--green); font-weight: 600; }
@media (max-width: 820px) {
  .blog-wrap { grid-template-columns: 1fr; }
  .blog-sidebar { position: static; }
}
.blog-featured { width: 100%; max-height: 360px; object-fit: cover; border-radius: 6px; margin-bottom: 20px; }
.blog-body { font-size: 15px; line-height: 1.75; color: #3a4a5c; }
.blog-body h2, .blog-body h3 { color: var(--brand); }
.blog-body .callout { background: #EAF3EC; border-left: 3px solid var(--green); padding: 14px 18px; border-radius: 0 6px 6px 0; margin: 22px 0; }
.blog-body .callout p { margin: 0; color: #1A4A2A; font-weight: 600; }

/* Travel Ideas */
.tag-filters { margin-bottom: 24px; display: flex; flex-wrap: wrap; gap: 8px; }
.tag-chip { padding: 8px 16px; border-radius: 20px; border: 1px solid var(--blue-lt); background: #fff; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; color: var(--brand); cursor: pointer; }
.tag-chip.active, .tag-chip:hover { background: var(--brand); color: #fff; border-color: var(--brand); }
.travel-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 28px; }
.travel-card { border: 1px solid var(--blue-lt); border-radius: 6px; overflow: hidden; background: #fff; padding-bottom: 16px; }
.travel-card img { width: 100%; height: 160px; object-fit: cover; display: block; }
.travel-card h2 { font-size: 16px; color: var(--brand); margin: 16px 16px 4px 16px; }
.travel-card h2 a { color: inherit; text-decoration: none; }
.travel-card h3 { font-size: 12px; text-transform: uppercase; letter-spacing: .3px; color: var(--brand); margin: 14px 16px 4px 16px; }
.travel-card p, .travel-card ul { font-size: 13.5px; color: #3a4a5c; margin: 0 16px; padding-left: 34px; line-height: 1.6; }
.travel-distance { font-size: 12.5px; color: var(--blue); font-weight: 700; margin: 4px 16px; }
.travel-seasonal { font-size: 12.5px; color: var(--gold); font-weight: 700; margin: 4px 16px; }

/* Partners */
.partners-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 28px; }
.partner-card { border: 1px solid var(--blue-lt); border-radius: 6px; padding: 20px; background: #fff; text-align: center; }
.partner-card img { max-width: 160px; max-height: 80px; object-fit: contain; margin-bottom: 14px; }
.partner-card h2 { font-size: 16px; color: var(--brand); margin: 0 0 10px 0; }
.partner-card h2 a { color: inherit; text-decoration: none; }
.partner-desc { font-size: 13.5px; color: #3a4a5c; line-height: 1.6; }