/* Genacol — Content & Legal (templates/content-legal.php). Every rule is scoped to .gcl-page.
 * No dedicated legal-page reference exists; this follows the Health Tips article reading pattern
 * (breadcrumb, heading scale, 720px prose column, "On this page" list, blockquote) and the site's tokens.
 *
 * Spacing model: the document rhythm below is written with :where(), i.e. zero specificity, and applies at
 * any nesting depth (pasted content often arrives wrapped in <div>s). Anything the editor produces wins over
 * it: inline margin/padding styles, editor and block classes, WordPress layout/block-gap rules, Spacer blocks. */
.gcl-page { flex: 1; background: var(--g-surface); }
.gcl-page .gcl-column { width: 100%; max-width: 720px; min-width: 0; margin-inline: auto; }

/* Hero: breadcrumb, title, optional introduction */
.gcl-page .gcl-hero { border-bottom: 1px solid var(--g-border); background: var(--g-surface-2); }
.gcl-page .gcl-hero__inner { display: flex; flex-direction: column; gap: clamp(16px,2vw,22px); padding-block: clamp(32px,5vw,72px) clamp(28px,4vw,52px); }
.gcl-page .gcl-breadcrumb { display: flex; flex-wrap: wrap; gap: 8px; font-size: 12px; letter-spacing: .04em; color: #5C655E; } /* ≥4.5:1 on the light surface. */
.gcl-page .gcl-breadcrumb a { color: #5C655E; text-decoration: none; }
.gcl-page .gcl-breadcrumb a:hover { color: var(--g-dark); text-decoration: underline; text-underline-offset: 3px; }
.gcl-page .gcl-breadcrumb [aria-current] { color: var(--g-dark); overflow-wrap: anywhere; }
.gcl-page .gcl-title { font-family: var(--g-font-heading); font-weight: 500; font-size: clamp(34px,4.6vw,60px); line-height: 1.02; letter-spacing: -.02em; color: var(--g-dark); overflow-wrap: break-word; hyphens: auto; }
.gcl-page .gcl-intro { max-width: 60ch; font-size: clamp(16px,1.3vw,19px); line-height: 1.55; color: #3C453F; }

/* Body layout: "On this page" on the left, the document on the right (single centred column without a TOC) */
.gcl-page .gcl-body { padding-block: clamp(32px,4.5vw,64px) clamp(56px,7vw,96px); }
.gcl-page .gcl-layout { width: 100%; max-width: 720px; min-width: 0; margin-inline: auto; }
.gcl-page .gcl-article--toc .gcl-hero .gcl-column, .gcl-page .gcl-article--toc .gcl-layout { max-width: 1040px; }
.gcl-page .gcl-article--toc .gcl-layout { display: grid; grid-template-columns: clamp(216px,20vw,264px) minmax(0,1fr); column-gap: 56px; }
.gcl-page .gcl-aside { min-width: 0; }
.gcl-page .gcl-prose { min-width: 0; max-width: 720px; }

/* Table of contents (desktop): sticky below the header, scrolls itself when taller than the viewport */
.gcl-page .gcl-toc { position: sticky; top: calc(var(--g-header-height) + 24px); max-height: calc(100vh - var(--g-header-height) - 48px); overflow-y: auto; overscroll-behavior: contain; padding: 2px 4px 2px 0; }
.admin-bar .gcl-page .gcl-toc { top: calc(var(--g-header-height) + 56px); max-height: calc(100vh - var(--g-header-height) - 80px); }
.gcl-page .gcl-toc__label { margin-bottom: 14px; font-size: 12px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--g-primary); }
.gcl-page :is(.gcl-toc,.gcl-toc-mobile__nav) ol { margin: 0; padding: 0; list-style: none; }
.gcl-page :is(.gcl-toc,.gcl-toc-mobile__nav) > ol { border-left: 1px solid var(--g-border); }
.gcl-page :is(.gcl-toc,.gcl-toc-mobile__nav) a { display: block; margin-left: -1px; padding: 7px 8px 7px 16px; border-left: 2px solid transparent; color: #3C453F; font-size: 14px; line-height: 1.4; text-decoration: none; overflow-wrap: anywhere; transition: color .2s, border-color .2s; }
.gcl-page :is(.gcl-toc,.gcl-toc-mobile__nav) ol ol a { padding-left: 30px; font-size: 13.5px; color: #4A534D; }
.gcl-page :is(.gcl-toc,.gcl-toc-mobile__nav) a:hover { border-left-color: rgba(0,75,72,.35); color: var(--g-dark); }
.gcl-page :is(.gcl-toc,.gcl-toc-mobile__nav) a[aria-current] { border-left-color: var(--g-primary); color: var(--g-dark); font-weight: 700; }
.gcl-page :is(.gcl-toc,.gcl-toc-mobile__nav) a:focus-visible { outline-offset: -2px; }

/* Table of contents (mobile and tablet): native disclosure above the document */
.gcl-page .gcl-toc-mobile { display: none; margin-bottom: clamp(24px,4vw,36px); border: 1px solid var(--g-border); border-radius: 3px; background: var(--g-surface-2); }
.gcl-page .gcl-toc-mobile summary { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 48px; padding: 0 16px; color: var(--g-dark); font-size: 12px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; list-style: none; cursor: pointer; }
.gcl-page .gcl-toc-mobile summary::-webkit-details-marker { display: none; }
.gcl-page .gcl-toc-mobile summary::after { content: ""; flex: none; width: 8px; height: 8px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .2s; }
.gcl-page .gcl-toc-mobile[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.gcl-page .gcl-toc-mobile summary:focus-visible { outline-offset: -2px; }
.gcl-page .gcl-toc-mobile__nav { padding: 12px 16px 16px; border-top: 1px solid var(--g-border); }

/* Document typography (sizes, colours, borders) */
.gcl-page .gcl-prose { font-size: clamp(16px,1.1vw,17.5px); line-height: 1.7; color: var(--g-text); overflow-wrap: anywhere; }
.gcl-page .gcl-prose :is(h1,h2,h3,h4,h5,h6) { font-family: var(--g-font-heading); color: var(--g-dark); overflow-wrap: break-word; }
.gcl-page .gcl-prose :is(h1,h2) { font-weight: 500; font-size: clamp(24px,2.4vw,32px); line-height: 1.15; letter-spacing: -.01em; }
.gcl-page .gcl-prose h3 { font-weight: 600; font-size: clamp(19px,1.6vw,22px); line-height: 1.25; }
.gcl-page .gcl-prose h4 { font-weight: 600; font-size: 18px; line-height: 1.3; }
.gcl-page .gcl-prose h5 { font-weight: 700; font-size: 16px; line-height: 1.4; }
.gcl-page .gcl-prose h6 { font-weight: 700; font-size: 13px; line-height: 1.4; letter-spacing: .1em; text-transform: uppercase; }
.gcl-page .gcl-prose .gcl-empty-heading { display: none; } /* Headings without text: no visual gap, not announced. */
.gcl-page .gcl-prose :is(strong,b) { font-weight: 700; }
.gcl-page .gcl-prose a { color: var(--g-primary); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.gcl-page .gcl-prose a:hover { color: var(--g-primary-hover); text-decoration-thickness: 2px; }
.gcl-page .gcl-prose li::marker { color: var(--g-primary); }
.gcl-page .gcl-prose dt { font-weight: 700; color: var(--g-dark); }
.gcl-page .gcl-prose blockquote { border-left: 3px solid var(--g-primary); border-radius: 0 3px 3px 0; background: var(--g-surface-2); color: var(--g-dark); }
.gcl-page .gcl-prose blockquote :is(cite,footer) { display: block; font-size: 13.5px; font-style: normal; color: var(--g-text-muted); }
.gcl-page .gcl-prose :is(hr,.wp-block-separator) { height: 0; border: 0; border-top: 1px solid var(--g-border); background: none; opacity: 1; }
.gcl-page .gcl-prose :is(code,kbd) { padding: .1em .35em; border-radius: 2px; background: var(--g-surface-2); font-size: .9em; }
.gcl-page .gcl-prose pre { max-width: 100%; overflow-x: auto; border-radius: 3px; background: var(--g-surface-2); font-size: 14px; overflow-wrap: normal; }
.gcl-page .gcl-prose pre code { padding: 0; background: none; }

/* Document rhythm, at any depth. Specificity is one element (0,0,1): enough to follow global.css's
 * "h1–h4, p { margin: 0 }" (this file loads after it), and below every editor/block class (0,1,0) and inline
 * style. First elements get no top space; nothing adds space below the last element. Headings with visible
 * content before them (.gcl-after-content, set when the page renders) open their section with more space. */
:where(.gcl-page .gcl-prose) :is(h1,h2,h3,h4,h5,h6,p,ul,ol,dl,dd,figure,blockquote,pre,hr,table,address,details) { margin: 0; }
:where(.gcl-page .gcl-prose) :where(*) + :is(p,div,section,article,ul,ol,dl,figure,blockquote,pre,table,address,details,form,iframe,video) { margin-block-start: 1.15em; }
:where(.gcl-page .gcl-prose) :is(ul,ol) { padding-inline-start: 1.5em; }
:where(.gcl-page .gcl-prose) :is(li) { padding-inline-start: .25em; }
:where(.gcl-page .gcl-prose) :where(li) + :is(li), :where(.gcl-page .gcl-prose) :where(li) > :is(ul,ol) { margin-block-start: .5em; }
:where(.gcl-page .gcl-prose) :where(dt) + :is(dd) { margin-block-start: .25em; margin-inline-start: 1.5em; }
:where(.gcl-page .gcl-prose) :where(dd) + :is(dt) { margin-block-start: .9em; }
:where(.gcl-page .gcl-prose) :is(blockquote) { padding: 20px 24px; }
:where(.gcl-page .gcl-prose) :is(pre) { padding: 16px; }
:where(.gcl-page .gcl-prose) :where(*) + :is(figure,blockquote,pre), :where(.gcl-page .gcl-prose) :where(*) + div:where(.gcl-table),
:where(.gcl-page .gcl-prose) :where(figure,blockquote,pre,.gcl-table) + :is(p,div,section,article,ul,ol,dl,figure,blockquote,pre,table,address,details,form,iframe,video,h1,h2,h3,h4,h5,h6) { margin-block-start: 1.6em; }
:where(.gcl-page .gcl-prose) :is(hr) { margin-block: 2.4em; clear: both; }
:where(.gcl-page .gcl-prose) :is(h1,h2):where(.gcl-after-content) { margin-block-start: 2.6em; padding-block-start: 1.3em; border-top: 1px solid var(--g-border); clear: both; }
:where(.gcl-page .gcl-prose) h3:where(.gcl-after-content) { margin-block-start: 2em; }
:where(.gcl-page .gcl-prose) h4:where(.gcl-after-content) { margin-block-start: 1.75em; }
:where(.gcl-page .gcl-prose) :is(h5,h6):where(.gcl-after-content) { margin-block-start: 1.5em; }
:where(.gcl-page .gcl-prose) :where(h1,h2,h3,h4,h5,h6):where(:not(.gcl-empty-heading)) + :is(p,div,section,article,ul,ol,dl,figure,blockquote,pre,table,address,details,form,iframe,video,h3,h4,h5,h6) { margin-block-start: .65em; }
:where(.gcl-page .gcl-prose) :where(hr) + :is(h1,h2) { margin-block-start: 0; padding-block-start: 0; border-top: 0; }
/* Classic Editor blank lines (paragraphs holding only &nbsp;) stay one line of deliberate space. */
:where(.gcl-page .gcl-prose) p:where(.gcl-blank) { margin-block-start: 0; }
/* Spacer blocks: their height is the whole gap the editor chose. */
:where(.gcl-page .gcl-prose) div:where(.wp-block-spacer), :where(.gcl-page .gcl-prose) :where(.wp-block-spacer) + :is(p,div,section,article,ul,ol,dl,figure,blockquote,pre,table,address,details,form,iframe,video,h1,h2,h3,h4,h5,h6) { margin-block-start: 0; }

/* Media: images, captions (block and classic [caption]) and embeds stay within the column */
.gcl-page .gcl-prose :is(img,video,iframe,embed,object) { max-width: 100%; height: auto; }
.gcl-page .gcl-prose :is(figure,.wp-caption) { max-width: 100%; }
.gcl-page .gcl-prose :is(figcaption,.wp-caption-text) { margin-top: 8px; font-size: 13.5px; line-height: 1.5; color: var(--g-text-muted); }
.gcl-page .gcl-prose :is(.alignwide,.alignfull) { width: auto; max-width: 100%; margin-inline: 0; }
.gcl-page .gcl-prose .aligncenter { margin-inline: auto; }
.gcl-page .gcl-prose .aligncenter img { margin-inline: auto; }
@media (min-width: 600px) {
	.gcl-page .gcl-prose .alignleft { float: left; max-width: 50%; margin: .3em 1.5em 1em 0; }
	.gcl-page .gcl-prose .alignright { float: right; max-width: 50%; margin: .3em 0 1em 1.5em; }
	.gcl-page .gcl-prose::after { content: ""; display: table; clear: both; }
}

/* Tables scroll inside their labelled region, never the page */
.gcl-page .gcl-prose .wp-block-table { overflow-x: visible; }
.gcl-page .gcl-prose .gcl-table { max-width: 100%; overflow-x: auto; border: 1px solid var(--g-border); border-radius: 3px; }
.gcl-page .gcl-prose .gcl-table:focus-visible { outline-offset: 2px; }
.gcl-page .gcl-prose table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.5; overflow-wrap: normal; }
.gcl-page .gcl-prose :is(th,td) { min-width: 8em; padding: 12px 14px; border: 0; border-bottom: 1px solid var(--g-border); text-align: left; vertical-align: top; }
.gcl-page .gcl-prose :is(th,td) + :is(th,td) { border-left: 1px solid var(--g-border); }
.gcl-page .gcl-prose tr:last-child > :is(th,td) { border-bottom: 0; }
.gcl-page .gcl-prose :is(thead,tfoot) :is(th,td), .gcl-page .gcl-prose th { background: var(--g-surface-2); font-weight: 700; color: var(--g-dark); }
.gcl-page .gcl-prose thead :is(th,td) { border-bottom: 1px solid var(--g-border); }
.gcl-page .gcl-prose caption { padding: 10px 14px; caption-side: top; text-align: left; font-size: 13.5px; color: var(--g-text-muted); }

/* Multi-page content (<!--nextpage-->) and password-protected pages */
.gcl-page .gcl-pages { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 2.4em; padding-top: 1.4em; border-top: 1px solid var(--g-border); font-size: 14px; }
.gcl-page .gcl-pages > span { margin-right: 4px; font-weight: 700; color: var(--g-dark); }
.gcl-page .gcl-pages a, .gcl-page .gcl-pages .post-page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 10px; border: 1px solid rgba(0,75,72,.3); border-radius: 2px; text-decoration: none; }
.gcl-page .gcl-pages .current { border-color: var(--g-dark); background: var(--g-dark); color: #FFFFFF; }
.gcl-page .post-password-form input[type="password"] { height: 46px; padding: 0 12px; border: 1px solid rgba(0,75,72,.3); border-radius: 2px; }
.gcl-page .post-password-form input[type="submit"] { height: 46px; padding: 0 20px; border: 0; border-radius: 2px; background: var(--g-primary); color: #FFFFFF; font-weight: 700; cursor: pointer; }

/* Tablet and mobile: one column, the TOC becomes a disclosure above the document (theme breakpoint 1023px) */
@media (max-width: 1023px) {
	.gcl-page .gcl-article--toc .gcl-hero .gcl-column, .gcl-page .gcl-article--toc .gcl-layout { max-width: 720px; }
	.gcl-page .gcl-article--toc .gcl-layout { display: block; }
	.gcl-page .gcl-aside { display: none; }
	.gcl-page .gcl-toc-mobile { display: block; }
}
@media (prefers-reduced-motion: reduce) {
	.gcl-page * { transition: none; }
}
@media print {
	.gcl-page .gcl-hero { background: none; }
	.gcl-page :is(.gcl-aside,.gcl-toc-mobile) { display: none; }
	.gcl-page .gcl-article--toc .gcl-layout { display: block; }
	.gcl-page .gcl-prose a::after { content: " (" attr(href) ")"; font-size: .85em; }
}