/* E4G Energy — main styles */

:root {
  --e4g-bg: #0b0f14;
  --e4g-surface: #111824;
  --e4g-surface-2: #0f1520;
  --e4g-border: rgba(255, 255, 255, 0.10);
  --e4g-text: rgba(255, 255, 255, 0.92);
  --e4g-muted: rgba(255, 255, 255, 0.70);
  --e4g-soft: rgba(255, 255, 255, 0.06);

  /* Logo-inspired “battery blue” */
  --e4g-brand: #00a7e1;
  --e4g-brand-2: #0b6cc8;
  --e4g-brand-3: #083a7a;

  --e4g-radius: 16px;
  --e4g-shadow: 0 12px 32px rgba(0,0,0,.35);
  --e4g-shadow-soft: 0 10px 20px rgba(0,0,0,.25);

  --e4g-container: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Liberation Sans", sans-serif;
  color: var(--e4g-text);
  background:
    radial-gradient(1200px 600px at 20% 0%, rgba(0,167,225,.14), transparent 55%),
    radial-gradient(900px 500px at 80% 10%, rgba(11,108,200,.10), transparent 60%),
    linear-gradient(180deg, #090c11, var(--e4g-bg));
}

img { max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--e4g-brand); }

.e4g-container {
  width: min(var(--e4g-container), calc(100% - 32px));
  margin: 0 auto;
}

.e4g-skip-link {
  position: absolute;
  left: -999px;
  top: 8px;
  background: #fff;
  color: #000;
  padding: 10px 12px;
  border-radius: 10px;
  z-index: 99999;
}
.e4g-skip-link:focus { left: 12px; }

/* Header */
.e4g-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(11, 15, 20, 0.72);
  backdrop-filter: blur(12px);
  /* Keep blend effects inside header only */
  isolation: isolate;
  border-bottom: 1px solid var(--e4g-border);
}
.e4g-header__bar {
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
}
.e4g-branding {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 200px;
}
.e4g-branding__logo {
  display: inline-flex;
  align-items: center;
  /* Give the (dark) logo text contrast on dark header */
  padding: 10px 20px;
  border-radius: 12px;
  /* Use a slightly more solid base instead of image filters (keeps it crisp) */
  background: rgba(255,255,255,0.28);
  border: 1px solid rgba(255,255,255,0.18);
  box-shadow: 0 10px 26px rgba(0,0,0,.26);
  backdrop-filter: blur(6px);
}
.e4g-branding__logo img,
.e4g-branding__logo .custom-logo {
  width: auto;
  height: 44px;
  display: block;
  /* Keep logo crisp; readability handled by the wrapper background */
  filter: none;
}

/* This specific logo has dark text on transparent background; boost readability */
.e4g-branding__logo img[src*="production_images_3b1c887e-423f-4708-8bf5-41c8459509cd"],
.e4g-branding__logo .custom-logo[src*="production_images_3b1c887e-423f-4708-8bf5-41c8459509cd"],
.e4g-branding__logo img[src*="cropped-production_images_3b1c887e-423f-4708-8bf5-41c8459509cd"],
.e4g-branding__logo .custom-logo[src*="cropped-production_images_3b1c887e-423f-4708-8bf5-41c8459509cd"] {
  /* No shadows (they blur). Just boost contrast a bit. */
  filter: brightness(1.28) contrast(1.25) saturate(1.05);
}

/* If someone uses the old logo with baked-in white background, blend it out */
.e4g-branding__logo img[src*="/e4g_logo"],
.e4g-branding__logo img[src*="e4g_logo.png"],
.e4g-branding__logo .custom-logo[src*="/e4g_logo"],
.e4g-branding__logo .custom-logo[src*="e4g_logo.png"] {
  /*
    WARNING: `mix-blend-mode: multiply` makes white text disappear on dark headers.
    Keep the logo readable; if you need to remove a baked white background,
    replace the asset with a transparent PNG/SVG instead of blending tricks.
  */
  mix-blend-mode: normal;
  filter: brightness(1.12) contrast(1.15) drop-shadow(0 2px 10px rgba(0,0,0,.6));
}
.e4g-branding__logo .custom-logo-link { display: inline-flex; align-items: center; }
.e4g-branding__text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}
.e4g-branding__title {
  font-weight: 800;
  letter-spacing: 0.02em;
  color: rgba(255,255,255,0.96);
  text-shadow: 0 2px 10px rgba(0,0,0,.55);
}
.e4g-branding__tagline {
  color: var(--e4g-muted);
  font-size: 13px;
}

.e4g-nav {
  display: flex;
  align-items: center;
  gap: 12px;
}
.e4g-nav ul {
  list-style: none;
  display: flex;
  gap: 4px;
  padding: 0;
  margin: 0;
  align-items: center;
}
.e4g-nav a {
  display: inline-flex;
  align-items: center;
  padding: 10px 12px;
  border-radius: 12px;
  color: var(--e4g-muted);
}
.e4g-nav a:hover,
.e4g-nav .current-menu-item > a,
.e4g-nav .current_page_item > a {
  color: var(--e4g-text);
  background: var(--e4g-soft);
}

.e4g-header__actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.e4g-search {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px;
  border-radius: 14px;
  border: 1px solid var(--e4g-border);
  background: rgba(255,255,255,0.03);
}
.e4g-search__input {
  width: 220px;
  max-width: 40vw;
  background: transparent;
  border: none;
  outline: none;
  color: var(--e4g-text);
  padding: 8px 8px;
}
.e4g-search__input::placeholder { color: rgba(255,255,255,0.55); }
.e4g-search__btn {
  border: 1px solid rgba(0,167,225,0.45);
  background: linear-gradient(180deg, rgba(0,167,225,0.18), rgba(11,108,200,0.10));
  color: var(--e4g-text);
  padding: 8px 10px;
  border-radius: 12px;
  cursor: pointer;
}
.e4g-search__btn:hover { border-color: rgba(0,167,225,0.70); }

.e4g-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid var(--e4g-border);
  color: var(--e4g-text);
  background: rgba(255,255,255,0.04);
  padding: 10px 12px;
  border-radius: 12px;
  cursor: pointer;
}
.e4g-btn:hover { border-color: rgba(255,255,255,0.18); background: rgba(255,255,255,0.06); }
.e4g-btn--primary {
  border-color: rgba(0,167,225,0.45);
  background: linear-gradient(180deg, rgba(0,167,225,0.18), rgba(11,108,200,0.10));
}
.e4g-btn--primary:hover { border-color: rgba(0,167,225,0.70); }

.e4g-menu-toggle { display: none; }

/* Hero */
.e4g-hero {
  padding: 42px 0 18px;
}
.e4g-hero__grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 18px;
  align-items: stretch;
}
.e4g-card {
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
  border: 1px solid var(--e4g-border);
  border-radius: var(--e4g-radius);
  box-shadow: var(--e4g-shadow-soft);
}
.e4g-card--hero {
  padding: 22px;
  position: relative;
  overflow: hidden;
}
.e4g-card--hero::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(420px 180px at 20% 10%, rgba(0,167,225,.18), transparent 60%),
    radial-gradient(420px 200px at 80% 0%, rgba(11,108,200,.14), transparent 60%);
  pointer-events:none;
}
.e4g-card--hero > * { position: relative; }

.e4g-kicker {
  color: var(--e4g-muted);
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.e4g-hero__title {
  margin: 10px 0 10px;
  font-weight: 900;
  letter-spacing: -0.02em;
  font-size: clamp(26px, 3.2vw, 44px);
  line-height: 1.08;
}
.e4g-hero__subtitle {
  margin: 0 0 14px;
  color: var(--e4g-muted);
  font-size: 16px;
  line-height: 1.55;
  max-width: 64ch;
}
.e4g-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0 0;
}
.e4g-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--e4g-muted);
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid var(--e4g-border);
  background: rgba(255,255,255,0.03);
}
.e4g-badge__dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--e4g-brand), var(--e4g-brand-2));
  box-shadow: 0 0 0 3px rgba(0,167,225,0.12);
}

.e4g-card--side {
  padding: 18px;
  display: grid;
  gap: 10px;
}
.e4g-side-title {
  margin: 0;
  font-size: 16px;
  font-weight: 800;
}

/* Layout */
.e4g-main {
  padding: 18px 0 50px;
}
.e4g-grid {
  display: grid;
  grid-template-columns: 1.6fr 0.9fr;
  gap: 22px;
  align-items: start;
}
.e4g-section {
  margin-top: 18px;
}
.e4g-section__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.e4g-section__title {
  margin: 0;
  font-size: 18px;
  font-weight: 900;
  letter-spacing: -0.01em;
}
.e4g-section__link {
  color: var(--e4g-muted);
  font-size: 13px;
}

.e4g-cards {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.e4g-postcard {
  padding: 14px;
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 12px;
}
.e4g-postcard__thumb {
  width: 120px;
  height: 84px;
  border-radius: 14px;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(0,167,225,.15), rgba(11,108,200,.08));
  border: 1px solid rgba(255,255,255,0.10);
}
.e4g-postcard__thumb img { width: 100%; height: 100%; object-fit: cover; }
.e4g-postcard__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  color: var(--e4g-muted);
  font-size: 12px;
}
.e4g-postcard__title {
  margin: 6px 0 6px;
  font-size: 16px;
  line-height: 1.25;
  font-weight: 850;
}
.e4g-postcard__excerpt {
  margin: 0;
  color: var(--e4g-muted);
  font-size: 13px;
  line-height: 1.45;
}

.e4g-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px;
  border-radius: 999px;
  border: 1px solid var(--e4g-border);
  background: rgba(255,255,255,0.03);
  color: var(--e4g-muted);
  font-size: 12px;
}
.e4g-rating {
  display: inline-flex;
  align-items: center;
  padding: 5px 8px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 12px;
  color: #071019;
  background: linear-gradient(180deg, var(--e4g-brand), var(--e4g-brand-2));
}

/* Single content */
.e4g-article {
  padding: 18px;
}
.e4g-article h1 {
  margin: 8px 0 10px;
  font-size: clamp(24px, 3vw, 36px);
  letter-spacing: -0.02em;
}
.e4g-article .e4g-article__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  color: var(--e4g-muted);
  font-size: 13px;
  margin-bottom: 14px;
}
.e4g-article .wp-post-image {
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: var(--e4g-shadow-soft);
}
.e4g-content {
  color: rgba(255,255,255,0.88);
  line-height: 1.75;
  font-size: 16px;
}
.e4g-content p { margin: 0 0 14px; }
.e4g-content h2, .e4g-content h3 {
  margin: 26px 0 10px;
  line-height: 1.25;
}
.e4g-content a { color: var(--e4g-brand); }
.e4g-content a:hover { color: #7ddcff; }
.e4g-content blockquote{
  margin: 18px 0;
  padding: 14px 16px;
  border-left: 3px solid rgba(0,167,225,0.7);
  background: rgba(255,255,255,0.03);
  border-radius: 12px;
}
.e4g-content code {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  padding: 1px 6px;
  border-radius: 8px;
}
.e4g-content pre {
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(255,255,255,0.10);
  padding: 14px;
  border-radius: 14px;
  overflow: auto;
}

.e4g-review-panel {
  margin-top: 16px;
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr 1fr;
}
.e4g-list {
  margin: 0;
  padding-left: 18px;
  color: var(--e4g-muted);
}
.e4g-list li { margin: 6px 0; }
.e4g-mini-title {
  margin: 0 0 8px;
  font-weight: 900;
  font-size: 14px;
}

/* Sidebar widgets */
.widget {
  padding: 14px;
  margin-bottom: 12px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--e4g-border);
  border-radius: 16px;
}
.widget-title {
  margin: 0 0 10px;
  font-size: 14px;
  font-weight: 900;
}
.widget a { color: var(--e4g-muted); }
.widget a:hover { color: var(--e4g-brand); }

/* Footer */
.e4g-footer {
  border-top: 1px solid var(--e4g-border);
  background: rgba(0,0,0,0.2);
  padding: 26px 0;
  margin-top: 26px;
}
.e4g-footer__grid {
  display: grid;
  gap: 18px;
  grid-template-columns: 1.2fr 1fr;
  align-items: start;
}
.e4g-footer__muted { color: var(--e4g-muted); font-size: 13px; line-height: 1.5; }
.e4g-footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.e4g-footer a { color: var(--e4g-muted); padding: 8px 10px; border-radius: 12px; }
.e4g-footer a:hover { color: var(--e4g-text); background: rgba(255,255,255,0.04); }

/* Pagination */
.pagination {
  margin-top: 16px;
  display: flex;
  justify-content: center;
}
.nav-links {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}
.nav-links .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 38px;
  padding: 0 12px;
  border-radius: 12px;
  border: 1px solid var(--e4g-border);
  background: rgba(255,255,255,0.03);
  color: var(--e4g-muted);
}
.nav-links .page-numbers:hover { color: var(--e4g-text); border-color: rgba(255,255,255,0.18); }
.nav-links .page-numbers.current {
  color: #071019;
  border-color: rgba(0,167,225,0.45);
  background: linear-gradient(180deg, var(--e4g-brand), var(--e4g-brand-2));
}

/* Responsive */
@media (max-width: 980px) {
  .e4g-hero__grid { grid-template-columns: 1fr; }
  .e4g-grid { grid-template-columns: 1fr; }
  .e4g-cards { grid-template-columns: 1fr; }
}

@media (max-width: 820px) {
  .e4g-menu-toggle { display: inline-flex; }
  .e4g-nav { display: none; }
  .e4g-header.is-open .e4g-nav {
    display: block;
    width: 100%;
  }
  .e4g-header.is-open .e4g-header__bar {
    flex-wrap: wrap;
  }
  .e4g-nav ul {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    padding-top: 8px;
  }
  .e4g-nav a { width: 100%; justify-content: space-between; }
  .e4g-search__input { width: 160px; }
}

@media (max-width: 520px) {
  .e4g-postcard { grid-template-columns: 1fr; }
  .e4g-postcard__thumb { width: 100%; height: 170px; }
  .e4g-review-panel { grid-template-columns: 1fr; }
}