/* Dunn's Mill site theme for Bootstrap 5.3. Load after vendor/bootstrap.min.css.
   Every color, size and radius below is a Dunn's Mill design system token. */

:root {
  /* sign colors */
  --sign-green: #0b3707;
  --sign-red: #b80209;
  --sign-white: #ffffff;
  --sign-sage: #909078;
  --sign-hay: #d8d0a0;
  /* nature colors */
  --nature-creek: #256472;
  --nature-fern: #3d6632;
  --nature-ridge: #4a6072;
  --nature-bark: #5a3d28;
  --nature-goldenrod: #d99a2b;
  --nature-amber: #7d5108;
  /* tints */
  --tint-creek: #d6e6e4;
  --tint-fern: #dde6cf;
  --tint-red: #f6d9d6;
  --tint-gold: #f6e3b5;
  /* surfaces, text, lines */
  --surface-paper: #fbf6e9;
  --surface-white: #ffffff;
  --surface-card: #fffdf7;
  --surface-sunken: #e9ddc0;
  --text-primary: #0b3707;
  --text-muted: #4c5a45;
  --text-inverse: #ffffff;
  --line-soft: #d6c9a8;
  --line-strong: #7a745a;
  --action-primary-hover: #8f0207;
  --font-display: Fraunces, Georgia, "Times New Roman", serif;
  --font-sans: Barlow, "Helvetica Neue", Arial, sans-serif;

  /* Bootstrap variables mapped to the tokens */
  --bs-body-bg: #fbf6e9;
  --bs-body-color: #0b3707;
  --bs-body-color-rgb: 11, 55, 7;
  --bs-body-font-family: var(--font-sans);
  --bs-body-font-size: 1.0625rem;
  --bs-body-line-height: 1.6;
  --bs-heading-color: #0b3707;
  --bs-secondary-color: #4c5a45;
  --bs-link-color: #256472;
  --bs-link-color-rgb: 37, 100, 114;
  --bs-link-hover-color: #0b3707;
  --bs-link-hover-color-rgb: 11, 55, 7;
  --bs-border-color: #d6c9a8;
  --bs-border-radius: 8px;
  --bs-border-radius-lg: 16px;
  --bs-focus-ring-color: rgba(37, 100, 114, 0.4);
}

body { background: var(--surface-paper); color: var(--text-primary); font-family: var(--font-sans); }

/* Type */
h1, h2, h3, .h1, .h2, .h3 { font-family: var(--font-display); color: var(--text-primary); }
h1, .h1 { font-size: clamp(2.25rem, 1.4rem + 2.6vw, 2.75rem); line-height: 1.1; font-weight: 700; }
h2, .h2 { font-size: clamp(1.75rem, 1.3rem + 1.4vw, 2rem); line-height: 1.2; font-weight: 700; }
h3, .h3 { font-size: 1.5rem; line-height: 1.25; font-weight: 600; }
.display-title { font-family: var(--font-display); font-size: clamp(2.5rem, 1.2rem + 4.2vw, 4rem); line-height: 1; font-weight: 800; letter-spacing: -0.01em; }
.lead { font-size: 1.25rem; line-height: 1.5; font-weight: 400; }
.eyebrow { margin: 0 0 0.5rem; font-size: 0.875rem; line-height: 1.3; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }
.text-muted-dm { color: var(--text-muted); }
.measure { max-width: 65ch; }
.placeholder-fact { background: var(--tint-gold); padding: 0 0.25em; border-radius: 4px; }

/* Focus: 2px solid creek on light, goldenrod on dark */
a:focus-visible, button:focus-visible, .btn:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, .accordion-button:focus-visible { outline: 2px solid var(--nature-creek); outline-offset: 2px; box-shadow: none; }
.on-dark a:focus-visible, .on-dark .btn:focus-visible { outline-color: var(--nature-goldenrod); }

/* Skip link */
.skip-link { position: absolute; top: 8px; left: 8px; z-index: 1000; padding: 12px 16px; background: var(--sign-green); color: var(--text-inverse); border-radius: 8px; font-weight: 600; }
.skip-link:focus { color: var(--text-inverse); outline: 2px solid var(--nature-goldenrod); outline-offset: 2px; }

/* Buttons */
.btn { --bs-btn-border-radius: 8px; --bs-btn-padding-x: 1.5rem; --bs-btn-padding-y: 0.6875rem; --bs-btn-font-size: 0.875rem; --bs-btn-font-weight: 600; --bs-btn-border-width: 2px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; letter-spacing: 0.08em; text-transform: uppercase; }
.btn-lg { --bs-btn-padding-x: 2rem; --bs-btn-padding-y: 0.875rem; --bs-btn-font-size: 1rem; min-height: 52px; }
.btn-primary { --bs-btn-color: #ffffff; --bs-btn-bg: #b80209; --bs-btn-border-color: #b80209; --bs-btn-hover-color: #ffffff; --bs-btn-hover-bg: #8f0207; --bs-btn-hover-border-color: #8f0207; --bs-btn-active-color: #ffffff; --bs-btn-active-bg: #8f0207; --bs-btn-active-border-color: #8f0207; --bs-btn-disabled-color: #4c5a45; --bs-btn-disabled-bg: #e9ddc0; --bs-btn-disabled-border-color: #e9ddc0; }
.btn-secondary { --bs-btn-color: #ffffff; --bs-btn-bg: #0b3707; --bs-btn-border-color: #0b3707; --bs-btn-hover-color: #ffffff; --bs-btn-hover-bg: #3d6632; --bs-btn-hover-border-color: #3d6632; --bs-btn-active-color: #ffffff; --bs-btn-active-bg: #3d6632; --bs-btn-active-border-color: #3d6632; }
.btn-outline-dark { --bs-btn-color: #0b3707; --bs-btn-border-color: #0b3707; --bs-btn-hover-color: #0b3707; --bs-btn-hover-bg: #e9ddc0; --bs-btn-hover-border-color: #0b3707; --bs-btn-active-color: #0b3707; --bs-btn-active-bg: #e9ddc0; --bs-btn-active-border-color: #0b3707; }
.btn-light { --bs-btn-color: #0b3707; --bs-btn-bg: #ffffff; --bs-btn-border-color: #ffffff; --bs-btn-hover-color: #0b3707; --bs-btn-hover-bg: #d8d0a0; --bs-btn-hover-border-color: #d8d0a0; --bs-btn-active-color: #0b3707; --bs-btn-active-bg: #d8d0a0; --bs-btn-active-border-color: #d8d0a0; }

/* Header */
.site-header { background: var(--surface-white); border-bottom: 1px solid var(--line-soft); }
.site-header .navbar { --bs-navbar-padding-y: 0.75rem; --bs-navbar-color: #0b3707; --bs-navbar-hover-color: #0b3707; --bs-navbar-active-color: #0b3707; --bs-navbar-toggler-border-color: #7a745a; --bs-navbar-nav-link-padding-x: 0.75rem; }
.navbar-brand { display: flex; flex-direction: column; padding: 0; text-decoration: none; color: var(--text-primary); }
.navbar-brand:hover { color: var(--text-primary); }
.brand-name { font-family: var(--font-display); font-size: 1.5rem; line-height: 1.15; font-weight: 800; }
.brand-sub { font-size: 0.75rem; line-height: 1.3; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sign-red); }
.site-header .nav-link { display: inline-flex; align-items: center; min-height: 44px; font-size: 0.875rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; border-bottom: 2px solid transparent; }
.site-header .nav-link:hover, .site-header .nav-link.active { border-bottom-color: var(--sign-red); }
.header-phone { display: inline-flex; align-items: center; min-height: 44px; font-family: var(--font-display); font-size: 1.375rem; font-weight: 700; color: var(--sign-red); text-decoration: none; white-space: nowrap; }
.header-phone:hover { color: var(--action-primary-hover); text-decoration: underline; }

/* Section grounds */
.section { padding: 3rem 0; }
@media (min-width: 992px) { .section { padding: 6rem 0; } }
.section-tight { padding: 3rem 0; }
.bg-tint-creek { background: var(--tint-creek); }
.bg-tint-fern { background: var(--tint-fern); }
.bg-tint-gold { background: var(--tint-gold); }
.bg-tint-red { background: var(--tint-red); }
.on-dark { background: var(--sign-green); color: var(--text-inverse); }
.on-dark h1, .on-dark h2, .on-dark h3 { color: var(--text-inverse); }
.on-dark a:not(.btn) { color: var(--text-inverse); }
.on-dark a:not(.btn):hover { color: var(--sign-hay); }
.on-dark .eyebrow { color: var(--sign-hay); }

/* Ridge line: layered Smoky Mountain silhouettes between sections */
.ridges { display: block; width: 100%; height: 120px; margin-bottom: -1px; }
.ridge-back { fill: var(--nature-ridge); opacity: 0.45; }
.ridge-mid { fill: var(--nature-fern); }
.ridge-front { fill: var(--sign-green); }

/* Hero */
.hero-logo { display: block; width: 100%; max-width: 440px; height: auto; margin: 0 auto; }
.phone-line { font-family: var(--font-display); font-size: 2rem; line-height: 1.15; font-weight: 700; color: var(--sign-red); text-decoration: none; }
.phone-line:hover { color: var(--action-primary-hover); text-decoration: underline; }
.on-dark .phone-line, .on-dark a.phone-line:not(.btn) { color: var(--nature-goldenrod); }

/* Photo placeholders: swap each for a real photo */
.photo-ph { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; aspect-ratio: 3 / 2; padding: 1rem; text-align: center; background: var(--sign-hay); color: var(--text-primary); border: 2px dashed var(--line-strong); border-radius: 16px; }
.photo-ph-wide { aspect-ratio: 21 / 9; }
.photo-ph-tall { aspect-ratio: 4 / 5; }
.photo-ph-label { font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }
.photo-ph-subject { font-family: var(--font-display); font-size: 1.25rem; font-weight: 600; }
.card .photo-ph { border-radius: 0; border-width: 0 0 2px 0; }
figure { margin: 0; }
figcaption { margin-top: 0.5rem; font-size: 0.875rem; line-height: 1.5; color: var(--text-muted); }

/* Cards */
.card { --bs-card-bg: #fffdf7; --bs-card-border-color: #d6c9a8; --bs-card-border-radius: 16px; --bs-card-inner-border-radius: 15px; --bs-card-spacer-x: 1.5rem; --bs-card-spacer-y: 1.5rem; --bs-card-color: #0b3707; overflow: hidden; }
.card-title { font-family: var(--font-display); font-size: 1.5rem; line-height: 1.25; font-weight: 600; }
.card-plain { --bs-card-bg: transparent; --bs-card-border-color: transparent; }
.card-feature { box-shadow: 0 0 0 3px #ffffff, 0 0 0 6px #b80209; border-color: transparent; }

/* Badges */
.badge { --bs-badge-padding-x: 0.75rem; --bs-badge-padding-y: 0.3125rem; --bs-badge-font-size: 0.8125rem; --bs-badge-font-weight: 600; --bs-badge-border-radius: 999px; letter-spacing: 0.06em; text-transform: uppercase; }
.badge-available { background: var(--nature-creek); color: var(--text-inverse); }
.badge-waitlist { background: var(--nature-goldenrod); color: var(--text-primary); }
.badge-full { background: var(--sign-red); color: var(--text-inverse); }
.badge-neutral { background: var(--surface-sunken); color: var(--text-primary); }

/* Lists and steps */
.check-list { margin: 0; padding: 0; list-style: none; }
.check-list li { position: relative; padding: 0.375rem 0 0.375rem 1.75rem; }
.check-list li::before { content: ""; position: absolute; left: 0; top: 0.85rem; width: 0.875rem; height: 0.5rem; border-left: 2px solid var(--nature-fern); border-bottom: 2px solid var(--nature-fern); transform: rotate(-45deg); }
.steps { margin: 0; padding: 0; list-style: none; counter-reset: step; }
.steps li { position: relative; padding: 0 0 1.5rem 3.5rem; counter-increment: step; }
.steps li::before { content: counter(step); position: absolute; left: 0; top: 0; display: flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: 999px; background: var(--sign-green); color: var(--text-inverse); font-family: var(--font-display); font-weight: 700; }
.fact-list { margin: 0; padding: 0; list-style: none; }
.fact-list li { padding: 0.25rem 0; }
.fact-figure { display: block; font-family: var(--font-display); font-size: 1.5rem; line-height: 1.25; font-weight: 700; }

/* Tables */
.table { --bs-table-bg: transparent; --bs-table-color: #0b3707; --bs-table-border-color: #7a745a; }
.table caption { caption-side: top; color: var(--text-muted); }

/* Forms */
.form-label { font-weight: 600; margin-bottom: 0.375rem; }
.form-control, .form-select { min-height: 48px; background-color: var(--surface-card); color: var(--text-primary); border: 1px solid var(--line-strong); border-radius: 4px; font-size: 1.0625rem; }
.form-control:focus, .form-select:focus { background-color: var(--surface-card); color: var(--text-primary); border-color: var(--nature-creek); box-shadow: none; outline: 2px solid var(--nature-creek); outline-offset: 2px; }
.input-group-text { background: var(--surface-sunken); color: var(--text-primary); border: 1px solid var(--line-strong); border-radius: 4px; font-weight: 600; }
.form-text { color: var(--text-muted); font-size: 0.875rem; }
.form-check-input { width: 1.375rem; height: 1.375rem; margin-top: 0.15rem; border: 1px solid var(--line-strong); background-color: var(--surface-card); }
.form-check-input:checked { background-color: var(--sign-green); border-color: var(--sign-green); }
.form-check-input:focus { box-shadow: none; border-color: var(--nature-creek); }
.form-check-label { padding-left: 0.375rem; }
.form-check { min-height: 44px; display: flex; align-items: center; padding-left: 0; gap: 0.25rem; }
.form-check .form-check-input { float: none; margin-left: 0; flex-shrink: 0; }
fieldset legend { font-size: 1.0625rem; font-weight: 600; margin-bottom: 0.375rem; }
.required-note { font-weight: 400; color: var(--text-muted); }
.form-panel { padding: 1.5rem; background: var(--surface-card); border: 1px solid var(--line-soft); border-radius: 16px; }
@media (min-width: 768px) { .form-panel { padding: 2rem; } }

/* Accordion */
.accordion { --bs-accordion-bg: #fffdf7; --bs-accordion-color: #0b3707; --bs-accordion-border-color: #d6c9a8; --bs-accordion-border-radius: 8px; --bs-accordion-inner-border-radius: 7px; --bs-accordion-btn-color: #0b3707; --bs-accordion-btn-bg: #fffdf7; --bs-accordion-active-color: #0b3707; --bs-accordion-active-bg: #dde6cf; --bs-accordion-btn-focus-box-shadow: none; }
.accordion-button { font-weight: 600; font-size: 1.0625rem; min-height: 56px; }

/* Footer */
.site-footer { padding: 3rem 0 1.5rem; background: var(--sign-green); color: var(--text-inverse); }
.site-footer a { color: var(--text-inverse); text-underline-offset: 3px; }
.site-footer a:hover { color: var(--sign-hay); }
.site-footer a:focus-visible { outline: 2px solid var(--nature-goldenrod); outline-offset: 2px; }
.site-footer li a { display: inline-flex; align-items: center; min-height: 44px; }
.footer-name { margin: 0 0 0.5rem; font-family: var(--font-display); font-size: 1.5rem; line-height: 1.25; font-weight: 800; }
.footer-heading { margin: 0 0 0.5rem; font-family: var(--font-sans); font-size: 0.875rem; line-height: 1.3; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sign-hay); }
.footer-phone { display: inline-flex; align-items: center; min-height: 44px; font-family: var(--font-display); font-size: 2rem; line-height: 1.15; font-weight: 700; color: var(--nature-goldenrod) !important; text-decoration: none; }
.footer-phone:hover { text-decoration: underline; }
.footer-legal { text-align: center; margin: 2rem 0 0; padding-top: 1rem; border-top: 1px solid var(--nature-fern); font-size: 0.875rem; color: var(--sign-hay); }

/* Navbar logo and home hero painting (both sit on white) */
.navbar-logo { display: block; height: 88px; width: auto; }
.hero-art { display: block; width: 100%; max-width: 1344px; height: auto; margin: 0 auto; }

/* ==================== Photos ==================== */
.photo { display: block; width: 100%; height: auto; object-fit: cover; border-radius: 16px; background: var(--sign-hay); }
.photo-3x2 { aspect-ratio: 3 / 2; }
.photo-4x3 { aspect-ratio: 4 / 3; }
.photo-4x5 { aspect-ratio: 4 / 5; }
.photo-21x9 { aspect-ratio: 21 / 9; }
.card .photo { border-radius: 0; }
.map-img { object-fit: contain; background: var(--surface-card); border: 1px solid var(--line-soft); }

/* ==================== RV Lots: available lots ==================== */
.lot-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; margin: 0; padding: 0; list-style: none; }
.lot-card { display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem; padding: 1.5rem; background: var(--surface-card); border: 1px solid var(--line-soft); border-radius: 16px; }
.lot-number { font-family: var(--font-display); font-size: 2rem; line-height: 1.1; font-weight: 800; }
.lot-where { font-size: 0.9375rem; color: var(--text-muted); }

/* ==================== Apartments: now available ==================== */
.apt-feature .photo-feature { height: 100%; min-height: 320px; aspect-ratio: 4 / 3; }
.apt-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem 1.5rem; margin: 0.5rem 0 1.25rem; }
.apt-facts dt { font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }
.apt-facts dd { margin: 0; font-family: var(--font-display); font-size: 1.375rem; font-weight: 700; }
.apt-gallery .photo { border-radius: 8px; }
