/* =========================================================================
   Chrome support for block-rendered pages (Tutor LMS, WooCommerce).

   The ported design pages load assets/css/base.css, which carries a global
   `*` reset (margin: 0; padding: 0), `ul, ol { list-style: none }` and a
   `button` reset. Loading that file here would strip the padding, margins and
   list markers off every Tutor and WooCommerce component on the page and
   flatten the checkout, so it is deliberately NOT enqueued on these pages.

   This file supplies only the pieces the BVA header and footer actually need,
   scoped to those two subtrees. Every reset is wrapped in :where() so it
   contributes zero specificity: components/header.css and components/footer.css
   always win, whatever order the browser resolves them in.
   ========================================================================= */

/* --- the base.css resets the chrome depends on, scoped and de-specified --- */
:where(.header, .footer),
:where(.header, .footer) :where(*, *::before, *::after) {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

:where(.header, .footer) :where(ul, ol) {
	list-style: none;
}

:where(.header, .footer) :where(img) {
	display: block;
	max-width: 100%;
}

/* The one reset that must NOT be fully de-specified. theme.json styles links
   with the gold accent, and that rule outranks a zero-specificity :where(a),
   so the nav and the footer links came out gold on block pages while the
   identical markup was white on the ported pages. base.css wins that contest
   with a plain `a` selector, so this matches base.css exactly rather than
   inventing a stronger selector: still below the (0,1,1) of .footer__credit a,
   which stays white with its gold hover intact. */
:where(.header, .footer) a {
	color: inherit;
	text-decoration: none;
}

:where(.header) :where(button) {
	font: inherit;
	color: inherit;
	background: none;
	border: none;
	cursor: pointer;
}

/* --- layout + typography classes the chrome markup references --- */
/* The back-link bar is chrome too, and on a Masterclass it is the only one of
   these three that base.css never reaches, so it needs the gutter from here or
   it renders flush against the viewport edge. On a Level panel the bar ships a
   .tutor-container instead and is aligned by Tutor, so it never lands here. */
.header .container,
.footer .container,
.bva-backlink-bar .container {
	width: 100%;
	max-width: var(--page-max-width);
	margin-inline: auto;
	padding-inline: var(--page-gutter);
}

.header .text-label-light,
.footer .text-label-light {
	font-family: var(--font-gotham);
	font-weight: var(--text-label-light-weight);
	font-size: var(--text-label-light-size);
	line-height: var(--text-label-light-line);
}

.footer .text-body-base {
	font-family: var(--font-gotham);
	font-weight: var(--text-body-base-weight);
	font-size: var(--text-body-base-size);
	line-height: var(--text-body-base-line);
}

.footer .text-caption-small {
	font-family: var(--font-gotham);
	font-weight: var(--text-caption-small-weight);
	font-size: var(--text-caption-small-size);
	line-height: var(--text-caption-small-line);
}

/* --- content offset --- */
/* components/header.css sets .header { position: fixed; top: 0 }, so the
   header is out of flow and the page content would start underneath it. The
   ported templates handle this with margin-top: var(--header-height) on their
   own page wrapper (page-home.css, page-level.css, page-legal.css); block
   templates have no such wrapper, so the offset goes on the block container.
   This file is only enqueued on block-rendered pages, so the rule cannot
   reach the ported templates and double up. */
.wp-site-blocks {
	padding-top: var(--header-height);
}

/* Tutor renders its own full-width wrapper flush to the viewport edges; keep
   the footer's own top spacing from collapsing against it. */
.footer {
	margin-top: var(--bva-space-64, 4rem);
}

/* Any in-page anchor, including the "Skip to content" link's target, must
   clear the fixed header or it lands 76px underneath it. base.css does this
   with [id]{scroll-margin-top} on the ported pages, but base.css is not loaded
   here (it carries the global reset), so the same offset is set for block
   pages. :where() keeps it at zero specificity. */
:where([id]) {
	scroll-margin-top: var(--header-height);
}