/* ================================================================
   HERO SECTION — BRIGHT ALTERNATIVE THEME
   GhanaTRVL | Alternative to the default dark-moody hero in custom-v4.css

   HOW TO USE:
   Load this stylesheet AFTER custom-v4.css to override the hero
   section only. All other site sections remain unchanged.

   DESIGN INTENT:
   The default theme uses heavy black/violet overlays that produce a
   dramatic, editorial look. This alternative lifts those layers and
   replaces them with warm golden and green tints, letting the Ghana
   landscape photography dominate while keeping text legible.
================================================================ */


/* ----------------------------------------------------------------
   LAYER 1 — scrim: remove the flat dark coat entirely
---------------------------------------------------------------- */
.h-scrim {
  background: rgba(255, 248, 210, 0.06); /* warm barely-there wash */
}


/* ----------------------------------------------------------------
   LAYER 2 — directional gradient: soft warm anchor instead of black
   — keeps a thin shadow at the bottom left for text legibility
   — removes the heavy right-to-left black curtain
---------------------------------------------------------------- */
.h-grad {
  background:
    linear-gradient(
      to right,
      rgba(35, 15, 66, 0.38) 0%,      /* subtle violet anchor left for text */
      rgba(35, 15, 66, 0.10) 38%,
      transparent 100%
    ),
    linear-gradient(
      to top,
      rgba(35, 15, 66, 0.42) 0%,      /* ground shadow — keeps stats readable */
      rgba(35, 15, 66, 0.06) 30%,
      transparent 65%
    );
}


/* ----------------------------------------------------------------
   LAYER 3 — atmosphere: sunshine palette
   Top-right: golden sun corona
   Bottom-left: savanna green glow
   Replaces the heavy violet/dark-purple radials
---------------------------------------------------------------- */
.h-atm {
  background:
    radial-gradient(
      ellipse 70% 60% at 85% 0%,
      rgba(246, 238, 39, 0.22) 0%,    /* bright yellow sun halo top-right */
      rgba(246, 200, 0, 0.08) 45%,
      transparent 70%
    ),
    radial-gradient(
      ellipse 55% 50% at 8% 92%,
      rgba(197, 220, 100, 0.20) 0%,   /* green glow at bottom-left */
      transparent 60%
    );
}


/* ----------------------------------------------------------------
   LAYER 4 — Kente grid: more visible with brighter line tones
---------------------------------------------------------------- */
.h-patt {
  background-image:
    repeating-linear-gradient(
      0deg,
      transparent 0,
      transparent 30px,
      rgba(246, 238, 39, 0.09) 30px,
      rgba(246, 238, 39, 0.09) 32px
    ),
    repeating-linear-gradient(
      90deg,
      transparent 0,
      transparent 60px,
      rgba(197, 220, 100, 0.06) 60px,
      rgba(197, 220, 100, 0.06) 62px
    );
}


/* ----------------------------------------------------------------
   DECORATIVE RING — brighter yellow, more visible
---------------------------------------------------------------- */
.h-circle {
  border-color: rgba(246, 238, 39, 0.22);
}
.h-circle::before {
  border-color: rgba(197, 220, 100, 0.16);
}


/* ----------------------------------------------------------------
   ACCENT BAR — increase brightness
---------------------------------------------------------------- */
.h-bar {
  opacity: 0.45;
}


/* ----------------------------------------------------------------
   HERO TEXT — add shadow for legibility on lighter background
---------------------------------------------------------------- */
.hero-h1 {
  text-shadow:
    0 2px 14px rgba(35, 15, 66, 0.5),
    0 1px 4px rgba(0, 0, 0, 0.3);
}

.hero-intro {
  color: rgba(255, 255, 255, 0.88);
  text-shadow: 0 1px 8px rgba(35, 15, 66, 0.4);
}

.h-eyebrow {
  text-shadow: 0 1px 6px rgba(35, 15, 66, 0.4);
}


/* ----------------------------------------------------------------
   AUDIENCE PILLS — brighter secondary pill
---------------------------------------------------------------- */
.ap.b {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.45);
  color: rgba(255, 255, 255, 0.92);
}
.ap.b:hover {
  background: rgba(246, 238, 39, 0.22);
  border-color: var(--ye);
  color: var(--ye);
}


/* ----------------------------------------------------------------
   SEARCH BAR — brighter border, lighter input field
---------------------------------------------------------------- */
.hsearch {
  border-color: rgba(246, 238, 39, 0.5);
  box-shadow: 0 4px 24px rgba(246, 238, 39, 0.08);
}
.hsearch input {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
}
.hsearch input::placeholder {
  color: rgba(255, 255, 255, 0.55);
}
.hsearch:focus-within {
  border-color: var(--ye);
  box-shadow: 0 0 0 3px rgba(246, 238, 39, 0.18);
}


/* ----------------------------------------------------------------
   EVENT BOX (right column) — bright glass card
---------------------------------------------------------------- */
.h-event-box {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(246, 238, 39, 0.32);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 8px 32px rgba(35, 15, 66, 0.18);
}


/* ----------------------------------------------------------------
   ARTICLE BOX (right column) — bright glass card
---------------------------------------------------------------- */
.h-article-box {
  background: rgba(255, 255, 255, 0.11);
  border-color: rgba(197, 220, 100, 0.32);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 8px 28px rgba(35, 15, 66, 0.14);
}


/* ----------------------------------------------------------------
   STATS BAR — bright white frosted glass instead of dark violet
---------------------------------------------------------------- */
 /* .h-statsbar {
  background: rgba(255, 255, 255, 0.90);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-top: 2px solid rgba(246, 238, 39, 0.55);
  box-shadow: 0 -4px 24px rgba(35, 15, 66, 0.10);
}

.hstat {
  border-right-color: rgba(89, 45, 140, 0.14);
}

.hstat-n {
  color: var(--mv);
}

.hstat-l {
  color: rgba(35, 15, 66, 0.50);
}
.hstat-l strong {
  color: var(--dv);
}  */