/*
Theme Name: DUORACKET
Description: A portable, commerce-first WordPress Block Theme for Bolsos Global B2B bags, backpacks, and luggage sourcing.
Author: DUORACKET
Version: 0.1.0
Requires at least: 6.9
Tested up to: 7.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: duoracket
Tags: block-patterns, full-site-editing, e-commerce, accessibility-ready, translation-ready
*/

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

html {
	scroll-behavior: smooth;
}

body {
	margin: 0;
	overflow-wrap: break-word;
}

.wp-site-blocks > :where(main, header, footer) {
	min-width: 0;
}

.duoracket-container,
.alignwide {
	box-sizing: border-box;
	width: min(100% - (2 * var(--wp--custom--layout--gutter, 1.5rem)), 77.5rem);
	max-width: 100%;
	margin-inline: auto;
}

.duoracket-section-heading {
	max-width: 54rem;
	margin-block-end: clamp(2rem, 4vw, 3rem);
}

.duoracket-section-heading > :first-child {
	margin-block-start: 0;
}

.duoracket-section-heading > :last-child {
	margin-block-end: 0;
}

.duoracket-text-link {
	display: inline-flex;
	gap: 0.4rem;
	align-items: center;
	color: var(--wp--preset--color--accent-dark);
	font-weight: 750;
	text-decoration: none;
}

.duoracket-text-link:hover {
	color: var(--wp--preset--color--accent);
}

.duoracket-reveal-target {
	opacity: 0;
	transform: translateY(16px);
	transition: opacity 480ms ease, transform 480ms ease;
}

.duoracket-reveal-target.is-visible {
	opacity: 1;
	transform: translateY(0);
}

img,
svg,
video {
	max-width: 100%;
	height: auto;
}

button,
input,
select,
textarea {
	font: inherit;
}

a {
	text-underline-offset: 0.18em;
	text-decoration-thickness: 0.08em;
}

[hidden] {
	display: none !important;
}

.wp-site-blocks {
	display: flex;
	min-height: 100vh;
	flex-direction: column;
}

.wp-site-blocks > main {
	flex: 1 0 auto;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

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

/* Desktop layout and type scale refinement. Keep all page structure and content intact. */
:root {
	--duoracket-wide-max: 1360px;
	--duoracket-standard-max: 1280px;
	--duoracket-reading-max: 820px;
	--duoracket-layout-gutter: 2rem;
	/* Shared layout aliases used by every page presentation. */
	--bg-wide: 1360px;
	--bg-container: 1280px;
	--bg-reading: 820px;
	--bg-gap-lg: 32px;
	--bg-gap-xl: 48px;
}

body {
	font-size: 1.0625rem;
	line-height: 1.7;
	overflow-wrap: normal;
}

:where(h1, h2, h3, h4, h5, h6, p, li, a, button) {
	word-break: normal;
	overflow-wrap: normal;
}

:where(p, li) {
	line-height: 1.7;
}

.duoracket-container,
.alignwide {
	box-sizing: border-box;
	width: min(calc(100% - (2 * var(--duoracket-layout-gutter))), var(--duoracket-wide-max));
	max-width: 100%;
	margin-inline: auto;
}

.duoracket-container {
	width: min(calc(100% - (2 * var(--duoracket-layout-gutter))), var(--duoracket-standard-max));
}

.duoracket-reading-container {
	box-sizing: border-box;
	width: min(calc(100% - (2 * var(--duoracket-layout-gutter))), var(--duoracket-reading-max));
	max-width: 100%;
	margin-inline: auto;
}

.duoracket-section-heading,
.duoracket-page-intro {
	max-width: var(--duoracket-standard-max);
}

:where(.wp-block-button__link, .wp-element-button) {
	font-size: 1rem;
	font-weight: 600;
}

@media (max-width: 74.99rem) {
	:root {
		--duoracket-layout-gutter: 1.75rem;
	}
}

@media (max-width: 63.99rem) {
	:root {
		--duoracket-layout-gutter: 1.5rem;
	}
}

@media (max-width: 47.99rem) {
	:root {
		--duoracket-layout-gutter: 1rem;
	}

	body {
		font-size: 1rem;
	}
}

/* Explicit page-level containers. These opt out of WordPress constrained flow. */
.bg-container-wide,
.bg-container,
.bg-reading {
	box-sizing: border-box;
	max-width: 100%;
	margin-inline: auto;
}

.bg-container-wide {
	width: min(1360px, calc(100% - 64px));
}

.bg-container {
	width: min(1280px, calc(100% - 64px));
}

.bg-reading {
	width: min(820px, calc(100% - 32px));
}

@media (max-width: 1024px) {
	.bg-container-wide,
	.bg-container {
		width: calc(100% - 56px);
	}
}

@media (max-width: 768px) {
	.bg-container-wide,
	.bg-container {
		width: calc(100% - 48px);
	}
}

@media (max-width: 600px) {
	.bg-container-wide,
	.bg-container {
		width: calc(100% - 32px);
	}

	.bg-reading {
		width: calc(100% - 32px);
	}
}

/* Shared page geometry. Keep section backgrounds full width while their
 * content uses one predictable left and right edge. */
.bg-container-wide,
.bg-container,
.bg-reading,
.duoracket-main > .alignwide,
.duoracket-main > .duoracket-container {
	min-width: 0;
}

.bg-container-wide > *,
.bg-container > *,
.duoracket-main > .alignwide > *,
.duoracket-main > .duoracket-container > * {
	min-width: 0;
}

/* Prevent long editor-entered strings from changing a grid's geometry. */
:where(.duoracket-main, .duoracket-site-footer, .duoracket-site-header) :where(
	.wp-block-columns,
	.wp-block-column,
	.wp-block-group,
	.wp-block-post-template,
	.wp-block-query,
	.wp-block-buttons,
	article,
	section
) {
	min-width: 0;
}

/* Final shared rhythm and overflow guardrails. Component-specific layouts
 * below may refine these values, but every action row keeps the same spacing. */
body {
	min-width: 0;
}

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

:where(.wp-block-buttons, .actions, .button-group, .cta-actions) {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	align-items: center;
}

:where(.wp-block-buttons) > .wp-block-button {
	margin: 0;
}

:where(.wp-block-button__link, .wp-element-button, .button) {
	min-height: 48px;
	padding-inline: 24px;
	white-space: nowrap;
}

@media (max-width: 1024px) {
	:where(.wp-block-button__link, .wp-element-button, .button) {
		padding-inline: 20px;
	}
}

@media (max-width: 600px) {
	:where(.wp-block-buttons, .actions, .button-group, .cta-actions) {
		width: 100%;
	}

	:where(.wp-block-buttons) > .wp-block-button,
	:where(.wp-block-buttons) > .wp-block-button > :where(.wp-block-button__link, .wp-element-button) {
		width: 100%;
	}

	:where(.wp-block-button__link, .wp-element-button, .button) {
		padding-inline: 18px;
	}
}