/* ============================================================================
   site.css — everything specific to the per-rep sites
   ----------------------------------------------------------------------------
   styles.css is an unmodified copy of providentialroofing.com's stylesheet, so
   these sites inherit the company's colours, buttons, cards and spacing exactly.
   Put changes HERE, not in styles.css, so the parent can be re-copied over the
   top whenever the company site's design moves. Loaded after styles.css.
   Sections 1-4 are carried over from the Sang Yun site (minus its Korean
   typography and language switch); section 5 is new for the template.
   ========================================================================== */

/* 1. Current page marker in the nav. */
.nav > a.is-on { color: var(--carolina); position: relative; }
.nav > a.is-on::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -6px;
  height: 2px; background: var(--yellow); border-radius: 2px;
}
@media (max-width: 1100px) { .nav > a.is-on::after { display: none; } }

/* 2. Small components */
.check-list-wide { columns: 2; column-gap: 2.6rem; max-width: 1000px; margin: 0 auto; }
.check-list-wide li { break-inside: avoid; margin-bottom: .9rem; }
@media (max-width: 860px) { .check-list-wide { columns: 1; } }

.offices-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.2rem; }

.services-grid.grid-2 { grid-template-columns: repeat(2, 1fr); max-width: 880px; margin: 0 auto; }
@media (max-width: 760px) { .services-grid.grid-2 { grid-template-columns: 1fr; } }

.note-small { font-size: .9rem; color: var(--muted); margin-top: 1.2rem; }
.form-title { font-size: 1.35rem; margin-bottom: 1rem; }

.footer-plain { display: block; color: #9fb6cd; font-size: .93rem; padding: .28rem 0; }
.footer-note { border-top: 1px solid rgba(255,255,255,.12); padding: 1.1rem 0 .2rem; }
.footer-note p { color: #91a9c2; font-size: .84rem; line-height: 1.6; margin: 0; max-width: 980px; }

/* 3. Hero byline -- the rep's photo, name and title under the headline. */
.hero-byline { display: flex; align-items: center; gap: .85rem; margin: 1.4rem 0 1.6rem; }
.hero-byline img {
  width: 72px; height: 72px; border-radius: 50%; object-fit: cover;
  border: 3px solid rgba(255, 255, 255, .85);
  box-shadow: 0 6px 18px rgba(8, 18, 34, .45); flex: none;
}
.hero-byline strong {
  display: block; font-family: 'Archivo', sans-serif;
  font-weight: 800; font-size: 1.12rem; color: #fff; line-height: 1.2;
}
.hero-byline span { display: block; font-size: .86rem; color: #cfe0f0; margin-top: .18rem; }
@media (max-width: 480px) {
  .hero-byline img { width: 60px; height: 60px; }
  .hero-byline span { font-size: .8rem; }
}
.why-media img.portrait { height: auto; max-height: 560px; width: auto; max-width: 100%; border-radius: var(--radius); }
@media (max-width: 980px) { .why-media img.portrait { max-height: 420px; margin: 0 auto; } }

/* 4. Hero background + mobile ordering */
.hero-bg {
  background-image: none;   /* clears the company homepage photo baked into styles.css */
  background-size: cover; background-position: center; background-repeat: no-repeat;
}
@media (max-width: 900px) {
  .hero-in { grid-template-columns: 1fr; }
  .hero-quote { justify-self: stretch; max-width: none; }
}

/* ---------------------------------------------------------------------------
   5. TEMPLATE ADDITIONS
   --------------------------------------------------------------------------- */

/* TODO badges: open items in the rep config (e.g. a blank years value or headshot).
   Deliberately loud. The build refuses preview=False while any exist. */
.todo-badge {
  display: inline-block; background: #ffe600; color: #6b1d00;
  border: 2px dashed #c0392b; border-radius: 6px;
  font: 800 .78rem/1.3 'Archivo', system-ui, sans-serif; letter-spacing: .04em;
  text-transform: uppercase; padding: .18rem .5rem; vertical-align: middle;
}
.portrait-ph { position: relative; max-width: 420px; margin: 0 auto; }
.portrait-ph img { width: 100%; height: auto !important; border-radius: var(--radius); }
.portrait-ph .todo-badge { position: absolute; top: 12px; left: 12px; }

/* Four audience cards in a row on desktop. */
.services-grid.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1100px) { .services-grid.grid-4 { grid-template-columns: repeat(2, 1fr); } }
/* (<=640px: 2-up, see MOBILE CONDENSE below) */

/* Six process steps: 3 x 2. */
.steps.steps-6 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 980px) { .steps.steps-6 { grid-template-columns: repeat(2, 1fr); } }
/* (<=640px: 2-up, see MOBILE CONDENSE below) */

/* Three-photo gallery: equal tiles, no captions. The inherited .gallery is a
   4-col grid tuned for five photos; three would leave holes. */
.gallery.gallery-3 { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 260px; }
@media (max-width: 760px) { .gallery.gallery-3 { grid-template-columns: 1fr; grid-auto-rows: 220px; } }

/* Hero card checklist (replaces the company card's review/rating strip --
   a rep site carries no rating or testimonial of its own). */
.qc-checks {
  list-style: none; margin: 1.1rem 0 0; padding: .9rem 0 0;
  border-top: 1px solid rgba(255,255,255,.18);
  display: grid; gap: .4rem; font-size: .86rem; color: #e8f1fa;
}
.qc-checks li { padding-left: 1.4rem; position: relative; }
.qc-checks li::before { content: "\2714"; position: absolute; left: 0; color: var(--yellow); }

/* At-a-glance facts card. White card, so it reads on navy and on white. */
.facts {
  background: #fff; color: var(--ink); border: 1px solid var(--line);
  border-left: 5px solid var(--yellow); border-radius: var(--radius);
  padding: 1.2rem 1.4rem; margin: 0 0 1.8rem; box-shadow: var(--shadow);
}
.facts h3 { font-size: 1.05rem; margin-bottom: .7rem; color: var(--carolina-deep); }
.facts dl { display: grid; gap: .55rem; margin: 0; }
.facts dl > div { display: grid; grid-template-columns: 9.5rem 1fr; gap: .8rem; align-items: baseline; }
.facts dt { font-family: 'Archivo', sans-serif; font-weight: 700; color: var(--carolina-deep); font-size: .9rem; }
.facts dd { margin: 0; color: var(--muted); font-size: .93rem; }
@media (max-width: 480px) { .facts dl > div { grid-template-columns: 1fr; gap: .1rem; } }

/* Selects in the inherited contact form. */
.contact-form select { width: 100%; }

/* White cards on the navy .section-soft band: styles.css turns every h3 in
   that band white, which made the card headings vanish. */
.section-soft .svc h3, .section-soft .facts h3 { color: var(--carolina-deep); }

/* TODO badge inside the hero byline: .hero-byline span would otherwise turn
   it into a full-width pale line. */
.hero-byline .todo-badge {
  display: inline-block; color: #6b1d00; font-size: .68rem; margin: 0 0 0 .45rem;
  vertical-align: middle;
}

/* Grid children default to min-width:auto, so one long no-wrap button label
   could push the single mobile column past the viewport. */
.hero-in > *, .why-in > *, .contact-in > * { min-width: 0; }
.hero-cta .btn { white-space: normal; text-align: center; }

/* An orphan last card in a 3-column grid spans the row instead of sitting alone. */
.services-grid:not(.grid-4):not(.grid-2) > .svc:last-child:nth-child(3n+1) { grid-column: 1 / -1; }

/* Photo on a roof-system card (job photo for Tile/Metal, system example for the rest). */
.svc-img { margin: -1.7rem -1.7rem 1.1rem; height: 160px; overflow: hidden; border-radius: var(--radius) var(--radius) 0 0; }
.svc-img img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Seven-photo work gallery: lead photo spans two columns, then 2 + 4.
   Nine-photo gallery: a plain 3 x 3 on desktop. */
.gallery.gallery-9 { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 230px; }
@media (max-width: 980px) { .gallery.gallery-9 { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 180px; } .gallery.gallery-9 .g-item:first-child { grid-column: 1 / -1; } }
.gallery.gallery-7 { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 210px; }
.gallery.gallery-7 .g-item:first-child { grid-column: span 2; }
@media (max-width: 980px) { .gallery.gallery-7 { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 180px; } }

/* ===================================================================
   MOBILE CONDENSE (<=640px), same approach as the providentialroofing.com
   homepage condense: no one-card-per-screen stacks. Cards, steps, photos and
   offices go two-up in compact tiles; same colors, fonts, icon tiles and
   yellow step circles. Tap targets stay >=44px.
   =================================================================== */
@media (max-width: 640px) {
  .section { padding: 2.4rem 0; }
  .section-head { margin-bottom: 1.3rem; }
  .section-head .lead { font-size: .98rem; }
  .section h2, .section-head h2 { font-size: 1.6rem; }

  /* Audience + roof-system cards: 2-up compact tiles */
  .services-grid, .services-grid.grid-4, .services-grid.grid-2 { grid-template-columns: 1fr 1fr; gap: .65rem; }
  .svc { padding: .9rem .8rem; }
  .svc:hover { transform: none; }
  .svc-ic { width: 40px; height: 40px; font-size: 1.2rem; border-radius: 10px; margin-bottom: .55rem; }
  .svc h3 { font-size: .97rem; line-height: 1.22; margin-bottom: .3rem; }
  .svc p { font-size: .84rem; line-height: 1.42; }
  .svc-img { margin: -.9rem -.8rem .6rem; height: 92px; }

  /* Process: 2-up compact step tiles */
  .steps.steps-6 { grid-template-columns: 1fr 1fr; gap: .65rem; }
  .step { padding: .85rem .75rem; text-align: left; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); }
  .step-no { width: 36px; height: 36px; font-size: 1rem; margin: 0 0 .5rem; box-shadow: 0 3px 8px rgba(19,41,75,.12); }
  .step h3 { font-size: .95rem; line-height: 1.22; margin-bottom: .3rem; }
  .step p { font-size: .83rem; line-height: 1.42; }

  /* Work gallery: 2-up, lead photo full width */
  .gallery.gallery-7, .gallery.gallery-9, .gallery.gallery-3 { grid-template-columns: 1fr 1fr; grid-auto-rows: 120px; gap: .6rem; }
  .gallery.gallery-7 .g-item:first-child, .gallery.gallery-9 .g-item:first-child { grid-column: 1 / -1; }
  .g-item:hover img { transform: none; }

  /* Why / About: shorter photo, tighter checklist */
  .why-in { gap: 1.4rem; }
  .why-media img { height: 210px; }
  .why-media img.portrait { height: auto; max-height: 320px; }
  .check-list { gap: .6rem; margin: 1rem 0 1.3rem; }
  .check-list li { font-size: .92rem; line-height: 1.5; }
  .check-list-wide li { margin-bottom: .6rem; }

  /* Contact: offices 2-up (a lone office spans the row) */
  .offices { grid-template-columns: 1fr 1fr; gap: .6rem; margin: 1.1rem 0; }
  .office { padding: .75rem .75rem .35rem; font-size: .85rem; line-height: 1.4; }
  .office a { display: inline-flex; align-items: center; min-height: 44px; font-size: .9rem; }
  .office:only-child { grid-column: 1 / -1; }

  /* Band + footer */
  .finance { padding: 2rem 0; }
  .finance h2 { font-size: 1.5rem; }
  .finance-in { gap: 1rem; }
  .footer { padding-top: 2.4rem; }
  .footer-in { grid-template-columns: 1fr 1fr; gap: 1.6rem 1.2rem; padding-bottom: 1.6rem; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-col h3 { margin-bottom: .5rem; }
  .footer-col a { font-size: .9rem; padding: 0; min-height: 44px; display: flex; align-items: center; line-height: 1.3; }
}

/* ===================================================================
   TWO-DOOR SPLIT (hero) + HOMEOWNER SECTION (2026-10-07)
   =================================================================== */
.doors { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; margin: 1.3rem 0 .2rem; max-width: 620px; }
.door {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .75rem;
  padding: .85rem 1rem; min-height: 64px; border-radius: 12px;
  background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .32); color: #fff;
  transition: background .2s, border-color .2s, transform .2s;
}
.door:hover { background: rgba(255, 255, 255, .2); border-color: var(--yellow); transform: translateY(-2px); }
.door-ic { font-size: 1.5rem; line-height: 1; }
.door-txt strong { display: block; font-family: 'Archivo', sans-serif; font-size: 1rem; line-height: 1.2; color: #fff; }
.door-txt span { display: block; font-size: .84rem; line-height: 1.35; color: #cfe0f0; margin-top: .15rem; }
.door-go { color: var(--yellow); font-weight: 800; font-size: 1.2rem; }

#commercial, #homeowners, #commercial-systems, #residential-systems { scroll-margin-top: 76px; }

.section-home { background: var(--soft); }
.ho-photos { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1.6rem; }
.ho-photos .g-item { height: 300px; }
.ho-grid .svc p a { color: var(--carolina-dk); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.ho-note {
  max-width: 900px; margin: 1.6rem auto 0; padding: 1rem 1.2rem; background: #fff;
  border-left: 4px solid var(--yellow); border-radius: 8px; color: var(--muted); font-size: .95rem;
}
.ho-note strong { color: var(--ink); }
.ho-note a { color: var(--carolina-dk); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.ho-cta { display: flex; gap: .8rem; justify-content: center; flex-wrap: wrap; margin-top: 1.6rem; }
.ho-lic { text-align: center; margin-top: 1rem; }

@media (max-width: 640px) {
  .doors { gap: .55rem; margin: 1rem 0 0; }
  .door { grid-template-columns: 1fr; gap: .3rem; padding: .7rem .7rem .75rem; min-height: 0; position: relative; }
  .door-ic { font-size: 1.25rem; }
  .door-txt strong { font-size: .92rem; padding-right: 1rem; }
  .door-txt span { font-size: .78rem; }
  .door-go { position: absolute; top: .55rem; right: .6rem; font-size: 1.05rem; }
  .door:hover { transform: none; }

  .ho-photos { gap: .6rem; margin-bottom: 1rem; }
  .ho-photos .g-item { height: 130px; }
  .ho-note { margin-top: 1rem; padding: .8rem .9rem; font-size: .86rem; line-height: 1.5; }
  .ho-cta { margin-top: 1.1rem; gap: .55rem; }
  .ho-cta .btn { flex: 1 1 100%; text-align: center; }
  .ho-lic { font-size: .8rem; }
}

/* Quick form property-type select matches the inputs */
.qc-form select { width: 100%; padding: .85rem .95rem; font-size: 16px; font-family: inherit; color: var(--ink); background: rgba(255,255,255,.96); border: 1px solid rgba(255,255,255,.35); border-radius: 8px; min-height: 48px; }
.qc-form select:focus { outline: 3px solid var(--yellow); outline-offset: 1px; border-color: transparent; background: #fff; }

@media (max-width: 640px) {
  /* icon sits beside the card heading instead of above it (saves a row per card) */
  .svc:not(.has-img) { display: grid; grid-template-columns: 34px 1fr; column-gap: .55rem; align-items: center; }
  .svc:not(.has-img) .svc-ic { width: 34px; height: 34px; font-size: 1.05rem; margin: 0; border-radius: 9px; }
  .svc:not(.has-img) h3 { margin: 0; }
  .svc:not(.has-img) p { grid-column: 1 / -1; margin-top: .4rem; }
}

/* Keep a word or hyphenated term on one line (e.g. "Re-Roofs" in the hero h1). */
.nowrap { white-space: nowrap; }