/* =========================================================================
   FARM4GLASS — EXTRAS
   -------------------------------------------------------------------------
   Three unrelated things live here, all additive, none restyling an
   existing component:

     1. The version roadmap cards (now nested inside the Features section).
     2. The "Hidden" tags that mark a course students can't see yet.
     3. Landing views — sections that open from the nav instead of scrolling.

   Load order in index.html puts this after style.css, so the few places
   that share a selector with the portal win here.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. ROADMAP — what's in version 1, what's coming in version 2
   ------------------------------------------------------------------------- */

#landingPage .roadmap-section {
  background: transparent;
  padding: 0 6% 110px;
  max-width: 1280px;
  margin: 0 auto;
}

#landingPage .roadmap-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  max-width: 1180px;
  margin: 0 auto;
  align-items: start;
}

#landingPage .roadmap-card {
  background: rgba(255,255,255,.85);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.9);
  border-radius: 26px;
  padding: 34px 34px 30px;
  box-shadow: 0 16px 44px rgba(15,95,140,.13);
}

/* The shipped side is the confident one: solid blue, white type. The
   upcoming side stays quiet glass so the contrast does the explaining. */
#landingPage .roadmap-card.live {
  background: linear-gradient(150deg, #0f5f8c 0%, #167db5 62%, #38bdf8 140%);
  border-color: rgba(255,255,255,.22);
  box-shadow: 0 26px 62px rgba(15,95,140,.3);
}

#landingPage .roadmap-card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  padding-bottom: 18px;
  margin-bottom: 20px;
  border-bottom: 1px solid rgba(15,95,140,.14);
}
#landingPage .roadmap-card.live .roadmap-card-head { border-bottom-color: rgba(255,255,255,.26); }

#landingPage .roadmap-version {
  font-size: 26px;
  font-weight: 900;
  letter-spacing: -.03em;
  color: #0a1a2b;
}
#landingPage .roadmap-card.live .roadmap-version { color: #fff; }

#landingPage .roadmap-when {
  font-size: 13px;
  font-weight: 700;
  color: var(--blue-dark);
  background: rgba(22,125,181,.12);
  border-radius: 999px;
  padding: 6px 14px;
}
#landingPage .roadmap-card.live .roadmap-when {
  color: #0a1a2b;
  background: rgba(255,255,255,.9);
}

#landingPage .roadmap-list { list-style: none; margin: 0; padding: 0; }
#landingPage .roadmap-list li {
  position: relative;
  padding: 0 0 16px 34px;
  font-size: 15px;
  line-height: 1.6;
  color: #3d5f80;
}
#landingPage .roadmap-list li:last-child { padding-bottom: 0; }
#landingPage .roadmap-card.live .roadmap-list li { color: rgba(255,255,255,.92); }

#landingPage .roadmap-list strong {
  display: block;
  font-weight: 800;
  font-size: 15.5px;
  color: #0a1a2b;
  letter-spacing: -.01em;
  margin-bottom: 2px;
}
#landingPage .roadmap-card.live .roadmap-list strong { color: #fff; }

/* Shipped items get a check. Upcoming items get an open ring — the same
   marker the site uses for a lesson that hasn't been finished yet. */
#landingPage .roadmap-card.live .roadmap-list li::before {
  content: "";
  position: absolute; left: 0; top: 3px;
  width: 20px; height: 20px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m20 6-11 11-5-5'/%3E%3C/svg%3E") no-repeat center / contain;
}
#landingPage .roadmap-card.next .roadmap-list li::before {
  content: "";
  position: absolute; left: 3px; top: 7px;
  width: 13px; height: 13px;
  border: 2.5px solid rgba(22,125,181,.45);
  border-radius: 50%;
}

#landingPage .roadmap-note {
  font-size: 13.5px;
  line-height: 1.65;
  color: #4a6c8c;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid rgba(15,95,140,.14);
}

@media (max-width: 900px) {
  #landingPage .roadmap-grid { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  #landingPage .roadmap-section { padding: 0 20px 68px; }
  #landingPage .roadmap-card { padding: 26px 24px 24px; border-radius: 20px; }
  #landingPage .roadmap-version { font-size: 22px; }
  #landingPage .roadmap-list li { font-size: 14.5px; padding-left: 30px; }
}

/* ---- 1b. The roadmap nested inside Features ----
   Everything above was written for a full-width section of its own. Inside
   Features it already sits within that section's padding, so the outer
   padding, max-width, and bottom space all have to come back off — otherwise
   the cards indent away from the heading above them. Same #landingPage
   prefix, so these beat the rules above rather than losing to them. */

#landingPage .roadmap-section.roadmap-in-features {
  max-width: none;
  margin: 64px 0 0;
  padding: 48px 0 0;
  border-top: 1px solid rgba(22, 125, 181, .14);
}

/* The grid centres itself at 1180px on its own. In here it should just fill
   the Features section so it lines up with the feature cards above it. */
#landingPage .roadmap-in-features .roadmap-grid { max-width: none; }

#landingPage .roadmap-inline-head {
  max-width: 620px;
  margin: 0 auto 34px;
  text-align: center;
}
#landingPage .roadmap-inline-head h3 {
  margin: 0 0 10px;
  font-family: 'League Spartan', 'Montserrat', sans-serif;
  font-size: 28px;
  font-weight: 900;
  letter-spacing: -.02em;
  line-height: 1.2;
  color: #0a1a2b;
}
#landingPage .roadmap-inline-head p {
  margin: 0;
  font-family: 'Montserrat', sans-serif;
  font-size: 15px;
  line-height: 1.6;
  color: #4a6c8c;
}

@media (max-width: 700px) {
  #landingPage .roadmap-section.roadmap-in-features {
    margin-top: 48px;
    padding: 36px 0 0;
  }
  #landingPage .roadmap-inline-head h3 { font-size: 22px; }
}

/* -------------------------------------------------------------------------
   2. HIDDEN COURSES
   A course with hidden:true is filtered out of the catalog for students.
   Admins still see it, tagged, so it's obvious why students aren't.
   ------------------------------------------------------------------------- */

.cc-hidden-tag {
  display: inline-block;
  vertical-align: middle;
  border-radius: 999px;
  padding: 3px 10px;
  margin-left: 8px;
  background: rgba(100,116,139,.15);
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .04em;
}

/* Admin course list: the title button and the Hide/Show control sit side
   by side. A button can't nest inside a button, hence the wrapper. */
.admin-course-item { display: flex; align-items: stretch; gap: 8px; }
.admin-course-item .admin-course-btn { flex: 1; min-width: 0; }
.admin-course-item .admin-course-vis { flex-shrink: 0; align-self: center; }

/* A hidden course dims in the admin list so the state reads at a glance. */
.admin-course-item.is-hidden .admin-course-btn { opacity: .6; }
.admin-course-item.is-hidden .admin-course-btn.active { opacity: 1; }


.rp-status-note {
  background: #fff7e6;
  border: 1px solid #f3d999;
  border-left: 4px solid #e8a33d;
  border-radius: 8px;
  padding: 14px 18px;
  margin: 4px 0 20px;
  font-size: 0.95rem;
  line-height: 1.5;
  color: #6b4a12;
}
.rp-status-note strong {
  color: #4a3308;
}

/* -------------------------------------------------------------------------
   3. LANDING VIEWS
   Sections marked .landing-view are pulled out of the normal scroll. They
   only render once landing-views.js adds .f4g-view-active, which happens
   when their nav link is clicked. Partner and Our Partners share a view
   name, so one click opens both.
   ------------------------------------------------------------------------- */

.landing-view { display: none; }

body.f4g-view-open #landingPage > *:not(.top-nav):not(.aurora):not(.float-shapes):not(.landing-footer):not(.f4g-view-active):not(.f4g-back-bar) {
  display: none;
}
body.f4g-view-open .landing-view.f4g-view-active { display: block; }

/* The back button is injected above the first active section. The top
   padding clears the fixed nav — drop it to ~40px if .top-nav isn't fixed. */
.f4g-back-bar {
  max-width: 1180px;
  margin: 0 auto;
  padding: 118px 6vw 0;
}
.f4g-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border: 1px solid rgba(22, 125, 181, .25);
  border-radius: 999px;
  background: #fff;
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: #167db5;
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.f4g-back-btn:hover {
  background: rgba(22, 125, 181, .07);
  border-color: rgba(22, 125, 181, .45);
  transform: translateX(-2px);
}
.f4g-back-btn:focus-visible {
  outline: 3px solid #38bdf8;
  outline-offset: 3px;
}

/* These sections normally get their top padding from sitting mid-page. With
   the back bar directly above, that gap doubles up — pull it back. */
body.f4g-view-open .f4g-view-active { padding-top: 34px; }

@media (max-width: 700px) {
  .f4g-back-bar { padding: 96px 5vw 0; }
}

@media (prefers-reduced-motion: reduce) {
  .f4g-back-btn { transition: none; }
  .f4g-back-btn:hover { transform: none; }
}