/*
 * Energin — component styles.
 *
 * theme.json owns colour, type, spacing and block defaults.
 * This file only holds rules theme.json genuinely cannot express:
 * flex behaviour, pseudo-elements, icons, and responsive collapse.
 */

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

.energin-header {
	z-index: 100;
	box-shadow: inset 0 -1px 0 0 var(--wp--preset--color--bg-2);
}

.energin-header .wp-block-navigation {
	font-family: var(--wp--preset--font-family--display);
}

.energin-header .wp-block-navigation .wp-block-navigation-item__content {
	text-decoration: none;
}

.energin-header .wp-block-navigation .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--success);
}

/* Dropdown panel — matches the Figma "dropdown" frame: 220px, 20px radius. */
.energin-header .wp-block-navigation__submenu-container {
	min-width: 220px;
	padding: var(--wp--preset--spacing--20) 0;
	border: 1px solid var(--wp--preset--color--stroke);
	border-radius: var(--wp--custom--radius--md);
	background-color: var(--wp--preset--color--bg-1);
	box-shadow: 0 4px 16px 0 rgba(62, 75, 96, 0.08);
}

.energin-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: 10px var(--wp--preset--spacing--30);
	font-size: var(--wp--preset--font-size--small);
}

/* Search pill — 44px tall, 20px radius, BG2 hairline. */
.energin-search .wp-block-search__inside-wrapper {
	height: 44px;
	padding: 0 4px 0 12px;
	border: 1px solid var(--wp--preset--color--bg-2);
	border-radius: var(--wp--custom--radius--lg);
	background-color: var(--wp--preset--color--bg-1);
}

.energin-search .wp-block-search__input {
	border: 0;
	background: transparent;
	color: var(--wp--preset--color--navy);
	font-size: var(--wp--preset--font-size--small);
}

.energin-search .wp-block-search__input::placeholder {
	color: var(--wp--preset--color--blue-grey);
}

.energin-search .wp-block-search__button {
	padding: 0 8px;
	border: 0;
	background: transparent;
	color: var(--wp--preset--color--navy);
}

/* Phone pill in the header — 44px tall with a leading phone icon. */
.energin-phone-button .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	height: 44px;
	padding: 0 16px;
	font-size: var(--wp--preset--font-size--base);
}

.energin-phone-button .wp-block-button__link::before {
	content: "";
	flex: 0 0 16px;
	width: 16px;
	height: 16px;
	background-color: currentColor;
	mask: url("../images/icon-phone.svg") no-repeat center / contain;
	-webkit-mask: url("../images/icon-phone.svg") no-repeat center / contain;
}

/* ---------------------------------------------------------------
   Eyebrow — 24x2px yellow rule then uppercase label
   --------------------------------------------------------------- */

.energin-eyebrow {
	display: flex;
	align-items: center;
	gap: 8px;
}

.energin-eyebrow::before {
	content: "";
	flex: 0 0 24px;
	width: 24px;
	height: 2px;
	background-color: var(--wp--preset--color--yellow);
}

.has-text-align-center.energin-eyebrow {
	justify-content: center;
}

/* ---------------------------------------------------------------
   Cards
   --------------------------------------------------------------- */

.energin-card {
	height: 100%;
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.energin-card:hover {
	box-shadow: var(--wp--preset--shadow--card-hover);
}

/* Icon tile — 56px square, centred 28px glyph. */
.energin-card__icon {
	display: flex;
	flex: 0 0 56px;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
}

.energin-card__icon .wp-block-image,
.energin-card__icon figure {
	margin: 0;
	line-height: 0;
}

.energin-card__icon img {
	display: block;
	width: 28px;
	height: 28px;
}

.energin-card--stacked {
	display: flex;
	flex-direction: column;
}

.energin-card--stacked .wp-block-post-title {
	margin-block-start: 0;
}

/* Equal-height cards inside a columns row. */
.wp-block-columns .wp-block-column > .energin-card {
	height: 100%;
}

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

.energin-footer__col {
	width: 200px;
}

.energin-footer__links {
	margin: 0;
	padding: 0;
	list-style: none;
}

.energin-footer__links li + li {
	margin-top: 8px;
}

.energin-footer__links a,
.energin-footer__contact-item a {
	text-decoration: none;
}

.energin-footer__links a:hover,
.energin-footer__contact-item a:hover {
	color: var(--wp--preset--color--success);
	text-decoration: underline;
}

.energin-footer__contact-item {
	display: flex;
	align-items: center;
	gap: 12px;
}

.energin-footer__contact-item::before {
	content: "";
	flex: 0 0 16px;
	width: 16px;
	height: 16px;
	background-color: var(--wp--preset--color--success);
}

.energin-footer__contact-item--phone::before {
	mask: url("../images/icon-phone.svg") no-repeat center / contain;
	-webkit-mask: url("../images/icon-phone.svg") no-repeat center / contain;
}

.energin-footer__contact-item--mail::before {
	mask: url("../images/icon-mail.svg") no-repeat center / contain;
	-webkit-mask: url("../images/icon-mail.svg") no-repeat center / contain;
}

/* Vertical hairline between the accreditation logo and its caption. */
.energin-footer__accreditation {
	max-width: 460px;
}

.energin-footer__accreditation-text {
	padding-left: var(--wp--preset--spacing--40);
	border-left: 1px solid var(--wp--preset--color--stroke);
	max-width: 201px;
}

.energin-footer__accreditation .wp-block-image {
	margin: 0;
}

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

.energin-hero .wp-block-cover__inner-container {
	width: 100%;
}

/* Wide primary CTA — 260px fixed in the comp. */
.energin-button--wide .wp-block-button__link {
	min-width: 260px;
	min-height: 48px;
	padding: 12px 32px;
	justify-content: center;
	display: inline-flex;
	align-items: center;
}

/* 44px pill used for section-level buttons (View more). */
.energin-button--tall .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 10px 32px;
}

/* Underlined bold text CTA — the hero secondary action and card links. */
.energin-text-cta {
	margin: 0;
}

.energin-text-cta a {
	color: inherit;
	text-decoration: underline;
	text-underline-position: from-font;
}

.energin-text-cta a:hover {
	color: var(--wp--preset--color--success);
}

.energin-text-cta--arrow a::after {
	content: "";
	display: inline-block;
	width: 16px;
	height: 16px;
	margin-left: 8px;
	vertical-align: -2px;
	background-color: currentColor;
	mask: url("../images/icon-arrow-right.svg") no-repeat center / contain;
	-webkit-mask: url("../images/icon-arrow-right.svg") no-repeat center / contain;
}

.energin-cta-row {
	align-items: center;
}

/* ---------------------------------------------------------------
   Decorative brand marks
   The Figma comps drop an Energin iconography glyph into the corner
   of several sections. Purely decorative, so kept out of the markup.
   --------------------------------------------------------------- */

.energin-brandmark {
	position: relative;
}

.energin-brandmark::after {
	content: "";
	position: absolute;
	width: 80px;
	height: 72px;
	background: url("../images/brandmark.svg") no-repeat center / contain;
	pointer-events: none;
}

.energin-brandmark--bottom-right::after {
	right: 0;
	bottom: 0;
}

.energin-brandmark--bottom-left::after {
	left: 0;
	bottom: 0;
}

/* ---------------------------------------------------------------
   Split sections
   --------------------------------------------------------------- */

.energin-feature-image img {
	width: 100%;
	height: 417px;
	object-fit: cover;
}

.energin-stats > .wp-block-group {
	flex: 0 0 auto;
}

.energin-stats p {
	margin: 0;
}

/* ---------------------------------------------------------------
   Testimonial slider dots
   --------------------------------------------------------------- */

.energin-dots {
	display: flex;
	justify-content: center;
	gap: 8px;
}

.energin-dots__dot {
	width: 16px;
	height: 16px;
	padding: 0;
	border: 1px solid var(--wp--preset--color--blue-grey);
	border-radius: 50%;
	background-color: transparent;
	cursor: pointer;
}

.energin-dots__dot.is-active {
	border-color: var(--wp--preset--color--navy);
	background-color: var(--wp--preset--color--navy);
}

/* ---------------------------------------------------------------
   Case study cards
   --------------------------------------------------------------- */

.energin-case-card {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	height: 100%;
}

.energin-case-card__logo {
	height: 60px;
}

.energin-case-card__logo .wp-block-image,
.energin-case-card__logo figure {
	margin: 0;
}

.energin-case-card .energin-text-cta {
	padding-top: var(--wp--preset--spacing--40);
	margin-top: auto;
}

/* ---------------------------------------------------------------
   Logo strip
   --------------------------------------------------------------- */

.energin-logo-strip__row .wp-block-image,
.energin-logo-strip__row figure {
	margin: 0;
}

/* ---------------------------------------------------------------
   Inner pages
   --------------------------------------------------------------- */

/* Inner pages run on a 1120px measure, not the 1280px homepage grid. */
.energin-section--inner > .wp-block-group,
.energin-section--inner > .wp-block-columns {
	max-width: var(--wp--custom--narrow-width);
	margin-left: auto;
	margin-right: auto;
}

.energin-page-hero .wp-block-cover__inner-container {
	width: 100%;
}

.energin-breadcrumbs p {
	margin: 0;
}

.energin-breadcrumbs a {
	color: inherit;
	text-decoration: none;
}

.energin-breadcrumbs a:hover {
	color: var(--wp--preset--color--success);
	text-decoration: underline;
}

/* 24x4px yellow accent rule — note this is 4px, where section eyebrows use 2px. */
.energin-accent-rule.wp-block-separator {
	width: 24px;
	height: 4px;
	margin: 0;
	border: 0;
	border-radius: 0;
	background-color: var(--wp--preset--color--yellow);
	opacity: 1;
}

.energin-intro-image img {
	width: 100%;
	height: 360px;
	object-fit: cover;
}

/* Tall service card — icon above title, link pinned to the bottom. */
.energin-service-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.03);
}

.energin-service-card .energin-text-cta {
	padding-top: var(--wp--preset--spacing--20);
	margin-top: auto;
}

.energin-service-card .wp-block-heading {
	margin-block-start: 0;
}

/* Raised CTA button in the closing band. */
.energin-button--raised .wp-block-button__link {
	filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.2));
}

.energin-brandmark-band .wp-block-image,
.energin-brandmark-band figure {
	margin: 0;
}

.energin-prose .wp-block-group + .wp-block-group {
	margin-top: 0;
}

/* ---------------------------------------------------------------
   Core values list
   --------------------------------------------------------------- */

.energin-value {
	align-items: flex-start;
	gap: var(--wp--preset--spacing--30);
	flex-wrap: nowrap;
}

/* 40px glyph centred in a 64px box, as in the comp. */
.energin-value__glyph {
	display: flex;
	flex: 0 0 64px;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	margin: 0;
}

.energin-value__glyph img {
	display: block;
	width: 40px;
	height: 40px;
	object-fit: contain;
}

.energin-value .wp-block-heading {
	margin-block-start: 0;
}

.energin-values-card {
	box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.03);
}

/* ---------------------------------------------------------------
   Team cards
   --------------------------------------------------------------- */

.energin-team-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	height: 100%;
	max-width: 340px;
	margin-inline: auto;
	box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.03);
}

.energin-team-card__portrait {
	margin: 0;
}

.energin-team-card__portrait img {
	display: block;
	width: 220px;
	height: 220px;
	object-fit: cover;
}

.energin-team-card p {
	margin: 0;
}

.energin-team-card__rule.wp-block-separator {
	width: 100%;
	height: 1px;
	margin: 0;
	border: 0;
	opacity: 1;
}

.energin-team-card__links {
	gap: 20px;
}

/* ---------------------------------------------------------------
   Partner logo rows
   --------------------------------------------------------------- */

.energin-partner-row {
	row-gap: var(--wp--preset--spacing--50);
}

.energin-partner-row .wp-block-image,
.energin-partner-row figure {
	margin: 0;
}

/* ---------------------------------------------------------------
   Post / case study list rows
   --------------------------------------------------------------- */

.energin-post-row {
	align-items: flex-start;
	flex-wrap: nowrap;
}

.energin-post-row__image {
	flex: 0 0 321px;
	margin: 0;
}

.energin-post-row__image img {
	display: block;
	width: 321px;
	height: 260px;
	object-fit: cover;
}

.energin-post-row__body {
	flex: 1 1 auto;
	min-width: 0;
}

.energin-post-row__body .wp-block-post-title {
	margin-block-start: 0;
}

.energin-post-row__body .wp-block-post-title a {
	text-decoration: none;
	color: inherit;
}

.energin-post-row__body .wp-block-post-title a:hover {
	color: var(--wp--preset--color--success);
}

.energin-post-meta {
	gap: var(--wp--preset--spacing--40);
}

.energin-post-meta p,
.energin-post-meta .wp-block-post-author-name,
.energin-post-meta .wp-block-post-date {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	line-height: 24px;
}

/* Category tags — cream chips. */
.energin-tags .wp-block-post-terms__separator {
	display: none;
}

.energin-tags a {
	display: inline-block;
	height: 24px;
	margin-right: 10px;
	padding: 1px 8px;
	border-radius: 8px;
	background-color: var(--wp--preset--color--bg-2);
	color: var(--wp--preset--color--navy);
	font-size: var(--wp--preset--font-size--small);
	line-height: 20px;
	text-decoration: none;
}

.energin-tags a:hover {
	background-color: var(--wp--preset--color--pale-blue);
}

.energin-post-row .wp-block-post-excerpt__more-link {
	display: inline-block;
	margin-top: var(--wp--preset--spacing--20);
	color: var(--wp--preset--color--navy);
	font-weight: 700;
	text-decoration: underline;
}

/* Pagination */
.energin-pagination {
	margin-top: var(--wp--preset--spacing--60);
	gap: 8px;
}

.energin-pagination a,
.energin-pagination span {
	padding: 4px 10px;
	border-radius: 8px;
	color: var(--wp--preset--color--navy);
	font-size: var(--wp--preset--font-size--small);
	text-decoration: none;
}

.energin-pagination .current {
	background-color: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--bg-1);
}

/* Filter chips on the case study index */
.energin-filter-chip {
	margin: 0;
}

.energin-filter-chip a {
	display: inline-block;
	padding: 6px 16px;
	border: 1px solid var(--wp--preset--color--stroke);
	border-radius: var(--wp--custom--radius--pill);
	color: var(--wp--preset--color--navy);
	text-decoration: none;
}

.energin-filter-chip.is-active a,
.energin-filter-chip a:hover {
	border-color: var(--wp--preset--color--navy);
	background-color: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--bg-1);
}

/* ---------------------------------------------------------------
   Newsletter, author box, contact, reports
   --------------------------------------------------------------- */

/* Teal eyebrow rule variant used by the newsletter block. */
.energin-eyebrow--teal::before {
	background-color: var(--wp--preset--color--success);
}

.energin-author-card {
	max-width: 500px;
	margin-inline: auto;
}

.energin-author-card__portrait {
	flex: 0 0 119px;
	margin: 0;
}

.energin-author-card__portrait img {
	display: block;
	width: 119px;
	height: 120px;
	object-fit: cover;
}

.energin-author-card__body {
	flex: 1 1 auto;
	min-width: 0;
}

.energin-author-card__body p {
	margin: 0;
}

.energin-author-card__links {
	gap: 20px;
}

/* Small 28px pill button. */
.energin-button--small .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 120px;
	min-height: 28px;
	padding: 2px 16px;
	border-radius: var(--wp--custom--radius--md);
	line-height: 24px;
}

.energin-contact-card {
	align-items: flex-start;
	box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.03);
}

.energin-contact-card .wp-block-heading {
	margin-block-start: 0;
}

.energin-map {
	display: block;
	width: 100%;
	height: 360px;
	border: 0;
	border-radius: var(--wp--custom--radius--md);
}

.energin-report-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	height: 100%;
	max-width: 340px;
	margin-inline: auto;
	box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.03);
}

.energin-report-card__thumb {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 120px;
}

.energin-report-card__thumb .wp-block-image,
.energin-report-card__thumb figure {
	margin: 0;
}

.energin-report-card__thumb img {
	display: block;
	width: 36px;
	height: 36px;
}

.energin-report-card .wp-block-heading {
	margin-block-start: 0;
}

/* Light form variant — used on cream/white backgrounds. */
.energin-form-shell--light label,
.energin-form-shell--light .gfield_label {
	color: var(--wp--preset--color--navy);
}

.energin-form-shell--light input[type="submit"],
.energin-form-shell--light button[type="submit"] {
	background-color: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--bg-1);
}

.energin-form-shell--light input[type="submit"]:hover,
.energin-form-shell--light button[type="submit"]:hover {
	background-color: var(--wp--preset--color--success);
}

.energin-form-shell--light input[type="checkbox"] {
	border: 1px solid var(--wp--preset--color--stroke);
}

/* ---------------------------------------------------------------
   Form shell — styles whichever form plugin gets dropped in
   --------------------------------------------------------------- */

.energin-form-shell input[type="text"],
.energin-form-shell input[type="email"],
.energin-form-shell input[type="tel"],
.energin-form-shell input[type="url"],
.energin-form-shell input[type="number"],
.energin-form-shell select,
.energin-form-shell textarea {
	width: 100%;
	min-height: 48px;
	padding: 12px 16px;
	border: 1px solid var(--wp--preset--color--pale-blue);
	border-radius: var(--wp--custom--radius--input);
	background-color: var(--wp--preset--color--bg-1);
	color: var(--wp--preset--color--navy);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
}

.energin-form-shell label {
	display: block;
	margin-bottom: 8px;
	color: var(--wp--preset--color--pale-blue);
	font-size: var(--wp--preset--font-size--base);
	font-weight: 700;
}

.energin-form-shell input[type="submit"],
.energin-form-shell button[type="submit"] {
	min-width: 300px;
	min-height: 48px;
	padding: 0 48px;
	border: 0;
	border-radius: var(--wp--custom--radius--lg);
	background-color: var(--wp--preset--color--yellow);
	color: var(--wp--preset--color--navy);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 700;
	cursor: pointer;
}

.energin-form-shell input[type="submit"]:hover,
.energin-form-shell button[type="submit"]:hover {
	background-color: var(--wp--preset--color--bg-1);
}

.energin-form-shell input[type="checkbox"] {
	appearance: none;
	-webkit-appearance: none;
	flex: 0 0 20px;
	width: 20px;
	height: 20px;
	margin: 0;
	border: 0;
	border-radius: var(--wp--custom--radius--sm);
	background-color: var(--wp--preset--color--bg-1);
	cursor: pointer;
}

.energin-form-shell input[type="checkbox"]:checked {
	background-image: url("../images/icon-check.svg");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 14px 14px;
}

.energin-form-shell input[type="checkbox"] + label,
.energin-form-shell .gfield_consent_label {
	display: inline;
	margin-bottom: 0;
	font-weight: 400;
	line-height: 1.5;
}

/* ---------------------------------------------------------------
   Responsive
   The Figma file is desktop-only (1440px). Everything below this
   line is an engineering decision, not a design decision.
   --------------------------------------------------------------- */

@media (max-width: 1279px) {
	.energin-footer__accreditation {
		margin-top: var(--wp--preset--spacing--60);
	}
}

@media (max-width: 991px) {
	:root {
		--wp--custom--gutter: 40px;
	}

	.energin-header .wp-block-navigation__responsive-container-content {
		gap: var(--wp--preset--spacing--30);
	}

	.energin-search,
	.energin-phone-button {
		display: none;
	}

	.energin-hero {
		min-height: 480px !important;
	}
}

@media (max-width: 767px) {
	:root {
		--wp--custom--gutter: 24px;
	}

	.energin-section {
		padding-top: var(--wp--preset--spacing--60) !important;
		padding-bottom: var(--wp--preset--spacing--60) !important;
	}

	.energin-card {
		flex-direction: column;
	}

	.energin-footer__col {
		width: 100%;
	}

	.energin-footer__accreditation {
		flex-direction: column;
		align-items: flex-start;
	}

	.energin-footer__accreditation-text {
		padding-left: 0;
		border-left: 0;
		max-width: none;
	}

	.energin-footer__bottom {
		gap: var(--wp--preset--spacing--40);
	}

	.energin-brandmark::after {
		display: none;
	}

	.energin-feature-image img {
		height: auto;
	}

	.energin-button--wide .wp-block-button__link,
	.energin-form-shell input[type="submit"],
	.energin-form-shell button[type="submit"] {
		min-width: 0;
		width: 100%;
	}

	.energin-logo-strip__row {
		justify-content: center;
		gap: var(--wp--preset--spacing--40);
	}

	.energin-intro-image img {
		height: auto;
	}

	.energin-brandmark-band {
		display: none;
	}

	.energin-value {
		flex-direction: column;
		gap: var(--wp--preset--spacing--20);
	}

	.energin-value__glyph {
		flex-basis: auto;
		justify-content: flex-start;
		width: 40px;
		height: 40px;
	}

	.energin-partner-row {
		justify-content: center;
		gap: var(--wp--preset--spacing--40);
	}

	.energin-post-row {
		flex-direction: column;
	}

	.energin-post-row__image,
	.energin-post-row__image img {
		width: 100%;
		flex-basis: auto;
	}

	.energin-post-row__image img {
		height: 220px;
	}

	.energin-author-card {
		flex-direction: column;
		text-align: center;
	}

	.energin-contact-card {
		flex-direction: column;
	}

	.energin-map {
		height: 260px;
	}
}