/* Landing page tidy-up (landing-tidy.js) */

/* hero search */
.lp-search { width: min(540px, 100%); margin: 22px auto 6px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.lp-search-box { min-width: 0; }
.lp-search-box { display: flex; align-items: center; gap: 10px; height: 54px; padding: 0 22px; border-radius: 999px;
  background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.22); color: rgba(255,255,255,.75);
  backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%);
  box-shadow: 0 10px 30px rgba(0,0,0,.25); transition: border-color .15s, background .15s; }
.lp-search-box:focus-within { border-color: rgba(255,255,255,.55); background: rgba(255,255,255,.16); }
.lp-search-box input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; color: #fff; font: 500 1rem var(--font-body, inherit); }
.lp-search-box input::placeholder { color: rgba(255,255,255,.7); }
.lp-search-go { height: 54px; padding: 0 26px; border-radius: 999px; border: 0; background: var(--red); color: #fff; font: 700 .95rem var(--font-body, inherit); cursor: pointer; box-shadow: 0 10px 26px rgba(200,16,46,.35); }
.lp-search-go:hover { background: var(--red-bright); }
.lp-chips { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 4px; }
.lp-chips button { padding: 6px 13px; border-radius: 999px; border: 1px solid rgba(255,255,255,.25); background: rgba(0,0,0,.22); color: #fff; font: 600 .78rem var(--font-body, inherit); cursor: pointer; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.lp-chips button:hover { background: rgba(255,255,255,.18); }
@media (max-width: 560px) {
  .lp-search { width: auto; max-width: calc(100vw - 24px); margin: 16px 12px 4px; gap: 6px; box-sizing: border-box; }
  .lp-search-box { height: 48px; padding: 0 16px; border-radius: 999px; }
  .lp-search-box input { font-size: .95rem; }
  .lp-search-go { height: 48px; padding: 0 18px; border-radius: 999px; font-size: .88rem; }
  .lp-chips button:nth-child(n+5) { display: none; }
}

/* Awards: compact band when there are no nominees yet */
#awardsSection.lp-aw-empty { padding-top: 48px; padding-bottom: 48px; }
#awardsSection.lp-aw-empty .awards-filter-block, #awardsSection.lp-aw-empty [class*="awards-cat"] { display: none; }
.lp-aw-cta { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; padding: 22px 24px; border-radius: 18px;
  background: linear-gradient(135deg, rgba(244,176,0,.12), rgba(200,16,46,.10)); border: 1px solid rgba(244,176,0,.28); }
.lp-aw-cta div { display: grid; gap: 4px; max-width: 620px; }
.lp-aw-cta b { font-size: 1.1rem; color: var(--text-1); }
.lp-aw-cta span { font-size: .9rem; color: var(--text-2, var(--muted)); line-height: 1.5; }

/* How it works: one compact row on a calm background, easy to read */
.hiw-section { padding: 64px 0 !important;
  background: linear-gradient(180deg, rgba(20,16,17,.90) 0%, rgba(20,16,17,.45) 30%, rgba(20,16,17,.45) 70%, rgba(20,16,17,.92) 100%),
              url('/images/africa/culture-accra-dancers.jpg') center 35% / cover no-repeat !important; }
[data-theme="light"] .hiw-section {
  background: linear-gradient(180deg, rgba(250,245,242,.92) 0%, rgba(250,245,242,.40) 30%, rgba(250,245,242,.40) 70%, rgba(250,245,242,.94) 100%),
              url('/images/africa/culture-accra-dancers.jpg') center 35% / cover no-repeat !important; }
.hiw-section .hiw-title { color: #fff; text-shadow: 0 2px 18px rgba(0,0,0,.55) !important; }
[data-theme="light"] .hiw-section .hiw-title { color: var(--text-1); text-shadow: 0 1px 14px rgba(255,255,255,.85) !important; }
.hiw-section .hiw-title { margin-bottom: 28px; font-size: clamp(1.7rem, 3vw, 2.4rem); text-shadow: none !important; }
.hiw-section .hiw-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; max-width: none; margin: 0; align-items: stretch; }
.hiw-section .hiw-connector { display: none; }
.hiw-section .hiw-step { max-width: none; min-width: 0; padding: 22px 20px; border-radius: 20px; text-align: left; align-items: flex-start;
  background: rgba(18,14,16,.58); border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%);
  box-shadow: 0 1px 0 rgba(255,255,255,.08) inset, 0 14px 34px rgba(0,0,0,.30); }
.hiw-section .hiw-step:hover { background: rgba(18,14,16,.68); }
.hiw-section .hiw-step-title { color: #fff !important; }
.hiw-section .hiw-step-desc { color: rgba(255,255,255,.85) !important; }
[data-theme="light"] .hiw-section .hiw-step { background: rgba(255,255,255,.78); border-color: rgba(255,255,255,.9); box-shadow: 0 12px 30px rgba(60,20,30,.12); }
[data-theme="light"] .hiw-section .hiw-step-title { color: var(--text-1) !important; }
[data-theme="light"] .hiw-section .hiw-step-desc { color: var(--text-2) !important; }
.hiw-section .hiw-icon { width: 48px; height: 48px; border-radius: 14px; }
.hiw-section .hiw-step-title { text-shadow: none !important; font-size: 1.05rem; }
.hiw-section .hiw-step-desc { text-shadow: none !important; font-size: .88rem; line-height: 1.55; }
@media (max-width: 760px) { .hiw-section .hiw-steps { grid-template-columns: 1fr; } }

/* About: the circles keep the Gabon flag colours, green, yellow and blue (eventme-africa.css) */

/* the top bar search hides while the home page search is on screen (landing-tidy.js) */
#navSearchWrap { transition: opacity 220ms ease, transform 220ms ease, max-width 260ms ease, margin 260ms ease, padding 260ms ease, border-width 260ms ease; }
#navSearchWrap.lp-hide { opacity: 0; transform: scale(.85); max-width: 0 !important; padding-left: 0 !important; padding-right: 0 !important; margin: 0 !important; border-width: 0 !important; pointer-events: none; overflow: hidden; }
@media (prefers-reduced-motion: reduce) { #navSearchWrap { transition: none; } }
/* the preset chips repeated the search and wrapped onto two lines: the hero is search and two buttons */
.lp-chips { display: none !important; }
.lp-search + .hero-actions { margin-top: 18px; }
/* a taller hero on laptops and big screens, so the carousel photos show people, not a thin strip */
@media (min-width: 1024px) {
  .hero { min-height: clamp(640px, 88vh, 920px); }
  .hero-slide { background-position: center 35%; }
}

/* the two hero buttons line up under the search row: same width, two equal halves,
   search bar height and shape, quiet dark glass so red stays on Search only.
   The doubled :is(#em-btn-shape) lifts these above the site wide 38px button rule. */
.hero:is(#em-btn-shape, .hero):is(#em-btn-shape, .hero) .lp-search + .hero-actions { display: grid !important; grid-template-columns: 1fr 1fr; gap: 8px; width: min(540px, 100%); margin: 12px auto 0 !important; padding: 0; box-sizing: border-box; }
.hero:is(#em-btn-shape, .hero):is(#em-btn-shape, .hero) .lp-search + .hero-actions > .btn { display: inline-flex !important; align-items: center; justify-content: center; gap: 8px; width: 100%; min-width: 0; height: 48px !important; margin: 0 !important; padding: 0 16px !important;
  border-radius: 999px !important; border: 1px solid rgba(255,255,255,.28) !important; background: rgba(12,6,9,.45) !important; color: #fff !important;
  font: 600 .95rem var(--font-body, inherit) !important; letter-spacing: 0 !important; text-transform: none !important; box-shadow: none !important; animation: none !important;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: border-color .2s, background .2s; }
.hero:is(#em-btn-shape, .hero):is(#em-btn-shape, .hero) .lp-search + .hero-actions > .btn:hover { border-color: rgba(255,92,122,.75) !important; background: rgba(12,6,9,.62) !important; transform: none !important; }
.hero:is(#em-btn-shape, .hero):is(#em-btn-shape, .hero) .lp-search + .hero-actions > .btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.hero:is(#em-btn-shape, .hero):is(#em-btn-shape, .hero) .lp-search + .hero-actions > .btn::before, .hero:is(#em-btn-shape, .hero):is(#em-btn-shape, .hero) .lp-search + .hero-actions > .btn::after { display: none !important; }
.hero:is(#em-btn-shape, .hero):is(#em-btn-shape, .hero) .lp-search + .hero-actions .pub-label { font: inherit !important; color: inherit !important; }
.hero:is(#em-btn-shape, .hero):is(#em-btn-shape, .hero) .lp-search + .hero-actions .pub-icon { font-size: 1.1rem; line-height: 1; color: inherit !important; background: none !important; width: auto !important; height: auto !important; }
@media (max-width: 560px) {
  .hero:is(#em-btn-shape, .hero):is(#em-btn-shape, .hero) .lp-search + .hero-actions { width: auto; max-width: calc(100vw - 24px); margin: 10px 12px 0 !important; gap: 6px; }
  .hero:is(#em-btn-shape, .hero):is(#em-btn-shape, .hero) .lp-search + .hero-actions > .btn { height: 46px !important; font-size: .9rem !important; padding: 0 10px !important; }
}

/* footer: the same width and edges as the red "What will you share next?" card above it */
.footer-grid, .footer-bottom { padding-left: 0 !important; padding-right: 0 !important; }
/* "Coming up next": a proper mini event card filling its column, photo on top */
.footer-brand .footer-extra { max-width: none; width: 100%; }
.fx-track > .fx-next, .fx-next { flex-direction: column; align-items: stretch; gap: 0; padding: 0; min-height: 0; overflow: hidden; }
.fx-next .fx-img { width: 100%; }
.fx-next img { width: 100% !important; height: 150px !important; border-radius: 0 !important; object-fit: cover; }
.fx-next .fx-live { top: 10px; left: 10px; }
.fx-next-txt { padding: 12px 14px 14px; gap: 4px; }
.fx-next-title { font-size: 1.02rem; }
@media (max-width: 480px) { .fx-next img { height: 170px !important; } }

/* ── Community preview: one clear way in ──
   A solid red button with plain words, the whole faded preview opens the
   Community too, and the button glows softly once when it first comes into view. */
.feed-teaser-wrap { cursor: pointer; }
.feed-teaser-curtain .feed-open-btn {
  display: inline-flex !important; align-items: center !important; gap: 9px !important;
  padding: 13px 26px !important; border-radius: 999px !important; border: 0 !important;
  background: linear-gradient(135deg, #C8102E, #ff3a5c) !important; color: #fff !important;
  font-size: 1rem !important; font-weight: 700 !important; letter-spacing: 0 !important; text-transform: none !important;
  box-shadow: 0 10px 28px rgba(200,16,46,.45) !important; pointer-events: auto; cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease;
}
.feed-teaser-curtain .feed-open-btn:hover { transform: translateY(-1px); box-shadow: 0 14px 34px rgba(200,16,46,.55) !important; }
.feed-teaser-curtain .feed-open-btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.feed-teaser-curtain .feed-open-btn.is-glow { animation: feedGlow 1.8s ease-out 1; }
@keyframes feedGlow {
  0%   { box-shadow: 0 10px 28px rgba(200,16,46,.45), 0 0 0 0 rgba(255,58,92,.55); }
  60%  { box-shadow: 0 10px 28px rgba(200,16,46,.45), 0 0 0 16px rgba(255,58,92,0); }
  100% { box-shadow: 0 10px 28px rgba(200,16,46,.45), 0 0 0 0 rgba(255,58,92,0); }
}
@media (prefers-reduced-motion: reduce) { .feed-teaser-curtain .feed-open-btn.is-glow { animation: none; } }