/* ============================================================
   PODMOD SHARED COMPONENTS
   Navbar, footer, buttons, cards, FAQ accordion, video modal,
   and other reusable UI pieces. Depends on design-system.css.
   ============================================================ */

/* ===========================================
   NAVBAR — Frosted glass, scroll-reactive
   =========================================== */

.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  height: var(--navbar-height);
  background: rgba(6, 6, 11, 0.6);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid transparent;
  transition:
    background var(--duration-normal) var(--ease-out),
    border-color var(--duration-normal) var(--ease-out);
}

/* Scroll state — JS toggles data-scrolled="true" */
.navbar[data-scrolled="true"] {
  background: rgba(6, 6, 11, 0.92);
  border-bottom-color: var(--border-subtle);
}

.navbar__container {
  max-width: var(--max-width-wide);
  margin: 0 auto;
  padding: 0 var(--space-lg);
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.navbar__logo {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.navbar__logo img {
  height: 32px;
  width: auto;
}

/* Desktop navigation links — centered */
.navbar__nav {
  display: flex;
  align-items: center;
  gap: var(--space-xl);
}

.navbar__link {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-secondary);
  transition: color var(--duration-fast) var(--ease-out);
  position: relative;
}

.navbar__link::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--brand);
  transition: width var(--duration-normal) var(--ease-out);
}

.navbar__link:hover,
.navbar__link--active {
  color: var(--text-primary);
}

.navbar__link:hover::after,
.navbar__link--active::after {
  width: 100%;
}

/* Right-side actions */
.navbar__actions {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

/* Hamburger toggle — mobile only */
.navbar__toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 8px;
}

.navbar__toggle span {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--text-primary);
  border-radius: 2px;
  transition:
    transform var(--duration-normal) var(--ease-out),
    opacity var(--duration-fast);
}

/* X state when drawer is open */
.navbar__toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.navbar__toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}
.navbar__toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Mobile overlay */
.navbar__overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 998;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duration-normal) var(--ease-out);
}

.navbar__overlay.is-active {
  opacity: 1;
  pointer-events: auto;
}

/* Mobile drawer */
.navbar__drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(320px, 85vw);
  z-index: 999;
  background: var(--bg-elevated);
  border-left: 1px solid var(--border-subtle);
  transform: translateX(100%);
  transition: transform var(--duration-normal) var(--ease-out);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

.navbar__drawer.is-open {
  transform: translateX(0);
}

.navbar__drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-lg);
  border-bottom: 1px solid var(--border-subtle);
}

.navbar__drawer-logo img {
  height: 28px;
  width: auto;
}

.navbar__drawer-close {
  color: var(--text-secondary);
  padding: var(--space-xs);
  transition: color var(--duration-fast);
}

.navbar__drawer-close:hover {
  color: var(--text-primary);
}

.navbar__drawer-close svg {
  width: 24px;
  height: 24px;
}

.navbar__drawer-nav {
  display: flex;
  flex-direction: column;
  padding: var(--space-lg);
  gap: var(--space-xs);
  flex: 1;
}

.navbar__drawer-link {
  font-size: var(--text-lg);
  font-weight: 500;
  color: var(--text-secondary);
  padding: var(--space-md) 0;
  border-bottom: 1px solid var(--border-subtle);
  transition: color var(--duration-fast);
}

.navbar__drawer-link:hover,
.navbar__drawer-link--active {
  color: var(--text-primary);
}

.navbar__drawer-cta {
  padding: var(--space-lg);
  margin-top: auto;
}

/* ----- Mobile breakpoint ----- */
@media (max-width: 768px) {
  .navbar__nav,
  .navbar__actions {
    display: none;
  }

  .navbar__toggle {
    display: flex;
  }
}


/* ===========================================
   BUTTONS
   =========================================== */

/* Primary CTA — solid brand purple */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-sm);
  padding: 14px 28px;
  border-radius: var(--border-radius-full);
  transition:
    background var(--duration-normal) var(--ease-out),
    box-shadow var(--duration-normal) var(--ease-out),
    transform var(--duration-fast) var(--ease-out);
  position: relative;
  overflow: hidden;
  white-space: nowrap;
}

.btn--primary {
  background: var(--brand);
  color: var(--text-on-brand);
  box-shadow: 0 0 0 rgba(91, 58, 255, 0);
}

.btn--primary:hover {
  background: var(--brand-hover);
  box-shadow: 0 0 30px var(--brand-glow);
  transform: translateY(-1px);
}

/* Shine sweep on hover */
.btn--primary::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 40%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.15),
    transparent
  );
  transform: translateX(-100%) skewX(-15deg);
}

.btn--primary:hover::after {
  animation: shineSweep 0.6s var(--ease-out);
}

/* Secondary / ghost CTA */
.btn--secondary {
  background: transparent;
  color: var(--text-primary);
  border: 1px solid var(--border-medium);
}

.btn--secondary:hover {
  border-color: var(--brand);
  background: var(--brand-subtle);
  box-shadow: 0 0 20px rgba(91, 58, 255, 0.1);
  transform: translateY(-1px);
}

/* Small variant */
.btn--sm {
  font-size: var(--text-xs);
  padding: 10px 20px;
}

/* Large variant */
.btn--lg {
  font-size: var(--text-base);
  padding: 18px 36px;
}

/* Full width (mobile) */
.btn--full {
  width: 100%;
}

/* Navbar CTA (compact) */
.navbar__cta {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-xs);
  padding: 10px 22px;
  border-radius: var(--border-radius-full);
  background: var(--brand);
  color: var(--text-on-brand);
  transition:
    background var(--duration-fast),
    box-shadow var(--duration-normal);
  white-space: nowrap;
}

.navbar__cta:hover {
  background: var(--brand-hover);
  box-shadow: 0 0 20px var(--brand-glow);
}

.navbar__cta--full {
  width: 100%;
  justify-content: center;
  padding: 14px 28px;
  font-size: var(--text-sm);
}

/* Button icon arrow */
.btn__icon {
  width: 18px;
  height: 18px;
  transition: transform var(--duration-fast) var(--ease-out);
}

.btn:hover .btn__icon {
  transform: translateX(3px);
}


/* ===========================================
   CARDS
   =========================================== */

.card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--border-radius-md);
  padding: var(--space-xl);
  transition:
    background var(--duration-normal) var(--ease-out),
    border-color var(--duration-normal) var(--ease-out),
    box-shadow var(--duration-normal) var(--ease-out),
    transform var(--duration-normal) var(--ease-out);
}

.card:hover {
  background: var(--bg-card-hover);
  border-color: var(--border-brand);
  box-shadow: var(--glow-brand);
  transform: translateY(-4px);
}

.card__icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--border-radius-sm);
  background: var(--brand-subtle);
  color: var(--brand-light);
  margin-bottom: var(--space-lg);
  font-size: 1.25rem;
}

.card__title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
  margin-bottom: var(--space-sm);
  color: var(--text-primary);
}

.card__text {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: 1.6;
}

/* Card with image */
.card--media {
  padding: 0;
  overflow: hidden;
}

.card--media .card__image {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-bottom: 1px solid var(--border-subtle);
}

.card--media .card__body {
  padding: var(--space-lg);
}


/* ===========================================
   FAQ ACCORDION
   =========================================== */

.faq-list {
  max-width: var(--max-width-narrow);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.faq-item {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--border-radius-md);
  overflow: hidden;
  transition:
    border-color var(--duration-normal) var(--ease-out),
    background var(--duration-normal) var(--ease-out);
}

.faq-item.is-active {
  border-color: var(--border-brand);
  border-left: 3px solid var(--brand);
  background: var(--bg-card-hover);
}

.faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-lg) var(--space-xl);
  text-align: left;
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--text-primary);
  cursor: pointer;
  transition: color var(--duration-fast);
}

.faq-question:hover {
  color: var(--brand-light);
}

.faq-question__icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  color: var(--text-muted);
  transition: transform var(--duration-normal) var(--ease-out);
}

.faq-item.is-active .faq-question__icon {
  transform: rotate(180deg);
  color: var(--brand);
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--duration-slow) var(--ease-out);
}

.faq-answer__inner {
  padding: 0 var(--space-xl) var(--space-lg);
}

.faq-answer__inner p {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: 1.7;
}


/* ===========================================
   VIDEO MODAL
   =========================================== */

.video-modal {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duration-normal) var(--ease-out);
}

.video-modal.is-active {
  opacity: 1;
  pointer-events: auto;
}

.video-modal__container {
  position: relative;
  width: 90vw;
  max-width: 960px;
}

.video-modal__close {
  position: absolute;
  top: -48px;
  right: 0;
  color: var(--text-secondary);
  padding: var(--space-sm);
  transition: color var(--duration-fast);
}

.video-modal__close:hover {
  color: var(--text-primary);
}

.video-modal__close svg {
  width: 28px;
  height: 28px;
}

.video-modal__wrapper {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
  border-radius: var(--border-radius-md);
  overflow: hidden;
  background: #000;
  box-shadow: var(--glow-brand-strong);
}

.video-modal__wrapper video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Prevent body scrolling when modal is open */
body.modal-open {
  overflow: hidden;
}


/* ===========================================
   FOOTER
   =========================================== */

.footer {
  position: relative;
  background: var(--bg-secondary);
  border-top: 1px solid var(--border-subtle);
  /* Clip the gradient backdrop so it doesn't paint outside the footer. */
  overflow: hidden;
}

/* Footer-wide purple gradient backdrop.
   Lives on the parent .footer (not on the wordmark section) so it can
   bleed across the seam between the upper nav block and the wordmark
   block. This is what eliminates the hard horizontal line that used
   to appear where the two sections met.
   Stacking: this pseudo-element sits at the bottom of the stack
   (z-index 0). The actual content blocks (.footer__upper and
   .footer__wordmark-section) use z-index 1 so all text/links/icons
   render above the gradient. */
.footer::before {
  content: '';
  position: absolute;
  /* Full footer width and height so the wash is one continuous vertical band. */
  inset: 0;
  pointer-events: none;
  z-index: 0;
  /* Single linear gradient: strongest at the bottom edge, fading up into
     the footer background color (via transparency). No radial “spotlight” —
     same treatment left-to-right across the full width. */
  background: linear-gradient(
    to top,
    rgba(91, 58, 255, 0.5) 0%,
    rgba(91, 58, 255, 0.22) 28%,
    rgba(124, 94, 255, 0.1) 52%,
    transparent 88%
  );
}

/* Upper: logo, nav columns, socials */
.footer__upper {
  /* z-index 1 keeps nav/columns/socials above the .footer::before
     gradient backdrop that bleeds up from below. */
  position: relative;
  z-index: 1;
  padding: var(--space-3xl) 0 var(--space-2xl);
}

.footer__nav-row {
  display: grid;
  grid-template-columns: 1.8fr 1fr 1fr 1fr 1.2fr;
  gap: var(--space-2xl);
  align-items: start;
}

.footer__brand {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.footer__logo {
  height: 36px;
  width: auto;
}

.footer__tagline {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: 1.65;
  /* Slightly wider than before because the brand column no longer holds
     a logo above the tagline; the tagline is the entire brand block. */
  max-width: 340px;
}

.footer__col {
  display: flex;
  flex-direction: column;
}

.footer__col-title {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--space-lg);
}

.footer__link {
  display: block;
  font-size: var(--text-sm);
  color: var(--text-secondary);
  padding: var(--space-xs) 0;
  transition: color var(--duration-fast);
}

.footer__link:hover {
  color: var(--brand-light);
}

.footer__socials {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.footer__social-link {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--border-radius-full);
  border: 1px solid var(--border-medium);
  background: transparent;
  color: var(--text-secondary);
  font-size: 15px;
  transition:
    color var(--duration-fast),
    border-color var(--duration-fast),
    background var(--duration-fast);
}

.footer__social-link:hover {
  color: var(--brand-light);
  border-color: var(--brand);
  background: var(--brand-subtle);
}

/* ---------------------------------------------
   Wordmark section
   ---------------------------------------------
   Stacking inside this section (back to front):
     1. (the gradient backdrop lives on .footer::before above)
     2. .footer__wordmark-section        -> transparent, just a layout box
     3. .footer__wordmark                -> giant wordmark, drawn as a
                                            SOLID block in the footer bg
                                            color and clipped to the
                                            wordmark shape via mask-image.
                                            This is the topmost layer:
                                            the gradient never shows
                                            through it.
     4. .footer__copyright               -> small copyright line.
   --------------------------------------------- */

.footer__wordmark-section {
  /* z-index 1 puts this above the .footer::before gradient backdrop
     so the wordmark and copyright render on top of the purple wash. */
  position: relative;
  z-index: 1;
  /* Background is intentionally transparent here so the gradient that
     bleeds up from below shows through unmodified - no second
     background to create a seam with the upper section. */
  background: transparent;
  padding-top: var(--space-2xl);
  padding-bottom: var(--space-xl);
  text-align: center;
}

/* The wordmark itself.
   The PNG is used only as a `mask-image` to define the SHAPE; the
   actual color comes from `background-color` (the footer bg). Because
   we apply ONE mask (the wordmark shape) with no fade, the entire
   letter shape is a fully opaque block of the footer bg color, sitting
   on top of the purple gradient backdrop. The gradient appears around
   the letters but never bleeds through them. */
.footer__wordmark {
  position: relative;
  width: min(100%, 1400px);
  /* Aspect ratio chosen to roughly match the source PNG so the mask
     fills the box without distortion. The PNG is ~4:1 (wide & short). */
  aspect-ratio: 1024 / 260;
  margin: 0 auto var(--space-md);

  /* The "fill" of the wordmark = the footer background color.
     This is what makes the wordmark visually "cut out" of the
     gradient: the gradient behind it is hidden everywhere the
     letters are. */
  background-color: var(--bg-secondary);

  /* Single mask layer: just the brand wordmark PNG.
     No fade gradient is applied - the user wants the wordmark to be
     the topmost solid layer with all gradient color strictly behind
     it, not bleeding through the letters. */
  -webkit-mask-image: var(--footer-wordmark-src);
  mask-image: var(--footer-wordmark-src);

  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;

  -webkit-mask-position: center;
  mask-position: center;

  -webkit-mask-size: contain;
  mask-size: contain;

  user-select: none;
  pointer-events: none;
}

.footer__copyright {
  font-size: var(--text-xs);
  color: var(--text-muted);
  position: relative;
  margin-top: var(--space-md);
}

/* Responsive */
@media (max-width: 900px) {
  .footer__nav-row {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-xl);
  }

  .footer__brand {
    /* Span the full row above the nav columns so the tagline reads
       like an intro line instead of getting squeezed into one column. */
    grid-column: 1 / -1;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-md);
  }

  .footer__tagline {
    max-width: 560px;
  }
}

@media (max-width: 640px) {
  .footer__nav-row {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-lg);
  }

  .footer__brand {
    flex-direction: column;
    gap: var(--space-md);
  }

  .footer__tagline {
    max-width: 100%;
  }
}

@media (max-width: 480px) {
  .footer__nav-row {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .footer__brand {
    align-items: center;
  }

  .footer__socials {
    justify-content: center;
  }
}