/*
Theme Name: Truax
Theme URI: https://www.truaxnw.com/
Author: Truax Builders Supply
Description: Custom block theme for Truax Builders Supply — windows, doors, storm & security. Serving the Northwest since 1946.
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 7.4
Version: 1.7.1
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: truax
*/

/* ---------- Tokens ---------- */
:root {
	--truax-gutter: max(1.25rem, calc((100% - 1240px) / 2));
	--truax-yellow: var(--wp--preset--color--yellow);
	--truax-ink: var(--wp--preset--color--ink);
	--truax-charcoal: var(--wp--preset--color--charcoal);
	--truax-slate: var(--wp--preset--color--slate);
	--truax-stone: var(--wp--preset--color--stone);
	--truax-line: #e4e0d6;
}

/* Template parts stack with no gaps */
.wp-site-blocks > * { margin-block-start: 0; }
.wp-site-blocks .truax-sections > * { margin-block-start: 0; }

/* ---------- Page measurements (set by the small script in functions.php) ---------- */
:root {
	--truax-header-h: 78px;
	--truax-vw: calc(100vw - var(--truax-sbw, 0px));
	/* One pixel of the 2560 x 1078 storefront photo, in screen pixels. */
	--hu: calc(var(--truax-vw) / 2560);
}

/* ---------- Header ---------- */
header.wp-block-template-part {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 100;
}
.truax-header {
	--truax-logo-w: 130px;
	position: relative;
	background: #fff;
	padding: 0.35rem var(--truax-gutter) 0.3rem calc(var(--truax-gutter) + var(--truax-logo-w) + 1.5rem);
	border-bottom: 4px solid var(--truax-yellow);
	box-shadow: 0 2px 14px rgba(0, 0, 0, 0.06);
	justify-content: flex-end !important;
	gap: 1rem;
}
/* The logo hangs below the menu bar so it overlaps both the header and the photo under it. */
.truax-header .wp-block-site-logo {
	position: absolute;
	top: 0.35rem;
	left: var(--truax-gutter);
	z-index: 5;
	margin: 0;
	line-height: 0;
}
.truax-header .wp-block-site-logo img {
	width: var(--truax-logo-w);
	height: auto;
	display: block;
	filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.32));
	transition: width 0.25s ease;
}
.truax-scrolled .truax-header .wp-block-site-logo img { width: 58px; }
.truax-header__main { flex: 1 1 auto; gap: 0.15rem !important; align-items: flex-end !important; min-width: 0; }
.truax-header__utility {
	align-self: stretch !important;
	text-align: right;
	margin: 0 !important;
	font-size: 0.8rem;
	line-height: 1.25;
	color: var(--truax-ink);
	white-space: nowrap;
}
.truax-header__utility a { color: var(--truax-ink); text-decoration: none; font-weight: 600; }
.truax-header__utility a:hover { text-decoration: underline; text-decoration-color: var(--truax-yellow); text-decoration-thickness: 3px; text-underline-offset: 3px; }
.truax-utility__tagline { font-family: var(--wp--preset--font-family--heading); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; }
.truax-header__utility .truax-sep { color: #a3a3a3; margin: 0 0.55rem; }
.truax-header__cta .wp-block-button__link { font-size: 0.85rem; padding: 0.5rem 1rem; }
.truax-header .truax-search .wp-block-search__inside-wrapper { align-items: center; height: 36px; }
.truax-header .truax-search .wp-block-search__input { height: 36px; padding-top: 0; padding-bottom: 0; }
.truax-header .truax-search .wp-block-search__button { padding: 0.35rem; min-height: 0; height: 34px; }
.truax-header__right { gap: 0.75rem 1.25rem; }
.truax-nav { gap: 0.25rem 1.6rem; }
.truax-nav .wp-block-navigation-item__content { text-decoration: none; padding: 0.35rem 0; }
.truax-nav .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content:hover { box-shadow: inset 0 -3px 0 var(--truax-yellow); }
.truax-nav .wp-block-navigation__submenu-container {
	border: 0 !important;
	border-top: 3px solid var(--truax-yellow) !important;
	box-shadow: 0 14px 30px rgba(0, 0, 0, 0.14);
	padding: 0.4rem 0 !important;
	min-width: 220px !important;
}
.truax-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: 0.55rem 1.1rem !important;
	font-family: var(--wp--preset--font-family--body);
	text-transform: none;
	letter-spacing: 0;
	font-weight: 600;
}
.truax-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover { background: var(--truax-stone); }
.truax-nav .truax-nav__mobile-only { display: none; }
.truax-search .wp-block-search__button { background: transparent; color: var(--truax-ink); padding: 0.35rem; border: 0; }
.truax-search .wp-block-search__button:hover { color: var(--truax-slate); background: transparent; }
.truax-search .wp-block-search__input { border: 1px solid var(--truax-line); border-radius: 3px; }

/* Mobile overlay menu */
.truax-nav .wp-block-navigation__responsive-container.is-menu-open {
	padding: 1.5rem 1.75rem;
	--navigation-layout-justification-setting: flex-start;
	--navigation-layout-justify: flex-start;
	--navigation-layout-align: flex-start;
	text-align: left;
}
.truax-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container,
.truax-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item,
.truax-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container { align-items: flex-start !important; }
.truax-nav .wp-block-navigation__responsive-container.is-menu-open .truax-nav__mobile-only > a {
	background: var(--truax-yellow);
	padding: 0.7rem 1.1rem !important;
	border-radius: 3px;
	margin-top: 0.4rem;
}
.truax-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content { gap: 1.1rem; }
.truax-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content { font-size: 1.15rem; }
.truax-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content { font-size: 1rem; padding: 0.3rem 0 !important; }
.truax-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container { border-top: 0 !important; box-shadow: none; padding: 0.4rem 0 0 1rem !important; }

@media (max-width: 1080px) {
	.wp-block-buttons.truax-header__cta { display: none; }
	.truax-utility__tagline, .truax-header__utility .truax-sep--tag { display: none; }
	.truax-nav { gap: 0.25rem 1.1rem; }
}
@media (max-width: 781px) {
	.truax-header { --truax-logo-w: 88px; }
	.truax-utility__addr, .truax-header__utility .truax-sep--addr { display: none; }
	.truax-scrolled .truax-header .wp-block-site-logo img { width: 50px; }
	.truax-banner { padding-top: 3.25rem !important; }
}
@media (max-width: 480px) {
	.truax-utility__hours, .truax-header__utility .truax-sep--hours { display: none; }
}
@media (max-width: 599px) {
	.truax-nav .truax-nav__mobile-only { display: block; }
}

/* ---------- Buttons ---------- */
.wp-block-button.is-style-outline > .wp-block-button__link {
	background: transparent;
	color: inherit;
	border: 2px solid currentColor;
	padding: calc(0.9rem - 2px) calc(1.5rem - 2px);
}
.wp-block-button.is-style-outline > .wp-block-button__link:hover { background: #fff; color: var(--truax-ink); border-color: #fff; }
.wp-block-button.truax-btn-dark > .wp-block-button__link { background: var(--truax-ink); color: #fff; }
.wp-block-button.truax-btn-dark > .wp-block-button__link:hover { background: var(--truax-yellow); color: var(--truax-ink); }
.wp-block-button.truax-btn-small > .wp-block-button__link { font-size: 0.875rem; padding: 0.6rem 1rem; }

/* ---------- Shared type helpers ---------- */
.truax-eyebrow {
	font-size: 0.875rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--truax-yellow);
	margin-bottom: 0.5rem !important;
}
.truax-eyebrow--dark { color: var(--truax-slate); }
.truax-eyebrow--dark::before {
	content: "";
	display: inline-block;
	width: 1.6rem;
	height: 4px;
	background: var(--truax-yellow);
	vertical-align: middle;
	margin: -2px 0.6rem 0 0;
}
.has-text-align-center.truax-eyebrow--dark::after {
	content: "";
	display: inline-block;
	width: 1.6rem;
	height: 4px;
	background: var(--truax-yellow);
	vertical-align: middle;
	margin: -2px 0 0 0.6rem;
}

/* ---------- Intro band: business name, tagline and the two calls to action ---------- */
.truax-intro > * { margin-left: auto !important; margin-right: auto !important; }
.truax-intro {
	background: #fff;
	/* Top padding clears the logo where it hangs below the menu bar. */
	padding: 4.75rem var(--wp--preset--spacing--30) 3rem;
	text-align: center;
}
.truax-intro__brand {
	font-size: clamp(2.2rem, 5vw, 4.2rem);
	line-height: 1;
	text-transform: uppercase;
	letter-spacing: 0.015em;
	color: var(--truax-ink);
	margin: 0.5rem auto 0 !important;
	max-width: 60rem;
}
.truax-intro__brand::after {
	content: "";
	display: block;
	width: 4.5rem;
	height: 4px;
	background: var(--truax-yellow);
	margin: 0.9rem auto 0;
}
.truax-intro__title {
	font-size: clamp(1.15rem, 2.1vw, 1.9rem);
	line-height: 1.2;
	color: var(--truax-slate);
	margin: 1rem auto 0 !important;
	max-width: 46rem;
}
.truax-intro__lead {
	font-size: clamp(1rem, 1.15vw, 1.2rem);
	line-height: 1.5;
	color: var(--truax-steel);
	max-width: 46rem;
	margin: 0.7rem auto 0 !important;
	text-wrap: balance;
}
.truax-intro__cta { margin-top: 1.7rem !important; gap: 0.8rem; }
.truax-intro__cta .wp-block-button.is-style-outline > .wp-block-button__link {
	color: var(--truax-ink);
	border-color: var(--truax-ink);
	background: transparent;
}
.truax-intro__cta .wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background: var(--truax-ink);
	border-color: var(--truax-ink);
	color: #fff;
}

/* ---------- Storefront photo band ---------- */
.truax-hero-photo { margin: 0 !important; }
.truax-hero-photo img { display: block; width: 100%; height: auto; }

@media (max-width: 781px) {
	.truax-intro { padding-top: 2.75rem; }
	/* On a phone the full-width crop would be a sliver, so show the middle of the building instead. */
	.truax-hero-photo img { aspect-ratio: 2 / 1; object-fit: cover; object-position: 49.5% 50%; }
}

/* ---------- Sections ---------- */
.truax-section { padding: 4.5rem var(--wp--preset--spacing--30); }
.truax-section--stone { background: var(--truax-stone); }
.truax-section h2 { margin-top: 0; }

/* Cards */
.truax-cards { gap: 1.5rem; margin-top: 2.25rem !important; }
.truax-card {
	background: #fff;
	border: 1px solid var(--truax-line);
	border-radius: 6px;
	overflow: hidden;
	gap: 0.6rem !important;
	padding-bottom: 1.4rem;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
	height: 100%;
}
.truax-card:hover { transform: translateY(-4px); box-shadow: 0 16px 32px rgba(0, 0, 0, 0.12); }
.truax-card > * { margin: 0 !important; padding-inline: 1.3rem; }
.truax-card > figure, .truax-card > .wp-block-post-featured-image { padding: 0; margin-bottom: 0.4rem !important; width: 100%; }
.truax-card figure img, .truax-card .wp-block-post-featured-image img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.truax-card h3 { font-size: 1.45rem; }
.truax-card h3 a { color: var(--truax-ink); text-decoration: none; }
.truax-card h3 a:hover { color: var(--truax-slate); }
.truax-card p { color: #4c5157; font-size: 1rem; }
.truax-card .wp-block-buttons { margin-top: auto !important; padding-top: 0.4rem; }
.truax-card .wp-block-post-excerpt__more-text { display: none; }

/* Brands */
.truax-brands { background: #fff; padding: 3rem var(--wp--preset--spacing--30); border-bottom: 1px solid var(--truax-line); }
.truax-brands__row { gap: 1.25rem 2.25rem; margin-top: 1.5rem !important; align-items: center; }
.truax-brands__row figure { margin: 0; }
.truax-brands__row img { height: 46px; width: auto; max-width: 165px; object-fit: contain; filter: grayscale(100%); opacity: 0.8; transition: filter 0.2s, opacity 0.2s; }
.truax-brands__row img:hover { filter: none; opacity: 1; }

/* About with diagonal band */
.truax-about { position: relative; isolation: isolate; padding: 5rem var(--wp--preset--spacing--30) 5.5rem; background: #fff; }
.truax-about::after {
	content: "";
	position: absolute;
	inset: auto 0 -1px 0;
	height: 46%;
	background: var(--truax-slate);
	clip-path: polygon(0 12%, 100% 86%, 100% 100%, 0 100%);
	z-index: -1;
}
.truax-about__cols { gap: 3.5rem; }
.truax-about h2 { margin-top: 0; }
.truax-photo-frame img {
	border: 10px solid #fff;
	box-shadow: 0 22px 44px rgba(0, 0, 0, 0.28);
	transform: rotate(-2deg);
	width: 100%;
	max-width: 480px;
	height: auto;
}
.truax-photo-frame figcaption { color: #fff; font-style: italic; font-size: 0.95rem; margin-top: 1.1rem; text-align: left; }

/* Visit band */
.truax-visit { background: var(--truax-slate); color: #fff; padding: 1rem var(--wp--preset--spacing--30) 4rem; }
.truax-visit h3 { color: var(--truax-yellow); font-size: 1.15rem; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 0.4rem; }
.truax-visit p { margin: 0.15rem 0; font-size: 1.05rem; }
.truax-visit a { color: #fff; }
.truax-visit a:hover { color: var(--truax-yellow); }
.truax-visit .wp-block-columns { padding-top: 1.5rem; gap: 2rem; }

/* ---------- Inner page banner ---------- */
.truax-banner {
	background: var(--truax-slate);
	color: #fff;
	padding: 4.75rem var(--wp--preset--spacing--30) 3rem;
	border-bottom: 6px solid var(--truax-yellow);
}
.truax-banner h1 { margin: 0; color: #fff; font-size: var(--wp--preset--font-size--xx-large); }
.truax-banner p { margin: 0.4rem 0 0; color: #dfe6ee; }
.truax-content { padding-top: 1rem; padding-bottom: 4.5rem; }
.truax-content img { max-width: 100%; height: auto; }
.truax-content table { border-collapse: collapse; width: 100%; }
.truax-content td, .truax-content th { border: 1px solid var(--truax-line); padding: 0.5rem 0.7rem; }

/* Archive grid */
.truax-archive { padding: 3rem var(--wp--preset--spacing--30) 4.5rem; }
.truax-archive .wp-block-post-template { gap: 1.5rem; }
.truax-archive .wp-block-query-pagination { margin-top: 2.5rem; }

/* ---------- Footer ---------- */
.truax-footer { background: var(--truax-charcoal); color: #cfcfcf; padding: 4rem var(--truax-gutter) 1.5rem; font-size: 1rem; }
.truax-footer__cols { gap: 2.5rem; }
.truax-footer .wp-block-site-logo img { width: 104px; height: auto; }
.truax-footer h3 { color: var(--truax-yellow); font-size: 1.05rem; letter-spacing: 0.12em; text-transform: uppercase; margin: 0 0 0.9rem; }
.truax-footer p { margin: 0.2rem 0; }
.truax-footer a { color: #fff; text-decoration: none; }
.truax-footer a:hover { color: var(--truax-yellow); text-decoration: underline; }
.truax-footer ul { list-style: none; padding: 0; margin: 0; }
.truax-footer li { margin: 0.35rem 0; }
.truax-footer__bottom { border-top: 1px solid rgba(255, 255, 255, 0.14); margin-top: 3rem !important; padding-top: 1.25rem; font-size: 0.875rem; color: #9a9a9a; gap: 0.5rem 2rem; }
.truax-footer__bottom p { margin: 0; }

/* ---------- Call Now Button plugin: match brand ---------- */
#callnowbutton, .call-now-button { background-color: var(--truax-yellow) !important; box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.25); }

/* WP AutoTerms adds its own footer link; the theme footer already links the policy */
.wpautoterms-footer { display: none; }

/* ---------- Motion preference ---------- */
@media (prefers-reduced-motion: reduce) {
	.truax-card, .truax-card:hover { transition: none; transform: none; }
}

/* ---------- Product pages: series photos, style grids, colour swatches ---------- */
.truax-lead { font-size: 1.15rem; line-height: 1.6; }
.truax-photo img { width: 100%; max-height: 420px; object-fit: cover; }
.truax-cards.truax-styles .truax-card { padding: 0.65rem; text-align: center; }
.truax-cards.truax-styles .truax-card img { width: 100%; height: auto; }
.truax-cards.truax-styles .truax-card h3 { font-size: 1rem; margin: 0.45rem 0 0; }
.truax-swatches { gap: 0.9rem !important; }
.truax-swatches .truax-card { padding: 0.4rem; text-align: center; background: transparent; box-shadow: none; border: 0; }
.truax-swatches .truax-card img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; border: 1px solid var(--truax-line); margin: 0 auto; }
.truax-swatches .truax-card p { font-size: 0.8rem; margin: 0.45rem 0 0; }
.truax-cta { margin-top: 1.5rem; }
.truax-brandmark img { max-width: 190px; height: auto; margin: 0 auto; display: block; }
.truax-cards .truax-brandmark { margin-bottom: 0.35rem; }
/* Door-model posts: keep the model photo at a sane size and float the dealer logo small. */
.truax-content .wp-block-post-featured-image img { max-height: 520px; width: auto; max-width: 100%; margin: 0 auto; display: block; }
.truax-content > p:first-of-type img[src*="simpsondealerlogo"], .truax-content img[src*="simpsondealerlogo"] { max-width: 150px; height: auto; }

/* ---------- Wide header: menu centred on the page, tools and contact line to the right ---------- */
@media (min-width: 951px) {
	/* Both header rows span the full page width (the logo hangs over the empty left column). */
	.truax-header__utility,
	.truax-header__right {
		align-self: stretch !important;
		justify-content: normal !important;
		display: grid !important;
		grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
		align-items: center;
		width: auto;
		margin-left: calc((var(--truax-logo-w) + 1.5rem) * -1) !important;
		column-gap: 0.75rem;
	}
	.truax-utility__tagline,
	.truax-nav { grid-column: 2; justify-self: center; }
	.truax-utility__contacts,
	.truax-header__tools { grid-column: 3; justify-self: end; }
	.truax-header__tools { display: flex; align-items: center; gap: 0.75rem; }
	.truax-utility__contacts { white-space: nowrap; }
}