/* public/themes/_shared/legal.css — the store's legal pages (Terms & Conditions, Privacy Policy, Refund Policy: guest::legal, task 540)
   in every theme except the default one (that one has public/css/pages/public/store/legal.css). Loaded after the theme's theme.css.
   Neutral on purpose: colours come from the theme's own text colour (currentColor) and backgrounds, so it reads on light and dark themes.
   A theme tunes it from its theme.css with these custom properties on its body class (all optional):
     --th-legal-accent   links, markers, the box edge          (default: the text colour)
     --th-legal-surface  box / card background                  (default: a 4 % tint of the text colour)
     --th-legal-line     borders                                 (default: a 16 % tint of the text colour)
     --th-legal-radius   corner radius                           (default: 14px)
     --th-legal-font     heading font                            (default: the page's)
     --th-legal-top      sticky offset of the contents list      (default: 96px, below a sticky header)
*/

.th-legal { padding: 32px 0 64px; }
@media (min-width: 1024px) { .th-legal { padding: 44px 0 88px; } }
.th-legal-wrap { width: 100%; max-width: 1264px; margin: 0 auto; padding: 0 20px; }
@media (min-width: 768px) { .th-legal-wrap { padding: 0 32px; } }

.th-legal-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; opacity: .8; }
.th-legal-crumbs a { color: inherit; text-decoration: none; }
.th-legal-crumbs a:hover { text-decoration: underline; text-underline-offset: 2px; }
.th-legal-crumbs [aria-current] { font-weight: 600; }

.th-legal-head { margin: 14px 0 32px; padding-bottom: 24px; border-bottom: 1px solid var(--th-legal-line, color-mix(in srgb, currentColor 16%, transparent)); }
.th-legal-title { margin: 0; font-family: var(--th-legal-font, inherit); font-size: 32px; line-height: 1.12; letter-spacing: -.02em; text-wrap: balance; }
@media (min-width: 1024px) { .th-legal-title { font-size: 42px; } }
.th-legal-updated { margin-top: 10px; font-size: 14px; opacity: .78; }

.th-legal-grid { display: grid; gap: 24px; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 1024px) { .th-legal-grid { grid-template-columns: 240px minmax(0, 1fr); gap: 48px; } .th-legal-grid.is-single { grid-template-columns: minmax(0, 1fr); } }

.th-legal-toc { padding: 16px 18px; border: 1px solid var(--th-legal-line, color-mix(in srgb, currentColor 16%, transparent)); border-radius: var(--th-legal-radius, 14px); background: var(--th-legal-surface, color-mix(in srgb, currentColor 4%, transparent)); }
@media (min-width: 1024px) { .th-legal-toc { position: sticky; top: var(--th-legal-top, 96px); max-height: calc(100vh - var(--th-legal-top, 96px) - 24px); overflow-y: auto; } }
.th-legal-toc-title { margin: 0 0 8px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; opacity: .75; }
.th-legal .th-legal-toc ol { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; }
.th-legal-toc a { display: block; padding: 6px 8px; margin: 0 -8px; border-radius: 8px; font-size: 14px; line-height: 1.4; color: inherit; text-decoration: none; opacity: .88; }
.th-legal-toc a:hover { opacity: 1; background: var(--th-legal-surface, color-mix(in srgb, currentColor 7%, transparent)); text-decoration: underline; text-underline-offset: 2px; }

/* the text (.th-prose from base.css, made bigger for reading) */
.th-legal-body { max-width: 46rem; font-size: 16.5px; line-height: 1.7; }
.th-legal .th-legal-body > * + * { margin-top: .9em; }
.th-legal .th-legal-body h2 { margin-top: 2.2em; font-family: var(--th-legal-font, inherit); font-size: 1.32em; line-height: 1.25; scroll-margin-top: var(--th-legal-top, 96px); }
.th-legal .th-legal-body h3 { margin-top: 1.5em; font-size: 1.06em; }
.th-legal .th-legal-body a { color: var(--th-legal-accent, inherit); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.th-legal .th-legal-body a:hover { text-decoration-thickness: 2px; }
.th-legal .th-legal-body ul.th-legal-channels a { text-decoration: none; }
.th-legal .th-legal-body ul, .th-legal .th-legal-body ol { padding-left: 1.4em; }
.th-legal .th-legal-body ul { list-style: disc; }
.th-legal .th-legal-body ol { list-style: decimal; }
.th-legal .th-legal-body li + li { margin-top: .4em; }
.th-legal .th-legal-body li::marker { color: var(--th-legal-accent, currentColor); }
.th-legal .th-legal-body ol > li::marker { font-weight: 700; }

/* boxes: the "in short" summary at the top, notes in the text */
.th-legal .th-legal-body blockquote { position: relative; margin: 0; padding: 20px 22px 20px 26px; border: 1px solid var(--th-legal-line, color-mix(in srgb, currentColor 16%, transparent)); border-radius: var(--th-legal-radius, 14px); background: var(--th-legal-surface, color-mix(in srgb, currentColor 4%, transparent)); opacity: 1; overflow: hidden; }
.th-legal .th-legal-body blockquote::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 4px; background: var(--th-legal-accent, currentColor); }
.th-legal .th-legal-body blockquote > * + * { margin-top: .75em; }
.th-legal .th-legal-body blockquote h2 { margin-top: 0; font-size: 1.12em; }
.th-legal .th-legal-body .th-legal-summary { padding: 24px 26px 24px 30px; }
.th-legal .th-legal-body .th-legal-summary > h2 + p { opacity: .8; font-size: .95em; }
.th-legal .th-legal-body .th-legal-summary ul { display: grid; gap: 12px 24px; padding: 0; list-style: none; }
@media (min-width: 768px) { .th-legal .th-legal-body .th-legal-summary ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.th-legal .th-legal-body .th-legal-summary li { margin: 0; padding-left: 26px; position: relative; font-size: .95em; line-height: 1.55; }
.th-legal .th-legal-body .th-legal-summary li::before { content: ""; position: absolute; left: 2px; top: .38em; width: 12px; height: 7px; border-left: 2.5px solid var(--th-legal-accent, currentColor); border-bottom: 2.5px solid var(--th-legal-accent, currentColor); transform: rotate(-45deg); }
.th-legal .th-legal-body .th-legal-summary li strong { display: block; }
.th-legal .th-legal-body .th-legal-note { padding: 16px 20px 16px 24px; }

/* the store's contact links ({support_channels}) */
.th-legal .th-legal-body ul.th-legal-channels { display: flex; flex-wrap: wrap; gap: 10px; padding: 0; list-style: none; }
.th-legal .th-legal-body ul.th-legal-channels li { margin: 0; }
.th-legal .th-legal-channels a { display: inline-flex; flex-direction: column; justify-content: center; min-height: 44px; padding: 8px 16px; border: 1px solid var(--th-legal-line, color-mix(in srgb, currentColor 22%, transparent)); border-radius: var(--th-legal-radius, 12px); background: var(--th-legal-surface, color-mix(in srgb, currentColor 4%, transparent)); color: inherit; text-decoration: none; line-height: 1.3; }
.th-legal .th-legal-channels a:hover { border-color: var(--th-legal-accent, currentColor); }
.th-legal-ch-label { font-size: 14px; font-weight: 700; }
.th-legal-ch-handle { font-size: 12.5px; opacity: .78; overflow-wrap: anywhere; }

/* the other two pages */
.th-legal-more { margin-top: 56px; padding-top: 32px; border-top: 1px solid var(--th-legal-line, color-mix(in srgb, currentColor 16%, transparent)); }
.th-legal-more-title { margin: 0 0 16px; font-family: var(--th-legal-font, inherit); font-size: 20px; }
.th-legal .th-legal-more ul { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); margin: 0; padding: 0; }
@media (min-width: 640px) { .th-legal .th-legal-more ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.th-legal-more a { display: flex; flex-direction: column; gap: 4px; height: 100%; padding: 16px 18px; border: 1px solid var(--th-legal-line, color-mix(in srgb, currentColor 16%, transparent)); border-radius: var(--th-legal-radius, 14px); background: var(--th-legal-surface, color-mix(in srgb, currentColor 4%, transparent)); color: inherit; text-decoration: none; }
.th-legal-more a:hover { border-color: var(--th-legal-accent, currentColor); }
.th-legal-more b { font-size: 15.5px; }
.th-legal-more span { font-size: 13.5px; line-height: 1.5; opacity: .8; }