/* =========================================================================
   Carports Adelaide Pro — Locked Component Library
   Industry: carports / steel & aluminium structures | Location: Adelaide, AU
   Aesthetic: sturdy tradesperson brand — steel charcoal, rust/Colorbond accent,
   condensed industrial headings, warm concrete-paper background.
   ========================================================================= */

:root{
  /* ---- Brand palette ---- */
  --bc-primary:       #2b333b;   /* steel charcoal */
  --bc-primary-dark:  #191f24;   /* deep gunmetal */
  --bc-primary-light: #4b5661;   /* lighter steel */
  --bc-accent:        #c1502b;   /* rust / Colorbond "Manor Red" */
  --bc-accent-dark:   #963d20;
  --bc-accent-light:  #e07a4e;
  --bc-steel:         #6b7580;   /* secondary steel grey (decorative/borders) */
  --bc-steel-light:   #9aa2ab;   /* AA-safe muted text on dark backgrounds */

  --bc-paper:         #f5f1e9;   /* warm concrete off-white */
  --bc-paper-alt:     #ece5d6;   /* deeper warm panel */
  --bc-ink:           #22262b;   /* near-black ink */
  --bc-ink-soft:      #565d64;   /* muted body copy */
  --bc-line:          #d9d0bd;   /* hairline border, warm grey */
  --bc-white:         #ffffff;

  --bc-on-primary:    #f5f1e9;
  --bc-on-accent:     #ffffff;

  /* ---- Type ---- */
  --bc-font-head: "Barlow Condensed", "Arial Narrow", sans-serif;
  --bc-font-body: "Inter", "Segoe UI", Arial, sans-serif;

  --bc-fs-xs:   0.8125rem;
  --bc-fs-sm:   0.9375rem;
  --bc-fs-base: 1.0625rem;
  --bc-fs-lg:   1.25rem;
  --bc-fs-xl:   1.75rem;
  --bc-fs-2xl:  2.375rem;
  --bc-fs-3xl:  3.25rem;

  --bc-lh-tight: 1.1;
  --bc-lh-normal: 1.6;

  /* ---- Space scale ---- */
  --bc-space-1: 0.5rem;
  --bc-space-2: 0.75rem;
  --bc-space-3: 1rem;
  --bc-space-4: 1.5rem;
  --bc-space-5: 2rem;
  --bc-space-6: 3rem;
  --bc-space-7: 4.5rem;
  --bc-space-8: 6rem;

  --bc-radius-sm: 4px;
  --bc-radius: 8px;
  --bc-radius-lg: 14px;

  --bc-shadow-sm: 0 1px 3px rgba(25,31,36,.12);
  --bc-shadow: 0 8px 24px rgba(25,31,36,.16);
  --bc-shadow-lg: 0 20px 48px rgba(25,31,36,.24);

  --bc-container-w: 1180px;
}

/* ---- Reset-lite ---- */
*,*::before,*::after{ box-sizing:border-box; }
body{
  margin:0;
  font-family:var(--bc-font-body);
  font-size:var(--bc-fs-base);
  line-height:var(--bc-lh-normal);
  color:var(--bc-ink);
  background:var(--bc-paper);
}
img{ max-width:100%; display:block; }
h1,h2,h3,h4{
  font-family:var(--bc-font-head);
  line-height:var(--bc-lh-tight);
  color:var(--bc-primary-dark);
  margin:0 0 var(--bc-space-2);
  letter-spacing:.01em;
  text-transform:uppercase;
  font-weight:700;
}
/* Dark-background contexts: the base heading rule above hard-codes --bc-primary-dark, which is
   invisible (or near it) against these sections' own dark backgrounds. Scoped narrower than the
   section wrapper alone would be ideal, but any heading dropped directly into one of these
   sections — not just ones using a dedicated *__title class — needs to stay legible. The
   .bc-formband__form override above still wins for headings inside the nested white form card. */
.bc-hero h1, .bc-hero h2, .bc-hero h3, .bc-hero h4,
.bc-formband h1, .bc-formband h2, .bc-formband h3, .bc-formband h4,
.bc-video h1, .bc-video h2, .bc-video h3, .bc-video h4,
.bc-prose--dark h1, .bc-prose--dark h2, .bc-prose--dark h3, .bc-prose--dark h4{
  color:var(--bc-white);
}
h1{ font-size:var(--bc-fs-3xl); }
h2{ font-size:var(--bc-fs-2xl); }
h3{ font-size:var(--bc-fs-xl); }
p{ margin:0 0 var(--bc-space-3); }
a{ color:var(--bc-accent-dark); }
/* Dark-background contexts: accent-dark fails AA against dark charcoal (same issue as
   .bc-eyebrow above). accent-light passes AA on both --bc-primary and --bc-primary-dark.
   :not(.bc-btn) excludes button-styled anchors, which already set their own colour via
   .bc-btn--*, and would otherwise be overridden by this selector's higher specificity. */
.bc-hero a:not(.bc-btn),
.bc-formband a:not(.bc-btn),
.bc-video a:not(.bc-btn),
.bc-prose--dark a:not(.bc-btn),
.site-header a:not(.bc-btn),
.site-footer a:not(.bc-btn){
  color:var(--bc-accent-light);
}

/* ---- Container ---- */
.bc-container{
  width:100%;
  max-width:var(--bc-container-w);
  margin-inline:auto;
  padding-inline:var(--bc-space-4);
}

/* ---- Eyebrow ---- */
.bc-eyebrow{
  display:inline-block;
  font-family:var(--bc-font-head);
  font-size:var(--bc-fs-sm);
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--bc-accent-dark);
  margin-bottom:var(--bc-space-2);
}
/* Dark-background contexts: accent-dark (#963d20) fails AA against dark charcoal.
   steel-light passes AA on both --bc-primary and --bc-primary-dark. */
.bc-hero .bc-eyebrow,
.bc-formband .bc-eyebrow,
.bc-video .bc-eyebrow,
.bc-prose--dark .bc-eyebrow,
.site-header .bc-eyebrow,
.site-footer .bc-eyebrow{
  color:var(--bc-steel-light);
}
.bc-eyebrow::before{
  content:"";
  display:inline-block;
  width:1.4em; height:2px;
  background:var(--bc-accent);
  margin-right:.6em;
  vertical-align:middle;
}

/* ---- Buttons ---- */
.bc-btn{
  display:inline-flex;
  align-items:center;
  gap:.5em;
  font-family:var(--bc-font-head);
  font-weight:700;
  font-size:var(--bc-fs-lg);
  letter-spacing:.03em;
  text-transform:uppercase;
  text-decoration:none;
  padding:.75em 1.6em;
  border-radius:var(--bc-radius-sm);
  border:2px solid transparent;
  cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.bc-btn:hover{ transform:translateY(-2px); }
.bc-btn--primary{
  background:var(--bc-accent);
  color:var(--bc-on-accent);
  box-shadow:var(--bc-shadow-sm);
}
.bc-btn--primary:hover{ background:var(--bc-accent-dark); }
.bc-btn--accent{
  background:var(--bc-primary);
  color:var(--bc-on-primary);
}
.bc-btn--accent:hover{ background:var(--bc-primary-dark); }
.bc-btn--ghost{
  background:transparent;
  color:var(--bc-white);
  border-color:var(--bc-white);
}
.bc-btn--ghost:hover{ background:rgba(255,255,255,.14); }
.bc-btn--outline{
  background:transparent;
  color:var(--bc-primary-dark);
  border-color:var(--bc-primary-dark);
}
.bc-btn--outline:hover{ background:var(--bc-primary-dark); color:var(--bc-on-primary); }

/* =========================================================================
   Site shell
   ========================================================================= */
.site-header{
  background:var(--bc-primary-dark);
  color:var(--bc-on-primary);
  position:relative;
  z-index:10;
}
.site-header__bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-block:var(--bc-space-3);
  gap:var(--bc-space-4);
}
.site-header__logo{
  font-family:var(--bc-font-head);
  font-size:var(--bc-fs-xl);
  font-weight:700;
  color:var(--bc-white);
  text-decoration:none;
  letter-spacing:.02em;
}
.site-header__logo span{ color:var(--bc-accent-light); }

.site-nav{ display:flex; }
.site-nav__list{
  display:flex;
  gap:var(--bc-space-4);
  list-style:none;
  margin:0; padding:0;
  flex-wrap:wrap;
}
/* :not(.bc-btn) so a CTA button placed inside the nav list (a common pattern —
   "CONTACT US" as the last nav item) keeps its own button colours instead of this
   rule's higher specificity (.site-nav__list a) overriding .bc-btn--primary's color. */
.site-nav__list a:not(.bc-btn){
  color:var(--bc-paper);
  text-decoration:none;
  font-family:var(--bc-font-head);
  font-size:var(--bc-fs-sm);
  letter-spacing:.06em;
  text-transform:uppercase;
  font-weight:600;
  padding:.4em 0;
  border-bottom:2px solid transparent;
}
.site-nav__list a:not(.bc-btn):hover,
.site-nav__list a:not(.bc-btn)[aria-current="page"]{
  border-color:var(--bc-accent);
  color:var(--bc-white);
}

.site-footer{
  background:var(--bc-primary-dark);
  color:var(--bc-paper);
  padding-block:var(--bc-space-6) var(--bc-space-4);
}
.site-footer a{ color:var(--bc-accent-light); }
.site-footer__grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:var(--bc-space-5);
}
.site-footer__heading{
  font-family:var(--bc-font-head);
  color:var(--bc-white);
  text-transform:uppercase;
  font-size:var(--bc-fs-sm);
  letter-spacing:.1em;
  margin-bottom:var(--bc-space-2);
}
.site-footer__bottom{
  border-top:1px solid rgba(245,241,233,.15);
  margin-top:var(--bc-space-5);
  padding-top:var(--bc-space-3);
  font-size:var(--bc-fs-xs);
  color:var(--bc-steel-light);
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:var(--bc-space-2);
}

/* =========================================================================
   Hero
   ========================================================================= */
.bc-hero{
  position:relative;
  background-color:var(--bc-primary-dark);
  background-image:
    linear-gradient(120deg, rgba(25,31,36,.92) 0%, rgba(25,31,36,.72) 55%, rgba(25,31,36,.4) 100%),
    linear-gradient(135deg, var(--bc-primary) 0%, var(--bc-primary-dark) 100%);
  background-size:cover;
  background-position:center;
  color:var(--bc-white);
  padding-block:var(--bc-space-8) var(--bc-space-7);
  border-bottom:6px solid var(--bc-accent);
}
.bc-hero__grid{
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:var(--bc-space-6);
  align-items:center;
}
.bc-hero h1{ color:var(--bc-white); font-size:var(--bc-fs-3xl); }
.bc-hero__lede{
  font-size:var(--bc-fs-lg);
  color:var(--bc-paper);
  max-width:38em;
}
.bc-hero__actions{
  display:flex;
  gap:var(--bc-space-3);
  flex-wrap:wrap;
  margin-top:var(--bc-space-4);
}
.bc-hero__media{
  border-radius:var(--bc-radius-lg);
  overflow:hidden;
  box-shadow:var(--bc-shadow-lg);
  border:4px solid var(--bc-accent);
}
.bc-hero__media img{ width:100%; height:100%; object-fit:cover; }

/* =========================================================================
   Prose
   ========================================================================= */
.bc-prose{
  padding-block:var(--bc-space-7);
}
.bc-prose__inner{ max-width:56em; }
.bc-prose p{ color:var(--bc-ink-soft); }
.bc-prose--has-color{
  background:var(--bc-paper-alt);
}
.bc-prose--dark{
  background:var(--bc-primary-dark);
  color:var(--bc-paper);
}
.bc-prose--dark h2,
.bc-prose--dark h3{ color:var(--bc-white); }
.bc-prose--dark p{ color:var(--bc-steel-light); }
.bc-prose--with-image .bc-prose__grid{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:var(--bc-space-6);
  align-items:center;
}
.bc-prose--with-image img{
  border-radius:var(--bc-radius);
  box-shadow:var(--bc-shadow);
}

/* =========================================================================
   Grid (services / features)
   ========================================================================= */
.bc-grid{ padding-block:var(--bc-space-7); }
.bc-grid__head{ max-width:44em; margin-bottom:var(--bc-space-5); }
.bc-grid__cards{
  display:grid;
  gap:var(--bc-space-4);
  grid-template-columns:repeat(2,1fr);
}
.bc-grid--3col .bc-grid__cards{ grid-template-columns:repeat(3,1fr); }
.bc-grid--4col .bc-grid__cards{ grid-template-columns:repeat(4,1fr); }
.bc-grid--2col .bc-grid__cards{ grid-template-columns:repeat(2,1fr); }

.bc-grid__card{
  background:var(--bc-white);
  border:1px solid var(--bc-line);
  border-radius:var(--bc-radius);
  padding:var(--bc-space-4);
  box-shadow:var(--bc-shadow-sm);
  transition:transform .15s ease, box-shadow .15s ease;
}
.bc-grid__card:hover{ transform:translateY(-4px); box-shadow:var(--bc-shadow); }
.bc-grid__card-img{
  width:100%;
  aspect-ratio:4/3;
  object-fit:cover;
  border-radius:var(--bc-radius-sm);
  margin-bottom:var(--bc-space-3);
}
.bc-grid__card h3{ font-size:var(--bc-fs-lg); }
.bc-grid__card p{
  color:var(--bc-ink-soft);
  font-size:var(--bc-fs-sm);
  margin-bottom:0;
}
.bc-grid--text-only .bc-grid__card{
  border-top:4px solid var(--bc-accent);
}
.bc-grid--imaged .bc-grid__card{ padding-top:var(--bc-space-3); }

/* =========================================================================
   FAQ
   ========================================================================= */
.bc-faq{ padding-block:var(--bc-space-7); background:var(--bc-paper-alt); }
.bc-faq__inner{ max-width:48em; }
.bc-faq__list{ margin-top:var(--bc-space-4); }
.bc-faq__item{
  background:var(--bc-white);
  border:1px solid var(--bc-line);
  border-radius:var(--bc-radius);
  padding:var(--bc-space-3) var(--bc-space-4);
  margin-bottom:var(--bc-space-2);
}
.bc-faq__q{
  font-family:var(--bc-font-head);
  font-size:var(--bc-fs-lg);
  text-transform:none;
  color:var(--bc-primary-dark);
  margin:0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--bc-space-2);
  cursor:pointer;
}
.bc-faq__q::after{
  content:"+";
  color:var(--bc-accent);
  font-size:1.3em;
  flex:none;
}
.bc-faq__a{
  color:var(--bc-ink-soft);
  margin-top:var(--bc-space-2);
  margin-bottom:0;
  font-size:var(--bc-fs-sm);
}

/* =========================================================================
   Gallery
   ========================================================================= */
.bc-gallery{ padding-block:var(--bc-space-7); }
.bc-gallery__grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:var(--bc-space-3);
}
.bc-gallery__cell{
  position:relative;
  border-radius:var(--bc-radius-sm);
  overflow:hidden;
  aspect-ratio:4/3;
  box-shadow:var(--bc-shadow-sm);
}
.bc-gallery__cell img{ width:100%; height:100%; object-fit:cover; }
.bc-gallery__caption{
  position:absolute;
  inset:auto 0 0 0;
  background:linear-gradient(0deg, rgba(25,31,36,.88), rgba(25,31,36,0));
  color:var(--bc-white);
  font-size:var(--bc-fs-xs);
  padding:var(--bc-space-3) var(--bc-space-2) var(--bc-space-1);
  margin:0;
}

/* =========================================================================
   Video
   ========================================================================= */
.bc-video{ padding-block:var(--bc-space-7); background:var(--bc-primary-dark); color:var(--bc-paper); }
.bc-video__grid{
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:var(--bc-space-6);
  align-items:center;
}
.bc-video__copy h2{ color:var(--bc-white); }
.bc-video__copy p{ color:var(--bc-steel-light); }
.bc-video__player{
  position:relative;
  border-radius:var(--bc-radius-lg);
  overflow:hidden;
  box-shadow:var(--bc-shadow-lg);
  border:4px solid var(--bc-accent);
}
.bc-video__frame{
  width:100%;
  aspect-ratio:16/9;
  border:0;
  display:block;
}

/* =========================================================================
   Map
   ========================================================================= */
.bc-map{ padding-block:var(--bc-space-7); }
.bc-map__grid{
  display:grid;
  grid-template-columns:.8fr 1.2fr;
  gap:var(--bc-space-5);
  align-items:stretch;
  background:var(--bc-white);
  border:1px solid var(--bc-line);
  border-radius:var(--bc-radius);
  overflow:hidden;
  box-shadow:var(--bc-shadow-sm);
}
.bc-map__info{ padding:var(--bc-space-5); }
.bc-map__addr{
  font-style:normal;
  color:var(--bc-ink-soft);
  line-height:1.8;
}
.bc-map__addr strong{ color:var(--bc-primary-dark); display:block; font-family:var(--bc-font-head); text-transform:uppercase; letter-spacing:.04em; font-size:var(--bc-fs-lg); }
.bc-map__frame{ width:100%; height:100%; min-height:280px; border:0; display:block; }

/* =========================================================================
   Testimonial
   ========================================================================= */
.bc-testimonial{ padding-block:var(--bc-space-7); background:var(--bc-paper-alt); }
.bc-testimonial__grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:var(--bc-space-4);
}
.bc-testimonial__card{
  background:var(--bc-white);
  border-radius:var(--bc-radius);
  padding:var(--bc-space-4);
  border-left:4px solid var(--bc-accent);
  box-shadow:var(--bc-shadow-sm);
}
.bc-testimonial__quote{
  margin:0 0 var(--bc-space-3);
  color:var(--bc-ink);
  font-size:var(--bc-fs-sm);
}
.bc-testimonial__author{
  font-family:var(--bc-font-head);
  text-transform:uppercase;
  letter-spacing:.04em;
  color:var(--bc-primary-dark);
  font-size:var(--bc-fs-xs);
  font-weight:700;
}
.bc-testimonial__stars{ color:var(--bc-accent); letter-spacing:.1em; margin-bottom:var(--bc-space-1); }

/* =========================================================================
   Form band
   ========================================================================= */
.bc-formband{
  padding-block:var(--bc-space-7);
  background:var(--bc-primary-dark);
  color:var(--bc-paper);
}
.bc-formband--intro{ padding-top:var(--bc-space-5); }
.bc-formband--final{
  background:linear-gradient(135deg, var(--bc-primary-dark), var(--bc-primary));
  border-top:6px solid var(--bc-accent);
}
.bc-formband__grid{
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:var(--bc-space-6);
  align-items:start;
}
.bc-formband__title{ color:var(--bc-white); }
.bc-formband__lede{ color:var(--bc-steel-light); max-width:32em; }
.bc-formband__form{
  background:var(--bc-white);
  color:var(--bc-primary-dark);
  border-radius:var(--bc-radius-lg);
  padding:var(--bc-space-5);
  box-shadow:var(--bc-shadow-lg);
  display:grid;
  gap:var(--bc-space-3);
}
/* The form card is a white panel floating on the dark .bc-formband background — restore
   light-background text colours for anything nested inside it, overriding the dark-context
   rules above (which would otherwise render this light-on-light and unreadable). */
.bc-formband__form .bc-eyebrow{ color:var(--bc-accent-dark); }
.bc-formband__form a:not(.bc-btn){ color:var(--bc-accent-dark); }
.bc-formband__form h1,
.bc-formband__form h2,
.bc-formband__form h3,
.bc-formband__form h4{ color:var(--bc-primary-dark); }
.bc-form-field{ display:flex; flex-direction:column; gap:.35em; }
.bc-form-field label{
  font-size:var(--bc-fs-xs);
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--bc-primary-dark);
}
.bc-form-field--required label::after{
  content:" *";
  color:var(--bc-accent-dark);
}
.bc-form-field input,
.bc-form-field textarea,
.bc-form-field select{
  font-family:var(--bc-font-body);
  font-size:var(--bc-fs-base);
  padding:.7em .8em;
  border:1px solid var(--bc-line);
  border-radius:var(--bc-radius-sm);
  background:var(--bc-paper);
  color:var(--bc-ink);
}
.bc-form-field input:focus,
.bc-form-field textarea:focus,
.bc-form-field select:focus{
  outline:2px solid var(--bc-accent);
  outline-offset:1px;
}

/* =========================================================================
   Responsive
   ========================================================================= */
@media (max-width: 900px){
  .bc-hero__grid,
  .bc-prose--with-image .bc-prose__grid,
  .bc-video__grid,
  .bc-map__grid,
  .bc-formband__grid{
    grid-template-columns:1fr;
  }
  .bc-grid--3col .bc-grid__cards,
  .bc-grid--4col .bc-grid__cards,
  .bc-testimonial__grid{
    grid-template-columns:repeat(2,1fr);
  }
  .bc-gallery__grid{ grid-template-columns:repeat(2,1fr); }
  .site-footer__grid{ grid-template-columns:1fr 1fr; }
}

@media (max-width: 640px){
  :root{
    --bc-fs-3xl: 2.25rem;
    --bc-fs-2xl: 1.75rem;
    --bc-fs-xl: 1.35rem;
  }
  .bc-grid__cards,
  .bc-grid--2col .bc-grid__cards,
  .bc-grid--3col .bc-grid__cards,
  .bc-grid--4col .bc-grid__cards,
  .bc-testimonial__grid,
  .bc-gallery__grid{
    grid-template-columns:1fr;
  }
  .site-header__bar{ flex-direction:column; align-items:flex-start; gap:var(--bc-space-2); }
  .site-nav__list{ gap:var(--bc-space-3); }
  .site-footer__grid{ grid-template-columns:1fr; }
  .bc-hero{ padding-block:var(--bc-space-6) var(--bc-space-5); }
  .bc-map__frame{ min-height:220px; }
}