/*
 * A'besco 2026 redesign: only what block settings / theme.json cannot do.
 * Colours, fonts, spacing and radii come from theme.json presets.
 */

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

/* Parent theme adds a drop shadow to the sticky header; the design uses a hairline (set on the block). */
header.fixed_header {
	box-shadow: none;
	background: transparent;
}
.site-header .wp-block-site-logo img {
	max-height: 34px;
	width: auto;
}

/* Top-level nav items: soft pill on hover. */
.site-nav .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content,
.site-nav .wp-block-navigation__container > .wp-block-wb-megamenu > .wp-block-wb-megamenu__toggle {
	padding: 12px 11px;
	border-radius: 10px;
	white-space: nowrap;
	transition: background-color .2s;
}
.site-nav .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content:hover,
.site-nav .wp-block-navigation__container > .wp-block-wb-megamenu > .wp-block-wb-megamenu__toggle:hover {
	background-color: var(--wp--preset--color--mist);
}

/* Standard dropdown (Explore): rounded panel. */
.site-nav .wp-block-navigation__submenu-container {
	border: 1px solid var(--wp--preset--color--line) !important;
	border-radius: var(--wp--preset--border-radius--lg);
	box-shadow: var(--wp--preset--shadow--soft);
	padding: 10px !important;
	min-width: 200px !important;
	margin-top: 10px;
}
.site-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: 8px 10px !important;
	border-radius: 8px;
}
.site-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
	background-color: var(--wp--preset--color--mist);
	color: var(--wp--preset--color--secondary);
}

/* Mega menus: our panel (template part) carries the border, radius and shadow. */
.site-nav .wp-block-wb-megamenu__menu-container {
	box-shadow: none;
	background: transparent;
	overflow: visible;
	padding-top: 10px;
}
/* Products mega menu spans the page's content column: position it against the
   header row (1176px wide) instead of its menu item. Desktop only. */
@media (min-width: 600px) {
	.site-header > .wp-block-group { position: relative; }
	.site-nav,
	.site-nav .wp-block-navigation__responsive-container:not(.is-menu-open),
	.site-nav .wp-block-navigation__responsive-close,
	.site-nav .wp-block-navigation__responsive-dialog,
	.site-nav .wp-block-navigation__responsive-container-content,
	.site-nav .wp-block-navigation__container,
	.site-nav .wp-block-wb-megamenu.mega-products { position: static; }
	.site-nav .wp-block-wb-megamenu.mega-products > .wp-block-wb-megamenu__menu-container {
		left: 0 !important;
		right: 0 !important;
		width: 100% !important;
		max-width: none !important;
	}
}

.abesco-mega .wp-block-post-template { margin: 0; padding: 0; }
.abesco-mega a:hover { color: var(--wp--preset--color--secondary) !important; }
.abesco-mega .wp-block-term-template { margin: 0; padding: 0; }
/* Products menu: the Indoor / Outdoor / Architectural label row sits above the
   grid columns; once the grid stacks (mobile menu) the labels would all bunch
   up at the top, so drop them and let the category headings lead. */
@media (max-width: 599px) {
	.abesco-mega--products .abesco-mega__group { display: none; }
}
/* The mobile menu overlay right-aligns its contents; mega panels read left to right. */
.abesco-mega { text-align: left; }

@media (max-width: 640px) {
	.site-header .site-header__cta { display: none !important; }
}

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

.abesco-stars {
	color: #E0A526;
	letter-spacing: 1px;
}
.site-footer__nav .wp-block-navigation-item__content { padding: 0; }
@media (max-width: 640px) {
	.site-footer__rating { margin-left: 0 !important; }
}

/* ---------- Layout ---------- */

/* Parent theme sets :where(.alignfull){width:100%}, which cancels core's negative
   root-padding margins and leaves full-width sections short on the right. */
.has-global-padding > .alignfull { width: auto; }

/* ---------- Forms ---------- */

/* "I would like to enquire about: …" line (Gravity Forms HTML field). */
.abesco-about-line {
	margin: 0;
	padding: 12px 14px;
	border-radius: 10px;
	background: var(--wp--preset--color--mist);
	border: 1px solid var(--wp--preset--color--primary);
	color: var(--wp--preset--color--slate);
	font-size: 14px;
}
.abesco-about-line b { color: var(--wp--preset--color--contrast); font-weight: 600; }


/* ---------- Banners ---------- */

/* Heights follow the viewport the way the design does (not possible with the Cover block's single min-height unit). */
.wp-block-cover.abesco-hero { min-height: clamp(520px, calc(100svh - 96px), 920px) !important; }
.wp-block-cover.abesco-banner { min-height: clamp(440px, 46vw, 680px) !important; }
@media (max-width: 640px) {
	.wp-block-cover.abesco-hero { min-height: clamp(460px, 78svh, 720px) !important; }
}

/* ---------- Navigation focus ---------- */

/* No focus box after a mouse click; keyboard focus (focus-visible) keeps its ring. */
.site-nav :focus:not(:focus-visible) { outline: none; }

/* Parent theme gives every <button> a vertical margin; nav toggles must sit flush. */
.site-nav .wp-block-wb-megamenu__toggle,
.site-nav .wp-block-navigation__submenu-icon { margin: 0; }
.site-nav .wp-block-wb-megamenu__toggle-icon { margin-left: 6px; }
.site-nav .wp-block-navigation__container > .has-child > .wp-block-navigation-item__content { padding-right: 0; }
.site-nav .wp-block-navigation__container > .has-child > .wp-block-navigation__submenu-icon { margin: 0 11px 0 6px; }

/* Bottom/centre-left Cover content otherwise shrink-wraps, so the constrained
   layout can't line the text up with the page column. */
.wp-block-cover.abesco-hero.has-custom-content-position > .wp-block-cover__inner-container,
.wp-block-cover.abesco-banner.has-custom-content-position > .wp-block-cover__inner-container { width: 100% !important; }

/* Project tiles: let the bottom-left content span the card so the arrow sits right. */
.wp-block-cover.abesco-cover-full.has-custom-content-position > .wp-block-cover__inner-container { width: 100% !important; }

/* ---------- Typography ---------- */

/* Even line lengths on headings, as in the design. */
:where(h1, h2, h3, h4) { text-wrap: balance; }

/* Consultation banner (centre-left card over a photo): on smaller screens the
   photo sits on top and the card overlaps its lower edge, as in the design. */
@media (max-width: 960px) {
	.wp-block-cover.abesco-banner.is-position-center-left {
		flex-direction: column;
		align-items: stretch;
		padding: 0 !important;
		min-height: 0 !important;
	}
	.wp-block-cover.abesco-banner.is-position-center-left > .wp-block-cover__image-background {
		position: relative;
		height: clamp(260px, 50vw, 420px);
	}
	.wp-block-cover.abesco-banner.is-position-center-left > .wp-block-cover__background,
	.wp-block-cover.abesco-banner.is-position-center-left > .abesco-roller { display: none; }
	.wp-block-cover.abesco-banner.is-position-center-left > .wp-block-cover__inner-container {
		margin: -48px 12px 12px;
		width: auto !important;
	}
}

/* The mega menu script focuses the (non-interactive, tabindex -1) responsive
   container on hover, which drew a focus ring around the whole nav. */
.site-nav .wp-block-navigation__responsive-container:focus,
.site-nav .wp-block-navigation__responsive-close:focus,
.site-nav .wp-block-navigation__responsive-container-content:focus { outline: none; }

/* Open mega menu: chevron flips up, matching the core submenus. */
.site-nav .wp-block-wb-megamenu__toggle[aria-expanded="true"] .wp-block-wb-megamenu__toggle-icon { transform: rotate(180deg) !important; }

/* "The A'besco difference" bento: wider first column (Grid block columns are equal). */
@media (min-width: 961px) {
	#about .is-layout-grid { grid-template-columns: 1.15fr 1fr 1fr; }
}

/* Range archive cards: featured image fills the card. */
.wp-block-post-template .wp-block-post-featured-image { width: 100%; }

/* Hover bridges: dropdowns sit a little below their item; an invisible strip
   over the gap keeps the pointer "inside" the item so menus stay open. */
.site-nav .wp-block-navigation__submenu-container::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: -14px;
	height: 14px;
}
.site-nav .wp-block-wb-megamenu__menu-container::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: -14px;
	height: 14px;
}

/* ---------- Gravity Forms (all forms) ----------
   Set through Gravity Forms' own CSS variables (its theming API), so every form
   on the site matches the design. Colours come from the theme palette. */
body .gform_wrapper.gform-theme--orbital {
	--gf-ctrl-font-family: var(--wp--preset--font-family--inter) !important;
	--gf-ctrl-font-size: 15px !important;
	--gf-ctrl-line-height: 1.4 !important;
	--gf-ctrl-size: 57px !important;
	--gf-ctrl-size-xl: 57px !important;
	--gf-ctrl-size-lg: 57px !important;
	--gf-ctrl-padding-x: 14px !important;
	--gf-ctrl-radius: 10px !important;
	--gf-radius: 10px !important;
	--gf-ctrl-border-width: 1px !important;
	--gf-ctrl-border-color: var(--wp--preset--color--line) !important;
	--gf-ctrl-border-color-hover: var(--wp--preset--color--line) !important;
	--gf-ctrl-border-color-focus: var(--wp--preset--color--accent) !important;
	--gf-ctrl-bg-color: var(--wp--preset--color--tertiary) !important;
	--gf-ctrl-bg-color-hover: var(--wp--preset--color--tertiary) !important;
	--gf-ctrl-bg-color-focus: var(--wp--preset--color--base) !important;
	--gf-ctrl-shadow: none !important;
	--gf-ctrl-outline-color-focus: var(--wp--preset--color--primary) !important;
	--gf-ctrl-outline-width-focus: 4px !important;
	--gf-ctrl-outline-offset: 0px !important;
	--gf-ctrl-btn-font-family: var(--wp--preset--font-family--inter) !important;
	--gf-ctrl-btn-font-weight: 600 !important;
	--gf-ctrl-btn-font-size: 15px !important;
	--gf-ctrl-btn-size: 50px !important;
	--gf-ctrl-btn-size-xl: 50px !important;
	--gf-ctrl-btn-size-lg: 50px !important;
	--gf-ctrl-btn-font-size-xl: 15px !important;
	--gf-ctrl-btn-font-size-lg: 15px !important;
	--gf-ctrl-btn-radius: 12px !important;
	--gf-ctrl-textarea-radius: 10px !important;
	--gf-ctrl-textarea-height: 110px !important;
	--gf-ctrl-btn-shadow: none !important;
	--gf-ctrl-btn-shadow-hover: none !important;
	--gf-ctrl-btn-shadow-focus: none !important;
	--gf-ctrl-btn-bg-color-primary: var(--wp--preset--color--secondary) !important;
	--gf-ctrl-btn-bg-color-hover-primary: #3E564C !important;
	--gf-ctrl-btn-bg-color-focus-primary: #3E564C !important;
	/* Brand colours (beat colour settings saved on individual form embeds). */
	--gf-color-primary: #4F6B60 !important;
	--gf-color-primary-rgb: 79, 107, 96 !important;
	--gf-color-primary-contrast: #FFFFFF !important;
	--gf-color-primary-contrast-rgb: 255, 255, 255 !important;
	--gf-color-primary-darker: #3E564C !important;
	--gf-color-primary-lighter: #6E9497 !important;
	--gf-color-in-ctrl: #F4F1EA !important;
	--gf-color-in-ctrl-contrast: #202927 !important;
	--gf-color-out-ctrl-dark: #202927 !important;
	--gf-color-out-ctrl-dark-darker: #202927 !important;
	--gf-color-out-ctrl-dark-lighter: #5B6662 !important;
}

/* ---------- Tables (product specifications) ----------
   Font and text colour come from theme.json (styles.blocks.core/table). The
   Table block has no settings for a rounded card, row dividers or per-column
   styling, so those are here. Applies to every Table block on the site. */
.wp-block-table {
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--preset--border-radius--lg);
	background-color: var(--wp--preset--color--base);
	overflow-x: auto;
}
.wp-block-table table {
	width: 100%;
	margin: 0;
	border: 0;
	border-collapse: collapse;
}
.wp-block-table :is(td, th) {
	padding: 15px 22px;
	border: 0;
	border-bottom: 1px solid var(--wp--preset--color--line);
	text-align: left;
	vertical-align: top;
}
.wp-block-table tr:last-child > :is(td, th) { border-bottom: 0; }
.wp-block-table :is(thead, tfoot) { border: 0; }
.wp-block-table thead :is(td, th) {
	background-color: var(--wp--preset--color--mist);
	color: var(--wp--preset--color--secondary);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
}
/* First column is the label: quieter, so the values stand out. */
.wp-block-table tbody :is(td, th):first-child { color: var(--wp--preset--color--slate); }
.wp-block-table tbody :is(td, th) + :is(td, th) { font-weight: 500; }
/* Two-column spec tables: label column 40%. */
.wp-block-table:not(:has(:is(td, th):nth-child(3))) tbody :is(td, th):first-child { width: 40%; }
.wp-block-table tfoot :is(td, th) {
	border-top: 1px solid var(--wp--preset--color--line);
	border-bottom: 0;
	font-weight: 600;
}
/* "Stripes" style: a soft tint on alternate rows instead of dividers. */
.wp-block-table.is-style-stripes { border-bottom: 1px solid var(--wp--preset--color--line); }
.wp-block-table.is-style-stripes tbody tr:nth-child(odd) { background-color: var(--wp--preset--color--mist); }
.wp-block-table.is-style-stripes tbody :is(td, th) { border-bottom: 0; }
.wp-block-table figcaption,
.wp-block-table .wp-element-caption {
	margin: 0;
	padding: 12px 22px;
	border-top: 1px solid var(--wp--preset--color--line);
	color: var(--wp--preset--color--slate);
	font-size: 13px;
	text-align: left;
}
@media (max-width: 650px) {
	/* Two-column spec tables become a list: label above value. */
	.wp-block-table:not(:has(:is(td, th):nth-child(3))) :is(table, thead, tbody, tfoot, tr, td, th) { display: block; width: auto !important; }
	.wp-block-table:not(:has(:is(td, th):nth-child(3))) tr {
		padding: 13px 18px;
		border-bottom: 1px solid var(--wp--preset--color--line);
	}
	.wp-block-table:not(:has(:is(td, th):nth-child(3))) tr:last-child { border-bottom: 0; }
	.wp-block-table:not(:has(:is(td, th):nth-child(3))) :is(td, th) { padding: 0; border: 0; }
	.wp-block-table:not(:has(:is(td, th):nth-child(3))) tbody :is(td, th):first-child { margin-bottom: 2px; font-size: 13px; }
	.wp-block-table.is-style-stripes tr { border-bottom: 0; }
	/* Wider tables keep their columns and scroll sideways inside the card. */
	.wp-block-table:has(:is(td, th):nth-child(3)) table { min-width: 560px; }
	.wp-block-table :is(td, th) { padding: 12px 16px; }
}

/* Survey add-on likert scales: its grey row stripes become the brand mist tint
   (!important: the add-on's mobile CSS re-applies the grey at higher specificity),
   and the selected answer gets a stronger tint. */
body .gform_wrapper.gform-theme--orbital .gsurvey-likert tr,
body .gform_wrapper.gform-theme--orbital .gsurvey-likert td { background-color: transparent !important; }
body .gform_wrapper.gform-theme--orbital .gsurvey-likert tbody tr:nth-child(odd) { background-color: var(--wp--preset--color--mist) !important; }
body .gform_wrapper.gform-theme--orbital .gsurvey-likert td.gsurvey-likert-selected { background-color: var(--wp--preset--color--accent-light) !important; }

/* ---------- Team members (wb/teamblock) ----------
   The team block is a theme extension with fixed markup (no block styles), so
   its card and bio pop-up are styled here. */
.team-member.wp-block-wb-teamblock { text-align: left; }
.team-member .team-image-wrapper {
	border-radius: 16px;
	background-color: var(--wp--preset--color--mist);
}
.team-member .team-image-wrapper:after { padding-bottom: 118%; }
.team-member img.team-image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .5s ease;
}
.team-member:hover > .team-image-wrapper img.team-image { transform: scale(1.03); }
.team-member > .team-title {
	margin-top: 16px;
	font-size: var(--wp--preset--font-size--large);
	text-align: left;
}
.team-member > .team-subtitle {
	flex-grow: 0;
	margin: 6px 0 0;
	color: var(--wp--preset--color--slate);
	font-family: var(--wp--preset--font-family--inter);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .1em;
	text-align: left;
}
.team-member > .team-readmore {
	margin-top: 10px;
	color: var(--wp--preset--color--secondary);
	font-family: var(--wp--preset--font-family--inter);
	font-size: 14px;
	font-weight: 600;
	text-align: left;
	text-transform: none;
}
/* "CLICK FOR MORE" (block content) reads as "Read bio →". */
.team-member > .team-readmore { font-size: 0; }
.team-member > .team-readmore::after { content: "Read bio \2192"; font-size: 14px; }
/* Members without a bio have nothing to open. */
.team-member:not(:has(.team-popup)) { cursor: default; }
.team-member:not(:has(.team-popup)) > .team-readmore { display: none; }

/* Bio pop-up */
.team-popup { background-color: rgba(32, 41, 39, .55); }
.team-popup__inner {
	width: min(760px, 92vw);
	padding: clamp(24px, 4vw, 40px);
	border-radius: 20px;
	box-shadow: var(--wp--preset--shadow--soft);
}
.team-popup-header {
	align-items: center;
	gap: 20px;
	border-bottom: 1px solid var(--wp--preset--color--line);
}
.team-popup-header .team-image-wrapper { width: 120px; margin: 0; flex-shrink: 0; }
.team-popup-header .team-image-wrapper:after { padding-bottom: 100%; }
.team-popup-header .team-title { margin: 0; font-size: var(--wp--preset--font-size--x-large); }
.team-popup-header .team-subtitle {
	margin: 6px 0 0;
	color: var(--wp--preset--color--slate);
	font-family: var(--wp--preset--font-family--inter);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	text-align: left;
}
.team-popup-content p { color: var(--wp--preset--color--slate); line-height: 1.65; }

/* "I would like to enquire about…" line is emptied on pages without a product
   context; drop its empty grid slot so the form has no gap. */
.gform_wrapper .gfield.abesco-enquiry-about:not(:has(*)) { display: none; }

/* ---------- Projects (templates/single-wb-projects.html) ----------
   Project content is legacy editor content (story + facts columns, galleries),
   so its layout is styled here rather than re-saving every block. */
.abesco-project-hero { min-height: clamp(440px, 62vh, 660px) !important; }

/* Story and facts: wider story column, facts as a soft card that stays in view. */
.abesco-project-body > .wp-block-columns:first-child {
	align-items: flex-start;
	gap: clamp(32px, 6vw, 80px);
	margin-bottom: var(--wp--preset--spacing--60);
}
.abesco-project-body > .wp-block-columns:first-child > .wp-block-column:first-child {
	flex: 1 1 60%;
	color: var(--wp--preset--color--slate);
	font-size: 1.0625rem;
	line-height: 1.7;
}
.abesco-project-body > .wp-block-columns:first-child > .wp-block-column:first-child > p:first-child {
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.4;
}
.abesco-project-body > .wp-block-columns:first-child > .wp-block-column:last-child:not(:first-child):has(> p br) {
	flex: 0 0 34%;
	align-self: flex-start; /* core forces align-items: normal !important on Columns */
	padding: 28px;
	border-radius: 16px;
	background-color: var(--wp--preset--color--mist);
}
@media (min-width: 782px) {
	.abesco-project-body > .wp-block-columns:first-child > .wp-block-column:last-child:not(:first-child):has(> p br) {
		position: sticky;
		top: 100px;
	}
}
/* Older projects open the story with a heading. */
.abesco-project-body > .wp-block-columns:first-child > .wp-block-column:first-child > h2:first-child {
	margin-bottom: 18px;
	font-size: var(--wp--preset--font-size--x-large);
}
/* Each fact is "LABEL<br>Value": the first line becomes the small label. */
.abesco-project-body > .wp-block-columns:first-child > .wp-block-column:last-child:not(:first-child):has(> p br) > p {
	margin: 0;
	padding: 14px 0;
	border-bottom: 1px solid var(--wp--preset--color--line);
	color: var(--wp--preset--color--contrast);
	font-weight: 500;
	line-height: 1.5;
}
.abesco-project-body > .wp-block-columns:first-child > .wp-block-column:last-child:not(:first-child):has(> p br) > p:first-child { padding-top: 0; }
.abesco-project-body > .wp-block-columns:first-child > .wp-block-column:last-child:not(:first-child):has(> p br) > p:last-child { padding-bottom: 0; border-bottom: 0; }
.abesco-project-body > .wp-block-columns:first-child > .wp-block-column:last-child:not(:first-child):has(> p br) > p::first-line {
	color: var(--wp--preset--color--slate);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
}

/* Video and galleries: rounded, evenly spaced. */
.abesco-project-body > .wp-block-embed { margin-block: 0 16px; }
.abesco-project-body > .wp-block-embed .wp-block-embed__wrapper { border-radius: 20px; overflow: hidden; }
.abesco-project-body > .wp-block-gallery {
	--wp--style--unstable-gallery-gap: 16px;
	gap: 16px;
	margin-block: 0 16px !important;
}
.abesco-project-body .wp-block-gallery figure.wp-block-image { border-radius: 16px; overflow: hidden; }
/* "Project tags: …" captions become a small label on the photo. */
.abesco-project-body .wp-block-gallery.has-nested-images figure.wp-block-image figcaption {
	left: 12px;
	right: auto;
	bottom: 12px;
	width: auto;
	max-width: calc(100% - 24px);
	padding: 6px 10px;
	border-radius: 10px;
	background: rgba(255, 255, 255, .9);
	color: var(--wp--preset--color--slate);
	font-size: 12px;
	line-height: 1.3;
	text-align: left;
}
.abesco-project-body .wp-block-gallery.has-nested-images figure.wp-block-image figcaption a { color: var(--wp--preset--color--secondary); font-weight: 600; }