/*
Theme Name:   Energe Hello Child
Theme URI:    https://energeusa.com/
Description:  Global presentation for the Energe Process Serving public site: header, footer, navigation, brand tokens, focus styles and responsive base. Page content is built and edited in Elementor (free); applications and portals come from the ELSS plugin.
Author:       Energe
Template:     hello-elementor
Version:      1.0.0
Requires at least: 6.5
Requires PHP: 8.1
License:      GNU General Public License v3 or later
Text Domain:  energe-hello-child
*/

/* ---------- Brand tokens (the green is provisional until the verified brand value is supplied) ---------- */
:root {
	--energe-green: #117a3e;
	--energe-green-dark: #0b5a2d;
	--energe-green-tint: #e7f3ec;
	--energe-black: #0b0b0c;
	--energe-charcoal: #1f2328;
	--energe-muted: #4b5563;
	--energe-gray: #f3f5f4;
	--energe-line: #d5dbd8;
	--energe-white: #ffffff;
	--energe-focus: #f2b705;
	--energe-radius: 10px;
	--energe-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

html { -webkit-text-size-adjust: 100%; }
body.energe-site {
	font-family: var(--energe-font);
	color: var(--energe-charcoal);
	background: var(--energe-white);
	font-size: 17px;
	line-height: 1.6;
	overflow-x: hidden;
}
body.energe-site h1, body.energe-site h2, body.energe-site h3, body.energe-site h4 { color: var(--energe-black); line-height: 1.2; }
body.energe-site a { color: var(--energe-green); }
body.energe-site a:hover { color: var(--energe-green-dark); }
body.energe-site img { max-width: 100%; height: auto; }

/* ---------- Focus: always visible, never colour-only ---------- */
body.energe-site a:focus-visible,
body.energe-site button:focus-visible,
body.energe-site input:focus-visible,
body.energe-site select:focus-visible,
body.energe-site textarea:focus-visible,
body.energe-site summary:focus-visible,
body.energe-site [tabindex]:focus-visible,
body.energe-site .elementor-button:focus-visible {
	outline: 3px solid var(--energe-focus) !important;
	outline-offset: 2px !important;
	box-shadow: 0 0 0 5px var(--energe-black) !important;
	border-radius: 4px;
}
.skip-link.screen-reader-text:focus {
	clip: auto !important; clip-path: none; height: auto; width: auto;
	position: fixed; top: 8px; left: 8px; z-index: 100000;
	background: var(--energe-black); color: #fff; padding: 12px 18px; border-radius: 6px; font-weight: 700;
}

/* ---------- Buttons (shared by header buttons and ELSS portal) ---------- */
body.energe-site .energe-cta-menu a,
.energe-btn {
	display: inline-flex; align-items: center; justify-content: center;
	min-height: 44px; padding: 10px 18px; border-radius: 8px;
	font-weight: 700; letter-spacing: .02em; text-decoration: none; white-space: nowrap;
	border: 2px solid var(--energe-green); color: var(--energe-green); background: #fff;
}
body.energe-site .energe-cta-menu a:hover { background: var(--energe-green-tint); color: var(--energe-green-dark); }
body.energe-site .energe-cta-menu .is-primary a,
.energe-btn--primary { background: var(--energe-green); color: #fff; }
body.energe-site .energe-cta-menu .is-primary a:hover { background: var(--energe-green-dark); border-color: var(--energe-green-dark); color: #fff; }

/* ---------- Header ---------- */
.energe-header { background: #fff; border-bottom: 1px solid var(--energe-line); position: relative; z-index: 50; }
.energe-header__bar {
	max-width: 1400px; margin: 0 auto; padding: 10px 16px;
	display: grid; grid-template-columns: 1fr auto; grid-template-areas: "brand toggle" "cta cta" "nav nav";
	align-items: center; gap: 10px 12px;
}
.energe-header__brand { grid-area: brand; min-width: 0; }
.energe-nav-toggle { grid-area: toggle; }
.energe-cta { grid-area: cta; }
.energe-nav { grid-area: nav; display: none; }
.energe-header.is-open .energe-nav { display: block; }

.energe-brand { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: var(--energe-black) !important; }
.energe-wordmark { white-space: nowrap; font-size: 1rem; font-weight: 800; letter-spacing: .01em; line-height: 1.15; }
.energe-logo-placeholder {
	display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
	width: 74px; height: 42px; border: 2px dashed var(--energe-green); border-radius: 6px;
	font-size: .72rem; font-weight: 800; color: var(--energe-green); line-height: 1; flex: 0 0 auto;
}
.energe-logo-placeholder small { font-size: .52rem; font-weight: 600; margin-top: 3px; text-transform: uppercase; }
.custom-logo-link img { max-height: 56px; width: auto; }

.energe-nav-toggle {
	display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 14px;
	border: 2px solid var(--energe-charcoal); border-radius: 8px; background: #fff; color: var(--energe-charcoal);
	font-weight: 700; font-size: 1rem; cursor: pointer;
}
.energe-nav-toggle__icon, .energe-nav-toggle__icon::before, .energe-nav-toggle__icon::after {
	display: block; width: 18px; height: 2px; background: currentColor; position: relative; content: "";
}
.energe-nav-toggle__icon::before { position: absolute; top: -6px; }
.energe-nav-toggle__icon::after { position: absolute; top: 6px; }

.energe-menu, .energe-cta-menu, .energe-footer-menu { list-style: none; margin: 0; padding: 0; }
body.energe-site .energe-menu a { display: block; padding: 12px 4px; min-height: 44px; color: var(--energe-charcoal); text-decoration: none; font-weight: 600; border-bottom: 1px solid var(--energe-line); }
body.energe-site .energe-menu a:hover, body.energe-site .energe-menu .current-menu-item > a { color: var(--energe-green-dark); }
.energe-menu .current-menu-item > a { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; }
.energe-cta-menu { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.energe-cta-menu a { width: 100%; padding: 10px 8px; font-size: .92rem; }

@media (max-width: 1339px) {
	.energe-wordmark { white-space: normal; }
}
@media (min-width: 768px) and (max-width: 1339px) {
	.energe-header__bar { grid-template-columns: 1fr auto auto; grid-template-areas: "brand cta toggle" "nav nav nav"; }
	.energe-cta-menu { display: flex; gap: 8px; }
	.energe-cta-menu a { width: auto; padding: 10px 14px; }
}
@media (min-width: 1340px) {
	.energe-header__bar { grid-template-columns: max-content 1fr max-content; grid-template-areas: "brand nav cta"; padding: 12px 24px; }
	.energe-nav-toggle { display: none; }
	.energe-nav { display: block; }
	.energe-menu { display: flex; justify-content: center; flex-wrap: nowrap; gap: 4px 12px; }
	body.energe-site .energe-menu a { border: 0; padding: 10px 2px; font-size: .9rem; white-space: nowrap; }
	.energe-cta-menu { display: flex; gap: 10px; }
	.energe-cta-menu a { width: auto; padding: 10px 12px; font-size: .86rem; }
}

/* ---------- Footer ---------- */
.energe-footer { background: var(--energe-black); color: #e8ebe9; margin-top: 0; }
body.energe-site .energe-footer a { color: #fff; }
body.energe-site .energe-footer a:hover { color: #b9e3c8; }
.energe-footer__grid { max-width: 1240px; margin: 0 auto; padding: 40px 16px 24px; display: grid; gap: 28px; grid-template-columns: 1fr; }
.energe-footer__name { font-size: 1.2rem; font-weight: 800; color: #fff; margin: 0 0 4px; }
.energe-footer__tagline { color: #b9e3c8; font-weight: 600; margin: 0 0 12px; }
.energe-footer__heading { font-weight: 800; color: #fff; text-transform: uppercase; letter-spacing: .06em; font-size: .85rem; margin: 0 0 8px; }
.energe-footer__contact { list-style: none; margin: 0; padding: 0; }
.energe-footer__contact li { padding: 4px 0; }
.energe-footer-menu a { display: inline-block; padding: 8px 0; min-height: 44px; text-decoration: none; }
.energe-footer-menu a:hover { text-decoration: underline; }
.energe-footer__legal { border-top: 1px solid #2c3136; max-width: 1240px; margin: 0 auto; padding: 18px 16px 28px; font-size: .88rem; color: #c9cfcc; }
.energe-footer__legal p { margin: 0 0 8px; }
@media (min-width: 768px) {
	.energe-footer__grid { grid-template-columns: 2fr 1fr 1fr; padding: 48px 24px 28px; }
	.energe-footer__legal { padding: 18px 24px 28px; }
}

/* ---------- Elementor content polish (layout and colours are set in Elementor) ---------- */
.energe-site .elementor-widget-text-editor p:last-child { margin-bottom: 0; }
.energe-site .e-con > .elementor-widget.energe-card { align-self: stretch; }
.energe-site .energe-card { background: #fff; border: 1px solid var(--energe-line); border-radius: var(--energe-radius); padding: 22px; height: 100%; }
.energe-site .energe-step .elementor-icon-box-title { margin-top: 6px; }
.energe-site .elementor-button { min-height: 44px; }
.energe-site .elementor-accordion .elementor-tab-title, .energe-site .e-n-accordion-item-title { min-height: 44px; }
.energe-site .energe-note { border-left: 4px solid var(--energe-green); background: var(--energe-green-tint); padding: 14px 18px; border-radius: 6px; }

/* ---------- ELSS application pages: brand colour + width inside Elementor pages ---------- */
.energe-site .elss-portal { --elss-brand: var(--energe-green); --elss-ink: var(--energe-charcoal); max-width: 820px; }
.energe-site .elementor .elss-portal { margin-left: 0; }
.energe-site .elss-portal .elss-btn { white-space: normal; max-width: 100%; text-align: center; }
.energe-site .elss-portal .elss-btn-primary:hover { background: var(--energe-green-dark); }

/* ---------- Motion ---------- */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ---------- Links inside text are underlined (not colour-only) ---------- */
body.energe-site .elementor-widget-text-editor a,
body.energe-site .elss-portal p a,
body.energe-site .elss-portal li a,
body.energe-site .elss-contact-empty a { text-decoration: underline; text-underline-offset: 2px; }
main#content.energe-main { display: block; }