/* main_app/static/main_app/css/landing.css */

/*
  Landing-specific public-page CSS.

  Header geometry:
  - logo is h-16 = 64px
  - header inner vertical padding is py-3 = 12px top + 12px bottom
  - expected fixed header height ≈ 88px
*/
:root {
  --bc-landing-header-h: 88px;

  /* Landing brand tokens mirroring Tailwind cyber palette */
  --bc-cyber-bg: #0A0F12;
  --bc-cyber-bg-rgb: 10, 15, 18;
  --bc-cyber-cyan-rgb: 0, 229, 255;
  --bc-cyber-green-rgb: 0, 255, 194;

  /* Landing width contract */
  --bc-landing-gutter: 1rem;
  --bc-landing-width-copy: 56rem;
  --bc-landing-width-content: 85rem;
  --bc-landing-width-wide: 100rem;
}

/* responsive gutter tuning */
@media (min-width: 640px) {
  :root {
    --bc-landing-gutter: 1.5rem;
  }
}

@media (min-width: 1024px) {
  :root {
    --bc-landing-gutter: 2rem;
  }
}

/* landing container classes */
.bc-landing-container {
  width: 100%;
  max-width: var(--bc-landing-width-content);
  margin-inline: auto;
  padding-inline: var(--bc-landing-gutter);
}

.bc-landing-container-wide {
  width: 100%;
  max-width: var(--bc-landing-width-wide);
  margin-inline: auto;
  padding-inline: var(--bc-landing-gutter);
}

.bc-landing-copy {
  width: 100%;
  max-width: var(--bc-landing-width-copy);
  margin-inline: auto;
}

/* Kill underlines in the landing header only */
header.bc-landing-header a,
header.bc-landing-header a:hover,
header.bc-landing-header a:focus,
header.bc-landing-header a:focus-visible {
  text-decoration: none !important;
  border-bottom: none !important;
  background-image: none !important;
  box-shadow: none !important;
}

/* Slim bottom line + slightly stronger bg when scrolled */
header.bc-landing-header.scrolled {
  background-color: rgba(var(--bc-cyber-bg-rgb), 0.84);
  border-color: rgba(var(--bc-cyber-cyan-rgb), 0.25);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
}

/* Landing-only viewport guard: internal carousels can still scroll,
   but the page itself must never create a horizontal scrollbar. */
html,
body {
  max-width: 100%;
}

body {
  overflow-x: clip;
}

@supports not (overflow-x: clip) {
  body {
    overflow-x: hidden;
  }
}

/* Fixed-header compensation */
.bc-landing-main {
  padding-top: var(--bc-landing-header-h);
}

/* Hero should fill the visible viewport below the fixed header, not viewport + header. */
.bc-hero {
  min-height: calc(100vh - var(--bc-landing-header-h));
}

@supports (height: 100svh) {
  .bc-hero {
    min-height: calc(100svh - var(--bc-landing-header-h));
  }
}

@media (min-width: 1024px) {
  .bc-hero {
    min-height: clamp(640px, calc(100svh - var(--bc-landing-header-h)), 820px);
  }
}

@supports (height: 100svh) {
  .bc-hero {
    min-height: calc(100svh - var(--bc-landing-header-h));
  }
}

/* Hero radial background moved out of the template to avoid inline style attributes. */
.bc-hero-bg {
  background-color: var(--bc-cyber-bg);
  background-image:
    radial-gradient(
      ellipse at 50% 54%,
      rgba(var(--bc-cyber-green-rgb), 0.075) 0%,
      rgba(var(--bc-cyber-green-rgb), 0.035) 30%,
      transparent 58%
    ),
    radial-gradient(
      ellipse at 50% 60%,
      rgba(var(--bc-cyber-cyan-rgb), 0.070) 0%,
      rgba(var(--bc-cyber-cyan-rgb), 0.030) 34%,
      transparent 62%
    ),
    linear-gradient(
      to bottom,
      var(--bc-cyber-bg) 0%,
      #071315 46%,
      var(--bc-cyber-bg) 100%
    );
}