/* ==========================================================================
   Buying guides - the part of the guide CSS that every guide page loads.

   A guide page prints, in this order:
     1. this file
     2. the guide's own CSS (its "Guide CSS" box), or mhs-guide.css when the
        box is empty - in both cases fenced inside #mhs-guide and given
        !important by system/library/guidecontent.php
     3. the guide inside <div class="mhs-guide" id="mhs-guide">, which sits
        outside the page's #content, so the theme's "#content ..." rules
        never reach it

   The guides were written as stand-alone pages that never loaded the
   store's theme. Here they sit inside it, and the theme's rules reach into
   them: p { font-size: 14px !important }, nav { display: none },
   header { display: contents }, a[href^="tel"] { text-decoration: none
   !important }, .wrap and .tagline (names the guides use too), Bootstrap's
   margins and line-heights, and more. Rather than answer each one - a list
   that would have to grow with every theme change - the first rule below
   puts every element inside the guide back to the browser's own default,
   which is exactly what it was on the stand-alone page. The guide's own
   rules (step 2) then apply on top of that, and win: same or higher
   specificity, later in the page, and !important.

   Id strength (#mhs-guide), not a class: a theme !important rule with a
   class or an attribute in it (a[href^="tel"]) outranks a class-strength
   reset. At id strength it would have to name an id inside the guide.
   ========================================================================== */

/* 1. Nothing of the theme inside the guide.
   :where() keeps this at the specificity of the id alone, so any rule of
   the guide's own - "#mhs-guide p", "#mhs-guide *" - outranks it. "all"
   leaves custom properties (--navy etc.) alone, so the guide's variables
   pass. */
#mhs-guide :where(*),
#mhs-guide :where(*)::before,
#mhs-guide :where(*)::after{all:revert !important}

/* The wrapper itself starts from what <body> was on the stand-alone page:
   the browser's 16px and normal line height, not the theme's 14px. The
   guide's own body {...} rule becomes #mhs-guide {...} and overrides these. */
#mhs-guide{all:revert !important;display:block !important;font-size:16px !important;line-height:normal !important}

/* 2. The page's #content, printed above the guide only when it holds
   layout modules or a title. stylesheet.css gives it "min-height: 600px"
   and all.css "width: 96% !important" on phones; neither is wanted for
   that short strip. Two ids outrank the theme's one. */
#information-buying-guide #content{min-height:0 !important;width:auto !important;margin:0 !important}

/* 3. Contents links land BELOW the site's sticky header, not under it. The
   header's height depends on the screen width (measured 2026-11-11):

     992px and wider   the blue bar .main-header is sticky: 165-187px
     769px - 991px     the whole <header> is sticky: 216px
     768px and below   nothing is sticky

   An id and an attribute, so the reset above cannot undo it.
   If the site header is redesigned, re-measure and update these. */
#mhs-guide [id]{scroll-margin-top:16px !important}

@media (min-width:769px){#mhs-guide [id]{scroll-margin-top:232px !important}}

@media (min-width:992px){#mhs-guide [id]{scroll-margin-top:203px !important}}

/* 4. Contents links glide down to their section instead of jumping. Has to
   sit on <html> - the page scrolls, not the guide - and :has() keeps it to
   a page that holds a guide, the same rule category.twig uses on its own
   page. Visitors who have asked their system for less motion still jump. */
@media (prefers-reduced-motion:no-preference){html:has(#mhs-guide){scroll-behavior:smooth}}