/*
Theme Name: M4L Auto Body
Theme URI: https://satisapps.com/
Author: SatisApps LLC
Author URI: https://satisapps.com/
Description: A lightweight, fast block theme built for M4L Estimating & Auto Body Repairs. Every image, video and word on the site is editable from Pages and the Media Library. No page builder and no code required.
Requires at least: 6.5
Tested up to: 6.8
Requires PHP: 7.4
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: m4l-autobody
Tags: block-theme, full-site-editing, one-column, business, custom-logo, custom-menu, editor-style, block-patterns
*/

/* ---------------------------------------------------------------------------
   Nearly all styling lives in theme.json. This file holds only the few rules
   that theme.json cannot express. Keep it small.
   --------------------------------------------------------------------------- */

/* Full-page brand watermark: subtle emblem centered in the background */
body::before {
	content: "";
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: min(85vw, 650px);
	height: min(85vw, 650px);
	background-image: url("assets/logo.jpg");
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	opacity: 0.045;
	mix-blend-mode: multiply;
	pointer-events: none;
	z-index: 0;
}

/* Site logo: the supplied artwork is a square JPEG on a white field, so it is
   sized conservatively and given a white backdrop to avoid a visible seam. */
.wp-block-site-logo img {
	height: auto;
	background-color: #ffffff;
}

/* Header: thin hairline so the white logo field reads as intentional. */
.m4l-header {
	border-bottom: 1px solid var(--wp--preset--color--border);
}

/* Mobile header.
   Measured at 375px the header was 193px tall, a quarter of the screen,
   because the logo and the action row each took a full line. Keeping all
   three on one row and shrinking the logo brings it under 90px, so visitors
   see actual content when the page loads. */
@media (max-width: 781px) {
	.m4l-header .wp-block-group.is-layout-flex {
		flex-wrap: nowrap;
	}

	.m4l-header .wp-block-site-logo img {
		width: 56px;
	}

	.m4l-header .m4l-header-actions {
		width: auto;
		gap: 0.75rem;
		flex-wrap: nowrap;
	}

	/* Markup order is nav then call button. On a phone the menu button reads
	   better on the outside edge, to the right of the number. */
	.m4l-header .m4l-header-actions .wp-block-navigation {
		order: 2;
	}

	.m4l-header-cta .wp-block-button__link {
		font-size: 0.85rem;
		padding-left: 0.85rem;
		padding-right: 0.85rem;
	}
}

/* Tighter side margins on phones. 32px each side leaves only 311px of
   content on a 375px screen, which forces awkward wrapping in headings and
   card text. */
@media (max-width: 599px) {
	body {
		--wp--style--root-padding-left: 20px;
		--wp--style--root-padding-right: 20px;
	}

	.wp-block-cover.m4l-hero .wp-block-cover__inner-container {
		padding-left: 20px;
		padding-right: 20px;
	}
}

/* The hero paragraph at 19px over four lines dominates the first screen.
   Bring it back to body size on phones so the headline leads. */
@media (max-width: 599px) {
	.wp-block-cover.m4l-hero p.has-large-font-size {
		/* WordPress emits its preset font-size classes with !important, so
		   specificity alone cannot win here. */
		font-size: var(--wp--preset--font-size--medium) !important;
	}
}

/* The mobile menu overlay inherits right alignment from the desktop nav,
   which leaves the links floating against the edge of an empty screen.
   Left align them and give them room to breathe. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	align-items: flex-start;
	justify-content: flex-start;
	padding-top: 1rem;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	align-items: flex-start;
	/* The desktop nav is right aligned, and that justification leaks into the
	   overlay, leaving each link sitting at a different indent. */
	justify-content: flex-start;
	gap: 0.25rem;
	width: 100%;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	width: 100%;
}

/* Core zeroes padding on overlay menu links with a four class selector, so
   this has to match that shape to win. Without it the links are 34px
   tall, under the 44px comfortable tap target. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item__content {
	display: block;
	width: 100%;
	text-align: left;
	padding-block: 0.85rem;
	font-size: 1.25rem;
	border-bottom: 1px solid var(--wp--preset--color--border);
}

/* The call button is the primary action on a phone, so keep it legible
   rather than shrinking it to fit alongside everything else. */
.m4l-header-cta .wp-block-button__link {
	white-space: nowrap;
}

/* Navigation: give tap targets real size on touch screens (375px target). */
.wp-block-navigation .wp-block-navigation-item__content {
	padding-block: 0.5rem;
}

/* Service cards: a purple rule along the top gives the grid a brand anchor
   without needing icons or images the owner would have to maintain. Applied
   by class so a duplicated card keeps the styling automatically. */
.m4l-service-card {
	border-top: 3px solid var(--wp--preset--color--primary);
	border-radius: 4px;
}

/* Equal-height cards so a short description does not leave a ragged row. */
.wp-block-columns:not(.is-not-stacked-on-mobile) > .m4l-service-card {
	align-self: stretch;
}

/* Tap targets.
   Core ships the mobile menu button at 24px and the gallery lightbox trigger
   at 20px. Both are well under the 44px that is comfortable on a phone, and
   the menu button is the only navigation on mobile. */
.wp-block-navigation__responsive-container-open {
	min-width: 44px;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.wp-lightbox-container button.lightbox-trigger {
	min-width: 44px;
	min-height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Gallery: keep a consistent gutter and let images breathe on small screens.
   Removing or adding one image never reflows the rest of the page. */
.wp-block-gallery.has-nested-images {
	gap: 0.75rem;
}

@media (max-width: 599px) {
	.wp-block-gallery.has-nested-images.columns-default figure.wp-block-image:not(#individual-image) {
		width: calc(50% - 0.375rem);
	}
}

/* Service cards stay two-up on tablet. WordPress stacks all columns below
   782px, which wastes half the width on an iPad. The floor is 700px rather
   than 600px because below that each card has under 200px of usable text
   width once padding is removed, which reads badly. */
@media (min-width: 700px) and (max-width: 781px) {
	.wp-block-columns.m4l-service-row {
		flex-wrap: nowrap;
	}

	.wp-block-columns.m4l-service-row > .wp-block-column {
		flex-basis: 0 !important;
		flex-grow: 1;
	}
}

/* Video blocks: never overflow their container on mobile. */
.wp-block-video video {
	width: 100%;
	height: auto;
	display: block;
}

/* Footer on phones. The four columns stack, and left-aligned stacked blocks
   read as adrift, so centre the whole thing. */
@media (max-width: 781px) {
	.wp-site-blocks > footer .wp-block-columns,
	.wp-site-blocks > footer .wp-block-column {
		text-align: center;
	}

	.wp-site-blocks > footer .wp-block-column {
		align-items: center;
	}

	.wp-site-blocks > footer .wp-block-separator {
		margin-left: auto;
		margin-right: auto;
	}
}

/* Links on dark backgrounds.
   theme.json sets link colour to the brand purple globally, which reads
   well on white (about 9:1) but only reaches 2:1 against the near-black
   footer, far below the 4.5:1 WCAG AA minimum for body text. A lighter tint
   of the same hue measures about 9.8:1 while staying on brand.
   Scoped to dark surfaces rather than added to the palette, so it cannot be
   picked by mistake for text on a white background where it would fail. */
footer a,
.has-contrast-background-color a,
.wp-block-cover a:not(.wp-element-button) {
	color: #c4b5fd;
}

footer a:hover,
footer a:focus-visible,
.has-contrast-background-color a:hover,
.has-contrast-background-color a:focus-visible {
	color: #ffffff;
	text-decoration: underline;
}

/* Footer mobile alignment: center all columns and text when stacked. */
@media (max-width: 781px) {
	.m4l-footer {
		text-align: center;
	}
}

/* Header, main and footer are siblings at the root, so the global blockGap
   inserts 24px between them. That shows up as a white strip under the header
   and above the footer whenever the adjacent section has a dark background.
   These three regions should always sit flush; their own padding handles
   internal spacing. */
.wp-site-blocks > header,
.wp-site-blocks > main,
.wp-site-blocks > footer {
	margin-block-start: 0;
	margin-block-end: 0;
}

/* Spacing between page content and the footer.
   A page ending in a full-width band (the dark call to action) should meet
   the footer with no gap, or a white strip appears between two dark
   sections. Anything ending in ordinary content needs breathing room.
   Handled here rather than with a spacer block in the template, so it stays
   correct whatever the last block turns out to be. */
.entry-content > :last-child:not(.alignfull) {
	margin-bottom: var(--wp--preset--spacing--50);
}

.entry-content > .alignfull:last-child {
	margin-bottom: 0;
}

/* Cover blocks used as hero sections: guarantee legible text if the owner
   later drops in a bright photo as the background. */
.wp-block-cover.m4l-hero .wp-block-cover__inner-container {
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}

/* Contact Form 7, when present. Styles are scoped so the theme stays usable
   if the plugin is ever deactivated. */
.wpcf7-form label {
	display: block;
	font-weight: 600;
	margin-bottom: 1rem;
}

.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form textarea {
	/* Without this, width:100% plus padding and border renders wider than the
	   column and the fields run off the right edge of a phone screen. */
	box-sizing: border-box;
	width: 100%;
	padding: 0.7rem 0.85rem;
	margin-top: 0.35rem;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 4px;
	font: inherit;
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
}

.wpcf7-form input:focus-visible,
.wpcf7-form textarea:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 1px;
}

.wpcf7-form input[type="submit"] {
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
	border: 0;
	border-radius: 4px;
	padding: 0.85rem 1.75rem;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

.wpcf7-form input[type="submit"]:hover {
	background-color: var(--wp--preset--color--accent);
}

/* Visible focus ring everywhere, for keyboard users. */
:where(a, button, input, textarea, select, summary):focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
}

/* Respect reduced-motion preferences. */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}