/*
Theme Name: Bonatar Marking Plate
Theme URI: https://bonatar.com
Author: Bonatar
Author URI: https://bonatar.com
Description: The applied identity for Bonatar — machinery safety and CE certification for shuttle systems and automated guided vehicles. Direction 03, Marking Plate: chamfered nameplate blocks, hazard banding, labelled plate fields, Saira Condensed capitals on Corporate Blue and Safety Gold.
Requires at least: 6.5
Tested up to: 6.8
Requires PHP: 7.4
Version: 1.6.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: bonatar-marking-plate
Tags: block-patterns, full-site-editing, business, one-column, two-columns, custom-colors, custom-logo, custom-menu, editor-style, featured-images, wide-blocks, accessibility-ready
*/

/* ---------------------------------------------------------------
   Marking Plate — the three devices from the brand guide, §06.
   Everything else is handled by theme.json.
   --------------------------------------------------------------- */

:root {
	--bonatar-chamfer: 24px;
	--bonatar-chamfer-lg: 32px;
}

/* 1. The chamfer — top-left and bottom-right corners cut at 45 degrees.
      Never all four: the asymmetry is what makes it read as a cut plate. */
.is-style-chamfer,
.bonatar-chamfer {
	clip-path: polygon(
		var(--bonatar-chamfer) 0,
		100% 0,
		100% calc(100% - var(--bonatar-chamfer)),
		calc(100% - var(--bonatar-chamfer)) 100%,
		0 100%,
		0 var(--bonatar-chamfer)
	);
}

.is-style-chamfer-large,
.bonatar-chamfer-lg {
	clip-path: polygon(
		var(--bonatar-chamfer-lg) 0,
		100% 0,
		100% calc(100% - var(--bonatar-chamfer-lg)),
		calc(100% - var(--bonatar-chamfer-lg)) 100%,
		0 100%,
		0 var(--bonatar-chamfer-lg)
	);
}

/* 2. Hazard banding — 45 degrees, gold and Corporate Blue, constant pitch.
      Once per page at most, full bleed, only at the very top edge. */
.bonatar-hazard {
	min-height: 12px;
	background-image: repeating-linear-gradient(
		45deg,
		var(--wp--preset--color--gold) 0 16px,
		var(--wp--preset--color--brand) 16px 32px
	);
}

/* 3. Plate fields — a mono label above a value, divided by hairlines,
      in a fixed reading order. */
.bonatar-plate-label {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.8125rem;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	margin-bottom: 0.4rem;
}

.bonatar-plate-value {
	font-size: 1.25rem;
	font-weight: 500;
	line-height: 1.3;
	font-variant-numeric: tabular-nums;
}

/* Eyebrow — mono, tracked, the only tracked text in the system. */
.bonatar-eyebrow {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.9375rem;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

/* Figures line up wherever digits stack. */
.bonatar-tnum,
.wp-block-table td,
.wp-block-table th {
	font-variant-numeric: tabular-nums;
}

/* Tables sit on the ground: horizontal dividers only, no outer border. */
.wp-block-table table {
	border-collapse: collapse;
	width: 100%;
}

.wp-block-table thead {
	border-bottom: 2px solid var(--wp--preset--color--brand);
}

.wp-block-table th {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.25rem;
	font-weight: 600;
	text-transform: uppercase;
	text-align: left;
	color: var(--wp--preset--color--brand);
	border: 0;
	padding: 0.75rem 1.5rem 0.75rem 0;
}

.wp-block-table td {
	border: 0;
	border-bottom: 1px solid var(--wp--preset--color--hairline);
	padding: 0.9rem 1.5rem 0.9rem 0;
	vertical-align: top;
}

.wp-block-table tbody tr:last-child td {
	border-bottom: 1px solid var(--wp--preset--color--hairline);
}

/* Corner radius is zero throughout: every corner is square or chamfered. */
.wp-block-button__link,
.wp-block-search__button,
.wp-block-search__input,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
textarea,
select {
	border-radius: 0;
}

/* Forms — plate fields with an input under the label. */
.wp-block-jetpack-contact-form label,
.wp-block-contact-form label,
.wp-block-form .wp-block-form-input__label-content {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.8125rem;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--steel);
}

.wp-block-jetpack-contact-form input[type="text"],
.wp-block-jetpack-contact-form input[type="email"],
.wp-block-jetpack-contact-form input[type="tel"],
.wp-block-jetpack-contact-form textarea,
.wp-block-form input[type="text"],
.wp-block-form input[type="email"],
.wp-block-form input[type="tel"],
.wp-block-form textarea {
	border: 1px solid var(--wp--preset--color--hairline);
	background: var(--wp--preset--color--white);
	padding: 0.75rem;
	font-family: var(--wp--preset--font-family--body);
	font-size: 1.0625rem;
	color: var(--wp--preset--color--graphite);
	width: 100%;
}

/* Reversed lockup: the mark goes white, the check stays gold. */
.has-brand-dark-background-color .wp-block-site-title a,
.has-brand-background-color .wp-block-site-title a,
.has-graphite-background-color .wp-block-site-title a {
	color: var(--wp--preset--color--white);
}

/* Focus is always visible, and always gold. */
:where(a, button, input, textarea, select, summary):focus-visible {
	outline: 2px solid var(--wp--preset--color--gold);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}

/* ---------------------------------------------------------------
   Lockup — the mark and the wordmark, per brand guide section 01.
   The mark is never set by hand next to the word; this is the lockup.
   --------------------------------------------------------------- */
.bonatar-lockup {
	display: inline-flex;
	min-width: 0;
	align-items: center;
	gap: 0.7rem;
	text-decoration: none;
	color: inherit;
}

.bonatar-lockup .bonatar-mark {
	display: block;
	flex: none;
	height: auto;
}

.bonatar-wordmark {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: 1.75rem;
	line-height: 1;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: currentColor;
}

.bonatar-wordmark small {
	display: block;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.5rem;
	font-weight: 500;
	letter-spacing: 0.19em;
	line-height: 1.4;
	text-transform: uppercase;
	opacity: 0.72;
	margin-top: 0.45rem;
}

@media (max-width: 480px) {
	.bonatar-wordmark small { display: none; }
}

/* ---------------------------------------------------------------
   Header bar. Nothing here may force the page wider than the
   viewport: every flex child that holds text gets min-width:0.
   --------------------------------------------------------------- */
.bonatar-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	width: 100%;
	min-width: 0;
}

.bonatar-bar__right {
	display: flex;
	align-items: center;
	gap: 1rem;
	min-width: 0;
}

/* Hamburger. Hidden until the script takes over, so a no-JS visitor
   keeps a plain stacked menu instead of an inert button. */
.bonatar-burger {
	display: none;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	background: transparent;
	color: inherit;
	cursor: pointer;
}

.bonatar-burger svg { display: block; width: 24px; height: 24px; }
.bonatar-burger .bonatar-burger__close,
.bonatar-burger[aria-expanded="true"] .bonatar-burger__open { display: none; }
.bonatar-burger[aria-expanded="true"] .bonatar-burger__close { display: block; }

/* The menu: nav links plus the single call to action. */
.bonatar-menu {
	display: flex;
	align-items: center;
	gap: 1rem 2rem;
	min-width: 0;
	flex-wrap: wrap;
}

.bonatar-nav { min-width: 0; }

.bonatar-nav ul {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.35rem 1.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.bonatar-nav a {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600;
	font-size: 1.125rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-decoration: none;
	color: inherit;
}

.bonatar-nav a:hover,
.bonatar-nav a:focus-visible { color: var(--wp--preset--color--gold); }

/* The one call to action on the site. */
.bonatar-cta {
	display: inline-block;
	flex: none;
	background: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--brand);
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600;
	font-size: 1.0625rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
	padding: 0.6rem 0.9rem;
}

.bonatar-cta:hover,
.bonatar-cta:focus-visible {
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--brand);
}

@media (max-width: 61.9375rem) {
	.bonatar-menu {
		flex-basis: 100%;
		flex-direction: column;
		align-items: flex-start;
		gap: 1rem;
	}

	.bonatar-nav ul { flex-direction: column; gap: 0.9rem; align-items: flex-start; }
	.bonatar-nav a { font-size: 1.375rem; }

	/* Only once the script is running does the panel actually collapse. */
	.js-nav .bonatar-burger { display: flex; }
	.js-nav .bonatar-menu { display: none; }
	.js-nav .bonatar-menu.is-open {
		display: flex;
		padding-top: 1.25rem;
		margin-top: 0.25rem;
		border-top: 1px solid rgba(255, 255, 255, 0.18);
	}
}

/* Language switcher — mono, the one place three-letter codes are set. */
.bonatar-lang ul {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.8125rem;
	font-weight: 500;
	letter-spacing: 0.1em;
}

.bonatar-lang li + li::before {
	content: "";
	display: inline-block;
	width: 1px;
	height: 0.8em;
	margin-right: 0.5rem;
	background: currentColor;
	opacity: 0.35;
	vertical-align: -0.05em;
}

.bonatar-lang a { color: inherit; text-decoration: none; opacity: 0.7; }
.bonatar-lang a:hover,
.bonatar-lang a:focus-visible { opacity: 1; color: var(--wp--preset--color--gold); }
.bonatar-lang [aria-current] { color: var(--wp--preset--color--gold); }

/* Visually hidden, for the menu button's label. */
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* Footer lists */
.bonatar-plainlist {
	margin: 1rem 0 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	font-size: 1rem;
}

.bonatar-plainlist--mono { font-family: var(--wp--preset--font-family--mono); }
.bonatar-plainlist a { color: inherit; }

/* Placeholder marker, used on pages that are still to be written. */
.bonatar-tbd {
	display: inline-block;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--brand);
	background: var(--wp--preset--color--gold);
	padding: 0.3rem 0.6rem;
}