/* guide-page.css — shared components for the guides family (guides.html and the
   in-depth guide-*.html pages), the same way product-page.css serves the product
   family.  Tokens come from style.css; nothing here declares a raw colour.

   Audience rules this sheet is holding (see design-system.md):
     - content text never below 15px, body copy at 16px
     - every interactive target ≥44px
     - no accent outside the blue ramp — emphasis comes from weight, not hue
     - motion is guarded by prefers-reduced-motion
     - named transition properties, never `transition: all` */


/* ---- On-this-page strip -------------------------------------------------- */
/* Second sticky strip, mirroring .category-nav on the product pages: same
   z-index band (below the 100 nav), same 76px offset, same pill treatment. */

.guide-toc {
  background: var(--grey-50);
  border-bottom: 1px solid var(--grey-200);
  padding: 14px 0;
  position: sticky;
  top: 76px;
  z-index: 90;
}
.guide-toc-inner { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.guide-toc-label {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 1.2px; color: var(--blue-mid); margin-right: 4px;
}
.guide-toc a {
  display: inline-flex; align-items: center;
  min-height: 44px; padding: 8px 16px;
  border: 1.5px solid var(--grey-200); border-radius: 20px;
  background: var(--white); color: var(--grey-700);
  font-size: 15px; font-weight: 600; text-decoration: none;
  transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}
.guide-toc a:hover, .guide-toc a:focus-visible {
  background: var(--navy); color: var(--white);
  border-color: var(--navy); text-decoration: none;
}

/* The strip sits under the nav, so anchored sections need to clear both.
   76px scroll-padding-top (style.css) + 52px here = the 128px the product
   pages already use. */
.section[id] { scroll-margin-top: 52px; }


/* ---- Alternating band ---------------------------------------------------- */

.guide-band { background: var(--grey-50); }


/* ---- Two-column text + figure -------------------------------------------- */

.guide-split { display: grid; grid-template-columns: 1.15fr 1fr; gap: 40px; align-items: start; }
/* style.css sets no margin on a bare <p>, so components have to space their own. */
.guide-split-text p { font-size: 16px; margin-bottom: 16px; }
.guide-split-text p:last-child { margin-bottom: 0; }
.guide-h3 { font-size: 1.25rem; margin: 36px 0 12px; color: var(--navy); }
.guide-h3:first-child { margin-top: 0; }
/* Scoped to the article body class so it cannot leak onto products.html or
   wetroom-solutions.html, which link this sheet only for .guide-strip. */
.guide-article .section > .container > p { margin-bottom: 16px; }
.guide-article .section > .container > p.section-intro { margin-bottom: 40px; }

/* The marker is positioned rather than laid out as a flex sibling: a flex `li`
   with a `gap` treats every inline child as an item, so `<strong>` inside a
   bullet picked up 10px of space on each side and the sentence came apart. */
.guide-list { list-style: none; margin: 16px 0; display: flex; flex-direction: column; gap: 10px; }
.guide-list li {
  position: relative; padding-left: 26px;
  font-size: 16px; color: var(--grey-700); line-height: 1.6;
}
.guide-list li::before {
  content: '\2713'; position: absolute; left: 0; top: 0;
  color: var(--blue-mid); font-weight: 700;
}

.guide-caveat {
  font-size: 16px; color: var(--grey-700);
  border-left: 3px solid var(--blue-tint); padding-left: 16px; margin-top: 20px;
}


/* ---- Figures ------------------------------------------------------------- */

.guide-figure { margin: 0; }
.guide-figure img {
  display: block; width: 100%; height: auto;
  background: var(--white);
  border: 1.5px solid var(--grey-200); border-radius: var(--radius-md);
}
.guide-figure figcaption {
  font-size: 16px; line-height: 1.6; color: var(--grey-700);
  margin-top: 12px; text-wrap: pretty;
}
.guide-figure-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin: 32px 0; align-items: start; }
/* Line drawings arrive at wildly different aspect ratios, so a plain 1fr 1fr
   pair leaves one box twice the height of the other. Give them a common bed and
   let the artwork sit inside it. */
.guide-figure-grid-even .guide-figure img { height: 280px; object-fit: contain; padding: 16px; }
.guide-figure-wide { margin: 32px 0; }
.guide-figure-wide img { padding: 12px; }
/* A single diagram that would be absurd at full column width. */
.guide-figure-inset { max-width: 480px; margin: 32px 0; }


/* ---- Callout notes ------------------------------------------------------- */
/* Two weights, one hue. The warning reads louder through a heavier rule and a
   navy chevron, not through a colour the rest of the site does not use. */

.guide-note {
  display: flex; gap: 14px; align-items: flex-start;
  background: var(--blue-pale);
  border: 1.5px solid var(--blue-tint);
  border-left: 5px solid var(--blue-mid);
  border-radius: var(--radius-md);
  padding: 20px 24px; margin: 24px 0;
  font-size: 16px; line-height: 1.7; color: var(--grey-700);
}
.guide-note svg { flex-shrink: 0; color: var(--blue-deep); margin-top: 2px; }
.guide-note a { color: var(--blue-deep); font-weight: 700; }
.guide-note-warn { background: var(--white); border-left-color: var(--navy); }
.guide-note-warn svg { color: var(--navy); }


/* ---- Side-by-side comparison cards --------------------------------------- */

.guide-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 24px 0 8px; }
.guide-compare-card {
  background: var(--white);
  border: 1.5px solid var(--grey-200); border-radius: var(--radius-md);
  padding: 22px 24px;
}
.guide-compare-card h4 { font-size: 1.05rem; color: var(--navy); margin-bottom: 8px; }
.guide-compare-card p { font-size: 16px; line-height: 1.65; margin: 0; }


/* ---- Numbered steps ------------------------------------------------------ */

.guide-steps { list-style: none; counter-reset: guide-step; display: flex; flex-direction: column; gap: 4px; margin: 28px 0 0; }
.guide-step {
  counter-increment: guide-step;
  display: grid; grid-template-columns: 52px 1fr; gap: 20px;
  padding: 22px 0; border-top: 1px solid var(--grey-200);
}
.guide-step:last-child { border-bottom: 1px solid var(--grey-200); }
.guide-step::before {
  content: counter(guide-step);
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--navy); color: var(--white);
  display: flex; align-items: center; justify-content: center;
  font-size: 17px; font-weight: 700;
}
.guide-step h3 { font-size: 1.15rem; color: var(--navy); margin-bottom: 8px; }
.guide-step p { font-size: 16px; margin: 0 0 10px; }
.guide-step p:last-child { margin-bottom: 0; }


/* ---- Specification panel ------------------------------------------------- */

.spec-panel {
  background: var(--white);
  border: 1.5px solid var(--blue-tint); border-radius: var(--radius-lg);
  padding: 28px 30px;
}
.spec-panel h3 { font-size: 1.15rem; color: var(--navy); margin-bottom: 10px; }
.spec-panel-lead { font-size: 16px; line-height: 1.65; margin-bottom: 20px; }
.spec-list { margin: 0; }
.spec-list dt {
  font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.8px; color: var(--blue-mid); margin-top: 16px;
}
.spec-list dt:first-child { margin-top: 0; }
.spec-list dd { font-size: 16px; line-height: 1.6; color: var(--grey-700); margin: 4px 0 0; }
.spec-pass { font-weight: 700; color: var(--blue-deep); }
.spec-note {
  font-size: 16px; line-height: 1.65; color: var(--grey-700);
  border-top: 1px solid var(--grey-200); margin-top: 22px; padding-top: 16px;
}


/* ---- Download panel ------------------------------------------------------ */

.doc-list { display: flex; flex-direction: column; gap: 16px; margin: 24px 0; }
.doc-item {
  display: flex; gap: 18px; align-items: flex-start;
  background: var(--white);
  border: 1.5px solid var(--grey-200); border-radius: var(--radius-md);
  padding: 22px 24px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.doc-item:hover { border-color: var(--blue-light); box-shadow: var(--shadow-sm); }
.doc-icon {
  flex-shrink: 0; width: 44px; height: 44px; border-radius: var(--radius-sm);
  background: var(--blue-pale); color: var(--blue-deep);
  display: flex; align-items: center; justify-content: center;
}
.doc-item h4 { font-size: 1.05rem; color: var(--navy); margin-bottom: 6px; }
.doc-item p { font-size: 16px; line-height: 1.6; margin: 0 0 12px; }
.doc-meta {
  display: inline-block; font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.8px;
  background: var(--blue-pale); color: var(--blue-deep);
  padding: 4px 10px; border-radius: 20px; margin-bottom: 10px;
}
.doc-links { display: flex; gap: 10px; flex-wrap: wrap; }
.doc-links a {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 44px; padding: 10px 18px;
  border-radius: var(--radius-sm); font-size: 15px; font-weight: 700;
  text-decoration: none;
  transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}
.doc-links .doc-primary { background: var(--blue-deep); color: var(--white); border: 2px solid var(--blue-deep); }
.doc-links .doc-primary:hover { background: var(--navy); border-color: var(--navy); text-decoration: none; }
.doc-links .doc-secondary { background: var(--white); color: var(--blue-deep); border: 2px solid var(--blue-deep); }
.doc-links .doc-secondary:hover { background: var(--blue-pale); text-decoration: none; }


/* ---- Configuration picker grid ------------------------------------------- */

.option-grid {
  list-style: none; margin: 32px 0 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
}
.option-card {
  display: flex; flex-direction: column;
  background: var(--white);
  border: 1.5px solid var(--grey-200); border-radius: var(--radius-md);
  overflow: hidden;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.option-card:hover { border-color: var(--blue-light); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.option-card img { display: block; width: 100%; height: auto; background: var(--grey-100); }
.option-label {
  font-size: 16px; font-weight: 700; color: var(--navy);
  padding: 14px 16px 4px;
}
.option-desc {
  font-size: 15px; line-height: 1.5; color: var(--grey-700);
  padding: 0 16px 16px; text-wrap: pretty;
}
@media (prefers-reduced-motion: reduce) {
  .option-card, .doc-item { transition: none; }
  .option-card:hover { transform: none; }
}


/* ---- Inline mid-page CTA ------------------------------------------------- */

.guide-cta-inline {
  background: var(--blue-pale);
  border: 1.5px solid var(--blue-tint); border-radius: var(--radius-lg);
  padding: 28px 32px; margin-top: 40px;
}
.guide-cta-inline p { font-size: 16px; margin-bottom: 18px; }


/* ---- VAT block ----------------------------------------------------------- */

.guide-vat {
  background: var(--white);
  border: 1.5px solid var(--blue-tint); border-left: 5px solid var(--blue-mid);
  border-radius: var(--radius-lg);
  padding: 34px 36px;
}
.guide-vat h2 { font-size: clamp(1.4rem, 3vw, 1.9rem); margin-bottom: 14px; }
.guide-vat p { font-size: 16px; margin-bottom: 14px; }
.guide-vat .btn { margin-top: 8px; }


/* ---- Reference table ----------------------------------------------------- */
/* Product-code tables. Wide content scrolls inside its own container so the
   page body never scrolls sideways. */

.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 24px 0; }
.spec-table { width: 100%; border-collapse: collapse; font-size: 16px; min-width: 520px; }
.spec-table th, .spec-table td {
  text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--grey-200);
}
.spec-table thead th {
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px;
  color: var(--blue-mid); border-bottom: 2px solid var(--blue-tint);
  background: var(--white); position: sticky; top: 0;
}
.spec-table tbody th { font-weight: 700; color: var(--navy); white-space: nowrap; }
.spec-table td { color: var(--grey-700); font-variant-numeric: tabular-nums; }
.spec-table tbody tr:nth-child(even) { background: var(--white); }
.spec-ask { color: var(--blue-deep); font-weight: 700; }

/* Visible to screen readers, not on screen — for a <caption> that would
   duplicate the heading above it. */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}


/* ---- Guide cross-link strip ---------------------------------------------- */
/* Used on products.html and wetroom-solutions.html to point at the in-depth
   guides. Deliberately NOT a third link inside .product-tile: those tiles
   already carry an enquire link and a more-info button, and a 68-year-old on a
   phone should not have to pick between three targets on one card. */

.guide-strip {
  display: grid; grid-template-columns: 1fr 1.4fr; gap: 40px; align-items: center;
  background: var(--blue-pale);
  border: 1.5px solid var(--blue-tint); border-radius: var(--radius-lg);
  padding: 36px 40px; margin-top: 48px;
}
.guide-strip-head h2 { font-size: clamp(1.35rem, 2.6vw, 1.8rem); margin: 6px 0 12px; }
.guide-strip-head p { font-size: 16px; line-height: 1.65; margin: 0; }
.guide-strip-links { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.guide-strip-card {
  display: flex; flex-direction: column;
  background: var(--white);
  border: 1.5px solid var(--grey-200); border-radius: var(--radius-md);
  overflow: hidden; text-decoration: none; color: inherit;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.guide-strip-card:hover { border-color: var(--blue-light); box-shadow: var(--shadow-md); transform: translateY(-2px); text-decoration: none; }
.guide-strip-card:focus-visible { outline: 2px solid var(--blue-mid); outline-offset: 2px; }
.guide-strip-card img { display: block; width: 100%; height: 130px; object-fit: cover; background: var(--grey-100); }
.guide-strip-title {
  font-size: 16px; font-weight: 700; line-height: 1.4; color: var(--navy);
  padding: 16px 18px 0; text-wrap: pretty;
}
.guide-strip-more {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 15px; font-weight: 700; color: var(--blue-deep);
  padding: 10px 18px 18px; margin-top: auto;
}
.guide-strip-card:hover .guide-strip-more span { transform: translateX(3px); }
.guide-strip-more span { transition: transform 0.15s; }
@media (prefers-reduced-motion: reduce) {
  .guide-strip-card, .guide-strip-more span { transition: none; }
  .guide-strip-card:hover { transform: none; }
  .guide-strip-card:hover .guide-strip-more span { transform: none; }
}


/* ---- Related cards ------------------------------------------------------- */
/* Reuses .guide-strip-card rather than index.html's .product-card: that one is
   declared inside index.html's own <style> block and exists nowhere else, so a
   guide page borrowing the class name got unstyled images at natural size and a
   4000px-wide document. Same reason this grid is declared here and not assumed
   from .products-grid. */

.guide-related { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.guide-related .guide-strip-card img { height: 170px; }
.guide-related .guide-strip-desc {
  font-size: 15px; line-height: 1.55; color: var(--grey-700);
  padding: 8px 18px 0; margin: 0; text-wrap: pretty;
}


/* ---- Responsive ---------------------------------------------------------- */
/* Same two breakpoints the rest of the site uses. */

@media (max-width: 900px) {
  .guide-split { grid-template-columns: 1fr; gap: 28px; }
  .guide-figure-grid { grid-template-columns: 1fr; gap: 24px; }
  .guide-compare { grid-template-columns: 1fr; }
  .option-grid { grid-template-columns: repeat(3, 1fr); }
  .guide-strip { grid-template-columns: 1fr; gap: 28px; padding: 28px 26px; }
  .guide-related { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
  .option-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .guide-strip { padding: 24px 20px; }
  .guide-strip-links { grid-template-columns: 1fr; }
  .guide-related { grid-template-columns: 1fr; }
  .guide-note { flex-direction: column; gap: 10px; padding: 18px 20px; }
  .guide-figure-grid-even .guide-figure img { height: 220px; }
  /* A wide dimensioned diagram scaled to 375px puts its callout text well under
     the 16px floor. Let it scroll inside its own box at a readable size instead —
     same treatment as .table-scroll, and the page body still never scrolls. */
  .guide-figure-wide { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .guide-figure-wide img { min-width: 560px; }
  .guide-cta-inline, .guide-vat, .spec-panel { padding: 22px 20px; }
  .guide-step { grid-template-columns: 44px 1fr; gap: 14px; }
  .doc-item { flex-direction: column; gap: 12px; }
  .guide-toc { padding: 10px 0; }
  .guide-toc-inner { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .guide-toc a { flex-shrink: 0; }
  .guide-toc-label { display: none; }
}