/*
 Theme Name:   Walking Foolio
 Description:  Improvise Child Theme for Walking Foolio
 Author:       Crack-Ajax
 Author URI:   https://crack-ajax.com
 Template:     improvise
 Version:      1.36
*/

/*********************************************************************************************************************
 *********** Walking Foolio
 *
 * Brand colors map 1:1 to ACF Theme Settings → Theme Colors:
 *   --color-primary     Stop Sign Red  #B81D24
 *   --color-secondary   Heritage Blue  #0F2D4D
 *   --color-accent      Warm Metal     #A7A7A3
 *   --color-light-text  Ivory          #F4EFE6
 *   --color-dark-text   Charcoal       #1B1B1B
 * Fonts (ACF → Fonts): Oswald for headings/nav, Source Sans 3 for body/accent.
 *
 * @class .wf-silo-scroller  | Homepage video-card scroller (group of .wf-silo covers; .wf-silo-panel = no media yet)
 * @class .wf-intro          | Homepage H1 band
 * @class .wf-journal-row    | Logo | Foolio Journal | Join the Journey row
 * @class .wf-explore        | Journal category section; .wf-cat-grid / .wf-cat-card cards
 * @class .wf-tagline        | Ivory tagline band
 * @class .wf-faq            | Yoast FAQ block section
 * @class .wf-lead           | Intro/lead paragraph
 * @class .wf-longform      | Silo page long-form video grid (.wf-longform-lead + .wf-longform-stack)
 * @class .wf-shorts         | Silo page Shorts row (portrait, horizontal scroll when narrow)
 * @class .wf-journal        | body class on Journal screens (posts index, categories, articles): ivory paper theme
 * @class .wf-crosslink      | Videos ↔ Journal sibling-page callout
 * @class .wf-btn            | Outline Oswald button (on .wp-block-button)
 ********************************************************************************************************************/

/****************************************** Base ********************************************************************/

body {
	background-color: var(--color-dark-text);
	color: var(--color-light-text);
	font-family: var(--font-primary);
	font-size: var(--fontsize-base);
}

p, li {
	line-height: 1.6;
}

h1, h2, h3, h4, h5, h6 {
	color: var(--color-light-text);
	text-transform: uppercase;
	letter-spacing: .01em;
	line-height: 1.05;
}

h1 { font-size: clamp(2.25rem, 4.5vw, 3.75rem); font-weight: 700; }
h2 { font-size: clamp(1.75rem, 3vw, 2.5rem); font-weight: 600; }
h3 { font-size: 1.35rem; font-weight: 600; }

/* Site override of Improvise's master a:link/a:visited (visited = --color-dark-text, built for light
   sites): on this dark site both stay ivory. Hover red comes from the article/footer rules below. */
a,
a:link,
a:visited {
	color: var(--color-light-text);
}

a:hover,
a:focus-visible {
	color: var(--wf-red-on-dark);
}

article a {
	text-decoration-color: var(--color-primary);
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}

article a:hover,
article a:focus-visible {
	color: var(--wf-red-on-dark);
}

:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: 3px;
}

.page-title {
	font-size: clamp(2.25rem, 5vw, 4rem);
}

/* No phone number on this site — parent prints an empty tel: link otherwise. */
.mobile-telephone-button {
	display: none;
}

/* Site override of Improvise's Theme Settings body background (header-root.php prints main::before
   with background-size: cover, which stretches the image down the whole long homepage). Tile the
   vertically-seamless cloud texture instead. `body` prefix outranks that later-printed inline rule. */
body main::before {
	background-repeat: repeat-y;
	background-size: 100% auto;
	background-position: 50% 0;
}

/****************************************** Header & Navigation *****************************************************/

body:not(.has-top-bar) .document-header {
	border-bottom: 1px solid color-mix(in srgb, var(--color-light-text) 12%, transparent);
	overflow: visible;
}

/* Primary logo hangs over the hero like the mockup; shrinks back inside the bar once .fixed (scrolled). */
.document-header .logo {
	align-self: flex-start;
	max-width: none;
	padding-top: 8px;
}

.document-header .logo img {
	height: 150px;
	max-height: none;
}

.fixed .document-header .logo {
	padding-top: 5px;
}

.fixed .document-header .logo img {
	height: calc(var(--l-spacing) - 10px);
}

.primary-nav ul li a {
	font-size: 1.2rem;
	font-weight: 500;
	letter-spacing: .04em;
	text-transform: uppercase;
}

/* Improvise rests a transparent 2px underline under top-level links; match our 3px so hover
   only changes its colour (no width animation, label doesn't move). */
.primary-nav.tab-underline .navbar-nav > li > a {
	border-bottom-width: 3px;
}

.primary-nav.tab-underline ul li:not(.touch-start):hover > a,
.primary-nav.tab-underline ul li.current-menu-item > a,
.primary-nav.tab-underline ul li.current-menu-ancestor > a {
	border-bottom: 3px solid var(--color-primary);
}

.primary-nav .dropdown .dropdown-menu {
	border-top: 3px solid var(--color-primary);
}

.primary-nav .dropdown-menu li a {
	font-size: 1rem;
}

/* With the menu button (<=1200px) the logo stays inside the header bar: hanging below it,
   it covered the top of the open menu and pushed the menu button down off the bar's centre. */
@media (max-width: 1200px) {

	.document-header .logo img {
		height: calc(var(--xl-spacing) - 16px);
	}
}

/****************************************** Buttons *****************************************************************/

/* Site override of Improvise's master button (square, heading font, 2px border already come
   from the parent): dark outline look from the Walking Foolio mockup. */
.wf-btn .wp-block-button__link,
.gform_wrapper .gform_footer input[type="submit"] {
	background-color: var(--color-dark-text);
	border-color: var(--color-light-text);
	color: var(--color-light-text);
	font-size: 1.05rem;
	font-weight: 500;
	letter-spacing: .08em;
	padding: .7em 1.4em;
	text-transform: uppercase;
}

/* Improvise 6.0 fills colourless Outline buttons with --color-accent (selector outranks the
   rule above); keep ours charcoal at rest and red on keyboard focus. */
.wp-block-button.wf-btn.is-style-outline > .wp-block-button__link:not(:hover):not(:focus-visible):not(.has-background) {
	background-color: var(--color-dark-text);
}

.wp-block-button.wf-btn.is-style-outline > .wp-block-button__link:focus-visible:not(.has-background) {
	background-color: var(--color-primary);
	border-color: var(--color-primary);
}

/* Improvise's master Gravity Forms submit is 5px rounded; this brand's buttons are square. */
.gform_wrapper .gform_footer input[type="submit"] {
	border-radius: 0;
}

.wf-btn .wp-block-button__link:hover,
.wf-btn .wp-block-button__link:focus-visible {
	background-color: var(--color-primary);
	border-color: var(--color-primary);
	color: var(--color-light-text);
}

/****************************************** Homepage: Full-Width Section Padding *************************************/

/* Improvise 6.0 pads every full-width Group without a background class to the article's
   side padding (0,4,0). These homepage sections set their own backgrounds and padding in
   CSS: keep their 30px sides, and the card scroller edge to edge. */
main .page-content > .wp-block-group.alignfull:is(.wf-intro, .wf-explore, .wf-tagline, .wf-faq) {
	padding-left: var(--m-spacing);
	padding-right: var(--m-spacing);
}

main .page-content .wp-block-group.alignfull.wf-silo-scroller {
	padding-left: 0;
	padding-right: 0;
}

/****************************************** Homepage: Video Card Scroller *******************************************/

/* Horizontal row of .wf-silo cover cards: 3 visible on desktop, 2 on tablet, stacked on mobile.
   theme.js wraps it in .wf-scroller-wrap (alignfull) and adds the prev/next buttons. */
.wf-scroller-wrap {
	position: relative;
}

.wf-scroller-wrap > .wf-silo-scroller {
	margin-left: 0;
	margin-right: 0;
	width: 100% !important;
}

/* gap as % is safe: the alignfull scroller has a definite (100vw) width.
   Top/bottom margins come from the block's Improvise no-margin-top / no-margin-bottom utilities. */
.wf-silo-scroller {
	display: flex;
	gap: .5%;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	background-color: var(--color-dark-text);
}

.wf-silo-scroller::-webkit-scrollbar {
	display: none;
}

.wf-silo-scroller > .wf-silo {
	flex: 0 0 33%;
	margin: 0;
	scroll-snap-align: start;
}

.wf-silo {
	padding: calc(var(--xl-spacing) + var(--m-spacing)) var(--m-spacing) var(--l-spacing);
}

/* Legibility gradient over photo/video cards: dark at the top where the type sits, clear over the car. */
.wf-silo:has(> .wp-block-cover__image-background, > .wp-block-cover__video-background) .wp-block-cover__background.has-background-dim {
	background: linear-gradient(180deg,
		color-mix(in srgb, var(--color-dark-text) 92%, transparent) 0%,
		color-mix(in srgb, var(--color-dark-text) 55%, transparent) 45%,
		transparent 75%) !important;
	opacity: 1 !important;
}

.wf-silo .wp-block-cover__image-background {
	object-position: 50% 100% !important;
}

/* Vertical (9:16) card clips are cropped top/bottom to the card; posters/clips are chosen with the car centred. */
.wf-silo .wp-block-cover__video-background {
	object-position: 50% 50% !important;
}

/* Brand-color placeholder cards (no media yet): overlay color from the block + a charcoal fade. */
.wf-silo-panel .wp-block-cover__background {
	background-image: linear-gradient(200deg, transparent 30%, color-mix(in srgb, var(--color-dark-text) 70%, transparent));
}

.wf-silo .wp-block-cover__inner-container {
	max-width: 30rem;
}

.wf-silo .wp-block-cover__inner-container > * {
	margin-left: 0 !important;
}

.wf-scroller-btn {
	position: absolute;
	top: var(--m-spacing);
	z-index: 5;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	padding: 0;
	background-color: color-mix(in srgb, var(--color-dark-text) 80%, transparent);
	border: 2px solid var(--color-light-text);
	color: var(--color-light-text);
	font-family: var(--font-secondary-heading);
	font-size: 1.35rem;
	cursor: pointer;
}

.wf-scroller-btn:hover,
.wf-scroller-btn:focus-visible {
	background-color: var(--color-primary);
	border-color: var(--color-primary);
}

/* Paired at the top right, in the empty band above the cards' eyebrows (top-left is taken by the
   overhanging header logo). At an end of the row the unusable button dims instead of vanishing, so
   the pair doesn't jump around. */
.wf-scroller-btn[disabled] {
	opacity: .35;
	cursor: default;
	pointer-events: none;
}

.wf-scroller-next { right: var(--m-spacing); }
.wf-scroller-prev { right: calc(var(--m-spacing) + 48px + 8px); }

.wf-eyebrow {
	display: flex;
	align-items: center;
	gap: 12px; /* px: flex row sized to its own content (no definite width) — % would resolve to 0 */
	font-family: var(--font-secondary-heading);
	font-size: 1.5rem;
	margin-bottom: var(--s-spacing);
	color: var(--color-light-text);
}

.wf-eyebrow::before {
	content: "";
	display: block;
	width: 48px;
	height: 6px;
	background-color: var(--color-primary);
}

.wf-silo-title {
	font-size: clamp(3rem, 5.5vw, 5.5rem);
	font-weight: 700;
	line-height: .92;
	margin-bottom: var(--s-spacing);
}

.wf-silo-deck {
	font-size: 1.35rem;
	font-weight: 600;
	margin-bottom: calc(var(--s-spacing) / 2);
}

.wf-silo-blurb {
	margin-bottom: var(--s-spacing);
}

@media (max-width: 1100px) {

	.wf-silo-scroller > .wf-silo {
		flex-basis: 49.75%;
	}
}

@media (max-width: 781px) {

	/* Mobile: stack the cards (no horizontal scroll), keep them tall with big tap targets. */
	.wf-silo-scroller {
		flex-direction: column;
		gap: 0;
		overflow: visible;
		scroll-snap-type: none;
	}

	.wf-silo-scroller > .wf-silo {
		flex-basis: auto;
		min-height: 60vh !important;
		padding: var(--l-spacing) var(--s-spacing);
	}

	.wf-silo-scroller > .wf-silo:first-child {
		padding-top: calc(var(--l-spacing) + 40px);
	}

	.wf-scroller-btn {
		display: none;
	}

	.wf-btn .wp-block-button__link {
		min-height: 48px;
	}
}

/****************************************** Homepage: Intro (H1) ****************************************************/

.wf-intro {
	padding: var(--l-spacing) var(--m-spacing);
	text-align: center;
	border-bottom: 1px solid color-mix(in srgb, var(--color-light-text) 12%, transparent);
}

.wf-intro p {
	max-width: var(--restricted-width);
	margin-left: auto;
	margin-right: auto;
	font-size: 1.15rem;
	color: var(--color-accent);
}

/****************************************** Homepage: Journal / Join row ********************************************/

.wf-journal-row.wp-block-columns {
	gap: 4%;
	padding: var(--l-spacing) max(var(--m-spacing), calc((100vw - var(--wide-width)) / 2));
	align-items: center;
}

.wf-journal-logo {
	margin: 0 auto;
	text-align: center;
}

.wf-join-col {
	border-left: 1px solid color-mix(in srgb, var(--color-light-text) 25%, transparent);
	padding-left: 4%;
}

.wf-split-title {
	font-size: clamp(1.9rem, 3vw, 2.6rem);
	margin-bottom: calc(var(--s-spacing) / 2);
}

.wf-topics {
	font-size: 1.1rem;
	word-spacing: .15em;
}

@media (max-width: 781px) {

	.wf-join-col {
		border-left: 0;
		border-top: 1px solid color-mix(in srgb, var(--color-light-text) 25%, transparent);
		padding-left: 0;
		padding-top: var(--m-spacing);
	}
}

/****************************************** Form fields & shop buttons (site-wide) ***********************************/

/* One field style for every form on this dark site — Gravity Forms, WooCommerce blocks (cart, checkout),
   classic WooCommerce (product page, account) — ivory fields, charcoal text, readable placeholders
   and labels, red focus ring, 48px tall with vertically centred text. */
:root {
	/* Brand red (#B81D24, --color-primary) is only 2.7:1 on charcoal — fine for buttons, fills and
	   underlines, too dark for text. Red TEXT on dark backgrounds uses this lighter signal red
	   (4.8:1 on #1B1B1B, WCAG AA). On ivory (Journal, fields) keep --color-primary (5.7:1). */
	--wf-red-on-dark: #E5585E;
	--wf-field-bg: var(--color-light-text);
	--wf-field-text: var(--color-dark-text);
	--wf-field-muted: color-mix(in srgb, var(--color-dark-text) 62%, transparent);
	--wf-field-border: color-mix(in srgb, var(--color-dark-text) 30%, transparent);
	--wf-field-height: 48px;
}

.improvise .gform_wrapper input:not([type=radio]):not([type=checkbox]):not([type=submit]):not([type=button]):not([type=image]):not([type=file]),
.improvise .gform_wrapper textarea,
.improvise .gform_wrapper select,
.woocommerce form .input-text,
.woocommerce .quantity .qty,
.woocommerce div.product form.cart .variations select,
.woocommerce select,
.wc-block-components-text-input input,
.wc-block-components-textarea,
.wc-block-components-combobox .wc-block-components-combobox-control input,
.wc-blocks-components-select .wc-blocks-components-select__select,
.wc-block-components-quantity-selector {
	background-color: var(--wf-field-bg) !important;
	color: var(--wf-field-text) !important;
	border: 1px solid var(--wf-field-border) !important;
	border-radius: 0 !important;
	box-shadow: none !important;
}

/* Single-line fields and dropdowns: fixed height, text centred vertically. */
.improvise .gform_wrapper input:not([type=radio]):not([type=checkbox]):not([type=submit]):not([type=button]):not([type=image]):not([type=file]),
.improvise .gform_wrapper select,
.woocommerce div.product form.cart .variations select,
.woocommerce .quantity .qty,
.woocommerce form .input-text:not(textarea) {
	height: var(--wf-field-height) !important;
	min-height: var(--wf-field-height) !important;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	line-height: normal !important;
}

/* Dropdowns: an explicit line-height equal to the inner height centres the text reliably
   (appearance:none selects ignore "line-height: normal" centring in Chrome). */
.improvise .gform_wrapper select,
.woocommerce div.product form.cart .variations select {
	padding-left: 14px !important;
	padding-right: 36px !important;
	line-height: calc(var(--wf-field-height) - 2px) !important;
}

.improvise .gform_wrapper ::placeholder,
.woocommerce ::placeholder,
.wc-block-components-text-input input::placeholder {
	color: var(--wf-field-muted) !important;
	opacity: 1;
}

/* WooCommerce block floating labels / select labels sit inside the field: charcoal, not page ivory. */
.wc-block-components-text-input label,
.wc-block-components-combobox .wc-block-components-combobox-control label,
.wc-blocks-components-select .wc-blocks-components-select__label,
.wc-blocks-components-select .wc-blocks-components-select__expand {
	color: var(--wf-field-muted) !important;
	fill: var(--wf-field-text);
}

.wc-block-components-quantity-selector input,
.wc-block-components-quantity-selector .wc-block-components-quantity-selector__button {
	color: var(--wf-field-text) !important;
	background: transparent !important;
}

.improvise .gform_wrapper input:focus,
.improvise .gform_wrapper textarea:focus,
.improvise .gform_wrapper select:focus,
.woocommerce input:focus,
.woocommerce select:focus,
.woocommerce textarea:focus,
.wc-block-components-text-input input:focus,
.wc-block-components-textarea:focus,
.wc-blocks-components-select__select:focus {
	outline: 2px solid var(--color-primary) !important;
	outline-offset: 0 !important;
	border-color: var(--color-primary) !important;
}

/* Shop buttons: the site's red Oswald button (Proceed to Checkout, Place Order, Add to cart). */
.wc-block-components-button:not(.is-link),
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
	background-color: var(--color-primary) !important;
	border: 2px solid var(--color-primary) !important;
	border-radius: 0 !important;
	color: var(--color-light-text) !important;
	font-family: var(--font-secondary-heading) !important;
	font-size: 1.05rem !important;
	font-weight: 500 !important;
	letter-spacing: .08em;
	text-transform: uppercase;
	min-height: var(--wf-field-height);
	padding: .6em 1.6em !important;
	box-shadow: none !important;
}

.wc-block-components-button:not(.is-link):hover,
.wc-block-components-button:not(.is-link):focus-visible,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce button.button.alt:hover,
.woocommerce a.button.alt:hover {
	background-color: var(--color-dark-text) !important;
	border-color: var(--color-light-text) !important;
	color: var(--color-light-text) !important;
}

/* Add to cart before a size is chosen: clearly inactive, not a dim maroon. */
.woocommerce button.button.alt.disabled,
.woocommerce button.button.alt:disabled {
	opacity: .45 !important;
}

.wc-block-components-button:not(.is-link) .wc-block-components-button__text {
	color: inherit;
}

/* Printful's "Size Guide" link hardcodes an inline blue (style="color:#1164A9"); bring it into the site's link style. */
.woocommerce div.product .single_variation_wrap a[onclick*="Size_Guide"] {
	/* Block with bottom margin = the gap above it (variations table's margin + row spacing), so the
	   link sits evenly between the Size dropdown and the quantity / Add to cart row. */
	display: inline-block;
	margin-bottom: 19px;
	line-height: 1.3;
	color: var(--color-light-text) !important;
	font-family: var(--font-secondary-heading);
	letter-spacing: .06em;
	text-decoration: underline;
	text-decoration-color: var(--color-primary);
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
	text-transform: uppercase;
}

.woocommerce div.product .single_variation_wrap a[onclick*="Size_Guide"]:hover {
	color: var(--wf-red-on-dark) !important;
}

/* Size label + dropdown on one centred line, left-aligned with the price. */
.woocommerce div.product form.cart .variations th.label {
	padding: 0 16px 0 0;
	text-align: left;
	line-height: var(--wf-field-height);
}

.woocommerce div.product form.cart .variations td.value {
	vertical-align: middle;
}

/* Printful size guide modal: white panel, but it inherits the site's ivory text — force charcoal. */
.pf-size-guide-modal__content,
.pf-size-guide-modal__content * {
	color: var(--color-dark-text) !important;
}

.pf-size-guide-modal__content a,
.pf-size-guide-modal__content [role="tab"],
.pf-size-guide-modal__content .pf-tab,
.pf-size-guide-modal__content li {
	color: var(--color-dark-text) !important;
	background-color: transparent;
}

.pf-size-guide-modal__content [aria-selected="true"],
.pf-size-guide-modal__content .active {
	border-bottom-color: var(--color-primary) !important;
}

.pf-size-guide-modal__content table {
	color: var(--color-dark-text);
}

/* My Account navigation: each endpoint is a button (outline; current page filled red). */
.woocommerce-MyAccount-navigation ul {
	display: flex;
	flex-direction: column;
	gap: 10px; /* px: column flex with intrinsic height — % would resolve to 0 */
	margin: 0 0 var(--m-spacing);
	padding: 0;
	list-style: none;
}

.woocommerce-MyAccount-navigation li {
	margin: 0;
	padding: 0;
}

.woocommerce-MyAccount-navigation li a,
.woocommerce-MyAccount-navigation li a:visited {
	display: flex;
	align-items: center;
	min-height: var(--wf-field-height);
	padding: 0 18px;
	border: 2px solid color-mix(in srgb, var(--color-light-text) 45%, transparent);
	background-color: var(--color-dark-text);
	color: var(--color-light-text);
	font-family: var(--font-secondary-heading);
	font-size: 1rem;
	letter-spacing: .08em;
	text-decoration: none;
	text-transform: uppercase;
	transition: background-color .15s ease, border-color .15s ease;
}

.woocommerce-MyAccount-navigation li a:hover,
.woocommerce-MyAccount-navigation li a:focus-visible {
	border-color: var(--color-primary);
	color: var(--color-light-text);
}

.woocommerce-MyAccount-navigation li.is-active a {
	background-color: var(--color-primary);
	border-color: var(--color-primary);
	color: var(--color-light-text);
}

/* Product page details */
.woocommerce div.product p.price,
.woocommerce div.product span.price,
.woocommerce ul.products li.product .price {
	color: var(--color-light-text) !important;
	font-family: var(--font-secondary-heading);
}

.woocommerce div.product form.cart .variations label,
.woocommerce div.product form.cart .variations th {
	color: var(--color-light-text);
	font-family: var(--font-secondary-heading);
	letter-spacing: .06em;
	text-transform: uppercase;
	vertical-align: middle;
}

/****************************************** Gravity Forms (orbital theme) *******************************************/

.gform-theme--framework {
	/* !important: Gravity Forms prints each form's orbital colours inline, scoped to the form ID
	   (#gform_wrapper_N[data-form-index].gform-theme), which outranks any class selector. */
	--gf-color-primary: var(--color-primary) !important;
	--gf-color-primary-rgb: 184, 29, 36 !important; /* GF requires raw r,g,b here; mirrors --color-primary */
	--gf-color-primary-darker: color-mix(in srgb, var(--color-primary) 80%, black) !important;
	--gf-color-primary-lighter: color-mix(in srgb, var(--color-primary) 80%, white) !important;
	--gf-color-primary-contrast: var(--color-light-text) !important;
	--gf-color-in-ctrl: var(--color-light-text) !important;
	--gf-color-in-ctrl-contrast: var(--color-dark-text) !important;
	--gf-color-in-ctrl-darker: var(--color-light-text) !important;
	--gf-color-in-ctrl-lighter: var(--color-light-text) !important;
	--gf-color-in-ctrl-primary: var(--color-primary) !important;
	--gf-color-in-ctrl-primary-contrast: var(--color-light-text) !important;
	--gf-color-in-ctrl-dark: var(--color-accent) !important;
	--gf-color-out-ctrl-dark: var(--color-accent) !important;
	--gf-color-out-ctrl-dark-darker: var(--color-light-text) !important;
	--gf-ctrl-border-color: var(--wf-field-border) !important;
	--gf-ctrl-label-color-primary: var(--color-light-text) !important;
	--gf-ctrl-label-color-secondary: var(--color-light-text) !important;
	--gf-ctrl-desc-color: var(--color-accent) !important;
	--gf-radius: 0 !important;
	--gf-font-family-base: var(--font-primary) !important;
}

/* Privacy notices / consent descriptions on forms */
.gform_wrapper .gfield--type-consent .gfield_description,
.gform_wrapper .wf-form-privacy p {
	font-size: .9rem;
	color: var(--color-accent);
}

.gform_wrapper .gfield--type-consent .gfield_description a,
.gform_wrapper .wf-form-privacy a {
	color: var(--color-light-text);
}

.gform_wrapper .gfield--type-consent .gfield_description a:hover,
.gform_wrapper .gfield--type-consent .gfield_description a:focus-visible,
.gform_wrapper .wf-form-privacy a:hover,
.gform_wrapper .wf-form-privacy a:focus-visible {
	color: var(--wf-red-on-dark);
}

.gform_wrapper .gfield--type-consent .gfield_consent_label {
	color: var(--color-light-text);
	font-size: .95rem;
}

/* Newsletter (form 1): email + Subscribe side by side via Gravity Forms' inline submit button
   (form setting), consent checkbox full width below. Button matches the email field's height. */
.wf-join-col .gform_wrapper .gfield--type-submit input[type="submit"],
.contact .gform_wrapper .gform_footer input[type="submit"] {
	background-color: var(--color-primary);
	border-color: var(--color-primary);
	color: var(--color-light-text);
}

/* Extra .gform-theme--framework / .button: GF's framework button rule is more specific than the colour rule above. */
.wf-join-col .gform_wrapper.gform-theme--framework .gfield--type-submit input[type="submit"].button {
	width: 100%;
	height: 100%;
	min-height: 38px;
	padding-left: 0;
	padding-right: 0;
}

/* Gravity Forms stacks the fields below 641px; give the button a real tap target there. */
@media (max-width: 640px) {

	.wf-join-col .gform_wrapper.gform-theme--framework .gfield--type-submit input[type="submit"].button {
		min-height: 48px;
	}
}

.wf-join-col .gform_wrapper .gfield--type-submit input[type="submit"]:hover,
.contact .gform_wrapper .gform_footer input[type="submit"]:hover {
	background-color: var(--color-dark-text);
	border-color: var(--color-light-text);
}

/* Consent description: plain small print, not Gravity Forms' boxed/scrolling style. */
.gform_wrapper .gfield--type-consent .gfield_description {
	max-height: none;
	overflow: visible;
	padding: 6px 0 0;
	border: 0;
	background: none;
}

/****************************************** Category grid / cards ***************************************************/

.wf-explore {
	padding: var(--xl-spacing) var(--m-spacing);
	background-color: color-mix(in srgb, var(--color-dark-text) 94%, var(--color-light-text));
}

.wf-explore > p {
	color: var(--color-accent);
	margin-bottom: var(--l-spacing);
}

.wf-cat-grid {
	gap: 2%;
	row-gap: 24px; /* px: grid height is intrinsic (auto rows) — % would collapse to 0 (see improvise-styling Rule 3) */
}

/* Videos hub: 9 category cards → 3 × 3 instead of core's auto-fill (4 + 4 + 1). */
.wf-cat-grid.is-layout-grid:has(> .wf-cat-card:nth-child(9):last-child) {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 781px) {

	.wf-cat-grid.is-layout-grid:has(> .wf-cat-card:nth-child(9):last-child) {
		grid-template-columns: minmax(0, 1fr);
	}
}

.wf-cat-card {
	background-color: var(--color-dark-text);
	border-top: 4px solid var(--color-primary);
	padding: var(--m-spacing);
}

.wf-cat-card h3 {
	margin-bottom: calc(var(--s-spacing) / 2);
}

.wf-cat-card h3 a {
	text-decoration: none;
}

.wf-cat-card p {
	color: var(--color-accent);
}

.wf-card-links {
	display: flex;
	flex-direction: column;
	margin-bottom: 0;
}

.wf-card-links a {
	color: var(--color-light-text);
	font-family: var(--font-secondary-heading);
	letter-spacing: .05em;
	text-transform: uppercase;
	padding: 6px 0;
}

.wf-card-links a::after {
	content: " →";
	color: var(--color-primary);
}

/****************************************** Tagline band ************************************************************/

.wf-tagline {
	background-color: var(--color-light-text);
	padding: var(--l-spacing) var(--m-spacing);
}

.wf-tagline-text {
	color: var(--color-dark-text);
	font-family: var(--font-secondary-heading);
	font-size: clamp(1.75rem, 4.5vw, 3.5rem);
	font-weight: 700;
	line-height: 1.1;
	margin: 0;
	text-transform: uppercase;
}

/****************************************** FAQ (Yoast FAQ block) ***************************************************/

/* Accordion cards (details/summary, --color-secondary bg, --color-accent border & toggle)
   come from the parent's "WP Yoast FAQ Block Styling" — only the section wrapper lives here. */
.wf-faq {
	padding: var(--xl-spacing) var(--m-spacing);
}

.wf-faq > h2,
.wf-faq .schema-faq {
	max-width: var(--restricted-width);
	margin-left: auto;
	margin-right: auto;
}

.wf-faq .schema-faq-question {
	font-family: var(--font-secondary-heading);
	font-size: 1.2rem;
	font-weight: 500;
	letter-spacing: .02em;
	text-transform: uppercase;
}

/****************************************** Silo pages: video sections *********************************************/

/* Featured long-form (YouTube, 16:9): newest large on the left, next two stacked on the right.
   Widths are solved so both sides end at the same height: with stack gap g (16px), the lead column
   is 2/3 of the space left after the column gap, plus g x 16/9. Then
   lead height = 2 x (stack video height) + g. Aspect/iframe sizing comes from Improvise's master
   .is-type-video rules. */
.wf-longform {
	display: grid;
	grid-template-columns: calc((100% - 2% - 28.44px) * 2 / 3 + 28.44px) minmax(0, 1fr);
	column-gap: 2%;
	align-items: start;
	margin-bottom: var(--l-spacing);
}

.wf-longform-stack {
	display: flex;
	flex-direction: column;
	gap: 16px; /* px: column-direction flex with intrinsic height — % would resolve to 0. Must match 28.44px (16 x 16/9) above. */
}

.wf-longform .wf-longform-lead > *,
.wf-longform .wf-longform-stack > *,
.wf-longform > *,
.wf-shorts > * {
	margin: 0;
}

/* Featured Shorts (9:16): one row, 5 across on desktop; fewer at narrower widths, swipe for the rest. */
.wf-shorts {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: calc((100% - 4 * 2%) / 5);
	column-gap: 2%;
	margin-bottom: var(--l-spacing);
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
}

.wf-shorts > * {
	scroll-snap-align: start;
}

/* Shorts row is always portrait, even if YouTube's oEmbed reports landscape dimensions
   (overrides Improvise's .is-type-video.wp-embed-aspect-16-9). */
.wf-shorts .is-type-video .wp-block-embed__wrapper {
	padding-bottom: 177.78%;
}

@media (max-width: 1100px) {

	.wf-shorts {
		grid-auto-columns: calc((100% - 3 * 2%) / 4);
	}
}

@media (max-width: 781px) {

	.wf-longform {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 16px; /* px: auto-height grid rows — % would collapse to 0 */
	}

	/* ~1.6 visible on a phone, capped so a large phone/small tablet shows ~2.4 instead of one giant Short. */
	.wf-shorts {
		grid-auto-columns: min(62%, 300px);
	}
}

/****************************************** Footer columns ************************************************************/

/* Content lives in the four Improvise footer widget areas (Appearance → Widgets): brand, Car Videos,
   The Foolio Journal, Walking Foolio. Grid, column order and breakpoints come from Improvise's
   master .footer-widgets rules; this is the site's look on the charcoal footer. */
.document-footer .footer-widgets .widget-title {
	margin-bottom: var(--s-spacing);
	padding-bottom: 10px;
	border-bottom: 2px solid var(--color-primary);
	font-size: 1.1rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--color-light-text);
	display: inline-block;
}

.document-footer .wf-footer-links li {
	margin: 0;
	padding: 5px 0;
	line-height: 1.35;
}

.document-footer .wf-footer-links a {
	color: color-mix(in srgb, var(--color-light-text) 85%, transparent);
	font-size: .98rem;
	text-decoration: none;
}

.document-footer .wf-footer-links a:hover,
.document-footer .wf-footer-links a:focus-visible {
	color: var(--color-light-text);
	opacity: 1;
	text-decoration: underline;
	text-decoration-color: var(--color-primary);
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}

.document-footer .wf-footer-logo {
	margin: 0 0 var(--s-spacing);
}

.document-footer .wf-footer-logo a:hover {
	opacity: 1;
}

.document-footer .wf-footer-about {
	max-width: 30ch;
	font-size: .95rem;
	line-height: 1.6;
	color: color-mix(in srgb, var(--color-light-text) 80%, transparent);
}

.document-footer .wf-footer-tagline {
	margin: 0;
	font-family: var(--font-secondary-heading);
	font-size: 1.05rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--color-light-text);
}

/* Improvise centres the brand column below the others at ≤1200px; centre its contents to match. */
@media (max-width: 1200px) {

	.document-footer .footer-widgets > li:first-child .wf-footer-logo img {
		margin: 0 auto;
	}

	.document-footer .wf-footer-about {
		max-width: 46ch;
		margin-left: auto;
		margin-right: auto;
	}
}

/****************************************** Footer social icons: "Jester hover" ************************************/

/* Site override of Improvise's master .social-menu icons (brand-coloured SVG masks): here they're
   ivory marks in square "garage badge" outlines, all the same size. On desktop hover/focus the badge
   fills deep red and the Jester (cropped from the approved tagline lockup, images/jester-peek.webp)
   peeks up from behind it — he only rises above the badge's top edge, never over the icon. Touch
   devices get plain 44px icons; reduced-motion users get the peek without the slide. */
.document-footer .social-menu {
	width: 100%;
	padding-top: 34px; /* headroom for the peek */
}

.document-footer .social-menu ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px; /* px: content-sized flex row — % would resolve to 0 */
}

.document-footer .social-menu li {
	position: relative;
	isolation: isolate;
	margin: 0;
}

.document-footer .social-menu li a {
	--social-color: var(--color-light-text);
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	background-color: var(--color-dark-text);
	border: 1px solid color-mix(in srgb, var(--color-light-text) 35%, transparent);
	text-decoration: none;
	transition: background-color .2s ease, border-color .2s ease;
}

.document-footer .social-menu li a:hover {
	opacity: 1; /* cancel Improvise's footer link fade */
	text-decoration: none;
}

.document-footer .social-menu li a::before {
	width: 22px;
	height: 22px;
	margin: 0;
}

/* The Jester waits hidden behind the badge. */
.document-footer .social-menu li::before {
	content: "";
	position: absolute;
	z-index: 0;
	left: 50%;
	bottom: 8px;
	width: 50px;
	height: 34px;
	background: url(images/jester-peek.webp) center bottom / contain no-repeat;
	transform: translate(-50%, 0) rotate(0deg);
	transition: transform .28s cubic-bezier(.34, 1.56, .64, 1);
	pointer-events: none;
}

@media (hover: hover) and (pointer: fine) {

	.document-footer .social-menu li:hover a,
	.document-footer .social-menu li a:focus-visible {
		background-color: var(--color-primary);
		border-color: var(--color-primary);
	}

	.document-footer .social-menu li:hover::before,
	.document-footer .social-menu li:focus-within::before {
		transform: translate(-50%, -30px) rotate(-8deg);
	}
}

.document-footer .social-menu li a:focus-visible {
	outline: 2px solid var(--color-light-text);
	outline-offset: 2px;
}

@media (hover: none) {

	.document-footer .social-menu li::before {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {

	.document-footer .social-menu li::before,
	.document-footer .social-menu li a {
		transition: none;
	}
}

/****************************************** Foolio Journal (Posts) **************************************************/

/* Every Journal screen (posts index, category archives, articles) carries body.wf-journal
   (functions.php). The Journal is ivory paper with charcoal type per the Journal logo spec;
   the header and footer keep the site-wide charcoal look and primary logo. Card grid,
   pagination and single-post structure come from Improvise's master .blog / .single-post rules. */
body.wf-journal {
	background-color: var(--color-light-text);
	color: var(--color-dark-text);
}

body.wf-journal main::before {
	background-image: url(/wp-content/uploads/2026/09/wf-journal-paper.webp) !important;
	background-repeat: repeat;
	background-size: 600px auto;
}

/* Improvise's main::before background layer is absolutely positioned; lift the Journal's own
   (unpositioned) sections above it — cards/articles are already position: relative. */
body.wf-journal main > *,
.wf-journal-hero {
	position: relative;
}

/* Header stays solid charcoal on the Journal (the transparent nav would put ivory nav text on ivory paper). */
body.wf-journal.has-transparent-nav .document-header {
	background-color: var(--color-header-bg) !important;
}

.wf-journal main :is(h1, h2, h3, h4, h5, h6),
.wf-journal main p,
.wf-journal main li {
	color: var(--color-dark-text);
}

.wf-journal main a {
	color: var(--color-dark-text);
}

.wf-journal main a:hover,
.wf-journal main a:focus-visible {
	color: var(--color-primary);
}

/* Journal hero: logo with clear space, intro, category nav. */
.wf-journal-hero {
	margin: 0 auto var(--l-spacing);
	text-align: center;
}

.wf-journal-hero__logo {
	display: block;
	margin: 0 auto var(--m-spacing);
	padding: 0;
}

.wf-jlogo {
	display: block;
	height: auto;
	margin: 0 auto;
}

/* Logo sizes per the Journal spec: hero 400px+, standard 240–400px, never under 160px. */
.wf-journal-hero--master .wf-jlogo { width: clamp(260px, 38vw, 460px); }
.wf-journal-hero--standard .wf-jlogo { width: clamp(200px, 22vw, 280px); }

.wf-journal-hero .page-title {
	padding-top: 0;
	margin-bottom: var(--s-spacing);
}

.wf-journal-hero__intro {
	max-width: var(--restricted-width);
	margin: 0 auto var(--m-spacing);
}

.wf-journal-hero__intro p {
	font-size: 1.2rem;
	line-height: 1.6;
}

/* Text fallback until the Journal logo image is set (option wf_journal_logo_id). */
.wf-journal-wordmark {
	display: block;
	font-family: var(--font-primary-heading);
	font-size: clamp(2.5rem, 6vw, 4.5rem);
	line-height: 1;
	text-transform: uppercase;
}

.wf-journal-wordmark strong {
	display: block;
	color: var(--color-primary);
}

.wf-journal-cats ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px 28px; /* px: wrapping flex row sized by its content — % would resolve to 0 */
	margin: 0;
	padding: var(--s-spacing) 0 0;
	border-top: 1px solid color-mix(in srgb, var(--color-dark-text) 20%, transparent);
	list-style: none;
}

.wf-journal-cats li {
	margin: 0;
}

.wf-journal main .wf-journal-cats a {
	display: inline-block;
	padding: 6px 0;
	border-bottom: 3px solid transparent;
	font-family: var(--font-primary-nav);
	font-size: 1.05rem;
	letter-spacing: .06em;
	text-decoration: none;
	text-transform: uppercase;
}

.wf-journal main .wf-journal-cats a[aria-current="page"],
.wf-journal main .wf-journal-cats a:hover {
	border-bottom-color: var(--color-primary);
	color: var(--color-dark-text);
}

/* Post cards: override Improvise's red rounded card for the Journal's paper look. */
.wf-journal .blog:not(.search) .row article {
	display: flex;
	flex-direction: column;
	background: color-mix(in srgb, var(--color-white) 55%, transparent);
	border: 1px solid color-mix(in srgb, var(--color-dark-text) 14%, transparent);
	border-radius: 0;
}

.wf-journal .blog:not(.search) .row article:hover {
	box-shadow: 0 10px 24px color-mix(in srgb, var(--color-dark-text) 18%, transparent);
	transform: translateY(-4px);
}

.wf-journal .blog:not(.search) .row article .post-thumbnail {
	height: 240px;
}

.wf-journal .blog:not(.search) .row article .post-thumbnail img {
	border-radius: 0;
}

.wf-journal .blog:not(.search) .row article .post-content {
	flex: 1;
	padding: var(--m-spacing) var(--m-spacing) calc(var(--m-spacing) + 64px);
}

.wf-journal .blog:not(.search) .row article .post-content p {
	color: var(--color-dark-text);
}

.wf-journal .blog .row article .post-header {
	display: block;
}

.wf-journal .blog .row article h2 {
	margin-bottom: calc(var(--s-spacing) / 2);
	font-size: 1.55rem;
	line-height: 1.1;
}

.wf-journal .blog .row article h2 a {
	text-decoration: none;
}

.wf-post-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 12px; /* px: content-sized wrapping flex row — % would resolve to 0 */
	margin-bottom: 8px;
	font-family: var(--font-secondary-heading);
	font-size: .9rem;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.wf-journal main .wf-post-meta a.wf-post-cat {
	color: var(--color-primary);
	text-decoration: none;
}

.wf-journal .blog:not(.search) .row article .post-content .read-more {
	border-color: var(--color-dark-text);
	color: var(--color-dark-text);
	font-family: var(--font-secondary-heading);
	font-weight: 500;
	left: var(--m-spacing);
	bottom: var(--m-spacing);
	letter-spacing: .06em;
	text-transform: uppercase;
	width: calc(100% - var(--m-spacing) * 2);
}

.wf-journal .blog:not(.search) .row article .post-content .read-more:hover {
	background-color: var(--color-dark-text);
	color: var(--color-light-text);
}

.wf-journal-empty {
	grid-column: 1 / -1;
	text-align: center;
}

/* Articles: featured image full width directly under the header, photo only — the Journal logo
   overlay was dropped (client, Oct 2026) so it doesn't cover the photograph; the title follows below. */
.wf-article-hero {
	position: relative;
	height: 70vh;
	min-height: 380px;
	max-height: 760px;
	margin-top: 0;
	margin-bottom: 0;
	overflow: hidden;
	background-color: var(--color-dark-text);
}

.wf-article-hero__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	object-fit: cover;
	object-position: center;
}

@media (max-width: 600px) {

	.wf-article-hero {
		height: 56vh;
		min-height: 320px;
	}
}

.wf-journal.single-post .post-header:not(.has-featured-image) h1 {
	font-size: clamp(2.25rem, 4.5vw, 3.5rem);
	text-align: center;
}

.wf-journal.single-post .post-info {
	margin-bottom: var(--m-spacing);
	text-align: center;
}

.wf-journal.single-post .post-info p {
	font-size: .95rem;
}

.wf-journal.single-post .post-content > :not(.alignwide):not(.alignfull):not(.post-info) {
	max-width: var(--restricted-width);
	margin-left: auto;
	margin-right: auto;
}

.wf-journal.single-post .wp-block-quote {
	border-left: 6px solid var(--color-primary);
	padding-left: var(--m-spacing);
}

.wf-journal.single-post .wp-block-quote p {
	font-family: var(--font-secondary-heading);
	font-size: 1.6rem;
	line-height: 1.25;
}

.wf-journal.single-post .post-footer .wrapper a {
	font-family: var(--font-secondary-heading);
	font-weight: 500;
}


/****************************************** The Garage (WooCommerce shop page) ****************************************/

/* Lift the shop header above Improvise's absolutely positioned main::before background layer
   (same issue as the Journal hero). */
.woocommerce-products-header {
	position: relative;
}

/* The Garage logo (shop page content, above the products) carries the title visually; the
   WooCommerce H1 ("The Garage") stays in the page for SEO and screen readers. */
.post-type-archive-product .woocommerce-products-header__title {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.wf-garage-logo {
	margin: 0 auto var(--m-spacing);
}

.wf-garage-logo img {
	width: min(640px, 100%) !important;
	height: auto;
}

.wf-garage-intro {
	max-width: var(--restricted-width);
	margin: 0 auto var(--l-spacing);
	text-align: center;
}

/****************************************** Inner pages *************************************************************/

.wf-lead {
	font-size: 1.3rem;
	line-height: 1.5;
}

.wf-crosslink {
	border-left: 6px solid var(--color-primary);
	background-color: color-mix(in srgb, var(--color-dark-text) 94%, var(--color-light-text));
	margin-top: var(--l-spacing);
	padding: var(--m-spacing);
}

/* Yoast breadcrumbs block */
.yoast-breadcrumbs {
	color: var(--color-accent);
	font-size: .9rem;
	letter-spacing: .04em;
	margin-bottom: var(--m-spacing);
	text-transform: uppercase;
}

.yoast-breadcrumbs a {
	color: var(--color-accent);
	text-decoration: none;
}