/*
Copyright (c) 2026 Doe & Co. Mechanical LLC

Theme Name: Doe & Co. HVAC Block Theme
Theme URI: https://richpinsoftware.com
Description: Custom Block Theme for Doe & Co. Mechanical LLC
Version: 1.0
Author: Richard Pinegar | Rich Pin Software
Author URI: https://richpinsoftware.com
Tested up to: 7.1
Requires at least: 7.1
Requires PHP: 8.3
License: GNU General Public License v2.0 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: doecohvac_blocktheme

TABLE OF CONTENTS:
 **  1.0 - CSS / WordPress Resets
 **  2.0 - Header
 **  3.0 - Footer
 **  4.0 - Pages
 **  5.0 - Media Queries
 *
 **  Colors, fonts, font sizes and spacing live in theme.json
 **  Block style variations are registered in functions.php, their CSS lives in assets/css/blocks/
*/

/*********************************************************************************
*
* 1.0 - CSS / WordPress Resets
*
*********************************************************************************/
*,
*::before,
*::after {
	box-sizing: border-box;
}

:root { /* Header height lives here so html can offset anchor jumps; :root beats core's admin-bar html rule */
	--doeco-header-height: var(--wp--custom--header-height); /* 8rem, see theme.json > settings.custom */
	--doeco-header-top: var(--wp-admin--admin-bar--height, 0px); /* Sticky header sits under the WP admin bar when present */
	scroll-padding-top: calc(var(--doeco-header-top) + var(--doeco-header-height)); /* Anchor links land below the sticky header */
}

html {
	scroll-behavior: smooth;
	scrollbar-gutter: stable; /* Prevents header elements from shifting when menu opens */
}

body,
h1, h2, h3, h4, h5, h6,
p,
figure,
blockquote,
dl,
dd { /* Reset browser defaults on text blocks */
	margin-block-start: 0;
	margin-block-end: 0;
}

.wp-site-blocks { /* Sticky footer: header, main (fills), footer */
	display: flex;
	flex-direction: column;
	min-height: 100dvh;
}

.admin-bar .wp-site-blocks { /* Adjust the min-height ONLY when the WP admin bar is present */
	min-height: calc(100dvh - var(--wp-admin--admin-bar--height, 0px)); /* 32px, or 46px at 782px and below */
}

.wp-site-blocks > main { /* Column so the page card can stretch down to the footer */
	flex: 1;
	display: flex;
	flex-direction: column;
}

.wp-site-blocks > main > .alignwide { /* Page card fills main on short pages; width keeps it wide despite auto margins */
	flex: 1;
	width: 100%;
}

/* Remove default margin-block on template parts and main */
.wp-site-blocks > .wp-block-template-part,
.wp-site-blocks > main {
	margin-block-start: 0;
	margin-block-end: 0;
}

img,
picture,
video,
canvas,
svg { /* Default baselines */
	display: block;
	max-width: 100%;
	height: auto;
}

input,
button,
textarea,
select { /* Inherit font-style, font-variant, font-weight, font-size, line-height, font-family */
	font: inherit;
}

address {
	font-style: normal;
}

h1, h2, h3, h4, h5, h6 {
	text-wrap: balance;
}

/*
 * Progressive enhancement to reduce widows and orphans
 * https://github.com/WordPress/gutenberg/issues/55190
 */
blockquote, caption, figcaption, p {
	text-wrap: pretty;
}

/* Focus styles */
:where(.wp-site-blocks *:focus) {
	outline-width: 2px;
	outline-style: solid;
}

.no-wrap {
	white-space: nowrap;
}

/*********************************************************************************
*
* 2.0 - Header
*
*********************************************************************************/
.wp-site-blocks > header.wp-block-template-part { /* Sticky on the template part wrapper, since sticky only works inside its parent */
	position: sticky;
	top: var(--doeco-header-top);
	z-index: 1000;
}

.doeco-header { /* Positioned so the dropdown opens directly under the header (no admin-bar math) */
	position: relative;
	z-index: 1000;
	height: var(--doeco-header-height);
	border-bottom: 0.0625rem solid var(--wp--preset--color--doeco-shade);
	box-shadow: 0 0 0.0625rem var(--wp--preset--color--doeco-secondary);
}

.doeco-header__inner { /* Logo left, hamburger right, vertically centered */
	height: 100%;
}

.doeco-header .doeco-logo img { /* Company logo is half the header height */
	width: auto;
	height: calc(var(--doeco-header-height) / 2);
}

.doeco-header .hamburger-button {
	padding: 0;
	border: none;
	background: inherit;
	cursor: pointer;
}

.doeco-header .hamburger-button svg {
	width: calc(var(--doeco-header-height) / 2);
	height: auto;
	vertical-align: middle;
}

.doeco-header .nav-links,
.doeco-header .sub-menu {
	margin: 0;
	padding: 0;
	list-style: none;
}

.doeco-header .nav-links { /* Hide dropdown when not active */
	display: none;
}

.doeco-header .nav-links.active { /* Styles when nav menu is open */
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	z-index: 1000;
	display: flex;
	flex-direction: column;
	max-width: calc(var(--wp--style--global--wide-size) + 3.125rem);
	margin-inline: auto;
	background-color: var(--wp--preset--color--doeco-light);
	box-shadow: var(--wp--preset--shadow--doeco-dropdown);
	max-height: calc(100dvh - var(--doeco-header-top) - var(--doeco-header-height)); /* Header is sticky, so a long menu scrolls inside itself */
	overflow-y: auto;

	& li {
		border-bottom: 0.0625rem solid var(--wp--preset--color--doeco-shade);
	}

	& a {
		display: flex;
		justify-content: center;
		padding: var(--wp--preset--spacing--20) 0;
	}

	& a:hover,
	& a:focus {
		color: var(--wp--preset--color--doeco-light);
		border-right: 0.0625rem solid var(--wp--preset--color--doeco-shade);
		border-left: 0.0625rem solid var(--wp--preset--color--doeco-shade);
		background-color: var(--wp--preset--color--doeco-secondary);
	}

	& .sub-menu {
		color: var(--wp--preset--color--doeco-light);
		background-color: rgb(253 147 61 / 0.9);
	}

	& .sub-menu a:hover,
	& .sub-menu a:focus {
		background-color: var(--wp--preset--color--doeco-primary);
	}
}

/*********************************************************************************
*
* 3.0 - Footer
*
*********************************************************************************/
.doeco-footer {
	border-top: 0.0625rem solid var(--wp--preset--color--doeco-shade);
}

.doeco-footer a:hover,
.doeco-footer a:focus { /* Global link hover is primary, which matches the footer background */
	color: var(--wp--preset--color--doeco-secondary);
}

.doeco-footer .doeco-dev-link a:hover,
.doeco-footer .doeco-dev-link a:focus { /* Intentionally blends into the footer background */
	color: inherit;
}

.doeco-footer .doeco-logo img {
	max-width: 20rem;
	object-fit: contain;
}

.doeco-footer .nav-links {
	margin: 0;
	padding: 0;
	list-style: none;
	text-align: right;
}

/*********************************************************************************
*
* 4.0 - Pages
*
*********************************************************************************/
.doeco-hero { /* Hero text shadow */
	text-shadow: var(--wp--custom--text-shadow);
}

.doeco-hero :is(h1, .doeco-hero__tagline) { /* For transform effect smooth transitions */
	transition: transform 0.9s ease;
}

.doeco-hero:hover :is(h1, .doeco-hero__tagline),
.doeco-hero:focus-within :is(h1, .doeco-hero__tagline) { /* Make hero text pop out when hovering */
	transform: scale(1.015);
}

.commercial-terms-link { /* Service Agreements link to the terms page; global link hover color still applies */
	color: var(--wp--preset--color--doeco-secondary);
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

.commercial-terms-pdf > a:nth-child(2) { /* Hide filename but keep download button */
	display: none;
}

.commercial-terms-pdf > a:nth-child(3) { /* Commercial Terms and Conditions download button, matches the Service Agreements buttons in assets/css/blocks/button.css */
	margin: 0;
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--60);
	border: 0.0625rem solid var(--wp--preset--color--doeco-border);
	border-radius: 8px;
	color: var(--wp--preset--color--doeco-light);
	background-color: rgb(33 157 211 / 0.85);
	box-shadow: none;
	transition: all 0.2s ease;
}

.commercial-terms-pdf > a:nth-child(3):hover,
.commercial-terms-pdf > a:nth-child(3):focus { /* Commercial Terms and Conditions download button hover and focus states */
	opacity: 1; /* Core's file block fades the button to 0.85 on hover, which cancels out the darker background */
	background-color: var(--wp--preset--color--doeco-secondary);
}

@media (prefers-reduced-motion: no-preference) {
	.commercial-terms-pdf > .wp-block-file__embed:not([hidden]) { /* Ease the PDF embed open once core's file script unhides it */
		animation: doeco-pdf-reveal 0.675s ease-out both;
		animation-delay: 35ms; /* Wait for core's file script to unhide the embed */
	}
}

@keyframes doeco-pdf-reveal { /* Embed stays 600px so the PDF viewer doesn't re-layout; the negative margin opens the space and the clip hides the overflow. Update 600px if the block's embed height changes. */
	from {
		opacity: 50%;
		margin-bottom: calc(1em - 600px); /* 1em = core's .wp-block-file__embed margin */
		clip-path: inset(0 0 100% 0);
	}

	to {
		clip-path: inset(0); /* Explicit end value; inset() can't interpolate to "none" */
	}
}

/*********************************************************************************
*
* 5.0 - Media Queries
*
*********************************************************************************/
@media (max-width: 782px) {
	:root {
		--doeco-header-height: 6rem;
	}

	.commercial-terms-pdf > a:nth-child(3) { /* Justify Terms & Conditions download button on tablet and mobile */
		display: flex;
		width: fit-content;
		justify-self: flex-end;
	}
}

@media (max-width: 781px) { /* Matches where core Columns stacks */
	.doeco-404__columns > .wp-block-column:last-child { /* Stacked columns: heading and message on top, image underneath */
		order: -1;
	}
}

@media (max-width: 600px) {
	:root { /* The WP admin bar stops being fixed here and scrolls away, so the header sticks to the very top */
		--doeco-header-top: 0px;
	}
}

@media (max-width: 767px) {
	.doeco-footer__inner { /* One column: nav on top of credits, content centered */
		flex-direction: column-reverse;
		align-items: center !important;
		text-align: center;
	}

	.doeco-footer__credits {
		align-items: center !important;
	}

	.doeco-footer .nav-links {
		text-align: center;
	}

	.doeco-footer .doeco-logo-wrapper {
		display: none;
	}
}

@media (max-width: 400px) {
	:root {
		--doeco-header-height: 5rem;
	}
}

@media (max-width: 374px) {
	.doeco-footer .no-wrap {
		display: block;
	}
}