/* ALX Lift Services — supplementary front-end styles.
   theme.json + the block editor handle colours, type and spacing;
   this file only covers things blocks can't express on their own:
   sticky header behaviour, the emergency bar, form styling and a
   handful of hover/industrial detailing. */

:root {
	--alx-navy: #0D2B4D;
	--alx-navy-dark: #081B33;
	--alx-steel: #80868B;
	--alx-steel-light: #D8DBDD;
	--alx-charcoal: #1A1A1A;
	--alx-white: #FFFFFF;
	--alx-offwhite: #F4F5F6;
}

/* Frozen header: the emergency bar + logo/nav row are wrapped together
   (see parts/header.html, className "alx-header-fixed") and pinned to
   the very top of the viewport with position: fixed — not
   position: sticky. Sticky stopped working reliably once the theme
   leant more heavily on alignfull blocks: some browsers quietly give
   a sticky element's nearest overflow-affected ancestor an implicit
   "overflow-y: auto" the moment any overflow-x rule (including ones
   WordPress core itself adds, to stop wide/negative-margin blocks
   causing horizontal scrollbars) is set anywhere above it in the
   tree, which is exactly the kind of ancestor WordPress's own block
   markup can introduce without this theme doing anything "wrong".
   position: fixed sidesteps that entirely — it's only ever affected
   by an ancestor transform/filter/perspective, none of which this
   theme applies to anything above the header.
   Because position: fixed removes this bar from the normal page flow,
   assets/js/navigation.js measures its real rendered height (emergency
   bar + nav row together, which varies with font loading/viewport) and
   writes it to the --alx-header-height custom property every time it
   changes, so the page content below always starts exactly where the
   fixed bar ends rather than sliding underneath it. */
.alx-header-fixed {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
	/* This block also carries WordPress's own "full width" className
	   (alignfull) so the site's root layout doesn't squeeze it down
	   to the normal ~780px content column and centre it (which is
	   what happens to any block that ISN'T aligned wide/full) — but
	   alignfull's own CSS pushes an element out to the edges with a
	   negative margin trick (calc(50% - 50vw)), and that stacks badly
	   with the position:fixed + left:0/right:0 above, shoving the
	   whole bar off to the left. These two !important rules cancel
	   just that margin, while position: fixed + left/right: 0 (above)
	   do the actual full-width-and-frozen work on their own. */
	margin-left: 0 !important;
	margin-right: 0 !important;
}
/* When you're logged in, WordPress shows its black admin bar fixed to
   the top of the screen (32px tall, 46px on narrow screens) with a very
   high z-index. A fixed header at top:0 would sit hidden underneath it,
   so only a sliver of the emergency bar would peek out. Push the
   frozen header down by the admin bar's height. Visitors who aren't
   logged in have no admin bar and are unaffected. */
body.admin-bar .alx-header-fixed {
	top: 32px;
}
@media screen and (max-width: 782px) {
	body.admin-bar .alx-header-fixed {
		top: 46px;
	}
}

/* WordPress's blockGap puts a 1.5rem top margin on every child after
   the first inside a constrained group, which would open a see-through
   gap between the emergency bar and the header row. Remove it. */
.alx-header-fixed > * {
	margin-block-start: 0 !important;
}
.alx-site-header {
	box-shadow: 0 1px 0 rgba(13, 43, 77, 0.08);
	transition: box-shadow 0.2s ease;
}
.alx-header-fixed.is-scrolled .alx-site-header {
	box-shadow: 0 4px 16px rgba(13, 43, 77, 0.18);
}
body {
	/* Sensible fallback for the instant before navigation.js measures
	   the real height; immediately replaced with the exact figure. */
	padding-top: var( --alx-header-height, 150px );
}

.alx-emergency-bar a {
	color: inherit;
}

/* Service / sector / news cards: consistent hover lift */
.wp-block-post-template li > .wp-block-group,
.wp-block-query .wp-block-group {
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.wp-block-post-template li:hover > .wp-block-group {
	transform: translateY(-4px);
	box-shadow: 0 12px 24px rgba(13, 43, 77, 0.12);
}

/* Whole-card click target (Service/Sector grid cards): the post
   title's own link is still the only visible <a> in the card, but
   it's stretched via ::after to cover the entire card, so clicking
   anywhere on a card — not just the heading text — opens that
   Service/Sector page. Standard "stretched link" technique; no JS
   needed, and it doesn't change how the title itself looks or reads. */
.alx-clickable-card {
	position: relative;
}
.alx-clickable-card .wp-block-post-title a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

/* Cover / hero: bold industrial diagonal accent */
.alx-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(115deg, transparent 60%, rgba(128,134,139,0.35) 60.5%, rgba(128,134,139,0.35) 62%, transparent 62.5%);
	pointer-events: none;
}

/* Homepage hero with background photo (logo left, graduated photo
   fade — matches the brief's cover page). The photo + navy gradient
   already carry the visual interest, so the diagonal accent above is
   switched off here to avoid competing with the image. */
.alx-hero--photo::after {
	content: none;
}
.alx-hero--photo .wp-block-cover__image-background {
	object-position: right center;
}
@media (max-width: 600px) {
	.alx-hero--photo {
		min-height: 420px !important;
	}
}

/* Homepage hero: the two outline buttons ("View Our Services" and
   "Emergency Call-Out") inherit the Cover block's white text, which
   disappears against the hero's white-to-clear gradient and the pale
   part of the photo. Give them a solid navy fill with white text so
   they're always readable. Matches the filled "Request a Quote" button. */
.alx-hero--photo .wp-block-button.is-style-outline .wp-block-button__link {
	background-color: var(--alx-navy);
	color: var(--alx-white);
	border-color: var(--alx-navy);
}
.alx-hero--photo .wp-block-button.is-style-outline .wp-block-button__link:hover {
	background-color: var(--alx-navy-dark);
	border-color: var(--alx-navy-dark);
}

/* Buttons: sharp industrial edges, uppercase, letter-spacing */
.wp-element-button,
.wp-block-button__link {
	letter-spacing: 0.04em;
}

/* --- Enquiry / quote form (patterns/contact-form.php) --- */
.alx-enquiry-form {
	margin-top: 1.5rem;
}
.alx-enquiry-form p {
	margin: 0 0 1.1rem;
}
.alx-enquiry-form label {
	display: block;
	font-weight: 600;
	font-size: 0.9rem;
	margin-bottom: 0.35rem;
	color: var(--alx-navy);
}
.alx-enquiry-form input[type="text"],
.alx-enquiry-form input[type="email"],
.alx-enquiry-form input[type="tel"],
.alx-enquiry-form input[type="number"],
.alx-enquiry-form input[type="file"],
.alx-enquiry-form select,
.alx-enquiry-form textarea {
	width: 100%;
	box-sizing: border-box;
	padding: 0.65rem 0.75rem;
	border: 1px solid var(--alx-steel-light);
	border-radius: 2px;
	font-family: inherit;
	font-size: 1rem;
	background: #fff;
}
.alx-enquiry-form input:focus,
.alx-enquiry-form select:focus,
.alx-enquiry-form textarea:focus {
	outline: 2px solid var(--alx-navy);
	outline-offset: 1px;
}
.alx-form-row--two {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 1.25rem;
}
@media (max-width: 600px) {
	.alx-form-row--two {
		grid-template-columns: 1fr;
	}
}
.alx-form-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}
.alx-form-consent label {
	font-weight: 400;
	display: flex;
	gap: 0.5rem;
	align-items: flex-start;
}
.alx-form-consent input {
	margin-top: 0.3rem;
}
.alx-enquiry-form button[type="submit"] {
	background: var(--alx-navy);
	color: #fff;
	border: none;
	padding: 0.85rem 2rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	cursor: pointer;
	border-radius: 2px;
}
.alx-enquiry-form button[type="submit"]:hover {
	background: var(--alx-navy-dark);
}
.alx-form-notice {
	padding: 1rem 1.25rem;
	border-radius: 2px;
	margin-bottom: 1.5rem;
	font-weight: 600;
}
.alx-form-notice--success {
	background: #e6f4ea;
	color: #1e5e33;
	border: 1px solid #b7dfc3;
}
.alx-form-notice--error {
	background: #fbe9e7;
	color: #8a2c1f;
	border: 1px solid #f0bdb3;
}

/* Mobile navigation overlay (the full-screen menu opened by the
   hamburger button): navy panel, light centred text, roomy tap targets.
   !important is used because WordPress core sets its own colours and
   alignment on the open overlay, including inline on some blocks. */
.wp-block-navigation__responsive-container.is-menu-open {
	background: var(--alx-navy) !important;
	color: var(--alx-white) !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	display: flex !important;
	flex-direction: column !important;
	justify-content: center !important;
	align-items: center !important;
	text-align: center !important;
	min-height: 100%;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	align-items: center !important;
	justify-content: center !important;
	text-align: center !important;
	gap: 0.25rem !important;
	width: 100%;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	width: 100%;
	justify-content: center !important;
	text-align: center !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:visited {
	color: var(--alx-white) !important;
	font-size: 1.15rem;
	letter-spacing: 0.08em;
	display: block;
	width: 100%;
	padding: 0.85rem 1rem;
	text-align: center !important;
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:last-child .wp-block-navigation-item__content {
	border-bottom: 0;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:focus {
	color: var(--alx-steel-light) !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
	color: var(--alx-white) !important;
}