/* Page-title banner row - see functions/sd-page-title.php
 *
 * The row is authored as a WPBakery "stretch_row", whose script stretches it to
 * the full viewport with inline width/left/padding. These rules pull it back to
 * the width of the menu bar and sit it flush under the menu.
 *
 * Width: the menu bar is 20px in from each side of the VIEWPORT until it hits
 * its own 1710px cap, after which it stops growing and centres. The row has to
 * follow both halves of that. It cannot use plain margins, because the row's
 * parents inset it by a further 60px that changes with the breakpoint - so it
 * is centred against the parent instead, which cancels that inset whatever it
 * happens to be and lands the row on the menu edges at any width.
 *
 * Flush: the gap under the menu is the header's own padding-bottom (20px
 * desktop, 10px tablet), removed here rather than cancelled with a negative
 * margin that would have to track the breakpoint.
 *
 * The !important flags are deliberate: they override the inline styles the
 * stretch-row script writes on load and on every resize.
 */

body.sd-has-title-banner .site-header {
	padding-bottom: 0 !important;
}

/* The width the header bars actually paint. .sd-brandrow (white) and
   .sd-tabbar-row (black) in the child theme's style.css are both capped at
   1710px and centred; under that cap they fill the viewport less a 20px gutter
   each side. Keep this value in step with those two rules. */
body.sd-has-title-banner,
body.sd-has-shop-header {
	--sd-header-max: 1710px;
}

.sd-page-title-row {
	left: 0 !important;
	width: min(100vw - 40px, var(--sd-header-max)) !important;
	max-width: min(100vw - 40px, var(--sd-header-max)) !important;
	/* Centred against 100% - the parent's own width - rather than against 50vw.
	   Both put the row on the menu's centre line, but 100% does it without the
	   half-a-scrollbar drift a vw-based centre carries, and below the cap it
	   resolves to exactly the same margin the previous `50% - 50vw + 20px` gave. */
	margin-left: calc((100% - min(100vw - 40px, var(--sd-header-max))) / 2) !important;
	margin-right: 0 !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}

/* 100vw counts the scrollbar on platforms that reserve space for one, which
   would otherwise push the page 15-17px wider than the viewport. Clip rather
   than hide: `hidden` would turn these into scroll containers and silently
   break every position:sticky element on the page. */
body.sd-has-title-banner,
body.sd-has-title-banner .st-container {
	overflow-x: clip;
	overflow-y: visible;
}

/* The parallax layer is positioned against the row, so it follows the new box -
   pin it explicitly so a stray inline width cannot leak past the edges. */
.sd-page-title-row > .vc_parallax-inner {
	left: 0 !important;
	right: 0 !important;
	width: auto !important;
}

/* Title placement, copied from the shop/category header
   (.woocommerce-products-header on e.g. /product-category/sports-gear/squash/).
   There the box model is: 60px banner padding, an h1 with no top margin and
   28px beneath it, then 60px banner padding -- 60 + 79 + 28 + 60 = the 227px
   banner. Reproducing it here puts our title in exactly the same place, and
   uses fixed padding rather than the percentage margin it replaces, so the
   position holds at every screen width instead of collapsing on narrow ones. */
.sd-page-title-row {
	padding-top: 60px !important;
	padding-bottom: 60px !important;
}

.sd-page-title-row h1.page-title {
	margin-top: 0 !important;
	margin-bottom: 28px !important;
}

/* WooCommerce shop / category header
 * ---------------------------------------------------------------------------
 * The archives build their own header (.woocommerce-products-header) rather
 * than a WPBakery row, so it needs the same two corrections to match the page
 * banners: the width of the menu bar, and no gap beneath the menu.
 *
 * Its parent (.content-area) is already full-viewport width and has no padding
 * of its own, so 100% here IS the viewport: the gutter is a straight 20px until
 * the 1710px cap takes over, with none of the calc() gymnastics the page banner
 * needs to escape its inset parents.
 *
 * The header's own padding-bottom varies by page (10px or 20px), which is why
 * it is zeroed rather than cancelled with a matching negative margin. */

body.sd-has-shop-header .site-header {
	padding-bottom: 0 !important;
}

body.sd-has-shop-header .woocommerce-products-header {
	margin-left: max(20px, (100% - var(--sd-header-max)) / 2) !important;
	margin-right: max(20px, (100% - var(--sd-header-max)) / 2) !important;
}

/* The theme positions this header by pulling it up 85px over a matching 85px
   of .content-area padding. Those two only cancel at desktop: at tablet the
   padding drops to 40px while the pull stays 85px, so the header rides 35px UP
   OVER the menu (a pre-existing bug - it overlaps on the live site today).
   Zeroing both sides of that push/pull makes the header start exactly at the
   top of the content area, i.e. flush under the menu, at every width. The
   header's own 60px internal padding still keeps the title off the top edge,
   and its 40px bottom margin still spaces the products below. */
body.sd-has-shop-header .content-area {
	padding-top: 0 !important;
}

body.sd-has-shop-header .woocommerce-products-header {
	margin-top: 0 !important;
}

/* Default header image for archives that show a title but have no image
 * ---------------------------------------------------------------------------
 * The theme only paints a header photo when a category carries its own header
 * image (it adds .with_featured_img and a .shop_header_bkg div). Archives
 * without one fall back to a short, transparent band with a BLACK title -
 * a different shape from every other header on the site.
 *
 * These rules give that case the same treatment as a category with an image,
 * reusing the theme's own overlay element rather than inventing a new one:
 * the site's default banner, the 60px padding that makes the 227px band, the
 * 30% scrim, and the white title. Change --sd-default-header-img to swap the
 * image everywhere. A site-relative path is deliberate so dev serves dev's copy
 * and live serves live's. */

body.sd-has-shop-header {
	--sd-default-header-img: url('/wp-content/uploads/2021/07/Import-Collage-1500px-banner.jpg');
}

body.sd-has-shop-header .woocommerce-products-header:not(.with_featured_img) {
	position: relative;
	padding-top: 60px !important;
	padding-bottom: 60px !important;
	background-image: var(--sd-default-header-img);
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}

/* The theme always outputs this element; it is simply left unstyled when there
   is no featured image. Give it the same scrim the image variant gets. */
body.sd-has-shop-header .woocommerce-products-header:not(.with_featured_img) .shop_header_overlay {
	/* The theme's base rule sets display:none and only unhides this for
	   .with_featured_img, so the scrim must be switched on explicitly. */
	display: block;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: rgba(0, 0, 0, 0.3);
}

/* Mirrors the theme's own `.shop_header.with_featured_img` rule: white text
   lifted with position:relative so it sits ABOVE the absolutely positioned
   scrim rather than under it. Without the position the overlay paints over
   the title. */
body.sd-has-shop-header .woocommerce-products-header:not(.with_featured_img) .page-title,
body.sd-has-shop-header .woocommerce-products-header:not(.with_featured_img) .term-description,
body.sd-has-shop-header .woocommerce-products-header:not(.with_featured_img) .term-description p,
body.sd-has-shop-header .woocommerce-products-header:not(.with_featured_img) .list_shop_categories {
	color: #fff;
	position: relative;
}

/* Optional scrim, for a banner carrying its own artwork rather than the site
 * default.
 * ---------------------------------------------------------------------------
 * The stock banner image (Import-Collage) is dark enough to hold white type
 * unaided, which is why .sd-page-title-row has no scrim of its own - adding one
 * globally would only muddy the twelve pages that look right today.
 *
 * Monthly Deals uses its own pale teal artwork, where white on the title band
 * measures 1.98:1 - short of the 3:1 WCAG minimum for large text. The same 30%
 * black the shop/category header uses above lifts it to roughly 3.9:1, so the
 * value is the site's own rather than a new one invented here.
 *
 * The scrim hangs off .vc_parallax-inner (z-index 0) rather than the row, so it
 * covers the image while WPBakery's own column (position:relative, z-index 1)
 * keeps the heading above it - no extra stacking rules needed. */
.sd-page-title-row--scrim > .vc_parallax-inner::after,
.sd-page-title-row--scrim:not(.vc_parallax)::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.3);
	pointer-events: none;
}

/* Banner carrying its own artwork at full width.
 * ---------------------------------------------------------------------------
 * WPBakery's parallax is built for textures: it inflates .vc_parallax-inner to
 * 350% of the row height (795px over a 227px band) and background-covers it, so
 * a wide landscape graphic is scaled to fill a portrait box and all that
 * survives is a fragment. Monthly Deals' artwork is 1225x435 - a composed
 * banner meant to be read whole - so this row drops the parallax and carries
 * the image itself, taking the image's own aspect ratio so it fits the full
 * width of the band with nothing cropped.
 *
 * The path is site-relative, matching --sd-default-header-img above, so dev
 * serves dev's copy and live serves live's.
 *
 * min-height keeps the title readable on narrow screens, where the aspect ratio
 * alone would make the band shorter than the type; the fallback colour is the
 * artwork's own teal, so the edges match if the band is ever taller than the
 * image can fill.
 *
 * max-height is the compromise at the other end. Fitting a 2.82:1 image across
 * the full 1710px band would make it 607px tall - 2.7x every other page's
 * banner, enough to push the deals themselves off the first screen. Capping at
 * 340px keeps it a band rather than a hero; past that width background-size
 * cover crops the top and bottom evenly, which this artwork tolerates because
 * its shapes run edge to edge and nothing sits near the vertical extremes.
 *
 * The band carries the Monthly Deals wordmark rather than a text heading, so
 * the padding is 30px instead of the standard 60px - that leaves 167-280px of
 * clear height across the band's whole range, and the two caps below keep the
 * wordmark inside it at every width: 46% binds on narrow screens, 280px binds
 * once the band hits its own cap. The page's <h1> is the component's heading
 * below, since this graphic is a picture of words rather than words. */
.sd-page-title-row--deals {
	--sd-deals-banner: url('/wp-content/uploads/2021/04/Monthly-Deals-Wide-Background.jpg');
	background-image: var(--sd-deals-banner);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	background-color: #4f9a9c;
	aspect-ratio: 1225 / 435;
	min-height: 227px;
	max-height: 340px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding-top: 30px !important;
	padding-bottom: 30px !important;
}

.sd-page-title-row--deals .wpb_single_image,
.sd-page-title-row--deals .wpb_single_image .vc_figure,
.sd-page-title-row--deals .wpb_single_image .vc_single_image-wrapper {
	display: block;
	margin-bottom: 0;
}

.sd-page-title-row--deals .wpb_single_image img {
	width: auto;
	height: auto;
	max-width: min(520px, 46%);
	max-height: 280px;
	margin: 0 auto;
}