/* Corelight Security Education homepage, refined from the active Oct 09 hero.
   Keep this layer last in theme_header and scope shared UI adjustments to Home. */
.cl-home--with-visual {
  align-items: start;
  column-gap: clamp(1.5rem, 4vw, 5rem);
  display: grid;
  grid-template-areas:
    "hero visual"
    "steps visual";
  grid-template-columns: minmax(0, 1fr) minmax(21rem, 0.92fr);
  max-width: 96rem;
}

.cl-home--with-visual > .cl-home__hero {
  grid-area: hero;
  min-width: 0;
}

.cl-home--with-visual > .cl-home__steps {
  grid-area: steps;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  min-width: 0;
}

.cl-home__visual {
  align-self: center;
  grid-area: visual;
  margin: clamp(0.5rem, 3vw, 2rem) 0 0;
  min-width: 0;
  pointer-events: none;
  position: relative;
}

.cl-home__visual-image {
  display: block;
  filter: drop-shadow(0 1.4rem 2.4rem rgb(0 0 0 / 0.3));
  height: auto;
  margin-inline: auto;
  max-height: min(70vh, 48rem);
  object-fit: contain;
  width: 100%;
}

html[data-bs-theme="light"] .cl-home__visual-image,
html:not([data-bs-theme]) .cl-home__visual-image {
  filter: drop-shadow(0 1.2rem 2rem rgb(3 18 11 / 0.18));
}

/* The signed-in runtime already marks registration complete. This is a visual
   response to that state, not a second authentication or progression system. */
.cl-home {
  --cl-home-action-background: var(--cl-magenta);
  --cl-home-action-ink: var(--cl-black);
  --cl-home-focus: var(--cl-green);
  margin-top: clamp(1.5rem, 2.6vw, 2.25rem);
}

.cl-home__hero {
  padding-bottom: 1.1rem;
}

.cl-home__eyebrow {
  font-size: 0.76rem;
  margin-bottom: 0.7rem;
}

.cl-home__title {
  font-size: clamp(2.5rem, 4.25vw, 3.65rem);
  line-height: 1.08;
  max-width: 22ch;
}

.cl-home__intro {
  font-size: clamp(1rem, 1.35vw, 1.125rem);
  line-height: 1.55;
  margin-top: 0.95rem;
  max-width: 59ch;
}

.cl-home__hero-actions {
  align-items: center;
  display: none;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.15rem;
  min-height: 2.85rem;
}

/* The original step links remain the fallback in browsers without :has(). */
@supports selector(:has(*)) {
  .cl-home__hero-actions {
    display: flex;
  }
}

.cl-home__primary-action {
  align-items: center;
  background: var(--cl-home-action-background);
  border: 1px solid var(--cl-home-action-background);
  border-radius: 0.18rem;
  color: var(--cl-home-action-ink) !important;
  display: inline-flex;
  font-family: var(--cl-font-mono);
  font-size: 0.875rem;
  font-weight: 700;
  gap: 0.8rem;
  justify-content: center;
  line-height: 1.25;
  min-height: 2.85rem;
  padding: 0.7rem 1rem;
  text-decoration: none !important;
}

.cl-home__primary-action--challenges {
  display: none;
}

.cl-home__primary-action:hover,
.cl-home__primary-action:focus-visible {
  background: var(--cl-home-action-background);
  border-color: var(--cl-home-action-background);
  color: var(--cl-home-action-ink) !important;
  text-decoration: underline !important;
  text-underline-offset: 0.2em;
}

.cl-home__primary-action:focus-visible {
  outline: 3px solid var(--cl-home-focus) !important;
  outline-offset: 3px;
}

.cl-home:has(.cl-home__step[data-cl-journey-step="registration"][data-cl-state="complete"])
  .cl-home__primary-action--register {
  display: none !important;
}

.cl-home:has(.cl-home__step[data-cl-journey-step="registration"][data-cl-state="complete"])
  .cl-home__primary-action--challenges {
  display: inline-flex;
}

.cl-home__steps {
  gap: 0.9rem;
  margin-top: 1rem;
}

.cl-home__step {
  padding: 1rem 1.05rem;
}

.cl-home__step[data-cl-state="complete"] {
  background: rgb(5 8 5 / 0.34);
}

.cl-home__step[data-cl-state="complete"] .cl-home__step-number {
  color: var(--cl-muted);
}

.cl-home__step-number {
  font-size: 0.75rem;
  line-height: 1.35;
  margin-bottom: 0.65rem;
}

.cl-home__step-title {
  font-size: 1.125rem;
  line-height: 1.32;
}

.cl-home__step-copy {
  font-size: 0.9375rem;
  line-height: 1.55;
  margin: 0.45rem 0 0.8rem;
}

.cl-home__step-link {
  font-size: 0.875rem;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
}

html[data-bs-theme="light"] .cl-home__step[data-cl-state="complete"] {
  background: var(--cl-mode-panel-muted) !important;
}

/* The page keeps its background and static artwork with Cyber off. Cyber on
   adds only a restrained image glow, never a texture over reading surfaces. */
body:has(.cl-home)::before,
body.cl-route-home::before,
body:has(.cl-home).cl-glitch-mode::after,
body.cl-route-home.cl-glitch-mode::after {
  content: none !important;
}

body.cl-glitch-mode .cl-home :is(h1, h2) {
  text-shadow: none !important;
}

body.cl-glitch-mode .cl-home .cl-home__title {
  text-shadow: -0.4px 0 rgb(255 53 149 / 0.24),
    0.4px 0 rgb(0 238 255 / 0.18) !important;
}

body.cl-glitch-mode .cl-home__visual-image {
  filter: drop-shadow(0 0 1.4rem rgb(53 255 149 / 0.15))
    drop-shadow(0 1.4rem 2.4rem rgb(0 0 0 / 0.3));
}

html[data-bs-theme="light"] body.cl-glitch-mode .cl-home__visual-image {
  filter: drop-shadow(0 0 1.2rem rgb(8 120 73 / 0.1))
    drop-shadow(0 1.2rem 2rem rgb(3 18 11 / 0.18));
}

/* These adjustments are Home-only. The navigation DOM, links, permission
   checks, theme switch, Cyber switch, and keyboard handlers remain unchanged. */
body:has(.cl-home) .navbar.cl-site-nav {
  min-height: 3.75rem;
  padding-block: 0.25rem;
}

body:has(.cl-home) .cl-site-nav__brand-service {
  font-size: 0.7rem;
}

body:has(.cl-home) .cl-site-nav__primary {
  gap: 0.2rem;
}

body:has(.cl-home) .cl-site-nav .cl-site-nav__toggle {
  font-size: 0.8rem;
  min-height: 2.75rem;
  padding: 0.62rem 0.58rem !important;
}

body:has(.cl-home) .cl-site-nav__utility {
  gap: 0.15rem;
  padding-left: 0.75rem;
}

body:has(.cl-home) .cl-site-nav__utility .nav-link {
  font-size: 0.75rem !important;
  min-height: 2.75rem;
  padding: 0.58rem 0.38rem !important;
}

body:has(.cl-home) .cl-site-nav__utility > .nav-item:has(.theme-switch) {
  border-left: 1px solid var(--cl-edge-soft);
  margin-left: 0.45rem;
  padding-left: 0.55rem;
}

body:has(.cl-home) .cl-color-mode-toggle__label,
body:has(.cl-home) .cl-cyber-toggle__label,
body:has(.cl-home) .cl-glitch-toggle.cl-cyber-toggle .cl-glitch-toggle__state {
  font-size: 0.7rem;
}

@media (max-width: 71.99rem) {
  .cl-home--with-visual {
    grid-template-areas:
      "hero"
      "steps"
      "visual";
    grid-template-columns: minmax(0, 1fr);
    max-width: 78rem;
  }

  .cl-home__visual {
    margin: 1.25rem auto 0;
    width: min(100%, 32rem);
  }

  .cl-home__visual-image {
    max-height: 28rem;
  }
}

@media (max-width: 61.99rem) {
  body:has(.cl-home) .cl-site-nav .cl-site-nav__toggle,
  body:has(.cl-home) .cl-site-nav__utility .nav-link {
    font-size: 0.875rem !important;
  }

  body:has(.cl-home) .cl-site-nav__utility > .nav-item:has(.theme-switch) {
    border-left: 0;
    border-top: 1px solid var(--cl-edge-soft);
    margin: 0.5rem 0 0;
    padding: 0.55rem 0 0;
  }
}

@media (max-width: 47.99rem) {
  .cl-home--with-visual > .cl-home__steps {
    grid-template-columns: minmax(0, 1fr);
  }

  .cl-home__visual {
    margin-top: 1rem;
    width: min(78vw, 22rem);
  }

  .cl-home__visual-image {
    max-height: 22rem;
  }

  /* Keep the secondary learning utilities available without covering the
     first challenge card or the primary action on narrow home screens. */
  body:has(.cl-home) .cl-utility-launchers,
  body.cl-route-home .cl-utility-launchers {
    bottom: auto;
    justify-content: flex-end;
    left: auto;
    margin: 0.75rem 0.75rem 1rem;
    max-width: none;
    position: static;
    right: auto;
  }

  body:has(.cl-home).cl-utilities-ready,
  body.cl-route-home.cl-utilities-ready {
    padding-bottom: 0;
  }
}

@media (forced-colors: active) {
  .cl-home__primary-action,
  .cl-home__primary-action:hover,
  .cl-home__primary-action:focus-visible {
    background: ButtonFace;
    border-color: ButtonText;
    color: ButtonText !important;
    forced-color-adjust: auto;
  }

  .cl-home__primary-action:focus-visible {
    outline-color: Highlight !important;
  }

}

@media print {
  .cl-home--with-visual {
    display: block;
  }

  .cl-home__visual,
  .cl-home__hero-actions {
    display: none !important;
  }
}