/*
Theme Name: MITCORP Modular
Theme URI: https://mitcorpmodular.co.uk
Author: MITCORP Modular
Author URI: https://mitcorpmodular.co.uk
Description: Bespoke block theme for MITCORP Modular — modular building design, supply, manufacture, installation and project management across Kent and the South East. Charcoal, lime and white design system; native Gutenberg blocks; no page builder.
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 8.1
Version: 0.2.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mitcorp-modular
Tags: block-patterns, block-styles, full-site-editing, wide-blocks, custom-colors, custom-logo, featured-images, threaded-comments, translation-ready
*/

/* ─────────────────────────────────────────────────────────────
   Custom CSS layer.
   All colours, fonts and spacing come from theme.json presets —
   never hard-code palette values here; reference the presets.
   ───────────────────────────────────────────────────────────── */

/* Screen-reader text (used by forms, breadcrumbs, skip content) */
.screen-reader-text {
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	overflow-wrap: normal !important;
}

.screen-reader-text:focus {
	background-color: var(--wp--preset--color--white);
	clip-path: none;
	color: var(--wp--preset--color--charcoal);
	display: block;
	font-size: 1rem;
	height: auto;
	left: 0.5rem;
	padding: 0.75rem 1rem;
	top: 0.5rem;
	width: auto;
	z-index: 100000;
}

/* Visible focus — charcoal outline works on light, lime ring on dark */
:focus-visible {
	outline: 2px solid var(--wp--preset--color--charcoal);
	outline-offset: 2px;
	box-shadow: 0 0 0 6px var(--wp--preset--color--lime);
}

/* Smooth scrolling only where motion is welcome */
@media (prefers-reduced-motion: no-preference) {

	html {
		scroll-behavior: smooth;
	}
}

@media (prefers-reduced-motion: reduce) {

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		scroll-behavior: auto !important;
		transition-duration: 0.01ms !important;
	}
}

/* ── Header ─────────────────────────────────────────────────── */

/* Slightly wider than the default wide layout so the full
   navigation fits comfortably on one line at desktop widths. */
body .wp-block-group.mitcorp-header-bar {
	max-width: 84rem;
}

.mitcorp-header .wp-block-site-logo img {
	display: block;
}

/* Compact quote button in the header */
.mitcorp-header-cta .wp-block-button__link {
	padding: 0.55rem 1.15rem;
	white-space: nowrap;
}

/* Raise the burger breakpoint above core's 600px so the desktop
   navigation never wraps awkwardly at tablet/laptop widths.
   Specificity deliberately exceeds core's own overrides. */
@media (max-width: 1099.98px) {

	nav.wp-block-navigation .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}

	nav.wp-block-navigation .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}
}

/* Quote link inside the nav: visible only in the mobile overlay */
@media (min-width: 1100px) {

	.wp-block-navigation-item.mitcorp-nav-quote {
		display: none;
	}
}

/* Tighten nav type where space is tightest (1100–1360px) */
@media (min-width: 1100px) and (max-width: 1359.98px) {

	.mitcorp-header .wp-block-navigation {
		font-size: 0.8rem;
		letter-spacing: 0.03em;
	}
}

/* Hide the header CTA on phones — the overlay menu carries the
   "Request a Quote" link instead. */
@media (max-width: 767.98px) {

	.wp-block-buttons.mitcorp-header-cta {
		display: none;
	}
}

/* Navigation — uppercase construction-sector styling */
.wp-block-navigation {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.wp-block-navigation a {
	text-decoration: none;
}

.wp-block-navigation .wp-block-navigation-item__content:hover {
	text-decoration: underline;
	text-decoration-color: var(--wp--preset--color--lime);
	text-decoration-thickness: 3px;
	text-underline-offset: 0.4em;
}

/* ── Kicker (block style on paragraphs/headings) ────────────── */

.is-style-kicker {
	align-items: center;
	color: var(--wp--preset--color--charcoal);
	display: flex;
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 700;
	gap: 0.75rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.is-style-kicker::before {
	background: var(--wp--preset--color--lime);
	content: "";
	display: inline-block;
	height: 0.3rem;
	width: 2rem;
}

/* ── Card (block style on groups) ───────────────────────────── */

.is-style-card {
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--light-grey);
	border-top: 0.25rem solid var(--wp--preset--color--lime);
	box-shadow: 0 1px 2px rgb(23 27 29 / 8%);
	padding: var(--wp--preset--spacing--lg);
}

/* Card grids (Insights, Projects): native auto-fill grid so cards
   go 3 → 2 → 1 across desktop → tablet → mobile and a single card
   never stretches or collapses to a sliver. */
.wp-block-post-template.mitcorp-card-grid {
	column-gap: var(--wp--preset--spacing--md);
	row-gap: var(--wp--preset--spacing--md);
}

.wp-block-post-template.mitcorp-card-grid .wp-block-post {
	height: 100%;
}

/* Card image slots keep a fixed crop and never shift layout */
.is-style-card .wp-block-post-featured-image img {
	object-fit: cover;
	width: 100%;
}

/* ── Typography refinements ─────────────────────────────────── */

/* Stop lone words/punctuation stranding on their own line */
.wp-block-heading,
.wp-block-post-title {
	text-wrap: balance;
}

p,
.wp-block-post-excerpt__excerpt {
	text-wrap: pretty;
}

/* ── Placeholder imagery ────────────────────────────────────── */

/* Branded image panels supplied with the theme — replaceable in
   the editor until real photography is available. */
.wp-block-image.mitcorp-placeholder img {
	display: block;
	width: 100%;
	height: auto;
}

.wp-block-image figcaption {
	font-size: var(--wp--preset--font-size--sm);
}

/* ── Service rows ───────────────────────────────────────────── */

/* Alternating text/image rows on the Services page */
.mitcorp-service-row {
	border-top: 1px solid var(--wp--preset--color--light-grey);
	padding-top: var(--wp--preset--spacing--xl);
	padding-bottom: var(--wp--preset--spacing--xl);
}

.mitcorp-service-row:first-of-type {
	border-top: 0;
	padding-top: 0;
}

.mitcorp-service-row:last-of-type {
	padding-bottom: 0;
}

/* ── Ticks (block style on lists) ───────────────────────────── */

.is-style-ticks {
	list-style: none;
	padding-left: 0;
}

.is-style-ticks li {
	margin-bottom: 0.5rem;
	padding-left: 1.75rem;
	position: relative;
}

.is-style-ticks li::before {
	background: var(--wp--preset--color--lime);
	content: "";
	height: 1rem;
	left: 0;
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 8.7l3.8 3.8L14 4' fill='none' stroke='black' stroke-width='2.6'/%3E%3C/svg%3E");
	mask-repeat: no-repeat;
	mask-size: contain;
	position: absolute;
	top: 0.35em;
	width: 1rem;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 8.7l3.8 3.8L14 4' fill='none' stroke='black' stroke-width='2.6'/%3E%3C/svg%3E");
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-size: contain;
}

/* ── Delivery process steps ─────────────────────────────────── */

.mitcorp-step__number {
	background: var(--wp--preset--color--lime);
	color: var(--wp--preset--color--charcoal);
	display: inline-grid;
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--lg);
	font-weight: 800;
	height: 3rem;
	place-items: center;
	width: 3rem;
}

/* ── Fine-line sector icons ─────────────────────────────────── */

.mitcorp-icon {
	color: var(--wp--preset--color--charcoal);
	display: block;
	height: 2.75rem;
	width: 2.75rem;
}

.mitcorp-icon .accent {
	stroke: var(--wp--preset--color--lime);
}

/* ── Breadcrumbs ────────────────────────────────────────────── */

.mitcorp-breadcrumbs {
	font-size: var(--wp--preset--font-size--sm);
}

.mitcorp-breadcrumbs ol {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.mitcorp-breadcrumbs li + li::before {
	color: var(--wp--preset--color--mid-grey);
	content: "›";
	margin-right: 0.5rem;
}

.mitcorp-breadcrumbs a {
	color: inherit;
}

/* ── Forms ──────────────────────────────────────────────────── */

.mitcorp-form {
	display: grid;
	gap: var(--wp--preset--spacing--lg);
	max-width: 60rem;
}

.mitcorp-form fieldset {
	border: 1px solid var(--wp--preset--color--light-grey);
	display: grid;
	gap: var(--wp--preset--spacing--md);
	margin: 0;
	padding: var(--wp--preset--spacing--lg);
}

.mitcorp-form legend {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	letter-spacing: 0.06em;
	padding: 0 0.5rem;
	text-transform: uppercase;
}

.mitcorp-form-grid {
	display: grid;
	gap: var(--wp--preset--spacing--md);
	grid-template-columns: 1fr;
}

@media (min-width: 600px) {

	.mitcorp-form-grid {
		grid-template-columns: 1fr 1fr;
	}
}

.mitcorp-checkbox {
	align-items: flex-start;
	display: flex;
	gap: 0.75rem;
}

.mitcorp-checkbox input {
	flex: none;
	height: 1.25rem;
	margin-top: 0.15rem;
	width: 1.25rem;
}

.mitcorp-field {
	display: grid;
	gap: 0.375rem;
}

.mitcorp-field label,
.mitcorp-field .mitcorp-label {
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
}

.mitcorp-required {
	color: var(--wp--preset--color--charcoal);
	font-weight: 700;
}

.mitcorp-field input:not([type="checkbox"]):not([type="file"]),
.mitcorp-field select,
.mitcorp-field textarea {
	background: var(--wp--preset--color--white);
	border: 1.5px solid var(--wp--preset--color--charcoal);
	border-radius: 0;
	color: var(--wp--preset--color--body);
	font: inherit;
	padding: 0.625rem 0.75rem;
	width: 100%;
}

.mitcorp-field textarea {
	min-height: 9rem;
	resize: vertical;
}

.mitcorp-field input[type="file"] {
	font: inherit;
	width: 100%;
}

.mitcorp-field-hint {
	color: var(--wp--preset--color--body);
	font-size: var(--wp--preset--font-size--sm);
	margin: 0;
}

/* Optional-field marker sits alongside the required asterisk */
.mitcorp-optional {
	color: var(--wp--preset--color--mid-grey);
	font-weight: 400;
}

/* Native validation feedback (only after interaction) */
.mitcorp-form .mitcorp-field input:user-valid,
.mitcorp-form .mitcorp-field select:user-valid,
.mitcorp-form .mitcorp-field textarea:user-valid {
	border-color: var(--wp--preset--color--charcoal);
}

.mitcorp-form .mitcorp-field input:not([type="checkbox"]):user-invalid,
.mitcorp-form .mitcorp-field select:user-invalid,
.mitcorp-form .mitcorp-field textarea:user-invalid {
	border-color: #B3261E;
	outline: 1px solid #B3261E;
	outline-offset: -1px;
}

/* Accessible status region reserved for success/error messaging once
   a delivery handler is connected. Kept empty on the front end now. */
.mitcorp-form-status {
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	margin: 0;
	padding: 0.85rem 1rem;
}

.mitcorp-form-status.is-success {
	background: var(--wp--preset--color--lime);
	color: var(--wp--preset--color--charcoal);
}

.mitcorp-form-status.is-error {
	background: #B3261E;
	color: var(--wp--preset--color--white);
}

.mitcorp-form-status:empty {
	display: none;
}

/* Honeypot — hidden from people, visible to bots */
.mitcorp-form .mitcorp-hp {
	clip-path: inset(50%);
	height: 1px;
	overflow: hidden;
	position: absolute;
	width: 1px;
}

/* ── Footer ─────────────────────────────────────────────────── */

.mitcorp-footer {
	border-top: 0.35rem solid var(--wp--preset--color--lime);
}

.mitcorp-footer .wp-block-navigation {
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	letter-spacing: 0.03em;
	text-transform: none;
}

.mitcorp-footer .wp-block-site-logo img {
	display: block;
}

.mitcorp-footer-heading {
	font-family: var(--wp--preset--font-family--heading);
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.mitcorp-footer-cta .wp-block-button__link {
	padding: 0.55rem 1.15rem;
}

/* ── WordPress alignment helpers ────────────────────────────── */

.alignfull > .wp-block-group {
	padding-left: 0;
	padding-right: 0;
}

/* Content links: underline thickens to lime on hover (text stays AA).
   Declared last so the :hover rule follows all lower-specificity selectors. */
.wp-block-post-content a,
.wp-block-post-excerpt__excerpt a {
	text-decoration-thickness: 2px;
	text-underline-offset: 0.2em;
}

.wp-block-post-content a:hover,
.wp-block-post-excerpt__excerpt a:hover {
	text-decoration-color: var(--wp--preset--color--lime);
}