/*
Theme Name: DFI2026 Child
Theme URI: https://dfiproductions.com
Template: dfi2026
Author: DFI Productions
Author URI: https://dfiproductions.com
Description: Child theme of DFI2026. Put site-specific customizations here so the parent theme stays clean and updatable.
Version: 1.0.0
Requires at least: 6.4
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: dfi2026-child
*/

/* ---------------------------------------------------------------------------
 * Site-specific CSS goes below.
 *
 * This file loads AFTER the parent's style.css and after the parent's
 * generated inline CSS (the :root variable blocks from Typography, Top Bar,
 * Header Nav, Mobile Menu, Footer and Blog options), so a plain rule here
 * beats the parent at equal specificity -- no !important needed.
 *
 * To retune the theme's design tokens rather than override rules, redeclare
 * the variables:
 *
 *   :root {
 *       --dfi-footer-bg: #202a4d;
 *       --dfi-nav-hover-color: #cb2c31;
 *   }
 *
 * ------------------------------------------------------------------------ */

/* ---------------------------------------------------------------------------
 * WooCommerce accent color.
 *
 * WooCommerce's own stylesheet (assets/css/woocommerce.css) hard-codes its
 * purple brand color (#7f54b3 / #7249a4 hover) directly on the "alt" button
 * style -- the Add to Cart / Place Order / Proceed to Checkout buttons -- and
 * on the price-filter widget's slider handle. It's not driven by the
 * --wc-primary custom property those hex values shadow, so redeclaring the
 * variable alone wouldn't touch the buttons; both need setting. Selectors
 * mirror WooCommerce's own (same specificity), and this file loads after
 * woocommerce-general-css, so no !important is needed.
 * ------------------------------------------------------------------------ */

:root {
	--woocommerce: #086bbc;
	--wc-primary: #086bbc;
}

.woocommerce #respond input#submit.alt,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
	background-color: #086bbc;
	color: #fff;
}

.woocommerce #respond input#submit.alt:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover {
	background-color: #06579a;
	color: #fff;
}

.woocommerce #respond input#submit.alt.disabled,
.woocommerce #respond input#submit.alt.disabled:hover,
.woocommerce #respond input#submit.alt:disabled,
.woocommerce #respond input#submit.alt:disabled:hover,
.woocommerce a.button.alt.disabled,
.woocommerce a.button.alt.disabled:hover,
.woocommerce a.button.alt:disabled,
.woocommerce a.button.alt:disabled:hover,
.woocommerce button.button.alt.disabled,
.woocommerce button.button.alt.disabled:hover,
.woocommerce button.button.alt:disabled,
.woocommerce button.button.alt:disabled:hover,
.woocommerce input.button.alt.disabled,
.woocommerce input.button.alt.disabled:hover,
.woocommerce input.button.alt:disabled,
.woocommerce input.button.alt:disabled:hover {
	background-color: #086bbc;
	color: #fff;
}

.woocommerce .widget_price_filter .ui-slider .ui-slider-handle,
.woocommerce .widget_price_filter .ui-slider .ui-slider-range {
	background-color: #086bbc;
}

/* ---------------------------------------------------------------------------
 * Product loop cards (shop grid, category archives, related/upsell grids --
 * anywhere WooCommerce renders content-product.php's <ul class="products">).
 *
 * WooCommerce's default here is a bare float grid (li.product floated at a
 * percentage width per .columns-N) with no card treatment at all. Swapping
 * to CSS Grid replaces that whole float/percentage/nth-child system with one
 * rule that also reflows responsively on its own, so the columns-N smallscreen
 * overrides in woocommerce-smallscreen.css no longer need fighting.
 *
 * li.product keeps WooCommerce's own position:relative (untouched here, so
 * the .onsale badge's position:absolute still resolves against the card),
 * and becomes a flex column so a short title doesn't leave the price/button
 * floating mid-card -- .price's margin-top:auto pins it to the bottom of the
 * product link, and Grid's default row-stretch keeps every card in a row the
 * same height regardless of title length.
 * ------------------------------------------------------------------------ */

.woocommerce ul.products,
.woocommerce-page ul.products {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
	gap: 1.75rem;
	margin: 0 0 2.5rem;
}

.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
	float: none;
	width: auto;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid #e6e8eb;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 1px 2px rgba(20, 30, 40, 0.05);
	transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.woocommerce ul.products li.product:hover,
.woocommerce-page ul.products li.product:hover {
	transform: translateY(-6px);
	border-color: #086bbc;
	box-shadow: 0 18px 32px rgba(8, 107, 188, 0.18);
}

.woocommerce ul.products li.product a.woocommerce-loop-product__link {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	color: inherit;
	text-decoration: none;
}

.woocommerce ul.products li.product a.woocommerce-loop-product__link img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: contain;
	display: block;
	margin: 0;
	padding: 1.75rem;
	box-sizing: border-box;
	background: #f4f6f8;
	box-shadow: none;
	transition: transform 0.35s ease;
}

.woocommerce ul.products li.product:hover a.woocommerce-loop-product__link img {
	transform: scale(1.06);
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	margin: 0;
	padding: 1.1rem 1.1rem 0.35rem;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.35;
	color: #1a1a1a;
	min-height: 2.7em;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	transition: color 0.2s ease;
}

.woocommerce ul.products li.product:hover .woocommerce-loop-product__title {
	color: #086bbc;
}

.woocommerce ul.products li.product .star-rating {
	margin: 0 1.1rem 0.5rem;
}

.woocommerce ul.products li.product .price {
	margin: 0;
	padding: 0 1.1rem 1.1rem;
	margin-top: auto;
	font-size: 1.2rem;
	font-weight: 700;
	color: #086bbc;
}

.woocommerce ul.products li.product .price del {
	margin-right: 0.4em;
	font-size: 0.85em;
	font-weight: 400;
	color: #9a9a9a;
	opacity: 1;
}

.woocommerce ul.products li.product .price ins {
	text-decoration: none;
}

.woocommerce ul.products li.product .onsale {
	position: absolute;
	top: 0.75rem;
	left: 0.75rem;
	right: auto;
	z-index: 2;
	min-width: 0;
	min-height: 0;
	margin: 0;
	padding: 0.3em 0.8em;
	border-radius: 999px;
	background-color: #d64545;
	color: #fff;
	font-size: 0.7rem;
	font-weight: 700;
	line-height: 1.6;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.woocommerce ul.products li.product a.button {
	display: block;
	margin: 0 1.1rem 1.1rem;
	padding: 0.6em 1em;
	border: 1.5px solid #086bbc;
	border-radius: 999px;
	background-color: transparent;
	color: #086bbc;
	font-weight: 600;
	text-align: center;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.woocommerce ul.products li.product a.button:hover {
	background-color: #086bbc;
	color: #fff;
}

.woocommerce ul.products li.product a.added_to_cart.wc-forward {
	display: block;
	margin: 0 1.1rem 1.1rem;
	font-size: 0.85rem;
	font-weight: 600;
	text-align: center;
	color: #086bbc;
}

/* ---------------------------------------------------------------------------
 * Vehicle-finder results grid (.apf-results / .apf-card), from the
 * ymm-fitment-foundation plugin's [auto_parts_results] shortcode -- e.g.
 * /find-parts/?fy=2022&fmk=Ford. This is a separate, custom-built product
 * grid (its own markup, not WooCommerce's ul.products li.product), used
 * whenever a shopper searches by Year/Make/Model instead of browsing the
 * shop, so the card styling above never reached it -- it needs its own
 * matching rules here.
 *
 * The shortcode itself prints a small inline <style> block right after
 * .apf-results in the page (see ymm_results_shortcode() in the plugin), as
 * a "safe to override" placeholder. Inline <style> in the body still beats
 * an external stylesheet in <head> at equal selector specificity, since it
 * comes later in the document -- so selectors below add an extra type
 * selector (div.apf-results, div.apf-card, a.apf-card-img img) purely to
 * outrank it; no !important needed.
 * ------------------------------------------------------------------------ */

div.apf-results {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
	gap: 1.75rem;
	margin: 1.5rem 0 2.5rem;
}

div.apf-card {
	display: flex;
	flex-direction: column;
	gap: 0;
	background: #fff;
	border: 1px solid #e6e8eb;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 1px 2px rgba(20, 30, 40, 0.05);
	transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

div.apf-card:hover {
	transform: translateY(-6px);
	border-color: #086bbc;
	box-shadow: 0 18px 32px rgba(8, 107, 188, 0.18);
}

a.apf-card-img {
	display: block;
}

a.apf-card-img img {
	width: 100%;
	aspect-ratio: 1 / 1;
	height: auto;
	object-fit: contain;
	display: block;
	margin: 0;
	padding: 1.75rem;
	box-sizing: border-box;
	background: #f4f6f8;
	transition: transform 0.35s ease;
}

div.apf-card:hover a.apf-card-img img {
	transform: scale(1.06);
}

a.apf-card-title {
	padding: 1.1rem 1.1rem 0.35rem;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.35;
	color: #1a1a1a;
	text-decoration: none;
	min-height: 2.7em;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	transition: color 0.2s ease;
}

div.apf-card:hover a.apf-card-title {
	color: #086bbc;
}

div.apf-card-price {
	padding: 0 1.1rem 1.1rem;
	margin-top: auto;
	font-size: 1.2rem;
	font-weight: 700;
	color: #086bbc;
}

a.apf-card-btn {
	display: block;
	margin: 0 1.1rem 1.1rem;
	padding: 0.6em 1em;
	border: 1.5px solid #086bbc;
	border-radius: 999px;
	background-color: transparent;
	color: #086bbc;
	font-weight: 600;
	text-align: center;
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease;
}

a.apf-card-btn:hover {
	background-color: #086bbc;
	color: #fff;
}

p.apf-results-summary {
	font-size: 1.05rem;
	color: #444;
}

p.apf-results-summary strong {
	color: #086bbc;
}

/* ---------------------------------------------------------------------------
 * Mobile: homepage hero video + parts-finder overlay.
 *
 * 767px matches the breakpoint vimeo-shortcode.js and vimeo.css use for the
 * mobile height mode. The overlay's own <style> is printed in wp_footer (after
 * this file), so selectors are prefixed with #apf-overlay-wrap to win on
 * specificity without !important.
 *
 * The video's real height is set inline by vimeo-shortcode.js (viewport minus
 * top bar + header); 100svh is only the pre-JS paint, so the hero never
 * flashes short before the script runs.
 *
 * Everything inside the overlay is sized in vw so the whole box scales with the
 * phone and fits inside the video. Form controls use max(16px, ...) because iOS
 * Safari zooms the page when a focused field's font is under 16px. If the box
 * ever exceeds the video (short landscape phones) it scrolls instead of
 * clipping the form.
 * ------------------------------------------------------------------------ */

@media (max-width: 767px) {
	.dfivimeo[data-mobile-height-mode="viewport_fill"] {
		height: 100vh;
		height: 100svh;
	}

	#apf-overlay-wrap {
		padding: 3vw;
	}

	#apf-overlay-wrap .apf-overlay-box {
		max-width: 100%;
		max-height: 100%;
		overflow-y: auto;
		padding: 3.5vw 4vw;
		border-radius: 4vw;
		font-size: 3.3vw;
	}

	#apf-overlay-wrap .apf-overlay-text {
		font-size: 3.3vw;
		line-height: 1.4;
		margin-bottom: 3vw;
	}

	#apf-overlay-wrap .apf-finder {
		flex-direction: column;
		flex-wrap: nowrap;
		align-items: stretch;
		gap: 2vw;
	}

	#apf-overlay-wrap .apf-finder .apf-field {
		width: 100%;
	}

	/* Each select already shows its own "Year / Make / Model / Trim" prompt, so
	   the visible labels only repeat it and cost ~14vw of height. Kept for
	   screen readers. */
	#apf-overlay-wrap .apf-finder label {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
		border: 0;
	}

	#apf-overlay-wrap .apf-finder select,
	#apf-overlay-wrap .apf-finder .apf-search {
		width: 100%;
		box-sizing: border-box;
		font-size: max(16px, 4vw);
		padding: 2vw 3vw;
		border-radius: 1.5vw;
	}

	#apf-overlay-wrap .apf-finder .apf-search {
		padding: 2.4vw 3vw;
		font-weight: 600;
	}
}

/* Cloudflare Turnstile widget inside the contact form. */
.dfi-contact-form .cf-turnstile {
	margin: 0 0 1rem;
}

/* Cart icon in the top bar (sits right of the social icons; count badge only
   appears when the cart has items). z-index keeps it above the accent block. */
.top-bar__cart {
	position: relative;
	z-index: 1;
	display: inline-flex;
	color: var(--dfi-social-color, #ffffff);
	font-size: var(--dfi-social-size, 1rem);
	line-height: 1;
	text-decoration: none;
}

.top-bar__cart-count {
	position: absolute;
	top: -0.55em;
	right: -0.8em;
	min-width: 1.4em;
	height: 1.4em;
	padding: 0 0.3em;
	box-sizing: border-box;
	border-radius: 999px;
	background: #ffffff;
	color: #086bbc;
	font-size: 0.62em;
	font-weight: 700;
	line-height: 1.4em;
	text-align: center;
}

@media (max-width: 768px) {
	.top-bar__cart {
		font-size: var(--dfi-social-size-mobile, 1rem);
	}
}