/* ============================================================================
   site.css — everything specific to sang.providentialroofing.com
   ----------------------------------------------------------------------------
   styles.css is an unmodified copy of providentialroofing.com's stylesheet, so
   this site inherits the company's colours, buttons, cards and spacing exactly.
   Keep it that way: 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, so equal-specificity rules in here win.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   1. KOREAN TYPOGRAPHY
   Archivo and Inter carry no Hangul glyphs at all. Left alone, every Korean
   character would fall back to whatever the visitor's OS happens to ship —
   Malgun Gothic on Windows, Apple SD Gothic Neo on a Mac, something else on
   Android — so the site would look different on every device and mismatched
   against the Latin text sitting beside it.

   Naming Noto Sans KR *after* the Latin faces is deliberate: the browser takes
   each glyph from the first family that has it, so Latin and numerals still
   render in Archivo/Inter and only Hangul falls through to Noto. One line of
   mixed Korean and English stays visually consistent.
   --------------------------------------------------------------------------- */
body { font-family: 'Inter', 'Noto Sans KR', system-ui, Arial, sans-serif; }
h1, h2, h3, h4, h5,
.btn, .nav > a, .kicker, .eyebrow, .qc-title, .footer-word, .step-no, .hero-pills {
  font-family: 'Archivo', 'Noto Sans KR', system-ui, sans-serif;
}

/* Archivo's -.01em tracking is tuned for Latin. Applied to Hangul it crowds the
   syllable blocks together, so headings on the Korean pages get normal tracking.
   word-break:keep-all stops Korean wrapping mid-word — the CJK default breaks
   anywhere, which chops words in half at the end of a line. */
html[lang="ko"] h1,
html[lang="ko"] h2,
html[lang="ko"] h3,
html[lang="ko"] h4,
html[lang="ko"] h5 { letter-spacing: 0; word-break: keep-all; }

/* Hangul has a taller visual body than Latin and needs more air between lines. */
html[lang="ko"] body,
html[lang="ko"] p,
html[lang="ko"] li { line-height: 1.75; word-break: keep-all; }
html[lang="ko"] .hero h1 { line-height: 1.25; }
html[lang="ko"] .btn { letter-spacing: 0; }

/* The base button style uppercases its text. That does nothing to Hangul but it
   does shout at the English words mixed into Korean buttons, so drop it here. */
html[lang="ko"] .btn { text-transform: none; }

/* ---------------------------------------------------------------------------
   2. LANGUAGE SWITCH
   --------------------------------------------------------------------------- */
.lang-swap {
  font-family: 'Archivo', 'Noto Sans KR', sans-serif;
  font-weight: 700; font-size: .84rem; letter-spacing: .02em;
  color: var(--carolina-deep); border: 1.5px solid var(--line);
  border-radius: 999px; padding: .34rem .85rem; white-space: nowrap;
  transition: .16s;
}
.lang-swap:hover { border-color: var(--carolina); color: var(--carolina); background: var(--soft); }

/* 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; } }

/* ---------------------------------------------------------------------------
   3. SMALL COMPONENTS this site adds
   --------------------------------------------------------------------------- */

/* Two-column check list for the About page, where the items are short. */
.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; } }

/* Certification badges. Greyscale until hover so a row of clashing brand colours
   doesn't pull attention away from the copy it is supporting. */
.badge-row {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 2.2rem; margin-top: 2.6rem; padding-top: 2rem;
  border-top: 1px solid var(--line);
}
.badge-row img { height: 46px; width: auto; filter: grayscale(1); opacity: .72; transition: .2s; }
.badge-row img:hover { filter: none; opacity: 1; }

/* Office cards laid out as a grid on the Areas page. */
.offices-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.2rem; }

/* The company site shows five roofing-material cards, so styles.css hard-codes
   .types-grid to repeat(5,1fr). This site shows four, which left a dead 212px
   column on the right with the cards bunched to one side. auto-fit sizes the
   tracks to the cards actually present.

   Scoped to desktop on purpose: below 980px the parent stylesheet drops to two
   columns, and an unconditional rule here would override that too (site.css
   loads last, so it beats the parent's media queries at equal specificity). */
@media (min-width: 981px) {
  .types-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
}

/* Same problem, different grid: .services-grid is repeat(3,1fr), and the two
   warranty cards on the Services page landed in the left two tracks with an empty
   third — the pair read as off-centre rather than as a pair. */
.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: the licensing statement, and lines that are text rather than links.
   The base .footer-col styles every child as a link, which left the address and
   opening hours looking clickable. */
.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; }

/* Hero byline — Sang's photo, name and title under the headline. The point of
   this site is that there is one named person behind it, so he appears in the
   hero rather than only on the About page. Name and title are live text, not
   part of the JPEG, so they translate, scale and can be read by a screen reader. */
.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', 'Noto Sans KR', 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; }
}

/* About page portrait. .why-media img is styled for landscape job photos; a tall
   portrait needs its own height or it stretches to fill the column. */
.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
   styles.css hard-codes the company homepage photo into .hero-bg. Each page sets
   its own background-image inline; this keeps the sizing behaviour that the
   shorthand would otherwise carry with it.
   --------------------------------------------------------------------------- */
.hero-bg {
  background-image: none;   /* clears the company homepage photo baked into styles.css,
                               so a page that forgets its inline image degrades to the
                               navy overlay instead of requesting a file we don't ship */
  background-size: cover; background-position: center; background-repeat: no-repeat;
}

/* The hero's right-hand card is the only thing at the fold on a phone that can
   be tapped, so it leads on mobile rather than trailing a tall block of copy. */
@media (max-width: 900px) {
  .hero-in { grid-template-columns: 1fr; }
  .hero-quote { justify-self: stretch; max-width: none; }
}