/* theme.css — custom theme layered OVER Bootstrap 5 for Card Heating & Cooling.
 * Reproduces the original Wix site's look (rust page frame, navy section bars,
 * Anton display headings) using Bootstrap structure + these tokens. */

:root {
  /* --- Brand palette (from capture/theme.json + screenshots) --- */
  --brand-navy:    #0c2d41;   /* nav, section bars, info panels */
  --brand-navy-2:  #14405c;   /* lighter navy for hovers/borders */
  --brand-rust:    #b23c17;   /* page background frame + accents */
  --brand-red:     #c0341f;   /* phone CTA */
  --brand-cream:   #e9e6df;   /* content shell background */
  --brand-tan:     #d4cdbf;   /* secondary warm neutral */
  --brand-light:   #f6f4f0;
  --brand-ink:     #1c1c1c;

  --brand-primary: var(--brand-navy);
  --brand-accent:  var(--brand-rust);
  --brand-dark:    var(--brand-navy);

  /* --- Typography --- */
  --font-base: Arial, Helvetica, "Helvetica Neue", sans-serif;
  --font-heading: "Anton", Arial, sans-serif;
  --font-size-base: 1rem;

  /* --- Bootstrap variable bridges --- */
  --bs-primary: var(--brand-navy);
  --bs-body-font-family: var(--font-base);
  --bs-body-font-size: var(--font-size-base);
  --bs-link-color: var(--brand-navy);
  --bs-link-hover-color: var(--brand-rust);
}

/* Rust page frame with a centered light content shell, like the original. */
body {
  font-family: var(--font-base);
  color: var(--brand-ink);
  background-color: var(--brand-rust);
}

main {
  background: var(--brand-cream);
  max-width: 1140px;
  margin: 0 auto;
}

h1, h2, h3, h4, h5, h6 { font-family: var(--font-base); }

/* Anton display headings (banners, section titles, page titles). */
.display-heading, .section-title, h1.page-title {
  font-family: var(--font-heading);
  font-weight: 400;
  letter-spacing: .01em;
  text-transform: none;
}

a { color: var(--bs-link-color); }
a:hover { color: var(--bs-link-hover-color); }

/* Keep headings legible on dark sections. */
.bg-navy h1, .bg-navy h2, .bg-navy h3, .bg-navy h4, .bg-navy h5, .bg-navy h6,
.text-white h1, .text-white h2, .text-white h3, .text-white h4, .text-white h5, .text-white h6 {
  color: #fff;
}

.bg-navy { background-color: var(--brand-navy) !important; color: #e9ecef; }
.bg-rust { background-color: var(--brand-rust) !important; color: #fff; }
.bg-cream { background-color: var(--brand-cream) !important; }
.text-rust { color: var(--brand-rust) !important; }
.text-navy { color: var(--brand-navy) !important; }

.btn-primary {
  --bs-btn-bg: var(--brand-navy);
  --bs-btn-border-color: var(--brand-navy);
  --bs-btn-hover-bg: #0a2536;
  --bs-btn-hover-border-color: #0a2536;
  --bs-btn-active-bg: #0a2536;
}
.btn-rust {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--brand-rust);
  --bs-btn-border-color: var(--brand-rust);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #93300f;
  --bs-btn-hover-border-color: #93300f;
}

/* ====== Header / brand bar ====== */
.site-header { background: #fff; }
.header-brand img { height: 64px; width: auto; }
.cta-phone { display: inline-flex; flex-direction: column; align-items: flex-end; line-height: 1.05; }
.cta-phone__label { color: var(--brand-red); font-weight: 700; font-size: .95rem; letter-spacing: .02em; }
.cta-phone__num { color: var(--brand-red); font-weight: 800; font-size: 1.45rem; }
@media (max-width: 575.98px) {
  .cta-phone { align-items: flex-start; }
  .cta-phone__num { font-size: 1.2rem; }
}

/* ====== Primary nav ====== */
.site-navbar {
  background: var(--brand-navy);
  border-top: 3px solid var(--brand-rust);
  --bs-navbar-color: #e9ecef;
  --bs-navbar-hover-color: #fff;
  --bs-navbar-active-color: #fff;
  padding-top: 0; padding-bottom: 0;
}
.site-navbar .nav-link {
  text-align: center;
  font-weight: 600;
  font-size: .98rem;
  padding-top: .85rem; padding-bottom: .85rem;
  border-bottom: 3px solid transparent;
}
.site-navbar .nav-link:hover { background: var(--brand-navy-2); }
.site-navbar .nav-link.active { background: var(--brand-rust); border-bottom-color: var(--brand-rust); color: #fff; }
.site-navbar .dropdown-menu {
  --bs-dropdown-bg: var(--brand-navy-2);
  --bs-dropdown-link-color: #e9ecef;
  --bs-dropdown-link-hover-bg: var(--brand-rust);
  --bs-dropdown-link-hover-color: #fff;
  --bs-dropdown-border-color: rgba(255,255,255,.15);
  --bs-dropdown-link-active-bg: var(--brand-rust);
  border-radius: 0;
}
@media (min-width: 1400px) {
  .site-navbar .nav-link { white-space: nowrap; }
}

/* ====== Section title bars (the navy banner headings) ====== */
.section-title {
  background: var(--brand-navy);
  color: #e6e8ea;
  text-align: center;
  font-size: clamp(1.4rem, 1rem + 2.2vw, 2.2rem);
  padding: .55rem 1rem;
  margin: 0 0 1.25rem;
}
.section-title--rust { background: var(--brand-rust); color: #fff; }

/* ====== Navy info panels (contact-form sidebar, "Proudly serving") ====== */
.info-panel {
  background: var(--brand-navy);
  color: #e9ecef;
  padding: 1.25rem;
}
.info-panel h2, .info-panel h3, .info-panel .section-title { color: #fff; }
.info-panel a { color: #fff; text-decoration: underline; }

/* Town list */
.towns-list { columns: 1; list-style: none; padding: 0; margin: 0; text-align: center; }
.towns-list li { padding: .12rem 0; }

/* Simple contact form (stubbed — see route note) */
.contact-form .form-control { border-radius: 0; }

/* ====== Cards / feature blocks ====== */
.feature-card { background: #fff; height: 100%; }

/* ====== Footer ====== */
.site-footer { background: var(--brand-navy); color: #cdd5db; }
.site-footer .footer-heading { font-family: var(--font-heading); font-size: 1.4rem; color: #fff; margin-bottom: .75rem; }
.site-footer a:not(.btn) { color: #fff; text-decoration: none; }
.site-footer a:not(.btn):hover, .site-footer a:not(.btn):focus { color: var(--brand-tan); text-decoration: underline; }
.site-footer li { padding: .1rem 0; }
.footer-rule { border-color: rgba(255,255,255,.2); }

/* ====== Image fit helpers ====== */
/* The picture() helper wraps every <img> in a <picture>. Without this, the
   sizing utilities (.w-100/.h-100/.object-*) on the <img> resolve against the
   <picture> (auto-sized) instead of the real layout box, so images overflow
   their fixed-height containers. display:contents removes the <picture> box so
   the <img> is laid out as a direct child of its container, exactly as the
   markup intends. (Resource/srcset selection is unaffected.) */
picture { display: contents; }
/* Bootstrap's .ratio fills its DIRECT child to the aspect box, but picture()
   makes <picture> the direct child and display:contents removes its box, so the
   <img> (a grandchild) is missed. Fill the <img> into the ratio box directly so
   its object-cover crops uniformly instead of stretching to the height attr. */
.ratio > picture > img,
.ratio > img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
/* Baseline: no image ever exceeds its container, even with the intrinsic
   width/height attributes picture() emits for CLS. The .h-*/.object-* utilities
   still win where used. */
img { max-width: 100%; height: auto; }
.object-cover   { object-fit: cover;   }
.object-contain { object-fit: contain; background: transparent; }
.card img, .feature-card img { object-fit: contain; max-width: 100%; }
.photo-frame { background: #fff; border: 1px solid #ccc; border-radius: .25rem; overflow: hidden; }
.photo-frame img { width: 100%; height: 100%; object-fit: contain; }
/* Let the object-cover utility win inside a frame (e.g. /about team portraits);
   the generic ".photo-frame img" contain rule above otherwise overrides it. */
.photo-frame img.object-cover { object-fit: cover; }
/* Square frame for 1:1 portrait/people thumbnails — fills with no letterboxing. */
.photo-frame--square { aspect-ratio: 1 / 1; }
/* On phones bios/products stack to a single column, so a fixed-height frame
   becomes very wide but stays short and object-fit:contain shrinks the image to
   a thin strip. Drop the fixed height and use a 4:3 box so it stays in proportion
   (square frames keep their own ratio). */
@media (max-width: 767.98px) {
  .photo-frame:not(.photo-frame--square) { height: auto !important; aspect-ratio: 4 / 3; }
}

/* Gallery thumb caption */
.gallery-item { background: #fff; border: 1px solid #cfc9bd; }
.gallery-item .caption { font-size: .85rem; color: #444; padding: .4rem .5rem; text-align: center; }

/* Embed/iframe responsive constraint already via .ratio; cap map width */
.map-embed { max-width: 760px; }