/**
 * Base styles: reset, document defaults, layout primitives.
 *
 * Section 1 is a direct port of the Shopify theme's assets/critical.css, which
 * is itself based on Josh Comeau's custom CSS reset. Keeping it identical is
 * what makes the ported components land pixel-for-pixel.
 *
 * Sections 5 and 6 add the classes WordPress itself emits (alignment, captions,
 * galleries, screen-reader text). Underscores used to provide these from
 * style.css; that file is now header-only, so they live here.
 *
 * Depends on tokens.css.
 *
 * @package maaz-dev
 */

/* ==========================================================================
   1. RESET -- ported from Shopify assets/critical.css
   ========================================================================== */

*,
*::before,
*::after {
	box-sizing: border-box;
}

* {
	margin: 0;
}

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

body {
	display: flex;
	flex-direction: column;
	margin: 0;
	min-height: 100svh;
	overflow-x: hidden;
}

/* The Shopify theme locks scroll behind open dialogs. WordPress equivalent:
   a body class toggled by our own drawer / modal JavaScript in Phase 1. */
html:has(dialog[scroll-lock][open], details[scroll-lock][open]),
body.rlr-scroll-locked {
	overflow: hidden;
}

img,
picture,
video,
canvas,
svg {
	display: block;
	max-width: 100%;
	height: auto;
}

input,
textarea,
select {
	font: inherit;
	border-radius: var(--rlr-radius-sm);
}

select {
	background-color: var(--rlr-color-bg);
	color: currentcolor;
}

button {
	font: inherit;
	color: inherit;
}

dialog {
	background-color: var(--rlr-color-bg);
	color: var(--rlr-color-heading);
}

p {
	text-wrap: pretty;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
	overflow-wrap: break-word;
}

p:empty {
	display: none;
}

:is(p, h1, h2, h3, h4, h5, h6):first-child,
:empty:first-child + :where(p, h1, h2, h3, h4, h5, h6) {
	margin-block-start: 0;
}

:is(p, h1, h2, h3, h4, h5, h6):last-child,
:where(p, h1, h2, h3, h4, h5, h6) + :has(+ :empty:last-child) {
	margin-block-end: 0;
}

/* ==========================================================================
   2. DOCUMENT DEFAULTS
   ========================================================================== */

body {
	font-family: var(--rlr-font);
	font-size: var(--rlr-fs-15);
	font-weight: var(--rlr-fw-regular);
	line-height: var(--rlr-lh-body);
	background-color: var(--rlr-color-bg);
	color: var(--rlr-color-body);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--rlr-font-heading);
	font-weight: var(--rlr-fw-bold);
	line-height: var(--rlr-lh-heading);
	color: var(--rlr-color-heading);
}

h1 {
	font-size: var(--rlr-fs-h1);
	line-height: var(--rlr-lh-tight);
}

h2 {
	font-size: var(--rlr-fs-h2);
}

h3 {
	font-size: var(--rlr-fs-h3);
}

h4 {
	font-size: var(--rlr-fs-h4);
}

h5 {
	font-size: var(--rlr-fs-h5);
}

h6 {
	font-size: var(--rlr-fs-16);
}

a {
	color: var(--rlr-color-link);
	text-decoration: none;
	transition: color var(--rlr-transition);
}

a:hover,
a:focus {
	color: var(--rlr-color-accent-hover);
}

/* WordPress content links keep an underline so prose stays scannable. */
.entry-content a:not([class]) {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

strong,
b {
	font-weight: var(--rlr-fw-bold);
}

hr {
	border: 0;
	border-top: 1px solid var(--rlr-color-border);
	margin: var(--rlr-space-32) 0;
}

ul,
ol {
	padding-inline-start: 1.25em;
}

/* ==========================================================================
   3. FOCUS
   Visible focus ring in the brand colour. :focus-visible only, so mouse users
   never see it but keyboard users always do.
   ========================================================================== */

:focus-visible {
	outline: 2px solid var(--rlr-color-accent);
	outline-offset: 2px;
}

:focus:not(:focus-visible) {
	outline: none;
}

/* ==========================================================================
   4. LAYOUT PRIMITIVES
   Replaces the Shopify .shopify-section grid. Any full-bleed child just opts
   out with .rlr-full-width instead of fighting the container.
   ========================================================================== */

.rlr-container {
	width: 100%;
	max-width: var(--rlr-page-width);
	margin-inline: auto;
	padding-inline: var(--rlr-gutter);
}

.rlr-container--prose {
	max-width: var(--rlr-width-prose);
}

.rlr-container--narrow {
	max-width: var(--rlr-width-sm);
}

.rlr-section {
	padding-block: var(--rlr-section-py);
}

.rlr-section--lg {
	padding-block: var(--rlr-section-py-lg);
}

.rlr-section--sm {
	padding-block: var(--rlr-section-py-sm);
}

/* Background rhythm helpers, matching the homepage alternation. */
.rlr-section--white {
	background-color: var(--rlr-surface);
}

.rlr-section--grey {
	background-color: var(--rlr-surface-100);
}

.rlr-section--offwhite {
	background-color: var(--rlr-surface-50);
}

.rlr-section--dark {
	background-color: var(--rlr-dark-bg);
	color: var(--rlr-dark-text);
}

.rlr-section--dark :is(h1, h2, h3, h4, h5, h6) {
	color: var(--rlr-dark-title);
}

.rlr-full-width {
	width: 100vw;
	margin-inline: calc(50% - 50vw);
}

/* The eyebrow label that sits above nearly every section heading. */
.rlr-eyebrow {
	display: block;
	font-size: var(--rlr-fs-11);
	font-weight: var(--rlr-fw-bold);
	letter-spacing: var(--rlr-ls-eyebrow);
	line-height: var(--rlr-lh-none);
	text-transform: uppercase;
	color: var(--rlr-color-accent);
}

@media screen and (max-width: 768px) {

	.rlr-container {
		padding-inline: var(--rlr-page-margin);
	}

	.rlr-section {
		padding-block: var(--rlr-space-56);
	}

	.rlr-section--lg {
		padding-block: var(--rlr-space-64);
	}
}

/* ==========================================================================
   5. ACCESSIBILITY UTILITIES
   Required by WordPress and by header.php's skip link.
   ========================================================================== */

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

.screen-reader-text:focus {
	background-color: var(--rlr-surface-200);
	border-radius: var(--rlr-radius-xs);
	box-shadow: var(--rlr-shadow-dark);
	clip-path: none;
	color: var(--rlr-ink);
	display: block;
	font-size: var(--rlr-fs-14);
	font-weight: var(--rlr-fw-bold);
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: var(--rlr-z-top);
}

/* Skip link target must not be hidden behind the sticky header. */
#primary[tabindex="-1"]:focus {
	outline: 0;
}

/* ==========================================================================
   6. WORDPRESS CORE CLASSES
   WordPress emits these in post content and widget markup; a theme has to
   style them or content breaks.
   ========================================================================== */

.alignleft {
	float: left;
	margin-inline-end: var(--rlr-space-24);
	margin-block-end: var(--rlr-space-16);
}

.alignright {
	float: right;
	margin-inline-start: var(--rlr-space-24);
	margin-block-end: var(--rlr-space-16);
}

.aligncenter {
	clear: both;
	display: block;
	margin-inline: auto;
	margin-block-end: var(--rlr-space-16);
}

.alignwide {
	max-width: var(--rlr-width-xl);
	margin-inline: auto;
}

.alignfull {
	width: 100vw;
	max-width: 100vw;
	margin-inline: calc(50% - 50vw);
}

.wp-caption {
	max-width: 100%;
	margin-block-end: var(--rlr-space-16);
}

.wp-caption-text,
.gallery-caption {
	font-size: var(--rlr-fs-13);
	color: var(--rlr-text-soft);
	text-align: center;
	margin-block-start: var(--rlr-space-8);
}

.sticky {
	display: block;
}

.bypostauthor {
	display: block;
}

.clearfix::after {
	content: "";
	display: table;
	clear: both;
}

/* ==========================================================================
   7. REDUCED MOTION
   The Shopify theme honours this in four places; enforce it globally instead.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}