/*
Theme Name: Energe Foundation (Astra Child)
Theme URI: https://energefoundation.org
Template: astra
Author: Energe Foundation
Author URI: https://energefoundation.org
Description: Astra child theme for Energe Foundation (energefoundation.org). Astra (parent) owns the responsive framework, primary header/nav, and mobile menu. This child theme adds only what Astra's free tier does not provide: the dark utility bar, the rich footer columns, brand color tokens, and the accessibility/security/performance foundations. All normal page content (Home and interior pages) is owned by Elementor Free via the Energe Foundation Toolkit plugin and is never duplicated here.
Version: 1.2.0
Requires at least: 6.4
Requires PHP: 8.0
Requires theme: Astra
Text Domain: energe-foundation
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html

This child theme intentionally ships with minimal front-end CSS beyond the
utility bar and footer -- Astra already provides the responsive grid,
header, and mobile navigation, so nothing here duplicates that.
*/

/* ==========================================================================
   1. Design tokens (brand palette)
   Sampled from the official Energe Foundation logo (near-black wordmark,
   green gradient leaf/figure mark). If the organization later supplies an
   exact brand-color spec, update only this block -- everything else in
   this file, plus the Elementor Global Colors, references these tokens.
   ========================================================================== */
:root {
  --ef-ink: #111111;
  --ef-ink-soft: #2b2b2b;
  --ef-green: #2e7d32;
  --ef-green-light: #4caf50;
  --ef-green-dark: #1b5e20;
  --ef-dark-bg: #0d1710;
  --ef-white: #ffffff;
  --ef-off-white: #f6f7f9;
  --ef-gray-600: #4b5566;
  --ef-gray-300: #d7dce3;
  --ef-focus: #ffcc33;

  --ef-font-heading: "Poppins", "Segoe UI", Arial, sans-serif;
  --ef-font-body: "Inter", "Segoe UI", Arial, sans-serif;

  --ef-container-max: 1280px;
  --ef-radius: 6px;
}

/* ==========================================================================
   2. Accessibility foundations (skip link target + focus rings). Astra
   provides its own skip link markup target (#content); ours points there
   too so the two never conflict.
   ========================================================================== */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100000;
  background: var(--ef-ink);
  color: var(--ef-white);
  padding: 12px 20px;
  border-radius: 0 0 var(--ef-radius) 0;
  text-decoration: none;
  font-weight: 600;
}
.skip-link:focus {
  left: 0;
}
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--ef-focus);
  outline-offset: 2px;
}
.screen-reader-text {
  border: 0; clip: rect(1px,1px,1px,1px); clip-path: inset(50%);
  height: 1px; margin: -1px; overflow: hidden; padding: 0;
  position: absolute !important; width: 1px; word-wrap: normal !important;
}
.ef-wrap-safe { overflow-wrap: anywhere; }

/* ==========================================================================
   3. Utility bar (rendered on the astra_header_before hook, so it sits
   above Astra's own header/masthead).
   ========================================================================== */
.ef-utility-bar {
  background: var(--ef-dark-bg);
  color: var(--ef-off-white);
  font-size: 0.8rem;
  letter-spacing: 0.06em;
}
.ef-utility-bar .ef-utility-inner {
  max-width: var(--ef-container-max);
  margin: 0 auto;
  padding: 8px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.ef-utility-contact {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}
.ef-utility-contact a {
  color: var(--ef-off-white);
  text-decoration: none;
}
.ef-utility-contact a:hover, .ef-utility-contact a:focus { color: var(--ef-green-light); }
.ef-utility-brandline {
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ef-green-light);
}
.ef-utility-social a {
  color: var(--ef-off-white);
  margin-left: 14px;
  text-decoration: none;
}
.ef-utility-social a:first-child { margin-left: 0; }
.ef-utility-social a:hover,
.ef-utility-social a:focus { color: var(--ef-green-light); }
.ef-utility-ctas { display: flex; gap: 8px; }
.ef-utility-ctas a {
  display: inline-block;
  color: var(--ef-white);
  text-decoration: none;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.35);
}
.ef-utility-ctas a.ef-utility-cta-donate { background: var(--ef-green); border-color: var(--ef-green); }
.ef-utility-ctas a:hover, .ef-utility-ctas a:focus { background: var(--ef-green-dark); border-color: var(--ef-green-dark); }

/* Small helper reused for the footer's own logo/wordmark fallback text. */
.ef-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.ef-logo img { max-height: 52px; width: auto; }
.ef-logo-text {
  font-family: var(--ef-font-heading);
  font-weight: 700;
  font-size: 1.15rem;
  line-height: 1.15;
}
.ef-logo-text span {
  display: block;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* ==========================================================================
   4. Buttons (used by the utility bar + footer; page-body buttons are
   Elementor's own Button widget and are not styled here).
   ========================================================================== */
.ef-btn {
  display: inline-block;
  text-decoration: none;
  font-weight: 700;
  letter-spacing: 0.03em;
  border-radius: var(--ef-radius);
  padding: 11px 20px;
  font-size: 0.85rem;
  text-transform: uppercase;
  border: 2px solid transparent;
  transition: transform .12s ease, background-color .12s ease, color .12s ease;
}
.ef-btn:hover, .ef-btn:focus { transform: translateY(-1px); }
.ef-btn-primary { background: var(--ef-green); color: var(--ef-white); }
.ef-btn-primary:hover, .ef-btn-primary:focus { background: var(--ef-green-dark); color: var(--ef-white); }

/* ==========================================================================
   5. Footer (rendered on the astra_footer_before hook, so it sits above
   Astra's own minimal footer/copyright row).
   ========================================================================== */
.ef-footer {
  background: var(--ef-dark-bg);
  color: var(--ef-off-white);
}
.ef-footer-main {
  max-width: var(--ef-container-max);
  margin: 0 auto;
  padding: 56px 20px 32px;
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
}
.ef-footer-main > div { flex: 1 1 220px; }
.ef-footer-brand { flex: 1.4 1 280px; }
.ef-footer h2, .ef-footer h3 { color: var(--ef-white); font-size: 1rem; text-transform: uppercase; letter-spacing: 0.06em; }
.ef-footer a { color: var(--ef-off-white); text-decoration: none; }
.ef-footer a:hover, .ef-footer a:focus { color: var(--ef-green-light); text-decoration: underline; }
.ef-footer-brand .ef-logo-text { color: var(--ef-white); }
.ef-footer-brand .ef-logo-text span { color: var(--ef-green-light); }
.ef-footer-tagline { margin-top: 10px; color: var(--ef-gray-300); font-size: 0.92rem; }
.ef-footer ul { list-style: none; margin: 12px 0 0; padding: 0; }
.ef-footer li { margin-bottom: 8px; font-size: 0.92rem; }
.ef-footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.12);
}
.ef-footer-bottom-inner {
  max-width: var(--ef-container-max);
  margin: 0 auto;
  padding: 18px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 0.82rem;
  color: var(--ef-gray-300);
}
.ef-footer-bottom ul {
  list-style: none;
  display: flex;
  gap: 16px;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
}
.ef-footer-widget { margin-top: 8px; }

/* ==========================================================================
   6. Generic content scaffolding for non-Elementor templates (search, 404,
   archive loop wrapper). Elementor pages render their own content.
   ========================================================================== */
.ef-content-wrap {
  max-width: var(--ef-container-max);
  margin: 0 auto;
  padding: 48px 20px;
}
.ef-entry-title { margin-bottom: 0.4em; color: var(--ef-ink); }
.ef-pagination { display: flex; gap: 8px; margin-top: 32px; }
.ef-pagination a, .ef-pagination span {
  padding: 8px 14px; border: 1px solid var(--ef-gray-300); border-radius: var(--ef-radius); text-decoration: none;
}

/* ==========================================================================
   7. News & Events grid (rendered by the [energe_news_grid] shortcode --
   plain WordPress Posts markup, not Elementor-controlled, so it is styled
   here rather than duplicated as an Elementor section).
   ========================================================================== */
.ef-news-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
}
.ef-news-card {
  flex: 1 1 300px;
  max-width: calc(33.333% - 19px);
  border: 1px solid var(--ef-gray-300);
  border-radius: var(--ef-radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.ef-news-card-thumb img { aspect-ratio: 4/3; object-fit: cover; }
.ef-news-card-body { padding: 18px 20px 22px; }
.ef-news-card-date { font-size: 0.78rem; color: var(--ef-gray-600); text-transform: uppercase; letter-spacing: 0.05em; margin: 0 0 6px; }
.ef-news-card-body h3 { font-size: 1.1rem; margin-bottom: 8px; }
.ef-news-card-body h3 a { color: var(--ef-ink); text-decoration: none; }
.ef-news-card-body h3 a:hover { color: var(--ef-green-dark); }
.ef-news-card-link { font-weight: 600; font-size: 0.88rem; text-decoration: none; }

@media (max-width: 1024px) {
  .ef-news-card { max-width: calc(50% - 14px); }
}
@media (max-width: 600px) {
  .ef-news-card { max-width: 100%; }
}

/* ==========================================================================
   8. Responsive framework for the utility bar + footer only (Astra's own
   framework already handles the header/nav/body breakpoints).
   ========================================================================== */
@media (max-width: 860px) {
  .ef-utility-inner { justify-content: center; text-align: center; }
}

@media (max-width: 600px) {
  .ef-footer-main { padding: 40px 20px 24px; gap: 28px; }
  .ef-footer-bottom-inner { flex-direction: column; text-align: center; }
  .ef-logo img { max-height: 42px; }
}

@media (max-width: 430px) {
  .ef-utility-ctas { width: 100%; justify-content: center; }
}


/* -------------------------------------------------------------------------
 * WPForms brand styling (Contact / Application / Volunteer / Partner forms)
 * WPForms Lite 2.0.1.1's "modern" stylesheet reads these as CSS custom
 * properties (confirmed by inspecting the plugin's own compiled CSS on this
 * install -- assets/css/frontend/modern/wpforms-full.min.css). Setting them
 * on :root re-skins every WPForms form site-wide using the same brand
 * tokens as the rest of the site, without touching WPForms' own markup.
 *
 * WPForms itself prints its own `:root{ --wpforms-*: <plugin defaults> }`
 * inline <style> block late in the document (after this stylesheet's own
 * <link>), so a plain override here loses the cascade on source order alone
 * even though this file also targets :root. Every declaration below is
 * !important specifically to win over that later, non-!important block
 * regardless of print order -- confirmed necessary by inspecting the live
 * page's actual rendered <style id="wpforms-modern-full-inline-css">.
 * ---------------------------------------------------------------------- */
:root {
	--wpforms-field-border-color: var(--ef-gray-300) !important;
	--wpforms-field-border-size: 1px !important;
	--wpforms-field-border-style: solid !important;
	--wpforms-field-border-radius: var(--ef-radius) !important;
	--wpforms-field-background-color: var(--ef-white) !important;
	--wpforms-field-text-color: var(--ef-ink) !important;
	--wpforms-field-size-font-size: 16px !important;
	--wpforms-field-size-input-height: 48px !important;
	--wpforms-field-size-padding-h: 16px !important;
	--wpforms-label-color: var(--ef-ink) !important;
	--wpforms-label-sublabel-color: var(--ef-gray-600) !important;
	--wpforms-label-size-font-size: 15px !important;

	--wpforms-button-background-color: var(--ef-green-dark) !important;
	--wpforms-button-background-color-alt: var(--ef-green) !important;
	--wpforms-button-text-color: var(--ef-white) !important;
	--wpforms-button-text-color-alt: var(--ef-white) !important;
	--wpforms-button-border-radius: var(--ef-radius) !important;
	--wpforms-button-border-color: var(--ef-green) !important;
	--wpforms-button-border-style: solid !important;
	--wpforms-button-border-size: 0px !important;
	--wpforms-button-size-height: 48px !important;
	--wpforms-button-size-font-size: 16px !important;
	--wpforms-button-size-padding-h: 28px !important;

	--wpforms-container-border-radius: 8px !important;
	--wpforms-container-border-color: var(--ef-gray-300) !important;
	--wpforms-container-border-width: 1px !important;
	--wpforms-container-border-style: solid !important;
	--wpforms-container-padding: 24px !important;
}

.wpforms-container,
.wpforms-container input,
.wpforms-container select,
.wpforms-container textarea,
.wpforms-container label,
.wpforms-container button {
	font-family: var(--ef-font-body);
}

.wpforms-container .wpforms-title,
.wpforms-container .wpforms-form-title {
	font-family: var(--ef-font-heading);
	color: var(--ef-ink);
}

/* WPForms' modern CSS defines no dedicated focus-border variable, so the
 * brand focus color (the same accessibility-focus token used elsewhere on
 * the site) is applied explicitly here. */
.wpforms-container input[type=text]:focus,
.wpforms-container input[type=email]:focus,
.wpforms-container input[type=tel]:focus,
.wpforms-container input[type=number]:focus,
.wpforms-container input[type=url]:focus,
.wpforms-container select:focus,
.wpforms-container textarea:focus,
.wpforms-container .choices.is-focused .choices__inner {
	border-color: var(--ef-focus) !important;
	box-shadow: 0 0 0 3px rgba(255, 204, 51, 0.35);
	outline: none;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.wpforms-container input[type=submit]:hover,
.wpforms-container button[type=submit]:hover,
.wpforms-container .wpforms-page-button:hover {
	filter: brightness(0.92);
	transition: filter 0.2s ease, background-color 0.2s ease;
}

.wpforms-container input[type=checkbox]:checked + label:before,
.wpforms-container input[type=radio]:checked + label:before {
	background-color: var(--ef-green);
	border-color: var(--ef-green);
}