/* =============================================================================
   AZ Water-Wise Kits — retrofit concept
   /conservation/water-conservation-kit-test/css/kit.css
   =============================================================================
   Brings home-test-v2's CONTENT styling into a page that otherwise keeps the
   live site's chrome: its own head.php, main nav, banner and footer.

   Everything is scoped under .wck-layout (sidebar + content) and .wck (content
   only). Nothing here uses a bare element selector at the top level, so this
   file cannot restyle any other part of the page, or any other page.

   ---------------------------------------------------------------------------
   THREE CONSTRAINTS THAT SHAPE EVERYTHING BELOW
   ---------------------------------------------------------------------------
   1. rem IS 10px ON THIS SITE, NOT 16px.
      Bootstrap 3.1.1 (/css/bootstrap.min.css) sets html { font-size: 62.5% }.
      home-test-v2's tokens are all rem-at-16px, so copied verbatim they render
      at 62.5% size — a 34px heading comes out at 21px. Every size here is
      therefore written as px ÷ 10 (34px → 3.4rem). Because Bootstrap used a
      PERCENTAGE, this still scales with a user's browser font-size setting,
      which hard px values would not.

   2. FONTS ARE THE SITE'S, NOT v2's.
      Ubuntu, as loaded by head.php, at the only two weights it requests: 400
      and 700. No Factoria, no Public Sans — the rest of the site is not using
      them yet. And no 500 or 600: the browser would fake them from 700, which
      is the bug css/service-selector.css already has.

   3. THE LEGACY CSS WILL STYLE THIS CONTENT UNLESS OUTRANKED.
      custom.css has, among others:
        .flex .main-container p            { font-size: 18px }         (0,2,1)
        .flex .main-container ul li        { line-height: 2.75rem }    (0,2,2)
        a, a:hover, a:focus  { color: #276929 }   a:visited { #4caf50 }
        a:focus, a:hover     { text-decoration: underline }
        .main-container      { overflow: hidden }
      Every element gets its own class and every rule is prefixed with
      .main-container .wck (or .wck-layout for the sidebar), which lands at
      (0,3,0) and above — outranking all of those on specificity alone, so the
      result does not depend on stylesheet order.
   ============================================================================= */

/* ---------------------------------------------------------------- tokens ---- */
/* Scoped to the layout wrapper, not :root, so they cannot reach the rest of the
   page. Palette is verbatim from the customer design system (_ds/tokens). */
.wck-layout {
  --wck-navy:       #263981;
  --wck-navy-900:   #141d45;
  --wck-navy-700:   #1c2b62;
  --wck-navy-050:   #eceff7;
  --wck-sky:        #00BBF2;
  --wck-sky-700:    #0079a1;
  --wck-green:      #51A145;   /* fills and rules only — see below */
  --wck-green-700:  #3a7531;   /* green TEXT */
  --wck-sand-050:   #f8f5ef;
  --wck-sand-100:   #efe8db;
  --wck-sand-700:   #8d7c5c;
  --wck-ink:        #383435;
  --wck-ink-strong: #231F20;
  --wck-muted:      #6b6667;
  --wck-line:       #e8e5e2;
  --wck-surface:    #ffffff;

  /* CONTRAST NOTE. --wck-green (#51A145) is 3.2:1 on white. That clears the
     3:1 WCAG asks of rules, borders and icons, but FAILS the 4.5:1 needed for
     small text. So green text uses --wck-green-700 (5.4:1), the DS's own
     --status-ok value. home-test-v2 uses #51A145 for text in several places
     and has this problem; it is flagged separately. */

  /* Fibonacci type scale, px ÷ 10 (see constraint 1) */
  --wck-fib-13: 1.3rem;
  --wck-fib-21: 2.1rem;
  --wck-fib-34: 3.4rem;
  /* Running text opts out of the scale, as it does on home-test-v2: the
     sequence jumps 13 → 21 with nothing readable in between. */
  --wck-text:   1.7rem;
  --wck-lead:   1.8rem;

  /* φ spacing — v2's values converted to this site's 10px rem */
  --wck-s1: 0.99rem;
  --wck-s2: 1.26rem;
  --wck-s3: 1.6rem;
  --wck-s4: 2.04rem;
  --wck-s5: 2.59rem;
  --wck-s6: 3.29rem;
  --wck-s7: 4.19rem;

  --wck-radius:    4px;
  --wck-radius-sm: 3px;
  --wck-shadow-sm: 0 1px 2px rgba(35, 31, 32, .06), 0 1px 3px rgba(35, 31, 32, .05);
  --wck-shadow-lg: 0 8px 24px rgba(35, 31, 32, .12);
  --wck-ease:      cubic-bezier(.4, 0, .2, 1);
  --wck-fast:      120ms;
  --wck-base:      180ms;

  font-family: Ubuntu, "Helvetica Neue", Arial, sans-serif;
  color: var(--wck-ink);
}

/* ---------------------------------------------------------------- layout ---- */
/* The page keeps the site's .flex.ss-mod, so sidebar-beside-content is still
   the site's own layout decision. Two page-scoped adjustments only: */
.wck-layout .main-container {
  /* overflow:hidden on the legacy rule clips the card hover shadow at the
     column edge. min-width:0 is the reason that rule existed — it stops wide
     content forcing the flex item open — so that job is still done. */
  overflow: visible;
  min-width: 0;
  /* The legacy 3em (48px) left padding WAS the nav–content gutter. The gutter
     now comes from column-gap below instead, so it zeroes this. */
  padding-left: 0;
}

/* Nav–content gutter: 64px, up from the legacy 48px.
   column-gap rather than a bigger padding-left on purpose — a column gap only
   exists while the sidebar sits BESIDE the content, so it vanishes on its own
   once the layout stacks, instead of leaving the content indented 64px with
   nothing next to it. */
.wck-layout.flex.ss-mod { column-gap: 6.4rem; }

.wck-layout .wck-side {
  flex: 0 0 26rem;
  align-self: flex-start;
}

/* ============================================================================
   SIDEBAR
   ============================================================================ */
.wck-layout .wck-side-card {
  background: var(--wck-surface);
  border-top: 3px solid var(--wck-green);
  border-radius: var(--wck-radius);
  box-shadow: var(--wck-shadow-sm);
  overflow: hidden;
}

.wck-layout .wck-side-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.wck-layout .wck-side-link {
  display: flex;
  align-items: center;
  gap: var(--wck-s2);
  padding: var(--wck-s2) var(--wck-s3);
  font-size: 1.5rem;             /* UI text — off the display scale, like body */
  font-weight: 400;
  line-height: 1.35;
  color: var(--wck-ink);
  text-decoration: none;
  border-bottom: 1px solid var(--wck-line);
  /* Inset rather than a border so the label never shifts on hover. */
  box-shadow: inset 0 0 0 transparent;
  transition: background-color var(--wck-fast) var(--wck-ease),
              color var(--wck-fast) var(--wck-ease),
              box-shadow var(--wck-fast) var(--wck-ease);
}

.wck-layout .wck-side-list li:last-child .wck-side-link { border-bottom: 0; }

/* Every state spelled out: the legacy a:visited would otherwise turn a visited
   menu row bright green, and a:hover would underline it. */
.wck-layout .wck-side-link:link,
.wck-layout .wck-side-link:visited { color: var(--wck-ink); text-decoration: none; }

.wck-layout .wck-side-link:hover,
.wck-layout .wck-side-link:focus-visible {
  color: var(--wck-navy);
  background: var(--wck-navy-050);
  box-shadow: inset 3px 0 0 var(--wck-sky-700);
  text-decoration: none;
}

.wck-layout .wck-side-icon {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.2rem;
  height: 3.2rem;
  font-size: 1.4rem;
  color: #fff;
  background: var(--wck-navy);
  border-radius: 22%;               /* the v2 squircle */
  transition: background-color var(--wck-fast) var(--wck-ease);
}

.wck-layout .wck-side-link:hover .wck-side-icon { background: var(--wck-sky-700); }

/* Current page: the one row that is filled, so it reads as "you are here". */
.wck-layout .wck-side-link.is-current,
.wck-layout .wck-side-link.is-current:visited {
  color: #fff;
  font-weight: 700;
  background: var(--wck-navy);
  box-shadow: inset 3px 0 0 var(--wck-sky);
}

.wck-layout .wck-side-link.is-current .wck-side-icon { color: var(--wck-navy); background: #fff; }

/* "Return Home" is a way back, not a destination — set apart on sand. */
.wck-layout .wck-side-link--home,
.wck-layout .wck-side-link--home:visited {
  color: var(--wck-navy);
  font-weight: 700;
  background: var(--wck-sand-050);
}

.wck-layout .wck-side-link--home .wck-side-icon { color: var(--wck-navy); background: var(--wck-sand-100); }

.wck-layout .wck-side-promo {
  display: block;
  /* 60% of the sidebar's width — 40% smaller than the full-width promo it
     replaced — and centred under the menu card. */
  width: 60%;
  margin-inline: auto;
  margin-top: var(--wck-s4);
  border-radius: var(--wck-radius);
  overflow: hidden;
  box-shadow: var(--wck-shadow-sm);
  transition: box-shadow var(--wck-base) var(--wck-ease);
}

.wck-layout .wck-side-promo:hover { box-shadow: var(--wck-shadow-lg); }
.wck-layout .wck-side-promo img { display: block; width: 100%; height: auto; }

/* ============================================================================
   CONTENT
   ============================================================================ */
.main-container .wck { display: flex; flex-direction: column; gap: var(--wck-s7); padding-bottom: var(--wck-s6); }

/* ---- intro ---- */
.main-container .wck .wck-eyebrow {
  display: block;
  font-size: var(--wck-fib-13);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--wck-green-700);
}

/* The 64x4 rule under every eyebrow on the v2 slides. */
.main-container .wck .wck-rule {
  display: block;
  width: 6.4rem;
  height: 4px;
  margin: var(--wck-s2) 0 0;
  background: var(--wck-green);
}

.main-container .wck .wck-title {
  margin: var(--wck-s3) 0 0;
  font-family: inherit;
  font-size: var(--wck-fib-34);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: var(--wck-navy);
}

.main-container .wck .wck-lead {
  margin: var(--wck-s3) 0 0;
  max-width: 68ch;
  font-size: var(--wck-lead);
  line-height: 1.6;
  color: var(--wck-ink);
}

.main-container .wck .wck-body {
  margin: 0;
  max-width: 68ch;
  font-size: var(--wck-text);
  line-height: 1.6;
  color: var(--wck-ink);
}

/* ---- section headings ---- */
.main-container .wck .wck-h3 {
  margin: 0 0 var(--wck-s4);
  font-family: inherit;
  font-size: var(--wck-fib-21);
  font-weight: 700;
  line-height: 1.25;
  color: var(--wck-navy);
}

/* ---- kit: list beside photo (review comment #0) ---- */
.main-container .wck .wck-kit {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 36rem);
  gap: var(--wck-s6);
  align-items: center;
  padding: var(--wck-s5) var(--wck-s6);
  background: var(--wck-surface);
  border-top: 3px solid var(--wck-green);
  border-radius: var(--wck-radius);
  box-shadow: var(--wck-shadow-sm);
}

.main-container .wck .wck-kit-photo { margin: 0; }
.main-container .wck .wck-kit-photo img { display: block; width: 100%; height: auto; }

/* ---- checklists ---- */
.main-container .wck .wck-checklist {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* line-height and font-size restated because the legacy
   `.flex .main-container ul li` sets 18px on a 2.75rem (44px) line — which
   would space this list out to nearly double. */
.main-container .wck .wck-check {
  display: flex;
  align-items: flex-start;
  gap: var(--wck-s2);
  padding: var(--wck-s2) 0;
  font-size: var(--wck-text);
  line-height: 1.4;
  color: var(--wck-ink-strong);
  border-bottom: 1px solid var(--wck-line);
}

.main-container .wck .wck-check:last-child { border-bottom: 0; }

.main-container .wck .wck-check > i {
  flex: 0 0 auto;
  margin-top: 0.2em;          /* optical alignment with the first text line */
  font-size: 1.6rem;
  color: var(--wck-green);    /* an icon, so 3:1 applies, and it passes */
}

.main-container .wck .wck-check-note {
  display: block;
  margin-top: 0.3rem;
  font-size: 1.4rem;
  font-style: italic;
  color: var(--wck-muted);
}

/* ---- returning-customer callout ----
   The DS's own notice pattern: --status-notice-surface (sand-100) with a
   --status-notice (sand-700) rule. This is an eligibility restriction, which
   is exactly what that pair is for. */
.main-container .wck .wck-callout {
  padding: var(--wck-s5) var(--wck-s6);
  background: var(--wck-sand-100);
  border-left: 4px solid var(--wck-sand-700);
  border-radius: var(--wck-radius);
}

.main-container .wck .wck-callout .wck-body { margin-bottom: var(--wck-s3); }
.main-container .wck .wck-callout strong { font-weight: 700; color: var(--wck-ink-strong); }

.main-container .wck .wck-checklist--compact {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--wck-s6);
}

/* Two columns means two "last" rows — keep both without a divider. */
.main-container .wck .wck-checklist--compact .wck-check { border-bottom-color: rgba(141, 124, 92, .22); }
.main-container .wck .wck-checklist--compact .wck-check:nth-last-child(-n+2) { border-bottom: 0; }

/* ---- buttons (review comments #1 and #2) ---- */
.main-container .wck .wck-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wck-s3);
  margin-bottom: var(--wck-s4);
}

/* In the intro the button follows the lead paragraph rather than preceding
   body copy, so the space goes above it instead of below. */
.main-container .wck .wck-actions--intro {
  margin: var(--wck-s4) 0 0;
}

.main-container .wck .wck-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--wck-s1);
  padding: var(--wck-s3) var(--wck-s5);
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: var(--wck-radius);
  transition: background-color var(--wck-fast) var(--wck-ease),
              color var(--wck-fast) var(--wck-ease),
              border-color var(--wck-fast) var(--wck-ease);
}

/* The arrow nudge, identical to home-test-v2's shared CTA-arrow rule. */
.main-container .wck .wck-btn i { font-size: 0.8em; transition: transform var(--wck-fast) var(--wck-ease); }
.main-container .wck .wck-btn:hover i { transform: translateX(3px); }

/* Every link state stated, so the legacy green, visited green and hover
   underline cannot reach a button. */
.main-container .wck .wck-btn--primary,
.main-container .wck .wck-btn--primary:link,
.main-container .wck .wck-btn--primary:visited {
  color: #fff;
  background: var(--wck-navy);
  border-color: var(--wck-navy);
  text-decoration: none;
}

.main-container .wck .wck-btn--primary:hover,
.main-container .wck .wck-btn--primary:focus-visible,
.main-container .wck .wck-btn--primary:active {
  color: #fff;
  background: var(--wck-navy-700);
  border-color: var(--wck-navy-700);
  text-decoration: none;
}

.main-container .wck .wck-btn--secondary,
.main-container .wck .wck-btn--secondary:link,
.main-container .wck .wck-btn--secondary:visited {
  color: var(--wck-navy);
  background: var(--wck-surface);
  border-color: var(--wck-navy);
  text-decoration: none;
}

.main-container .wck .wck-btn--secondary:hover,
.main-container .wck .wck-btn--secondary:focus-visible,
.main-container .wck .wck-btn--secondary:active {
  color: var(--wck-navy);
  background: var(--wck-navy-050);
  text-decoration: none;
}

/* ---- contact cards ---- */
.main-container .wck .wck-contact {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--wck-s4);
}

/* Recognisably the client's outlined box (image003.png), refined into the v2
   card: hairline border, navy top rule, radius, soft shadow. */
.main-container .wck .wck-contact-card {
  padding: var(--wck-s5) var(--wck-s4);
  text-align: center;
  background: var(--wck-surface);
  border: 1px solid var(--wck-line);
  border-top: 3px solid var(--wck-navy);
  border-radius: var(--wck-radius);
  box-shadow: var(--wck-shadow-sm);
}

.main-container .wck .wck-contact-text {
  margin: 0 0 var(--wck-s3);
  font-size: 1.6rem;
  line-height: 1.55;
  color: var(--wck-ink);
}

.main-container .wck .wck-contact-lines {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--wck-s1);
  margin: 0;
}

.main-container .wck .wck-contact-link,
.main-container .wck .wck-contact-link:visited {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  font-size: 1.7rem;
  font-weight: 700;
  color: var(--wck-sky-700);
  text-decoration: none;
}

.main-container .wck .wck-contact-link:hover,
.main-container .wck .wck-contact-link:focus-visible {
  color: var(--wck-navy);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.main-container .wck .wck-contact-link i { font-size: 0.85em; opacity: 0.85; }

/* ---- focus ---- */
/* DS focus ring. Declared on both scopes so the sidebar gets it too. */
.wck-layout :focus-visible {
  outline: 2px solid var(--wck-sky-700);
  outline-offset: 2px;
}

/* ============================================================================
   RESPONSIVE
   ============================================================================ */

/* The legacy layout keeps the 260px sidebar beside the content until 550px,
   which by ~900px leaves the content column too narrow for the kit card. This
   page stacks earlier — and puts the sidebar AFTER the content, so a reader
   reaches the kit before scrolling past eight menu rows. */
@media (max-width: 900px) {
  .wck-layout.flex.ss-mod { flex-direction: column; }

  .wck-layout .wck-side {
    order: 2;
    flex: 0 0 auto;
    width: 100%;
    margin-top: var(--wck-s6);
  }

  /* Two columns of menu rows while there is room for them. */
  .wck-layout .wck-side-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wck-layout .wck-side-list li:last-child .wck-side-link { border-bottom: 1px solid var(--wck-line); }

  /* Same 40% reduction here: 22rem → 13.2rem. */
  .wck-layout .wck-side-promo { max-width: 13.2rem; }

  /* Stacked, the sidebar is below the content, not beside it — so the left
     padding matches the legacy 1em on the right rather than staying zero. */
  .wck-layout .main-container { padding-left: 1em; }

  .main-container .wck .wck-kit {
    grid-template-columns: 1fr;
    padding: var(--wck-s4);
  }

  .main-container .wck .wck-kit-photo { max-width: 28rem; justify-self: center; }
}

@media (max-width: 700px) {
  .main-container .wck .wck-contact { grid-template-columns: 1fr; }
  .main-container .wck .wck-checklist--compact { grid-template-columns: 1fr; }
  .main-container .wck .wck-checklist--compact .wck-check:nth-last-child(2) { border-bottom: 1px solid rgba(141, 124, 92, .22); }
  .main-container .wck .wck-callout { padding: var(--wck-s4); }
  .main-container .wck .wck-title { font-size: 2.8rem; }
}

@media (max-width: 550px) {
  .wck-layout .wck-side-list { grid-template-columns: 1fr; }

  /* Full-width buttons are easier targets than two side by side on a phone. */
  .main-container .wck .wck-btn { width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .wck-layout *,
  .wck-layout *::before,
  .wck-layout *::after { transition-duration: 0.01ms !important; }
  .main-container .wck .wck-btn:hover i { transform: none; }
}

@media print {
  .wck-layout .wck-side { display: none; }
  .main-container .wck .wck-kit,
  .main-container .wck .wck-contact-card { box-shadow: none; }
}