/*
 * Zoi Fashion — responsive corrections.
 *
 * Two classes of defect live here, both measured with a headless browser at
 * 320/360/393/414px before and after (see docs/qa/artifacts/RESPONSIVE-FIX-1/):
 *
 *   1. The header row could not fit a 320px phone, so every page on the site
 *      scrolled sideways on the narrowest supported viewport.
 *   2. The five pages imported from production (Our Story, Contact, Size
 *      Guide, Shipping & Returns, Care Guide) carry desktop-only inline
 *      styles — a 24px inner gutter, three-column grids, 32-44px card
 *      padding and a four-column measurements table. That markup lives in
 *      the database as CMS content, so it is corrected here rather than
 *      rewritten: the copy is the merchant's, the layout is ours.
 *
 * Attribute selectors match the inline declarations exactly as WordPress
 * stores them. If the merchant re-authors a page the selector simply stops
 * matching and the block falls back to its own styling — nothing breaks.
 *
 * Loaded last among the theme sheets so it wins on equal specificity.
 */

/* ===================================================================
 * 1. Header — fit the narrowest supported phone (320px)
 * =================================================================== */

/*
 * At 320px the logo (122px) plus four 40px icon buttons plus gaps measured
 * 318px inside a 272px row. Trimming the gutter, the logo and the icon
 * targets brings the row to ~254px with every control still present and
 * still at least 36px — no navigation is hidden to make the row fit.
 */
@media (max-width: 380px) {
	/*
	 * 320px is the tightest viewport the brand rules and WCAG 2.2 SC 1.4.10
	 * both have to hold at, and the budget is exact: 300px of usable row for a
	 * 120px logo (the guideline's minimum for the full lockup), its 15px clear
	 * space either side, a 26px menu toggle and four icon buttons. Nothing here
	 * has slack to give — shrinking the logo below 120px or the icons below
	 * 24px would break one rule to satisfy the other.
	 */
	.zoi-header {
		padding-left: 10px !important;
		padding-right: 10px !important;
	}

	/* Clear space = the figure's hat height, 21.8% of a 120px-wide mark. */
	.zoi-header-row {
		gap: 0.94rem !important;
	}

	.zoi-utils {
		gap: 0 !important;
	}

	.zoi-search button,
	.zoi-icon-link,
	.zoi-utils .wc-block-mini-cart__button {
		width: 30px !important;
		height: 30px !important;
	}

	.zoi-search button svg,
	.zoi-icon-link svg,
	.zoi-utils .wc-block-mini-cart__button svg {
		width: 18px;
		height: 18px;
	}

	/* The hairline seam before the bag needs the margin it hangs off. */
	.zoi-utils .wc-block-mini-cart__button {
		margin-left: 0.3rem;
	}

	.zoi-annc {
		font-size: 0.72rem;
	}
}

/*
 * 381-600px: the row still cannot hold 40px icons beside the logo at its
 * floor, but it has more to work with than a 320px screen does.
 */
@media (min-width: 381px) and (max-width: 600px) {
	.zoi-header {
		padding-left: 14px !important;
		padding-right: 14px !important;
	}

	.zoi-header-row {
		gap: 1rem !important;
	}

	.zoi-utils {
		gap: 0.1rem !important;
	}

	.zoi-search button,
	.zoi-icon-link,
	.zoi-utils .wc-block-mini-cart__button {
		width: 36px !important;
		height: 36px !important;
	}
}

/* ===================================================================
 * 2. Imported CMS pages — inline desktop layout on a phone
 * =================================================================== */

/*
 * The imported wrapper carries `padding:0 24px 90px`. Under page.html the
 * main element already supplies a 24px gutter, so the two stack into 48px on
 * a 360px screen. Drop the inner one there; keep it under page-full.html,
 * where the wrapper is the only gutter there is.
 */
@media (max-width: 781px) {
	.zoi-page:not(.zoi-page--full) .entry-content > div[style*="max-width:1180px"] {
		/*
		 * The wrapper paints the cream panel. Pull it out through the main
		 * element's own gutter so the panel reaches both screen edges the way
		 * it does on desktop, then inset the text inside it instead of
		 * stacking the two gutters into 48px.
		 */
		margin-left: calc( var( --wp--preset--spacing--50, 24px ) * -1 ) !important;
		margin-right: calc( var( --wp--preset--spacing--50, 24px ) * -1 ) !important;
		padding-left: 20px !important;
		padding-right: 20px !important;
	}

	.zoi-page--full .entry-content > div[style*="max-width:1180px"] {
		padding-left: 20px !important;
		padding-right: 20px !important;
	}

	.entry-content > div[style*="max-width:1180px"] {
		padding-bottom: 56px !important;
	}

	/* Hero block: 64px of top padding is a desktop measure. */
	.entry-content section[style*="padding:64px 0 44px"] {
		padding: 36px 0 28px !important;
	}

	/*
	 * Three-column card grids force their own min-content width — the single
	 * largest source of sideways scroll on these pages (+165px on Our Story,
	 * +214px on Shipping & Returns). Two columns still read well on a large
	 * tablet; below that a card has no room left and they stack.
	 */
	.entry-content div[style*="grid-template-columns:repeat(3,1fr)"] {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}

	/* Card padding: 32-44px of inset leaves ~250px for text on a 360px phone. */
	.entry-content div[style*="padding:32px"] {
		padding: 22px !important;
	}

	.entry-content div[style*="padding:44px"] {
		padding: 24px !important;
	}

	.entry-content div[style*="padding:72px 40px"],
	.entry-content div[style*="padding:56px 40px"] {
		padding: 44px 22px !important;
	}

	/* Section headings were fixed at 26-36px; make them scale with the screen. */
	.entry-content [style*="font-size:30px"] {
		font-size: clamp(1.25rem, 5.6vw, 1.875rem) !important;
	}

	.entry-content [style*="font-size:36px"] {
		font-size: clamp(1.5rem, 6.6vw, 2.25rem) !important;
	}

	.entry-content [style*="font-size:26px"] {
		font-size: clamp(1.15rem, 5vw, 1.625rem) !important;
	}

	.entry-content [style*="font-size:18px"] {
		font-size: 1rem !important;
	}

	/* Numbered section label sits beside the heading; tighten the pairing. */
	.entry-content div[style*="align-items:baseline"][style*="gap:16px"] {
		gap: 10px !important;
		margin-top: 40px !important;
	}

	/*
	 * Measurements table: four columns at 15px with 14px/12px cell padding
	 * needs 415px. Tightened it fits a 320px screen without scrolling; the
	 * scroll region below is the safety net for any wider table the merchant
	 * adds later.
	 */
	.entry-content table {
		width: 100% !important;
	}

	.entry-content th[style],
	.entry-content td[style] {
		padding: 10px 6px !important;
	}

	.entry-content td[style*="font-size:15px"] {
		font-size: 0.8125rem !important;
	}

	.entry-content th[style*="font-size:11px"] {
		font-size: 0.625rem !important;
		letter-spacing: 0.04em !important;
	}
}

@media (max-width: 600px) {
	.entry-content div[style*="grid-template-columns:repeat(3,1fr)"],
	.entry-content div[style*="grid-template-columns:repeat(2,1fr)"] {
		grid-template-columns: minmax(0, 1fr) !important;
	}
}

/*
 * A table that still cannot fit gets its own keyboard-reachable scroll
 * region (wrapped by zoi-shell.js) instead of pushing the whole document
 * sideways. Table semantics are preserved — the wrapper is a labelled
 * region, not a display change on the table itself.
 */
.zoi-table-scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	max-width: 100%;
}

.zoi-table-scroll:focus-visible {
	outline: 2px solid var(--zoi-camel-700, #6f4c2b);
	outline-offset: 2px;
}

/*
 * Long unbroken strings in merchant copy (a URL, an email address) must wrap
 * rather than widen the page.
 */
.entry-content a,
.entry-content p,
.entry-content li,
.entry-content td,
.entry-content th,
.entry-content h1,
.entry-content h2,
.entry-content h3 {
	overflow-wrap: break-word;
}

/* Media in CMS content never exceeds its column. */
.entry-content img,
.entry-content video,
.entry-content iframe {
	max-width: 100%;
	height: auto;
}

/* ===================================================================
 * 3. Intrinsic sizing — controls that could not shrink to their column
 * =================================================================== */

/*
 * The theme has no global border-box reset, so a form control styled
 * `width:100%` still added its padding and border on top: the newsletter
 * email field measured 315px inside a 289px column and dragged the whole
 * homepage 36px sideways at 320px. Scoped to form controls, which is where
 * content-box sizing has no legitimate use — measured to change 0.9% of
 * elements on mobile and 0.5% on desktop, all of them the broken ones.
 *
 * A global `*{box-sizing:border-box}` would be the tidier reset but moves
 * 10-20% of elements at desktop widths; that is a design change, not a
 * responsiveness fix, and belongs in its own task.
 */
input,
select,
textarea {
	box-sizing: border-box;
}

/*
 * Grid and flex children default to a min-content floor, which lets one wide
 * descendant widen the whole column. These rails and panels must track the
 * space they are given instead.
 */
.zoi-jn__inner > *,
.zoi-jn__stories,
.zoi-jn__optin,
.zoi-jn__viewport,
.zoi-jn-card,
.zoi-field,
.zoi-email-optin__form {
	min-width: 0;
}

/*
 * Category rail: `flex: 0 0 300px` under content-box became a 348px card —
 * wider than a 320px phone, so no card was ever fully visible. Size the card
 * to the screen with a deliberate peek at the next one.
 */
@media (max-width: 380px) {
	.zoi-cat-card {
		box-sizing: border-box;
		flex: 0 0 calc(100vw - 76px);
		min-height: 320px;
		padding: 20px;
	}

	.zoi-cats-scroll {
		padding-left: 16px;
		padding-right: 16px;
	}
}

/* ===================================================================
 * 4. Touch targets — WCAG 2.2 SC 2.5.8 (24x24 CSS px minimum)
 * =================================================================== */

/*
 * The hero slide indicators are 32x3 and 48x3 bars: a 3px-tall target on a
 * touch screen. The bar is the design, so it stays exactly as it is and the
 * hit area is grown around it. The overlay is transparent and centred, so
 * nothing moves and neighbouring dots do not overlap — they only extend
 * vertically, where there is nothing to collide with.
 */
.zoi-hero-slider__dot {
	position: relative;
}

.zoi-hero-slider__dot::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	height: 24px;
	min-width: 24px;
}

/* Skip link measured 39x23 when focused — one pixel under the minimum. */
.zoi-skip-link:focus,
.zoi-skip-link:focus-visible {
	min-height: 24px;
	display: inline-flex;
	align-items: center;
}

/* ===================================================================
 * 5. Social profile row (footer)
 * =================================================================== */

/*
 * Rendered by zoi_render_social_row() from the CMS social settings. Icon-only,
 * so each link needs a real target rather than the size of a 20px glyph:
 * 44px square, comfortably over WCAG 2.2 SC 2.5.8's 24px floor and matching
 * the header's icon buttons.
 */
.zoi-social {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem;
	list-style: none;
	margin: 1.1rem 0 0;
	padding: 0;
}

.zoi-social li {
	margin: 0;
}

.zoi-social__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 999px;
	text-decoration: none;
	transition: color 0.18s ease, background-color 0.18s ease;
}

.zoi-social__icon {
	width: 20px;
	height: 20px;
	display: block;
}

/* The footer sits on espresso, so the row takes the footer's own link colours. */
.zoi-footer .zoi-social__link {
	color: #c9bca7;
}

.zoi-footer .zoi-social__link:hover,
.zoi-footer .zoi-social__link:focus-visible {
	color: #f4eee3;
	background: rgba(244, 238, 227, 0.1);
}

.zoi-social__link:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.zoi-social__link {
		transition: none;
	}
}

/* ===================================================================
 * 6. Cart and Checkout blocks — keep `alignwide` inside its container
 * =================================================================== */

/*
 * WooCommerce saves the Cart and Checkout blocks with `alignwide`, and the
 * theme's wide size is 1280px. Their `main` carries its own horizontal padding
 * *and* WordPress's global padding, so the constrained layout pulled the
 * alignwide child out through that padding with negative margins: the block
 * measured 1264px starting at x=40 in a 1280px viewport and pushed the document
 * 24px sideways. The overflow tracked the padding rather than the design — 8px
 * on phones, 24px at 768, 40px at 1024, and only 1440px was wide enough to
 * escape it.
 *
 * Neither block has any reason to break its container, so it is capped at the
 * space available and re-centred.
 *
 * This went unnoticed earlier because an empty cart redirects and an empty
 * checkout renders nothing — the page had to hold a real order before the
 * overflow existed to measure.
 */
/*
 * The box model is the actual cause. WooCommerce ships the Cart and Checkout
 * UI as vendor CSS written — like essentially all modern CSS — against
 * `box-sizing: border-box`, but this theme has no global reset, so 443 of the
 * 483 elements in the checkout subtree were laid out as `content-box`. The
 * block declared `width: 1200px` with `padding: 0 32px` and therefore occupied
 * 1264px inside a 1200px column, at which point `margin-right: auto` resolves
 * to the over-constraint, -64px, and the page scrolls sideways.
 *
 * Scoped to the two WooCommerce block subtrees, which is exactly where the
 * vendor CSS assumes it. The site-wide reset stays out of scope — measured at
 * 10-20% of elements moving on desktop, that is a design change.
 */
.wp-block-woocommerce-checkout,
.wp-block-woocommerce-checkout *,
.wp-block-woocommerce-checkout *::before,
.wp-block-woocommerce-checkout *::after,
.wp-block-woocommerce-cart,
.wp-block-woocommerce-cart *,
.wp-block-woocommerce-cart *::before,
.wp-block-woocommerce-cart *::after {
	box-sizing: border-box;
}

/*
 * With the box model corrected the block fits, but keep it from being pulled
 * out through the container's padding by WordPress's generated alignwide rules,
 * whose selectors are deliberately doubled for specificity.
 */
.zoi-checkout .entry-content > .alignwide,
.zoi-cart .entry-content > .alignwide,
.zoi-checkout .entry-content > .wp-block-woocommerce-checkout,
.zoi-cart .entry-content > .wp-block-woocommerce-cart {
	max-width: 100% !important;
	margin-left: auto !important;
	margin-right: auto !important;
}

/* ===================================================================
 * 7. Related products on the product page
 * =================================================================== */

/*
 * The theme's content width is 720px, too narrow for a four-card row, so the
 * related-products group carries its own 1200px content size. That widens the
 * group itself rather than pulling an `alignwide` child out through the
 * container's padding — the trick that pushed checkout sideways at every
 * width. Nothing here needs negative margins.
 */

/* WooCommerce's collection CSS assumes border-box, as its cart/checkout does. */
.wp-block-woocommerce-product-collection,
.wp-block-woocommerce-product-collection *,
.wp-block-woocommerce-product-collection *::before,
.wp-block-woocommerce-product-collection *::after {
	box-sizing: border-box;
}

/*
 * WooCommerce's responsive product grid uses `auto-fill` with a ~350px minimum,
 * which yields three cards in a 1200px row no matter what column count the
 * block asks for. Set the tracks explicitly, on the same breakpoints the shop
 * listing already uses so the two grids agree.
 */
.zoi-pdp-related .wp-block-woocommerce-product-template {
	grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

@media (max-width: 1100px) {
	.zoi-pdp-related .wp-block-woocommerce-product-template {
		grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	}
}

@media (max-width: 860px) {
	.zoi-pdp-related .wp-block-woocommerce-product-template {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
}

/* ===================================================================
 * 8. Product gallery — let the column shrink on a narrow phone
 * =================================================================== */

/*
 * At 320px the gallery column measured 312px inside a 288px container, pushing
 * the page 8px sideways. Only products with a *single* gallery image were
 * affected: with two or more the thumbnail strip gives the flex container a
 * different intrinsic width, and the column collapses correctly. That is why an
 * earlier sweep passed — it sampled a two-image product.
 *
 * Flex and grid children are floored at min-content unless told otherwise, so a
 * single intrinsically-wide image sets the column's width. These may shrink.
 */
.zoi-pdp-cols > .wp-block-column,
.wp-block-woocommerce-product-image-gallery,
.woocommerce-product-gallery,
.woocommerce-product-gallery__wrapper,
.woocommerce-product-gallery__image {
	min-width: 0;
	max-width: 100%;
}

.woocommerce-product-gallery img {
	max-width: 100%;
	height: auto;
}

/*
 * Add-to-cart row: the quantity field and the button sit side by side and
 * together need more than a 320px screen gives them — the button ended 4px past
 * the viewport. Let the row wrap and give the button the full width below it.
 */
@media (max-width: 400px) {
	/* The form is a grid, not a flexbox — a two-track row of quantity + button. */
	.zoi-pdp-info form.cart,
	.wc-block-add-to-cart-form form.cart {
		grid-template-columns: minmax(0, 1fr) !important;
		row-gap: 0.75rem;
	}

	.zoi-pdp-info form.cart .quantity,
	.wc-block-add-to-cart-form form.cart .quantity,
	.zoi-pdp-info form.cart .single_add_to_cart_button,
	.wc-block-add-to-cart-form form.cart .single_add_to_cart_button {
		grid-column: 1 / -1;
		width: 100%;
	}
}

/* ===================================================================
 * 9. Header cart count badge
 * =================================================================== */

/*
 * The count is painted by cart.js from the Store API — never server-rendered,
 * because the host page-caches HTML and a baked-in number would show one
 * shopper's bag to the next visitor. It stays `hidden` until there is a real
 * number, so an empty bag shows no badge rather than a zero.
 */
.zoi-cart-btn {
	position: relative;
	overflow: visible;
}

.zoi-cart-count {
	position: absolute;
	top: -1px;
	right: -1px;
	min-width: 17px;
	height: 17px;
	padding: 0 4px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 999px;
	background: var(--zoi-camel-700, #6f4c2b);
	color: var(--zoi-cream, #f4eee3);
	font-family: var(--zoi-sans);
	font-size: 0.625rem;
	font-weight: 800;
	line-height: 1;
	letter-spacing: 0;
	pointer-events: none;
}

.zoi-cart-count[hidden] {
	display: none;
}

/* The button briefly disables itself while the add is in flight. */
.single_add_to_cart_button.is-busy {
	opacity: 0.6;
	cursor: progress;
}

/* ===================================================================
 * 10. Current navigation item
 * =================================================================== */

/*
 * The desktop bar already styles `[aria-current]` (camel text plus the sliding
 * underline) — it just never had anything marked; see zoi_nav_link_is_current()
 * in functions.php.
 *
 * The mobile drawer is a different matter: its own colour rule outweighed the
 * current-item rule, so the active link rendered exactly like every other one.
 * It gets the camel treatment here, plus a marker down its leading edge — the
 * underline is deliberately suppressed in the drawer, and colour alone would
 * leave the current item indistinguishable to anyone who cannot separate those
 * two browns (WCAG 2.2 SC 1.4.1, Use of Color).
 */
.zoi-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item > a[aria-current],
.zoi-nav .wp-block-navigation__responsive-container.is-menu-open .current-menu-item > a {
	color: var(--zoi-camel-700, #6f4c2b) !important;
	position: relative;
	padding-left: 0.85rem !important;
}

.zoi-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item > a[aria-current]::before,
.zoi-nav .wp-block-navigation__responsive-container.is-menu-open .current-menu-item > a::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 3px;
	height: 1.1em;
	background: var(--zoi-camel, #9a6d3f);
	border-radius: 2px;
}