/* =========================================================
   Shared page skeleton — linked from every page, before
   nav.css/footer.css. Handles the base reset and makes the
   footer stick to the bottom of the viewport on short pages
   (the "sticky footer" flex pattern).

   Usage on every page:
     <body>
       <div id="site-header"></div>
       <div class="page-content"> ...page content... </div>
       <div id="site-footer"></div>
       <script src="js/nav.js"></script>
       <script src="js/footer.js"></script>
     </body>
   ========================================================= */

html, body {
  margin: 0;
  padding: 0;
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: Arial, sans-serif;
}

/* Grows to fill the space between the nav and footer */
.page-content {
  flex: 1 0 auto;
}

/* Locks background scroll while the mobile nav overlay is open */
body.nav-open {
  overflow: hidden;
}

/* Shareable section and step links, added by the shared navigation script. */
.deep-link-target{scroll-margin-top:74px}
.deep-link-heading{position:relative}
.deep-link-button{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;margin-left:7px;padding:0;border:0;border-radius:7px;background:transparent;color:#6b7280;cursor:pointer;vertical-align:middle;opacity:0;transition:opacity .15s,background .15s,color .15s}
.deep-link-heading:hover>.deep-link-button,.deep-link-heading:focus-within>.deep-link-button,.deep-link-button:focus{opacity:1}
.deep-link-button:hover,.deep-link-button:focus{background:#eef2fd;color:#2666ff;outline:none}
.deep-link-button svg{width:15px;height:15px;pointer-events:none}
.gp-banner-title>.deep-link-button{color:rgba(255,255,255,.8)}
.gp-banner-title>.deep-link-button:hover,.gp-banner-title>.deep-link-button:focus{background:rgba(255,255,255,.18);color:#fff}
.step.deep-link-target,.step-row.deep-link-target{position:relative;padding-right:38px!important}
.step>.deep-link-button,.step-row>.deep-link-button{position:absolute;right:3px;top:10px;margin:0}
.acc.deep-link-heading>.deep-link-button{position:absolute;right:42px;top:10px;margin:0;z-index:3}
.step:hover>.deep-link-button,.step-row:hover>.deep-link-button,.step:focus-within>.deep-link-button,.step-row:focus-within>.deep-link-button{opacity:1}
.acc.deep-link-heading:hover>.deep-link-button,.acc.deep-link-heading>.deep-link-button:focus{opacity:1}
.deep-link-target.deep-link-flash{animation:deep-link-flash 1.4s ease}
.deep-link-toast{position:fixed;left:50%;bottom:24px;z-index:10000;transform:translate(-50%,12px);padding:10px 14px;border-radius:9px;background:#111827;color:#fff;font:600 12px 'DM Sans',Arial,sans-serif;box-shadow:0 8px 24px rgba(0,0,0,.2);opacity:0;pointer-events:none;transition:opacity .18s,transform .18s}
.deep-link-toast.show{opacity:1;transform:translate(-50%,0)}
@keyframes deep-link-flash{0%,100%{box-shadow:none}25%{box-shadow:0 0 0 4px rgba(38,102,255,.2)}}
@media(max-width:700px){.deep-link-button{opacity:.72}.step>.deep-link-button,.step-row>.deep-link-button{right:1px}}
@media(prefers-reduced-motion:reduce){.deep-link-target.deep-link-flash{animation:none}.deep-link-toast{transition:none}}
