/*
 * Pizza Ranch Manuals: site-wide rules that theme.json cannot express.
 * Colors read the palette in theme.json. Change a brand color there, not here.
 */

:root {
	--prm-maroon: var(--wp--preset--color--maroon, #ad1f2a);
	--prm-cream: var(--wp--preset--color--cream, #f0e4d1);
	--prm-brown: var(--wp--preset--color--brown, #4c2310);
	--prm-slate: var(--wp--preset--color--slate, #415465);
	--prm-tan: var(--wp--preset--color--tan, #d6a471);
	--prm-red: var(--wp--preset--color--red, #dd3328);
	--prm-allergen: var(--wp--preset--color--allergen, #c300ff);
	--prm-white: var(--wp--preset--color--base, #ffffff);
	--prm-black: var(--wp--preset--color--contrast, #000000);
	--prm-font-heading: var(--wp--preset--font-family--roboto-condensed, "Roboto Condensed", "Trebuchet MS", sans-serif);
	--prm-weight-body: 400; /* body copy weight; headings and labels are 700 */
	--prm-radius-sm: 5px;
	--prm-radius-md: 10px;
	--prm-radius-lg: 15px;
	--prm-radius-pill: 1000px;
}

/* ---------- Keyboard focus: a 2px brown ring, white on the maroon header ---------- */

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--prm-brown);
	outline-offset: 2px;
}

.prm-header :focus-visible {
	outline-color: var(--prm-white);
}

/* ---------- Header: maroon bar, white logo, caps navigation ---------- */

.prm-header .prm-logo {
	margin: 0;
}

.prm-header .prm-logo a {
	display: block;
	padding: 10px 10px 10px 0; /* the logo's clear space */
}

.prm-header .prm-logo img {
	display: block;
	width: 158px;
	height: auto;
}

.prm-header .wp-block-navigation a,
.prm-header .wp-block-navigation a:hover {
	color: var(--prm-white);
	font-weight: 700;
	text-decoration: none;
}

.prm-header .wp-block-navigation .wp-block-navigation-item__content {
	padding: 12px 0;
	border-bottom: 3px solid transparent;
}

.prm-header .wp-block-navigation .wp-block-navigation-item__content:hover,
.prm-header .wp-block-navigation .current-menu-item > .wp-block-navigation-item__content,
.prm-header .wp-block-navigation .wp-block-navigation-item__content[aria-current="page"] {
	border-bottom-color: var(--prm-cream);
}

.prm-header .wp-block-navigation .wp-block-navigation__container {
	gap: 8px 36px;
}

.prm-header .wp-block-navigation__responsive-container-open,
.prm-header .wp-block-navigation__responsive-container-close {
	color: var(--prm-white);
	min-width: 44px;
	min-height: 44px;
}

/* ---------- Footer: cream ground, brown text ---------- */

.prm-footer a {
	color: inherit;
}

.prm-footer .wp-block-site-tagline {
	margin: 0;
}

/* ---------- Tables: cream header row, tan grid lines ---------- */

.wp-block-table {
	overflow-x: auto;
}

.wp-block-table table {
	width: 100%;
	border-collapse: collapse;
}

.wp-block-table thead {
	border-bottom: 0;
}

.wp-block-table th {
	padding: 10px 12px;
	border: 1px solid var(--prm-tan);
	background: var(--prm-cream);
	color: var(--prm-brown);
	font-family: var(--prm-font-heading);
	font-size: 0.875rem;
	font-weight: 700;
	letter-spacing: 0.4px;
	text-align: left;
	text-transform: uppercase;
}

.wp-block-table td {
	padding: 10px 12px;
	border: 1px solid var(--prm-tan);
}

/* ---------- Allergen Alert ----------
 * Pick "Allergen Alert" under Styles for a paragraph or group. The second
 * selector also catches callouts that still carry the purple as a typed-in
 * color, so older docs read correctly before they are converted.
 */

.is-style-allergen-alert,
p.has-background[style*="c300ff" i] {
	padding: 14px 16px;
	background-color: var(--prm-allergen) !important;
	color: #000000 !important;
}

.is-style-allergen-alert a,
p.has-background[style*="c300ff" i] a {
	color: #000000 !important;
	text-decoration: underline;
}

/* ---------- The print-only logo stays hidden on screen ---------- */

.prm-print-logo {
	display: none;
}

/* ---------- Colors added in the Site Editor before this theme ----------
 * Content that used the old "custom-pr-…" swatches keeps its color.
 */

.has-custom-pr-maroon-color { color: var(--prm-maroon) !important; }
.has-custom-pr-cream-color { color: var(--prm-cream) !important; }
.has-custom-pr-brown-color { color: var(--prm-brown) !important; }
.has-custom-pr-slate-color { color: var(--prm-slate) !important; }
.has-custom-pr-tan-color { color: var(--prm-tan) !important; }
.has-custom-pr-red-color { color: var(--prm-red) !important; }
.has-custom-pr-moss-color { color: var(--wp--preset--color--moss, #86856a) !important; }
.has-custom-pr-orange-color { color: var(--wp--preset--color--orange, #cd732c) !important; }
.has-custom-pr-yellow-color { color: var(--wp--preset--color--yellow, #eca83a) !important; }

.has-custom-pr-maroon-background-color { background-color: var(--prm-maroon) !important; }
.has-custom-pr-cream-background-color { background-color: var(--prm-cream) !important; }
.has-custom-pr-brown-background-color { background-color: var(--prm-brown) !important; }
.has-custom-pr-slate-background-color { background-color: var(--prm-slate) !important; }
.has-custom-pr-tan-background-color { background-color: var(--prm-tan) !important; }
.has-custom-pr-red-background-color { background-color: var(--prm-red) !important; }
.has-custom-pr-moss-background-color { background-color: var(--wp--preset--color--moss, #86856a) !important; }
.has-custom-pr-orange-background-color { background-color: var(--wp--preset--color--orange, #cd732c) !important; }
.has-custom-pr-yellow-background-color { background-color: var(--wp--preset--color--yellow, #eca83a) !important; }