/*
 * Aura Site Kit: base framework
 * --------------------------------------------------------------
 * Dave Foy's type + spacing system, extended with an ACSS-style colour, border,
 * button, form and card system. Every value comes from a variable in tokens.css
 * (WP Admin → Site Kit). Template-specific CSS goes in the template's own file,
 * never here.
 *
 * Rules: Bricks holds classes only (BEM: block__element--modifier).
 * Resets use :where() so any class wins without !important.
 *
 * Everything sits in the "aura" cascade layer: above Bricks's own "bricks" layer, below the
 * styles set in the builder (unlayered). So a class styled in Bricks always wins over this
 * file, whatever its specificity. Keep Bricks's CSS cascade layer setting on.
 */

@layer aura {

	/* 1. DERIVED COLOURS ------------------------------------------------------ */
	:root {
		--primary-hover: color-mix(in oklab, var(--primary) 82%, black);
		--primary-light: color-mix(in oklab, var(--primary) 14%, white);
		--primary-ultra-light: color-mix(in oklab, var(--primary) 6%, white);
		--primary-dark: color-mix(in oklab, var(--primary) 65%, black);
		--primary-trans-10: color-mix(in srgb, var(--primary) 10%, transparent);
		--primary-trans-20: color-mix(in srgb, var(--primary) 20%, transparent);
		--primary-trans-50: color-mix(in srgb, var(--primary) 50%, transparent);

		--secondary-hover: color-mix(in oklab, var(--secondary) 82%, black);
		--secondary-light: color-mix(in oklab, var(--secondary) 14%, white);
		--secondary-ultra-light: color-mix(in oklab, var(--secondary) 6%, white);
		--secondary-dark: color-mix(in oklab, var(--secondary) 65%, black);
		--secondary-trans-10: color-mix(in srgb, var(--secondary) 10%, transparent);
		--secondary-trans-20: color-mix(in srgb, var(--secondary) 20%, transparent);
		--secondary-trans-50: color-mix(in srgb, var(--secondary) 50%, transparent);

		--accent-hover: color-mix(in oklab, var(--accent) 82%, black);
		--accent-light: color-mix(in oklab, var(--accent) 16%, white);
		--accent-dark: color-mix(in oklab, var(--accent) 65%, black);
		--accent-trans-20: color-mix(in srgb, var(--accent) 20%, transparent);

		--border-light: var(--border-width) var(--border-style) color-mix(in oklab, var(--border-color) 55%, white);
		--border-dark: var(--border-width) var(--border-style) color-mix(in oklab, var(--border-color) 70%, black);

		--success-light: color-mix(in oklab, var(--success) 12%, white);
		--warning-light: color-mix(in oklab, var(--warning) 12%, white);
		--error-light: color-mix(in oklab, var(--error) 10%, white);
		--info-light: color-mix(in oklab, var(--info) 10%, white);

		--overlay: color-mix(in srgb, var(--bg-dark) 55%, transparent);
		--transition: var(--duration) var(--easing);
	}

	/* 2. BASE ------------------------------------------------------------------ */
	html {
		font-size: 100%;
		scroll-padding-top: calc(var(--header-height) + 1rem);
		-webkit-text-size-adjust: 100%;
	}

	body {
		font-family: var(--font-body);
		font-weight: var(--body-weight);
		line-height: var(--body-line-height);
		color: var(--text-color);
		background-color: var(--bg);
		text-rendering: optimizeLegibility;
		-webkit-font-smoothing: antialiased;
	}

	:where(img, picture, video, svg) {
		max-inline-size: 100%;
		block-size: auto;
	}

	:where(.brxe-image img, figure img, .brxe-post-content img, .brxe-text img) {
		border-radius: var(--image-radius);
	}

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

	:where(a) {
		color: var(--link);
		text-underline-offset: 0.18em;
		transition: color var(--transition);
	}

	:where(a:hover) {
		color: var(--primary-hover);
	}

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

	hr {
		border: 0;
		border-top: var(--border);
	}

	/* 3. TYPOGRAPHY (Dave Foy scale, fluid values from tokens) ------------------ */
	body,
	.text-m {
		font-size: var(--text-m);
	}

	.text-xxl { font-size: var(--text-xxl); line-height: 1.3; }
	.text-xl { font-size: var(--text-xl); line-height: 1.4; }
	.text-l { font-size: var(--text-l); line-height: 1.5; }
	.text-m { line-height: var(--body-line-height); }
	.text-s { font-size: var(--text-s); line-height: 1.6; }
	.text-xs { font-size: var(--text-xs); line-height: 1.7; }

	:where(h1, h2, h3, h4, h5, h6),
	.h1, .h2, .h3, .h4, .h5, .h6, .h-title {
		font-family: var(--font-heading);
		font-weight: var(--heading-weight);
		color: var(--heading-color);
		letter-spacing: var(--heading-tracking);
		text-transform: var(--heading-transform);
		text-wrap: balance;
	}

	.h-title { font-size: var(--h-title); line-height: 1.05; }
	h1, .h1 { font-size: var(--h1); line-height: 1.1; }
	h2, .h2 { font-size: var(--h2); line-height: 1.2; }
	h3, .h3 { font-size: var(--h3); line-height: 1.3; }
	h4, .h4 { font-size: var(--h4); line-height: 1.4; }
	h5, .h5 { font-size: var(--h5); line-height: 1.5; }
	h6, .h6 { font-size: var(--h6); line-height: 1.6; }

	.font-accent { font-family: var(--font-accent); }
	.font-heading { font-family: var(--font-heading); }
	.text-length { max-inline-size: var(--text-length); }
	.text-muted { color: var(--text-muted); }
	.text-primary { color: var(--primary); }
	.text-balance { text-wrap: balance; }

	.eyebrow {
		font-size: var(--text-s);
		font-weight: 600;
		letter-spacing: 0.08em;
		text-transform: uppercase;
		color: var(--primary);
	}

	/* 4. SPACING: reset, then "smart spacing" inside rich text only ------------ */
	:where(p, h1, h2, h3, h4, h5, h6, ul, ol, dl, figure, blockquote) {
		margin: 0;
	}

	:where(.brxe-text, .brxe-post-content, .aura-prose, .woocommerce-product-details__short-description, .woocommerce-Tabs-panel) > * + * {
		margin-block-start: 1em;
	}

	:where(.brxe-text, .brxe-post-content, .aura-prose) > * + :is(h2, h3, h4, h5, h6) {
		margin-block-start: 1.5em;
	}

	:where(.brxe-text, .brxe-post-content, .aura-prose) :is(ul, ol) {
		padding-inline-start: 1.25em;
	}

	:where(.brxe-text, .brxe-post-content, .aura-prose) li + li {
		margin-block-start: 0.4em;
	}

	/* H2s inside rich text and blog posts are one size smaller (Dave Foy). */
	:where(.brxe-text, .brxe-post-content) h2 {
		font-size: var(--h3);
	}

	/* 5. LAYOUT ------------------------------------------------------------------ */
	.brxe-section,
	.section-m {
		padding-block: var(--section-m);
		padding-inline: var(--gutter);
		row-gap: var(--container-gap);
	}

	.section-xl { padding-block: var(--section-xl); }
	.section-l { padding-block: var(--section-l); }
	.section-s { padding-block: var(--section-s); }
	.section-xs { padding-block: var(--section-xs); }
	.section-xxs { padding-block: var(--section-xxs); }
	.section-xxxs { padding-block: var(--section-xxxs); }
	.section-none { padding-block: 0; }

	.brxe-container {
		width: var(--content-width);
		max-width: 100%;
	}

	.container--narrow { width: var(--narrow-width); }
	.container--wide { width: var(--wide-width); }

	.content-gap { gap: var(--content-gap); }
	.content-gap-s { gap: calc(var(--content-gap) / 1.5); }
	.grid-gap { gap: var(--grid-gap); }
	.container-gap { gap: var(--container-gap); }

	.gap-xxxs { gap: var(--gap-xxxs); }
	.gap-xxs { gap: var(--gap-xxs); }
	.gap-xs { gap: var(--gap-xs); }
	.gap-s { gap: var(--gap-s); }
	.gap-m { gap: var(--gap-m); }
	.gap-l { gap: var(--gap-l); }
	.gap-xl { gap: var(--gap-xl); }

	/* Auto grids: columns that wrap by themselves. */
	.grid-auto-2, .grid-auto-3, .grid-auto-4 {
		display: grid;
		gap: var(--grid-gap);
	}
	.grid-auto-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
	.grid-auto-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
	.grid-auto-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }

	/* 6. SURFACES ---------------------------------------------------------------- */
	.bg-light { background-color: var(--bg-light); }
	.bg-primary { background-color: var(--primary); color: var(--on-primary); }
	.bg-secondary { background-color: var(--secondary); color: var(--on-secondary); }
	.bg-dark { background-color: var(--bg-dark); color: var(--on-bg-dark); }

	:is(.bg-primary, .bg-secondary, .bg-dark) :where(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, .h-title, a:not(.bricks-button)) {
		color: inherit;
	}

	.radius { border-radius: var(--radius); }
	.radius-l { border-radius: var(--radius-l); }
	.border { border: var(--border); border-radius: var(--radius); }
	.shadow-s { box-shadow: var(--shadow-s); }
	.shadow-m { box-shadow: var(--shadow-m); }
	.shadow-l { box-shadow: var(--shadow-l); }

	.card {
		display: flex;
		flex-direction: column;
		gap: var(--content-gap);
		padding: var(--card-padding);
		background: var(--card-bg);
		border: var(--card-border);
		border-radius: var(--radius);
		box-shadow: var(--card-shadow);
		transition: transform var(--transition), box-shadow var(--transition);
	}

	.card--hover:hover {
		transform: translateY(var(--hover-lift));
		box-shadow: var(--shadow-m);
	}

	.overlay { position: relative; isolation: isolate; }
	.overlay::before {
		content: "";
		position: absolute;
		inset: 0;
		z-index: -1;
		background: var(--overlay);
		border-radius: inherit;
	}

	/* 7. BUTTONS (Bricks, .btn and WooCommerce share one style) ----------------- */
	.bricks-button,
	.btn,
	.woocommerce :is(a.button, button.button, input.button, #respond input#submit),
	.woocommerce-page :is(a.button, button.button, input.button),
	.wc-block-components-button:not(.is-link) {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 0.5em;
		padding: var(--btn-padding);
		font-family: var(--font-body);
		font-size: var(--text-m);
		font-weight: var(--btn-weight);
		line-height: 1.2;
		letter-spacing: var(--btn-tracking);
		text-transform: var(--btn-transform);
		text-align: center;
		text-decoration: none;
		border: var(--btn-border-width) solid transparent;
		border-radius: var(--btn-radius);
		cursor: pointer;
		transition: background-color var(--transition), color var(--transition), border-color var(--transition), transform var(--transition);
	}

	/* Secondary (also every ordinary WooCommerce button). */
	.bricks-button.bricks-background-secondary,
	.btn--secondary,
	.woocommerce :is(a.button, button.button, input.button) {
		background-color: var(--secondary);
		color: var(--on-secondary);
		border-color: var(--secondary);
	}

	.bricks-button.bricks-background-secondary:hover,
	.btn--secondary:hover,
	.woocommerce :is(a.button, button.button, input.button):hover {
		background-color: var(--secondary-hover);
		border-color: var(--secondary-hover);
		color: var(--on-secondary);
	}

	/* Primary: Bricks "primary", .btn--primary and the main WooCommerce actions
	   (add to cart, checkout, place order). Comes after secondary so it wins. */
	.bricks-button.bricks-background-primary,
	.btn--primary,
	.woocommerce :is(a.button.alt, button.button.alt, input.button.alt, a.button.add_to_cart_button, button.single_add_to_cart_button, a.button.checkout-button, button[name="woocommerce_checkout_place_order"]),
	.wc-block-components-button.contained {
		background-color: var(--primary);
		color: var(--on-primary);
		border-color: var(--primary);
	}

	.bricks-button.bricks-background-primary:hover,
	.btn--primary:hover,
	.woocommerce :is(a.button.alt, button.button.alt, input.button.alt, a.button.add_to_cart_button, button.single_add_to_cart_button, a.button.checkout-button, button[name="woocommerce_checkout_place_order"]):hover {
		background-color: var(--primary-hover);
		border-color: var(--primary-hover);
		color: var(--on-primary);
	}

	/* Outline (Bricks "outline" option or .btn--outline). */
	.bricks-button.outline,
	.btn--outline {
		background-color: transparent;
		color: var(--primary);
		border-color: currentColor;
	}

	.bricks-button.outline:hover,
	.btn--outline:hover {
		background-color: var(--primary);
		border-color: var(--primary);
		color: var(--on-primary);
	}

	.bricks-button.sm, .btn--s { padding: var(--btn-padding-s); font-size: var(--text-s); }
	.bricks-button.lg, .bricks-button.xl, .btn--l { padding: var(--btn-padding-l); font-size: var(--text-l); }

	.bricks-button:disabled,
	.woocommerce .button:disabled,
	.woocommerce .button.disabled {
		opacity: 0.55;
		cursor: not-allowed;
	}

	/* 8. FORM FIELDS -------------------------------------------------------------- */
	:where(input:not([type="checkbox"], [type="radio"], [type="submit"], [type="button"], [type="reset"], [type="range"], [type="file"], [type="image"], [type="color"]), select, textarea) {
		min-block-size: var(--input-height);
		padding: var(--input-padding);
		font: inherit;
		font-size: max(16px, var(--text-m)); /* 16px+ stops iPhone zoom on focus */
		color: var(--text-color);
		background-color: var(--input-bg);
		border: var(--border-width) var(--border-style) var(--input-border);
		border-radius: var(--radius);
		transition: border-color var(--transition), box-shadow var(--transition);
	}

	:where(textarea) { min-block-size: 7rem; }

	:where(input, select, textarea):focus-visible {
		outline: none;
		border-color: var(--focus-color);
		box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus-color) 25%, transparent);
	}

	:where(input[type="checkbox"], input[type="radio"]) { accent-color: var(--primary); }
	::placeholder { color: var(--text-muted); opacity: 1; }

	/* WooCommerce's fields use their own classes; give them the same look. */
	.woocommerce form .form-row :is(.input-text, select),
	.woocommerce .select2-container .select2-selection--single {
		min-block-size: var(--input-height);
		padding: var(--input-padding);
		background-color: var(--input-bg);
		border: var(--border-width) var(--border-style) var(--input-border);
		border-radius: var(--radius);
	}

	.woocommerce .select2-container .select2-selection--single .select2-selection__rendered {
		padding: 0;
		line-height: calc(var(--input-height) - 1.4em);
	}

	.woocommerce .select2-container .select2-selection--single .select2-selection__arrow {
		block-size: 100%;
	}

	.woocommerce form .form-row label {
		font-weight: 500;
		color: var(--heading-color);
	}

	/* 9. WOOCOMMERCE ---------------------------------------------------------------- */
	.woocommerce ul.products li.product a img,
	.woocommerce div.product div.images img,
	.brxe-product-gallery img,
	.aura-product-image {
		aspect-ratio: var(--product-ratio);
		object-fit: var(--product-fit);
		inline-size: 100%;
		border-radius: var(--image-radius);
		background: var(--bg-light);
	}

	.woocommerce span.onsale,
	.brxe-product-sale-badge,
	.aura-badge--sale {
		background-color: var(--sale);
		color: var(--on-sale);
		border-radius: var(--radius-full);
		font-weight: 600;
		line-height: 1;
		min-block-size: auto;
		min-inline-size: auto;
		padding: 0.45em 0.8em;
	}

	.woocommerce :is(.price, .amount) { color: var(--heading-color); }
	.woocommerce .price del,
	.woocommerce .price del .amount { color: var(--text-muted); opacity: 1; }
	.woocommerce .price ins { text-decoration: none; }
	.woocommerce .price ins .amount { color: var(--sale); }

	.woocommerce :is(.woocommerce-message, .woocommerce-info, .woocommerce-error),
	.wc-block-components-notice-banner {
		border-radius: var(--radius);
	}

	.woocommerce .woocommerce-message { border-top-color: var(--success); }
	.woocommerce .woocommerce-info { border-top-color: var(--info); }
	.woocommerce .woocommerce-error { border-top-color: var(--error); }

	/* Simple checkout: Bangladesh is the only country, so its row is hidden. */
	.aura-checkout-simple #billing_country_field,
	.aura-hidden {
		display: none !important;
	}

	/* 10. ACCESSIBILITY AND MOTION ------------------------------------------------ */
	.visually-hidden,
	.screen-reader-text:not(:focus) {
		position: absolute !important;
		inline-size: 1px;
		block-size: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}

	@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;
		}
	}

} /* end @layer aura */