/**
 * Utility classes — small, single-purpose helpers usable in any template.
 * Depends on tokens in assets/css/base/variables.css (loaded before this
 * file — see functions.php enqueue order).
 *
 * Note: `_s` (the parent starter theme) already ships some accessibility/
 * alignment utilities in the theme's original style.css (.screen-reader-text,
 * .alignleft/.alignright/.aligncenter, .sticky, .bypostauthor) — those are
 * NOT duplicated here. This file only adds new helpers Design Refrance's
 * layout patterns will need.
 */

/* Layout container — caps width at the confirmed 1440px canvas (TSI Style
   Guide.html: "Content max-width 1440px"). Gutters confirmed from the same
   doc: "page gutters are 56px desktop / 16px mobile". */
.container {
	width: 100%;
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--gutter-desktop);
}

@media (max-width: 768px) {
	.container {
		padding-inline: var(--gutter-mobile);
	}
}

/* Layout-level content cap — `<main id="primary" class="site-main">` is
   the one universal wrapper EVERY template shares (front-page.php,
   single.php, page.php, page-contact.php, legal-document.php,
   simple-hero-page.php, category/tag/search via listing.php...), so
   capping it here, once, guarantees any current or future page respects
   the site's max-width instead of needing every individual page template
   to remember to add its own cap. No side padding added here — each
   template's own inner section already owns its own horizontal padding,
   so this only adds the width cap + centering on top of that, and is a
   harmless no-op (same value) on pages whose inner content is already
   individually capped (homepage sections, .cat-shell, .art-shell, etc). */
.site-main {
	max-width: var(--container-max);
	margin-inline: auto;
}

/* Sticky footer, tablet/desktop only (explicitly NOT mobile) — main-height.js
   keeps --chrome-height in sync with the real, current combined height of
   the announcement bar + header + footer. min-height (not max-height/
   height) so a short page's footer sits flush at the bottom without ever
   clipping or forcing an inner scrollbar on a normal, taller page — this
   only ever pushes content down to fill the viewport, never shrinks it. */
@media (min-width: 769px) {
	.site-main {
		min-height: calc(100vh - var(--chrome-height, 0px));
	}
}

/* Section vertical spacing — confirmed from TSI Style Guide.html:
   "Section padding runs 56–72px". Apply to any <section>-level wrapper so
   spacing stays consistent and centrally adjustable via the scale. */
.section-spacing        { padding-block: var(--space-5); } /* 56px — style guide default */
.section-spacing--sm     { padding-block: var(--space-4); } /* 40px — below the confirmed 56–72px range, for tighter cases */
.section-spacing--lg     { padding-block: var(--space-6); } /* 72px — style guide's upper bound */

/* Flex helpers */
.flex        { display: flex; }
.flex-col    { display: flex; flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-1 { gap: var(--space-1); }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }

/* Text alignment */
.text-center { text-align: center; }
.text-left   { text-align: left; }
.text-right  { text-align: right; }

/* Visually hidden but accessible (distinct from _s's .screen-reader-text
   only in naming — kept for parity with common utility-class conventions
   used elsewhere in the project; functionally identical) */
.visually-hidden {
	position: absolute !important;
	width: 1px; height: 1px;
	margin: -1px; padding: 0; border: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
}