/**
 * Theme Name: Thula Theme
 * Text Domain: thula
 * Version: 1.0.9
 */

/* -------------------------------------------------------------------------- */
/* Base Helpers                                                               */
/* -------------------------------------------------------------------------- */

/*
 * theme.json should handle the normal site-wide design decisions:
 * colours, typography, spacing, and block defaults.
 *
 * These CSS helpers are kept because they provide behaviour or browser
 * handling that theme.json does not cover cleanly.
 */

/* Keep keyboard focus visible across the front end. */
:where(.wp-site-blocks *:focus-visible) {
	outline: 2px solid var(--wp--preset--color--thula-teal);
	outline-offset: 2px;
}

/* Improve line wrapping for headings and text where supported. */
h1,
h2,
h3,
h4,
h5,
h6,
blockquote,
caption,
figcaption,
p {
	text-wrap: pretty;
}

/* Prevent long code/preformatted text from causing horizontal page overflow. */
:where(pre) {
	overflow-x: auto;
}

/* -------------------------------------------------------------------------- */
/* Eyebrow Styles                                                             */
/* -------------------------------------------------------------------------- */

/*
 * Shared base styling for all eyebrow paragraph block style variations.
 * Targets classes such as:
 * - is-style-eyebrow-teal
 * - is-style-eyebrow-white
 */
p[class*='is-style-eyebrow-'] {
	display: inline-block;
	max-width: 100%;
	white-space: nowrap;
	padding-inline: 1em;
	margin-bottom: 0.5em;
	border-radius: 0.5em;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	text-align: center;
	text-transform: uppercase;
	line-height: 2.2;
}

/* -------------------------------------------------------------------------- */
/* Product Card                                                               */
/* -------------------------------------------------------------------------- */

.is-style-product-card {
	transition: box-shadow 0.2s ease;
}

.is-style-product-card:hover,
.is-style-product-card:focus-within {
	box-shadow: var(--wp--preset--shadow--drop-shadow);
}

.is-style-product-card > .wp-block-group:first-child {
	align-self: stretch;
}

.is-style-product-card .wp-block-post-featured-image,
.is-style-product-card .wp-block-post-featured-image a {
	display: block;
	flex-shrink: 0;
}


.is-style-product-card .wp-block-post-featured-image img {
	display: block;
	width: 100px;
	height: 100px;
	border-radius: 0;
	object-fit: cover;
	pointer-events: none;
	-webkit-user-drag: none;
	user-select: none;
}


.is-style-product-card .thula-product-subtitle {
	color: var(--wp--preset--color--thula-grey);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 400;
	margin-bottom: var(--wp--preset--spacing--10);
}

.is-style-product-card a:not(.wp-element-button):not(.wp-block-thula-blocks-svg-icon) {
	background-image: none;
}

.is-style-product-card .wp-block-thula-blocks-svg-icon {
	display: flex;
	flex-shrink: 0;
	background-image: none;
	text-decoration: none;
	-webkit-mask: url( 'assets/images/icons/nav-icons/arrow-right.svg' ) no-repeat center / contain;
	mask: url( 'assets/images/icons/nav-icons/arrow-right.svg' ) no-repeat center / contain;
	background-color: var(--wp--preset--color--medium-grey);
	transition: background-color 0.2s ease;
}

.is-style-product-card .wp-block-thula-blocks-svg-icon svg {
	opacity: 0;
}

.is-style-product-card:hover .wp-block-thula-blocks-svg-icon,
.is-style-product-card .wp-block-thula-blocks-svg-icon:hover,
.is-style-product-card .wp-block-thula-blocks-svg-icon:focus-visible {
	-webkit-mask: url( 'assets/images/icons/nav-icons/arrow-right-sqr-outline.svg' ) no-repeat center / contain;
	mask: url( 'assets/images/icons/nav-icons/arrow-right-sqr-outline.svg' ) no-repeat center / contain;
	background-color: var(--wp--preset--color--thula-teal);
}

/* -------------------------------------------------------------------------- */
/* News Card                                                                  */
/* -------------------------------------------------------------------------- */

.news-card {
	position: relative;
	border-radius: var(--wp--preset--border-radius--standard);
	border: 1.5px solid var(--wp--preset--color--medium-grey);
	background-color: var(--wp--preset--color--white);
	overflow: hidden;
	transition: box-shadow 0.2s ease, transform 0.2s ease;
	display: flex;
	flex-direction: column;
	height: 100%;
}

.news-card:hover,
.news-card:focus-within {
	box-shadow: var(--wp--preset--shadow--drop-shadow);
	transform: translateY(-4px);
}

.news-card .wp-block-post-featured-image {
	aspect-ratio: 16 / 9;
	overflow: hidden;
	width: 100%;
	flex-shrink: 0;
}

.news-card .wp-block-post-featured-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	pointer-events: none;
	-webkit-user-drag: none;
	user-select: none;
}

.news-card__content {
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30) var(--wp--preset--spacing--40) var(--wp--preset--spacing--30);
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20);
	flex: 1;
	min-width: 0;
}

.news-card__date,
.news-card__date time {
	color: var(--wp--preset--color--dark-grey);
	font-size: var(--wp--preset--font-size--x-small);
	margin: 0;
}

.news-card__title {
	margin: 0;
}

.news-card__title a {
	color: var(--wp--preset--color--dark-blue);
	text-decoration: none;
}

/* Stretched link: title link covers the full card */
.news-card .wp-block-post-title a::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
}

/* Keyboard focus: outline follows the card perimeter */
.news-card .wp-block-post-title a:focus-visible::after {
	outline: 2px solid var(--wp--preset--color--thula-teal);
	outline-offset: 2px;
	border-radius: var(--wp--preset--border-radius--standard);
}

.news-card:hover .wp-block-post-title a {
	color: var(--wp--preset--color--thula-teal);
}

.news-card__excerpt,
.news-card__excerpt p {
	color: var(--wp--preset--color--thula-grey);
	font-size: var(--wp--preset--font-size--small);
	margin: 0;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/**
 * Hero
 * ------------------------------------------------------------------
 * The Hero pattern uses the core Cover block for the video background.
 * These rules only handle the fixed visual treatment from the design.
 */

.thula-hero.wp-block-cover {
	background-color: var(--wp--preset--color--thula-blue);
	cursor: pointer;
}

/* Reusable text container for page-level banner/hero sections. */
.thula-page-hero-text {
	padding-left: var(--wp--preset--spacing--60);
	padding-right: 60%;
}

.thula-hero__content {
	text-align: center;
	padding-top: var(--wp--preset--spacing--70);
	transform: translateZ(0);
	backface-visibility: hidden;
}

.thula-hero__buttons {
	gap: var(--wp--preset--spacing--30);
}

/* Add spacing only between the heading/text area and the hero buttons. */
.thula-hero__content > .wp-block-buttons.thula-hero__buttons {
	margin-block-start: var(--wp--preset--spacing--60) !important;
	gap: var(--wp--preset--spacing--30);
}

.wp-block-button__link,
.wp-element-button {
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

/*
 * Hover states must live here rather than in the variation JSON css field.
 * WordPress wraps variation JSON css rules in :root :where(...), reducing
 * specificity to (0,1,0) — too low to override the base background-color
 * rule generated from styles.color.background at (0,3,0)+.
 */
.wp-block-button.is-style-fill-teal .wp-block-button__link:hover {
	background-color: color-mix(in srgb, var(--wp--preset--color--thula-teal) 80%, white);
	border-color: var(--wp--preset--color--thula-teal);
}

.wp-block-button.is-style-fill-blue .wp-block-button__link:hover {
	background-color: color-mix(in srgb, var(--wp--preset--color--thula-blue) 70%, black);
	border-color: var(--wp--preset--color--thula-blue);
}

.wp-block-button.is-style-outline-white .wp-block-button__link:hover {
	background-color: rgba(255, 255, 255, 0.22);
	color: var(--wp--preset--color--white);
	border-color: var(--wp--preset--color--white);
}

.thula-hero .wp-block-cover__background {
	pointer-events: none;
}

.thula-hero .wp-block-cover__video-background {
	pointer-events: none;
}

/**
 * Hero height scales fluidly from 800px (at 1280px viewport) to 950px (at 1920px viewport).
 */

.thula-hero {
	min-height: clamp( 800px, calc( 560px + 18.75vw ), 1050px ) !important;
}


@media (max-width: 990px) {
	.thula-page-hero-text {
		padding-left: 0;
		padding-right: 0;
	}

	.thula-two-rows__top {
		max-width: 100%;
	}
}

@media (max-width: 800px) {

	.thula-hero {
		min-height: 800px !important;
		padding-block: var(--wp--preset--spacing--40);
		padding-left: var(--wp--preset--spacing--30);
		padding-right: var(--wp--preset--spacing--30);
	}
}

/**
 * Reduce large hero sizing on smaller screens.
 */

@media (max-width: 600px) {
	.thula-hero {
		min-height: 800px !important;
		padding-block: var(--wp--preset--spacing--60);
		padding-left: var(--wp--preset--spacing--40);
		padding-right: var(--wp--preset--spacing--40);
	}

	.thula-site-header__inner {
		padding-block: 0.1rem;
	}
}

/* -------------------------------------------------------------------------- */
/* Hero Image                                                                  */
/* -------------------------------------------------------------------------- */

.thula-hero-image.wp-block-cover {
	background-color: var(--wp--preset--color--thula-blue);
}

.thula-hero-image .wp-block-cover__background,
.thula-hero-image .wp-block-cover__image-background {
	pointer-events: none;
}

.thula-hero-image__content {
	padding-top: var(--wp--preset--spacing--70);
	padding-left:var(--wp--preset--spacing--80);
	padding-right: 60%;
}

/* Scales from 550px (small) to 640px (large), smaller than the 800–920px video hero. */
.thula-hero-image {
	min-height: clamp( 500px, calc( 380px + 13.5vw ), 640px ) !important;
}

@media (min-width: 1600px) {
	.thula-hero-image__content {
		padding-right: 30%;
	}
}

@media (max-width: 800px) {
	.thula-hero-image {
		min-height: 500px !important;
		padding-block: var(--wp--preset--spacing--40);
		padding-inline: var(--wp--preset--spacing--30);
	}
	.thula-hero-image__content {
		padding-right: 0;
		padding-left:var(--wp--preset--spacing--30);
	}
}

@media (max-width: 600px) {
	.thula-hero-image {
		min-height: 500px !important;
		padding-block: var(--wp--preset--spacing--60);
		padding-inline: var(--wp--preset--spacing--40);
	}

		.thula-hero-image__content {
		padding-left:0;
	}
}

/* -------------------------------------------------------------------------- */
/* Figures Banner                                                              */
/* -------------------------------------------------------------------------- */

/* Column 5 icon — flex container so the SVG is horizontally centred.
   Height matches the x-large number paragraph (2.25rem × 1.2). */
.thula-figures-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 2.7rem;
	margin-block: 0;
}

.thula-figures-icon img {
	height: 2.7rem;
	width: auto;
	flex-shrink: 0;
}

/* On small screens: 4-track grid so cards sit 2-per-row,
   lone 5th card centred on its own row via grid-column. */
@media (max-width: 781px) {
	.wp-block-group.thula-figures-grid {
		display: grid;
		grid-template-columns: repeat( 4, 1fr );
	}

	.thula-figures-grid > .wp-block-group {
		grid-column: span 2;
		min-width: 0;
	}

	.thula-figures-grid > .wp-block-group:last-child {
		grid-column: 2 / 4;
	}

	.thula-featured-partners {
		margin-top: -20px !important;
	}
}

/* -------------------------------------------------------------------------- */
/* Two Column Styles                                                          */
/* -------------------------------------------------------------------------- */

.thula-two-columns {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.thula-two-columns > .wp-block-column {
	min-width: 0;
}

/* Product carousel layout: wider product column. */
.thula-two-columns--product-carousel {
	grid-template-columns: minmax(0, 30fr) minmax(0, 70fr);
	gap: var(--wp--preset--spacing--20);
}

.thula-two-columns__right .thula-section-heading {
	padding-left: var(--wp--preset--spacing--60);
}

.thula-two-columns__left .thula-section-heading {
  padding-right: var(--wp--preset--spacing--30);
}

.thula-section-image--tall img {
	width: clamp(90%, 48vw, 100%);
	height: clamp(250px, 34vw, 430px);
	object-fit: cover;
}

/* -------------------------------------------------------------------------- */
/* Products Carousel                                                          */
/* -------------------------------------------------------------------------- */

/*
 * Product carousel uses container query sizing to prevent page-level overflow.
 * Card gutter gives hover shadows limited breathing room inside the scroll area.
 * Further visual polish can adjust gutter, shadow preset, or column split later.
 */
.thula-products-carousel {
	--carousel-button-size: 45px;
	--carousel-button-gap: var(--wp--preset--spacing--30);
	--product-gap: var(--wp--preset--spacing--20);

	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20);
	width: 100%;
	max-width: 100%;
	container-type: inline-size;
}

.thula-carousel-nav {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: var(--carousel-button-gap);
}

.thula-carousel-nav > * {
	margin-block-start: 0;
}

.thula-carousel:not(.is-scrollable) .thula-carousel-nav {
	display: none;
}

.thula-products-query {
	position: relative;
	max-width: 100%;
	overflow-x: clip;
}

.thula-products-query > .wp-block-post-template {
	--carousel-card-gutter: 8px;

	display: grid;
	grid-template-rows: repeat(2, auto);
	grid-auto-flow: column;
	grid-auto-columns: max(
		200px,
		calc(50cqi - (var(--product-gap) / 2))
	);
	gap: var(--product-gap);
	overflow-x: auto;
	overflow-y: hidden;
	list-style: none;
	margin: 0;
	margin-block-start: calc(-1 * var(--carousel-card-gutter));
	padding: 0;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	overscroll-behavior-x: contain;
}

.thula-products-query > .wp-block-post-template::-webkit-scrollbar {
	display: none;
}

.thula-products-query > .wp-block-post-template > .wp-block-post {
	display: flex;
	box-sizing: border-box;
	margin: 0;
	min-width: 0;
	padding: var(--carousel-card-gutter);
	scroll-snap-align: start;
	scroll-snap-stop: always;
}

.thula-products-query > .wp-block-post-template.is-scrollable {
	cursor: grab;
}

.thula-products-query > .wp-block-post-template.is-dragging {
	cursor: grabbing;
	-webkit-user-select: none;
	user-select: none;
	scroll-behavior: auto;
	scroll-snap-type: none;
}

.thula-products-query > .wp-block-post-template.is-dragging,
.thula-products-query > .wp-block-post-template.is-dragging * {
	cursor: grabbing;
}

/* -------------------------------------------------------------------------- */
/* Carousel Controls                                                 */
/* -------------------------------------------------------------------------- */

.thula-carousel-prev,
.thula-carousel-next {
	flex-shrink: 0;
	display: block;
	width: var(--carousel-button-size);
	height: var(--carousel-button-size);
	padding: 0;
	border: 0;
	cursor: pointer;
	background-color: var(--wp--preset--color--medium-grey);
	transition: background-color 0.2s ease;
}

.thula-carousel-prev {
	-webkit-mask: url( 'assets/images/icons/nav-icons/circle-chevron-left.svg' ) no-repeat center / contain;
	mask: url( 'assets/images/icons/nav-icons/circle-chevron-left.svg' ) no-repeat center / contain;
}

.thula-carousel-next {
	-webkit-mask: url( 'assets/images/icons/nav-icons/circle-chevron-right.svg' ) no-repeat center / contain;
	mask: url( 'assets/images/icons/nav-icons/circle-chevron-right.svg' ) no-repeat center / contain;
}

.thula-carousel-dots {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--10);
}

.thula-carousel-dot {
	flex-shrink: 0;
	display: block;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	border: 0;
	padding: 0;
	cursor: pointer;
	background-color: var(--wp--preset--color--medium-grey);
	transition: background-color 0.2s ease;
}

.thula-carousel-dot.is-active {
	background-color: var(--wp--preset--color--light-teal);
}

.thula-carousel-prev:not(:disabled):hover,
.thula-carousel-next:not(:disabled):hover,
.thula-carousel-prev:not(:disabled):focus-visible,
.thula-carousel-next:not(:disabled):focus-visible {
	background-color: var(--wp--preset--color--thula-grey);
}

.thula-carousel-prev:disabled,
.thula-carousel-next:disabled {
	opacity: 0.35;
	cursor: default;
}



/* -------------------------------------------------------------------------- */
/* News Carousel                                                              */
/* -------------------------------------------------------------------------- */

.news-carousel-track {
	--carousel-button-size: 45px;
	--carousel-button-gap: var(--wp--preset--spacing--30);
	--news-gap: var(--wp--preset--spacing--30);

	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--30);
	width: 100%;
	max-width: 999px;
	margin-inline: auto;
	margin-top: var(--wp--preset--spacing--50);
	container-type: inline-size;
}

.news-carousel-query > .wp-block-post-template {
	display: grid;
	grid-template-rows: auto;
	grid-auto-flow: column;
	grid-auto-columns: max(
		260px,
		calc( ( 100cqi - 2 * var( --news-gap ) ) / 3 )
	);
	gap: var(--news-gap);
	overflow-x: auto;
	overflow-y: hidden;
	list-style: none;
	margin: 0;
	padding: 0;
	padding-block-start: 6px;
	margin-block-start: -6px;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	overscroll-behavior-x: contain;
}

.news-carousel-query > .wp-block-post-template.is-dragging {
	scroll-behavior: auto;
	cursor: grabbing;
}

.news-carousel-query > .wp-block-post-template > .wp-block-post {
	scroll-snap-align: start;
	margin: 0;
	min-width: 0;
}

/* -------------------------------------------------------------------------- */
/* Figures Banner                                                             */
/* -------------------------------------------------------------------------- */

.thula-figures-header {
	max-width: 680px;
	margin-inline: auto;
}

.thula-figures-icon img {
	width: auto;
	height: 60px;
	object-fit: contain;
}

/* -------------------------------------------------------------------------- */
/* Features Banner                                                            */
/* -------------------------------------------------------------------------- */

.thula-feature-title {
	color: var(--wp--preset--color--thula-blue);
	font-size: 18px;
	font-weight: 450;
	margin: 0;
	text-align: left;
}

.thula-two-rows__top {
	width:100% !important;
}

.thula-two-rows__top.heading-left {
	max-width: 50%;
	margin-bottom: var(--wp--preset--spacing--40);
}


.thula-features-grid {
	align-items: stretch;
	padding-right: var(--wp--preset--spacing--10);
	padding-block: var(--wp--preset--spacing--10);
}

.wp-block-thula-blocks-svg-icon {
	flex-shrink: 0;
}

.wp-block-thula-blocks-svg-icon svg {
	display: block;
	width: 100%;
	height: 100%;
}

/* -------------------------------------------------------------------------- */
/* Feature Banner 1                                                           */
/* -------------------------------------------------------------------------- */

/* .is-style-feature-card:hover,
.is-style-feature-card:focus-within {
	box-shadow: var(--wp--preset--shadow--drop-shadow);
} */

/* -------------------------------------------------------------------------- */
/* Feature Banner 2                                                           */
/* -------------------------------------------------------------------------- */

/* Limit the introductory text to roughly the left half of the section. */
.thula-features-text {
	max-width: 50%;
	padding-left: var(--wp--preset--spacing--20);
	margin-inline: 0 !important;
}

.is-style-feature-card-2 {
	border: 1.5px solid var(--wp--preset--color--medium-grey);
	border-radius: var(--wp--preset--border-radius--standard);
}

/* Add breathing room around the text group inside the card. */
.is-style-feature-card-2 > .wp-block-group {
	padding-right: var(--wp--preset--spacing--20);
	padding-block: var(--wp--preset--spacing--10);
}

/* Keep the icon a fixed size and align its top with the title text. */
.is-style-feature-card-2 > .wp-block-image {
	flex-shrink: 0;
	padding-left: var(--wp--preset--spacing--20);
	padding-right: var(--wp--preset--spacing--10);
	padding-top: var(--wp--preset--spacing--10);
}

.is-style-feature-card-2 > .wp-block-image img {
	width: 50px;
	height: 50px;
	display: block;
}


.is-style-feature-card-2 p:not(.thula-feature-title) {
	font-size: var(--wp--preset--font-size--base);
}

/* Layout variant: icon above title. */
.wp-block-group.is-style-feature-card-2.feature-card-layout-2 {
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--20) var(--wp--preset--spacing--40) var(--wp--preset--spacing--20);
	align-content: flex-start;
}

.wp-block-group.is-style-feature-card-2.feature-card-layout-2 > .wp-block-image {
	flex-shrink: 0;
	padding-left: 0;
	margin-bottom: var(--wp--preset--spacing--20);
}

.feature-card-layout-2 > .thula-feature-title {
	font-size: var(--wp--preset--font-size--medium);
}

/* 2×2 grid variant. */
.thula-features-grid-2-column {
	grid-template-columns: repeat(2, 1fr) !important;
}

/* Delay column stacking so the 2-column grid doesn't wrap too early. */
@media (min-width: 1050px) {
	.two-column-query-columns:has(.thula-features-grid-2-column) {
		flex-direction: row !important;
	}

	.two-column-query-columns:has(.thula-features-grid-2-column) > .wp-block-column:first-child,
	.two-column-query-columns:has(.thula-features-grid-2-column) > .wp-block-column:last-child {
		flex-basis: 50% !important;
		width: auto !important;
		max-width: none !important;
	}

	.two-column-query-columns:has(.thula-features-grid-2-column) > .wp-block-column:first-child > .wp-block-group {
		max-width: none !important;
		padding-right: var(--wp--preset--spacing--60) !important;
	}
}

@media (max-width: 1200px) {
	.thula-features-grid {
		grid-template-columns: repeat(3, 1fr) !important;
	}
}

@media (max-width: 990px) {
	.thula-features-text {
		max-width: 100%;
		margin-bottom: var(--wp--preset--spacing--60);
	}
}

@media (max-width: 900px) {
	.thula-features-grid {
		grid-template-columns: repeat(2, 1fr) !important;
	}
}


/* -------------------------------------------------------------------------- */
/* Feature Banner 3                                                           */
/* -------------------------------------------------------------------------- */

.thula-features-grid-1-column .is-style-feature-card {
	max-width: 80%;
}

@media (max-width: 781px){
.thula-features-grid-1-column .is-style-feature-card {
	max-width: 90%;
	margin-inline: auto;
}
}


/* -------------------------------------------------------------------------- */
/* Solutions Grid                                                              */
/* -------------------------------------------------------------------------- */

.thula-solutions-grid {
	display: grid;
	grid-template-columns: repeat( 2, clamp( 200px, calc( 50% - var(--wp--preset--spacing--20) / 2 ), 300px ) );
	gap: var(--wp--preset--spacing--30);
	width: 100%;
	justify-content: center;
}

.thula-solutions-grid > .wp-block-cover {
	margin-block: 0;
}

.thula-solution-card.wp-block-cover {
	overflow: hidden;
	min-height: unset !important;
	width: 100%;
	aspect-ratio: 1 / 1;
	border-radius: var(--wp--preset--border-radius--standard);
	isolation: isolate;
}

.thula-solution-card:hover,
.thula-solution-card:focus-within {
	box-shadow: var(--wp--preset--shadow--drop-shadow);
}

.thula-solution-card .wp-block-cover__background {
	transition: opacity 0.3s ease;
}

.thula-solution-card:hover .wp-block-cover__background {
	opacity: 0.2 !important;
}

.thula-solution-card.wp-block-cover > .wp-block-cover__inner-container {
	width: 100%;
	max-width: 100%;
	padding: 0 var(--wp--preset--spacing--10) var(--wp--preset--spacing--10);
	box-sizing: border-box;
	position: relative;
	z-index: 3 !important;
}

.thula-solution-card::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient( to top, rgba(30, 34, 88, 0.55) 0%, transparent 65% );
	opacity: 0;
	transition: opacity 0.3s ease;
	pointer-events: none;
	z-index: 2;
}

.thula-solution-card:hover::after,
.thula-solution-card:focus-within::after {
	opacity: 1;
}

.thula-solution-card__footer {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	width: 100%;
}

.thula-solution-card__label {
	margin: 0;
	font-size: 18px;
	font-weight: 400;
	color: var(--wp--preset--color--thula-blue);
	transition: color 0.3s ease;
}

.thula-solution-card:hover .thula-solution-card__label {
	color: var(--wp--preset--color--white);
}

.thula-solution-card .wp-block-thula-blocks-svg-icon {
	background-image: none;
	-webkit-mask: url('assets/images/icons/nav-icons/arrow-right-sqr-outline.svg') no-repeat center / contain;
	mask: url('assets/images/icons/nav-icons/arrow-right-sqr-outline.svg') no-repeat center / contain;
	background-color: var(--wp--preset--color--thula-blue);
	transition: background-color 0.3s ease;
}

.thula-solution-card .wp-block-thula-blocks-svg-icon svg {
	opacity: 0;
}

.thula-solution-card:hover .wp-block-thula-blocks-svg-icon {
	background-color: var(--wp--preset--color--white);
}

@media (max-width: 1040px) {
	.two-column-grid-columns:has(.thula-solutions-grid) {
		flex-direction: column-reverse !important;
		flex-wrap: wrap;
	}

	.two-column-grid-columns:has(.thula-solutions-grid) > .wp-block-column {
		flex-basis: 100% !important;
		width: 100%;
	}

	.two-column-grid-columns .thula-two-columns__right .thula-section-heading {
		padding: 0;
	}

	.thula-solutions-grid {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
		width: 100%;
	}

}


@media (prefers-reduced-motion: reduce) {
	.thula-solution-card .wp-block-cover__background,
	.thula-solution-card::after,
	.thula-solution-card__label,
	.thula-solution-card .wp-block-thula-blocks-svg-icon {
		transition: none;
	}
}

/* -------------------------------------------------------------------------- */
/* Featured Partners Banner                                                   */
/* -------------------------------------------------------------------------- */

.thula-featured-partners-banner {
	overflow: hidden;
}

.thula-featured-partners-banner__top {
	margin-bottom: var(--wp--preset--spacing--70);
}

/*
 * Clips the moving logo track and fades the edges.
 */
.thula-partner-marquee {
	overflow: hidden;
	max-width: var(--wp--style--global--content-size);
	margin-inline: auto;
	-webkit-mask-image: linear-gradient(90deg, transparent 0%, black 8%, black 92%, transparent 100%);
	mask-image: linear-gradient(90deg, transparent 0%, black 8%, black 92%, transparent 100%);
}

.thula-partner-marquee__track {
	display: flex;
	width: max-content;
	animation: thula-partner-marquee-scroll 56s linear infinite;
	will-change: transform;
}

.thula-partner-marquee:hover .thula-partner-marquee__track,
.thula-partner-marquee:focus-within .thula-partner-marquee__track {
	animation-play-state: paused;
}

.thula-partner-marquee__set {
	display: flex;
	flex-shrink: 0;
	align-items: center;
}

.thula-partner-marquee__item {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	padding-inline: var(--wp--preset--spacing--30);
}

.thula-partner-marquee__item img {
	display: block;
	width: auto;
	max-width: 180px;
	height: 36px;
	object-fit: contain;
}

.thula-partner-marquee__item.is-large img {
	height: 52px;
}

@keyframes thula-partner-marquee-scroll {
	from {
		transform: translateX(0);
	}

	to {
		transform: translateX(-25%);
	}
}

@media (prefers-reduced-motion: reduce) {
	.thula-partner-marquee {
		-webkit-mask-image: none;
		mask-image: none;
	}

	.thula-partner-marquee__track {
		animation: none;
	}
}




/* -------------------------------------------------------------------------- */
/* Partners Grid                                                              */
/* -------------------------------------------------------------------------- */

.thula-partners-grid {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( min( 100%, 500px ), 1fr ) );
	gap: var(--wp--preset--spacing--20);
}

.thula-partner-logo {
	height: 160px;
	align-items: flex-end;
}

.thula-partner-logo .wp-block-image {
	height: 100%;
	width: auto;
}

.thula-partner-logo .wp-block-image img {
	height: 80px !important;
	width: auto !important;
	max-width: 200px;
}

/* -------------------------------------------------------------------------- */
/* Responsive Styles                                                          */
/* -------------------------------------------------------------------------- */


/* Desktop (1200px)                                                           */
/* -------------------------------------------------------------------------- */

@media (max-width: 1200px) {

	/* ≤1200px: carousel remains in the right column, but drops to one row/two cards. */
	.thula-products-query > .wp-block-post-template {
		grid-template-rows: auto;
	}

	.thula-features-grid {
		grid-template-columns: repeat(3, 1fr) !important;
	}
}



/* Desktop - Tablet (1020px)                                                  */
/* -------------------------------------------------------------------------- */

@media (max-width: 1020px) {
	/* ≤1020px: carousel remains in a narrow right column, so show one card per view. */
	.thula-products-query > .wp-block-post-template {
		grid-template-rows: auto;
		grid-auto-columns: 100cqi;
	}
}


/* Desktop - Tablet (900px)                                                  */
/* -------------------------------------------------------------------------- */

@media (max-width: 900px) {
	.thula-features-grid {
		grid-template-columns: repeat( 2, 1fr ) !important;
	}
}



/* Mobile (781px)                                                             */
/* -------------------------------------------------------------------------- */

@media (max-width: 781px) {

	/*
	 * Stack custom two-column sections and reduce the gap once the layout
	 * becomes single-column.
	 */
	.thula-two-columns,
	.thula-two-columns--product-carousel {
		grid-template-columns: 1fr;
		gap: var(--wp--preset--spacing--70) !important;
	}


	.two-column-grid-columns:has(.thula-solutions-grid) {
		gap: var(--wp--preset--spacing--70) !important;
	}


	/*
	 * When the section heading is in the right column on desktop,
	 * reverse the stacked order on mobile so the text appears above the image.
	 */
	.thula-two-columns:has(.thula-two-columns__right .thula-section-heading) {
		display: flex;
		flex-direction: column-reverse;
	}

	/*
	 * Removes additional padding from section headings once columns stack,
	 * allowing the text to use the full mobile content width.
	 */
	.thula-two-columns__right .thula-section-heading {
		padding: 0;
	}

	.thula-two-columns__left .thula-section-heading {
	padding-right: var(--wp--preset--spacing--10);
	}

	/*
	 * aligncenter on the image block can apply a max-width that constrains the
	 * figure narrower than the stacked column. Force both figure and img to use
	 * the full available column width when stacked.
	 */
	.thula-section-image--tall,
	.thula-section-image--tall img {
		width: 100%;
		max-width: 100%;
		height:400px;
	}

	/* ≤781px: columns stack in the Product Carousel, so the carousel becomes full-width again. */
	.thula-products-query > .wp-block-post-template {
	grid-template-rows: auto;
	grid-auto-columns: max(
		200px,
		calc(50cqi - (var(--product-gap) / 2))
	);
	}

	.thula-two-rows__top.heading-left {
	max-width: 100%;
}

/* On small screens: switch to a 4-track grid so cards sit 2-per-row,
   with the lone 5th card centred on its own row via grid-column placement. */
	.thula-figures-grid {
		display: grid !important;
		grid-template-columns: repeat( 4, 1fr );
	}

	.thula-figures-grid > .wp-block-group {
		grid-column: span 2;
		min-width: 0;
	}

	.thula-figures-grid > .wp-block-group:last-child {
		grid-column: 2 / 4;
	}
}



/* Mobile (640px)                                                        	  */
/* -------------------------------------------------------------------------- */

/* ≤640px: narrow phones, one card per view. */
@media (max-width: 640px) {
	.thula-products-query > .wp-block-post-template {
		grid-template-rows: auto;
		grid-auto-columns: 100cqi;
	}

	.thula-features-grid,
	.thula-features-grid-2-column {
		grid-template-columns: 1fr !important;
	}


	.thula-solutions-grid {
		grid-template-columns: 1fr !important;
		max-width: 90%;
		max-height: 75%;
		margin-inline: auto;
	}

	/* News carousel: one card per view on narrow phones. */
	.news-carousel-query > .wp-block-post-template {
		grid-auto-columns: 100cqi;
	}

	.news-carousel-track {
		max-width: 100%;
	}
}

/* News carousel: 2 cards on tablet. */
@media (max-width: 1000px) {
	.news-carousel-query > .wp-block-post-template {
		grid-auto-columns: max(
			240px,
			calc( ( 100cqi - var( --news-gap ) ) / 2 )
		);
	}
}

/* -------------------------------------------------------------------------- */
/* Sticky Header Wrapper                                                       */
/* -------------------------------------------------------------------------- */

.thula-sticky-header-wrapper {
	position: sticky;
	top: var(--wp--preset--spacing--30); /* JS overrides this value dynamically */
	z-index: 999;
	margin-bottom: -120px;
	background: none;
	pointer-events: none;
}

.thula-sticky-header-wrapper * {
	pointer-events: auto;
}

/* -------------------------------------------------------------------------- */
/* Header                                                                      */
/* -------------------------------------------------------------------------- */

.thula-site-header__inner {
	max-width: calc(100% - (2 * var(--wp--preset--spacing--10)));
	margin-inline: auto !important;
	border-radius: var(--wp--preset--border-radius--standard);
	box-shadow: var(--wp--preset--shadow--header-floating);
	padding-block: var(--wp--preset--spacing--10);
	pointer-events: auto;
	will-change: opacity;
	transition: opacity 0.4s ease-in-out, padding-block 0.3s ease;
}

.thula-site-header--scrolled .thula-site-header__inner {
	padding-block: calc(0.1rem + 5px);
}

.thula-site-header--hidden .thula-site-header__inner {
	opacity: 0;
	pointer-events: none;
}

.thula-site-header__actions {
	gap: var(--wp--preset--spacing--60);
}

.thula-language-indicator {
	opacity: 0.5;
	white-space: nowrap;
}

.thula-site-header__logo img {
	width: 150px;
}

/* -------------------------------------------------------------------------- */
/* Header mega menu submenu                                                    */
/* -------------------------------------------------------------------------- */

/* Positioning context: lets the mega panel use left:0/right:0 relative to
   the header inner container rather than the individual submenu <li>. */
.thula-site-header__inner {
	position: relative;
}

/* For mega submenus, override the per-item relative positioning so the panel
   can break out to the full header-inner width. Extra class in the selector
   raises specificity above the generic dropdown rule. */
.thula-primary-navigation .wp-block-navigation__container > .thula-submenu--mega.wp-block-navigation-submenu {
	position: static;
	/* align-self: center prevents the <li> from stretching to the full nav
	   container height, which would make the hover area taller than the link
	   text and trigger the submenu when hovering empty header space below. */
	align-self: center;
}

/* Suppress the <li>::after bridge for mega submenus — it drifts to the wrong
   position when the <li> is position:static. The panel's own ::before handles
   the bridge instead (see below). */
.thula-primary-navigation .wp-block-navigation__container > .thula-submenu--mega::after {
	content: none;
}

/* Wide mega panel — replaces the narrow dropdown container.
   Padding is intentionally omitted here and moved to the hover/focus-within rule below.
   WP core hides the panel with height:0, but with box-sizing:content-box padding adds
   to the box height even when content height is zero. A non-zero hidden panel triggers
   CSS :hover on the parent <li>, opening the wrong submenu. No padding here = true
   zero-height hidden panel = no spurious hover trigger. */
.thula-primary-navigation .thula-submenu--mega > .wp-block-navigation__submenu-container {
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	margin-top: 0.825rem;
	background-color: var(--wp--preset--color--white);
	border-radius: var(--wp--preset--border-radius--standard);
	box-shadow: var(--wp--preset--shadow--header-floating);
	width: 100%;
	min-width: 0;
	z-index: 1;
}
/* Padding and pointer-events are applied only when the panel is actually open.
   This is the companion to the zero-padding hidden-state rule above. */
.thula-primary-navigation .thula-submenu--mega:hover > .wp-block-navigation__submenu-container,
.thula-primary-navigation .thula-submenu--mega:focus-within > .wp-block-navigation__submenu-container {
	padding: var(--wp--preset--spacing--30);
}

/* Bridge: transparent pseudo-element that fills the gap between the nav bar and
   the panel so the mouse can travel across without losing hover on the <li>.
   Only exists while THIS specific <li> is hovered/focused — prevents the four
   bridges from all sitting in the gap simultaneously and triggering the wrong panel. */
.thula-primary-navigation .thula-submenu--mega > .wp-block-navigation__submenu-container::before {
	content: none;
	position: absolute;
	top: -0.825rem;
	left: 0;
	right: 0;
	height: 0.825rem;
}
.thula-primary-navigation .thula-submenu--mega:hover > .wp-block-navigation__submenu-container::before,
.thula-primary-navigation .thula-submenu--mega:focus-within > .wp-block-navigation__submenu-container::before {
	content: "";
}

/* Outer two-section grid: left column slightly narrower, right column gets the freed space. */
.thula-primary-navigation .thula-submenu--mega > .wp-block-navigation__submenu-container.thula-mega-menu-panel {
	display: grid;
	grid-template-columns: minmax(0, 1.5fr) minmax(0, 3.25fr);
	align-items: start;
	gap: var(--wp--preset--spacing--30);
	list-style: none;
	margin: 0;
}

/* Left panel: category label. */
.thula-mega-menu-panel__label {
	display: block;
	font-size: 1.5rem;
	font-weight: 500;
	color: var(--wp--preset--color--thula-blue);
	line-height: 1.2;
}

/* Right panel: single-column list of submenu items. */
.thula-mega-menu-panel__right {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--10);
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Individual mega link — flex row: icon | label+description. */
.thula-primary-navigation .thula-submenu--mega .wp-block-navigation-item__content {
	display: flex;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--20);
	padding: var(--wp--preset--spacing--10);
	border-radius: var(--wp--preset--border-radius--small);
	color: var(--wp--preset--color--thula-blue);
	text-decoration: none;
	width: 100%;
}

/* Icon: inline SVG injected by PHP when thulaIcon attribute is set on the nav link. */
.thula-mega-menu-link__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	color: var(--wp--preset--color--thula-teal);
}

.thula-mega-icon {
	width: 35px;
	height: auto;
	shape-rendering: geometricPrecision;
}

.thula-mega-icon--product {
	width: 45px;
}

/* Label + description stacked column. align-items: flex-start prevents flex
   items from stretching full width, keeping the underline animation text-wide. */
.thula-mega-menu-link__content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.25rem;
}

/* Explicitly set label to base size — the flex context can otherwise inherit
   a smaller size from surrounding navigation styles. */
.thula-primary-navigation .thula-submenu--mega .wp-block-navigation-item__label {
	font-size: var(--wp--preset--font-size--base);
	font-weight: 400;
}

.thula-mega-menu-link__description {
	display: block;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--dark-grey);
	font-weight: 400;
	line-height: 1.4;
}

/* WordPress natively renders <span class="wp-block-navigation-item__description"> when a
   description attribute is set. Our filter also injects .thula-mega-menu-link__description
   inside the content wrapper. Hide the native one to prevent the description appearing twice. */
.thula-primary-navigation .thula-submenu--mega .wp-block-navigation-item__description {
	display: none;
}

/* Responsive: collapse the outer two-section grid to single column below 900px. */
@media (max-width: 900px) {
	.thula-primary-navigation .thula-submenu--mega > .wp-block-navigation__submenu-container.thula-mega-menu-panel {
		grid-template-columns: 1fr;
	}
}

/* Mobile overlay: suppress mega-panel positioning inside the core mobile menu.
   width: 100% overrides WP core's width: auto so all panels are the same width. */
.thula-primary-navigation .wp-block-navigation__responsive-container.is-menu-open
.thula-submenu--mega > .wp-block-navigation__submenu-container {
	position: static;
	box-shadow: none;
	padding: 0;
	display: block;
	width: 100%;
}


@media (prefers-reduced-motion: reduce) {
	.thula-mega-menu-panel {
		transition: none;
	}
}

/* -------------------------------------------------------------------------- */
/* Dropdown submenus */

.thula-primary-navigation .wp-block-navigation__container > .wp-block-navigation-submenu:not(.thula-submenu--mega) > .wp-block-navigation__submenu-container {
	border-radius: var(--wp--preset--border-radius--standard);
	margin-top: 0.825rem;
	padding: var(--wp--preset--spacing--10);
}

.thula-primary-navigation .wp-block-navigation__container > .wp-block-navigation-submenu:not(.thula-submenu--mega) {
	position: relative;
}

.thula-primary-navigation .wp-block-navigation__container > .wp-block-navigation-submenu:not(.thula-submenu--mega)::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	height: 1rem;
}

.thula-mega-menu-panel__right .wp-block-navigation-item__content {
	border-radius: var(--wp--preset--border-radius--standard);
	color: var(--wp--preset--color--thula-blue);
}

.thula-mega-menu-panel__right .wp-block-navigation-item__content:hover,
.thula-mega-menu-panel__right .wp-block-navigation-item__content:focus-visible {
	background-color: var(--wp--preset--color--lightest-teal);
}

/* Responsive */

@media (max-width: 900px) {
	.thula-site-header__actions {
		gap: var(--wp--preset--spacing--10);
	}
}

@media (max-width: 800px) {
	.thula-primary-navigation .wp-block-navigation__responsive-container:not(.is-menu-open) {
		display: none;
	}

	.thula-primary-navigation .wp-block-navigation__responsive-container-open {
		display: flex;
	}
}

/* Mobile overlay menu */

.thula-primary-navigation .wp-block-navigation__responsive-container-open,
.thula-primary-navigation .wp-block-navigation__responsive-container-close {
	color: var(--wp--preset--color--thula-blue);
	padding: 1rem;
}

.thula-primary-navigation .wp-block-navigation__responsive-container.is-menu-open {
	background-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--thula-blue);
	padding: var(--wp--preset--spacing--50);
	pointer-events: auto;
}

/* Dialog grid: logo + close button on row 1; nav content full-width on row 2. */
.thula-primary-navigation .wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation__responsive-dialog {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
	color: var(--wp--preset--color--thula-blue);
}

.thula-primary-navigation .wp-block-navigation__responsive-container.is-menu-open
.thula-overlay-logo {
	grid-column: 1;
	grid-row: 1;
	justify-self: start;
	margin: 0;
	pointer-events: none;
}

.thula-primary-navigation .wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation__responsive-container-close {
	grid-column: 2;
	grid-row: 1;
}

.thula-primary-navigation .wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation__responsive-container-content {
	grid-column: 1 / -1;
	grid-row: 2;
	padding-top: var(--wp--preset--spacing--20);
}

.thula-primary-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	background: transparent;
	box-shadow: none;
}

.thula-primary-navigation .wp-block-navigation__responsive-container.is-menu-open .thula-mega-menu-panel__left-item {
	display: none;
}

/* WP core sets align-items to the navigation's justifyContent setting (centre),
   which makes each <li> and its children shrink-wrap to content width.
   Override to stretch so every top-level item and its sub-panel fill the full
   overlay width, keeping all sections consistently aligned. */
.thula-primary-navigation .wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation__responsive-container-content .wp-block-navigation__container {
	align-items: stretch;
	gap: var(--wp--preset--spacing--40);
}

.thula-primary-navigation .wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation__responsive-container-content .wp-block-navigation-item {
	align-items: stretch;
	width: 100%;
}

/* More breathing room between sub-link items in the overlay. */
.thula-primary-navigation .wp-block-navigation__responsive-container.is-menu-open
.thula-mega-menu-panel__right {
	gap: var(--wp--preset--spacing--20);
}

/* Top-level nav items (Products, Solutions, etc.) get a slightly larger label
   in the mobile overlay so they read as section headings above their sub-links. */
.thula-primary-navigation .wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content .wp-block-navigation-item__label {
	font-size: var(--wp--preset--font-size--large);
}

.thula-primary-navigation .wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
	margin-bottom: var(--wp--preset--spacing--30)
}


/* At wider viewports a visible scrollbar (≈15–17px) overlaps the header's
   right edge because spacing--10 (10px) is narrower than the scrollbar.
   Bump to spacing--20 (20px) at 1440px+ to keep the header clear. */
@media (min-width: 1440px) {
	.thula-site-header__inner {
		max-width: calc(100% - (2 * var(--wp--preset--spacing--20)));
	}
}

@media (max-width: 600px) {
	.thula-site-header__inner {
		padding-block: 0.1rem;
	}
}

/* -------------------------------------------------------------------------- */
/* No-JS navigation fallback (noscript — mobile only)                          */
/* -------------------------------------------------------------------------- */

.thula-noscript-nav {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	background-color: var(--wp--preset--color--white);
	border-bottom: 1px solid var(--wp--preset--color--light-grey);
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
	z-index: 9999;
}

/* Desktop nav works without JS — only show fallback on mobile */
@media (min-width: 801px) {
	.thula-noscript-nav {
		display: none;
	}
}

.thula-noscript-nav__logo {
	display: block;
	text-align: center;
	margin-bottom: var(--wp--preset--spacing--20);
	padding-bottom: var(--wp--preset--spacing--20);
	border-bottom: 1px solid var(--wp--preset--color--light-grey);
}

.thula-noscript-nav__logo img {
	width: 120px;
	height: auto;
}

.thula-noscript-nav > ul {
	display: flex;
	flex-direction: column;
	list-style: none;
	margin: 0;
	padding: 0;
	gap: var(--wp--preset--spacing--10);
}

.thula-noscript-nav__item {
	position: relative;
}

.thula-noscript-nav__item > a {
	color: var(--wp--preset--color--thula-blue);
	font-weight: 500;
	text-decoration: none;
	display: block;
	padding: 0.25rem 0;
}

.thula-noscript-nav__item > a:hover,
.thula-noscript-nav__item > a:focus-visible {
	color: var(--wp--preset--color--thula-teal);
}

.thula-noscript-nav__sub {
	display: none;
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	top: 100%;
	margin: 0.5rem 0 0;
	background-color: var(--wp--preset--color--white);
	border-radius: var(--wp--preset--border-radius--standard);
	box-shadow: var(--wp--preset--shadow--header-floating);
	list-style: none;
	padding: var(--wp--preset--spacing--10);
	min-width: 220px;
	z-index: 1;
}

.thula-noscript-nav__sub a {
	color: var(--wp--preset--color--thula-blue);
	font-size: var(--wp--preset--font-size--small);
	text-decoration: none;
	display: block;
	padding: 0.25rem var(--wp--preset--spacing--10);
}

.thula-noscript-nav__sub a:hover,
.thula-noscript-nav__sub a:focus-visible {
	color: var(--wp--preset--color--thula-teal);
}

.thula-noscript-nav__item:hover .thula-noscript-nav__sub,
.thula-noscript-nav__item:focus-within .thula-noscript-nav__sub {
	display: block;
}

/* -------------------------------------------------------------------------- */
/* Breadcrumbs                                                                 */
/* -------------------------------------------------------------------------- */

.thula-breadcrumbs {
	font-size: var(--wp--preset--font-size--small);
	margin-bottom: var(--wp--preset--spacing--30);
}

.thula-breadcrumbs__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	list-style: none;
	margin: 0;
	padding: 0;
}

.thula-breadcrumbs__item + .thula-breadcrumbs__item::before {
	content: "/";
	padding-inline: 0.4em;
	color: var(--wp--preset--color--dark-grey);
}

.thula-breadcrumbs__link {
	color: var(--wp--preset--color--thula-blue);
	text-decoration: none;
}

.thula-breadcrumbs__link:hover {
	color: var(--wp--preset--color--thula-teal);
	text-decoration: underline;
}

.thula-breadcrumbs__link:focus-visible {
	outline: 2px solid var(--wp--preset--color--thula-teal);
	outline-offset: 2px;
	border-radius: 2px;
}

.thula-breadcrumbs__item--current span {
	color: var(--wp--preset--color--dark-grey);
}

/* -------------------------------------------------------------------------- */
/* Footer                                                                      */
/* -------------------------------------------------------------------------- */

.site-footer {
	width: 100%;
}

/* Reset WP block margins inside footer nav containers */
.site-footer .footer-nav-groups > *,
.site-footer .footer-nav-pair > *,
.site-footer .footer-nav-column > * {
	margin-block-start: 0;
	margin-block-end: 0;
}

/* -------------------------------------------------------------------------- */
/* Footer — main two-column layout (logo/CTA left, nav right)                 */
/* -------------------------------------------------------------------------- */

.footer-main-columns {
	display: flex;
	align-items: flex-start;
	gap: 4rem;
	width: 100%;
	margin-bottom: var(--wp--preset--spacing--50);
}

.footer-main-columns > .wp-block-column.footer-left-nav {
	flex: 0 1 clamp(243px, 22.5vw, 365px);
	min-width: 243px;
	max-width: 365px;
}

.footer-main-columns > .wp-block-column.footer-right-nav {
	flex: 1 1 0;
	min-width: 0;
	max-width: none;
}

.footer-left-nav .wp-block-site-logo img {
	width: 180px;
}

.footer-left-nav .wp-block-buttons {
	margin-top: var(--wp--preset--spacing--20);
}

/* -------------------------------------------------------------------------- */
/* Footer — navigation grid                                                    */
/* -------------------------------------------------------------------------- */

/*
 * The markup has two .footer-nav-pair wrappers each containing two
 * .footer-nav-column elements. display:contents on the pairs makes them
 * transparent to this grid, so all four columns lay out here directly.
 *
 * Desktop: Products | Resources | Company | Latest News (wider)
 */
.footer-right-nav .footer-nav-groups {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1.5fr;
	gap: 2rem;
	width: 100%;
}

.footer-right-nav .footer-nav-pair {
	display: contents;
}

.footer-right-nav .footer-nav-column {
	min-width: 0;
}

.footer-right-nav .footer-navmenu {
	width: 100%;
}

.footer-right-nav .footer-navmenu .wp-block-navigation__container {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.5rem;
}

/* Gap between "Latest News" nav heading and the query loop below it */
.site-footer .wp-block-query {
	margin-block-start: var(--wp--preset--spacing--20);
}

/* -------------------------------------------------------------------------- */
/* Footer — latest news (image + title side by side at all widths)            */
/* -------------------------------------------------------------------------- */

/* Thumbnail: 30px square, rounded to match the SVG placeholder's rx corner */
.site-footer .footer-news-thumbnail {
	flex-shrink: 0;
	width: 40px;
	height: 40px;
	border-radius: 4px;
	overflow: hidden;
}

.site-footer .footer-news-thumbnail img {
	display: block;
	width: 40px;
	height: 40px;
	object-fit: cover;
}

/*
 * WP core sets flex-direction:column on .wp-block-columns at ≤781px.
 * These overrides keep the image and title in a row at every viewport width.
 */
.site-footer .wp-block-query .wp-block-columns {
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	align-items: center;
	gap: var(--wp--preset--spacing--10);
}

.site-footer .wp-block-query .wp-block-column:first-child {
	flex: 0 0 auto !important;
	width: auto !important;
}

.site-footer .wp-block-query .wp-block-column:last-child {
	flex: 1 1 auto;
	min-width: 0;
}

/* -------------------------------------------------------------------------- */
/* Footer — post title link colours                                            */
/* -------------------------------------------------------------------------- */

.site-footer .wp-block-post-title a,
.site-footer .wp-block-post-title a:visited {
	color: var(--wp--preset--color--thula-blue);
	text-decoration: none;
}

.site-footer .wp-block-post-title a:hover,
.site-footer .wp-block-post-title a:focus-visible {
	color: var(--wp--preset--color--thula-teal);
}

/* -------------------------------------------------------------------------- */
/* Footer — legal bar                                                          */
/* -------------------------------------------------------------------------- */

/*
 * Legal content is centred across the full row width.
 * Social icon is positioned absolute to the right so it does not
 * offset the centred legal text.
 */


.footer-legal {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	margin-block-start: 0;
}

.footer-legal .wp-block-navigation__container,
.footer-legal .wp-block-thula-blocks-copyright-date-block {
	justify-content: center;
}

.footer-legal .wp-block-navigation-item__content {
	text-decoration: none;
}

.footer-legal .wp-block-navigation-item__label {
	background-image: none !important;
}

.footer-legal .wp-block-navigation-item__content:hover,
.footer-legal .wp-block-navigation-item__content:focus-visible {
	color: var(--wp--preset--color--thula-teal);
}

/* -------------------------------------------------------------------------- */
/* Footer — responsive                                                         */
/* -------------------------------------------------------------------------- */

/* Tablet: 2×2 — Products/Resources row 1, Company/Latest News row 2 */
@media (max-width: 1000px) {
	.footer-right-nav .footer-nav-groups {
		grid-template-columns: 1fr 1.5fr;
	}

	.footer-right-nav .wp-block-query {
		max-width: 17rem;
	}
}

/* Mobile: single-column stack + alignment */
@media (max-width: 800px) {
	.footer-main-columns {
		flex-direction: column;
		gap: var(--wp--preset--spacing--40);
	}

	.footer-main-columns > .wp-block-column.footer-left-nav,
	.footer-main-columns > .wp-block-column.footer-right-nav {
		flex: 1 1 auto;
		width: 100%;
		max-width: none;
		min-width: 0;
	}

	.footer-left-nav {
		text-align: center;
	}

	.footer-left-nav .wp-block-site-logo {
		margin-inline: auto;
	}

	.footer-left-nav .wp-block-buttons {
		justify-content: center;
	}

	.footer-right-nav .footer-nav-groups {
		grid-template-columns: 1fr;
		justify-items: center;
		text-align: center;
	}

	.footer-right-nav .footer-navmenu .wp-block-navigation__container {
		align-items: center;
	}

	/* Latest news posts stay left-aligned in the stacked layout */
	.footer-right-nav .wp-block-query {
		justify-self: start;
		text-align: left;
		width: 100%;
	}

	.footer-legal-bar {
		flex-direction: column;
		gap: var(--wp--preset--spacing--20);
	}

	.footer-legal-bar .footer-social-links {
		position: static;
	}
}

/* -------------------------------------------------------------------------- */
/* Header / Footer Navigation Link Underline Animation                        */
/* -------------------------------------------------------------------------- */

.thula-site-header .wp-block-navigation a.wp-block-navigation-item__content[href]:not([href=""]):not([href="#"]) .wp-block-navigation-item__label,
.site-footer .wp-block-navigation a.wp-block-navigation-item__content[href]:not([href=""]):not([href="#"]) .wp-block-navigation-item__label {
	background-image: linear-gradient(
		var(--wp--preset--color--thula-teal),
		var(--wp--preset--color--thula-teal)
	);
	background-position: 0 100%;
	background-repeat: no-repeat;
	background-size: 0% 2px;
	transition: background-size 0.4s ease;
}

.thula-site-header .wp-block-navigation a.wp-block-navigation-item__content[href]:not([href=""]):not([href="#"]):hover .wp-block-navigation-item__label,
.thula-site-header .wp-block-navigation a.wp-block-navigation-item__content[href]:not([href=""]):not([href="#"]):focus-visible .wp-block-navigation-item__label,
.site-footer .wp-block-navigation a.wp-block-navigation-item__content[href]:not([href=""]):not([href="#"]):hover .wp-block-navigation-item__label,
.site-footer .wp-block-navigation a.wp-block-navigation-item__content[href]:not([href=""]):not([href="#"]):focus-visible .wp-block-navigation-item__label {
	background-size: 100% 2px;
}

/* -------------------------------------------------------------------------- */
/* Header / Footer Disabled (Placeholder) Navigation Links                    */
/* -------------------------------------------------------------------------- */

.thula-site-header .wp-block-navigation a.wp-block-navigation-item__content:not([href]),
.thula-site-header .wp-block-navigation a.wp-block-navigation-item__content[href=""],
.thula-site-header .wp-block-navigation a.wp-block-navigation-item__content[href="#"],
.site-footer .wp-block-navigation a.wp-block-navigation-item__content:not([href]),
.site-footer .wp-block-navigation a.wp-block-navigation-item__content[href=""],
.site-footer .wp-block-navigation a.wp-block-navigation-item__content[href="#"] {
	pointer-events: none;
	cursor: default;
}

/* -------------------------------------------------------------------------- */
/* Reduced Motion                                                              */
/* -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.thula-site-header__inner,
	.thula-site-header .wp-block-navigation-item__label,
	.site-footer .wp-block-navigation-item__label {
		transition: none;
	}
}

/* -------------------------------------------------------------------------- */
/* Single Post — News & Insights                                               */
/* -------------------------------------------------------------------------- */

.news-post {
	margin-block-start: var(--wp--preset--spacing--70);
}

/*
 * Meta row below the post title: Published date · icon + read time
 */
.news-post-meta-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--10, 0.625rem);
	margin-block-start: var(--wp--preset--spacing--20, 0.75rem);
}

/*
 * Each meta item needs to be flex because the WordPress dynamic blocks
 * render their own wrappers.
 */
.news-post-meta-row__item {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	min-width: 0;
	margin: 0;
	color: var(--wp--preset--color--black);
}

.news-post-meta-row__sep {
	color: var(--wp--preset--color--black);
}

/*
 * Keep the Published label on the same line as the date.
 */
.news-post-meta-row__label {
	white-space: nowrap;
}

/*
 * Force WordPress' generated dynamic block wrappers to behave like inline row items.
 */
.news-post-meta-row .wp-block-post-time-to-read,
.news-post-meta-row .wp-block-post-date {
	display: inline-flex;
	align-items: center;
	width: auto;
	margin: 0;
}

.news-post-meta-row .wp-block-post-date time {
	display: inline;
}

/*
 * Inline SVG icon beside the read time.
 */
.news-post-meta__icon {
	display: block;
	width: 1.25em;
	height: 1.25em;
	flex: 0 0 auto;
	margin: 0;
	max-width: none;
}

/*
 * Separator between the meta row and excerpt/summary.
 */
.news-post-separator {
	border: 0;
	border-top: 1.5px solid var(--wp--preset--color--light-grey);
	height: 0;
	margin-block-end: var(--wp--preset--spacing--30, 1rem);
}

.news-post-title{
line-height: 1.2;
margin-bottom: var(--wp--preset--spacing--60);
}


/*
 * Excerpt used as the article summary.
 * Let WordPress' constrained layout keep it inside the content section.
 */

.news-post-summary-excerpt,
.news-post-summary-excerpt p {
	font-size: var(--wp--preset--font-size--large);
	font-weight: 300;
	line-height: 1.5;
}

/*
 * Featured image spacing after the excerpt.
 */
.news-post .wp-block-post-featured-image {
	margin-block-start: var(--wp--preset--spacing--50, 2rem);
	margin-block-end: var(--wp--preset--spacing--60, 2rem);
}