/**
 * responsive.css - the single source of truth for breakpoint behaviour.
 *
 * Loaded last so it can override every other sheet, including woocommerce.css.
 * No other stylesheet contains a width breakpoint. The single exception is the
 * prefers-reduced-motion query in base.css, which is a user preference rather
 * than a screen size and belongs with the reset.
 *
 * ===========================================================================
 * CLIENT SPACING SPEC
 * ===========================================================================
 * The frontend is designed against these values, so they are authoritative.
 *
 *                 1920   1536   1440   1280   1024    425    393   <360
 *   Page top       75     60     50     40     25     20     20     20
 *   Page bottom    75     60     50     40     25     20     20     20
 *   Content width  90%    90%    90%    90%    90%    20px   20px   20px
 *
 *   Section 1 top 150    120    100     80     50     40     40     40
 *   Section 1 bot  75     60     50     40     25     20     20     20
 *
 *   FAQ width      80%    80%    80%    80%    80%    20px   20px   20px
 *
 * READING OF "90%" / "80%": the content area occupies that share of the
 * viewport and is centred, i.e. 5% of clear space each side at 90%. Taken as
 * literal left AND right padding it would total 180% and leave no content, so
 * it is implemented as container width. FAQ sections use 80% via the
 * .section--faq or .container--faq class.
 *
 * The "20px" column is inline padding, not a width - below the desktop range
 * the container goes full width and takes a fixed 20px padding instead.
 *
 * TWO GAPS IN THE SPEC, filled here and flagged so they are easy to change:
 *   768-1023  not specified. Inherits the 1024 column (25px, 90%).
 *   431-767   not specified. Takes the mobile column (20px, full width).
 *             The percentage-to-pixel switch therefore happens at 767.98.
 *
 * ===========================================================================
 * TARGET SCREENS
 * ===========================================================================
 *   >= 1920px   Full HD desktop and above
 *   1536-1919   Large laptop (150% scaling)
 *   1440-1535   MacBook / QHD
 *   1280-1439   Small laptop
 *   1024-1279   Tablet landscape / netbook
 *    768-1023   Tablet portrait  [gap, see above]
 *    431-767    Large phone landscape
 *    426-430    iPhone 14/15/16 Pro Max (430), 14/15 Plus (428)
 *    394-425    Large phone (425 target)
 *    376-393    iPhone 14/15/16 Pro (393), iPhone 12-15 (390)
 *    360-375    iPhone SE / 12 mini / 13 mini (375)
 *     < 360     Small legacy phone
 *
 * IPHONE WIDTHS in CSS pixels: 430 Pro Max, 428 Plus, 393 Pro, 390 standard,
 * 375 SE and mini. Safari reports these as the layout viewport, so a 430pt Pro
 * Max matches the 426-430 block, not the 431-767 one.
 *
 * Breakpoints are desktop-first (max-width, descending). The .98 offsets
 * prevent a 1px dead zone on fractional widths from zoom and scrollbars.
 */

/* ==========================================================================
   >= 1920px - Full HD and above
   Spec column: 75 / 75 / 90%, section 1 top 150
   ========================================================================== */
@media (min-width: 1920px) {
	:root {
		--mb-content-width: 90%;
		--mb-content-width-faq: 80%;
		--mb-pad-inline: 0px;

		--mb-pad-block-top: 75px;
		--mb-pad-block-bottom: 75px;
		--mb-section-first-top: 150px;

		--mb-container-narrow: 880px;
		--mb-grid-min: 300px;
		/* Header tokens for 1920 come from base.css unchanged. */

		/*
		 * Type spec, 1920 column. Matches base.css, restated for clarity.
		 * H4/H5 CORRECTED: the supplied table had H4 28 and H5 32, the only
		 * column where H5 outranked H4. Confirmed as a transposition and
		 * swapped, so the scale now descends 42/32/28/24 from H3 to H6.
		 */
		--mb-h1: 92px;
		--mb-h2: 56px;
		--mb-h3: 42px;
		--mb-h4: 32px;
		--mb-h5: 28px;
		--mb-h6: 24px;
		--mb-body: 18px;
	}

	.woocommerce ul.products { grid-template-columns: repeat(5, 1fr); }
}

/* ==========================================================================
   1536px - 1919px - large laptop, typical 150% Windows scaling
   Spec column: 60 / 60 / 90%, section 1 top 120
   ========================================================================== */
@media (max-width: 1919.98px) {
	:root {
		--mb-pad-block-top: 60px;
		--mb-pad-block-bottom: 60px;
		--mb-section-first-top: 120px;

		--mb-grid-min: 280px;

		--mb-header-height: 92px;
		--mb-logo-height: 64px;
		--mb-topbar-height: 44px;
		--mb-topbar-size: 17px;
		--mb-nav-gap: 34px;
		--mb-nav-size: 17px;
		--mb-header-icon: 23px;
		--mb-header-action-gap: 24px;

		--mb-footer-gap: 48px;
		--mb-footer-row-gap: 56px;
		--mb-footer-pad: 80px;
		--mb-footer-headline: 56px;
		--mb-footer-heading: 17px;
		--mb-footer-heading-gap: 24px;
		--mb-footer-link: 17px;
		--mb-footer-item-gap: 20px;
		--mb-footer-phone: 21px;
		--mb-footer-phone-icon: 28px;
		--mb-footer-social: 44px;

		/* Type spec, 1536 column. H3 corrected to 38 - see the 1440 block. */
		--mb-h1: 72px;
		--mb-h2: 46px;
		--mb-h3: 38px;
		--mb-h4: 28px;
		--mb-h5: 22px;
		--mb-h6: 18px;
		--mb-body: 16px;
	}

	.woocommerce ul.products { grid-template-columns: repeat(4, 1fr); }
}

/* ==========================================================================
   1440px - 1535px - MacBook / QHD
   Spec column: 50 / 50 / 90%, section 1 top 100
   ========================================================================== */
@media (max-width: 1535.98px) {
	:root {
		--mb-pad-block-top: 50px;
		--mb-pad-block-bottom: 50px;
		--mb-section-first-top: 100px;

		--mb-header-height: 88px;
		--mb-logo-height: 60px;
		--mb-topbar-height: 42px;
		--mb-topbar-size: 16px;
		--mb-nav-gap: 32px;
		--mb-nav-size: 16px;
		--mb-header-icon: 22px;
		--mb-header-action-gap: 22px;

		--mb-footer-gap: 44px;
		--mb-footer-row-gap: 50px;
		--mb-footer-pad: 70px;
		--mb-footer-headline: 50px;
		--mb-footer-heading: 16px;
		--mb-footer-link: 16px;
		--mb-footer-item-gap: 19px;
		--mb-footer-phone: 20px;
		--mb-footer-social: 42px;

		/*
		 * Type spec, 1440 column.
		 * H3 CORRECTED: the supplied table had 36 at 1536 and 38 at 1440,
		 * the only value that grew as the screen narrowed. Confirmed as a
		 * transposition and swapped, so H3 now reads 42/38/36/34 downward.
		 */
		--mb-h1: 64px;
		--mb-h2: 42px;
		--mb-h3: 36px;
		--mb-h4: 28px;
		--mb-h5: 22px;
		--mb-h6: 18px;
		--mb-body: 16px;
	}
}

/* ==========================================================================
   1280px - 1439px - small laptop
   Spec column: 40 / 40 / 90%, section 1 top 80
   ========================================================================== */
@media (max-width: 1439.98px) {
	:root {
		--mb-pad-block-top: 40px;
		--mb-pad-block-bottom: 40px;
		--mb-section-first-top: 80px;

		--mb-grid-min: 260px;

		--mb-header-height: 80px;
		--mb-logo-height: 54px;
		--mb-topbar-height: 40px;
		--mb-topbar-size: 15px;
		--mb-nav-gap: 28px;
		--mb-nav-size: 15px;
		--mb-header-action-gap: 20px;

		--mb-footer-gap: 38px;
		--mb-footer-row-gap: 44px;
		--mb-footer-pad: 60px;
		--mb-footer-headline: 42px;
		--mb-footer-heading: 15px;
		--mb-footer-heading-gap: 20px;
		--mb-footer-link: 15px;
		--mb-footer-item-gap: 17px;
		--mb-footer-phone: 18px;
		--mb-footer-phone-icon: 26px;
		--mb-footer-social: 40px;

		/* Type spec, 1280 column. */
		--mb-h1: 48px;
		--mb-h2: 38px;
		--mb-h3: 34px;
		--mb-h4: 22px;
		--mb-h5: 20px;
		--mb-h6: 16px;
		--mb-body: 14px;
	}
}

/* ==========================================================================
   1024px - 1279px - tablet landscape / netbook
   Spec column: 25 / 25 / 90%, section 1 top 50
   ========================================================================== */
@media (max-width: 1279.98px) {
	:root {
		--mb-pad-block-top: 25px;
		--mb-pad-block-bottom: 25px;
		--mb-section-first-top: 50px;

		--mb-grid-min: 240px;

		--mb-header-height: 72px;
		--mb-logo-height: 48px;
		--mb-topbar-height: 38px;
		--mb-topbar-size: 14px;
		--mb-nav-gap: 24px;
		--mb-nav-size: 14px;
		--mb-header-icon: 21px;
		--mb-header-action-gap: 18px;

		--mb-footer-gap: 32px;
		--mb-footer-row-gap: 38px;
		--mb-footer-pad: 50px;
		--mb-footer-headline: 34px;
		--mb-footer-heading: 14px;
		--mb-footer-heading-gap: 18px;
		--mb-footer-link: 14px;
		--mb-footer-item-gap: 15px;
		--mb-footer-phone: 17px;
		--mb-footer-phone-icon: 24px;
		--mb-footer-social: 36px;

		/* Type spec, 1024 column. Also inherited by 768-1023 (spec gap). */
		--mb-h1: 38px;
		--mb-h2: 30px;
		--mb-h3: 26px;
		--mb-h4: 20px;
		--mb-h5: 18px;
		--mb-h6: 16px;
		--mb-body: 14px;
	}

	.menu__list { gap: var(--mb-space-sm); }

	.woocommerce ul.products { grid-template-columns: repeat(3, 1fr); }
}

/* ==========================================================================
   768px - 1023px - tablet portrait
   NOT IN THE SPEC. Inherits the 1024 column (25px, 90%) unchanged; only the
   navigation and grid adapt. Change this block if the design says otherwise.
   ========================================================================== */
@media (max-width: 1023.98px) {
	:root {
		--mb-container-narrow: 720px;
		--mb-grid-min: 220px;

		--mb-header-height: 64px;
		--mb-logo-height: 44px;
		--mb-topbar-height: 36px;
		--mb-topbar-size: 14px;
		--mb-header-icon: 20px;
		--mb-header-action-gap: 16px;
		/* Menu moves into the toggle panel, so it gets stacked spacing. */
		--mb-nav-gap: 4px;
		--mb-nav-size: 16px;

		/*
		 * Footer stacks to one column here. A brand block plus three link
		 * columns inside a 720px container leaves every column too narrow.
		 */
		--mb-footer-columns: 1fr;
		--mb-footer-link-columns: 1fr 1.6fr;
		--mb-footer-gap: 28px;
		--mb-footer-row-gap: 34px;
		--mb-footer-pad: 44px;
		--mb-footer-headline: 32px;
		--mb-footer-heading: 14px;
		--mb-footer-heading-gap: 16px;
		--mb-footer-link: 14px;
		--mb-footer-item-gap: 14px;
		--mb-footer-phone: 16px;
		--mb-footer-social: 34px;

		--mb-space-lg: 1.5rem;
		--mb-space-xl: 2.5rem;
	}

	/* The headline is no longer beside a narrow column, so let it breathe. */
	.site-footer__headline { max-width: none; }

	/*
	 * Collapse the menu into a toggle-driven panel. The panel is taken out of
	 * flow, so the grid's start column shrinks to just the toggle and the logo
	 * stays on the true centre.
	 */
	.nav-toggle,
	.search-toggle { display: inline-flex; }

	.site-header__inner { position: relative; }

	.site-header__nav {
		position: absolute;
		inset: var(--mb-header-height) 0 auto;
		z-index: 40;
		display: none;
		overflow-y: auto;
		padding: var(--mb-space-md);
		background: var(--mb-header-bg);
		border-bottom: 1px solid var(--mb-color-border);
		box-shadow: 0 12px 24px rgb(0 0 0 / 8%);
	}

	.site-header__nav.is-open { display: block; }

	.menu__list { flex-direction: column; }

	.menu__list a {
		display: block;
		padding-block: var(--mb-space-xs);
	}

	.woocommerce ul.products { grid-template-columns: repeat(3, 1fr); }
}

/* ==========================================================================
   431px - 767px - large phone landscape
   THE PERCENTAGE-TO-PIXEL SWITCH HAPPENS HERE.
   Spec mobile column: 20 / 20 / 20px inline, section 1 top 40.
   These values hold unchanged for every narrower block below.
   ========================================================================== */
@media (max-width: 767.98px) {
	:root {
		--mb-content-width: 100%;
		--mb-content-width-faq: 100%;
		--mb-pad-inline: 20px;

		--mb-pad-block-top: 20px;
		--mb-pad-block-bottom: 20px;
		--mb-section-first-top: 40px;

		--mb-header-height: 60px;
		--mb-logo-height: 40px;
		--mb-topbar-height: 34px;
		--mb-topbar-size: 13px;
		--mb-topbar-gap: 8px;
		--mb-topbar-icon: 19px;

		--mb-footer-link-columns: 1fr 1fr;
		--mb-footer-gap: 24px;
		--mb-footer-row-gap: 30px;
		--mb-footer-pad: 40px;
		--mb-footer-headline: 30px;
		--mb-footer-social: 40px;
		--mb-header-icon: 20px;
		--mb-header-action-gap: 14px;

		/*
		 * Type spec, 425 column. The spec's next column is 393, so these hold
		 * for everything from 767 down to 394.
		 */
		--mb-h1: 32px;
		--mb-h2: 28px;
		--mb-h3: 24px;
		--mb-h4: 20px;
		--mb-h5: 18px;
		--mb-h6: 16px;
		--mb-body: 14px;

		--mb-space-md: 1rem;
		--mb-space-lg: 1.25rem;
		--mb-space-xl: 2rem;
	}

	.topbar__inner {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--mb-space-xs);
		padding-block: var(--mb-space-xs);
	}

	.post-grid { grid-template-columns: 1fr; }

	/* Category names are too long to read in two columns on a phone. */
	:root { --mb-footer-cat-rows: 10; }

	.hours__row { gap: var(--mb-space-sm); }

	.woocommerce ul.products { grid-template-columns: repeat(2, 1fr); }

	/* Full-width tap targets read better than inline buttons on phones. */
	.error-404__actions { flex-direction: column; }
	.error-404__actions .button { width: 100%; }
}

/* ==========================================================================
   426px - 430px - iPhone 14/15/16 Pro Max (430), 14/15 Plus (428)
   Spacing already correct from the 767 block; only the header needs easing
   or the cart badge crowds the CTA.
   ========================================================================== */
@media (max-width: 430.98px) {
	:root {
		/* Type stays on the 425 column here; only the header eases. */
		--mb-header-height: 58px;
		--mb-logo-height: 38px;
		--mb-topbar-height: 32px;
		--mb-topbar-size: 12px;
		--mb-header-action-gap: 12px;

		/* Quick Links and Categories stack rather than sharing the width. */
		--mb-footer-link-columns: 1fr;
		--mb-footer-headline: 28px;
		--mb-footer-row-gap: 26px;
		--mb-footer-pad: 36px;
	}

	.woocommerce ul.products {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--mb-space-md);
	}
}

/* ==========================================================================
   394px - 425px - large phone (425 spec column)
   ========================================================================== */
@media (max-width: 425.98px) {
	/* Type is already on the spec's 425 column from the 767 block. */

	:root { --mb-logo-height: 36px; }

	.search-form { flex-direction: column; }
	.search-form .button { width: 100%; }

	.card__body { padding: var(--mb-space-sm); }

	.woocommerce ul.products {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--mb-space-md);
	}
}

/* ==========================================================================
   376px - 393px - iPhone 14/15/16 Pro (393), iPhone 12-15 (390), Pixel
   ========================================================================== */
@media (max-width: 393.98px) {
	:root {
		/* Type spec, 393 column. The narrowest column the spec defines. */
		--mb-h1: 30px;
		--mb-h2: 26px;
		--mb-h3: 22px;
		--mb-h4: 20px;
		--mb-h5: 18px;
		--mb-h6: 16px;
		--mb-body: 14px;

		--mb-space-md: 0.875rem;
		--mb-space-lg: 1.125rem;
	}

	.site-header__actions { gap: var(--mb-space-xs); }

	.button { padding: 0.6rem 1rem; }

	/* One product per row - two columns leave the price cramped below 394. */
	.woocommerce ul.products { grid-template-columns: 1fr; }

	.error-404__code { font-size: 3.5rem; }
}

/* ==========================================================================
   360px - 375px - iPhone SE (2nd/3rd gen), iPhone 12 mini, 13 mini
   ========================================================================== */
@media (max-width: 375.98px) {
	:root {
		/* Type stays on the spec's 393 column; only chrome tightens. */
		--mb-header-height: 56px;
		--mb-logo-height: 34px;
		--mb-topbar-height: 30px;
		--mb-header-icon: 19px;
		--mb-header-action-gap: 10px;

		--mb-space-lg: 1rem;
		--mb-space-xl: 1.5rem;
	}

	.card__body { padding: var(--mb-space-sm); }

	.error-404__code { font-size: 3rem; }
}

/* ==========================================================================
   < 360px - small legacy phones
   Spec keeps 20px padding here. Nothing may overflow horizontally.
   ========================================================================== */
@media (max-width: 359.98px) {
	:root {
		/*
		 * The spec has no column below 393, so type is inherited rather than
		 * invented. Only spacing tightens here.
		 */
		--mb-header-height: 54px;
		--mb-logo-height: 30px;
		--mb-topbar-height: 28px;
		--mb-topbar-size: 11px;
		--mb-topbar-gap: 6px;
		--mb-topbar-icon: 16px;
		--mb-burger-width: 20px;
		--mb-burger-gap: 6px;
		--mb-header-icon: 18px;
		--mb-header-action-gap: 8px;

		--mb-footer-headline: 24px;
		--mb-footer-heading: 12px;
		--mb-footer-link: 13px;
		--mb-footer-item-gap: 12px;
		--mb-footer-phone: 14px;
		--mb-footer-phone-icon: 22px;
		--mb-footer-social: 36px;
		--mb-footer-row-gap: 22px;
		--mb-footer-pad: 30px;

		--mb-space-sm: 0.5rem;
		--mb-space-md: 0.75rem;
		--mb-space-lg: 1rem;
		--mb-space-xl: 1.5rem;
	}

	.site-brand__text { font-size: var(--mb-h6); }

	.button {
		width: 100%;
		padding: 0.55rem 0.75rem;
	}

	.site-header__actions .button { width: auto; }

	.card__title { font-size: var(--mb-h6); }

	.hours__row {
		flex-direction: column;
		gap: 0;
	}

	/* Long unbroken strings (SKUs, URLs) are the usual cause of overflow here. */
	body { overflow-wrap: break-word; }
	table { display: block; overflow-x: auto; }
}

/* ==========================================================================
   iOS / Safari corrections
   Device behaviours rather than widths, so they sit outside the ladder.
   ========================================================================== */

/*
 * Notch and Dynamic Island safe areas, added on top of the spec's 20px rather
 * than replacing it. Requires viewport-fit=cover in the viewport meta tag
 * (set in header.php). In landscape the inset is horizontal, which is what
 * clips content against the notch on every Pro and Pro Max.
 */
@supports (padding: env(safe-area-inset-left)) {
	.container {
		padding-inline:
			calc(var(--mb-pad-inline) + env(safe-area-inset-left))
			calc(var(--mb-pad-inline) + env(safe-area-inset-right));
	}

	.site-header,
	.topbar {
		padding-inline: env(safe-area-inset-left) env(safe-area-inset-right);
	}

	.site-footer {
		padding-bottom: env(safe-area-inset-bottom);
	}
}

/*
 * iOS zooms the whole page when a form control smaller than 16px receives
 * focus, and never zooms back out. The mobile type scale drops --mb-body
 * below 16px, so form controls are pinned at 16px to prevent it.
 */
@media (max-width: 1023.98px) {
	input[type="text"],
	input[type="email"],
	input[type="search"],
	input[type="tel"],
	input[type="number"],
	input[type="password"],
	textarea,
	select {
		font-size: 16px;
	}
}

/*
 * 100vh on iOS Safari measures the viewport without the browser chrome, so a
 * full-height panel is taller than the visible area and its bottom is
 * unreachable. dvh tracks the chrome as it collapses; the vh line stays as a
 * fallback for browsers without dvh.
 */
@media (max-width: 1023.98px) {
	.site-header__nav {
		max-height: calc(100vh - var(--mb-header-height));
		max-height: calc(100dvh - var(--mb-header-height));
		-webkit-overflow-scrolling: touch;
	}
}

/*
 * Short viewports in landscape - iPhone SE landscape is 375pt tall. Trim the
 * vertical rhythm so a section header plus content still fits on one screen.
 */
@media (max-height: 480px) and (orientation: landscape) {
	:root {
		--mb-pad-block-top: 20px;
		--mb-pad-block-bottom: 20px;
		--mb-section-first-top: 30px;
		--mb-header-height: 48px;
	}

	.site-header--sticky { position: static; }
}

/* ==========================================================================
   Design QA helper
   Add the class mb-debug-breakpoints to <body> (or define
   MIKIBITES_DEBUG_BREAKPOINTS in wp-config.php) to show the active breakpoint
   and the live spacing values while matching the design.
   ========================================================================== */
.mb-debug-breakpoints::after {
	position: fixed;
	right: 0;
	bottom: 0;
	z-index: 9999;
	padding: 4px 10px;
	background: #000;
	color: #0f0;
	font: 700 12px/1.4 Consolas, Monaco, monospace;
	pointer-events: none;
	content: "< 360";
}

@media (min-width: 360px)  { .mb-debug-breakpoints::after { content: "360 - 375  SE / mini"; } }
@media (min-width: 376px)  { .mb-debug-breakpoints::after { content: "376 - 393  iPhone Pro"; } }
@media (min-width: 394px)  { .mb-debug-breakpoints::after { content: "394 - 425"; } }
@media (min-width: 426px)  { .mb-debug-breakpoints::after { content: "426 - 430  Pro Max / Plus"; } }
@media (min-width: 431px)  { .mb-debug-breakpoints::after { content: "431 - 767"; } }
@media (min-width: 768px)  { .mb-debug-breakpoints::after { content: "768 - 1023  [spec gap]"; } }
@media (min-width: 1024px) { .mb-debug-breakpoints::after { content: "1024 - 1279  pad 25 / 90%"; } }
@media (min-width: 1280px) { .mb-debug-breakpoints::after { content: "1280 - 1439  pad 40 / 90%"; } }
@media (min-width: 1440px) { .mb-debug-breakpoints::after { content: "1440 - 1535  pad 50 / 90%"; } }
@media (min-width: 1536px) { .mb-debug-breakpoints::after { content: "1536 - 1919  pad 60 / 90%"; } }
@media (min-width: 1920px) { .mb-debug-breakpoints::after { content: "1920+  pad 75 / 90%"; } }