/* =========================================================================
 * EasyAuto123 storefront branding (DLR-3).
 *
 * Restyles the shared DealerPortal storefront into the EasyAuto123 vibe:
 * white elevated nav, navy headings/links, square yellow CTAs, clean
 * image-led product tiles. Every colour and font is a var(--dp-*) token
 * emitted from the tenant profile (functions.php dealer_portal_brand_inline_vars),
 * so this sheet is BRAND-NEUTRAL — it carries no EA123 hex literals.
 *
 * It is ENQUEUED ONLY for tenants that declare the extended palette
 * (profile `navy_hex`), which today is EasyAuto123 alone; BYD declares none,
 * so BYD never loads this file and its storefront is untouched. The sheet
 * depends on dealer-portal-style + dealer-portal-woocommerce so it prints
 * after them and wins equal-specificity ties on source order.
 *
 * Source of truth: tenants/easyauto123/STYLE-GUIDE.md.
 * ====================================================================== */

/* -------------------------------------------------------------------------
 * 1. Header / nav — replicates the live easyauto123.com.au header: a white bar
 *    with the Material elevation shadow, the logo pinned LEFT, the portal's
 *    utility links as grey 16/700 horizontal nav, and a square yellow CTA
 *    flush to the top-right corner. Values ripped from the live site
 *    (getComputedStyle, 2026-11-02): nav 16px/700, letter-spacing 0.7px, text
 *    grey #4D4D4F (var --dp-body), hover = light-grey (var --dp-border) rounded
 *    pill; CTA 14px/700 uppercase on yellow, sharp corners, full bar height.
 * ---------------------------------------------------------------------- */
.dth-header {
	background-color: #fff;
	position: relative;
	z-index: 20;
	/* STYLE-GUIDE.md "Nav / header": Material elevation, no bottom border. */
	box-shadow:
		0 3px 1px -2px rgba(0, 0, 0, 0.2),
		0 2px 2px 0 rgba(0, 0, 0, 0.14),
		0 1px 5px 0 rgba(0, 0, 0, 0.12);
}

/* The logo row carries an inline 1px dark bottom border from the template part;
 * the brand separates the header with the shadow above instead, so drop it. */
.dth-header__main {
	border-bottom: 0 !important;
}

/* Desktop (>1024): collapse the two stacked rows into one bar — logo left,
 * nav right — matching live. The shared markup is utility (nav) then main
 * (logo) in the DOM, so flex-order puts the logo first (left) and floats the
 * nav to the right. Full-width white bar + shadow; content inset to a centred
 * 1280px band via symmetric padding (no inner wrapper to add in shared markup).
 * The mobile (≤1024) hamburger layout in style.css is untouched. */
@media (min-width: 1025px) {
	.dth-header {
		display: flex;
		flex-direction: row;
		align-items: stretch;
		flex-wrap: nowrap;
		min-height: 90px;
		padding-left: max(24px, calc((100% - 1280px) / 2));
	}

	.dth-header__main {
		order: 0;
		margin-right: auto;
		display: flex;
		align-items: center;
		padding-top: 0;
		padding-bottom: 0;
	}

	.dth-header__utility {
		order: 1;
		display: flex;
		align-items: stretch;
		padding: 0;
	}

	.dth-header__utility > .wp-block-group,
	.dth-account-nav {
		display: flex;
		align-items: stretch;
		height: auto;
		width: 100%;
	}

	.dth-account-menu {
		align-items: stretch;
		gap: 4px;
		margin: 0;
		height: auto;
	}

	/* Logo presence: lift the inline 120px up to ~170px so it anchors the bar. */
	.dth-site-logo img {
		width: 170px !important;
		height: auto !important;
	}
}

/* Utility links: grey, mixed-case (labels already caps), brand tracking, with
 * a light-grey rounded-pill hover exactly like the live nav items. */
.dth-account-menu__item {
	display: flex;
	align-items: center;
}

.dth-account-menu__item a {
	color: var(--dp-body);
	text-transform: none;
	letter-spacing: 0.7px;
	font-size: 16px;
	font-weight: 700;
	padding: 6px 10px;
	border-radius: 4px;
	line-height: 1.2;
}

.dth-account-menu__item a:hover {
	color: var(--dp-body);
	background-color: var(--dp-border);
	opacity: 1;
}

/* Primary nav CTA: the first account-menu item reads as the brand's square
 * yellow button ("REQUEST ACCESS" logged-out, "MY ACCOUNT"/"MANAGE" logged-in)
 * pinned to the far top-right, flush to the 1280px edge and full bar height —
 * the live "CONTACT US" treatment. Navy text on yellow, sharp corners,
 * uppercase. order:10 floats it past the text links to the right edge. */
.dth-account-menu__item:first-child {
	order: 10;
	margin-left: 8px;
	align-items: stretch;
}

.dth-account-menu__item:first-child a {
	background-color: var(--dp-yellow);
	color: var(--dp-cta-text);
	font-weight: 700;
	font-size: 14px;
	text-transform: uppercase;
	border-radius: 0;
	display: flex;
	align-items: center;
	padding: 0 24px;
}

.dth-account-menu__item:first-child a:hover {
	background-color: var(--dp-primary-hover);
	color: var(--dp-cta-text);
	opacity: 1;
}

/* -------------------------------------------------------------------------
 * 2 + 3. Category grid tiles (home `.home` grid + any category archive that
 *    lists sub-categories). Classic WooCommerce category-loop markup, NOT the
 *    Product Collection block:
 *      .woocommerce ul.products > li.product-category > a
 *         > span.dth-cat-thumb > img  +  h2.woocommerce-loop-category__title
 *    Brand card = white box with a 1px yellow hairline, soft shadow, navy
 *    title, and a yellow SHOP NOW CTA pinned to the card bottom. The whole <a>
 *    is the card body (image + title), so the CTA is an ::after on that single
 *    link — the whole card stays one click target, no template edit needed.
 *    Scoped to li.product-category so real product tiles (which carry prices)
 *    are left alone.
 * ---------------------------------------------------------------------- */

/* Grid: comfortable card width, even gap, reflow to fewer columns down the
 * breakpoints with no media queries. auto-fill + minmax keeps the 1280px
 * container but lets the cards breathe and collapse responsively. */
.woocommerce ul.products {
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important;
	gap: 24px !important;
}

/* The card box lives on the li. ul.products is a CSS grid, so every li in a row
 * is stretched to equal height; a flex-column li + a margin-top:auto CTA then
 * aligns every SHOP NOW button on a shared baseline. */
.woocommerce ul.products li.product-category {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--dp-yellow);
	border-radius: 8px !important;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
	padding: 22px;
	text-align: center;
	overflow: hidden;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

/* Hover: subtle lift + slightly stronger shadow. */
.woocommerce ul.products li.product-category:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1) !important;
}

/* The single <a> is the whole clickable card body: a flex column so the image
 * sits at the top, the title under it, and the CTA (::after) pins to the base. */
.woocommerce ul.products li.product-category > a {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	height: 100%;
	text-decoration: none;
}

/* Image fills the TOP of the card edge-to-edge: negative margins cancel the card's
 * 22px padding so the square image bleeds to the top, left and right edges. The
 * card's overflow:hidden + 8px radius round the image's top corners. Title sits
 * below with the card's normal padding. */
.woocommerce ul.products li.product-category .dth-cat-thumb {
	display: block;
	margin: -22px -22px 0;
}

.woocommerce ul.products li.product-category .dth-cat-thumb img {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	height: auto;
	object-fit: cover;
	border-radius: 0;
}

/* The category NAME is the navy heading (not a button): Greycliff, bold, centred,
 * pinned to the card bottom so every name aligns across the row. Each card is
 * image + navy title. !important on weight because the shared woocommerce.css sets
 * the loop-category title weight at a higher specificity. */
.woocommerce ul.products li.product-category .woocommerce-loop-category__title {
	display: block;
	margin: 16px 0 0;
	padding: 0;
	background: none;
	color: var(--dp-navy);
	font-size: 22px;
	font-weight: 800 !important;
	line-height: 1.25;
	letter-spacing: normal;
	text-transform: none;
	text-align: center;
}

/* WooCommerce can append a product count <mark> to the title; hide it so the
 * card stays image / title / CTA only, per the reference. */
.woocommerce ul.products li.product-category .woocommerce-loop-category__title .count {
	display: none;
}

/* -------------------------------------------------------------------------
 * 4. Single product — big bold price (30/800 grey) per the vehicle-card
 *    price treatment; title already navy via the brand heading rule.
 * ---------------------------------------------------------------------- */
.single-product .dth-single-product .wp-block-woocommerce-product-price,
.single-product .dth-single-product .wp-block-woocommerce-product-price .woocommerce-Price-amount {
	font-size: 30px;
	font-weight: 800;
	color: var(--dp-body);
}

/* -------------------------------------------------------------------------
 * 5. Buttons globally — primary CTAs become square yellow fill with NAVY
 *    text, uppercase, 0.7px tracking, radius 0. Mirrors the exact selector
 *    list the shared woocommerce.css uses for the fill, so this later-loading
 *    sheet wins the colour tie on source order and flips the text to navy.
 * ---------------------------------------------------------------------- */
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.woocommerce #respond input#submit, .wc-block-components-button,
.wp-block-woocommerce-cart .wc-block-cart__submit-button,
.woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce input.button.alt,
.button.alt, .wp-element-button, .single_add_to_cart_button, .added_to_cart,
.wc-backward, .woocommerce .return-to-shop .button, .checkout-button,
.woocommerce #place_order, .woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
	background-color: var(--dp-yellow) !important;
	border-color: var(--dp-yellow) !important;
	color: var(--dp-cta-text) !important;
	border-radius: 0 !important;
	text-transform: uppercase;
	letter-spacing: 0.7px;
	font-weight: 700 !important;
}

.woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover,
.woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover,
.button.alt:hover, .wp-element-button:hover, .single_add_to_cart_button:hover, .added_to_cart:hover,
.wc-backward:hover, .woocommerce .return-to-shop .button:hover, .checkout-button:hover,
.woocommerce #place_order:hover, .woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover {
	background-color: var(--dp-primary-hover) !important;
	border-color: var(--dp-primary-hover) !important;
	color: var(--dp-cta-text) !important;
}

/* Secondary action = navy text link, no underline (brand rule). Core buttons
 * explicitly marked as the outline/secondary style. */
.wp-block-button.is-style-outline .wp-block-button__link {
	background-color: transparent !important;
	color: var(--dp-navy) !important;
	border-color: var(--dp-navy) !important;
	text-decoration: none;
}

/* -------------------------------------------------------------------------
 * 6. Home hero (dth-byd/ea-home-hero) — replicates the live homepage hero:
 *    full-width NAVY band, the yellow Fiat bleeding off the LEFT edge, a heavy
 *    white heading on the right with one teal accent word, and a white sub-line.
 *    Values from the live site: navy band #28477C (var --dp-navy), heading
 *    heavy 800 white, accent teal (var --dp-teal). EA123-only (this sheet only
 *    loads when the tenant declares navy_hex).
 * ---------------------------------------------------------------------- */
/* The theme's <main> carries a 24px top margin (block spacing), leaving a white
 * strip between the nav and this full-bleed hero. Zero it on the front page so the
 * navy band sits flush under the nav. This sheet only loads for EA123, and .home
 * scopes it to the storefront landing, so no other page or tenant is touched. */
.home main.wp-block-group {
	margin-top: 0;
}

.dth-ea-hero {
	background-color: var(--dp-navy);
	/* Full-bleed is carried by the `alignfull` class on the section (the
	 * post-content layout is root-padding-aware), so the band reaches both
	 * viewport edges natively. overflow:hidden clips the car's left bleed at the
	 * band edge and prevents any horizontal scroll. */
	overflow: hidden;
}

.dth-ea-hero__inner {
	/* Match the product grid's wrapper: wideSize 1290px with the theme's 24px global
	 * padding, so the hero content's left/right edges line up exactly with the
	 * category cards below (both span 99->1341 at a 1440 viewport). */
	max-width: 1290px;
	box-sizing: border-box; /* 1290 incl. padding, so it matches the grid's box */
	margin: 0 auto;
	display: flex;
	align-items: center;
	gap: 36px;
	padding: 28px 24px;
	min-height: 180px;
}

.dth-ea-hero__car {
	flex: 0 0 44%;
	display: flex;
	align-items: flex-end;
	justify-content: flex-start;
}

/* Car bleeds off the left edge of the content band, anchored to the bottom. */
.dth-ea-hero__car img {
	width: 100%;
	max-width: 340px;
	height: auto;
	margin-left: 0; /* left edge aligns with the product grid wrapper, no bleed */
	margin-bottom: -28px; /* sits on the band's bottom edge */
}

.dth-ea-hero__text {
	flex: 1 1 auto;
}

/* White heading wins over the tenant h1 colour rule (class > element). */
.dth-ea-hero__heading {
	color: #fff;
	font-size: 42px;
	font-weight: 800;
	line-height: 1.15;
	margin: 0 0 16px;
}

.dth-ea-hero__accent {
	color: var(--dp-teal);
}

.dth-ea-hero__sub {
	color: #fff;
	font-size: 18px;
	font-weight: 400;
	line-height: 1.5;
	max-width: 560px;
	margin: 0;
}

/* Mobile: stack text ABOVE the car so the car never crushes the copy. */
@media (max-width: 900px) {
	.dth-ea-hero__inner {
		flex-direction: column;
		align-items: center;
		text-align: center;
		gap: 24px;
		padding: 36px 20px 0;
		min-height: 0;
	}

	.dth-ea-hero__text {
		order: 1;
	}

	.dth-ea-hero__car {
		order: 2;
		flex: none;
		justify-content: center;
	}

	.dth-ea-hero__car img {
		margin-left: 0;
		margin-bottom: 0;
		max-width: 300px;
	}

	.dth-ea-hero__heading {
		font-size: 30px;
	}

	.dth-ea-hero__sub {
		font-size: 16px;
		margin: 0 auto;
	}
}

/* "Order Portal" label beside the logo, in the store font (Greycliff), navy.
 * Added as an ::after on the logo link so no header template edit is needed.
 * EA123-only sheet, so BYD's header is untouched. Hidden on narrow screens. */
.dth-site-logo {
	display: flex;
	align-items: center;
	gap: 14px;
	text-decoration: none;
}

.dth-site-logo::after {
	content: "Order Portal";
	color: var(--dp-navy);
	font-family: var(--dp-font);
	font-size: 22px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: normal;
	text-transform: none;
	text-decoration: none;
	white-space: nowrap;
}

@media (max-width: 600px) {
	.dth-site-logo::after {
		display: none;
	}
}