/*
 * The "Modern" look: light and clean. One typeface, a header with no bar,
 * rounded corners and soft shadows, a large homepage opening, a pale
 * closing band with the form in a white card, and the footer as the page's
 * only dark block. First built for Kind Media (Oct 2026, after
 * gnbproperty.com); the default for new sites.
 *
 * Loaded after theme.css on a site whose inc/settings.php says
 * 'look' => 'modern' (functions.php), and it relies on theme.css: this
 * file only turns the shared Heritage parts (dark bar, square boxes, framed
 * photos, dark closing band) into the Modern look. A site without the
 * setting keeps Heritage, untouched.
 *
 * Nothing here names a colour: every colour comes from the site's palette
 * in theme.json, so a new site changes its colours there and this follows.
 * The typeface (Inter), the buttons' shape and the headings' tight spacing
 * are in theme.json too.
 */

:root {
	--kit-radius: 16px;
	--kit-radius-small: 10px;
	--kit-shade: var(--wp--preset--color--ink);
	--kit-shadow: 0 2px 6px color-mix(in srgb, var(--kit-shade) 7%, transparent), 0 18px 42px color-mix(in srgb, var(--kit-shade) 14%, transparent);
	--kit-shadow-small: 0 1px 2px color-mix(in srgb, var(--kit-shade) 10%, transparent), 0 5px 14px color-mix(in srgb, var(--kit-shade) 10%, transparent);
	/* Under a solid button: tinted with the brand colour. */
	--kit-shadow-accent: 0 2px 4px color-mix(in srgb, var(--kit-shade) 14%, transparent), 0 10px 22px color-mix(in srgb, var(--wp--preset--color--accent) 32%, transparent);
}

/* ---------- Header: no bar ----------
   The page background shows through, slightly frosted so text scrolling
   underneath stays readable. */
.kit-mainbar {
	padding-top: 1.1rem;
	padding-bottom: 1.1rem;
	background: color-mix(in srgb, var(--wp--preset--color--paper) 88%, transparent);
	-webkit-backdrop-filter: saturate(1.5) blur(12px);
	backdrop-filter: saturate(1.5) blur(12px);
	color: var(--wp--preset--color--ink);
	border-bottom: 1px solid transparent;
	transition: padding 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
	isolation: isolate;
}
/* Once scrolled: white for the top half or so, so the logo still sits
   mostly on white, then a faint fade to a pale shade of the brand colour
   at the bottom, with a hairline and a soft shadow. It is only there to
   set the header apart from the page passing under it. (A layer that
   fades in, because a background gradient can't.) */
.kit-mainbar::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(to bottom, rgb(255 255 255 / 0.96) 55%, color-mix(in srgb, color-mix(in srgb, var(--wp--preset--color--accent) 14%, white) 96%, transparent));
	opacity: 0;
	transition: opacity 0.25s ease;
	pointer-events: none;
}
.is-scrolled .kit-mainbar::before {
	opacity: 1;
}
.is-scrolled .kit-mainbar {
	padding-top: 0.7rem;
	padding-bottom: 0.7rem;
	border-bottom-color: var(--wp--preset--color--line);
	box-shadow: 0 6px 18px color-mix(in srgb, var(--kit-shade) 6%, transparent);
}

/* A business with no logo: its name as a wordmark, the last word in the
   brand colour (kit_site_logo() in inc/business.php). */
.kit-wordmark {
	font-family: var(--wp--preset--font-family--sans);
	font-size: 2.75rem;
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.035em;
	color: var(--wp--preset--color--ink);
	text-decoration: none;
	white-space: nowrap;
	transition: font-size 0.25s ease;
}
.kit-wordmark span {
	color: var(--wp--preset--color--accent);
}
.is-scrolled .kit-wordmark {
	font-size: 2.125rem;
}
.kit-footer .kit-wordmark {
	font-size: 2.375rem;
	color: var(--wp--preset--color--white);
}
.kit-footer .kit-wordmark span {
	/* The brand colour, lightened to read on the dark footer. */
	color: color-mix(in srgb, var(--wp--preset--color--accent-light) 65%, white);
}

/* Menu: ordinary lettering, not small capitals. */
.kit-nav a {
	color: var(--wp--preset--color--body);
	font-size: 0.9375rem;
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
}
.kit-nav a:hover,
.kit-nav a:focus-visible {
	color: var(--wp--preset--color--accent);
	text-decoration: none;
}

/* The header's button: a solid one in the brand colour. It is the phone
   number, or "Contact us" for a business that would rather not be phoned
   ('header_button' in inc/settings.php). */
.kit-header-phone,
.kit-header-cta {
	margin: 0;
	white-space: nowrap;
}
.kit-header-phone a,
.kit-header-cta a {
	display: inline-block;
	padding: 0.6rem 1.15rem;
	border: 0;
	border-radius: var(--kit-radius-small);
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--white);
	font-size: 0.9375rem;
	font-weight: 600;
	letter-spacing: 0;
	text-decoration: none;
	box-shadow: 0 2px 4px color-mix(in srgb, var(--kit-shade) 14%, transparent), 0 8px 18px color-mix(in srgb, var(--wp--preset--color--accent) 28%, transparent);
	transition: background-color 0.2s ease;
}
.kit-header-phone a:hover,
.kit-header-phone a:focus-visible,
.kit-header-cta a:hover,
.kit-header-cta a:focus-visible {
	background: var(--wp--custom--accent-dark);
}
/* "Contact us" stands in for the menu's own "Contact" on laptops and up;
   phones and tablets keep "Contact" in the drop-down. */
@media (min-width: 1025px) {
	.kit-mainbar--contact .kit-nav li:has(> a[href="/contact-us/"]) {
		display: none;
	}
}

@media (max-width: 1024px) {
	.kit-header-cta {
		display: none;
	}
	.kit-mainbar,
	.is-scrolled .kit-mainbar {
		align-items: center;
		padding-top: 0.8rem;
		padding-bottom: 0.8rem;
	}
	.is-scrolled .kit-mainbar {
		padding-top: 0.5rem;
		padding-bottom: 0.5rem;
	}
	.kit-header-call,
	.kit-menu-toggle {
		align-items: center;
		padding: 0;
		color: var(--wp--preset--color--ink);
	}
	.kit-menu-toggle span {
		margin-bottom: 0;
	}
	.kit-header-call:hover,
	.kit-menu-toggle:hover {
		color: var(--wp--preset--color--accent);
	}
	/* The drop-down: a white panel under the header. */
	.kit-nav {
		margin-top: 1px;
		background: var(--wp--preset--color--white);
		border-bottom: 1px solid var(--wp--preset--color--line);
		box-shadow: 0 18px 30px color-mix(in srgb, var(--kit-shade) 10%, transparent);
	}
	.kit-nav li + li {
		border-top-color: var(--wp--preset--color--line);
	}
	.kit-nav a {
		color: var(--wp--preset--color--ink);
		font-weight: 500;
		letter-spacing: 0;
	}
	.kit-nav a:hover,
	.kit-nav a:focus-visible {
		color: var(--wp--preset--color--accent);
		text-decoration: none;
	}
}
@media (max-width: 781px) {
	.kit-wordmark {
		font-size: 2.25rem;
	}
	.is-scrolled .kit-wordmark {
		font-size: 1.875rem;
	}
}
@media (max-width: 380px) {
	.kit-wordmark {
		font-size: 2rem;
	}
}

/* ---------- The large homepage opening (kit_big_hero()) ---------- */
.kit-hero--big {
	padding-top: clamp(2rem, 5vw, 4.5rem) !important;
	padding-bottom: clamp(3rem, 7vw, 6rem) !important;
}
.kit-eyebrow {
	font-size: 0.8125rem;
	font-weight: 600;
}
.kit-hero-big-title.wp-block-heading {
	margin: 1.1rem 0 0;
	font-size: clamp(1.875rem, 1.25rem + 2.4vw, 2.75rem);
	line-height: 1.08;
	letter-spacing: -0.035em;
}
/* Page titles: modest (Dave, Oct 2026: a larger name, smaller headings). */
.kit-hero-title.wp-block-heading,
.wp-block-post-title.kit-hero-title {
	font-size: clamp(1.625rem, 1.25rem + 1.5vw, 2.125rem);
	line-height: 1.12;
}
.kit-faq-section h2 {
	font-size: 1.375rem;
}
.kit-hero-lead {
	max-width: 31em;
	margin-top: 1.5rem !important;
	font-size: clamp(1rem, 0.92rem + 0.35vw, 1.125rem);
	line-height: 1.6;
	color: var(--wp--preset--color--muted);
}
.kit-hero--big .wp-block-buttons {
	margin-top: 2rem !important;
}
/* Its photo: large, rounded, on a soft shadow; no frame. Landscape unless
   the page asks for the tall shape (most photos are landscape, and a tall
   crop loses their sides). */
.kit-photo {
	margin: 0;
}
.kit-photo img {
	display: block;
	width: 100%;
	height: auto; /* The photo carries its own size; the shape below wins. */
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 22px;
	box-shadow: 0 4px 10px color-mix(in srgb, var(--kit-shade) 10%, transparent), 0 28px 60px color-mix(in srgb, var(--kit-shade) 26%, transparent);
}
.kit-photo--tall img {
	aspect-ratio: 5 / 6;
}
@media (max-width: 781px) {
	.kit-photo img,
	.kit-photo--tall img {
		aspect-ratio: 4 / 3;
		border-radius: 18px;
	}
}

/* ---------- Buttons ----------
   Solid in the brand colour with a soft tinted shadow; the second kind is
   white with a fine line. Both change gently on hover (Heritage turns
   every button near-black, which is too heavy here). */
.wp-block-button__link,
.kit-enquiry__submit button {
	box-shadow: var(--kit-shadow-accent);
}
.kit-enquiry__submit button {
	padding: 0.9rem 1.5rem;
	border-radius: var(--kit-radius-small);
	font-size: 0.9375rem;
	font-weight: 600;
}
.wp-block-button.is-style-outline > .wp-block-button__link {
	padding: calc(0.9rem - 1px) calc(1.5rem - 1px);
	border: 1px solid var(--wp--preset--color--line);
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--ink);
	box-shadow: var(--kit-shadow-small);
}
.wp-block-button.is-style-outline > .wp-block-button__link:hover,
.wp-block-button.is-style-outline > .wp-block-button__link:focus-visible {
	background-color: var(--wp--preset--color--white) !important;
	color: var(--wp--preset--color--accent) !important;
	border-color: var(--wp--preset--color--accent) !important;
}
.kit-enquiry__submit button:hover,
.kit-enquiry__submit button:focus-visible {
	background-color: var(--wp--custom--accent-dark) !important;
	border-color: var(--wp--custom--accent-dark) !important;
}

/* ---------- Boxes, photos and maps: rounded, on soft shadows ---------- */
.kit-card {
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--kit-radius);
	box-shadow: var(--kit-shadow);
}
.kit-contact-form {
	border-top: 0;
	border-radius: var(--kit-radius);
	box-shadow: var(--kit-shadow);
}
.kit-soft-box,
.kit-callout,
.kit-diff-tile,
.kit-band .wp-block-column {
	border-radius: var(--kit-radius);
}
.kit-callout {
	border-left: 0;
}
.kit-framed {
	padding: 0;
	border: 0;
	background: none;
}
.kit-framed img,
.kit-map-embed {
	border-radius: var(--kit-radius);
	box-shadow: var(--kit-shadow);
}
.kit-map-embed {
	overflow: hidden;
}

/* Photo cards: white, rounded, the photo cut to the card's corners. */
.kit-service-card,
.kit-main-services .kit-service-card,
.kit-services-grid .kit-service-card {
	overflow: hidden;
	background: var(--wp--preset--color--white);
	border-color: var(--wp--preset--color--line);
	border-radius: var(--kit-radius);
	box-shadow: var(--kit-shadow);
}

/* Testimonials: pale rounded boxes, no coloured top edge. */
.kit-testimonials .wp-block-quote {
	background: var(--wp--preset--color--tint);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--kit-radius);
}

/* FAQs. */
.kit-faq {
	border-radius: var(--kit-radius-small);
}
.kit-faq summary {
	font-weight: 600;
}

/* Smaller headings in the boxes, to go with the smaller main text. */
.kit-contact-card h2,
.kit-contact-form h2 {
	font-size: clamp(1.1875rem, 1.05rem + 0.5vw, 1.375rem);
}
.kit-legal h2 {
	font-size: 1.25rem;
}
.kit-enquiry__field label {
	font-size: 0.875rem;
	color: var(--wp--preset--color--ink);
}
.kit-enquiry__privacy {
	font-size: 0.8125rem;
}

/* Form fields. (What's typed stays 16px, or iPhones zoom in on a tap.) */
.kit-enquiry__field input,
.kit-enquiry__field textarea,
.kit-enquiry__notice {
	border-radius: var(--kit-radius-small);
}

/* ---------- Closing section (class kit-closing) ----------
   A pale band, not a dark one: a heading, a line or two and a button on
   the left, the enquiry form in a white card on the right. (A page that
   still has Heritage's dark band, kit-final-cta, just gets rounder
   panels.) */
.kit-closing {
	padding-top: clamp(3.5rem, 8vw, 6rem) !important;
	padding-bottom: clamp(3.5rem, 8vw, 6rem) !important;
}
.kit-closing > .wp-block-columns {
	gap: clamp(2rem, 6vw, 5rem) !important;
}
.kit-closing .wp-block-column:first-child > h2 {
	font-size: clamp(1.375rem, 1.2rem + 0.8vw, 1.625rem);
	letter-spacing: -0.025em;
}
.kit-closing .wp-block-column:first-child > p {
	max-width: 28em;
}
.kit-closing .wp-block-buttons {
	margin-top: 1.75rem !important;
}
.kit-form-card {
	padding: clamp(1.5rem, 3vw, 2.25rem);
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 20px;
	box-shadow: var(--kit-shadow);
}
.kit-form-card > h2 {
	margin-top: 0;
	font-size: clamp(1.1875rem, 1.05rem + 0.5vw, 1.375rem);
}
.kit-form-card .kit-form-subline {
	margin-top: 0.4rem;
	font-size: 0.875rem;
	line-height: 1.5;
	color: var(--wp--preset--color--muted);
}
.kit-final-cta > .wp-block-columns > .wp-block-column {
	border-radius: var(--kit-radius);
}

/* ---------- Footer: smaller text ---------- */
.kit-footer__nav a {
	font-size: 0.875rem;
}
.kit-footer__phone {
	font-size: 1.0625rem;
}
.kit-footer__small {
	font-size: 0.8125rem;
}
@media (max-width: 781px) {
	.kit-footer__small {
		font-size: 0.75rem;
	}
}

/* ---------- Printing: no frosted layer ---------- */
@media print {
	.kit-mainbar {
		background: none;
	}
	.kit-mainbar::before {
		display: none;
	}
}