/**
 * Modularis - base layer
 *
 * Element-level rules and layout helpers. Everything here reads from the
 * generated token variables; there is not a single literal color in this file.
 *
 * Ported from: Modularis_Landing_Page__standalone_B-Version__4_.html
 */

/* ---------------------------------------------------------------- Elements */

img,
svg,
video {
	display: block;
	max-width: 100%;
}

::selection {
	background: var(--primary);
	color: var(--bg);
}

/* Keyboard focus is never removed, only restyled to match the brand. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--primary);
	outline-offset: 3px;
}

/* --------------------------------------------------------- Layout helpers */

/**
 * Top-level blocks are spaced by the global blockGap, via core's
 * `:where(.wp-site-blocks) > * { margin-block-start: ... }`. The header part is
 * the first child so it escapes that rule, but <main> does not, which leaves a
 * band of page background between the header and the first section.
 *
 * Sections own their own vertical rhythm (.section-pad, and the hero's own
 * padding), so main needs no leading margin. Core's selector is :where()-
 * wrapped and therefore has no specificity - a single class overrides it.
 */
.wp-site-blocks > main {
	margin-block-start: 0;
}

/**
 * The same rule catches the header as soon as anything sits above it - the
 * front page's announcement ribbon, for one. As the first child the header
 * escaped core's blockGap; as the second it inherits 22px of page background
 * between the ribbon and the nav, which reads as a mistake because it is one.
 */
.wp-site-blocks > header.wp-block-template-part {
	margin-block-start: 0;
}

/**
 * page.html pads <main> with .section-pad, which is right for a page of plain
 * content but doubles up on a page built from full-bleed patterns: every
 * section already carries that same padding, so the first one starts a second
 * helping of it below the header.
 *
 * The guard is `.entry-content:first-child`: when a post title sits above the
 * content, that top padding is what keeps the title clear of the sticky header,
 * so it only drops when the content is the first thing in main.
 */
main.section-pad:has(> .entry-content:first-child > .alignfull:first-child) {
	padding-block-start: 0;
}

/**
 * Safety net for a page built from full-bleed sections whose Post Content block
 * was never set to full width.
 *
 * When it is not, the content wrapper is capped at contentSize and centred, and
 * core then zeroes the bleed on every .alignfull section inside it - so a
 * hero, an announcement bar and a banded section all stop at 1280px on a page
 * that was designed edge to edge. The fix belongs in the template (set the Post
 * Content block to Full width, or use the "Full width, no title" template), but
 * templates live in the database once they have been edited, and a page should
 * not look broken while that is outstanding.
 *
 * These two declarations are what core's own `align: full` does: drop the cap,
 * then pull back out through the root padding. `:not(.alignfull)` means the rule
 * stops applying the moment the template is fixed properly, so the two can
 * never fight.
 *
 * The margins need !important because core's centring rule carries it, and
 * !important beats specificity no matter how many classes are stacked up here.
 */
main > .entry-content:not(.alignfull):has(> .alignfull) {
	max-width: none;
	margin-inline:
		calc(var(--wp--style--root--padding-left) * -1)
		calc(var(--wp--style--root--padding-right) * -1) !important;
}

/**
 * .wrap
 *
 * The prototype's container. In a block theme most sections use core's
 * constrained layout instead, but patterns that need the exact prototype
 * measure (e.g. the nav, which sits outside the layout system) use this.
 */
.wrap {
	width: 100%;
	max-width: var(--maxw);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

/* Section rhythm, applied via a class so it can be shared by patterns and
   custom blocks without duplicating the clamp. */
.section-pad {
	padding-block: var(--section-pad);
}

.section-pad--xl {
	padding-block: var(--wp--custom--rhythm--section-pad-xl);
}

.section-pad--cta {
	padding-block: var(--wp--custom--rhythm--section-pad-cta);
}

/**
 * .section-head
 *
 * Eyebrow + heading + lead, capped at a readable measure and separated from
 * the content below by the shared head gap.
 */
.section-head {
	max-width: 720px;
	margin-bottom: var(--wp--custom--rhythm--head-gap);
}

/**
 * --column-inset
 *
 * The gap between a container's own content box and the content column its
 * ordinary children sit in. Core caps those children at contentSize and centres
 * them with `margin-left/right: auto !important`, so in a full-bleed section -
 * viewport minus the root gutter, which is wider than contentSize on any large
 * screen - every card, table and column starts this far in from the section's
 * padding edge.
 *
 * Anything that opts out of the auto margins has to add that offset back or it
 * hangs off the left of everything below it. The percentage resolves against
 * whatever element uses the variable, and max() floors it at zero for the
 * containers that are already narrower than the column.
 */
:root {
	--column-inset: max(0px, (100% - var(--wp--style--global--content-size)) / 2);
}

/**
 * The same story as .is-style-lead in components.css: a head capped at 720px
 * would otherwise be centred in the column, sitting ~280px in from the edge the
 * cards, grids and tracks below it start on. Start-aligning it is only half the
 * job - it has to start at the column, not at the section padding.
 *
 * Compounded to two classes so it beats core's rule on specificity rather than
 * on which stylesheet happens to be printed last. .section-head is only ever
 * used on a group, so nothing is excluded by naming the block class.
 */
.wp-block-group.section-head {
	margin-inline-start: var(--column-inset) !important;
}

/**
 * ...unless it has been set to full width in the editor, which is an explicit
 * instruction to ignore the measure. The cap and the column alignment above
 * both have to be undone: the margin with !important, because the rule it is
 * beating carries it, and with the same negative values core gives any other
 * full-bleed block so the two agree.
 *
 * The padding is not optional. A flow group gets no `has-global-padding` from
 * core - only constrained containers do - so without it the copy runs to the
 * viewport edges the moment the background is full-bleed.
 */
.wp-block-group.section-head.alignfull {
	max-width: none;
	margin-inline:
		calc(var(--wp--style--root--padding-left) * -1)
		calc(var(--wp--style--root--padding-right) * -1) !important;
	padding-inline: var(--gutter);
}

/* ------------------------------------------------------------- Type scale */

/**
 * Display and section headings are set as classes as well as element styles.
 * theme.json handles h1/h2 defaults; these let a pattern promote an h2 to
 * display scale without lying about document outline order.
 */
.h-display {
	font-family: var(--display);
	font-size: var(--wp--preset--font-size--h-display);
	font-weight: 600;
	letter-spacing: var(--wp--custom--tracking--display);
	line-height: var(--wp--custom--leading--display);
}

.h-section {
	font-family: var(--display);
	font-size: var(--wp--preset--font-size--h-section);
	font-weight: 600;
	letter-spacing: -0.03em;
	line-height: 1;
}

.h-mega {
	font-family: var(--display);
	font-size: var(--wp--preset--font-size--h-mega);
	font-weight: 700;
	letter-spacing: var(--wp--custom--tracking--mega);
	line-height: var(--wp--custom--leading--mega);
}

/* Semantic text colors, exposed as utilities for inline emphasis. */
.text-primary { color: var(--primary); }
.text-violet  { color: var(--violet-light); }
.text-danger  { color: var(--danger-bright); }
.text-muted   { color: var(--muted); }
.text-faint   { color: var(--faint); }

/* ------------------------------------------------- Accessibility & motion */

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.skip-link:focus-visible {
	position: fixed;
	inset-block-start: 12px;
	inset-inline-start: 12px;
	z-index: 999;
	padding: 12px 18px;
	background: var(--primary);
	color: var(--bg);
	font-weight: 600;
}

/**
 * ...and exactly once, which the two rules above do not manage between them.
 *
 * THE BUG THIS FIXES: both of them pull outward by the root padding. The
 * safety net does it to the .entry-content wrapper when a page's Post Content
 * block was never set to full width; the rule above does it to the block
 * itself. On a page where both are true - a default-template page carrying a
 * .section-head.alignfull - the block is pulled out twice and ends up one
 * root-padding past each side of the viewport, which is a horizontal
 * scrollbar on an otherwise correct page.
 *
 * Only a block wearing BOTH .section-head and .alignfull can hit this. An
 * ordinary full-bleed <section> has no cap to undo, so it never got a margin
 * of its own and never doubled up.
 *
 * So: where the wrapper has already done the pull, the block does not repeat
 * it. max-width and padding-inline above still apply - it is only the margin
 * that was counted twice.
 */
main > .entry-content:not(.alignfull):has(> .alignfull) > .wp-block-group.section-head.alignfull {
	margin-inline: 0 !important;
}