/* ============================================================
   AFRICA ENERGY REPORTS — style.css
   Master stylesheet for all AER publications pages
   ============================================================ */

/* ── Google Fonts ── */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400;1,600&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,400&family=DM+Mono:wght@400;500&display=swap');

/* ============================================================
   1. CSS CUSTOM PROPERTIES
   ============================================================ */
:root {
  /* Brand colours */
  --clr-navy:         #0F2A4A;
  --clr-navy-mid:     #1A3D6B;
  --clr-navy-dark:    #0A1628;
  --clr-orange:       #E8563A;
  --clr-orange-2:     #F97316;
  --clr-orange-3:     #FB923C;
  --clr-orange-light: #FED7AA;
  --clr-off-white:    #F8F6F2;
  --clr-white:        #FFFFFF;
  --clr-text:         #3D5068;
  --clr-muted:        #7A8FA6;
  --clr-border:       #DDE4EC;

  /* Status colours */
  --clr-green:        #15803D;
  --clr-green-bg:     #F0FDF4;
  --clr-green-bd:     #BBF7D0;
  --clr-red:          #DC2626;
  --clr-red-bg:       #FEF2F2;
  --clr-red-bd:       #FECACA;
  --clr-amber:        #D97706;
  --clr-amber-bg:     #FFFBEB;
  --clr-amber-bd:     #FDE68A;

  /* Typography */
  --ff-display:  'Cormorant Garamond', serif;
  --ff-body:     'DM Sans', sans-serif;
  --ff-mono:     'DM Mono', monospace;

  /* Spacing */
  --sp-xs:  8px;
  --sp-sm:  16px;
  --sp-md:  24px;
  --sp-lg:  40px;
  --sp-xl:  56px;
  --sp-2xl: 72px;

  /* Borders */
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 6px;
  --radius-xl: 8px;

  /* Shadows */
  --shadow-sm: 0 2px 12px rgba(15,42,74,0.06);
  --shadow-md: 0 4px 32px rgba(15,42,74,0.10);
  --shadow-lg: 0 12px 56px rgba(15,42,74,0.15);
  --shadow-xl: 0 24px 64px rgba(0,0,0,0.40);

  /* Layout */
  --max-w: 1100px;
}

/* ============================================================
   2. RESET & BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html  { scroll-behavior: smooth; }
body  { font-family: var(--ff-body); font-size: 15px; line-height: 1.7;
        color: var(--clr-text); background: var(--clr-off-white); overflow-x: hidden; }
img   { max-width: 100%; height: auto; display: block; }
a     { text-decoration: none; color: inherit; }

/* ── Elementor underline override ──────────────────────────
   Elementor's stylesheet applies text-decoration:underline
   to all <a> tags with !important. These rules beat it by
   being more specific AND using !important themselves.
   ──────────────────────────────────────────────────────── */
.elementor-widget-aer_announcement_stripe a,
.elementor-widget-aer_announcement_stripe a *,
.elementor-widget-aer_publications_hero a,
.elementor-widget-aer_publications_hero a *,
.elementor-widget-aer_filter_bar a,
.elementor-widget-aer_filter_bar a *,
.elementor-widget-aer_featured_issue a,
.elementor-widget-aer_featured_issue a *,
.elementor-widget-aer_issues_grid a,
.elementor-widget-aer_issues_grid a *,
.elementor-widget-aer_series_panel a,
.elementor-widget-aer_series_panel a *,
.elementor-widget-aer_subscribe a,
.elementor-widget-aer_subscribe a * {
  text-decoration: none !important;
  color: inherit !important;
}

/* Restore underline only on the announcement link hover */
.elementor-widget-aer_announcement_stripe .aer-ann__link:hover {
  text-decoration: underline !important;
}
button{ cursor: pointer; font-family: var(--ff-body); border: none; background: transparent; }

/* ============================================================
   3. LAYOUT HELPERS
   ============================================================ */
.aer-container { max-width: var(--max-w); margin: 0 auto; width: 100%; }
.aer-section   { padding: var(--sp-xl) 48px; }
.aer-section--navy { background: var(--clr-navy); }
.aer-section--white { background: var(--clr-white); }

/* ============================================================
   4. TYPOGRAPHY HELPERS
   ============================================================ */
.aer-eyebrow {
  font-family: var(--ff-body);
  font-size: 10px; font-weight: 600;
  letter-spacing: 0.3em; text-transform: uppercase;
}
.aer-mono { font-family: var(--ff-mono); font-size: 11px; letter-spacing: 0.1em; }

/* ============================================================
   5. ANNOUNCEMENT STRIPE
   ============================================================ */
.aer-announcement {
  background: var(--clr-orange);
  padding: 9px 48px;
  font-family: var(--ff-body);
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--clr-white);
}
.aer-ann__inner {
  max-width: var(--max-w); margin: 0 auto;
  display: flex; align-items: center; justify-content: center;
  gap: 12px; flex-wrap: wrap;
}
.aer-ann__dot {
  width: 3px; height: 3px; border-radius: 50%;
  background: rgba(255,255,255,0.5); flex-shrink: 0;
}
.aer-ann__link { color: inherit; }
.aer-ann__link:hover { text-decoration: underline; }

/* ============================================================
   6. PUBLICATIONS HERO
   ============================================================ */
.aer-hero {
  background: var(--clr-navy);
  padding: 80px 48px 80px;
  position: relative; overflow: hidden;
}
.aer-hero::after {
  content: '';
  position: absolute; bottom: -1px; left: 0; right: 0;
  height: 60px;
  background: var(--clr-off-white);
  clip-path: ellipse(55% 100% at 50% 100%);
}
.aer-hero__inner {
  max-width: var(--max-w); margin: 0 auto;
  display: grid; grid-template-columns: 1fr 260px;
  gap: 48px; align-items: center;
  position: relative; z-index: 2;
}
.aer-hero__eyebrow {
  color: var(--clr-orange-3);
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 18px;
}
.aer-hero__eyebrow::before {
  content: ''; width: 24px; height: 1px;
  background: var(--clr-orange); display: inline-block;
}
.aer-hero__title {
  font-family: var(--ff-display);
  font-size: clamp(44px, 6.5vw, 80px);
  font-weight: 400; line-height: 1.05;
  color: var(--clr-white); letter-spacing: -0.02em;
  margin-bottom: 18px;
}
.aer-hero__title em { font-style: italic; color: var(--clr-orange-3); }
.aer-hero__sub {
  font-size: 15px; font-weight: 300;
  color: rgba(255,255,255,0.55); line-height: 1.75;
  max-width: 500px;
}
.aer-hero__stats {
  display: flex; gap: 32px; flex-wrap: wrap;
  margin-top: 36px; align-items: center;
}
.aer-hero__stat { display: flex; flex-direction: column; }
.aer-hero__stat-val {
  font-family: var(--ff-display);
  font-size: 36px; font-weight: 600;
  color: var(--clr-orange); line-height: 1;
}
.aer-hero__stat-lbl {
  font-size: 10px; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(255,255,255,0.35); margin-top: 2px;
}
.aer-hero__divider { width: 1px; height: 40px; background: rgba(255,255,255,0.12); }
.aer-hero__chips { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.aer-hero__chip {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius-md); padding: 14px;
  display: flex; flex-direction: column; gap: 4px;
}
.aer-hero__chip-label {
  font-size: 9px; font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--clr-orange-3);
}
.aer-hero__chip-name { font-size: 12px; color: rgba(255,255,255,0.7); }

/* ============================================================
   7. FILTER BAR
   ============================================================ */
.aer-filter-bar {
  background: var(--clr-white);
  border-bottom: 1px solid var(--clr-border);
  padding: 0 48px;
  position: sticky; top: 0; z-index: 100;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.2s;
}
.aer-filter-bar.is-scrolled { box-shadow: var(--shadow-md); }
.aer-filter-bar__inner {
  max-width: var(--max-w); margin: 0 auto;
  display: flex; gap: 4px;
  overflow-x: auto; -ms-overflow-style: none; scrollbar-width: none;
}
.aer-filter-bar__inner::-webkit-scrollbar { display: none; }
.aer-filter-btn {
  font-size: 12px; font-weight: 500;
  letter-spacing: 0.08em; padding: 16px 18px;
  color: var(--clr-muted); white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: color 0.2s, border-color 0.2s;
  position: relative; top: 1px;
}
.aer-filter-btn.is-active,
.aer-filter-btn:hover { color: var(--clr-orange); border-bottom-color: var(--clr-orange); }

/* ============================================================
   8. SECTION HEADER (label + rule + count)
   ============================================================ */
.aer-sect-head {
  display: flex; align-items: baseline;
  gap: 16px; margin-bottom: 28px;
}
.aer-sect-head__title {
  font-family: var(--ff-display);
  font-size: 28px; font-weight: 500;
  color: var(--clr-navy); white-space: nowrap;
}
.aer-sect-head__line {
  flex: 1; height: 1px; background: var(--clr-border); margin-bottom: 3px;
}
.aer-sect-head__count { font-family: var(--ff-mono); font-size: 11px; color: var(--clr-muted); }

/* ============================================================
   9. TAGS
   ============================================================ */
.aer-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 20px; }
.aer-tag {
  font-size: 10px; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--clr-border);
  color: var(--clr-muted); background: var(--clr-off-white);
}

/* ============================================================
   10. FEATURED CARD
   ============================================================ */
.aer-featured {
  display: grid; grid-template-columns: 360px 1fr;
  border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: var(--shadow-md); border: 1px solid var(--clr-border);
  background: var(--clr-white);
  transition: box-shadow 0.3s, transform 0.3s;
}
.aer-featured:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); }

.aer-featured__cover {
  position: relative; overflow: hidden; min-height: 420px;
}
.aer-featured__cover img {
  width: 100%; height: 100%; object-fit: cover; object-position: top center;
  transition: transform 0.5s;
}
.aer-featured:hover .aer-featured__cover img { transform: scale(1.03); }
.aer-featured__badge {
  position: absolute; top: 20px; left: 20px;
  background: var(--clr-orange); color: var(--clr-white);
  font-size: 9px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase;
  padding: 5px 11px; border-radius: var(--radius-sm);
}
.aer-featured__num {
  position: absolute; bottom: 20px; right: 20px;
  font-family: var(--ff-display); font-size: 80px; font-weight: 700;
  color: rgba(255,255,255,0.15); line-height: 1; pointer-events: none;
}

.aer-featured__body {
  padding: 44px 48px;
  display: flex; flex-direction: column; justify-content: space-between;
  border-left: 4px solid var(--clr-orange);
}
.aer-featured__series {
  font-size: 10px; font-weight: 600;
  letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--clr-orange); margin-bottom: 10px;
}
.aer-featured__title {
  font-family: var(--ff-display);
  font-size: clamp(28px, 3.5vw, 44px); font-weight: 500;
  line-height: 1.12; color: var(--clr-navy);
  margin-bottom: 12px; letter-spacing: -0.01em;
}
.aer-featured__sub {
  font-size: 14px; font-weight: 300;
  color: var(--clr-text); line-height: 1.75; margin-bottom: 20px;
}
.aer-featured__desc {
  font-size: 13.5px; line-height: 1.78; color: var(--clr-text);
}
.aer-featured__stats {
  display: flex; gap: 28px;
  padding: 20px 0; margin: 24px 0;
  border-top: 1px solid var(--clr-border);
  border-bottom: 1px solid var(--clr-border);
}
.aer-featured__stat { display: flex; flex-direction: column; }
.aer-featured__stat-val {
  font-family: var(--ff-display); font-size: 28px; font-weight: 600;
  color: var(--clr-navy); line-height: 1; margin-bottom: 2px;
}
.aer-featured__stat-lbl {
  font-size: 9.5px; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--clr-muted);
}
.aer-featured__stat-div { width: 1px; background: var(--clr-border); align-self: stretch; }

/* Read Link */
.aer-read-link {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--clr-orange); cursor: pointer;
  transition: gap 0.2s;
}
.aer-read-link:hover { gap: 18px; }
.aer-read-link__arrow {
  width: 32px; height: 1px; background: var(--clr-orange);
  position: relative; transition: width 0.2s; flex-shrink: 0;
}
.aer-read-link:hover .aer-read-link__arrow { width: 42px; }
.aer-read-link__arrow::after {
  content: '';
  position: absolute; right: 0; top: -3px;
  width: 6px; height: 6px;
  border-right: 1.5px solid var(--clr-orange);
  border-top: 1.5px solid var(--clr-orange);
  transform: rotate(45deg);
}

/* ============================================================
   11. ISSUES GRID
   ============================================================ */
.aer-grid {
  display: grid; grid-template-columns: repeat(3,1fr); gap: 24px;
}
.aer-card {
  background: var(--clr-white); border: 1px solid var(--clr-border);
  border-radius: var(--radius-lg); overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.3s, transform 0.3s;
}
.aer-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-4px); }
.aer-card--coming-soon { opacity: 0.9; }

.aer-card__cover {
  position: relative; overflow: hidden; aspect-ratio: 4/3;
}
.aer-card__cover img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: top center;
  transition: transform 0.4s;
}
.aer-card:hover .aer-card__cover img { transform: scale(1.04); }
.aer-card__badge {
  position: absolute; top: 14px; left: 14px;
  background: rgba(15,42,74,0.85);
  color: rgba(255,255,255,0.9);
  font-size: 8.5px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase;
  padding: 4px 9px; border-radius: var(--radius-sm);
  backdrop-filter: blur(4px);
}
.aer-card__ribbon {
  position: absolute; top: 0; right: 0;
  background: var(--clr-orange-2); color: var(--clr-white);
  font-size: 8.5px; font-weight: 700;
  letter-spacing: 0.15em; text-transform: uppercase;
  padding: 5px 14px 5px 10px;
  border-bottom-left-radius: var(--radius-lg);
}
.aer-card__num {
  position: absolute; bottom: 10px; right: 14px;
  font-family: var(--ff-display); font-size: 56px; font-weight: 700;
  color: rgba(255,255,255,0.18); line-height: 1; pointer-events: none;
}
.aer-card__body {
  padding: 22px; display: flex; flex-direction: column; flex: 1;
  border-top: 3px solid var(--clr-orange);
}
.aer-card__body--navy   { border-top-color: var(--clr-navy); }
.aer-card__body--orange { border-top-color: var(--clr-orange-2); }

.aer-card__series {
  font-size: 9px; font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--clr-orange); margin-bottom: 8px;
}
.aer-card__series--navy   { color: var(--clr-navy); }
.aer-card__series--orange { color: var(--clr-orange-2); }

.aer-card__title {
  font-family: var(--ff-display); font-size: 20px; font-weight: 500;
  line-height: 1.2; color: var(--clr-navy); margin-bottom: 8px;
}
.aer-card__sub {
  font-size: 12.5px; font-weight: 300; color: var(--clr-text);
  line-height: 1.65; margin-bottom: 14px; flex: 1;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.aer-card__stats {
  display: flex; gap: 16px;
  padding: 10px 0; border-bottom: 1px solid var(--clr-border); margin-bottom: 14px;
}
.aer-card__stats > div { display: flex; flex-direction: column; }
.aer-card__stat-val {
  font-family: var(--ff-display); font-size: 19px; font-weight: 600;
  color: var(--clr-navy); line-height: 1;
}
.aer-card__stat-lbl {
  font-size: 9px; color: var(--clr-muted);
  text-transform: uppercase; letter-spacing: 0.08em; margin-top: 2px;
}
.aer-card__footer {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 12px; border-top: 1px solid var(--clr-border);
}
.aer-card__date { font-family: var(--ff-mono); font-size: 10px; color: var(--clr-muted); }
.aer-card__cta {
  font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--clr-orange); transition: letter-spacing 0.2s;
}
.aer-card:hover .aer-card__cta { letter-spacing: 0.15em; }

/* ============================================================
   12. SERIES PANEL
   ============================================================ */
.aer-series {
  background: var(--clr-navy);
  border-radius: var(--radius-xl); padding: 48px;
  display: grid; grid-template-columns: 280px 1fr; gap: 48px; align-items: start;
}
.aer-series__heading {
  font-family: var(--ff-display); font-size: clamp(28px,3.5vw,44px);
  font-weight: 400; color: var(--clr-white); line-height: 1.2;
  letter-spacing: -0.01em; margin-bottom: 12px;
}
.aer-series__heading em { font-style: italic; color: var(--clr-orange-3); }
.aer-series__desc { font-size: 13.5px; color: rgba(255,255,255,0.5); line-height: 1.7; }
.aer-series__chips { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.aer-series__chip {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius-md); padding: 16px 18px;
  display: flex; flex-direction: column; gap: 4px;
  transition: background 0.2s, border-color 0.2s;
}
.aer-series__chip:hover { background: rgba(255,255,255,0.08); border-color: rgba(232,86,58,0.3); }
.aer-series__chip-icon { font-size: 18px; }
.aer-series__chip-name { font-family: var(--ff-display); font-size: 16px; font-weight: 500; color: var(--clr-white); }
.aer-series__chip-desc { font-size: 12px; color: rgba(255,255,255,0.4); line-height: 1.6; }
.aer-series__chip-count { font-family: var(--ff-mono); font-size: 10px; color: var(--clr-orange-3); }

/* ============================================================
   13. SUBSCRIBE SECTION
   ============================================================ */
.aer-subscribe { max-width: 560px; margin: 0 auto; text-align: center; }
.aer-subscribe__eyebrow {
  font-size: 10px; font-weight: 500; letter-spacing: 0.3em; text-transform: uppercase;
  color: rgba(255,255,255,0.3); margin-bottom: 16px; font-family: var(--ff-body);
}
.aer-subscribe__title {
  font-family: var(--ff-display); font-size: clamp(28px,4vw,44px);
  font-weight: 400; color: var(--clr-white); line-height: 1.2;
  letter-spacing: -0.01em; margin-bottom: 14px;
}
.aer-subscribe__title em { font-style: italic; color: var(--clr-orange-3); }
.aer-subscribe__body {
  font-size: 14px; color: rgba(255,255,255,0.55); line-height: 1.7;
  margin-bottom: 28px;
}
.aer-subscribe__form {
  display: flex; max-width: 440px; margin: 0 auto 10px;
  border: 1.5px solid rgba(255,255,255,0.2);
  border-radius: var(--radius-sm); overflow: hidden;
  transition: border-color 0.2s;
}
.aer-subscribe__form:focus-within { border-color: var(--clr-orange); }
.aer-subscribe__input {
  flex: 1; background: rgba(255,255,255,0.08); border: none; outline: none;
  padding: 13px 16px; font-size: 14px; color: var(--clr-white); font-family: var(--ff-body);
  min-width: 0;
}
.aer-subscribe__input::placeholder { color: rgba(255,255,255,0.35); }
.aer-subscribe__btn {
  background: var(--clr-orange); color: var(--clr-white);
  padding: 13px 22px; font-size: 12px; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap;
  transition: background 0.2s;
}
.aer-subscribe__btn:hover { background: #d44a30; }
.aer-subscribe__note { font-size: 11px; color: rgba(255,255,255,0.3); }

/* ============================================================
   14. SCROLL REVEAL ANIMATIONS
   ============================================================ */
.aer-reveal {
  opacity: 0; transform: translateY(18px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.aer-revealed { opacity: 1; transform: translateY(0); }
.aer-card:nth-child(2).aer-reveal { transition-delay: 0.08s; }
.aer-card:nth-child(3).aer-reveal { transition-delay: 0.16s; }
.aer-card:nth-child(4).aer-reveal { transition-delay: 0.24s; }
.aer-card:nth-child(5).aer-reveal { transition-delay: 0.32s; }
.aer-card:nth-child(6).aer-reveal { transition-delay: 0.40s; }

/* ============================================================
   15. RESPONSIVE — TABLET ≤ 1024px
   ============================================================ */
@media (max-width: 1024px) {
  .aer-hero__inner    { grid-template-columns: 1fr; }
  .aer-hero__chips    { display: none; }
  .aer-grid           { grid-template-columns: repeat(2,1fr); }
  .aer-featured       { grid-template-columns: 1fr; }
  .aer-featured__cover{ min-height: 300px; }
  .aer-series         { grid-template-columns: 1fr; }
  .aer-section        { padding: 48px 32px; }
}

/* ============================================================
   16. RESPONSIVE — MOBILE ≤ 768px
   ============================================================ */
@media (max-width: 768px) {
  .aer-section        { padding: 40px 20px; }
  .aer-announcement   { padding: 9px 16px; font-size: 10px; }
  .aer-hero           { padding: 48px 20px 64px; }
  .aer-hero::after    { height: 40px; }
  .aer-hero__title    { font-size: clamp(36px,9vw,56px); }
  .aer-hero__stats    { gap: 16px; }
  .aer-hero__divider  { display: none; }
  .aer-filter-bar     { padding: 0 16px; }
  .aer-grid           { grid-template-columns: 1fr; }
  .aer-featured__body { padding: 28px 24px; border-left: none; border-top: 4px solid var(--clr-orange); }
  .aer-series         { padding: 32px 20px; }
  .aer-series__chips  { grid-template-columns: 1fr; }
  .aer-sect-head      { flex-wrap: wrap; gap: 8px; }
  .aer-sect-head__line{ display: none; }
  .aer-subscribe__form{ flex-direction: column; border-radius: var(--radius-md); }
  .aer-subscribe__input, .aer-subscribe__btn { border-radius: var(--radius-sm); padding: 12px 16px; }
}

/* ============================================================
   17. RESPONSIVE — SMALL PHONES ≤ 480px
   ============================================================ */
@media (max-width: 480px) {
  .aer-section  { padding: 28px 16px; }
  .aer-grid     { grid-template-columns: 1fr; }
  .aer-series__chips { grid-template-columns: 1fr; }
  .aer-hero__title { font-size: clamp(30px,9vw,44px); }
  .aer-featured__stats { gap: 16px; flex-wrap: wrap; }
}