/* Nevada Pacific Heating and Air. Tokens, base, and component styles. */
/* One shared stylesheet per CLAUDE.md Section 2. No raw values below the tokens block. */

:root {
  /* Color. Every pair verified against WCAG contrast, see CLAUDE.md Section 4. */
  --color-surface: #FFFFFF;
  --color-surface-alt: #F4F7FA;
  --color-surface-dark: #0A2A43;
  --color-text: #16222E;
  --color-text-on-dark: #F4F7FA;
  --color-muted: #526271;
  --color-muted-on-dark: #A9B9C7;
  --color-link: #0D4F8B;
  --color-link-hover: #093A66;
  --color-accent-on-dark: #F2A65A;
  --color-cta: #8F3E10;
  --color-cta-hover: #742F0B;
  --color-border: #E1E7EC;
  --color-border-strong: #6B7A88;
  --color-border-on-dark: #7C93A8;
  --color-focus: #C85A18;
  --color-success: #1F7A4D;
  --color-warning: #8A5A00;
  --color-danger: #B3261E;

  /* Type */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  --step--1: clamp(0.8rem, 0.78rem + 0.1vw, 0.875rem);
  --step-0: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
  --step-1: clamp(1.125rem, 1.08rem + 0.25vw, 1.25rem);
  --step-2: clamp(1.375rem, 1.28rem + 0.5vw, 1.625rem);
  --step-3: clamp(1.75rem, 1.55rem + 1vw, 2.25rem);
  --step-4: clamp(2.25rem, 1.9rem + 1.75vw, 3rem);

  /* Space */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-section: clamp(3rem, 2rem + 5vw, 6rem);

  /* Shape */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --shadow-sm: 0 1px 2px rgba(10, 20, 30, 0.06);
  --shadow-md: 0 4px 12px rgba(10, 20, 30, 0.10);
  --shadow-lg: 0 12px 32px rgba(10, 20, 30, 0.14);

  /* Layout */
  --width-prose: 65ch;
  --width-wide: 1200px;

  /* Layering */
  --z-header: 100;
  --z-nav-mobile: 200;
  --z-skip-link: 500;

  /* Motion */
  --duration-fast: 150ms;
  --duration-base: 200ms;
  --duration-slow: 300ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration-base: 0ms;
    --duration-slow: 0ms;
  }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Reset and base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--step-0);
  line-height: 1.55;
  color: var(--color-text);
  background: var(--color-surface);
}
h1, h2, h3, h4 { line-height: 1.2; font-weight: 700; margin: 0 0 var(--space-4); }
h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-2); }
/* No max-width here (only --width-prose exists for a future narrow single-
   column context): every other block in .container (headings, images,
   lists, the testimonial grid) already spans the full container width, so
   capping just <p> at 65ch left it stuck to the left edge with a large,
   unbalanced gap on the right at desktop widths. .container's own 1200px
   cap is already the effective line-length ceiling. */
p { margin: 0 0 var(--space-4); }
ul, ol { margin: 0 0 var(--space-4); padding-left: 1.25em; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--color-link); text-decoration: underline; text-underline-offset: 0.15em; }
a:hover { color: var(--color-link-hover); }
:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}

.container {
  max-width: var(--width-wide);
  margin-inline: auto;
  padding-inline: 1rem;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-4);
  z-index: var(--z-skip-link);
  background: var(--color-cta);
  color: #FFFFFF;
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-sm);
  text-decoration: none;
  font-weight: 600;
  transition: top var(--duration-base) var(--ease-standard);
}
.skip-link:focus {
  top: var(--space-4);
}

/* Button */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 44px;
  padding: var(--space-3) var(--space-5);
  border: 2px solid transparent;
  border-radius: var(--radius-md);
  font-family: inherit;
  font-size: var(--step-0);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-standard),
    transform var(--duration-fast) var(--ease-standard);
}
.btn--cta {
  background: var(--color-cta);
  color: #FFFFFF;
}
.btn--cta:hover {
  background: var(--color-cta-hover);
  color: #FFFFFF;
  transform: translateY(-1px);
}
.btn--cta:active {
  transform: translateY(0);
}
.btn--cta:disabled {
  opacity: 0.6;
  pointer-events: none;
  transform: none;
}
/* Every dark-surface context must be listed here. The CTA fill reaches only
   2.01:1 against --color-surface-dark, so on a dark band the component
   boundary is carried by the border's contrast instead of the fill's. */
.site-header .btn--cta,
.site-footer .btn--cta,
.cta-band .btn--cta {
  border-color: var(--color-text-on-dark);
}
.btn--ghost {
  background: transparent;
  border-color: var(--color-border-strong);
  color: var(--color-link);
}
.btn--ghost:hover {
  background: var(--color-surface-alt);
  color: var(--color-link-hover);
}
.site-header .btn--ghost,
.site-footer .btn--ghost {
  border-color: var(--color-border-on-dark);
  color: var(--color-accent-on-dark);
}

/* Header */
.site-header {
  background: var(--color-surface-dark);
  color: var(--color-text-on-dark);
  position: relative;
  z-index: var(--z-header);
}
.site-header__utility {
  border-bottom: 1px solid var(--color-border-on-dark);
}
.site-header__utility .container {
  padding-block: var(--space-2);
}
.site-header__utility p {
  margin: 0;
  font-size: var(--step--1);
  color: var(--color-muted-on-dark);
}
.site-header__utility a {
  color: var(--color-accent-on-dark);
  font-weight: 600;
  text-decoration: none;
}
.site-header__utility a:hover { text-decoration: underline; }

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-4);
}

.site-header__logo {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  text-decoration: none;
  color: var(--color-text-on-dark);
  font-weight: 700;
  font-size: var(--step-1);
  line-height: 1.15;
}
.site-header__logo:hover { color: var(--color-text-on-dark); }
.site-header__logo-mark {
  display: block;
  height: 2.5rem;
  width: auto;
}
.site-header__logo-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.site-header__logo span { display: block; }
.site-header__logo .site-header__logo-sub {
  font-size: var(--step--1);
  font-weight: 400;
  color: var(--color-muted-on-dark);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: transparent;
  border: 2px solid var(--color-border-on-dark);
  border-radius: var(--radius-sm);
  color: var(--color-text-on-dark);
  min-height: 44px;
  min-width: 44px;
  padding: var(--space-2) var(--space-4);
  font-family: inherit;
  font-size: var(--step--1);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  cursor: pointer;
}

.site-nav {
  display: flex;
}
.site-nav > ul {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-nav a {
  color: var(--color-text-on-dark);
  text-decoration: none;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: var(--step--1);
}
.site-nav a:hover {
  color: var(--color-accent-on-dark);
}
.site-nav a[aria-current="page"]:not(.btn) {
  color: var(--color-accent-on-dark);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.site-nav__item--has-children {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.site-nav__submenu-toggle {
  background: transparent;
  border: none;
  color: var(--color-text-on-dark);
  min-height: 44px;
  min-width: 44px;
  cursor: pointer;
  font-size: var(--step-0);
}
.site-nav__submenu {
  list-style: none;
  margin: 0;
  padding: var(--space-2) 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.site-nav__submenu[hidden] { display: none; }

@media (max-width: 63.9375rem) {
  .site-nav {
    display: none;
    position: absolute;
    inset-inline: 0;
    top: 100%;
    z-index: var(--z-nav-mobile);
    background: var(--color-surface-dark);
    border-top: 1px solid var(--color-border-on-dark);
    padding: var(--space-4) 1rem var(--space-6);
  }
  .site-nav[data-open="true"] { display: block; }
  .site-nav > ul {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-4);
    width: 100%;
  }
  /* Row, not column: the Services link and the submenu toggle sit side by
     side (arrow to the right of the label), and only the submenu itself
     (once opened) wraps onto its own full-width row below them. Column
     direction here previously stacked all three (link, toggle, submenu)
     vertically, leaving a tall gap under "SERVICES" with the arrow alone
     on its own line even before the submenu opened.
     justify-content: space-between (an earlier attempt at this fix) pushed
     the toggle to the far right edge of the full-width mobile panel,
     visually disconnecting the arrow from "SERVICES" instead of reading as
     part of it. flex-start plus a small gap groups them together on the
     left instead; the negative margin below trims the touch target's own
     internal centering padding so the visible arrow sits close to the
     label without shrinking the real 44px tap target. */
  .site-nav__item--has-children {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: var(--space-2);
    width: 100%;
  }
  .site-nav__item--has-children .site-nav__submenu-toggle {
    margin-left: -8px;
  }
  .site-nav__item--has-children .site-nav__submenu {
    flex-basis: 100%;
  }
}
@media (min-width: 64rem) {
  .nav-toggle { display: none; }
  .site-nav__submenu {
    position: absolute;
    top: 100%;
    left: 0;
    background: var(--color-surface-dark);
    border: 1px solid var(--color-border-on-dark);
    border-radius: var(--radius-sm);
    padding: var(--space-3);
    min-width: 14rem;
    box-shadow: var(--shadow-lg);
  }
  /* The 44px touch target (CLAUDE.md Section 3) is much wider than the 12px
     chevron centered inside it, so on top of the row's own gaps it read as
     an oversized dead zone before and after the icon. Negative margins pull
     the visible icon back toward its neighbors while the button's own
     border box, so its real click and focus-ring area, stays 44px wide.
     Values are measured to leave a few px of clearance on both sides so the
     toggle's box never overlaps the Services link or the About item. */
  .site-nav__submenu-toggle {
    margin-left: -6px;
    margin-right: -20px;
  }
}

/* Breadcrumbs */
.breadcrumb {
  background: var(--color-surface-alt);
  border-bottom: 1px solid var(--color-border);
}
.breadcrumb ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--step--1);
  color: var(--color-muted);
}
.breadcrumb li { display: flex; align-items: center; min-height: 44px; }
/* Padding, not a bigger font, reaches the 44px target: the breadcrumb trail
   is a compact secondary nav, so the visible text stays small while the
   tappable area meets the project's touch-target standard (found via a
   real touch-target sweep on mobile, where the equivalent header nav link
   is display:none behind the collapsed menu and so cannot exempt this). */
.breadcrumb a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-block: var(--space-3);
}
.breadcrumb li:not(:last-child)::after {
  content: "/";
  margin-inline-start: var(--space-2);
  color: var(--color-border-strong);
}
.breadcrumb a { color: var(--color-link); }
.breadcrumb [aria-current="page"] { color: var(--color-text); font-weight: 600; }

/* Hero */
.hero {
  background: var(--color-surface-alt);
  padding-block: var(--space-section);
}
.hero__inner {
  display: grid;
  gap: var(--space-6);
  align-items: center;
}
.hero__eyebrow {
  color: var(--color-cta);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: var(--step--1);
}
.hero__lead {
  font-size: var(--step-1);
  color: var(--color-muted);
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-top: var(--space-5);
}
.hero__media {
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4 / 3;
}
.hero__media img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 64rem) {
  .hero__inner { grid-template-columns: 1.35fr 1fr; }
  /* "Nevada Pacific Heating & Air" at the shared --step-4 scale (max 3rem)
     does not fit the hero's text column at any desktop width, even at the
     widened 1.35fr ratio above: it wraps mid-brand-name. Scoped to desktop
     only, since mobile's single-column hero has plenty of width and looks
     better at the larger shared scale. */
  .hero h1 { font-size: clamp(1.85rem, 1.5rem + 1.1vw, 2.25rem); }
}

/* Service tile grid (homepage) */
.service-tile-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-5);
  grid-template-columns: 1fr;
}
@media (min-width: 40rem) {
  .service-tile-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 64rem) {
  .service-tile-grid { grid-template-columns: repeat(3, 1fr); }
}
/* .service-tile-grid has margin:0 (needed elsewhere so it does not add
   unwanted space of its own), so without this the "View All HVAC Services"
   button sits flush against the grid below it. */
.service-tile-grid__cta {
  margin-top: var(--space-6);
}
.service-tile {
  position: relative;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  transition: transform var(--duration-fast) var(--ease-standard),
    box-shadow var(--duration-fast) var(--ease-standard);
}
.service-tile:has(a:hover) {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.service-tile__title { font-size: var(--step-1); margin-bottom: var(--space-2); }
.service-tile__title a { text-decoration: none; color: var(--color-text); }
.service-tile__title a:hover { color: var(--color-link); text-decoration: underline; }
/* Stretched-link pattern: the visible link and its focus ring stay on the
   heading text, but the tappable hit area covers the whole card. The
   heading text alone measures ~21px tall, under the WCAG 2.2 SC 2.5.8 24px
   floor; the card is the "whole tile is interactive" affordance already
   implied by the hover lift above, so this makes the real hit target match
   what the hover state visually promises instead of padding the heading
   text itself, which would look wrong next to the card's other headings. */
.service-tile__title a::after {
  content: "";
  position: absolute;
  inset: 0;
}
.service-tile__body { color: var(--color-muted); font-size: var(--step--1); margin-bottom: 0; }

/* Testimonials (real customer reviews, every page) */
/* margin-bottom matters as much as margin-top here: .container itself has
   no padding-block, and on About, /services, and Contact, testimonials is
   the last element before the footer, so with no bottom margin the cards
   sat flush against the footer's top edge with zero gap. */
.testimonials { margin-block: var(--space-7) var(--space-section); }
.testimonial-grid {
  list-style: none;
  margin: var(--space-5) 0 0;
  padding: 0;
  display: grid;
  gap: var(--space-5);
  grid-template-columns: 1fr;
}
@media (min-width: 40rem) {
  .testimonial-grid { grid-template-columns: repeat(2, 1fr); }
}
.testimonial {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-5);
}
.testimonial__quote { margin: 0; }
.testimonial__rating {
  display: flex;
  gap: 0.15em;
  color: var(--color-cta);
  margin-bottom: var(--space-2);
}
.testimonial__rating svg { display: block; }
.testimonial__quote p {
  margin: 0 0 var(--space-3);
  color: var(--color-text);
}
.testimonial__author {
  font-size: var(--step--1);
  font-weight: 600;
  font-style: normal;
  color: var(--color-muted);
}

/* Service index (compact cross-link, silo pages) */
.service-index {
  background: var(--color-surface-alt);
  border-radius: var(--radius-md);
  padding: var(--space-6);
}
.service-index h2 { font-size: var(--step-2); }
.service-index ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-3);
  grid-template-columns: 1fr;
}
@media (min-width: 40rem) {
  .service-index ul { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 64rem) {
  .service-index ul { grid-template-columns: repeat(3, 1fr); }
}
.service-index a {
  display: block;
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  text-decoration: none;
  font-weight: 600;
}
.service-index a:hover {
  border-color: var(--color-link);
  color: var(--color-link-hover);
}

/* Figure, caption, media-link */
.figure {
  margin: 0 0 var(--space-6);
}
.figure > .media-link > img,
.figure > img {
  width: 100%;
  border-radius: var(--radius-md);
}
.figcaption {
  margin-top: var(--space-2);
  font-size: var(--step--1);
  color: var(--color-muted);
}
.media-link {
  display: block;
  border-radius: var(--radius-md);
}
.media-link:focus-visible { outline-offset: 4px; }

/* Gallery mosaic (/services) */
.mosaic {
  list-style: none;
  column-count: 1;
  column-gap: var(--space-5);
}
@media (min-width: 40rem) { .mosaic { column-count: 2; } }
@media (min-width: 64rem) { .mosaic { column-count: 3; } }
.mosaic .figcaption { font-style: italic; }
.mosaic__item {
  break-inside: avoid;
  margin-bottom: var(--space-5);
}

/* Disclaimer */
.disclaimer {
  background: var(--color-surface-alt);
  border-left: 4px solid var(--color-border-strong);
  padding: var(--space-4) var(--space-5);
  font-size: var(--step--1);
  color: var(--color-muted);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

/* Quote / CTA band */
.cta-band {
  background: var(--color-surface-dark);
  color: var(--color-text-on-dark);
  padding-block: var(--space-section);
}
.cta-band h2 { color: var(--color-text-on-dark); }
.cta-band p { color: var(--color-muted-on-dark); }
/* Inline links here sit on the dark band, so the light-surface --color-link
   (1.76:1 on navy, a real AA failure caught by Lighthouse) must not apply.
   :not(.btn) is load-bearing: without it this rule repaints the CTA button's
   label and undoes its own fill, the exact specificity bug Section 5 of
   CLAUDE.md documents. */
.cta-band a:not(.btn) { color: var(--color-accent-on-dark); }
.cta-band a:not(.btn):hover { color: var(--color-text-on-dark); }

/* Contact form */
.contact-form {
  display: grid;
  gap: var(--space-4);
}
.contact-form__row {
  display: grid;
  gap: var(--space-4);
}
@media (min-width: 40rem) {
  .contact-form__row--two { grid-template-columns: 1fr 1fr; }
}
.contact-form label {
  display: block;
  font-size: var(--step--1);
  font-weight: 600;
  margin-bottom: var(--space-2);
}
.contact-form input,
.contact-form textarea {
  width: 100%;
  min-height: 44px;
  padding: var(--space-3);
  font: inherit;
  font-size: var(--step-0);
  color: var(--color-text);
  background: var(--color-surface);
  border: 2px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
}
.site-footer .contact-form input,
.site-footer .contact-form textarea {
  border-color: var(--color-border-on-dark);
}
.contact-form textarea { min-height: 8rem; resize: vertical; }
.contact-form input:focus-visible,
.contact-form textarea:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 1px;
}
.contact-form .required::after {
  content: " *";
  color: var(--color-danger);
}
.site-footer .contact-form .required::after {
  color: var(--color-accent-on-dark);
}
.contact-form__error {
  color: var(--color-danger);
  font-size: var(--step--1);
  margin-top: var(--space-1);
}
.site-footer .contact-form__error {
  color: var(--color-accent-on-dark);
}
.contact-form__honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Footer */
.site-footer {
  background: var(--color-surface-dark);
  color: var(--color-text-on-dark);
  padding-block: var(--space-section);
}
.site-footer h2 { color: var(--color-text-on-dark); font-size: var(--step-2); }
.site-footer a { color: var(--color-accent-on-dark); }
.site-footer a:hover { color: var(--color-text-on-dark); }
.site-footer__grid {
  display: grid;
  gap: var(--space-7);
  grid-template-columns: 1fr;
}
@media (min-width: 56rem) {
  .site-footer__grid { grid-template-columns: 1fr 1.2fr; }
}
.site-footer__nap p { color: var(--color-muted-on-dark); }
.site-footer__social {
  display: flex;
  align-items: center;
  min-height: 44px;
  gap: var(--space-2);
  margin-top: var(--space-4);
  text-decoration: none;
  font-weight: 600;
}
/* Two social links now stack (Instagram above Facebook); the second one
   only needs a small gap from the first, not the full space-4 it also gets
   from the NAP paragraph above the first link. */
.site-footer__social + .site-footer__social { margin-top: var(--space-2); }
.site-footer__social svg { flex-shrink: 0; }
.site-footer__legal {
  margin-top: var(--space-7);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border-on-dark);
  font-size: var(--step--1);
  color: var(--color-muted-on-dark);
}
.site-footer__legal p { margin: 0 0 var(--space-2); }

/* 404 */
.error-page {
  padding-block: var(--space-section);
  text-align: center;
}