/*
 * AHG phone layout fixes — phase 1. Loaded by rockbase-child/functions.php.
 * Measured 2026-09-30 in iPhone 13 emulation (390px) with Playwright.
 * Source copy: ahg-design-system/fixes/phone-fixes.css (Maple Creative).
 * Each block names the defect it fixes.
 */

/* 1. WooCommerce pages (shop, product, cart, checkout, account):
 * WooCommerce's `.woocommerce img { max-width: 100% }` loads after the theme's
 * `.header-logo img { max-width: 120px }` at equal specificity and wins, so the
 * phone logo renders at 300px and pushes the Menu button 35px off-screen
 * (page becomes 425px wide and scrolls sideways). Restate the theme's caps at
 * higher specificity. */
@media (max-width: 1024px) {
	body .header-logo img { max-width: 150px; }
}
@media (max-width: 768px) {
	body .header-logo img { max-width: 120px; }
}

/* 2. Stacked button groups (home hero: Explore Membership / About AHG /
 * Events Calendar): on phones they stack at their text widths (218, 144,
 * 184px), so the column looks ragged. Make each button full width.
 * Excludes the audience tiles, which use .cover-link-overlay. */
@media (max-width: 600px) {
	.wp-block-buttons.is-content-justification-center:not(.cover-link-overlay) {
		flex-direction: column;
		align-items: stretch;
	}
	.wp-block-buttons.is-content-justification-center:not(.cover-link-overlay) > .wp-block-button,
	.wp-block-buttons.is-content-justification-center:not(.cover-link-overlay) .wp-block-button__link {
		width: 100%;
	}
}

/* 3. Audience tiles (Find a Registered Herbalist / Herb School / Chapter):
 * on phones the middle tile picks up 8px side padding and sits narrower than
 * the other two, and each label has a different custom width, so the text
 * starts at a different place in each tile. Square them up. */
@media (max-width: 781px) {
	.directory-menu > .wp-block-column {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
	.directory-menu .cover-link-overlay .wp-block-button,
	.directory-menu .cover-link-overlay .wp-block-button__link {
		width: 100% !important;
		text-align: center;
	}
}

/* 4. Touch targets under 44px: shop pagination (39px tall) and footer
 * social icons (24px). */
.wp-block-query-pagination a,
.wp-block-query-pagination .page-numbers {
	min-width: 44px;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
}
.wp-block-social-links .wp-block-social-link-anchor {
	padding: 10px;
}