/* Storefront policy pages. Layout only — every colour and font comes from the active theme's
   custom properties (with the --c-* fallbacks that themes/base/static/storefront/commerce.css
   sets up), so a policy page looks native in every theme.

   Spacing rules on headings and paragraphs start `body .policy-layout`: every theme resets `p` and
   `h1`–`h4` to `margin: 0` at (0,1,2), which beats a one-class rule, so the gaps below were
   written and never applied — the title sat on its meta line and each heading on its paragraph. */

.policy-layout { display: grid; gap: 2.5rem; align-items: start; }
/* `position: sticky` used to apply below 900px too, where `.policy-layout` is one column and
   the nav sits *above* the article rather than beside it — so the list of policies pinned
   itself to the top of the viewport the moment you scrolled past it and sat there over the
   text for the rest of the page. Sticky is a two-column idea: it only makes sense once the nav
   has its own track running down the side of something taller than it is. */
@media (min-width: 900px) {
  /* `minmax(0, 1fr)`, not `1fr`: a track's minimum is its min-content, so one unbreakable URL in
     the cookie table (a video host's privacy link) grew the article past the window. */
  .policy-layout { grid-template-columns: 16rem minmax(0, 1fr); }
  .policy-nav { position: sticky; top: 1rem; display: grid; gap: 0.25rem; }
}
/* Below 900px the nav is a single scrolling row instead — the same shape the admin's own
   section strip uses on a phone, and for the same reason: a column of every policy would push
   the policy you actually opened below the fold on a narrow screen. */
@media (max-width: 899px) {
  .policy-nav {
    display: flex; gap: 0.5rem; overflow-x: auto; padding-bottom: 0.5rem; margin-bottom: 1rem;
    border-bottom: 1px solid var(--c-line);
  }
  body .policy-layout .policy-nav h2 { display: none; }
}
body .policy-layout .policy-nav h2 { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--c-muted); margin-bottom: 0.5rem; }
.policy-nav a { display: block; padding: 0.5rem 0.75rem; border-radius: var(--c-radius-sm); text-decoration: none; color: inherit; border-left: 3px solid transparent; white-space: nowrap; }
.policy-nav a:hover { background: var(--c-soft); }
.policy-nav a[aria-current="page"] { background: var(--c-soft); border-left-color: var(--c-accent); font-weight: 600; }
.policy-nav a:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }

body .policy-layout p.policy-meta { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; margin: 0.5rem 0 1.75rem; font-size: 0.875rem; color: var(--c-muted); }

.policy-doc { max-width: 46rem; line-height: 1.7; }
body .policy-layout .policy-doc > * + * { margin-top: 1rem; }
body .policy-layout .policy-doc h2 { font-size: 1.15rem; margin-top: 2rem; line-height: 1.35; }
.policy-doc ul, .policy-doc ol { padding-left: 1.25rem; display: grid; gap: 0.4rem; }
.policy-doc hr { border: 0; border-top: 1px solid var(--c-line); margin: 1.5rem 0; }
.policy-doc a { color: var(--c-accent); }
.policy-doc table { width: 100%; border-collapse: collapse; }
.policy-doc th, .policy-doc td { text-align: left; padding: 0.5rem; border-bottom: 1px solid var(--c-line); overflow-wrap: anywhere; }

.policy-index { display: grid; gap: 1rem; max-width: 46rem; }
.policy-index a { display: block; padding: 1rem 1.25rem; border: 1px solid var(--c-line); border-radius: var(--c-radius); text-decoration: none; color: inherit; }
.policy-index a:hover { border-color: var(--c-line-strong); }
.policy-index a:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }
.policy-index strong { display: block; font-size: 1.05rem; }
.policy-index span { color: var(--c-muted); font-size: 0.875rem; }

/* Footer block. Plain anchors so it reads correctly in a theme that never loads this file;
   this rule only tidies the spacing where it is loaded. */
.footer-policies { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; }