/* ==========================================================================
   Webster Electric — site styles
   The look of the current websterelectricdfw.com, carried across a full
   site: cream card stock, the logo's navy, Cormorant Garamond with a
   Pinyon Script hand, short navy rules, letterspaced small capitals, and
   square outlined buttons. Navy panels for contact and the footer.
   ========================================================================== */

:root {
  color-scheme: light;
  --paper:    #f4f2ec;   /* warm cream card stock */
  --paper-2:  #faf9f5;
  --paper-3:  #ebe8df;
  --ink:      #1b4965;   /* exact navy sampled from the logo */
  --ink-soft: #4f7088;
  --text:     #243845;   /* body copy, as on terms.html */
  --mute:     #5d7a8d;
  --hair:     #d8d4c8;

  /* The navy panel (contact band, footer) */
  --panel:       #1b4965;
  --panel-text:  #f4f2ec;
  --panel-soft:  #c3cad2;
  --panel-icon:  #aeb6bf;
  --panel-mute:  #8da4b2;
  --panel-line:  rgba(255, 255, 255, .14);

  --serif: "Cormorant Garamond", Georgia, serif;
  --script: "Pinyon Script", cursive;
  --caps: Georgia, "Times New Roman", serif;

  --wrap: 1120px;
  --wrap-narrow: 760px;
  --section-y: clamp(4.5rem, 9vw, 7rem);
  --ease: cubic-bezier(.2, .7, .3, 1);
}

/* Dark: the card stock goes to deep navy and the ink to cream. The panel
   goes darker still, so it reads as its own band. The two blocks below
   are identical on purpose. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --paper: #0f2433; --paper-2: #132c3e; --paper-3: #183448;
    --ink: #f1efe8; --ink-soft: #b5c6d2; --text: #d6dee3; --mute: #93a9b8;
    --hair: #2a4558;
    --panel: #0a1a26;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #0f2433; --paper-2: #132c3e; --paper-3: #183448;
  --ink: #f1efe8; --ink-soft: #b5c6d2; --text: #d6dee3; --mute: #93a9b8;
  --hair: #2a4558;
  --panel: #0a1a26;
}

/* --------------------------------------------------------------- Reset -- */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font-family: var(--serif);
  font-size: 1.1875rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg { max-width: 100%; height: auto; display: block; }

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: .02em;
  color: var(--ink);
  margin: 0 0 .5em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.4rem, 6vw, 3.6rem); }
h2 { font-size: clamp(1.8rem, 4.5vw, 2.6rem); }
h3 { font-size: 1.45rem; font-weight: 600; letter-spacing: .01em; }

p { margin: 0 0 1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: var(--ink); text-underline-offset: 3px; text-decoration-thickness: 1px; }

:focus-visible { outline: 1.5px solid var(--ink); outline-offset: 4px; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--panel); color: var(--panel-text); padding: .75rem 1.25rem;
}
.skip-link:focus { left: 1rem; top: 1rem; }

/* ------------------------------------------------------------ Utilities -- */

.wrap { width: min(100% - 3.5rem, var(--wrap)); margin-inline: auto; }
.wrap-narrow { width: min(100% - 3.5rem, var(--wrap-narrow)); margin-inline: auto; }
@media (max-width: 480px) {
  .wrap, .wrap-narrow { width: min(100% - 2rem, var(--wrap)); }
}

.section { padding-block: var(--section-y); }
.band { background: var(--paper-2); border-block: 1px solid var(--hair); }
.center { text-align: center; }

/* The handwritten line, from the current site. */
.script {
  font-family: var(--script);
  font-weight: 400;
  font-size: clamp(1.7rem, 4.5vw, 2.4rem);
  line-height: 1.2;
  color: var(--ink-soft);
  margin: 0 0 .25rem;
}

/* Letterspaced Georgia capitals. */
.caps {
  font-family: var(--caps);
  font-size: .72rem; font-weight: 400;
  letter-spacing: .32em; text-transform: uppercase;
  color: var(--ink-soft);
}

/* The short navy rule under a heading. */
.tagrule { width: 54px; height: 2px; border: 0; background: var(--ink); margin: 1.6rem auto 1.5rem; }
.tagrule--left { margin-left: 0; }

.section-head { text-align: center; max-width: 40rem; margin: 0 auto clamp(2.5rem, 5vw, 3.75rem); }
.section-head h2 { margin-bottom: 0; }
.section-head .tagrule { margin-bottom: 1.25rem; }

.lede { font-size: clamp(1.2rem, 2vw, 1.35rem); line-height: 1.6; color: var(--ink-soft); }

/* Placeholder — content still to be supplied in site.config.js */
.tbd {
  display: inline-block;
  font-family: var(--caps); font-size: .62rem; font-style: normal;
  letter-spacing: .2em; text-transform: uppercase; line-height: 1.5;
  color: var(--ink-soft);
  border: 1px dashed currentColor; border-radius: 2px;
  padding: .15rem .55rem;
  vertical-align: middle;
}
.contact .tbd, .site-footer .tbd { color: var(--panel-soft); }

/* ------------------------------------------------------------- Buttons -- */
/* Square, outlined in navy; fills on hover — as on the current site. */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .7rem;
  min-height: 52px;
  padding: .8rem 2rem;
  font-family: var(--serif); font-size: 1.15rem; font-weight: 500;
  letter-spacing: .04em;
  color: var(--ink); background: transparent;
  border: 1.5px solid var(--ink);
  text-decoration: none;
  cursor: pointer;
  transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}
.btn svg { width: 18px; height: 18px; flex: none; }
.btn:hover { background: var(--ink); color: var(--paper-2); }
.btn--solid { background: var(--ink); color: var(--paper-2); }
.btn--solid:hover { background: transparent; color: var(--ink); }
.btn--sm { min-height: 42px; padding: .45rem 1.1rem; font-size: 1.02rem; }
/* On the navy panel. */
.btn--light { color: var(--panel-text); border-color: rgba(244, 242, 236, .7); }
.btn--light:hover { background: var(--panel-text); color: var(--panel); border-color: var(--panel-text); }

.btn-row { display: flex; flex-wrap: wrap; gap: .9rem; }
.btn-row.center { justify-content: center; }

.text-link {
  font-family: var(--caps); font-size: .7rem; letter-spacing: .26em; text-transform: uppercase;
  color: var(--ink); text-decoration: none;
  border-bottom: 1px solid var(--hair); padding-bottom: .3rem;
  transition: border-color .2s ease;
}
.text-link:hover { border-color: var(--ink); }

/* -------------------------------------------------------------- Header -- */

.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(244, 242, 236, .92);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--hair);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .site-header { background: rgba(15, 36, 51, .92); }
}
:root[data-theme="dark"] .site-header { background: rgba(15, 36, 51, .92); }

.site-header__inner {
  display: flex; align-items: center; gap: 1.25rem;
  min-height: 84px;
}
.brand { flex: none; display: block; }
.logo--header { width: auto; height: 60px; }

.nav { display: flex; align-items: center; gap: 2rem; margin-left: auto; }
.nav__list { display: flex; gap: 1.9rem; list-style: none; margin: 0; padding: 0; }
.nav__link {
  font-family: var(--caps); font-size: .7rem; letter-spacing: .26em; text-transform: uppercase;
  color: var(--ink-soft); text-decoration: none;
  padding: .4rem 0;
  border-bottom: 1px solid transparent;
  transition: color .2s ease, border-color .2s ease;
}
.nav__link:hover { color: var(--ink); }
.nav__link[aria-current="page"] { color: var(--ink); border-bottom-color: var(--ink); }

.theme-toggle, .nav-toggle {
  display: inline-grid; place-items: center; flex: none;
  width: 40px; height: 40px;
  background: none; border: 1px solid var(--hair); border-radius: 50%;
  color: var(--ink); cursor: pointer;
  transition: border-color .2s ease;
}
.theme-toggle:hover, .nav-toggle:hover { border-color: var(--ink); }
.theme-toggle svg, .nav-toggle svg { width: 18px; height: 18px; }
.theme-toggle .icon-sun { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .icon-sun { display: block; }
  :root:not([data-theme="light"]) .theme-toggle .icon-moon { display: none; }
}
:root[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
.nav-toggle { display: none; }
.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded="true"] .icon-open { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: block; }

@media (max-width: 900px) {
  .theme-toggle { margin-left: auto; }
  .nav-toggle { display: inline-grid; }
  .nav {
    position: absolute; inset: 100% 0 auto 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--paper);
    border-bottom: 1px solid var(--hair);
    padding: .5rem 1.75rem 1.75rem;
  }
  .nav[hidden] { display: none; }
  .nav__list { flex-direction: column; gap: 0; }
  .nav__link { display: block; padding: 1.05rem 0; border-bottom: 1px solid var(--hair); font-size: .74rem; }
  .nav__link[aria-current="page"] { border-bottom-color: var(--hair); font-weight: 700; }
  .nav .btn { margin-top: 1.25rem; }
}

/* ---------------------------------------------------------------- Hero -- */
/* The current homepage, nearly as it is: the logo, centered, on card
   stock, with the script line, a rule, and the phone number. */

.hero {
  min-height: min(calc(100svh - 85px), 860px);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  padding: clamp(3rem, 8vw, 5rem) 1.75rem;
}
.logo--hero { width: clamp(240px, 40vw, 400px); height: auto; margin-bottom: .5rem; }
.sr-only {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.hero .script { margin-top: .75rem; }
.hero .tagrule { margin: 1.75rem auto 1.5rem; }
.hero__lede { max-width: 34rem; margin: 1.75rem auto 0; }
.hero .btn-row { margin-top: 2.5rem; }

/* Interior page heading: the same, compressed. */
.page-hero {
  text-align: center;
  padding: clamp(3.5rem, 8vw, 5.5rem) 0 clamp(2.5rem, 5vw, 3.5rem);
  border-bottom: 1px solid var(--hair);
}
.page-hero h1 { margin-bottom: 0; }
.page-hero .tagrule { margin-bottom: 1.25rem; }
.page-hero .lede { max-width: 36rem; margin-inline: auto; }

/* The logo is navy on transparent: printed in cream wherever the ground
   is navy (the footer, and everywhere in dark mode). */
.logo--footer { filter: brightness(0) invert(.95) sepia(.08); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .logo { filter: brightness(0) invert(.95) sepia(.08); }
}
:root[data-theme="dark"] .logo { filter: brightness(0) invert(.95) sepia(.08); }

/* ---------------------------------------------------------------- Steps -- */

.steps {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: clamp(2rem, 4vw, 2.75rem) clamp(1.75rem, 4vw, 3rem);
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
}
@media (min-width: 900px) { .steps { grid-template-columns: repeat(3, 1fr); } }
.step { border-top: 1px solid var(--hair); padding-top: 1.4rem; }
.step__num {
  display: block; margin-bottom: .45rem;
  font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 1.35rem;
  color: var(--ink-soft);
}
.step h3 { margin-bottom: .35rem; }
.step p { margin: 0; font-size: 1.08rem; }

/* ------------------------------------------------------------- Services -- */

.services {
  display: grid; gap: clamp(1.25rem, 3vw, 1.75rem);
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
}
@media (min-width: 900px) { .services { grid-template-columns: repeat(3, 1fr); } }
.service {
  background: var(--paper-2);
  border: 1px solid var(--hair);
  padding: clamp(1.75rem, 3.5vw, 2.4rem);
  text-align: center;
}
.service h3 { margin-bottom: .6rem; }
.service h3::after { content: ""; display: block; width: 32px; height: 1.5px; background: var(--ink); margin: .9rem auto 0; }
.service p { margin: 0; font-size: 1.08rem; }
.service--tbd { background: transparent; border-style: dashed; }
.service--tbd h3::after { background: var(--hair); }
.service--tbd p { font-style: italic; color: var(--mute); }

/* ---------------------------------------------------- Warranty & promises -- */

.assurance {
  display: grid; gap: clamp(2.5rem, 6vw, 5rem);
  grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
  align-items: center;
}
.warranty { display: grid; grid-template-columns: auto 1fr; gap: clamp(1.5rem, 4vw, 2.5rem); align-items: start; }
@media (max-width: 480px) { .warranty { grid-template-columns: 1fr; } }
.warranty__big { text-align: center; padding-right: clamp(1.5rem, 4vw, 2.5rem); border-right: 1px solid var(--hair); }
@media (max-width: 480px) { .warranty__big { border-right: 0; padding-right: 0; border-bottom: 1px solid var(--hair); padding-bottom: 1.25rem; } }
.warranty__num {
  display: block;
  font-family: var(--serif); font-weight: 400; font-size: clamp(6rem, 14vw, 8.5rem); line-height: .85;
  color: var(--ink);
}
.warranty__unit {
  display: block; margin-top: .9rem; white-space: nowrap;
  font-family: var(--caps); font-size: .62rem; letter-spacing: .28em; text-transform: uppercase; line-height: 1.8;
  color: var(--ink-soft);
}
.warranty__body p { margin-bottom: .75rem; }
.warranty__body .text-link { display: inline-block; margin-top: .75rem; }

.promises {
  list-style: none; margin: 0; padding: 0;
  border-top: 1px solid var(--hair);
}
.promises li {
  display: flex; align-items: baseline; gap: 1rem;
  padding: .85rem .25rem;
  border-bottom: 1px solid var(--hair);
  font-size: 1.2rem; color: var(--ink);
}
.promises li::before { content: ""; width: 14px; height: 1.5px; background: var(--ink-soft); flex: none; transform: translateY(-.3em); }

/* ----------------------------------------------------- Contact (panel) -- */
/* The current site's contact panel: navy, script line, hairline rows,
   and the owner's name in italic. */

.contact {
  background: var(--panel); color: var(--panel-text);
  padding: clamp(4.5rem, 9vw, 6rem) 1.75rem;
  text-align: center;
}
.contact .script { color: var(--panel-soft); font-size: 2rem; margin-bottom: .5rem; }
.contact h2 { color: var(--panel-text); margin-bottom: 2.75rem; letter-spacing: .03em; }
.contact .btn-row { margin-top: 2.5rem; }

.rows { list-style: none; max-width: 460px; margin: 0 auto; padding: 0; text-align: left; }
.row {
  display: flex; align-items: center; gap: 1.1rem;
  padding: 1.15rem .25rem;
  border-top: 1px solid var(--panel-line);
  font-size: 1.22rem;
}
.row:last-child { border-bottom: 1px solid var(--panel-line); }
.row__icon { width: 22px; height: 22px; flex: none; color: var(--panel-icon); }
.row__icon svg { width: 100%; height: 100%; }
.row a, .row > span:last-child { color: var(--panel-text); text-decoration: none; letter-spacing: .02em; overflow-wrap: anywhere; transition: color .2s; }
.row a:hover { color: #fff; }

.owner { margin: 3rem 0 0; font-style: italic; font-size: 1.45rem; color: var(--panel-text); }
.owner small {
  display: block; margin-top: .5rem; font-style: normal;
  font-family: var(--caps); font-size: .64rem; letter-spacing: .3em; text-transform: uppercase;
  color: var(--panel-mute);
}

/* ------------------------------------------------------- Details card -- */

.card {
  background: var(--paper-2);
  border: 1px solid var(--hair);
  padding: clamp(1.75rem, 4vw, 2.5rem);
}
.card h2 { font-size: 1.6rem; }
.detail-list { list-style: none; margin: 0; padding: 0; }
.detail-list li {
  display: grid; grid-template-columns: 7rem 1fr; gap: .3rem 1.25rem; align-items: baseline;
  padding: .85rem 0; border-bottom: 1px solid var(--hair);
}
.detail-list li:last-child { border-bottom: 0; padding-bottom: 0; }
.detail-list .dt { font-family: var(--caps); font-size: .62rem; letter-spacing: .26em; text-transform: uppercase; color: var(--ink-soft); }
.detail-list .dd { color: var(--ink); }
@media (max-width: 520px) { .detail-list li { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- Terms -- */
/* As on terms.html: one column, each term between hairlines. */

.terms { padding-block: clamp(2rem, 5vw, 3rem) var(--section-y); }
.term { padding: 1.6rem 0; border-top: 1px solid var(--hair); scroll-margin-top: 6rem; }
.term:first-child { border-top: 0; }
.term h2 { font-size: 1.5rem; font-weight: 600; letter-spacing: .01em; margin-bottom: .45rem; }
.term:target h2 { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; }

/* ---------------------------------------------------------------- Footer -- */
/* Navy, like the bottom of the current site; joins the contact panel. */

.site-footer {
  background: var(--panel); color: var(--panel-mute);
  padding: clamp(3rem, 6vw, 4rem) 1.75rem 2.75rem;
  text-align: center;
}
/* Straight after the contact panel, the two read as one navy block. */
.site-footer { border-top: 1px solid var(--panel-line); }
.footer__top { padding-bottom: 2.25rem; border-bottom: 1px solid var(--panel-line); margin-bottom: 2rem; }
.footer__logo { display: inline-block; }
.logo--footer { width: 170px; }
.footer__script { color: var(--panel-soft); font-size: 1.6rem; margin-top: .6rem; }
.footer__nav { list-style: none; margin: 1.5rem 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem 2rem; }
.footer__nav a, .footer__line a {
  font-family: var(--caps); font-size: .68rem; letter-spacing: .26em; text-transform: uppercase;
  color: var(--panel-mute); text-decoration: none; transition: color .2s;
}
.footer__nav a:hover { color: var(--panel-text); }
.footer__line {
  margin: 0;
  font-family: var(--caps); font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; line-height: 2;
}
.foot-sep { margin: 0 .4rem; opacity: .6; }

/* ---------------------------------------------------------- Scroll reveal -- */
/* A gentle settle as content arrives. */

.js .reveal { opacity: 0; transform: translateY(10px); }
.reveal.is-in {
  opacity: 1; transform: none;
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------- 404 page -- */

.error-page {
  min-height: 62vh; display: grid; place-items: center; text-align: center;
  padding-block: var(--section-y);
}
.error-page__title { font-size: clamp(2.6rem, 8vw, 4.5rem); }