/** Shopify CDN: Minification failed

Line 115:27 Unexpected "#171C22"
Line 121:74 Unterminated string token

**/
/* =========================================================================
   MapleWeld — Knowledge Hub, second pass.

   Loaded by sections/mwh-blog.liquid and sections/mwh-article.liquid
   IMMEDIATELY AFTER mwh-blog.css, and that order is the whole reason this is
   a separate file rather than more lines in that one. Everything below has to
   beat a rule in mwh-blog.css that carries !important, and winning on source
   order is far less brittle than stacking selectors until the specificity
   happens to come out ahead. mwh-blog.css is 32KB of settled work; this is
   the place for anything that has to override it.

   Three things live here:
     1. author-styled buttons inside an article body
     2. author-styled dark PANELS inside an article body
     3. the compact single-row blog strip used off the blog page

   ONE PRINCIPLE BEHIND 1 AND 2, worth stating once: mwh-blog.css styles the
   reading column for dark text on paper, with !important, because Molla
   fights it. That is correct for running prose and wrong for anything the
   article's own <style> block gives a background to - the author picked a
   background and a foreground together, and only they know what is legible
   on it. So any author element with its own background has to be listed here
   and handed its colours back.

   HOW TO CHECK FOR MORE OF THEM after a new guide is published - paste this
   in the browser console on the article:

     [...document.querySelectorAll('.mwa__rte *')].filter(e=>{
       const b=getComputedStyle(e).backgroundColor.match(/\d+/g);
       return b && b[3]!=='0' && (b[0]*0.299+b[1]*0.587+b[2]*0.114) < 110;
     }).map(e=>e.tagName+'.'+e.className)

   Anything it prints that is not already handled below needs adding.
   ========================================================================= */


/* =========================================================================
   1. AUTHOR-STYLED BUTTONS INSIDE THE ARTICLE BODY

   The guides carry their own <style> block, written with the article, and it
   defines:

       .kh-btn         { background:#BF0505; color:#fff; padding:12px 26px }
       .kh-btn:hover   { background:#970404; color:#fff }
       .kh-btn-outline { color:#BF0505; border:2px solid #BF0505 }

   So the author asked for white text on a solid red button, which is right.
   But mwh-blog.css has:

       .mwa__rte a { color:var(--red) !important; text-decoration:underline !important }

   and that !important beat the article's own colour. The result was #C8102E
   text on a #BF0505 button - red on red, i.e. the buttons in the helmet guide
   were completely unreadable. The underline was landing on them too.
   ========================================================================= */

.mwa__rte a.kh-btn,
.mwa__rte .kh-btn{
  color:#fff !important;
  text-decoration:none !important;
  font-weight:750;
}
.mwa__rte a.kh-btn:hover,
.mwa__rte a.kh-btn:focus-visible,
.mwa__rte .kh-btn:hover{
  color:#fff !important;
  text-decoration:none !important;
}

/* Outline variant: transparent, so the author's own red IS the legible
   choice. Only the underline needs removing. */
.mwa__rte a.kh-btn-outline,
.mwa__rte .kh-btn-outline{
  color:#BF0505 !important;
  text-decoration:none !important;
  font-weight:750;
}
.mwa__rte a.kh-btn-outline:hover{
  color:#970404 !important;
  text-decoration:none !important;
}

/* A button is a block-level target, not a word in a sentence: give it room
   and a proper hit area on a phone. Harmless if the article already styles
   these, because everything here is what the author's own CSS implies. */
.mwa__rte .kh-btn,
.mwa__rte .kh-btn-outline{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:44px; border-radius:9px;
}


/* =========================================================================
   2. AUTHOR-STYLED DARK PANELS INSIDE THE ARTICLE BODY

   The same failure as the buttons, one level up. The closing call-to-action
   block in both published guides is:

       .kh-final-cta    { background:#1F1F1F; color:#fff }
       .kh-final-cta h3 { color:#fff }
       .kh-final-cta p  { color:#ddd }

   - a dark panel the author gave light text. mwh-blog.css then applies the
   reading-column colours to everything in .mwa__rte:

       .mwa__rte h3 { color:var(--paper-ink) !important }   /* #171C22 */
       .mwa__rte p  { color:#2C333C !important }

   so the heading rendered #171C22 on #1F1F1F and the paragraph #2C333C on
   #1F1F1F. Near-black on near-black: the panel looked like an empty grey box
   with a red button floating in it, which is what was reported. Only the
   button was legible, and only because section 1 above had already rescued
   it.

   Headings and bold go white, body and list text go to the author's #DDD,
   and a plain link inside the panel gets the light red rather than the dark
   one, which is invisible here for the same reason.
   ========================================================================= */

.mwa__rte .kh-final-cta{ color:#DDDDDD !important; }
.mwa__rte .kh-final-cta p,
.mwa__rte .kh-final-cta li,
.mwa__rte .kh-final-cta span{ color:#DDDDDD !important; }
.mwa__rte .kh-final-cta h1,
.mwa__rte .kh-final-cta h2,
.mwa__rte .kh-final-cta h3,
.mwa__rte .kh-final-cta h4,
.mwa__rte .kh-final-cta strong,
.mwa__rte .kh-final-cta b{ color:#FFFFFF !important; }
.mwa__rte .kh-final-cta li::marker{ color:#FF5A72; }

/* A plain link in the panel - not the button, which section 1 owns. The
   reading column's #C8102E is as unreadable on #1F1F1F as the heading was. */
.mwa__rte .kh-final-cta a:not(.kh-btn):not(.kh-btn-outline){
  color:#FF5A72 !important;
  text-decoration-color:rgba(255,90,114,.5) !important;
}
.mwa__rte .kh-final-cta a:not(.kh-btn):not(.kh-btn-outline):hover{ color:#fff !important; }


/* =========================================================================
   3. COMPACT ROW — the blog strip off the blog page

   The homepage version of this section was 1540px tall, the tallest band on
   the page: a full-width feature card (452px) plus a two-up grid of a card
   and the talk-to-us card (567px each). Three large tiles to advertise two
   articles, and on a phone it was several thumb-flicks of blog between the
   catalogue and the footer.

   Compact mode drops the feature and the talk-to-us card and runs every
   article as a small tile in ONE row - image, topic, title, date. No excerpt:
   at this size an excerpt is three clipped lines that say less than the title
   already does. The blog page itself is untouched - that is where the full
   treatment belongs.

   THE TILES ARE WIDTH-CAPPED, not stretched, and that is the difference
   between compact and merely rearranged. The blog has two published posts.
   Two stretched tiles across 1178px are 581px each, and a 16/9 image at that
   width is 326px tall on its own - the band came out at 806px, which is not
   a compact row, it is two enormous tiles side by side. Capped at 320px the
   image is ~180px and the whole band is ~690px. Four posts fill the row
   naturally, so the cap only bites while the blog is short - which is exactly
   when the stretching looked worst.

   NOTE ON ORDER: every grid rule here carries !important because
   mwh-blog.css sets .mwb__grid[data-n="n"] at the same specificity inside
   its own media queries. The heading rules lean on the extra element in
   ".mwb .mwb__card--sm h3" to clear the hardening block's
   ".mwb h3.mwb__ctitle{...!important}".
   ========================================================================= */

.mwb--compact .mwb__hero{ padding:42px 0 24px; }
.mwb--compact .mwb__body{ padding:22px 0 40px; }
.mwb--compact .mwb__h1{ font-size:clamp(24px,2.9vw,34px); max-width:30ch; }
.mwb--compact .mwb__lead{ font-size:15px; max-width:74ch; }
.mwb--compact .mwh-dir__more{ margin-top:22px; }

.mwb__grid--row{
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:16px !important;
  justify-content:start;
}
.mwb__grid--row[data-n="1"]{ grid-template-columns:minmax(0,320px) !important; }
.mwb__grid--row[data-n="2"]{ grid-template-columns:repeat(2,minmax(0,320px)) !important; }
.mwb__grid--row[data-n="3"]{ grid-template-columns:repeat(3,minmax(0,320px)) !important; }

.mwb__card--sm .mwb__cbody{ padding:14px 15px 15px; }
.mwb__card--sm .mwb__chips{ margin:0 !important; }
.mwb__card--sm .mwb__chip{ padding:4px 9px; font-size:10.2px; }
.mwb .mwb__card--sm h3.mwb__ctitle{
  font-size:15.5px !important; line-height:1.36 !important; margin:9px 0 0 !important;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.mwb__card--sm .mwb__cex{ display:none !important; }
.mwb__card--sm .mwb__cmeta{ margin-top:12px; font-size:12px; }
.mwb__card--sm .mwb__cgo{ width:26px; height:26px; }

@media (max-width:1000px){
  .mwb__grid--row,
  .mwb__grid--row[data-n="3"]{ grid-template-columns:repeat(3,minmax(0,300px)) !important; }
}
@media (max-width:760px){
  /* Two across, not one. A single column of full-width tiles is how the
     section got tall in the first place; at half width the image is still
     big enough to read and two articles fit on one screen. The cap comes off
     here - at this width 1fr is already small. */
  .mwb__grid--row,
  .mwb__grid--row[data-n="1"],
  .mwb__grid--row[data-n="2"],
  .mwb__grid--row[data-n="3"]{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:10px !important; }
  .mwb--compact .mwb__hero{ padding:26px 0 16px; }
  .mwb--compact .mwb__body{ padding:16px 0 28px; }
  .mwb__card--sm .mwb__cbody{ padding:11px 12px 12px; }
  .mwb .mwb__card--sm h3.mwb__ctitle{ font-size:13.4px !important; margin:7px 0 0 !important; }
  .mwb__card--sm .mwb__chips{ display:none !important; }
  .mwb__card--sm .mwb__cmeta{ margin-top:9px; font-size:11px; }
}