/**
 * Select Healthcare - site customisations.
 *
 * Loaded after the theme and Kadence Blocks, so plain specificity is usually
 * enough to win. Where it is not, the reason is noted inline; there are no
 * blanket !important rules.
 *
 * Sections:
 *   1. Tokens
 *   2. Page banners
 *   3. Home page - conference banner backdrop
 *   4. Card motion (home categories, products, shop categories)
 *   5. Shop and category cards
 *   6. Reviews
 *   7. Footer
 *   8. Cart and checkout
 *   9. Contact page
 *  10. About page - timeline
 */

/* ------------------------------------------------------------------ *
 * 1. Tokens
 * ------------------------------------------------------------------ */

:root {
	/* Was 176px, matched to the home page hero. Reduced by a third. */
	--shc-banner-height: 117px;

	/* One size for every page banner title. The block-built pages (Home,
	   About, Contact) rendered theirs at 31.5px while the theme's hero pages
	   used 50px; neither suits the shorter banner. */
	--shc-banner-title-size: 34px;

	/* Soft green used behind the product promotion card and the contact
	   detail blocks. */
	--shc-soft-green: #edf7e8;

	/* Sampled from the footer artwork so the two match. */
	--shc-footer-colour: #181818;

	/* Kadence theme palette 2 - the blue used by the banners and buttons. */
	--shc-brand-blue: var(--global-palette2, #5192f3);

	/* Mirrors the 16px the site's own Additional CSS puts on product cards.
	   Change both together if that value ever moves. */
	--shc-card-radius: 16px;

	--shc-card-shadow: 0px 35px 30px -5px rgba(0, 0, 0, 0.2);
	--shc-card-shadow-hover: 0px 40px 40px -8px rgba(0, 0, 0, 0.28);
	--shc-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ------------------------------------------------------------------ *
 * 2. Page banners
 *
 * The site builds its blue page banner two different ways, so both need
 * pinning to the same height:
 *
 *   a) Kadence Blocks row - the first block on a built page (Home, About,
 *      Contact). The row grows with its text, which is why Contact sat at
 *      198px against the home page's 176px.
 *   b) Kadence theme hero - the archive header used by Shop, News, Cart and
 *      Checkout. Its min-height is a theme setting of 200px.
 *
 * In both cases the content is centred rather than padded, so a one line
 * heading and a two line heading occupy the same band.
 * ------------------------------------------------------------------ */

/* (a) Block-built banners. Restricted to the first row of a page's content,
   and to rows carrying the blue palette background, so ordinary rows further
   down the page are untouched. */
.entry-content > .kb-row-layout-wrap:first-child.has-theme-palette2-background-color > .kt-row-column-wrap {
	min-height: var(--shc-banner-height);
	padding-top: 0;
	padding-bottom: 0;
	/* This wrap is a grid, so align-items only centres the heading inside its
	   track - the track itself still sits at the top of the taller box.
	   align-content is what moves the track. */
	align-content: center;
	align-items: center;
}

/* The About banner carried a kicker above the title and a strapline below it.
   Both are dropped so the band reads as one line, matching every other page.
   Targeted by the blocks' generated classes - recreating either block in the
   editor changes the class and brings the text back. */
.kt-adv-heading995_e4a9e9-67,
.kt-adv-heading995_da92c8-89 {
	display: none;
}

/* One title treatment for both banner mechanisms. Kadence sets the size on
   each heading block individually and the theme sets its own on hero titles,
   so both are overridden to the same token. The selectors need the extra
   weight to beat Kadence's per-block CSS, which prints after this file. */
.site .entry-hero .entry-header .entry-title,
.site .entry-hero .entry-header .page-title,
.entry-content > .kb-row-layout-wrap:first-child h1,
.entry-content > .kb-row-layout-wrap:first-child h2 {
	font-size: var(--shc-banner-title-size);
	line-height: 1.25;
	font-weight: 700;
	text-align: center;
	text-transform: none;
	letter-spacing: normal;
	margin: 0;
}

@media (max-width: 767px) {
	:root {
		--shc-banner-title-size: 26px;
	}
}

/* The News archive and the Shop repeat their own title in the breadcrumb
   directly beneath it, which reads as a duplicate. */
.entry-hero.post-archive-hero-section .kadence-breadcrumbs,
.entry-hero.product-archive-hero-section .kadence-breadcrumbs {
	display: none;
}

/* (b) Theme hero banners.
   Kadence writes a min-height per hero type - `.entry-hero.page-hero-section
   .entry-header` for Cart and Checkout, and siblings of it for the archives -
   from its customizer CSS, which loads after this file. Going through
   .site and the hero's inner container clears all of them in one rule.
   min-height, so a title that needs more room still gets it. */
.site .entry-hero .entry-hero-container-inner .entry-header {
	min-height: var(--shc-banner-height);
}

/* A news post's hero carries the category, title and byline, which fill the
   min-height on their own and left "NEWS" touching the top edge. */
.site .entry-hero.post-hero-section .entry-hero-container-inner .entry-header {
	padding-top: 32px;
	padding-bottom: 24px;
}

/* Posts with a featured image show it behind the title band (news.php). The
   band is only as tall as its text plus 30px each side, and a light shade
   keeps white text readable on paler photos. */
.shc-post-hero-image .site .entry-hero.post-hero-section .entry-hero-container-inner .entry-header {
	min-height: 0;
	padding-top: 30px;
	padding-bottom: 30px;
}

/* Kadence gives the byline a bottom margin, which would add to the 30px. */
.shc-post-hero-image .entry-hero.post-hero-section .entry-header > :last-child {
	margin-bottom: 0;
}

.shc-post-hero-image .entry-hero.post-hero-section .hero-section-overlay {
	background: rgba(0, 0, 0, 0.3);
}

.shc-post-hero-image .entry-hero.post-hero-section .entry-header,
.shc-post-hero-image .entry-hero.post-hero-section .entry-header a,
.shc-post-hero-image .entry-hero.post-hero-section .entry-header .entry-title,
.shc-post-hero-image .entry-hero.post-hero-section .entry-meta,
.shc-post-hero-image .entry-hero.post-hero-section .entry-meta * {
	color: #fff;
}

/* The post body box has side padding only. Posts pasted in from the old site
   often start with an empty paragraph, which let the first heading's margin
   collapse out of the box and sit the heading against its top edge. */
.single-post .entry-content-wrap {
	padding-top: 40px;
}

.single-post .entry-content > p:empty {
	display: none;
}

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

/* ------------------------------------------------------------------ *
 * 3. Home page - conference banner backdrop
 *
 * The NBE conference artwork sits in its own full width column and was
 * showing against white. Targeted by the block's generated class: if the
 * block is ever deleted and re-added the class changes, and this rule is the
 * thing to update.
 * ------------------------------------------------------------------ */

/* Kadence prints its own per-block rule for this column, at the same
   specificity but later in the document. .entry-content is the cheapest way to
   outrank it without reaching for !important. */
.entry-content .kadence-column760_d8989f-4d > .kt-inside-inner-col {
	background: #fff;
	border-top: 3px solid var(--shc-brand-blue);
}

/* The products group above the news block carries a 32px bottom margin, which
   stacked on the news row's own 24px padding and left 56px of white above the
   news item against 24px below it. The row's padding sets the spacing on its
   own. */
.home .entry-content > .wp-block-group.alignfull {
	margin-bottom: 0;
}

/* Article photos beside the news featured image (news.php). Tiles are cropped
   with object-fit, so portrait shots fill a landscape cell instead of
   letterboxing. With three photos the first runs the full height. */
.shc-news-gallery {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	grid-auto-rows: 1fr;
	gap: 1rem;
	margin: 1rem 0;
}

.shc-news-gallery img {
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.shc-news-gallery--1 {
	grid-template-columns: minmax(0, 1fr);
}

.shc-news-gallery--3 img:first-child {
	grid-row: span 2;
}

@media (min-width: 768px) {
	/* Kadence's own two-column rule is long-winded, so this has to match it
	   class for class to win. */
	.home .wp-block-kadence-posts.grid-lg-col-1.item-image-style-beside article.loop-entry.has-post-thumbnail:has(> .shc-news-gallery) {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.2fr);
	}

	/* Let the featured image fill the card's height too, in place of its fixed
	   2:3 ratio, so both image columns line up top and bottom. */
	.home .wp-block-kadence-posts article.loop-entry:has(> .shc-news-gallery) .post-thumbnail {
		height: auto;
		padding-bottom: 0;
	}

	/* contain: size stops the photos' own heights from stretching the card, so
	   the grid takes the height the featured image and text set and the tiles
	   crop to fit it. */
	.shc-news-gallery {
		contain: size;
		grid-auto-rows: minmax(0, 1fr);
		margin: 0 0 0 1rem;
	}

	.shc-news-gallery img {
		aspect-ratio: auto;
	}
}

/* ------------------------------------------------------------------ *
 * 4. Card motion
 *
 * One shared treatment for the home page category cards, the home page
 * product cards and the shop category tiles: a short lift on hover, and a
 * gentle fade up the first time each card scrolls into view.
 *
 * Entrance animation is opt-in per element - script.js adds .shc-reveal, then
 * .shc-in when the card reaches the viewport. If the script does not run the
 * cards simply render in place.
 * ------------------------------------------------------------------ */

.shc-card-motion {
	position: relative;
	transition: transform 0.35s var(--shc-ease);
	will-change: transform;
}

.shc-card-motion:hover,
.shc-card-motion:focus-within {
	transform: translateY(-8px);
}

/* The hover shadow is painted by an overlay that fades in, rather than by
   transitioning box-shadow directly. A 40px blur recalculated every frame is
   a repaint on the main thread and is what made these stutter; opacity and
   transform both run on the compositor. */
.shc-card-motion::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	border-radius: inherit;
	box-shadow: var(--shc-card-shadow-hover);
	opacity: 0;
	transition: opacity 0.35s var(--shc-ease);
}

.shc-card-motion:hover::after,
.shc-card-motion:focus-within::after {
	opacity: 1;
}

/* The entrance uses `translate` rather than `transform` so it composes with
   the hover lift above instead of fighting it - a settled card would otherwise
   sit on `transform: none` and swallow the :hover rule. */
.shc-reveal {
	opacity: 0;
	translate: 0 28px;
}

/* Longhands, not the `transition` shorthand: the shorthand here would replace
   the one on .shc-card-motion above, leaving a revealed card with no transform
   transition at all - which is why the hover lift snapped. Listing transform
   alongside keeps it, at its own shorter duration and with no stagger delay,
   so hovering stays instant to respond while the entrance stays sequenced. */
.shc-reveal.shc-in {
	opacity: 1;
	translate: 0 0;
	transition-property: opacity, translate, transform;
	transition-duration: 0.6s, 0.6s, 0.35s;
	transition-timing-function: var(--shc-ease);
	transition-delay:
		calc(var(--shc-reveal-index, 0) * 90ms),
		calc(var(--shc-reveal-index, 0) * 90ms),
		0s;
}

/* There is deliberately no zoom on the card images. Clipping one needs
   overflow:hidden on an ancestor, and these images are sized by aspect-ratio,
   so making their wrapper a scroll container collapses its height - the home
   cards' figures dropped from 382px to 208px and the product links from 216px
   to 129px. The lift and the shadow carry the interaction on their own. */

@media (prefers-reduced-motion: reduce) {
	.shc-card-motion,
	.shc-card-motion::after,
	.shc-reveal,
	.shc-reveal.shc-in {
		transition: none;
	}

	.shc-card-motion:hover,
	.shc-card-motion:focus-within {
		transform: none;
	}

	.shc-reveal {
		opacity: 1;
		translate: none;
	}
}

/* ------------------------------------------------------------------ *
 * 5. Shop and category cards
 *
 * Category tiles appear on the shop landing page and again on every product
 * category archive that has children, so the rule is written against the
 * WooCommerce class rather than a page.
 * ------------------------------------------------------------------ */

/* The theme runs in its "unboxed" content style, which strips shadows from
   archive entries via `.post-type-archive.content-style-unboxed .entry`. That
   is three classes; the list context here is three classes and two elements,
   so it wins on specificity without an !important. */
ul.products li.product-category.loop-entry,
ul.products li.product-category {
	box-shadow: var(--shc-card-shadow);
	background: #fff;
}

/* WooCommerce clips every ul.products > li.product, which would cut off the
   ::after overlay that draws the hover shadow. Category tiles hold nothing
   that needs clipping - an image and a title - so the clip comes off. */
.woocommerce ul.products li.product.product-category {
	overflow: visible;
}

/* The clip was also what rounded the top of the image to the card. Without it
   the image needs its own corners; the card's own background rounds the
   bottom. */
ul.products li.product-category > a > img {
	border-top-left-radius: var(--shc-card-radius);
	border-top-right-radius: var(--shc-card-radius);
}

li.product-category > a {
	display: block;
	height: 100%;
}

ul.products li.product-category .woocommerce-loop-category__title {
	text-align: center;
}

/* Category icon, placed between the title and the description by
   categories.php so its top sits level with the first line of the paragraph.
   Floated so the description sits to its left; the description is a flow-root
   so its lines stop at the icon's edge instead of wrapping under it. */
.shc-category-icon {
	float: right;
	width: 120px;
	aspect-ratio: 1;
	margin: 0 0 1rem 2rem;
}

.shc-category-icon img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.shc-category-icon--empty {
	background: #d9d9d9;
}

.shc-category-icon ~ .shc-category-description {
	display: flow-root;
}

.shc-category-icon ~ .wp-block-kadence-wootemplate-blocks-products {
	clear: both;
}

@media (max-width: 767px) {
	.shc-category-icon {
		width: 72px;
		margin-left: 1rem;
	}
}

/* Category name and description, added above the grid in the Shop Kit
   archive template. Neither block carries spacing of its own, and the theme's
   50px h1 overpowered a column that shares the row with the filters, so the
   name uses the same size as the page banners. */
.shc-category-title {
	margin: 0 0 1rem;
	font-size: var(--shc-banner-title-size);
	line-height: 1.25;
}

.shc-category-description {
	margin-bottom: 2rem;
}

.shc-category-description > :last-child {
	margin-bottom: 0;
}

/* Product name on the single product page. The Shop Kit title block carries
   no size of its own, so it took the theme's 50px h1 at a line height of 1.5,
   which ran a long name like "Washable Flat Slide Sheet Without Handles - Box
   5 Pairs" to three lines and 225px in a half-width column. Same size as the
   category and banner titles. */
.woocommerce div.product .product_title {
	font-size: var(--shc-banner-title-size);
	line-height: 1.25;
}

/* Home page "Most popular products": Kadence sections, one per product, each
   holding a linked image and an inner "strip" section with the title. The
   strip's blue, and any photo behind it, are set on that section in the editor
   (Background); only the shape and layout live here.

   The strip fills whatever the card has left below the image, and the row
   stretches every card to the tallest, so a one line title and a three line one
   get the same strip with the title centred in it. */
.shc-popular-card {
	border-radius: var(--shc-card-radius);
}

.shc-popular-card > .kt-inside-inner-col {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: #fff;
	border-radius: var(--shc-card-radius);
}

.shc-popular-card .wp-block-image {
	margin: 0;
}

.shc-popular-card .wp-block-image img {
	display: block;
	width: 100%;
	height: auto;
	border-top-left-radius: var(--shc-card-radius);
	border-top-right-radius: var(--shc-card-radius);
}

.shc-popular-strip {
	flex: 1 1 auto;
	display: flex;
}

/* Kadence paints the section's background on this inner wrapper, so the
   corners go here too. Image size and position are left to the editor. */
.shc-popular-card .shc-popular-strip > .kt-inside-inner-col {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 16px;
	border-bottom-left-radius: var(--shc-card-radius);
	border-bottom-right-radius: var(--shc-card-radius);
}

.shc-popular-strip .wp-block-kadence-advancedheading {
	margin: 0;
	font-size: 16px;
	line-height: 1.4;
	text-align: center;
}

.shc-popular-strip .wp-block-kadence-advancedheading a {
	color: inherit;
	text-decoration: none;
}

/* The shadow is thrown a long way down, so rows of tiles need room for it to
   land in. Scoped with :has() so product grids, which have no such shadow,
   keep their normal spacing. */
ul.products:has(li.product-category) {
	row-gap: 3.5rem;
}

/* Home page shop section: grey text boxes above a copy of the shop's category
   tiles. The tiles come from the [product_categories] shortcode, which prints
   the same ul.products markup as the shop page, so everything above applies to
   them unchanged. The boxes are ordinary paragraphs carrying .shc-text-box, so
   the wording can be edited in the block editor. */
.shc-home-shop {
	padding-top: 3rem;
	padding-bottom: 3rem;
}

/* A full width group, so the inner container is held to the theme's content
   width to line up with the feature cards above and the shop grid. */
.shc-home-shop > .wp-block-group__inner-container {
	max-width: var(--global-content-width, 1290px);
	margin-inline: auto;
	padding-inline: var(--global-content-edge-padding, 1.5rem);
}

/* The site's Additional CSS fills the title strip of any loop card with the
   brand blue on "unboxed" pages. On the shop that is beaten by an archive-only
   Kadence rule that makes it transparent, so the white card shows through; the
   home page is not an archive, so the same result is set here. Seven classes,
   to outrank the Additional CSS, which prints after this file. */
.content-style-unboxed .shc-home-shop li.product-category.loop-entry .product-details.content-bg:not(.loop-entry) {
	background: transparent;
}

.entry-content .shc-home-shop .shc-text-box {
	margin-top: 0;
	margin-bottom: 1rem;
	padding: 0.6em 1.25em;
	background: #e6e7e5;
	color: #1b2a6b;
	font-size: 1.25rem;
	line-height: 1.5;
	text-align: center;
}

/* Clear of the last box, then the tiles' own row gap takes over. */
.shc-home-shop .woocommerce {
	margin-top: 2rem;
}

@media (max-width: 767px) {
	.entry-content .shc-home-shop .shc-text-box {
		font-size: 1.05rem;
	}
}

/* ------------------------------------------------------------------ *
 * 6. Reviews
 *
 * Kadence testimonials size themselves to their text, so a long review and a
 * short one produced cards of 891px and 596px side by side. Each card becomes
 * a flex column, the bubble takes the leftover space, and the quote is clamped
 * to a fixed number of lines with a toggle added by script.js.
 * ------------------------------------------------------------------ */

.kt-blocks-testimonials-inner-wrap .kt-testimonial-grid-item {
	display: flex;
}

.kt-testimonial-item-wrap {
	display: flex;
	flex-direction: column;
	width: 100%;
}

.kt-testimonial-text-wrap {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
}

.kt-testimonial-content-wrap {
	flex: 1 1 auto;
}

/* Name and job title under each bubble. Kadence centres the pair as a flex
   item while left-aligning the text inside it, so a short occupation floated
   into the middle of the card and a long one that wrapped to two lines sat
   hard against the left edge. Starting the row from the left makes every card
   read like the wide one. */
.kt-blocks-testimonials-inner-wrap .kt-testimonial-meta-wrap {
	justify-content: flex-start;
}

/* Headline: three lines is enough for the longest of the current reviews
   without leaving a gap under the shortest. */
.kt-testimonial-title {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Body copy, collapsed. .shc-expanded is toggled by the button. */
.kt-testimonial-content-wrap .kt-testimonial-content {
	display: -webkit-box;
	-webkit-line-clamp: 6;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.kt-testimonial-item-wrap.shc-expanded .kt-testimonial-content {
	display: block;
	-webkit-line-clamp: none;
	overflow: visible;
}

/* The theme treats every <button> as a filled button: uppercase, letter
   spaced, 8px radius, and a green fill with a drop shadow on hover, focus and
   active. This is a text toggle, so all of that has to come back off. Those
   rules are element-level, so scoping to the card outranks them - including
   their :hover and :focus, which is what was drawing the green box. */
.kt-testimonial-item-wrap .shc-read-more,
.kt-testimonial-item-wrap .shc-read-more:hover,
.kt-testimonial-item-wrap .shc-read-more:focus,
.kt-testimonial-item-wrap .shc-read-more:active {
	appearance: none;
	align-self: flex-start;
	margin-top: 0.75em;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	color: var(--global-palette1, #2b6439);
	font: inherit;
	font-weight: 600;
	font-style: normal;
	letter-spacing: 0;
	text-transform: none;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	cursor: pointer;
	transition:
		text-decoration-thickness 0.2s var(--shc-ease),
		text-underline-offset 0.2s var(--shc-ease);
}

/* From an explicit 1px, so there is a value to animate from - `auto` is not
   interpolatable and the underline would snap. */
.kt-testimonial-item-wrap .shc-read-more:hover {
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}

/* Keyboard users still need to see where they are; pointer users do not get a
   ring on click. */
.kt-testimonial-item-wrap .shc-read-more:focus-visible {
	outline: 2px solid var(--global-palette1, #2b6439);
	outline-offset: 3px;
}

/* Expanding grows the whole row, so the three cards stay level with each
   other. Capping the height instead would put a scrollbar inside the card,
   which is a worse thing to hand someone who just asked to read more. */

/* ------------------------------------------------------------------ *
 * 7. Footer
 *
 * The Information menu ran as one long single column, which is what made the
 * footer so tall. Two columns halves it, and the row padding comes down from
 * 70px to 40px.
 * ------------------------------------------------------------------ */

.site-middle-footer-inner-wrap {
	padding-top: 40px;
	padding-bottom: 40px;
}

.site-bottom-footer-inner-wrap {
	padding-top: 10px;
	padding-bottom: 10px;
}

.footer-widget-area .widget_nav_menu #menu-information {
	columns: 2;
	column-gap: 2.5rem;
}

.footer-widget-area .widget_nav_menu #menu-information > li {
	break-inside: avoid;
	margin-bottom: 0.35em;
}

/* The footer takes the dark grey out of the background artwork (#181818, its
   average) instead of the theme's #353535, so the image sits on the same tone
   it was cut from and there is no step where it ends. Kadence sets this with
   an ID, so this needs one too. */
.site-footer#colophon {
	background: var(--shc-footer-colour);
}

/* Background image, painted by an overlay rather than on the footer itself so
   it can be sized and hidden independently of the text over it.
   .shc-has-footer-bg only appears when footer.php actually found an image, so
   with none uploaded none of this applies. */
.shc-has-footer-bg .site-footer-wrap {
	position: relative;
	isolation: isolate;
}

.shc-has-footer-bg .site-footer-wrap::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background-image: var(--shc-footer-bg);
	/* Sized by width: the image spans the footer edge to edge and its height
	   follows, cropping top and bottom rather than being squashed. `cover`
	   would size by whichever dimension needed more scaling, which is what
	   blew it up. */
	background-size: 100% auto;
	background-position: center;
	background-repeat: no-repeat;
	opacity: 1;
}

/* At full opacity the text sits directly on the artwork, so every bit of it
   gets a dark halo to lift it off. text-shadow inherits, so setting it on the
   wrap covers the headings, links and address block in one go. */
.shc-has-footer-bg .site-footer-wrap {
	text-shadow:
		0 0 3px rgba(0, 0, 0, 0.75),
		0 0 8px rgba(0, 0, 0, 0.85);
}

/* The social marks are SVG, so a text shadow does not reach them. */
.shc-has-footer-bg .site-footer .shc-social-footer a {
	filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.85));
}

/* Below the desktop nav breakpoint the footer stacks and the artwork, sized by
   width, would tower over it. Dropped entirely, and the glow with it - there is
   nothing left to lift the text off. */
@media (max-width: 1024px) {
	.shc-has-footer-bg .site-footer-wrap::before {
		display: none;
	}

	.shc-has-footer-bg .site-footer-wrap {
		text-shadow: none;
	}

	.shc-has-footer-bg .site-footer .shc-social-footer a {
		filter: none;
	}
}

/* Widgets carry a generous bottom margin by default; the footer only holds a
   couple of them, so the last one's margin is dead space. */
.site-footer .footer-widget-area-inner .widget:last-child {
	margin-bottom: 0;
}

/* Social icons sit in the space under the Information links. The footer is
   dark, so these are outlined rather than filled - a solid blue disc would
   pull more attention than the links above it. */
.site-footer .shc-social-footer {
	margin-top: 1.5rem;
}

.site-footer .shc-social-footer a {
	width: 38px;
	height: 38px;
	background: transparent;
	border: 1px solid currentColor;
	color: inherit;
	opacity: 0.75;
}

.site-footer .shc-social-footer a:hover,
.site-footer .shc-social-footer a:focus-visible {
	background: var(--shc-brand-blue);
	border-color: var(--shc-brand-blue);
	color: #fff;
	opacity: 1;
}

.site-footer .shc-social-footer svg {
	width: 17px;
	height: 17px;
}

@media (max-width: 767px) {
	/* Two narrow columns of links are hard to scan on a phone. */
	.footer-widget-area .widget_nav_menu #menu-information {
		columns: 1;
	}
}

/* ------------------------------------------------------------------ *
 * 8. Cart and checkout
 *
 * The content area started at exactly the pixel the banner ended, so "Cart
 * Summary" and "Basket totals" sat flush against the blue. Spacing is added
 * above and the oversized 80px bottom margin brought into line.
 * ------------------------------------------------------------------ */

.woocommerce-cart .content-area,
.woocommerce-checkout .content-area {
	padding-top: 48px;
	margin-bottom: 56px;
}

/* The white card pads its sides by 32px and its top and bottom by nothing,
   because ordinary pages get their vertical rhythm from the blocks inside.
   The cart and checkout tables bring none, so the headings sat hard against
   the top edge. Match the sides on all four. */
.woocommerce-cart .entry-content-wrap,
.woocommerce-checkout .entry-content-wrap {
	padding-top: 32px;
	padding-bottom: 32px;
}

/* Both tables get their heading tight against the top edge of the white card. */
.woocommerce-cart .cart-collaterals h2,
.woocommerce-checkout #order_review_heading {
	margin-top: 0;
}

@media (max-width: 767px) {
	.woocommerce-cart .content-area,
	.woocommerce-checkout .content-area {
		padding-top: 32px;
		margin-bottom: 40px;
	}
}

/* ------------------------------------------------------------------ *
 * 8b. Plain-HTML pages
 *
 * The information pages carried over from the old site are classic HTML, not
 * blocks, so nothing inside supplies vertical rhythm and the content card's
 * `padding: 0 32px` left the first heading against the banner. All four sides
 * are set together here rather than only topping up the vertical, so the
 * padding stays equal whatever the theme does to the sides.
 *
 * .shc-doc-page comes from pages.php, which tags any page whose content is not
 * block-built.
 * ------------------------------------------------------------------ */

.shc-doc-page .entry-content-wrap {
	padding: 32px;
}

/* Long legal copy sits better with a little more breathing room below. */
.shc-doc-page .entry-content > *:last-child {
	margin-bottom: 0;
}

@media (max-width: 767px) {
	.shc-doc-page .entry-content-wrap {
		padding: 24px;
	}
}

/* ------------------------------------------------------------------ *
 * 8c. Product promotion card
 *
 * The card defaults to the blue theme colour with white text, set in the
 * site's Additional CSS. Swapped for the soft green, which means the text has
 * to come back to dark or it would be white on pale green and unreadable.
 *
 * Additional CSS prints after this file, so each rule carries one extra class
 * (.product-section, always present) to outrank its counterpart there. The
 * blue original is still in the Customizer if you want it changed at source.
 * ------------------------------------------------------------------ */

.product-description-sections .product-promotion.product-section:not(.has-bg-image) {
	background-color: var(--shc-soft-green);
}

/* The white has to come off every child, not just the card: the Additional CSS
   names p, li and each heading individually, and an explicit colour on a child
   beats a colour inherited from its parent. */
.product-description-sections .product-promotion.product-section:not(.has-bg-image),
.product-description-sections .product-promotion.product-section:not(.has-bg-image)
	:is(p, li, h1, h2, h3, h4, h5, h6, strong, em, span, blockquote, td, th),
.product-description-sections .product-promotion.product-section:not(.has-bg-image) ul li::before {
	color: #000;
}

.product-description-sections .product-promotion.product-section:not(.has-bg-image) a {
	color: var(--global-palette1, #2b6439);
}

/* Cards with a background image keep the blue wash and white text - that
   overlay is what keeps the words legible over a photo, and it is not the
   default this was asked to change. */

/* ------------------------------------------------------------------ *
 * 9. Contact page
 *
 * Details move to the left half and the form fills the right. The existing
 * three-across row of Email / Address / Call becomes a single stacked column
 * on the left.
 * ------------------------------------------------------------------ */

/* Hold the two columns to the theme's content width, as every other page does.
   The banner above and the map below stay full bleed, which is how the page
   was already built. */
.shc-contact-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(2rem, 5vw, 4rem);
	align-items: start;
	max-width: var(--global-content-width, 1290px);
	margin-inline: auto;
	padding-inline: var(--global-content-edge-padding, 1.5rem);
}

/* The details row carries its own 1290px max-width from Kadence, which would
   now inset it a second time inside its own column and knock it off the
   grid. Let it fill the column - the container above supplies the edge
   padding - while keeping its vertical rhythm. */
.shc-contact-details .kb-row-layout-wrap > .kt-row-column-wrap {
	max-width: none;
	padding-left: 0;
	padding-right: 0;
}

/* Stack the three detail cards rather than sitting them side by side. */
.shc-contact-details .kt-row-column-wrap {
	display: block;
}

.shc-contact-details .kt-row-column-wrap > .wp-block-kadence-column {
	width: 100%;
	max-width: none;
	flex: 0 0 100%;
}

.shc-contact-form-panel {
	background: #fff;
	border-radius: 6px;
	padding: clamp(1.5rem, 3vw, 2.25rem);
}

.shc-contact-form-panel > h2 {
	margin-top: 0;
}

/* CF7 wraps each field in a <p> and turns the newlines in the form definition
   into <br>, so each field measured 125px for 65px of content. The flex column
   stacks label and input; hiding the <br>s removes the two empty 21px rows.
   Done here rather than by writing the form on one line, so it survives anyone
   editing the form in the CF7 admin. */
.shc-contact-form-panel .shc-field {
	display: flex;
	flex-direction: column;
	margin-bottom: 0.85rem;
}

.shc-contact-form-panel .shc-field br {
	display: none;
}

.shc-contact-form-panel .wpcf7-form-control-wrap {
	display: block;
}

.shc-contact-form-panel > h2 {
	margin-bottom: 0.6em;
}

.shc-contact-form-panel label {
	display: block;
	margin-bottom: 0.35rem;
	font-size: 0.9rem;
	font-weight: 600;
}

.shc-contact-form-panel input[type="text"],
.shc-contact-form-panel input[type="email"],
.shc-contact-form-panel input[type="tel"],
.shc-contact-form-panel textarea {
	width: 100%;
}

.shc-contact-form-panel .wpcf7-submit {
	width: 100%;
}

/* CF7 keeps the spinner in the flow, which nudges a full width button
   off-centre while a message is sending. */
.shc-contact-form-panel .wpcf7-spinner {
	display: block;
	margin: 0.75rem auto 0;
}

.shc-contact-form-panel .wpcf7-not-valid-tip {
	font-size: 0.85rem;
}

.shc-contact-form-panel .wpcf7-response-output {
	margin: 1rem 0 0;
	font-size: 0.9rem;
}

/* Each detail block (Email / Address / Call) becomes a soft green card.
   The card is the info box's own link wrapper, which Kadence paints white -
   colouring the column behind it instead just produced a green band framing a
   white card. Its per-block rule is two classes, so this needs three. */
.shc-contact-details .wp-block-kadence-infobox .kt-blocks-info-box-link-wrap {
	background: var(--shc-soft-green);
	border-radius: 4px;
}

/* The column is now only a spacer; the card carries the colour and padding. */
.shc-contact-details .wp-block-kadence-column:not(:has(.wp-block-kadence-column)) > .kt-inside-inner-col {
	background: none;
	padding: 0;
}

/* The column wrapping all three cards carries a faint all-round shadow, which
   showed as a grey edge down the left of the group. */
.shc-contact-details .wp-block-kadence-column:has(.wp-block-kadence-column) > .kt-inside-inner-col {
	box-shadow: none;
}

/* These cards are spans with no href - Kadence still gives them a hover that
   flips the background to white and recolours the icon, which invites a click
   that does nothing. Held still instead. Kadence's per-block rules are three
   and four classes deep, so these need one more each. */
.shc-contact-details .wp-block-kadence-infobox .kt-blocks-info-box-link-wrap:hover {
	background: var(--shc-soft-green);
}

.shc-contact-details .wp-block-kadence-infobox .kt-blocks-info-box-link-wrap:hover .kt-blocks-info-box-media {
	background: var(--global-palette1, #2b6439);
	color: #fff;
	border-color: transparent;
}

.shc-contact-details .wp-block-kadence-column:not(:has(.wp-block-kadence-column)) {
	margin-bottom: 1.25rem;
}

.shc-contact-details .wp-block-kadence-column:not(:has(.wp-block-kadence-column)):last-child {
	margin-bottom: 0;
}

.shc-social {
	display: flex;
	gap: 0.75rem;
	align-items: center;
	margin-top: 1.75rem;
}

/* The icons sit under the detail blocks in the left column, on a card of
   their own so they read as part of the same set. Dark green discs rather
   than the usual blue, to match the icon tiles inside the cards above. */
.shc-contact-details .shc-social {
	background: var(--shc-soft-green);
	border-radius: 4px;
	padding: 1.25rem 1.5rem;
	margin-top: 1.25rem;
	justify-content: flex-start;
}

.shc-contact-details .shc-social a {
	background: var(--global-palette1, #2b6439);
}

.shc-contact-details .shc-social a:hover,
.shc-contact-details .shc-social a:focus-visible {
	background: var(--shc-brand-blue);
}

.shc-social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--shc-brand-blue);
	color: #fff;
	/* Every property either variant changes on hover, or it jumps: the footer
	   icons are outlined, so they move border-colour, colour and opacity too. */
	transition:
		transform 0.25s var(--shc-ease),
		background-color 0.25s var(--shc-ease),
		border-color 0.25s var(--shc-ease),
		color 0.25s var(--shc-ease),
		opacity 0.25s var(--shc-ease);
}

.shc-social a:hover,
.shc-social a:focus-visible {
	transform: translateY(-3px);
	background: var(--global-palette1, #2b6439);
	color: #fff;
}

.shc-social svg {
	width: 20px;
	height: 20px;
	fill: currentColor;
}

@media (max-width: 991px) {
	.shc-contact-layout {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ------------------------------------------------------------------ *
 * 10. About page - timeline
 *
 * The timeline is a Kadence Tabs block with one tab per year. Each panel sized
 * itself to its own text (159px to 282px across the fifteen years), so
 * switching year shunted the statistics row below it up and down. The panels
 * are stacked in a single grid cell, which makes the block as tall as its
 * tallest year whichever is showing, and the inactive ones are hidden with
 * visibility instead of display.
 *
 * The tabs script writes display:none / display:block inline on every switch,
 * and only !important outranks an inline style, which is why the one below is
 * there. Below 768px the block switches to its accordion layout, where each
 * panel opens under its own year and the stacking must not apply.
 * ------------------------------------------------------------------ */

@media (min-width: 768px) {
	.kt-tabs-id995_d32b2a-42 > .kt-tabs-content-wrap {
		display: grid;
	}

	/* Kadence's clearfix pseudo-elements would otherwise become grid items of
	   their own. */
	.kt-tabs-id995_d32b2a-42 > .kt-tabs-content-wrap::before,
	.kt-tabs-id995_d32b2a-42 > .kt-tabs-content-wrap::after {
		display: none;
	}

	.kt-tabs-id995_d32b2a-42 > .kt-tabs-content-wrap > .wp-block-kadence-tab {
		grid-area: 1 / 1;
		display: block !important;
	}

	.kt-tabs-id995_d32b2a-42 > .kt-tabs-content-wrap > .wp-block-kadence-tab[aria-hidden="true"] {
		visibility: hidden;
	}
}