/* theme.css — custom theme layered OVER Bootstrap 5.
 *
 * Goal: keep the original site's look while the structure uses real Bootstrap
 * components. Fill these tokens from capture/theme.json (palette, fonts, vars),
 * then add component overrides below. Do NOT paste the site's original
 * stylesheets here — translate their visual decisions into these variables.
 */

:root {
  /* --- Brand palette (BearHand Construction) --- */
  --brand-red: #b11f1f;            /* primary brand red ("HAND", buttons, accents) */
  --brand-red-dark: #8d1414;       /* hover / deep red */
  --brand-maroon: #7c1416;         /* footer bottom bar */
  --brand-charcoal: #2b2b2b;       /* logo "BEAR", nav bar, dark UI */
  --brand-charcoal-2: #1f1f1f;
  --brand-grey: #767676;           /* headings (din-next grey on the original) */
  --brand-light: #f4f4f4;
  --ink: #222;

  --brand-primary: var(--brand-red);

  /* --- Typography --- */
  --font-base: "Barlow", Arial, Helvetica, sans-serif;
  --font-heading: "Barlow Condensed", "Barlow", Arial, sans-serif;
  --font-size-base: 1.05rem;

  --bs-primary: var(--brand-red);
  --bs-body-font-family: var(--font-base);
  --bs-body-font-size: var(--font-size-base);
}

body {
  font-family: var(--font-base);
  color: var(--ink);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--brand-grey);
}

.bg-dark h1, .bg-dark h2, .bg-dark h3, .bg-dark h4, .bg-dark h5, .bg-dark h6,
.text-white h1, .text-white h2, .text-white h3, .text-white h4, .text-white h5, .text-white h6 {
  color: #fff;
}

/* Page-title treatment: grey heading with a red rule, like the original. */
.page-title {
  color: var(--brand-grey);
  font-size: clamp(2rem, 4vw, 2.75rem);
  text-transform: none;
  padding-bottom: .5rem;
  margin-bottom: 1.75rem;
  border-bottom: 3px solid var(--brand-red);
}
.section-title { color: var(--brand-grey); }
.text-brand-red { color: var(--brand-red) !important; }
.bg-brand-red { background: var(--brand-red) !important; color: #fff; }
.bg-brand-charcoal { background: var(--brand-charcoal) !important; color: #fff; }

.btn-primary {
  --bs-btn-bg: var(--brand-red);
  --bs-btn-border-color: var(--brand-red);
  --bs-btn-hover-bg: var(--brand-red-dark);
  --bs-btn-hover-border-color: var(--brand-red-dark);
  --bs-btn-active-bg: var(--brand-red-dark);
  --bs-btn-active-border-color: var(--brand-red-dark);
}
.btn-dark {
  --bs-btn-bg: var(--brand-charcoal);
  --bs-btn-border-color: var(--brand-charcoal);
  --bs-btn-hover-bg: #000;
  --bs-btn-hover-border-color: #000;
}
.btn-outline-primary {
  --bs-btn-color: var(--brand-red);
  --bs-btn-border-color: var(--brand-red);
  --bs-btn-hover-bg: var(--brand-red);
  --bs-btn-hover-border-color: var(--brand-red);
  --bs-btn-active-bg: var(--brand-red-dark);
}

a { color: var(--brand-red); text-decoration: none; }
a:hover { color: var(--brand-red-dark); }

/* --- Header --- */
.site-header { background: #fff; }
.header-logo { max-height: 86px; max-width: min(320px, 72vw); width: auto; height: auto; }
.header-tagline {
  font-family: var(--font-base);
  font-style: italic;
  font-weight: 700;
  color: var(--brand-charcoal);
  font-size: .95rem;
  margin-top: .25rem;
}
.header-phone {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--brand-grey);
}
.header-phone:hover { color: var(--brand-red); }
.header-social {
  color: #3b5998;
  font-size: 1.4rem;
  line-height: 1;
}

/* --- Nav (dark charcoal bar, red active/hover, like the original) --- */
.site-navbar {
  background: linear-gradient(180deg, #3a3a3a 0%, var(--brand-charcoal) 55%, #181818 100%);
  padding: 0;
  border-top: 1px solid #555;
  box-shadow: 0 2px 6px rgba(0,0,0,.25);
}
.site-navbar .navbar-nav { gap: 0; }
.site-navbar .nav-item { border-left: 1px solid rgba(255,255,255,.08); }
.site-navbar .nav-item:last-child { border-right: 1px solid rgba(255,255,255,.08); }
.site-navbar .nav-link,
.site-navbar .nav-link.dropdown-toggle {
  color: #f1f1f1;
  font-family: var(--font-heading);
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: .85rem 1.9rem;
  text-align: center;
}
.site-navbar .nav-link:hover,
.site-navbar .nav-link:focus { color: #fff; background: rgba(177,31,31,.55); }
.site-navbar .nav-link.active {
  color: #fff;
  background: linear-gradient(180deg, #c63131 0%, var(--brand-red) 55%, var(--brand-red-dark) 100%);
}
.site-navbar .navbar-toggler {
  border-color: rgba(255,255,255,.4);
  margin: .5rem 0;
}
.site-navbar .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255,255,255,0.85)' stroke-linecap='round' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
.site-navbar .dropdown-menu {
  border: none;
  border-top: 3px solid var(--brand-red);
  border-radius: 0;
  box-shadow: 0 8px 20px rgba(0,0,0,.18);
  background: var(--brand-charcoal);
}
.site-navbar .dropdown-item {
  color: #eee;
  font-family: var(--font-heading);
  letter-spacing: .04em;
  padding: .5rem 1.25rem;
}
.site-navbar .dropdown-item:hover,
.site-navbar .dropdown-item:focus { background: var(--brand-red); color: #fff; }
.site-navbar .dropdown-divider { border-color: rgba(255,255,255,.2); }

/* --- Footer --- */
.site-footer { background: var(--brand-charcoal); color: #cfcfcf; }
.site-footer .footer-top { background: var(--brand-charcoal); }
.site-footer .footer-heading {
  color: #fff;
  font-size: 1.25rem;
  margin-bottom: 1rem;
}
.site-footer .footer-links li { margin-bottom: .4rem; }
.site-footer a:not(.btn) { color: #e7e7e7; }
.site-footer a:not(.btn):hover,
.site-footer a:not(.btn):focus { color: var(--brand-red); }
.site-footer .footer-social { color: #fff; font-size: 1.5rem; }
.site-footer .footer-bottom {
  background: var(--brand-maroon);
  color: #fff;
  font-weight: 600;
}
.site-footer .footer-bottom a:not(.btn) { color: #fff; }
.site-footer .btn-link { color: #fff; }

/* --- Image fit helpers ---
 * Use object-fit so photos fill a fixed-size box without distorting. Pick by
 * the photo's shape, NOT a single default:
 *   .object-cover   — fill + crop. Good for LANDSCAPE photos in a uniform grid.
 *   .object-contain — show the WHOLE photo (letterboxed, never cropped). Use for
 *                     PORTRAIT / tall-skinny photos so you don't slice them.
 * Pair either with a width and a FIXED height in the template (e.g.
 * class="object-contain w-100" style="height:320px"); object-fit needs a
 * definite width AND height to engage. .photo-frame gives a neutral backdrop.
 *
 * CRITICAL — the picture() helper wraps every <img> in a <picture>. Two
 * consequences this block handles; do NOT remove them:
 *  1. Sizing utilities (.w-100/.h-100/.object-*) on the <img> would resolve
 *     against the <picture> (auto-sized), not the real box, so images overflow
 *     fixed-height containers and Bootstrap's `.ratio` can't fill them.
 *     `picture{display:contents}` removes the wrapper box so the <img> lays out
 *     as a direct child of its container, exactly as the markup intends.
 *     (Resource/srcset selection is unaffected.)
 *  2. NEVER use `max-height:` on a fluid-width image — it clamps height without
 *     shrinking width, stretching tall images. Use a fixed height/aspect-ratio. */
picture { display: contents; }
/* Bootstrap's .ratio fills its DIRECT child; with the <picture> wrapper boxless,
   fill the <img> (a grandchild) into the aspect box directly. */
.ratio > picture > img,
.ratio > img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
/* Baseline: no image exceeds its container, even with the intrinsic width/height
   attrs picture() emits for CLS. The .h-*/.object-* utilities still win. */
img { max-width: 100%; height: auto; }
.object-cover   { object-fit: cover;   }
.object-contain { object-fit: contain; background: transparent; }
/* Photos inside a card always show whole (contain), never cropped — enforced
   here so it holds regardless of the utility class on the <img>. */
.card img, .feature-card img { object-fit: contain; max-width: 100%; }
.photo-frame {
  background: transparent;
  border-radius: .5rem;
  overflow: hidden;
}
.photo-frame img { width: 100%; height: 100%; object-fit: contain; }
/* Let the object-cover utility win inside a frame (e.g. 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, rows 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 (square frames keep their own ratio). */
@media (max-width: 767.98px) {
  .photo-frame:not(.photo-frame--square) { height: auto !important; aspect-ratio: 4 / 3; }
}

/* --- Per-section overrides --- */

/* Homepage hero slideshow */
.hero-slideshow { position: relative; }
.hero-frame { position: relative; height: 460px; overflow: hidden; }
.hero-frame img { width: 100%; height: 100%; object-fit: cover; }
.hero-caption {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.55) 100%);
  color: #fff; padding: 2.5rem 1rem 1.1rem;
  pointer-events: none;
}
.hero-caption p {
  font-family: var(--font-heading);
  font-style: italic; font-weight: 600;
  color: #fff; font-size: clamp(1.1rem, 2.2vw, 1.6rem);
  text-shadow: 0 1px 3px rgba(0,0,0,.6);
}
.hero-slideshow .carousel-control-prev,
.hero-slideshow .carousel-control-next { width: 6%; z-index: 4; }
@media (max-width: 767.98px) { .hero-frame { height: 300px; } }

/* Service cards (services landing + homepage teaser) */
.service-card { overflow: hidden; transition: transform .15s ease, box-shadow .15s ease; }
.service-card:hover { transform: translateY(-4px); box-shadow: 0 .75rem 1.5rem rgba(0,0,0,.15) !important; }
.service-card .photo-frame img { object-fit: cover; }
.service-card-title { color: var(--brand-grey); }
.service-card:hover .service-card-title { color: var(--brand-red); }

/* Project gallery thumbnails */
.gallery-frame { border-radius: .4rem; box-shadow: 0 .3rem .8rem rgba(0,0,0,.12); }
.gallery-frame img { object-fit: cover; transition: transform .25s ease; }
.gallery-frame:hover img { transform: scale(1.04); }

/* About page large logo */
.about-logo { max-width: 480px; width: 80%; height: auto; }

/* Towns-serviced list */
.towns-list li { font-size: 1.05rem; padding: .15rem 0; }

/* Forms: keep labels in body font (not the grey heading rule), readable ink */
.contact-form .form-label { color: var(--ink); font-family: var(--font-base); }
.contact-form .form-control:focus,
.contact-form .form-select:focus {
  border-color: var(--brand-red);
  box-shadow: 0 0 0 .2rem rgba(177,31,31,.18);
}
.btn-secondary {
  --bs-btn-bg: #c9c9c9; --bs-btn-border-color: #c9c9c9; --bs-btn-color: #222;
  --bs-btn-hover-bg: #b5b5b5; --bs-btn-hover-border-color: #b5b5b5;
}

/* Service-page process steps */
.process-steps { padding-left: 1.1rem; }
.process-steps li { margin-bottom: .6rem; }
.process-steps li::marker { color: var(--brand-red); font-weight: 700; }

/* FAQ accordions (native <details>) */
.faq-item { border-bottom: 1px solid #e3e3e3; padding: .85rem 0; }
.faq-item summary {
  cursor: pointer; font-weight: 600; color: var(--ink);
  list-style: none; display: flex; justify-content: space-between; align-items: center;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "\002B"; color: var(--brand-red); font-size: 1.3rem; line-height: 1; }
.faq-item[open] summary::after { content: "\2212"; }
.faq-item p { margin: .6rem 0 0; }

/* Trust bar */
.trust-bar { font-size: .95rem; }
.trust-bar li { white-space: nowrap; }