/* ==========================================================================
   Reality Check Guide — custom layer on top of the original template CSS.
   Only additive: new components (video embed, journey, dashboards) + fixes
   called out in the audit (nav active state, mobile logo overlap, z-index,
   spacing/polish). Original palette preserved: gold #ffc430 / #f5a425,
   black #000/#020202, white #fff.
   ========================================================================== */

:root {
  --rcg-gold: #ffc430;
  --rcg-gold-deep: #f5a425;
  --rcg-black: #020202;
  --rcg-ink: #303030;
}

/* ---- Hero: dark on-theme gradient replacing the removed self-hosted video --- */
.main-banner.rcg-hero {
  position: relative;
  min-height: 640px;
  display: flex;
  align-items: center;
  background:
    radial-gradient(1200px 600px at 70% 20%, rgba(255, 196, 48, 0.18), transparent 60%),
    linear-gradient(135deg, #000 0%, #141414 55%, #1d1d1d 100%);
  overflow: hidden;
}
.main-banner.rcg-hero .video-overlay {
  position: relative;
  width: 100%;
  padding: 120px 0 80px;
  background: transparent;
}

/* ---- Sticky nav active state fix (per current page) ---------------------- */
.header-area .main-nav .nav li a.active {
  color: var(--rcg-gold) !important;
}

/* ---- Mobile: stop logo overlapping the hero face; fix rotated vertical text --- */
@media (max-width: 767px) {
  .header-area .logo img,
  .header-area .main-nav .logo img { max-width: 96px !important; width: 96px !important; }
  .main-banner.rcg-hero { min-height: 520px; }
  .main-banner.rcg-hero .video-overlay { padding: 110px 0 60px; }
  .caption h2 { font-size: 30px !important; line-height: 1.2 !important; }
  /* Any rotated vertical labels must never sit above the sticky nav */
  .bottom-text, .discover-your-strengths .bottom-text { z-index: 1 !important; }
}
.header-area { z-index: 1030 !important; }
.discover-your-strengths .bottom-text { position: relative; z-index: 1; }

/* ---- Responsive video embed (Loom / YouTube) + empty state --------------- */
.video-embed {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.18);
}
.video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-embed--empty {
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
  border: 1px dashed rgba(255, 196, 48, 0.5);
}
.video-embed__placeholder { text-align: center; color: #fff; padding: 24px; }
.video-embed__placeholder i { font-size: 54px; color: var(--rcg-gold); margin-bottom: 12px; display: block; }
.video-embed__placeholder p { color: #fff; font-weight: 600; margin: 0 0 6px; }
.video-embed__placeholder span { color: rgba(255, 255, 255, 0.7); font-size: 13px; }

/* ---- Loading / error states for async islands --------------------------- */
.rcg-loading, .rcg-error, .rcg-empty {
  text-align: center; padding: 60px 20px; color: #666;
}
.rcg-loading i { color: var(--rcg-gold); font-size: 40px; }
.rcg-error { color: #b02a37; }
.rcg-spinner {
  width: 40px; height: 40px; border: 4px solid rgba(255, 196, 48, 0.25);
  border-top-color: var(--rcg-gold); border-radius: 50%;
  margin: 0 auto 16px; animation: rcg-spin 0.9s linear infinite;
}
@keyframes rcg-spin { to { transform: rotate(360deg); } }

/* ---- Journey feed -------------------------------------------------------- */
.journey-feed { position: relative; margin-top: 20px; }
.journey-entry {
  background: #fff; border-left: 4px solid var(--rcg-gold);
  border-radius: 10px; padding: 24px 28px; margin-bottom: 22px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
}
.journey-entry .journey-date {
  color: var(--rcg-gold-deep); font-weight: 600; font-size: 14px; text-transform: uppercase; letter-spacing: .5px;
}
.journey-entry h4 { color: #1a1a1a; margin: 6px 0 10px; font-size: 20px; font-weight: 700; }
.journey-entry p { color: #555; line-height: 1.7; margin-bottom: 14px; }

/* ---- Badges -------------------------------------------------------------- */
.rcg-badge {
  display: inline-block; padding: 5px 12px; border-radius: 20px; font-size: 12px;
  font-weight: 600; margin: 0 6px 6px 0;
}
.rcg-badge--verified { background: #1e7e34; color: #fff; }
.rcg-badge--featured { background: var(--rcg-gold); color: #222; }
.rcg-badge--top { background: #0c5460; color: #fff; }
.rcg-badge--free { background: #1e7e34; color: #fff; }

/* ---- Simple auth / dashboard shell -------------------------------------- */
.rcg-panel {
  background: #fff; border-radius: 14px; padding: 32px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.1); margin-bottom: 28px;
}
.rcg-panel h3 { color: #1a1a1a; font-weight: 700; margin-bottom: 18px; }
.rcg-field { margin-bottom: 16px; }
.rcg-field label { display: block; font-weight: 600; color: #333; margin-bottom: 6px; }
.rcg-field input, .rcg-field textarea, .rcg-field select {
  width: 100%; padding: 12px 14px; border: 1.5px solid #ced4da; border-radius: 8px;
  font-size: 15px; font-family: inherit;
}
.rcg-field input:focus, .rcg-field textarea:focus, .rcg-field select:focus {
  outline: none; border-color: var(--rcg-gold); box-shadow: 0 0 0 3px rgba(255, 196, 48, 0.2);
}
.rcg-btn {
  background: var(--rcg-black); color: #fff; border: none; border-radius: 30px;
  padding: 12px 28px; font-weight: 600; cursor: pointer; transition: background .2s; font-size: 15px;
}
.rcg-btn:hover { background: var(--rcg-gold); color: #222; }
.rcg-btn--ghost { background: transparent; color: #222; border: 1.5px solid #ccc; }
.rcg-btn--danger { background: #b02a37; }
.rcg-btn--sm { padding: 7px 16px; font-size: 13px; }
.rcg-alert { padding: 14px 18px; border-radius: 8px; margin-bottom: 18px; font-size: 14px; }
.rcg-alert--ok { background: #d4edda; color: #155724; }
.rcg-alert--err { background: #f8d7da; color: #721c24; }
.rcg-alert--info { background: #e2f0fb; color: #0b5394; }
.rcg-authgate { max-width: 460px; margin: 60px auto; }

/* ---- Legal / prose pages ------------------------------------------------- */
.rcg-prose { background: #fff; padding: 40px; border-radius: 12px; box-shadow: 0 4px 15px rgba(0,0,0,.08); }
.rcg-prose h1, .rcg-prose h2, .rcg-prose h3 { color: #1a1a1a; }
.rcg-prose p, .rcg-prose li { color: #444; line-height: 1.8; }

/* ---- Spacing polish ------------------------------------------------------ */
.section-pad { padding: 90px 0; }
.rcg-muted { color: #6c757d; }
.rcg-table { width: 100%; border-collapse: collapse; }
.rcg-table th, .rcg-table td { padding: 12px; border-bottom: 1px solid #eee; text-align: left; font-size: 14px; }
.rcg-table th { color: #333; font-weight: 700; }

/* ---- Inner-page banners: ported original photo + legible headings ---------
   Restores the original images.png banner background (was replaced by a flat
   dark gradient). A soft dark overlay keeps the heading readable — matches the
   original look and improves contrast. */
.inner-banner { position: relative; }
.inner-banner::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(0,0,0,.68) 0%, rgba(0,0,0,.42) 55%, rgba(0,0,0,.28) 100%);
  z-index: 0;
}
.inner-banner .banner-wrapper { position: relative; z-index: 2; width: 100%; }
.inner-banner .hd-70 {
  color: #fff; font-family: 'Playfair Display', serif; font-weight: 800;
  font-size: 52px; line-height: 1.1; text-shadow: 0 2px 12px rgba(0,0,0,.35);
}
.inner-banner .hd-20 { color: #fff; opacity: .95; }
@media (max-width: 767px) {
  .inner-banner .hd-70 { font-size: 34px; }
}

/* ---- Featured video: 2-column (embed + caption) layout ---------------------
   The original template positioned .featured-video-item-text absolutely to
   overlay it on a full-width <video>. Our layout places the caption BESIDE the
   Loom/YouTube embed, so it must sit in normal flow (not absolute). */
.featured-video .featured-video-item-text {
  position: static !important;
  top: auto; left: auto; right: auto; bottom: auto;
  padding: 0 10px;
}
.featured-video #featured-video-embed { margin-bottom: 10px; }

/* ---- Category cards (rendered via client JS, so must be GLOBAL, not scoped) --
   Astro scopes page <style> to build-time elements; these cards are injected at
   runtime and would otherwise fall back to the template's default a{color:#3CF}
   and Bootstrap's blue .btn-primary. Port the intended styling globally. */
.category-card { background:#fff; border-radius:12px; overflow:hidden; box-shadow:0 4px 15px rgba(0,0,0,.1); transition:all .3s ease; border:1px solid #e9ecef; }
.category-card:hover { transform:translateY(-5px); box-shadow:0 8px 25px rgba(0,0,0,.15); }
.category-image-wrapper { width:100%; height:200px; overflow:hidden; position:relative; }
.category-image { width:100%; height:100%; object-fit:cover; transition:transform .3s ease; }
.category-card:hover .category-image { transform:scale(1.1); }
.category-content { padding:25px; }
.category-title { margin-bottom:15px; font-size:22px; font-weight:600; }
.category-title a, .category-title a:hover { color:#1a1a1a; text-decoration:none; }
.category-title a:hover { color:#ffc430; }
.category-description { color:#555; font-size:15px; line-height:1.6; margin-bottom:20px; min-height:48px; }
.category-action .btn, .category-action .btn:hover {
  background:linear-gradient(135deg,#ffc430 0%,#df9816 100%) !important;
  border:none !important; color:#fff !important; padding:10px 25px; border-radius:25px; font-weight:600;
}

/* ==========================================================================
   Top bar layout + mobile hamburger expansion + consolidated auth tabs
   ========================================================================== */
.header-area .main-nav { position: relative; display: flex; align-items: center; justify-content: space-between; }
.header-area .main-nav .logo .logo-img {
  position: static !important; top: auto !important; width: auto !important;
  max-width: 148px !important; height: auto !important;
}
.header-area .main-nav .nav { display: flex; align-items: center; gap: 4px; }
.header-area .main-nav .nav li a { font-size: 15px; white-space: nowrap; }
.header-area .main-nav .nav li.signup a { padding: 8px 18px !important; }

/* Hamburger trigger hidden on desktop, shown on mobile */
.header-area .menu-trigger { display: none; }

@media (max-width: 991px) {
  .header-area .main-nav .logo .logo-img { max-width: 110px !important; }
  .header-area .menu-trigger { display: block; }
  .header-area .main-nav .nav {
    display: none !important; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: #0d0d0d; padding: 6px 0; margin: 0;
    box-shadow: 0 10px 24px rgba(0,0,0,.35); border-top: 3px solid #ffc430; z-index: 1040;
  }
  .header-area .main-nav .nav.rcg-open { display: flex !important; }
  .header-area .main-nav .nav li { width: 100%; margin: 0 !important; }
  .header-area .main-nav .nav li a { display: block; padding: 13px 24px; color: #fff !important; font-size: 16px; }
  .header-area .main-nav .nav li a.active { color: #ffc430 !important; }
  .header-area .main-nav .nav li.signup { background: transparent !important; border-radius: 0 !important; padding: 0 !important; }
  .header-area .main-nav .nav li.signup a { color: #ffc430 !important; font-weight: 700; }
}

/* Consolidated login / sign-up tabs */
.rcg-authtabs { display: flex; gap: 8px; margin-bottom: 22px; }
.rcg-authtab {
  flex: 1; padding: 12px; border: none; background: #eef0f2; border-radius: 10px;
  font-weight: 600; font-size: 15px; cursor: pointer; color: #555; transition: all .2s;
}
.rcg-authtab.active { background: #000; color: #fff; }

/* Creator filter chips */
.rcg-filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 24px; }
.rcg-chip {
  background: #fff; border: 1.5px solid #ddd; border-radius: 22px; padding: 7px 16px;
  font-size: 14px; font-weight: 600; color: #555; cursor: pointer; transition: all .2s;
}
.rcg-chip:hover { border-color: #ffc430; color: #1a1a1a; }
.rcg-chip.active { background: #000; color: #fff; border-color: #000; }

/* ---- Mobile header: force compact logo + always-visible dropdown ---------- */
@media (max-width: 991px) {
  .header-area { min-height: 64px; }
  .header-area .main-nav { min-height: 64px; }
  .header-area .main-nav .logo img,
  .header-area .main-nav .logo .logo-img {
    max-width: 92px !important; width: 92px !important; height: auto !important;
  }
  .header-area .menu-trigger { position: relative; z-index: 1041; }
  /* Anchor the dropdown to the viewport so a tall header can't hide it */
  .header-area .main-nav .nav.rcg-open {
    position: fixed !important; top: 64px; left: 0; right: 0; max-height: calc(100vh - 64px);
    overflow-y: auto;
  }
}

/* ---- Mobile dropdown: force dark background + readable link colors -------- */
@media (max-width: 991px) {
  .header-area .main-nav .nav.rcg-open { background: #0d0d0d !important; padding: 6px 0 !important; }
  .header-area .main-nav .nav.rcg-open li { background: transparent !important; }
  .header-area .main-nav .nav.rcg-open li a { color: #ffffff !important; }
  .header-area .main-nav .nav.rcg-open li a.active,
  .header-area .main-nav .nav.rcg-open li.signup a { color: #ffc430 !important; }
}

/* ---- Hero: restore the original background video --------------------------
   Full-bleed autoplay/muted/loop video with a dark scrim so the caption stays
   readable over any frame. Falls back to solid black if the video can't load. */
.main-banner.rcg-hero { background: #000 !important; }
.main-banner.rcg-hero::before,
.main-banner.rcg-hero::after { display: none !important; } /* drop the old gradient glow/pill */
.rcg-hero #bg-video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0; pointer-events: none;
}
.rcg-hero .video-overlay {
  position: relative; z-index: 2; width: 100%; padding: 120px 0 80px;
  background: linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.35) 50%, rgba(0,0,0,.55) 100%) !important;
}
@media (max-width: 767px) {
  .rcg-hero .video-overlay { padding: 110px 0 60px; }
}

/* ---- Hero caption: smaller + lighter so the video shows through ----------- */
.rcg-hero .video-overlay { background: transparent !important; padding: 90px 0 70px !important; }
.rcg-hero .caption {
  position: relative !important; top: auto !important; transform: none !important;
  max-width: 680px !important; padding: 24px 40px !important;
  background: rgba(2, 2, 2, 0.48) !important; border-radius: 60px !important;
  backdrop-filter: blur(2px);
}
.rcg-hero .caption h2 { font-size: 30px !important; margin-bottom: 12px !important; }
.rcg-hero .caption p { font-size: 14px !important; }
@media (max-width: 767px) {
  .rcg-hero .caption { max-width: 92% !important; padding: 20px 22px !important; }
  .rcg-hero .caption h2 { font-size: 24px !important; }
}

/* ---- Header nav font: robust sans-serif stack + cleaner size/weight --------
   The template declared `font-family: Familjen Grotesk` with NO fallback, so a
   slow/blocked webfont load dropped the nav to a serif. Give it a full sans
   stack and a slightly larger medium weight for legibility. */
.header-area .main-nav .nav li a {
  font-family: 'Familjen Grotesk', 'Poppins', system-ui, -apple-system,
    'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  letter-spacing: .2px;
}
.header-area .main-nav .nav li.signup a { font-weight: 600 !important; }

/* ---- Hero caption anchored to the BOTTOM of the video area ---------------- */
.main-banner.rcg-hero { align-items: flex-end !important; }
.rcg-hero .video-overlay { padding: 60px 0 48px !important; }
.rcg-hero .caption { margin-bottom: 0 !important; }

/* ---- How-it-work: center the big 01/02/03 number OVER each icon ----------- */
.how-it-work .how-it-work-item-image-number {
  display: flex; align-items: center; justify-content: center;
  position: relative; height: 130px; margin: 0 auto 10px;
}
.how-it-work .how-it-work-item-img,
.how-it-work .how-it-work-item-img1 {
  position: relative; z-index: 1; margin: 0 auto;
}
.how-it-work .how-it-work-item-image-number-text {
  position: absolute !important;
  top: 50% !important; left: 50% !important; right: auto !important;
  transform: translate(-50%, -50%) !important;
  z-index: 0 !important;               /* sits behind the icon, centered */
  font-size: 110px; line-height: 1;
  color: rgba(245, 164, 37, 0.18);     /* faint gold watermark, on-theme */
  pointer-events: none;
}
/* Keep all three cards' text consistently centered and aligned */
.how-it-work .how-it-work-item { text-align: center; }
.how-it-work .how-it-work-item-text { text-align: center; margin-top: 8px; }
.how-it-work .how-it-work-item-text h4 { min-height: 30px; }
.how-it-work .how-it-work-item-text p { min-height: 84px; }