/* =========================================================================
   Phase 5 — Body Design-System Migration
   Restyles every existing body component (bc-prose, bc-grid, bc-faq,
   bc-gallery, bc-testimonial, bc-formband, bc-map, bc-video, bc-btn, bc-eyebrow)
   to the Module 02 Design System (teal/orange, Plus Jakarta Sans), so every
   page's body matches its already-approved hero.

   SCOPE GUARANTEE: every rule below is scoped under `main` so it can never
   affect .site-header / .site-nav / .site-footer, which are siblings of
   <main>, not descendants — nav/footer are explicitly out of scope for this
   phase and are left completely untouched.

   No HTML, no class names, no content, no markup structure changed anywhere.
   This file only repaints the existing components in place.
   ========================================================================= */

:root{
  --color-primary:        #0E4F56;
  --color-primary-dark:   #083338;
  --color-primary-light:  #4C8B90;
  --color-accent:         #E0641E;
  --color-accent-dark:    #B84E14;
  --color-accent-soft:    #FDECE0;
  --color-secondary:      #2B6E63;
  --color-bg:             #F7F9F9;
  --color-bg-alt:         #EDF2F2;
  --color-surface:        #FFFFFF;
  --color-line:           #DCE4E4;
  --color-line-strong:    #B9C6C6;
  --color-text:           #111B1C;
  --color-text-soft:      #4A5B5C;
  --color-text-on-dark:      #F2F7F6;
  --color-text-on-dark-soft: #C7D9D7;
  --font-body: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --shadow-sm: 0 1px 3px rgba(14,31,32,0.08);
  --shadow-md: 0 6px 16px rgba(14,31,32,0.10);
  --shadow-lg: 0 16px 40px rgba(14,31,32,0.16);
}

/* ---- Base type + colour for everything inside the body ---- */
main{
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-bg);
}
main h2, main h3, main h4{
  font-family: var(--font-body);
  color: var(--color-text);
  font-weight: 800;
  letter-spacing: -0.01em;
}
main h2{ font-size: clamp(1.5rem, 1.3rem + 1.2vw, 2.1rem); font-weight: 700; letter-spacing: normal; }
main h3{ font-size: clamp(1.2rem, 1.1rem + 0.6vw, 1.5rem); font-weight: 700; letter-spacing: normal; }
main h4{ font-size: 1.05rem; font-weight: 700; letter-spacing: 0.01em; }
main p, main li{ color: var(--color-text); }
main a{ color: var(--color-primary); }
main a:hover{ color: var(--color-accent); }

/* Dark-background sections (formbands, dark prose) set their own light text
   colour on the section/list itself — list items must inherit that instead
   of falling back to the default dark ink above, or bullets become
   near-invisible against the dark background. */
main .bc-formband li,
main .bc-prose--dark li{ color: inherit; }

main .bc-eyebrow{
  font-family: var(--font-body);
  color: var(--color-accent-dark);
}
main .bc-eyebrow::before{ background: var(--color-accent); }

/* ---- Buttons (body context only — header/footer buttons untouched) ---- */
main .bc-btn{ font-family: var(--font-body); border-radius: 8px; font-weight: 700; }
main .bc-btn--accent{
  background: var(--color-accent);
  border-color: var(--color-accent);
}
main .bc-btn--accent:hover{ background: var(--color-accent-dark); border-color: var(--color-accent-dark); }
main .bc-btn--primary{
  background: var(--color-primary);
  border-color: var(--color-primary);
}
main .bc-btn--primary:hover{ background: var(--color-primary-dark); border-color: var(--color-primary-dark); }
main .bc-btn--outline{
  color: var(--color-primary);
  border-color: var(--color-primary);
}
main .bc-btn--outline:hover{ background: var(--color-primary); border-color: var(--color-primary); color: var(--color-text-on-dark); }
main .bc-btn--ghost{
  border-color: rgba(242,247,246,0.6);
}

/* ---- Prose ---- */
main .bc-prose{ background: var(--color-bg); }
main .bc-prose--has-color{ background: var(--color-bg-alt); }
main .bc-prose--dark{
  background: var(--color-primary-dark);
  color: var(--color-text-on-dark);
}
main .bc-prose--dark h2, main .bc-prose--dark h3{ color: var(--color-text-on-dark); }
main .bc-prose--dark p{ color: var(--color-text-on-dark-soft); }
main .bc-prose--dark a{ color: var(--color-text-on-dark); }
main .bc-prose--with-image .bc-prose__img{ box-shadow: var(--shadow-md); border-radius: 14px; }

/* ---- Grid / cards ---- */
main .bc-grid{ background: transparent; }
main .bc-grid__card{
  background: var(--color-surface);
  border-color: var(--color-line);
  box-shadow: var(--shadow-sm);
  border-radius: 14px;
}
main .bc-grid--imaged .bc-grid__card-img{ border-radius: 0; }
main .bc-grid__icon{
  background: var(--color-bg-alt);
  color: var(--color-primary);
}
main .bc-grid__card h3{ color: var(--color-text); }
main .bc-grid__card p{ color: var(--color-text-soft); }
main .bc-grid--text-only .bc-grid__card a{ color: var(--color-primary); }
main .bc-grid--text-only .bc-grid__card a:hover{ color: var(--color-accent); }

/* ---- FAQ ---- */
main .bc-faq{ background: var(--color-bg-alt); }
main .bc-faq__item{
  background: var(--color-surface);
  border-color: var(--color-line);
  border-radius: 14px;
}
main .bc-faq__q{ color: var(--color-text); }
main .bc-faq__q::after{ color: var(--color-accent); }
main .bc-faq__a{ color: var(--color-text-soft); }

/* ---- Gallery ---- */
main .bc-gallery__cell{
  background: var(--color-bg-alt);
  border-radius: 12px;
}
main .bc-gallery__caption{
  background: linear-gradient(0deg, rgba(8,51,56,0.85), transparent);
}

/* ---- Testimonial ---- */
main .bc-testimonial{ background: var(--color-bg-alt); }
main .bc-testimonial__card{
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
  border-top-color: var(--color-accent);
  border-radius: 14px;
}
main .bc-testimonial__stars{ color: var(--color-accent); }
main .bc-testimonial__avatar{ background: var(--color-primary); }
main .bc-testimonial__name{ color: var(--color-text); }
main .bc-testimonial__loc{ color: var(--color-text-soft); }

/* ---- Form band (styles the container only — existing form fields/action untouched) ---- */
main .bc-formband{
  background: var(--color-primary-dark);
  color: var(--color-text-on-dark);
}
main .bc-formband--intro{ background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%); }
main .bc-formband--final{ background: var(--color-primary-dark); }
main .bc-formband__title{ color: var(--color-text-on-dark); }
main .bc-formband__lede{ color: var(--color-text-on-dark-soft); }
main .bc-formband__form{
  background: var(--color-surface);
  border-radius: 14px;
  box-shadow: var(--shadow-lg);
}
main .bc-form-field label{ color: var(--color-text); }
main .bc-form-field input,
main .bc-form-field textarea,
main .bc-form-field select{
  border-color: var(--color-line-strong);
  background: var(--color-bg);
  color: var(--color-text);
  border-radius: 8px;
}
main .bc-form-field input:focus,
main .bc-form-field textarea:focus,
main .bc-form-field select:focus{
  outline-color: var(--color-accent);
  border-color: var(--color-accent);
}

/* ---- Map (info panel styled only — iframe embed itself untouched) ---- */
main .bc-map__info{
  background: var(--color-surface);
  border-color: var(--color-line);
  border-radius: 14px;
}
main .bc-map__addr strong{ color: var(--color-text); }
main .bc-map__frame{ border-color: var(--color-line); border-radius: 14px; }

/* ---- Video band ---- */
main .bc-video{ background: var(--color-primary-dark); color: var(--color-text-on-dark-soft); }
main .bc-video h2{ color: var(--color-text-on-dark); }
main .bc-video__copy p{ color: var(--color-text-on-dark-soft); }
main .bc-video__frame{ box-shadow: var(--shadow-md); background: var(--color-primary-dark); }

/* =========================================================================
   Readability Framework — layout-only components (Phase: Content Design)
   These redistribute EXISTING copy visually; no words are added or changed.
   ========================================================================= */

/* ---- Text-only card grid used to break up long paragraph runs (wall-of-text fix) ---- */
main .bc-grid--2col-list{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-4, 1.25rem);
  margin-top: 1.5rem;
}
main .bc-grid--2col-list .bc-grid__card{
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: 14px;
  box-shadow: var(--shadow-sm);
  padding: 1.5rem;
}
main .bc-grid--2col-list .bc-grid__card p{ margin: 0; }
/* Callout variant — duplicates/relocates an existing sentence for emphasis, no new words */
main .bc-grid__card--callout{
  background: var(--color-accent-soft);
  border-color: var(--color-accent);
}
main .bc-grid__card--callout p{
  font-weight: 700;
  color: var(--color-accent-dark);
}
@media (max-width: 760px){
  main .bc-grid--2col-list{ grid-template-columns: 1fr; }
}

/* ---- Process Timeline (Module 02 Part B.7 — numbered steps, connecting line) ---- */
main .process-timeline{
  list-style: none;
  margin: 1.5rem 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}
main .process-timeline__step{
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  position: relative;
  padding-bottom: 1.5rem;
}
main .process-timeline__step:not(:last-child)::before{
  content: "";
  position: absolute;
  left: 15px;
  top: 34px;
  bottom: 0;
  width: 2px;
  background: var(--color-line-strong);
}
main .process-timeline__num{
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--color-accent);
  color: #FFFFFF;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}
main .process-timeline__body{ padding-top: 0.35rem; }
/* Kept vertical at every width: each step here carries a full sentence, not a
   short label, so a horizontal row (Module 02's other suggested variant)
   would force-wrap that text into cramped, centred columns — the wrong
   container shape for this content, not a wording problem. */

/* ---- FAQ as a true accordion (native <details>/<summary>, same text, same visual style) ---- */
main .bc-faq__item{ cursor: default; }
main .bc-faq__item summary.bc-faq__q{
  cursor: pointer;
  list-style: none;
}
main .bc-faq__item summary.bc-faq__q::-webkit-details-marker{ display: none; }
main .bc-faq__item[open] summary.bc-faq__q::after{ transform: rotate(45deg); }
main .bc-faq__a{ margin-top: 0.5rem; }

/* =========================================================================
   Body content rhythm: image sections alternate sides; text-only sections
   centre. Layout only — no words, headings or images added/changed.
   ========================================================================= */

/* Text-only prose sections (no companion image) are centred. Some sections
   carry their own inline max-width (e.g. style="max-width:74ch") directly on
   .bc-prose__inner itself rather than on a child div — margin:auto centres
   that constrained block within .bc-container instead of leaving it flush
   left with blank space beside it. */
main .bc-prose:not(.bc-prose--with-image) .bc-prose__inner{
  text-align: center;
  margin: 0 auto;
}
/* Lists/tables inside a centred section become centred blocks, but keep
   their own contents left-aligned internally (readable bullets/rows). */
main .bc-prose:not(.bc-prose--with-image) .bc-prose__inner ul,
main .bc-prose:not(.bc-prose--with-image) .bc-prose__inner ol{
  display: inline-block;
  text-align: left;
}
main .bc-prose:not(.bc-prose--with-image) .bc-prose__inner table{
  margin: 0 auto;
  text-align: left;
}
main .bc-prose:not(.bc-prose--with-image) .bc-prose__inner > div{
  margin: 0 auto;
}

/* Image sections alternate which side the image sits on, marked per
   section (in page order) by the propagation script — not by DOM order,
   which was inconsistent in the source. */
main .bc-prose--with-image.bc-prose--img-left .bc-prose__inner > .bc-prose__img{ order: 1; }
main .bc-prose--with-image.bc-prose--img-left .bc-prose__inner > div:not(.bc-prose__img){ order: 2; }
main .bc-prose--with-image.bc-prose--img-right .bc-prose__inner > .bc-prose__img{ order: 2; }
main .bc-prose--with-image.bc-prose--img-right .bc-prose__inner > div:not(.bc-prose__img){ order: 1; }