/* ---- Manual page extras (keeps your global webstyle.css) ----------------- */
:root{
  --radius: 12px;
  --media-gap: 2rem;
  --wrap-gap: 5rem;      
--top-height: 0px;                             /* space BETWEEN wraps/cards */
  --anchor-offset: 5rem;
    --card-top-pad:2.0rem;    
  --first-top-gap: calc(var(--anchor-offset)+ 5rem);
    --clr-secondary-light: #b7b7b7;
  --clr-secondaccent: #8d734b;
}

.manual-wrap .legal-doc{
  margin: 0;
  padding-top: var(--card-top-pad);
  padding-bottom: 0;
}


.manual-wrap + .manual-wrap{ margin-top: var(--wrap-gap); }

.manual-wrap .legal-content{
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* keep first/last child margins from leaking outside the card */
.manual-wrap .legal-doc > *:first-child{ margin-top: 0; }
.manual-wrap .legal-doc > *:last-child { margin-bottom: 0; }

/* kill spacer divs that create random vertical space */
.manual-wrap .legal-doc > .midspacer,
.manual-wrap .legal-doc > .bigspacer,
.manual-wrap .legal-doc > .megaspacer{
  display: none;
}

.manual-wrap.container{
  padding: 0 !important;        /* kill all container padding */
  --bs-gutter-x: 0;             /* (Bootstrap 5+) zero horizontal gutters */
}
/* ensure first H1 sits tight to the top pad */
.manual-wrap .legal-block > h1:first-child{ margin-top: 0; }


/* substeps */
/* substeps */
.substep, .snav{ margin: 1.25rem 0 2rem; }

.substep-header, .snav-header{
  display: flex;
  align-items: center;
  gap: .75rem;
}

/* header text */
.substep-header h3,
.snav-header h3{
  margin: 0;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.substep-header h3.hs,
.snav-header h3.hs{
  --hs-scale: 1.4;
  font-size: calc(1em * var(--hs-scale));
  line-height: 1.1;
}

/* icon */
.substep-ic, .snav-ic{
  --icon-size: 28px;
  flex: 0 0 var(--icon-size);
  width: var(--icon-size);
  height: var(--icon-size);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 0;
  border-radius: 0;
  overflow: visible;
  isolation: auto;
}
.substep-ic > img,
.snav-ic > img{
  display: block; width: 100%; height: 100%;
  object-fit: contain; background: none; box-shadow: none; filter: none;
}
/* allow h5 inside substep headers */
.substep-header h5 { 
  margin: 0; 
  letter-spacing: .08em;
  text-transform: uppercase;
  line-height: 1.2;
}
/* mini substep block */
.substep-mini {
  display: flex;
  flex-direction: column;
  gap: .35rem;        /* space between header and paragraph */
  margin: 1rem 0;
}

/* header row: icon + h5 */
.substep-mini-header {
  display: flex;
  align-items: center;
  gap: .5rem;
}

.substep-mini-header h5 {
  margin: 0;
  font-size: 0.8em;
  letter-spacing: .08em;
  text-transform: uppercase;
  line-height: 1.2;
}

/* icon reuse */
.substep-mini .substep-ic {
  --icon-size: 20px;
  flex: 0 0 var(--icon-size);
  width: var(--icon-size);
  height: var(--icon-size);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.substep-mini .substep-ic > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* text */
.substep-mini p {
  margin: 0;

  line-height: 1.4;
}

/* === Build filter label (icon + color) ===========================
   Usage (HTML): <div class="substep-build" data-filter="bom"></div>
   Inherits category color from wrapper; can override via [data-cat].
================================================================= */

.substep-build{
  --build-icon: none;                                        /* set by [data-filter] below */
  --build-color: var(--cat-color, var(--clr-secondary-light));/* default: current category color */
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  color: var(--build-color);                                  /* tints icon + text */
  line-height: 1;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-family: var(--font-heading);
  font-size: .9rem;
}

/* masked SVG icon (same “svg color filter” treatment used elsewhere) */
.substep-build::before{
  content: "";
  width: 22px;
  height: 22px;
  background-color: currentColor;                             /* tint via text color */
  -webkit-mask: var(--build-icon) no-repeat center / contain; /* Safari/Chrome */
          mask: var(--build-icon) no-repeat center / contain; /* FF/Edge */
}

/* Size helpers */
.substep-ic.ic-tile.sm{ --icon-size: 20px; }
.substep-ic.ic-tile.lg{ --icon-size: 32px; }

/* === FILTER → ICON MAP (ALL) ===================================== */
.substep-ic.ic-showall { --tile-icon: url("https://rampnerd.s3.us-east-1.amazonaws.com/productimg/expandall_icon.svg"); }
.substep-ic.ic-assembly{ --tile-icon: url("https://rampnerd.s3.us-east-1.amazonaws.com/productimg/ASSEMBLY_icon.svg"); }
.substep-ic.ic-bom     { --tile-icon: url("https://rampnerd.s3.us-east-1.amazonaws.com/productimg/bom_icon.svg"); }
.substep-ic.ic-cutlist { --tile-icon: url("https://rampnerd.s3.us-east-1.amazonaws.com/productimg/cutlist_icon.svg"); }
.substep-ic.ic-files,
.substep-ic.ic-down,
.substep-ic.ic-download{ --tile-icon: url("https://rampnerd.s3.us-east-1.amazonaws.com/productimg/download_icon.svg"); }

/* === CATEGORY COLOR INHERITANCE (auto from wrapper) =============== */
.shared-container.Surface        .substep-ic.ic-tile{ --tile-color: var(--clr-catcolor-Surface); }
.shared-container.frame-platform .substep-ic.ic-tile{ --tile-color: var(--clr-catcolor-structure); }
.shared-container.coping         .substep-ic.ic-tile{ --tile-color: var(--clr-catcolor-coping); }
.shared-container.finish         .substep-ic.ic-tile{ --tile-color: var(--clr-catcolor-finish); }
.shared-container.foundation     .substep-ic.ic-tile{ --tile-color: var(--clr-catcolor-foundation); }
.shared-container.screws         .substep-ic.ic-tile{ --tile-color: var(--clr-catcolor-screws); }

/* === OPTIONAL OVERRIDES ========================================== */
/* Per-header class (e.g., <div class="substep-header struct">…) */
.substep-header.struct   .substep-ic.ic-tile{ --tile-color: var(--clr-catcolor-structure); }
.substep-header.surface  .substep-ic.ic-tile{ --tile-color: var(--clr-catcolor-Surface); }
.substep-header.coping   .substep-ic.ic-tile{ --tile-color: var(--clr-catcolor-coping); }
.substep-header.finish   .substep-ic.ic-tile{ --tile-color: var(--clr-catcolor-finish); }
.substep-header.foundation .substep-ic.ic-tile{ --tile-color: var(--clr-catcolor-foundation); }
.substep-header.screws   .substep-ic.ic-tile{ --tile-color: var(--clr-catcolor-screws); }
.substep-header.generic  .substep-ic.ic-tile{ --tile-color: var(--clr-catcolor-generic); }

/* Data-attribute override (no wrapper/class needed) */
.substep-ic.ic-tile[data-cat="structure"]  { --tile-color: var(--clr-catcolor-structure); }
.substep-ic.ic-tile[data-cat="surface"]    { --tile-color: var(--clr-catcolor-Surface); }
.substep-ic.ic-tile[data-cat="coping"]     { --tile-color: var(--clr-catcolor-coping); }
.substep-ic.ic-tile[data-cat="finish"]     { --tile-color: var(--clr-catcolor-finish); }
.substep-ic.ic-tile[data-cat="foundation"] { --tile-color: var(--clr-catcolor-foundation); }
.substep-ic.ic-tile[data-cat="screws"]     { --tile-color: var(--clr-catcolor-screws); }
.substep-ic.ic-tile[data-cat="generic"]    { --tile-color: var(--clr-catcolor-generic); }

/* ================================================================
   OPTIONAL: MATCH .substep-build labels to same icons/colors
   (keeps your existing .substep-build, but tile-tinted text).
================================================================= */
.substep-build{
  --build-icon: none;
  --build-color: var(--cat-color, var(--clr-secondary-light));
  display: inline-flex; align-items: center; gap: .5rem;
  color: var(--build-color);
  letter-spacing: .12em; text-transform: uppercase;
  font-family: var(--font-heading); font-size: .9rem; line-height: 1;
}
.substep-build::before{
  content:""; width: 22px; height: 22px;
  background-color: currentColor;
  -webkit-mask: var(--build-icon) no-repeat center / contain;
          mask: var(--build-icon) no-repeat center / contain;
}
.substep-ic.ic-tile{
  all: unset;                                     /* wipe earlier resets */
  display: inline-block;
  position: relative;
  width: var(--icon-size, 28px);
  height: var(--icon-size, 28px);
  border-radius: 8px;
  background-color: var(--tile-color, var(--clr-catcolor-structure)); /* tile bg */
  vertical-align: middle;
}

/* SVG glyph in --clr-primary-dark */
.substep-ic.ic-tile::before{
  content:"";
  position:absolute;
  inset: 18%;
  background-color: var(--clr-primary-dark);
  -webkit-mask: var(--tile-icon) no-repeat center / contain;
          mask: var(--tile-icon) no-repeat center / contain;
}

/* FILTER → ICON MAP (all) */
.substep-ic.ic-showall { --tile-icon: url("https://rampnerd.s3.us-east-1.amazonaws.com/productimg/expandall_icon.svg"); }
.substep-ic.ic-assembly{ --tile-icon: url("https://rampnerd.s3.us-east-1.amazonaws.com/productimg/ASSEMBLY_icon.svg"); }
.substep-ic.ic-bom     { --tile-icon: url("https://rampnerd.s3.us-east-1.amazonaws.com/productimg/bom_icon.svg"); }
.substep-ic.ic-cutlist { --tile-icon: url("https://rampnerd.s3.us-east-1.amazonaws.com/productimg/cutlist_icon.svg"); }
.substep-ic.ic-files,
.substep-ic.ic-down,
.substep-ic.ic-download{ --tile-icon: url("https://rampnerd.s3.us-east-1.amazonaws.com/productimg/download_icon.svg"); }

/* CATEGORY BACKGROUNDS (auto from wrapper or per-header helper) */
.shared-container.frame-platform .substep-ic.ic-tile,
.substep-header.struct .substep-ic.ic-tile{
  --tile-color: var(--clr-catcolor-structure);
}
.shared-container.Surface .substep-ic.ic-tile,
.substep-header.surface .substep-ic.ic-tile{
  --tile-color: var(--clr-catcolor-Surface);
}
.shared-container.coping .substep-ic.ic-tile,
.substep-header.coping .substep-ic.ic-tile{
  --tile-color: var(--clr-catcolor-coping);
}
.shared-container.finish .substep-ic.ic-tile,
.substep-header.finish .substep-ic.ic-tile{
  --tile-color: var(--clr-catcolor-finish);
}
.shared-container.foundation .substep-ic.ic-tile,
.substep-header.foundation .substep-ic.ic-tile{
  --tile-color: var(--clr-catcolor-foundation);
}
.shared-container.screws .substep-ic.ic-tile,
.substep-header.screws .substep-ic.ic-tile{
  --tile-color: var(--clr-catcolor-screws);
}



/* size control: use the same .hs scale var */
.substep-header .hs { --hs-scale: 1.0; font-size: calc(1em * var(--hs-scale)); }

/* optional: smaller icon helper */
.substep-ic.sm { --icon-size: 20px; }

/* IMG + TEXT rows */
.substep-content.img-text,
.snav-content.img-text{
  display: flex;
  align-items: flex-start;
  gap: var(--media-gap);
}
.substep-content.tpl-img-right,
.snav-content.tpl-img-right{ flex-direction: row-reverse; }

/* text column */
.substep-text, .snav-text{ flex: 1 1 0; min-width: 0; }

/* figure box */
.substep-content.img-text .rn-img,
.snav-content.img-text .rn-img{
  margin: 0; position: relative; display: block; overflow: hidden;
  border-radius: var(--radius);
  flex: 0 1 50%;
  max-width: min(50%, var(--img-max, 9999px));
  isolation: isolate;
}

/* text-only layouts */
.substep-content.tpl-text-only,
.snav-content.tpl-text-only{ display: grid; gap: 1rem; }
.substep-content.two-col,
.snav-content.two-col{ grid-template-columns: repeat(2, minmax(0, 1fr)); }



/* icon at the left of some headers — NO bg, NO shadow, NO radius */
.substep-ic{
  --icon-size: 28px;          /* override per header if needed */
  flex: 0 0 var(--icon-size);
  width: var(--icon-size);
  height: var(--icon-size);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 0;
  border-radius: 0;
  overflow: visible;
  isolation: auto;            /* no special blending */
}

.substep-ic > img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;        /* keep PNG aspect */
  background: none;
  box-shadow: none;
  filter: none;
}

/* remove this entire rule if it exists */
.substep-ic::after{ display: none !important; content: none !important; }



/* IMG + TEXT rows ---------------------------------------------------------- */
.substep-content.img-text{
  display: flex;
  align-items: flex-start;
  gap: var(--media-gap);
}

/* image on the right version */
.substep-content.tpl-img-right{ flex-direction: row-reverse; }


/* TEXT column */
.substep-text{
  flex: 1 1 0;
  min-width: 0;
}

.legal-nav nav .nav-item{display:block}
.legal-nav nav .sublist{
  display:none;
  margin:.25rem 0 .5rem 0;   /* kill left indent */
  width:100%;
}
.legal-nav nav .nav-item.is-open>.sublist{display:block}

.legal-nav nav a.sub{
  display:block;
  width:100%;
  text-align:right;                 /* align right edge with top items */
  font-size:.92em;
  line-height:1.2;
  padding:.15rem 1.2rem;
  color: var(--clr-secondary-light);
  text-decoration:none;
  opacity:.9;
}
/* NEW: image-above template (image top, text below) */
.substep-content.img-text.tpl-img-above,
.snav-content.img-text.tpl-img-above{
  flex-direction: column;
  align-items: stretch;
  gap: var(--media-gap);
}

/* figure full-width by default; cap via --img-max if provided */
.substep-content.img-text.tpl-img-above .rn-img,
.snav-content.img-text.tpl-img-above .rn-img{
  width: 100%;
  max-width: var(--img-max, 100%);
  flex: 0 0 auto;              /* cancel the 50% flex from base rule */
  margin-left: auto;            /* center when capped */
  margin-right: auto;
}

/* text block spans full width under the image */
.substep-content.tpl-img-above .substep-text,
.snav-content.tpl-img-above .snav-text{
  width: 100%;
}




.legal-nav nav a.sub:hover,
.legal-nav nav a.sub:focus-visible{
  color: var(--clr-secondaccent);
  opacity:1;
  text-underline-offset:.18em;
}
.legal-nav nav a.sub.is-active{
  color: var(--clr-secondaccent);
  opacity:1;
  font-weight:700;
}

/* IMAGE box — figure with inner shadow
   - never more than 50% of the row
   - keeps natural image aspect ratio
   - removes default figure margin
*/
/* IMAGE box — figure with inner shadow
   - never more than 50% of the row by default
   - per-image override via --img-max (e.g. style="--img-max: 420px")
*/
.substep-content.img-text .rn-img{
  margin: 0;
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--radius);
  flex: 0 1 50%;
  max-width: min(50%, var(--img-max, 9999px)); /* per-image cap */
  isolation: isolate; /* keep blends local to this figure */
}

.rn-img > img{
  display: block;
  width: 100%;
  height: auto;
  border-radius: inherit;
  position: relative;
  z-index: 0;
}

/* PURE inner shadow overlay — blended as multiply */
.rn-img::before{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 1;
  mix-blend-mode: multiply; /* <- key line */

}


/* TEXT-ONLY two-column template ------------------------------------------- */
.substep-content.tpl-text-only{
  display: grid;
  gap: 1rem;
}
.substep-content.two-col{
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.smallspacer{ margin-top: .5rem; }
.midspacer{ margin-top: .75rem; }
.bigspacer{ margin-top: 1.0rem; }
.megaspacer{ margin-top: 2rem; }