/*!
 * IMC Catering — front-end styles
 * Consumes theme.json custom properties (--wp--preset--*). No build step.
 * Sections are added by later tasks: Base, Header/Nav, Footer, Content, Patterns, CaterPress storefront, Forms.
 */

/* ============================================================ Base */
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; }
img, svg { max-width: 100%; height: auto; }
a { color: var(--wp--preset--color--dark-green); }

/* Long unbroken strings (titles, code samples) must not force horizontal
 * scroll — found via the Theme Unit Test "title should not overflow" case. */
h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; word-break: break-word; }
pre, code { overflow-wrap: break-word; word-break: break-word; max-width: 100%; overflow-x: auto; white-space: pre-wrap; }
/* Post-content tables (e.g. WPTT's HTML-tags-and-formatting case) size to
 * their content by default, which can exceed a phone viewport; force them
 * to the available width and let cell text wrap instead of overflowing. */
table { table-layout: fixed; width: 100%; max-width: 100%; }
th, td { overflow-wrap: break-word; word-break: break-word; }

/* Classic image alignment/caption markup (core's img_caption_shortcode
 * output, still used by classic-editor and pasted content) — without this,
 * a large captioned image overflows the viewport (found via WPTT's
 * "Markup: Image Alignment" case): wp-caption gets an inline pixel width
 * from core, which needs !important to be constrained back down. */
.alignnone { margin: var(--wp--preset--spacing--20) var(--wp--preset--spacing--40) var(--wp--preset--spacing--40) 0; }
.alignleft { float: left; margin: var(--wp--preset--spacing--20) var(--wp--preset--spacing--40) var(--wp--preset--spacing--40) 0; max-width: 100%; }
.alignright { float: right; margin: var(--wp--preset--spacing--20) 0 var(--wp--preset--spacing--40) var(--wp--preset--spacing--40); max-width: 100%; }
.aligncenter { display: block; margin-inline: auto; }
.wp-caption { max-width: 100% !important; }
.wp-caption img { display: block; max-width: 100%; height: auto; margin-inline: auto; }
.wp-caption-text { text-align: center; font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--dark-green); }

.screen-reader-text {
	position: absolute !important;
	clip-path: inset(50%);
	width: 1px; height: 1px;
	overflow: hidden;
	white-space: nowrap;
}
.skip-link:focus {
	position: fixed; top: 0; left: 0;
	clip-path: none; width: auto; height: auto;
	padding: var(--wp--preset--spacing--30);
	background: var(--wp--preset--color--white);
	z-index: 1000;
}

.site-wrap { display: flex; flex-direction: column; min-height: 100vh; }
/* min-width: 0 overrides flexbox's automatic min-size, which otherwise
 * refuses to shrink this item below wide content (a fixed-width legacy
 * image, table, etc.) and forces the whole page to scroll horizontally. */
.site-main { flex: 1 0 auto; min-width: 0; }

/* ==================================================== Header / Nav */
.site-header {
	background: var(--wp--preset--color--sage-bg);
	padding-block: var(--wp--preset--spacing--30);
}
.site-header__inner {
	max-width: var(--wp--style--global--wide-size, 75rem);
	margin-inline: auto;
	padding-inline: var(--wp--preset--spacing--40);
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--40);
	flex-wrap: wrap;
}
.site-header__brand { margin-right: auto; }
.site-header__brand img { max-height: 72px; width: auto; }
.site-header__title {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--large);
	text-decoration: none;
}

.site-nav,
.site-nav ul { list-style: none; margin: 0; padding: 0; }
.site-nav {
	display: flex;
	gap: var(--wp--preset--spacing--40);
	font-family: var(--wp--preset--font-family--body);
	letter-spacing: 0.03em;
}
.site-nav a { text-decoration: none; }
.site-nav .current-menu-item > a { text-decoration: underline; text-underline-offset: 0.3em; }

.site-header__utility {
	display: flex;
	gap: var(--wp--preset--spacing--40);
	font-family: var(--wp--preset--font-family--body);
}
.site-header__utility a { text-decoration: none; }

/* toggle hidden on wide screens */
.site-nav__toggle { display: none; padding: 0; }

@media (max-width: 782px) {
	.site-nav__toggle {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 44px; height: 44px;
		background: transparent;
		border: 1px solid var(--wp--preset--color--dark-green);
		cursor: pointer;
	}
	.site-nav__toggle-bar,
	.site-nav__toggle-bar::before,
	.site-nav__toggle-bar::after {
		content: "";
		display: block;
		width: 20px; height: 2px;
		background: var(--wp--preset--color--dark-green);
		position: relative;
	}
	.site-nav__toggle-bar::before { position: absolute; top: -6px; }
	.site-nav__toggle-bar::after  { position: absolute; top: 6px; }

	.site-header__nav {
		flex-basis: 100%;
		display: none;
	}
	.primary-nav-open .site-header__nav { display: block; }
	.site-nav { flex-direction: column; gap: var(--wp--preset--spacing--30); }
	.site-header__utility { order: 3; }
}

/* ============================================================ Footer */
.site-footer {
	background: var(--wp--preset--color--ivory);
	padding-block: var(--wp--preset--spacing--60);
	margin-top: var(--wp--preset--spacing--70);
}
.site-footer__inner {
	max-width: var(--wp--style--global--wide-size, 75rem);
	margin-inline: auto;
	padding-inline: var(--wp--preset--spacing--40);
	display: grid;
	gap: var(--wp--preset--spacing--50);
	grid-template-columns: 1fr;
}
@media (min-width: 782px) {
	.site-footer__inner { grid-template-columns: 1fr 1fr auto; align-items: start; }
}
.footer-legal__list,
.footer-legal__list li { list-style: none; margin: 0; padding: 0; }
.footer-legal__list a { text-decoration: none; display: inline-block; padding-block: var(--wp--preset--spacing--20); }
.footer-widget__title {
	font-size: var(--wp--preset--font-size--medium);
	color: var(--wp--preset--color--dark-green);
}
.site-footer__mark img { max-width: 200px; }

/* =========================================================== Content */
.site-main {
	width: 100%;
	max-width: var(--wp--style--global--content-size, 46rem);
	margin-inline: auto;
	padding-inline: var(--wp--preset--spacing--40);
	padding-block: var(--wp--preset--spacing--60);
}
.site-main--front {
	max-width: none;
	margin-inline: 0;
	padding-inline: 0;
	padding-block: 0;
}
.entry__title { margin-top: 0; }
.entry__content > * { margin-block: var(--wp--preset--spacing--40); }
.entry__content > :first-child { margin-top: 0; }

.archive-list__item { padding-block: var(--wp--preset--spacing--40); border-bottom: 1px solid var(--wp--preset--color--taupe); }

.error-404 { text-align: center; padding-block: var(--wp--preset--spacing--70); }
.error-404__actions { display: flex; gap: var(--wp--preset--spacing--30); justify-content: center; flex-wrap: wrap; }

/* ========================================================== Patterns */
.wp-block-cover h1,
.wp-block-cover h2 { font-family: var(--wp--preset--font-family--heading); }
.wp-block-cover .wp-block-buttons { margin-top: var(--wp--preset--spacing--40); }

/* ============================================== CaterPress storefront */
.cp-catalog-index,
.cp-category-archive,
.cp-single-item-page,
.cp-cart-page,
.cp-checkout-page,
.cp-checkout-confirmation-page {
	max-width: var(--wp--style--global--wide-size, 75rem);
	margin-inline: auto;
	padding-inline: var(--wp--preset--spacing--40);
	padding-block: var(--wp--preset--spacing--60);
	flex: 1 0 auto;
	min-width: 0;
}
.cp-catalog-index__title,
.cp-category-archive__title {
	text-align: center;
	font-family: var(--wp--preset--font-family--heading);
	color: var(--wp--preset--color--maroon);
	margin-bottom: var(--wp--preset--spacing--60);
}

.cp-category-grid,
.cp-item-grid {
	display: grid;
	gap: var(--wp--preset--spacing--50);
	grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 782px) {
	.cp-category-grid,
	.cp-item-grid { grid-template-columns: repeat(var(--cp-columns, 4), 1fr); }
}

.cp-item-card,
.cp-category-card {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20);
	border: none;
	border-radius: 0;
}
.cp-item-card__link,
.cp-category-card { text-decoration: none; color: inherit; }
.cp-item-card__title,
.cp-category-card__title {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--large);
	color: var(--wp--preset--color--dark-green);
	margin: 0;
}
.cp-price {
	font-style: italic;
	color: var(--wp--preset--color--dark-green);
}
.cp-item-image,
.cp-category-image { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }

.cp-item-card__quick-add { display: flex; gap: var(--wp--preset--spacing--20); }
input[type="number"].cp-item-card__qty { width: 4rem; }

.cp-pagination {
	display: flex;
	gap: var(--wp--preset--spacing--40);
	justify-content: center;
	align-items: baseline;
	margin-top: var(--wp--preset--spacing--60);
}
.cp-empty { text-align: center; color: var(--wp--preset--color--dark-green); }

/* --- CaterPress: single item (/menu/{slug}/) --- */
.cp-single-item {
	display: grid;
	gap: var(--wp--preset--spacing--40);
	max-width: 40rem;
	margin-inline: auto;
}
.cp-single-item__title {
	font-family: var(--wp--preset--font-family--heading);
	color: var(--wp--preset--color--maroon);
	text-align: center;
	margin: 0;
}
.cp-single-item__excerpt { color: var(--wp--preset--color--dark-green); }
.cp-single-item__description > * { margin-block: var(--wp--preset--spacing--30); }

.cp-add-to-order { display: grid; gap: var(--wp--preset--spacing--40); }

.cp-variations,
.cp-modifier {
	border: 1px solid var(--wp--preset--color--taupe);
	padding: var(--wp--preset--spacing--40);
	display: grid;
	gap: var(--wp--preset--spacing--20);
}
.cp-variations legend,
.cp-modifier legend {
	font-family: var(--wp--preset--font-family--heading);
	padding-inline: var(--wp--preset--spacing--20);
}
.cp-variations__option,
.cp-modifier__option { display: flex; align-items: baseline; gap: var(--wp--preset--spacing--20); }

.cp-price-standalone { font-size: var(--wp--preset--font-size--medium); }

.cp-single-item__notes-label,
.cp-single-item__qty-label { font-weight: 700; }
input[type="number"].cp-single-item__qty { max-width: 6rem; }

/* --- CaterPress: cart (/cart/) --- */
.cp-cart-page__title,
.cp-checkout-page__title {
	font-family: var(--wp--preset--font-family--heading);
	color: var(--wp--preset--color--maroon);
	text-align: center;
	margin-bottom: var(--wp--preset--spacing--50);
}

.cp-cart__lines { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--wp--preset--spacing--30); }
.cp-cart__line {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
	padding-block: var(--wp--preset--spacing--30);
	border-bottom: 1px solid var(--wp--preset--color--taupe);
}
.cp-cart__line-name { flex: 1 1 auto; min-width: 8rem; font-weight: 700; }
.cp-cart__line-modifiers,
.cp-cart__line-notes {
	flex: 1 0 100%;
	color: var(--wp--preset--color--dark-green);
	font-size: var(--wp--preset--font-size--small);
}
input[type="number"].cp-cart__line-qty { width: 4rem; flex: 0 0 auto; }
.cp-cart__line-total {
	flex: 0 0 auto;
	min-width: 4rem;
	text-align: right;
	font-family: var(--wp--preset--font-family--heading);
	color: var(--wp--preset--color--maroon);
}
.cp-cart__line-remove {
	flex: 0 0 auto;
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
}

.cp-cart__total {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--medium);
	color: var(--wp--preset--color--maroon);
	text-align: right;
	margin-top: var(--wp--preset--spacing--40);
}

.cp-cart__minimum-notice,
.cp-checkout__cancelled-notice,
.cp-checkout__below-minimum,
.cp-checkout-confirmation {
	background: var(--wp--preset--color--taupe);
	padding: var(--wp--preset--spacing--30);
	margin-block: var(--wp--preset--spacing--40);
}

.cp-cart__checkout-link {
	display: inline-block;
	text-decoration: none;
	margin-top: var(--wp--preset--spacing--40);
}

/* --- CaterPress: checkout (/checkout/) --- */
.cp-checkout-form { display: grid; gap: var(--wp--preset--spacing--30); max-width: 34rem; }
.cp-checkout-form > label,
.cp-checkout-address label {
	display: block;
	font-weight: 700;
	margin-bottom: var(--wp--preset--spacing--20);
}
.cp-checkout-form__submit { margin-top: var(--wp--preset--spacing--30); justify-self: start; }

.cp-checkout-fulfillment {
	border: 1px solid var(--wp--preset--color--taupe);
	padding: var(--wp--preset--spacing--40);
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--40);
}
.cp-checkout-fulfillment legend {
	font-family: var(--wp--preset--font-family--heading);
	padding-inline: var(--wp--preset--spacing--20);
}
.cp-checkout-fulfillment label,
.cp-checkout-windows label {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
	font-weight: 400;
}

.cp-checkout-windows { display: grid; gap: var(--wp--preset--spacing--20); }
.cp-checkout-windows p { color: var(--wp--preset--color--dark-green); font-style: italic; }

.cp-checkout-confirmation--error { color: var(--wp--preset--color--maroon); }

/* --- CaterPress: order confirmation (/checkout/confirmation/) --- */
.cp-checkout-confirmation-page__message {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--large);
	color: var(--wp--preset--color--maroon);
	text-align: center;
}

/* ============================================================= Forms */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="search"],
input[type="number"],
input[type="url"],
input[type="password"],
input[type="date"],
textarea,
select {
	font: inherit;
	color: var(--wp--preset--color--dark-green);
	background: var(--wp--preset--color--white);
	border: 1px solid transparent;
	border-radius: 999px;
	padding: 0.75em 1.25em;
	width: 100%;
	max-width: 100%;
}
textarea { border-radius: 1.25em; min-height: 8em; }
input:focus,
textarea:focus,
select:focus {
	outline: 2px solid var(--wp--preset--color--dark-green);
	outline-offset: 2px;
}

/* Native buttons in plugin-rendered markup don't carry .wp-element-button,
 * so this matches theme.json's core button styles for bare <button>/input[submit]. */
button,
.wp-element-button,
input[type="submit"],
.cp-cart__checkout-link,
.cp-item-card__quick-add-button,
.cp-item-card__options-button {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	background: var(--wp--preset--color--sage-bg);
	color: var(--wp--preset--color--dark-green);
	border: 1px solid var(--wp--preset--color--dark-green);
	border-radius: 0;
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--50);
	cursor: pointer;
}
button:hover,
.wp-element-button:hover,
input[type="submit"]:hover,
.cp-cart__checkout-link:hover,
.cp-item-card__quick-add-button:hover,
.cp-item-card__options-button:hover {
	background: var(--wp--preset--color--taupe);
}