/*
Theme Name: Michael Absalom Child Theme
Template: theme360
Version: 1.0
Author: Respond Agency Ltd
Author URI: https://werespond.uk
Description: A Theme360 child theme for Michael Absalom
*/

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&family=Source+Serif+4:ital,opsz,wght@0,8..60,200..900;1,8..60,200..900&display=swap');

:root {
/* Fonts */
  --fnt_font-family: "Outfit", sans-serif;        /* Body & navigation */
  --hed_fnt_font-family: "Source Serif 4", serif; /* Titles, headings & blockquotes */
  --fnt_font-size: 18px;
  --fnt_line-height: 1.7em;
  --fnt_font-weight: 400;
  
  --cta_fnt_font-size: 17px;
  --cta_fnt_line-height: 1.3rem;
  --cta_fnt_font-weight: 400;       /* Match navigation links */
  --cta_fnt_text-transform: uppercase;
  
  --cta-txt_fnt_font-size: 0.9rem;
  --cta-txt_fnt_font-weight: 600;
  --cta-txt_fnt_text-transform: uppercase;

  --psh_fnt_font-size: 0.9rem;
  --psh_fnt_line-height: 1.2rem;
  --psh_fnt_font-weight: 600;
  
  --pre_fnt_font-size: 0.8rem;
  --pre_fnt_line-height: 1.2rem;
  --pre_fnt_font-weight: 500;
  --pre_fnt_letter-spacing: 0.15rem;
  
  --hed_fnt_font-weight: 350;
  --hed_fnt_letter-spacing: normal;
  
  --h1_fnt_font-size: 50px;
  --h1_fnt_line-height: 56px;

  --h2_fnt_font-size: 50px;
  --h2_fnt_line-height: 56px;

  --h3_fnt_font-size: 2rem;
  --h3_fnt_line-height: 2.4rem;

  --h4_fnt_font-size: 1.5rem;
  --h4_fnt_line-height: 1.9rem;

/* Colours */
  --clrshadow: 1px 4px 11px 1px rgba(64, 194, 222, 0.1);
  --clrblack: 0, 0, 0;            /* #000000 - Titles */
  --clrblack_alt: 26, 26, 26;     /* #1A1A1A - Title/black hover */
  --clrwhite: 255, 255, 255;
  --clrwhite_alt: 247, 250, 252;
  --clrgrey: 24, 52, 57;          /* #183439 - Grey & body text */
  --clrgrey_alt: 20, 44, 48;      /* #142C30 - Grey hover */
  /* Primary - Primary CTA */
  --clr1: 64, 194, 222;           /* #40C2DE - Primary */
  --clr1_alt: 54, 165, 189;       /* #36A5BD - Primary hover */
  --clr1_txt: 0, 0, 0;
  /* Name - Secondary CTA */
  --clr2: 91, 35, 255;
  --clr2_alt: 63, 9, 222;
  --clr2_txt: 255, 255, 255;
  /* Name */
  --clr3: 54, 47, 79;
  --clr3_alt: 32, 26, 56;
  --clr3_txt: 255, 255, 255;
  /* Name */
  --clr4: 0, 139, 255;
  --clr4_alt: 0, 117, 214;
  --clr4_txt: 255, 255, 255;

/* Corners */
  --radius_sm: 0px;
  --radius_md: 3px;
  --radius_cta: 0px;
  
/* Padding */
  --cntntpad: 80px;
  --cntntpad_slm: 40px;
  --ctapad: 14px 20px;
}

/* Less than Medium */		
@media screen and (max-width: 64em) { 
	:root {
	/* Fonts */
	  --fnt_font-size: 18px;
	  --fnt_line-height: 1.7em;
  
	  --cta_fnt_font-size: 0.9rem;
	  --cta_fnt_line-height: 1.2rem;
  
	  --h1_fnt_font-size: 40px;
	  --h1_fnt_line-height: 44px;

	  --h2_fnt_font-size: 40px;
	  --h2_fnt_line-height: 44px;

	  --h3_fnt_font-size: 1.6rem;
	  --h3_fnt_line-height: 2rem;

	  --h4_fnt_font-size: 1.4rem;
	  --h4_fnt_line-height: 1.8rem;

  
	/* Padding */
	  --cntntpad: 60px;
	  --cntntpad_slm: 40px;
	  --ctapad: 10px 18px;
	}
}


/* -- Overrides -- */
	/* Fonts: Source Serif 4 for headings & blockquotes, Outfit for body & nav */
	h1, h2, h3, h4, h5, h6,
	blockquote {
		font-family: var(--hed_fnt_font-family);
	}

	/* Blockquotes: large, oblique/italic */
	blockquote {
		font-style: italic;
		font-size: 30px;
		line-height: 1.6;
	}

	/* Navigation: Outfit, uppercase */
	.header-container .nav .primary-menu li a,
	.top-bar-container .nav .secondary-menu li a,
	.mob-menu-item {
		font-family: var(--fnt_font-family);
		text-transform: uppercase;
	}

	/* Nav top-level links */
	.header-container .nav .primary-menu > li > a {
		font-size: 14px;
		letter-spacing: 0.1em;
	}

	/* Header: slightly more top/bottom padding (parent is 18px) */
	header {
		padding: 20px 0;
	}

	/* Header logo width */
	.header-container .logo img {
		width: 200px;
	}

	/* Header CTAs: only show where the mobile nav button is used (<= 64em) */
	.header-container .ctas {
		display: none;
	}

	/* Body copy grey, titles black (default / light sections) */
	body {
		color: rgba(var(--clrgrey), 1);
	}

	h1, h2, h3, h4, h5, h6 {
		color: rgba(var(--clrblack), 1);
	}

	/* Links: black, not blue */
	a:link, a:visited, a:active {
		color: rgba(var(--clrblack), 1);
	}

	/* Keep body copy grey on white section wrappers */
	.clrwhite-bg {
		color: rgba(var(--clrgrey), 1);
	}

	/* clrgrey is now a dark grey, so .clrgrey-bg is a dark section: light text */
	.clrgrey-bg {
		color: rgba(var(--clrwhite), 1);
	}

	/* Parent components that use clrgrey as a background (now dark): light text */
	.top-bar,
	.top-bar a,
	.pricing-plan div.price {
		color: rgba(var(--clrwhite), 1);
	}

	/* On dark / coloured sections, let headings inherit the section's flipped text colour */
	.clrgrey-bg h1, .clrgrey-bg h2, .clrgrey-bg h3, .clrgrey-bg h4, .clrgrey-bg h5, .clrgrey-bg h6,
	.clrblack-bg h1, .clrblack-bg h2, .clrblack-bg h3, .clrblack-bg h4, .clrblack-bg h5, .clrblack-bg h6,
	.clr1-bg h1, .clr1-bg h2, .clr1-bg h3, .clr1-bg h4, .clr1-bg h5, .clr1-bg h6,
	.clr2-bg h1, .clr2-bg h2, .clr2-bg h3, .clr2-bg h4, .clr2-bg h5, .clr2-bg h6,
	.clr3-bg h1, .clr3-bg h2, .clr3-bg h3, .clr3-bg h4, .clr3-bg h5, .clr3-bg h6,
	.clr4-bg h1, .clr4-bg h2, .clr4-bg h3, .clr4-bg h4, .clr4-bg h5, .clr4-bg h6 {
		color: inherit;
	}

	/* CTA buttons: match navigation link letter-spacing, white text on the blue (primary) button */
	a.cta, a.cta:link, a.cta:active, a.cta:visited {
		letter-spacing: 0.1em;
		color: rgba(var(--clrwhite), 1);
	}

	/* Override Primary CTA */
	.clr1-bg a.cta.primary, .clr1-bg a.cta.primary:link, .clr1-bg a.cta.primary:visited, .clr1-bg a.cta.primary:active {
		background: rgba(var(--clrwhite), 1);
		border-color: rgba(var(--clrwhite), 1);
		color: rgba(var(--clrblack), 1);
	}
	
		.clr1-bg a.cta.primary:hover {
			background: rgba(var(--clrwhite_alt), 1);
			border-color: rgba(var(--clrwhite_alt), 1);
			color: rgba(var(--clrblack), 1);
		}
		
	/* Override Secondary CTA */
	.clr2-bg a.cta.secondary, .clr2-bg a.cta.secondary:link, .clr2-bg a.cta.secondary:visited, .clr2-bg a.cta.secondary:active {
		background: rgba(var(--clrwhite), 1);
		border-color: rgba(var(--clrwhite), 1);
		color: rgba(var(--clrblack), 1);
	}
	
		.clr2-bg a.cta.secondary:hover {
			background: rgba(var(--clrwhite_alt), 1);
			border-color: rgba(var(--clrwhite_alt), 1);
			color: rgba(var(--clrblack), 1);
		}
			
			
/* Less than Medium */
@media screen and (max-width: 64em) {

	/* Restore header CTAs container where the mobile nav button shows */
	.header-container .ctas {
		display: flex;
	}

}

/* Less than Small */
@media screen and (max-width: 48em) {

}

/* Slideshow page-builder element (simple cross-fade) */
.slideshow .slideshow-slides {
	position: relative;
	line-height: 0;
	background-color: #000;
}

	.slideshow .slideshow-slide {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
		opacity: 0;
		transition: opacity 1s ease-in-out;
	}

	/* First slide stays in flow to define the container height */
	.slideshow .slideshow-slide.is-first {
		position: relative;
		height: auto;
	}

	.slideshow .slideshow-slide.is-active {
		opacity: 1;
	}


/* Logo grid: 8 cols desktop / 6 tablet / 2 mobile, centered rows, no shadow, smaller boxes */
.logos.logo-grid .logo-selection-container {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;       /* centre an incomplete last row */
	gap: 30px;
}

	.logos.logo-grid .logo-selection-container .logo-item {
		flex: 0 0 calc(12.5% - 26.25px); /* 8 columns (gap-aware) */
		max-width: calc(12.5% - 26.25px);
		aspect-ratio: auto;          /* drop the forced square = smaller boxes */
		box-shadow: none;
	}

		.logos.logo-grid .logo-selection-container .logo-item img {
			max-width: 150px;
			width: 100%;
			height: auto;
		}

/* Less than Medium (tablet): 6 columns */
@media screen and (max-width: 64em) {
	.logos.logo-grid .logo-selection-container .logo-item {
		flex: 0 0 calc(16.666% - 25px); /* 6 columns */
		max-width: calc(16.666% - 25px);
	}
}

/* Less than Small (mobile): 2 columns */
@media screen and (max-width: 48em) {
	.logos.logo-grid .logo-selection-container .logo-item {
		flex: 0 0 calc(50% - 15px); /* 2 columns */
		max-width: calc(50% - 15px);
	}
}


/* Footer: no border, reduced padding */
footer#main {
	padding: 30px 0;
	border-top: none;
}

/* Footer: 2-column layout (Pure grid handles the columns) */
footer#main .footer-left {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 30px;
}

	footer#main .footer-left .logo,
	footer#main .footer-left .social {
		margin: 0;
	}

		footer#main .footer-left .social a {
			margin: 0 12px 0 0;
		}

		/* Spotlight icon is a PNG — size it to match the Font Awesome icons */
		footer#main .footer-left .social a .spotlight-icon {
			height: 1.4rem;
			width: auto;
			vertical-align: middle;
			position: relative;
			top: -2px;
		}

/* Right column: copyright + legal nav, right aligned, 12px, always black */
footer#main .footer-right,
footer#main .footer-right a,
footer#main .footer-right a:link,
footer#main .footer-right a:visited,
footer#main .footer-right a:hover {
	text-align: right;
	font-size: 12px;
	line-height: 1.5;
	color: rgba(var(--clrblack), 1);
}

	/* Nudge the right column down so it aligns vertically with the logo */
	footer#main .footer-right {
		padding-top: 4px;
	}

	footer#main .footer-right #legal-navigation {
		list-style: none;
		display: inline-block;
		margin: 0 0 0 12px;
		padding: 0;
		text-transform: uppercase;
		vertical-align: baseline;
	}

		footer#main .footer-right #legal-navigation li {
			display: inline-block;
			padding: 0 10px;
			border-left: solid 1px rgba(var(--clrgrey), 1);
			line-height: 1em;
		}

			footer#main .footer-right #legal-navigation li:first-of-type {
				border-left: none;
				padding-left: 0;
			}

		footer#main .footer-right #legal-navigation a,
		footer#main .footer-right #legal-navigation a:link,
		footer#main .footer-right #legal-navigation a:visited {
			color: rgba(var(--clrblack), 1);
			text-decoration: none;
		}

			footer#main .footer-right #legal-navigation a:hover {
				text-decoration: underline;
			}

	footer#main .footer-right .legal-statement {
		display: inline-block;
		vertical-align: baseline;
	}

		footer#main .footer-right .legal-statement p {
			display: inline;
			margin: 0;
		}

/* Footer stacks and centres on mobile (below the Pure md breakpoint) */
@media screen and (max-width: 48em) {
	/* Logo on one line, social icons on a new line below */
	footer#main .footer-left {
		flex-direction: column;
		align-items: center;
		gap: 20px;
		justify-content: center;
		margin-bottom: 30px;
	}

	footer#main .footer-right {
		text-align: center;
		padding-top: 0;
	}

		/* Copyright on one line, legal nav on a new row below */
		footer#main .footer-right .legal-statement,
		footer#main .footer-right #legal-navigation {
			display: block;
			margin-left: 0;
		}

		footer#main .footer-right #legal-navigation {
			margin-top: 10px;
		}
}


/* Two-column row: 80px padding on the inner side of each column */
.content-two-column .grid-2-col .content-container.column-1 {
	padding-right: 80px;
}

.content-two-column .grid-2-col .content-container.column-2 {
	padding-left: 80px;
}

	/* No title? Remove the top space on the first paragraph */
	.content-two-column .content-container > p:first-child {
		margin-top: 0;
	}

/* Large serif body — two-column column 1, and the "Large Font Style" wysiwyg rows (post + page builder) */
.content-two-column .content-container.column-1,
.post-wysiwyg.large-font-style .content-container,
.wysiwyg.large-font-style .content-container {
	font-family: var(--hed_fnt_font-family);
	font-size: 24px;
	font-weight: 350;
	line-height: 1.8;
}

	/* Smaller on mobile */
	@media screen and (max-width: 64em) {
		.content-two-column .content-container.column-1,
		.post-wysiwyg.large-font-style .content-container,
		.wysiwyg.large-font-style .content-container {
			font-size: 19px;
		}
	}

	/* Bold/strong text within the large font style is 600 (not the default heavy bold) */
	.large-font-style .content-container strong,
	.large-font-style .content-container b,
	.content-two-column .content-container.column-1 strong,
	.content-two-column .content-container.column-1 b {
		font-weight: 600;
	}

/* Contact block (shown at the bottom of a column when "Show Contact" is on) */
.contact-block {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 20px;
	margin-top: 2rem;
}

	.contact-block .social a {
		display: inline-block;
		margin: 0 12px 0 0;
		font-size: 1.4rem;
		color: rgba(var(--clrblack), 1);
	}

		.contact-block .social a .spotlight-icon {
			height: 1.4rem;
			width: auto;
			vertical-align: middle;
			position: relative;
			top: -2px;
		}


/* Highlights: full-bleed repeating image grid (2 columns, odd one full width) */
.highlights .highlights-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0;
}

	/* A single image, or a leftover odd one, spans the full width */
	.highlights .highlights-grid .highlight-item:last-child:nth-child(odd) {
		grid-column: 1 / -1;
	}

	.highlights .highlight-item {
		position: relative;
		display: block;
		overflow: hidden;
	}

		.highlights .highlight-item picture {
			display: block;
			width: 100%;
			height: 100%;
		}

		.highlights .highlight-item img {
			display: block;
			width: 100%;
			height: 100%;
			object-fit: cover;
		}

	/* Hover overlay (only on linked items) */
	.highlights .highlight-overlay {
		position: absolute;
		inset: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		background: rgba(0, 0, 0, 0);
		transition: background 0.4s ease;
	}

		.highlights .highlight-overlay .discover-cta {
			opacity: 0;
			transition: opacity 0.4s ease;
			/* Normal CTA button styling, coloured grey */
			display: inline-block;
			background: rgba(var(--clrgrey), 1);
			color: rgba(var(--clrwhite), 1);
			border: solid 3px rgba(var(--clrgrey), 1);
			border-radius: var(--radius_cta);
			padding: var(--ctapad);
			min-width: 160px;
			text-align: center;
			font-size: var(--cta_fnt_font-size);
			line-height: var(--cta_fnt_line-height);
			font-weight: var(--cta_fnt_font-weight);
			text-transform: var(--cta_fnt_text-transform);
			letter-spacing: 0.1em;
		}

	.highlights a.highlight-item:hover .highlight-overlay {
		background: rgba(0, 0, 0, 0.45);
	}

	.highlights a.highlight-item:hover .discover-cta {
		opacity: 1;
	}

/* Highlights: single column on mobile */
@media screen and (max-width: 48em) {
	.highlights .highlights-grid {
		grid-template-columns: 1fr;
	}
}

/* Two-column row: drop the inner padding once the columns stack on mobile */
@media screen and (max-width: 48em) {
	.content-two-column .grid-2-col .content-container.column-1,
	.content-two-column .grid-2-col .content-container.column-2 {
		padding-left: 0;
		padding-right: 0;
	}
}


/* Post hero (category + single): full-width video / feature image */
.post-video,
.post-feature-image {
	line-height: 0;
}

	.post-feature-image img {
		display: block;
		width: 100%;
		height: auto;
	}

/* Grey intro row (category + single) — content (2/3) + CONTACT CTA (1/3) */
.post-intro .post-intro-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

	.post-intro .post-intro-content > :first-child {
		margin-top: 0;
	}

	/* Post meta sits on the dark grey section, so keep it (and its links) light */
	.post-intro .post-meta,
	.post-intro .post-meta a,
	.post-intro .post-meta a:link,
	.post-intro .post-meta a:visited,
	.post-intro .post-meta a:active {
		color: inherit;
	}

	.post-intro .post-intro-cta {
		text-align: right;
		align-self: flex-start;
		margin-top: 5px;
	}

/* Stack the intro on mobile */
@media screen and (max-width: 48em) {
	.post-intro .post-intro-cta {
		text-align: left;
		margin-top: 1.5rem;
	}
}


/* Post builder: media row image fills its container */
.post-media .content-container.box-media img {
	display: block;
	width: 100%;
	height: auto;
}

/* Remove the top space on the first paragraph of each row */
.post-builder-row .content-container > p:first-child {
	margin-top: 0;
}

/* A blockquote that ends a wysiwyg row shouldn't add trailing space */
.post-wysiwyg .content-container > blockquote:last-child {
	margin-bottom: 0;
	padding-bottom: 0;
}


/* ---------------------------------------------------------------------------
   Post builder: media grid (3 cols desktop / 2 tablet / 1 mobile)
--------------------------------------------------------------------------- */
.post-media-grid .media-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}

@media screen and (max-width: 64em) {
	.post-media-grid .media-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media screen and (max-width: 48em) {
	.post-media-grid .media-grid {
		grid-template-columns: 1fr;
	}
}

.post-media-grid .media-grid-item {
	position: relative;
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	overflow: hidden;
}

	.post-media-grid .media-grid-item img {
		display: block;
		width: 100%;
		height: 100%;
		aspect-ratio: 16 / 9;
		object-fit: cover;
	}

	.post-media-grid button.media-grid-item {
		cursor: pointer;
	}

/* Play affordance over video thumbnails */
.post-media-grid .media-grid-play {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 64px;
	height: 64px;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.55);
	transition: background 0.2s ease, transform 0.2s ease;
	pointer-events: none;
}

	.post-media-grid .media-grid-play::before {
		content: "";
		position: absolute;
		top: 50%;
		left: 54%;
		transform: translate(-50%, -50%);
		border-style: solid;
		border-width: 11px 0 11px 19px;
		border-color: transparent transparent transparent #fff;
	}

.post-media-grid button.media-grid-item:hover .media-grid-play,
.post-media-grid button.media-grid-item:focus-visible .media-grid-play {
	background: rgba(0, 0, 0, 0.8);
	transform: translate(-50%, -50%) scale(1.08);
}


/* ---------------------------------------------------------------------------
   Video modal (opened from the media grid)
--------------------------------------------------------------------------- */
.media-modal[hidden] {
	display: none;
}

.media-modal {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}

.media-modal-overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.85);
}

.media-modal-dialog {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 960px;
}

.media-modal-content {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	background: #000;
}

	.media-modal-content iframe,
	.media-modal-content video,
	.media-modal-content embed,
	.media-modal-content object {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		border: 0;
	}

.media-modal-close {
	position: absolute;
	top: -46px;
	right: 0;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	background: none;
	color: #fff;
	font-size: 38px;
	line-height: 1;
	cursor: pointer;
}

body.media-modal-open {
	overflow: hidden;
}


/* Banner (form type): social icons under the content */
.banner-with-form .social {
	margin-top: 1.5rem;
}

	.banner-with-form .social a {
		display: inline-block;
		margin: 0 12px 0 0;
		font-size: 1.4rem;
		color: inherit;
	}

		.banner-with-form .social a .spotlight-icon {
			height: 1.4rem;
			width: auto;
			vertical-align: middle;
			position: relative;
			top: -2px;
		}


/* ---- Banner (form type) form styling ---- */

/* Top-align the two columns (don't vertically centre) */
.banner-with-form .content-container.valign-center {
	align-items: flex-start;
}

/* Full-width form (remove the 400px cap) */
.banner-with-form .form-container {
	max-width: none;
}

/* Limit the textarea height */
.banner-with-form textarea {
	height: 100px;
}

/* Fields: underline-only style */
.banner-with-form input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]),
.banner-with-form textarea,
.banner-with-form select {
	border: none;
	border-bottom: 2px solid rgba(var(--clrgrey), 0.15);
	border-radius: 0;
	padding-left: 0;
	padding-right: 0;
	font-size: 1.2rem;
}

/* Form buttons: white text */
.banner-with-form input[type="submit"],
.banner-with-form button,
.banner-with-form input[type="submit"]:hover,
.banner-with-form button:hover {
	color: rgba(var(--clrwhite), 1);
}


/* Highlights variant: 3 columns with 30px gutters (used on the main blog index) */
.highlights.cols-3 .highlights-grid {
	grid-template-columns: repeat(3, 1fr);
	gap: 30px;
	padding-left: 30px;
	padding-right: 30px;
}

/* 30px bottom on the section (instead of the full content-padding) */
.highlights.cols-3.content-padding {
	padding-bottom: 30px;
}

	/* Uniform grid — no full-width spanning for an odd last item */
	.highlights.cols-3 .highlights-grid .highlight-item:last-child:nth-child(odd) {
		grid-column: auto;
	}

	/* Cards: uniform image, then meta + linked title beneath */
	.highlights.cols-3 .highlight-item {
		aspect-ratio: 3 / 2;
		display: block;
	}

		/* Inset the text content from the full-bleed image */
		.highlights.cols-3 .highlight-card .post-meta,
		.highlights.cols-3 .highlight-card .highlight-title {
			padding-left: 30px;
			padding-right: 30px;
		}

		.highlights.cols-3 .highlight-card .post-meta {
			display: block;
			margin: 1rem 0 0.4rem;
		}

		/* Post meta at 50% grey (including the category links), no underline */
		.highlights.cols-3 .highlight-card .post-meta,
		.highlights.cols-3 .highlight-card .post-meta a,
		.highlights.cols-3 .highlight-card .post-meta a:link,
		.highlights.cols-3 .highlight-card .post-meta a:visited {
			color: rgba(var(--clrgrey), 0.5);
			text-decoration: none;
		}

		.highlights.cols-3 .highlight-title {
			margin: 0;
			font-size: 2.5rem;
			line-height: 1.2;
		}

			.highlights.cols-3 .highlight-title a {
				text-decoration: none;
			}

				.highlights.cols-3 .highlight-title a:hover {
					text-decoration: underline;
				}

/* 3 cols -> 2 on tablet -> 1 on mobile */
@media screen and (max-width: 64em) {
	.highlights.cols-3 .highlights-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media screen and (max-width: 48em) {
	.highlights.cols-3 .highlights-grid {
		grid-template-columns: 1fr;
	}
}

/* Post-count column tweaks for the category grid (desktop only — tablet and
   mobile keep the standard 2 / 1 collapse defined above). */
@media screen and (min-width: 64.01em) {

	/* 2, 4 or 8 posts -> two columns */
	.highlights.cols-3.grid-2 .highlights-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	/* 5 posts -> a row of two, then a row of three (6-col grid + spans) */
	.highlights.cols-3.grid-5 .highlights-grid {
		grid-template-columns: repeat(6, 1fr);
	}

		.highlights.cols-3.grid-5 .highlight-card {
			grid-column: span 2; /* three per row */
		}

		.highlights.cols-3.grid-5 .highlight-card:nth-child(-n+2) {
			grid-column: span 3; /* first two: two per row */
		}
}


/* Featured category tiles: full-bleed 3-column grid (flush, no gutters) */
.highlights.cols-3-bleed {
	margin-bottom: var(--cntntpad, 60px);
}

.highlights.cols-3-bleed .highlights-grid {
	grid-template-columns: repeat(3, 1fr);
	gap: 0;
}

	/* Uniform tiles regardless of the source image dimensions */
	.highlights.cols-3-bleed .highlight-item {
		aspect-ratio: 3 / 2;
	}

/* 3 cols -> 2 on tablet -> 1 on mobile */
@media screen and (max-width: 64em) {
	.highlights.cols-3-bleed .highlights-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media screen and (max-width: 48em) {
	.highlights.cols-3-bleed .highlights-grid {
		grid-template-columns: 1fr;
	}
}


/* Fixed show reels banner: full-width single Highlight item */
.showreel-banner .highlight-item img {
	height: auto;
}


/* Category post grid: 30px top padding */
.category-posts.content-padding {
	padding-top: 30px;
}


/* Secondary category nav (below the intro on blog/category pages) */
.category-subnav {
	background-color: rgba(var(--clrwhite), 1);
}

	.category-subnav ul {
		list-style: none;
		margin: 0;
		padding: 0 0 40px;
		text-align: center;
	}

	.category-subnav li {
		display: inline-block;
		margin: 0 18px;
	}

	.category-subnav a,
	.category-subnav a:link,
	.category-subnav a:visited {
		font-family: var(--fnt_font-family);
		text-transform: uppercase;
		font-size: 18px;
		letter-spacing: 0.1em;
		color: rgba(var(--clrblack), 1);
		text-decoration: none;
	}

		.category-subnav a:hover {
			color: rgba(var(--clr1), 1);
		}


/* Header nav dropdown: slightly smaller font, slightly more spacing between items */
.header-container .nav .primary-menu > .menu-item-has-children > ul li a {
	font-size: 0.85rem;
}

.header-container .nav .primary-menu > .menu-item-has-children > ul li {
	padding: 8px 0;
}


/* White (home) logo hidden by default — shown only on the desktop floating home header */
.logo .logo-home {
	display: none;
}

/* Home page: floating header over the content (desktop only; mobile uses the normal white header) */
@media screen and (min-width: 64.0625em) {
	body.home header {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 100;
		background: transparent !important;
	}

	/* Black-to-transparent gradient behind the header, twice its height */
	body.home header::before {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 200%;
		background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
		z-index: -1;
		pointer-events: none;
	}

	/* White top-level nav links on the home header */
	body.home .header-container .nav .primary-menu > li > a,
	body.home .header-container .nav .primary-menu > li > a:link,
	body.home .header-container .nav .primary-menu > li > a:visited {
		color: rgba(var(--clrwhite), 1);
	}

	/* Swap to the white logo */
	body.home .logo .logo-main {
		display: none;
	}

	body.home .logo .logo-home {
		display: block;
	}
}


/* ---- Mobile nav: modern, clean white drawer ---- */
.nav-mobile {
	background: rgba(0, 0, 0, 0.5); /* dark backdrop */
}

	.nav-mobile .nav-container {
		background: rgba(var(--clrwhite), 1);
		width: 85%;
		max-width: 360px;
		padding-top: 84px; /* room for the close button */
	}

	/* Close button: clean dark X, top-right inside the panel */
	.nav-mobile .nav-container a.mob-menu-item {
		left: auto;
		right: 22px;
		top: 22px;
		background: transparent;
		color: rgba(var(--clrblack), 1);
		border-radius: 0;
		font-size: 26px;
		padding: 0;
		width: auto;
	}

	.nav-mobile ul li,
	.nav-mobile .nav-container .sub-items {
		border-top: none;
		border-bottom: solid 1px rgba(var(--clrgrey), 0.12);
		border-color: rgba(var(--clrgrey), 0.12);
	}

		.nav-mobile ul li a {
			color: rgba(var(--clrblack), 1);
			font-family: var(--fnt_font-family);
			text-transform: uppercase;
			font-size: 1rem;
			letter-spacing: 0.08em;
			padding: 16px 30px;
			font-weight: 400;
		}

			.nav-mobile ul li a:hover {
				color: rgba(var(--clr1), 1);
				left: 0; /* drop the slide nudge */
			}

		.nav-mobile ul li i {
			color: inherit;
		}

	/* Sub-menus: light, indented, sentence case */
	.nav-mobile ul ul.sub-menu {
		background: rgba(var(--clrgrey), 0.04);
	}

		.nav-mobile ul ul.sub-menu li,
		.nav-mobile ul ul.sub-menu ul.sub-menu li:first-of-type {
			border-top: none;
			border-bottom: solid 1px rgba(var(--clrgrey), 0.12);
			border-color: rgba(var(--clrgrey), 0.12);
		}

			.nav-mobile ul ul.sub-menu li a {
				color: rgba(var(--clrgrey), 1);
				text-transform: none;
				font-size: 0.9rem;
				padding-left: 45px;
			}


/* Mobile nav: don't show the dropdown sub-menus */
.nav-mobile ul ul.sub-menu {
	display: none !important;
}

/* Sharp 3-line burger (replace the rounded Font Awesome bars) */
.header-container .ctas .mob-menu-item {
	display: inline-block;
	width: 26px;
	height: 18px;
	padding: 0;
	position: relative;
}

	.header-container .ctas .mob-menu-item i {
		display: none;
	}

	.header-container .ctas .mob-menu-item::before,
	.header-container .ctas .mob-menu-item::after {
		content: "";
		position: absolute;
		left: 0;
		width: 100%;
		height: 2px;
		background: currentColor;
		border-radius: 0;
	}

	.header-container .ctas .mob-menu-item::before {
		top: 0;
		box-shadow: 0 8px 0 currentColor; /* top + middle line */
	}

	.header-container .ctas .mob-menu-item::after {
		top: 16px; /* bottom line */
	}


/* ---- Mobile (phone) tweaks ---- */
@media screen and (max-width: 48em) {

	/* 3-col cards: smaller title, flush text (no side padding) */
	.highlights.cols-3 .highlight-title {
		font-size: 30px;
	}

	.highlights.cols-3 .highlight-card .post-meta,
	.highlights.cols-3 .highlight-card .highlight-title {
		padding-left: 0;
		padding-right: 0;
	}

	/* Category subnav: each link on its own line */
	.category-subnav li {
		display: block;
		margin: 0;
	}

		.category-subnav li a {
			display: inline-block;
			padding: 7px 0;
		}

}