/* Midnight Towing & Repairs. Front-end and editor stylesheet.
   Design tokens are NOT defined here. They live in theme.json and arrive as
   --wp--preset--* custom properties. This file carries only what theme.json
   cannot express: resets, focus treatment, and the section and component
   rules ported from the approved static build at ../mntrinc-new/assets/site.css.

   Keep the port additive. If a value exists as a preset token, reference the
   token rather than repeating the hex. */

/* ---------- base ---------- */

html {
	scroll-behavior: smooth;
}

@media ( prefers-reduced-motion: reduce ) {
	html {
		scroll-behavior: auto;
	}
}

img {
	max-width: 100%;
	height: auto;
}

/* Amber focus ring, the one place amber is used sitewide. */
:focus-visible {
	outline: 3px solid var( --wp--preset--color--amber );
	outline-offset: 2px;
}

/* theme.json has no property for this, and the display and section sizes are
   large enough that an orphaned last word is obvious. */
h1,
h2,
h3 {
	text-wrap: balance;
}

/* ---------- shared components ---------- */

/* Tracked uppercase kicker that sits above section headings. */
.mntr-eyebrow {
	font-family: var( --wp--preset--font-family--barlow-condensed );
	font-size: var( --wp--preset--font-size--eyebrow );
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var( --wp--preset--color--red );
	margin: 0 0 10px;
}

/* Intro paragraph directly under a heading. On dark sections the preset colour
   class the block carries wins, because core emits those with !important. */
.mntr-lede {
	font-size: var( --wp--preset--font-size--large );
	color: var( --wp--preset--color--lede );
}

/* ---------- header ---------- */

/* The static build stuck header.site to the top. In a block theme the header
   part is wrapped by templates/*.html in .site-header-wrap, and a sticky child
   of a wrapper that is only as tall as itself has nowhere to travel, so the
   wrapper is what sticks.

   Desktop only, deliberately. Below 900px the top contact strip wraps onto two
   or three lines, and a stuck strip that deep would eat the screen of somebody
   reading this next to a broken truck. */
@media ( min-width: 901px ) {
	.site-header-wrap {
		position: sticky;
		top: 0;
		z-index: 50;
	}
}

.mntr-topbar a {
	text-decoration: none;
}

.mntr-topbar a:hover {
	text-decoration: underline;
}

/* Navigation links are white on the ink header, with the red underline the
   static build used for hover and for the current page. */
.mntr-nav a {
	color: var( --wp--preset--color--surface );
	text-decoration: none;
	padding: 6px 0;
	border-bottom: 2px solid transparent;
}

.mntr-nav a:hover,
.mntr-nav a[aria-current="page"] {
	color: var( --wp--preset--color--surface );
	text-decoration: none;
	border-bottom-color: var( --wp--preset--color--red );
}

/* ---------- mobile navigation ---------- */

/* Paired with assets/js/nav.js, which toggles .open on .mntr-nav. The toggle is
   hidden until the nav collapses, and the nav is hidden until the toggle is
   pressed. Both halves have to exist or the button appears to do nothing. */
.mntr-navtoggle {
	display: none;
}

.mntr-nav {
	display: block;
}

@media ( max-width: 900px ) {
	.mntr-navtoggle {
		display: block;
		background: none;
		border: 1px solid var( --wp--preset--color--line-control );
		border-radius: 6px;
		color: var( --wp--preset--color--surface );
		cursor: pointer;
		font: inherit;
		padding: 9px 12px;
	}

	.mntr-nav {
		display: none;
		width: 100%;
	}

	.mntr-nav.open {
		display: block;
	}

	/* Stacked, full width, one tap target per row. */
	.mntr-nav .wp-block-navigation__container {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}

	.mntr-nav .wp-block-navigation-item {
		border-top: 1px solid var( --wp--preset--color--line-dark );
	}

	.mntr-nav a {
		display: block;
		padding: 13px 2px;
		border-bottom: 0;
	}
}

/* ---------- footer ---------- */

/* Link lists in the footer are navigation, not prose, so the bullets go. */
.mntr-footer-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.mntr-footer a,
.mntr-footer-bottom a {
	text-decoration: none;
}

.mntr-footer a:hover {
	text-decoration: underline;
}

/* ---------- posts, search, pagination ---------- */

/* The site ships no blog today. These rules exist because templates/index.html,
   archive.html, search.html and single.html do, so a post added later lands on
   a styled page rather than an unstyled one. */
.mntr-postcard {
	border-bottom: 1px solid var( --wp--preset--color--line );
	padding-bottom: var( --wp--preset--spacing--40 );
}

.mntr-postcard :where( .wp-block-post-title ) a {
	color: var( --wp--preset--color--ink );
	text-decoration: none;
}

.mntr-postcard :where( .wp-block-post-title ) a:hover {
	color: var( --wp--preset--color--red );
}

.mntr-pager a,
.mntr-postnav a {
	font-family: var( --wp--preset--font-family--barlow-condensed );
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	text-decoration: none;
}

.mntr-pager a:hover,
.mntr-postnav a:hover {
	text-decoration: underline;
}

.mntr-searchform .wp-block-search__input {
	padding: 12px 14px;
	border: 1px solid var( --wp--preset--color--line );
	border-radius: 4px;
	background: var( --wp--preset--color--surface );
	color: var( --wp--preset--color--body );
	font: inherit;
}

.mntr-searchform .wp-block-search__button {
	border: 0;
	border-radius: 4px;
	padding: 12px 22px;
	background: var( --wp--preset--color--red );
	color: var( --wp--preset--color--surface );
	font-family: var( --wp--preset--font-family--barlow-condensed );
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	cursor: pointer;
}

.mntr-searchform .wp-block-search__button:hover {
	background: var( --wp--preset--color--red-dark );
}

/* ---------- forms ---------- */

/* Core has no stable form block, so the contact and application forms are hand
   written markup inside wp:html blocks on the home, careers and contact
   patterns. The rules used to be repeated inline in all three; they live here
   now so one edit reaches every copy.

   The submit buttons are disabled on purpose. No handler is wired to these
   forms yet, and a button that accepts a submission and discards it is worse
   than a button that says it is not ready. The note above each button carries
   the phone number and the mailbox that do work. Re-enable the buttons in the
   same commit that wires the handler. */
.mntr-form label {
	display: block;
	margin: 16px 0 6px;
	font-family: var( --wp--preset--font-family--barlow-condensed );
	font-size: var( --wp--preset--font-size--small );
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var( --wp--preset--color--ink );
}

.mntr-form input,
.mntr-form textarea {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid var( --wp--preset--color--line );
	border-radius: 4px;
	background: var( --wp--preset--color--surface );
	color: var( --wp--preset--color--body );
	font: inherit;
}

.mntr-form textarea {
	min-height: 130px;
	resize: vertical;
}

.mntr-form button {
	margin-top: 8px;
	border: 0;
	border-radius: 4px;
	cursor: pointer;
	padding: 14px 26px;
	background: var( --wp--preset--color--red );
	color: var( --wp--preset--color--surface );
	font-family: var( --wp--preset--font-family--barlow-condensed );
	font-size: var( --wp--preset--font-size--base );
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.mntr-form button:hover {
	background: var( --wp--preset--color--red-dark );
}

.mntr-form button[disabled] {
	background: var( --wp--preset--color--muted );
	cursor: not-allowed;
}

.mntr-form button[disabled]:hover {
	background: var( --wp--preset--color--muted );
}

/* Honeypot. Real people never see it, so anything that fills it in can be
   dropped by whatever handler gets wired to these forms. */
.mntr-form .mntr-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* The message shown after a submission redirects back. It sits ABOVE the form
   because that is where the eye returns to after the page reloads, and it is
   role="status" so a screen reader announces it without stealing focus. */
.mntr-formmsg {
	margin: 0 0 20px;
	padding: 12px 14px;
	border-radius: 8px;
	border: 1px solid;
	font-size: var( --wp--preset--font-size--small );
	line-height: 1.5;
}

.mntr-formmsg--ok {
	border-color: #1f7a3d;
	background: #eaf6ee;
	color: #14532a;
}

.mntr-formmsg--bad {
	border-color: var( --wp--preset--color--red );
	background: #fdecea;
	color: #7f1d1d;
}

.mntr-formnote {
	margin: 20px 0 0;
	font-size: var( --wp--preset--font-size--small );
	color: var( --wp--preset--color--muted );
}

/* ---------- FAQ accordion ---------- */

/* Core ships no accordion block, so the details and summary markup is hand
   written in the home pattern, which renders it from mntr_faq_items(). */
.mntr-faq {
	border-top: 1px solid var( --wp--preset--color--line );
}

.mntr-faq details {
	border-bottom: 1px solid var( --wp--preset--color--line );
}

.mntr-faq summary {
	cursor: pointer;
	list-style: none;
	padding: 18px 40px 18px 0;
	position: relative;
	font-family: var( --wp--preset--font-family--barlow-condensed );
	font-size: var( --wp--preset--font-size--x-large );
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var( --wp--preset--color--ink );
}

.mntr-faq summary::-webkit-details-marker {
	display: none;
}

.mntr-faq summary::after {
	content: "+";
	position: absolute;
	right: 6px;
	top: 14px;
	font-size: 26px;
	line-height: 1;
	color: var( --wp--preset--color--red );
}

.mntr-faq details[open] summary::after {
	content: "\2212";
}

.mntr-faq summary:hover {
	color: var( --wp--preset--color--red );
}

.mntr-faq p {
	margin: 0 0 20px;
	max-width: 74ch;
	color: var( --wp--preset--color--body );
}

/* Section patterns append their rules below this line. */