/* ============================================================
   Cleanova Technical Guide modules
   Built from the "Cleanova Technical Guide" design handoff, Sept 2026.

   Kept in its own stylesheet rather than appended to site.css: site.css is
   3,400+ lines of live styling for every other page, and a separate file is
   additive, reviewable on its own, and cannot break an existing page.

   Type: the handoff names --font-heading / --font-body (Rama Gothic E /
   Helvetica Neue). This site loads both faces from Typekit already, and its
   body face is halyard-text, not Helvetica Neue, so the guide uses the site's
   own families. Matching the prototype here would have put a seam between the
   guide and the header it sits under.

   Weights are always stated: site.css sets `* { font-weight: 300 }`.
   ============================================================ */

:root {
    --guide-purple:        #3C0082;
    --guide-purple-dark:   #2A005C;
    --guide-accent:        #6B21C4;
    --guide-tint:          #FBF7FE;
    --guide-lav-base:      #F7F1FD;
    --guide-lav-a:         #E4CCF7;
    --guide-lav-b:         #DCE0F8;
    --guide-on-purple:     #E9DDF8;
    --guide-num-on-purple: #C9A9EE;
    --guide-ink:           #171717;
    --guide-ink-alt:       #262626;
    --guide-body:          #404040;
    --guide-secondary:     #525252;
    --guide-tertiary:      #737373;   /* AA floor on white. Do not lighten. */
    --guide-rule:          #E5E5E5;
    --guide-band:          #EEEEEE;
    --guide-nav-h:         170px;

    /* The theme's own header is `position: sticky; top: 0; z-index: 50`
       (site.css:112). The guide nav has to stick BELOW it or it slides
       underneath and disappears. These are the measured header heights either
       side of the theme's 1200px breakpoint; guide-nav.js overwrites this with
       the real measurement, so the values here are only the no-JS fallback. */
    --guide-header-h:      85px;

    /* Exactly the stacks the cle theme already uses (site.css: `rama-gothic-e,
       sans-serif` x10 and `halyard-text, sans-serif` x9), so the guide can never
       fall back to a face the rest of the site would not. Both come from the
       Typekit kit loaded in header.php. No new font is introduced here. */
    --guide-font-head: rama-gothic-e, sans-serif;
    --guide-font-body: halyard-text, sans-serif;

    --guide-lavender-wash:
        radial-gradient(at 0% 0%, var(--guide-lav-a) 0%, rgba(228,204,247,0) 70%),
        radial-gradient(at 100% 100%, var(--guide-lav-b) 0%, rgba(220,224,248,0) 60%),
        var(--guide-lav-base);
}

@media screen and (max-width: 1200px) {
    :root { --guide-header-h: 100px; }
}

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}

/* ---- inheritance reset ------------------------------------------------
   site.css applies `* { font-family: halyard-text; color: var(--cle-main);
   font-weight: 300 }` to every
   element DIRECTLY, not to a container, so ordinary inheritance can never reach
   inside the guide: each descendant carries its own declaration. These two
   restore inheritance at (0,1,0). Every specific rule below is at least as
   specific and comes later, so it still wins. Confirmed with CDP's
   getMatchedStylesForNode rather than inferred from class lists. */
.guide-block *,
.guide-nav * {
    color: inherit;
    font-weight: inherit;
    font-family: inherit;
}

/* ---- container -------------------------------------------------------
   Reuses the theme's .wrapper-inner (max-width 1400) so the guide lines up
   with the site header and footer, and replaces only its 50px/20px padding
   with the handoff's fluid rhythm. */
.wrapper-inner.guide-block {
    /* The theme's .wrapper-inner is content-box, so its max-width:1400px sits
       OUTSIDE the padding. Its own 20px happens to fit a 1440 viewport exactly,
       which is why this never showed up elsewhere; the guide's wider fluid
       padding overflowed by 56px and `overflow: clip` on main#primary hid it. */
    box-sizing: border-box;
    padding: 0 clamp(20px, 4vw, 48px);
    font-family: var(--guide-font-body);
    font-weight: 400;
    line-height: 1.5;
    color: var(--guide-ink);
}

[data-guide-section] { scroll-margin-top: var(--guide-nav-h, 170px); }

/* ---- sticky section nav ---------------------------------------------- */
.guide-nav {
    position: sticky;
    top: var(--guide-header-h, 0px);
    /* Below the site header's z-index 50 on purpose: if the two ever do meet,
       the site header wins rather than the guide nav covering the logo. */
    z-index: 20;
    background: #FFFFFF;
    border-top: 1px solid var(--guide-rule);
    border-bottom: 1px solid var(--guide-rule);
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

.guide-nav__inner {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
}

.guide-nav__label {
    grid-column: 1 / -1;
    margin: 0;
    padding: 14px 0 10px;
    font-family: var(--guide-font-head);
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--guide-purple);
}

.guide-nav__link {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 13px 14px;
    /* 16px at Patrick's direction, 21 Sep. The comp specifies 13px; this is a
       deliberate divergence, not drift, so a geometry run should expect it. */
    font-size: 16px;
    font-weight: 400;
    line-height: 1.3;
    color: var(--guide-body);
    border-bottom: 3px solid transparent;
    text-decoration: none;
    transition: background 0.25s ease-in-out, color 0.25s ease-in-out;
}

.guide-nav__num {
    font-family: var(--guide-font-head);
    font-weight: 600;
    color: var(--guide-accent);
}

.guide-nav__link:hover,
.guide-nav__link:focus-visible {
    color: var(--guide-purple);
    background: var(--guide-tint);
}

.guide-nav__link.is-active {
    color: var(--guide-purple);
    background: var(--guide-tint);
    border-bottom-color: var(--guide-purple);
    font-weight: 700;
}

/* ---- section header --------------------------------------------------- */
/* .guide-block is on the same element, so this is (0,2,0) and beats the
   container's `padding: 0 clamp(...)` shorthand, which would otherwise zero it. */
.guide-block.guide-section { padding-top: clamp(48px, 6vw, 80px); }

.guide-section__head {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--guide-rule);
    margin-bottom: clamp(24px, 3vw, 40px);
}

.guide-section__num {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    font-family: var(--guide-font-head);
    font-weight: 600;
    font-size: 28px;
    letter-spacing: 0.22em;
    line-height: 1;
    color: var(--guide-accent);
}

.guide-section__num::after {
    content: '';
    display: block;
    width: 40px;
    height: 2px;
    background: var(--guide-accent);
}

.guide-section__title,
.guide-h3,
.guide-prose h3,
.guide-intro h3 {
    font-family: var(--guide-font-head);
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--guide-purple);
    margin: 0;
}

.guide-section__title {
    font-size: clamp(22px, 2.4vw, 30px);
    line-height: 1.1;
}

.guide-h3,
.guide-prose h3,
.guide-intro h3 {
    font-size: clamp(18px, 2vw, 22px);
    line-height: 1.2;
    margin: 0 0 18px;
}

.guide-prose h3:not(:first-child) { margin-top: 28px; }

/* ---- prose ------------------------------------------------------------ */
.guide-prose p,
.guide-intro p {
    font-size: 17px;
    font-weight: 400;
    line-height: 1.65;
    color: var(--guide-body);
    margin: 0 0 18px;
    text-wrap: pretty;
}

.guide-prose p:last-child,
.guide-intro p:last-child { margin-bottom: 0; }

.guide-prose { max-width: 680px; }

.guide-intro {
    max-width: 780px;
    margin-bottom: clamp(28px, 3.5vw, 36px);
}

/* Bold runs inside authored rich text: the inheritance reset above would
   otherwise flatten <strong> to the container's 400. */
.guide-prose strong,
.guide-prose b,
.guide-intro strong,
.guide-intro b,
.guide-closing__body strong,
.guide-ctaband__body strong {
    font-weight: 700;
}

/* ---- images and placeholders ------------------------------------------ */
.guide-img {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: 10px;
}

.guide-img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.guide-img--contain { background: #F8F7FC; }
.guide-img--contain img { object-fit: contain; }

.guide-img:not([style*="aspect-ratio"]) { min-height: clamp(200px, 22vw, 280px); }

.guide-lead-image {
    height: clamp(220px, 28vw, 380px);
    margin-bottom: clamp(28px, 3.5vw, 40px);
}

/* Placeholder: holds the slot's exact ratio so nothing reflows when the real
   artwork lands. Names the handoff slot id so the two can be matched up. */
.guide-img--empty {
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        repeating-linear-gradient(135deg, #F4EEFB 0 12px, #EDE4F8 12px 24px);
    border: 1px dashed rgba(60,0,130,0.35);
}

.guide-img--empty span {
    font-family: var(--guide-font-head);
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--guide-purple);
    text-align: center;
    padding: 8px 14px;
}

/* ---- two column ------------------------------------------------------- */
.guide-twocol {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: clamp(28px, 4vw, 52px);
    align-items: start;
    margin-top: clamp(32px, 4vw, 52px);
}

/* The first row after a section header needs no top margin, because the
   header's own margin-bottom already spaces it. In the flat builder each row
   sits in its OWN `.mod-guide` wrapper, so this has to reach back to the
   PREVIOUS wrapper. The rule this replaces was `.guide-twocol:first-child`,
   which is always true here (the row is the only child of its wrapper) and so
   cancelled the margin on every instance, and a `.guide-section + .mod-guide`
   selector that never matched because the header is INSIDE .mod-guide, not a
   sibling of it. Without :has() support the first row is merely 52px roomier. */
.mod-guide:has(.guide-section) + .mod-guide .guide-twocol { margin-top: 0; }

/* A row following the data table wants a bigger break than the standard one:
   the comp uses clamp(56px, 7vw, 96px) there. Expressed structurally rather
   than as an authoring field, so no new ACF field and no re-import. */
.mod-guide:has(.guide-table-block) + .mod-guide .guide-twocol {
    margin-top: clamp(56px, 7vw, 96px);
}

.guide-twocol--reverse .guide-twocol__col--left  { order: 2; }
.guide-twocol--reverse .guide-twocol__col--right { order: 1; }

/* ---- checklist panel -------------------------------------------------- */
.guide-checklist {
    background: var(--guide-lavender-wash);
    border-radius: 10px;
    padding: clamp(26px, 3vw, 36px);
}

.guide-checklist--dense { padding: clamp(20px, 2.2vw, 26px); }

.guide-badge {
    display: inline-block;
    background: var(--guide-purple);
    color: #FFFFFF;
    font-family: var(--guide-font-head);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 6px 15px;
    border-radius: 999px;
    margin-bottom: 16px;
}

.guide-checklist__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 0 24px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.guide-checklist--wide .guide-checklist__grid {
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

.guide-checklist__item {
    display: flex;
    gap: 10px;
    padding: 9px 0;
    margin: 0;
    border-bottom: 1px solid rgba(60,0,130,0.13);
    font-size: 15px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--guide-ink);
}

.guide-checklist--dense .guide-checklist__item {
    padding: 7px 0;
    font-size: 16px;
}

.guide-checklist__item::before {
    content: '\2713';
    color: var(--guide-accent);
    font-weight: 700;
    flex-shrink: 0;
}

.guide-checklist__item:last-child { border-bottom: 0; }

/* ---- data table ------------------------------------------------------- */
.guide-table-block { margin-top: clamp(24px, 3vw, 32px); }

.guide-table__scroll {
    overflow-x: auto;
    background: #FFFFFF;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.guide-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 640px;
    margin: 0;
}

.guide-table thead tr { background: var(--guide-purple); }

.guide-table th[scope="col"] {
    /* The handoff says `left`; `start` renders identically in LTR and keeps the
       theme's style-rtl.css working. Deliberate, and the only textAlign delta. */
    text-align: start;
    padding: 17px 24px;
    font-family: var(--guide-font-head);
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #FFFFFF;
}

.guide-table th[scope="col"]:first-child { width: 32%; }

.guide-table tbody tr:nth-child(even) { background: var(--guide-tint); }

.guide-table__label,
.guide-table__value {
    padding: 20px 24px;
    border-bottom: 1px solid var(--guide-rule);
    vertical-align: top;
    text-align: start;
}

.guide-table__label {
    font-family: var(--guide-font-head);
    font-weight: 600;
    font-size: 16px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--guide-purple);
}

.guide-table__value {
    font-family: var(--guide-font-body);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: var(--guide-secondary);
}

.guide-table tbody tr:last-child .guide-table__label,
.guide-table tbody tr:last-child .guide-table__value { border-bottom: 0; }

/* ---- purple numbered list --------------------------------------------- */
.guide-purple {
    background: var(--guide-purple);
    border-radius: 10px;
    padding: clamp(26px, 3.2vw, 40px);
    margin: clamp(24px, 3vw, 32px) 0 clamp(32px, 4vw, 48px);
}

.guide-purple__title {
    font-family: var(--guide-font-head);
    font-weight: 600;
    font-size: clamp(18px, 2vw, 22px);
    line-height: 1.2;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #FFFFFF;
    margin: 0 0 8px;
}

.guide-purple__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.guide-purple__row {
    display: grid;
    grid-template-columns: 28px 1fr;
    gap: 14px;
    padding: 16px 0;
    border-bottom: 1px solid rgba(255,255,255,0.22);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.6;
    color: var(--guide-on-purple);
}

.guide-purple__row:last-child { border-bottom: 0; }

.guide-purple__num {
    font-family: var(--guide-font-head);
    font-weight: 600;
    font-size: 13px;
    color: var(--guide-num-on-purple);
    padding-top: 3px;
}

.guide-purple__body strong {
    color: #FFFFFF;
    font-weight: 700;
}

/* ---- tabbed diagram ---------------------------------------------------
   Rides the existing capability-tabs markup contract and script; everything
   below re-skins it inside the .guide-tabs scope. Two-class selectors (0,2,0)
   beat the base module's single-class rules, so no !important is needed. */
.guide-tabs {
    background: var(--guide-lavender-wash);
    border-radius: 14px;
    padding: clamp(22px, 3vw, 40px);
    margin-bottom: clamp(24px, 3vw, 32px);
}

.guide-tabs .capability-track {
    background: #FFFFFF;
    box-shadow: none;
    backdrop-filter: none;
    gap: 4px;
    padding: 6px;
    flex-wrap: nowrap;
    overflow-x: auto;
    margin-bottom: clamp(20px, 2.4vw, 28px);
}

.guide-tabs .capability-tab {
    font-family: var(--guide-font-head);
    font-weight: 600;
    font-size: 15px;
    letter-spacing: 0.01em;
    line-height: normal;
    padding: 12px 22px;
    color: var(--guide-purple);
    transition: background 250ms ease-in-out, color 250ms ease-in-out;
}

.guide-tabs .capability-tab.is-active {
    background: var(--guide-purple);
    color: #FFFFFF;
    box-shadow: none;
}

.guide-tabs .capability-card {
    margin-top: 0;
    border-radius: 10px;
    padding: clamp(22px, 2.8vw, 36px);
    box-shadow: none;
}

.guide-tabs .capability-card-grid {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: clamp(24px, 3vw, 48px);
    align-items: center;
}

.guide-tabs .capability-tabs.js-enabled .capability-panel.is-active { display: block; }

.guide-tabs__diagram .guide-img { border-radius: 0; }

/* ---- lightbox --------------------------------------------------------- */
/* The trigger fills the image box so the whole diagram is the click target. */
.guide-img__zoom {
    display: block;
    width: 100%;
    height: 100%;
    cursor: zoom-in;
}

.guide-img__zoom:focus-visible {
    outline: 2px solid var(--guide-purple);
    outline-offset: -2px;
}

.guide-lightbox {
    box-sizing: border-box;
    max-width: min(96vw, 1600px);
    max-height: 94vh;
    padding: clamp(12px, 2vw, 24px);
    border: 0;
    border-radius: 10px;
    background: #fff;
    overflow: visible;
}

.guide-lightbox::backdrop { background: rgba(20, 0, 45, 0.82); }

.guide-lightbox__img {
    display: block;
    max-width: 100%;
    max-height: calc(94vh - 2 * clamp(12px, 2vw, 24px));
    width: auto;
    height: auto;
    margin: 0 auto;
}

/* Every property stated: the theme's `*` reset hits the button directly. */
.guide-lightbox__close {
    position: absolute;
    top: -14px;
    right: -14px;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--guide-purple);
    color: #fff;
    font-family: var(--guide-font-head);
    font-size: 24px;
    font-weight: 400;
    line-height: 36px;
    text-align: center;
    cursor: pointer;
}

.guide-lightbox__close:hover,
.guide-lightbox__close:focus-visible {
    background: #fff;
    color: var(--guide-purple);
    outline: 2px solid var(--guide-purple);
}

.guide-tabs__title {
    font-family: var(--guide-font-head);
    font-weight: 600;
    font-size: clamp(19px, 1.9vw, 24px);
    line-height: 1.2;
    letter-spacing: 0.01em;
    color: var(--guide-purple);
    margin: 0 0 14px;
    text-transform: none;
}

.guide-tabs__copy p {
    font-size: 16px;
    font-weight: 400;
    line-height: 1.65;
    color: var(--guide-body);
    margin: 0;
}

.guide-tabs__footer {
    border-top: 1px solid var(--guide-rule);
    margin-top: clamp(24px, 3vw, 34px);
    padding-top: clamp(22px, 2.6vw, 30px);
    display: flex;
    justify-content: center;
}

/* ---- closing panel ---------------------------------------------------- */
.guide-closing {
    background: var(--guide-lavender-wash);
    border-radius: 10px;
    padding: clamp(28px, 3.4vw, 44px);
    margin-top: clamp(32px, 4vw, 48px);
}

.guide-closing__title {
    font-family: var(--guide-font-head);
    font-weight: 600;
    font-size: clamp(20px, 2.1vw, 24px);
    line-height: 1.2;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--guide-purple);
    margin: 0 0 18px;
}

.guide-closing__body p {
    font-size: 17px;
    font-weight: 400;
    line-height: 1.65;
    color: var(--guide-ink);
    margin: 0 0 16px;
}

.guide-closing__quote {
    font-family: var(--guide-font-head);
    font-weight: 600;
    font-size: clamp(18px, 1.9vw, 21px);
    line-height: 1.35;
    letter-spacing: 0.02em;
    color: var(--guide-purple);
    margin: 0 0 20px;
}

/* ---- CTA band --------------------------------------------------------- */
.guide-block.guide-ctaband-wrap { padding-bottom: clamp(40px, 5vw, 64px); }

.guide-ctaband {
    background: var(--guide-band);
    border-top: 5px solid var(--guide-purple);
    padding: clamp(36px, 4.5vw, 56px) clamp(24px, 5vw, 80px);
    text-align: center;
}

.guide-ctaband__title {
    font-family: var(--guide-font-head);
    font-weight: 600;
    font-size: clamp(21px, 2.1vw, 27px);
    line-height: 1.25;
    letter-spacing: 0.01em;
    color: var(--guide-ink-alt);
    margin: 0 0 22px;
    text-transform: none;
    text-wrap: balance;
}

.guide-ctaband__body p {
    font-size: 17px;
    font-weight: 400;
    line-height: 1.7;
    color: var(--guide-body);
    margin: 0 auto 30px;
    max-width: 860px;
}

/* ---- buttons ----------------------------------------------------------
   The theme sets `a:visited { color: inherit }`, which mod-capability.php
   already had to fight for its white-on-purple CTA. Stating every link state
   here keeps these three buttons white on purple in all of them. */
.guide-btn,
.guide-btn:link,
.guide-btn:visited,
.guide-btn:hover,
.guide-btn:focus {
    display: inline-block;
    background: var(--guide-purple);
    color: #FFFFFF;
    font-family: var(--guide-font-head);
    font-weight: 600;
    text-decoration: none;
    border-radius: 4px;
    transition: background 0.25s ease-in-out;
}

.guide-btn:hover,
.guide-btn:focus { background: var(--guide-purple-dark); }

.guide-btn--band {
    font-size: 18px;
    letter-spacing: 0.01em;
    padding: 18px 34px;
}

.guide-btn--tabs,
.guide-btn--tabs:link,
.guide-btn--tabs:visited {
    font-size: 16px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 17px 32px;
    border-radius: 6px;
}

/* ---- route picker ----------------------------------------------------- */
.guide-routes {
    background: #FFFFFF;
    border-radius: 10px;
    padding: clamp(24px, 3vw, 32px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.guide-routes__caption {
    font-size: 14px;
    font-weight: 400;
    color: var(--guide-tertiary);
    margin: 0 0 14px;
}

.guide-routes__row,
.guide-routes__row:link,
.guide-routes__row:visited {
    display: flex;
    align-items: center;
    gap: 16px;
    border-top: 1px solid var(--guide-rule);
    padding: 16px 0;
    color: var(--guide-purple);
    text-decoration: none;
    transition: color 0.25s ease-in-out;
}

.guide-routes__row:hover,
.guide-routes__row:focus { color: var(--guide-accent); }

.guide-routes__chip {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 10px;
    background: linear-gradient(180deg, #EEE0FA 0%, #DCC8F2 100%);
    font-family: var(--guide-font-head);
    font-weight: 600;
    font-size: 20px;
    color: var(--guide-purple);
    flex-shrink: 0;
}

.guide-routes__label {
    font-family: var(--guide-font-head);
    font-weight: 600;
    font-size: 18px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* ---- focus ring, per the design system -------------------------------- */
.guide-nav__link:focus-visible,
.guide-routes__row:focus-visible,
.guide-btn:focus-visible,
.guide-tabs .capability-tab:focus-visible {
    outline: 2px solid rgba(60,0,130,0.5);
    outline-offset: 2px;
}

/* ---- narrow widths ----------------------------------------------------- */
@media (max-width: 800px) {
    .guide-nav__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
    .guide-nav__inner { grid-template-columns: 1fr; }
    .guide-ctaband { padding-left: 20px; padding-right: 20px; }
}