/* ==========================================================================
   intelligence.cloud — Layout & Navigation
   Product marketing website for Tresic Intelligence Cloud
   Depends on: base.css (brand tokens), Google Fonts (Montserrat, Nunito)
   ========================================================================== */

/* ==========================================================================
   Fixed Header (72px, navy, blur on scroll)
   ========================================================================== */
.site-header {
  background: var(--deep-navy);
  color: var(--cloud-white);
  height: var(--header-height);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  transition: background 0.3s, box-shadow 0.3s, backdrop-filter 0.3s;
}

.site-header.scrolled {
  background: rgba(26, 35, 50, 0.95);
  box-shadow: 0 4px 24px rgba(26, 35, 50, 0.18);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* Wordmark — logo left — Montserrat Medium per brand visual specs */
.wordmark {
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  font-size: 1.4rem;
  color: var(--cloud-white);
  letter-spacing: 0.04em;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 0.5em;
  flex-shrink: 0;
}

.wordmark:hover {
  text-decoration: none;
  color: var(--cloud-white);
}

.wordmark-logo {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
}

/* ==========================================================================
   Nav — Center Links
   ========================================================================== */
.nav-links {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-links a {
  color: rgba(255, 255, 255, 0.75);
  font-family: 'Montserrat', sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  padding: 0.5em 0.9em;
  border-radius: 6px;
  transition: color 0.15s, background 0.15s;
  text-decoration: none;
  white-space: nowrap;
}

.nav-links a:hover {
  color: var(--intelligence-blue);
  background: rgba(255, 255, 255, 0.06);
  text-decoration: none;
}

/* Nav item wrapper (for dropdowns) */
.nav-item {
  position: relative;
}

/* Dropdown panel */
.nav-dropdown {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  min-width: 220px;
  background: #1e2d40;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 0.5rem 0;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.3);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s, visibility 0.2s, transform 0.2s;
  transform: translateX(-50%) translateY(4px);
  z-index: 1001;
}

.nav-item:hover .nav-dropdown,
.nav-item:focus-within .nav-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.nav-dropdown a {
  display: block;
  width: 100%;
  padding: 0.6em 1.2em;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.85rem;
  font-weight: 600;
  border-radius: 0;
  transition: color 0.15s, background 0.15s;
}

.nav-dropdown a:hover {
  color: var(--cloud-white);
  background: rgba(255, 255, 255, 0.06);
}

/* ==========================================================================
   Nav CTA Group — Right Side
   ========================================================================== */
.nav-cta-group {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-shrink: 0;
}

.nav-cta-primary {
  display: inline-block;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 0.85rem;
  padding: 0.5em 1.3em;
  background: var(--tresic-gold);
  color: var(--deep-navy);
  border: none;
  border-radius: 6px;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
}

.nav-cta-primary:hover {
  background: #e69a1e;
  transform: translateY(-1px);
  text-decoration: none;
  color: var(--deep-navy);
}

.nav-cta-secondary {
  display: inline-block;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: 0.85rem;
  padding: 0.45em 1.2em;
  background: transparent;
  color: var(--intelligence-blue);
  border: 2px solid var(--intelligence-blue);
  border-radius: 6px;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, transform 0.2s;
}

.nav-cta-secondary:hover {
  background: var(--intelligence-blue);
  color: var(--cloud-white);
  transform: translateY(-1px);
  text-decoration: none;
}

/* ==========================================================================
   Mobile Nav Toggle (Hamburger)
   ========================================================================== */
.nav-toggle {
  display: none;
  background: none;
  border: none;
  color: var(--cloud-white);
  font-size: 1.5rem;
  cursor: pointer;
  padding: 0.25em;
  line-height: 1;
}

/* ==========================================================================
   Breadcrumb
   ========================================================================== */
.breadcrumb {
  font-family: 'Nunito', sans-serif;
  font-size: 0.85rem;
  color: var(--medium-gray);
  margin-bottom: 1rem;
}

.breadcrumb a {
  color: var(--intelligence-blue);
  text-decoration: none;
  transition: color 0.15s;
}

.breadcrumb a:hover {
  text-decoration: underline;
}

.breadcrumb .separator {
  margin: 0 0.4em;
  color: var(--medium-gray);
}

.breadcrumb .separator::before {
  content: '>';
}

/* Breadcrumb on dark backgrounds */
.page-hero .breadcrumb,
.home-hero .breadcrumb {
  color: rgba(255, 255, 255, 0.5);
}

.page-hero .breadcrumb a,
.home-hero .breadcrumb a {
  color: rgba(255, 255, 255, 0.7);
}

.page-hero .breadcrumb a:hover,
.home-hero .breadcrumb a:hover {
  color: var(--cloud-white);
}

.page-hero .breadcrumb .separator,
.home-hero .breadcrumb .separator {
  color: rgba(255, 255, 255, 0.35);
}

/* ==========================================================================
   Page Hero (compact, sub-pages)
   ========================================================================== */
.page-hero {
  background: linear-gradient(135deg, var(--deep-navy) 0%, #1e2d40 100%);
  color: var(--cloud-white);
  padding: calc(var(--header-height) + 3rem) 0 3rem;
  position: relative;
}

.page-hero::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--intelligence-blue), var(--tresic-gold));
}

.page-hero .container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 1.5rem;
}

.page-hero h1 {
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  font-size: 2.5rem;
  color: var(--cloud-white);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin-bottom: 0.75rem;
}

.page-hero .lead {
  font-size: 1.15rem;
  color: rgba(255, 255, 255, 0.7);
  max-width: 680px;
  line-height: 1.6;
  margin-bottom: 0;
}

/* ==========================================================================
   Homepage Hero (full-height, distinctive)
   ========================================================================== */
.home-hero {
  background: linear-gradient(135deg, var(--deep-navy) 0%, #1e2d40 50%, #243a52 100%);
  color: var(--cloud-white);
  min-height: 90vh;
  display: flex;
  align-items: center;
  padding: calc(var(--header-height) + 4rem) 0 4rem;
  position: relative;
  overflow: hidden;
}

/* Ambient glow */
.home-hero::before {
  content: '';
  position: absolute;
  top: -40%;
  right: -15%;
  width: 70%;
  height: 180%;
  background: radial-gradient(ellipse at center, rgba(74, 144, 226, 0.07) 0%, transparent 60%);
  pointer-events: none;
}

/* Transformation Wave — gradient bar at bottom */
.home-hero::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--intelligence-blue), var(--tresic-gold));
}

.home-hero .container {
  position: relative;
  z-index: 1;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 1.5rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
}

.home-hero-visual {
  display: flex;
  justify-content: center;
  align-items: center;
}

.home-hero-visual svg {
  width: 100%;
  max-width: 520px;
  height: auto;
  filter: drop-shadow(0 8px 32px rgba(0, 0, 0, 0.3));
}

.home-hero h1 {
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  font-size: 3.5rem;
  color: var(--cloud-white);
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin-bottom: 1.5rem;
  max-width: 780px;
}

.home-hero h1 .text-gold {
  color: var(--tresic-gold);
}

.home-hero .hero-subtitle {
  font-size: 1.25rem;
  color: rgba(255, 255, 255, 0.8);
  max-width: 640px;
  line-height: 1.6;
  margin-bottom: 2rem;
}

.home-hero .hero-ctas {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 3rem;
}

/* Hero stats row — gold numbers */
.home-hero .hero-stats {
  display: flex;
  gap: 3rem;
  flex-wrap: wrap;
}

.home-hero .hero-stat .stat-number {
  font-family: 'Montserrat', sans-serif;
  font-size: 2.5rem;
  font-weight: 600;
  color: var(--tresic-gold);
  line-height: 1;
}

.home-hero .hero-stat .stat-label {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.6);
  margin-top: 0.25rem;
  font-weight: 600;
}

/* ==========================================================================
   Dual-CTA Block (bottom of every page)
   ========================================================================== */
.dual-cta {
  background: var(--deep-navy);
  padding: 5rem 0;
  text-align: center;
}

.dual-cta .container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 1.5rem;
}

.dual-cta h2 {
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  color: var(--cloud-white);
  font-size: 2.25rem;
  margin-bottom: 0.75rem;
}

.dual-cta .lead {
  color: rgba(255, 255, 255, 0.65);
  font-size: 1.1rem;
  max-width: 580px;
  margin: 0 auto 2.5rem;
}

.dual-cta-cards {
  display: flex;
  gap: 1.5rem;
  justify-content: center;
  flex-wrap: wrap;
}

.dual-cta-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 2.5rem 2rem;
  flex: 1;
  max-width: 420px;
  min-width: 280px;
  text-align: center;
  transition: border-color 0.2s, background 0.2s;
}

.dual-cta-card:hover {
  background: rgba(255, 255, 255, 0.06);
}

/* Left card — gold-bordered (Start a Pilot) */
.dual-cta-card:first-child {
  border-color: rgba(245, 166, 35, 0.4);
}

.dual-cta-card:first-child:hover {
  border-color: var(--tresic-gold);
}

/* Right card — blue-bordered (Intelligence Report) */
.dual-cta-card:last-child {
  border-color: rgba(74, 144, 226, 0.4);
}

.dual-cta-card:last-child:hover {
  border-color: var(--intelligence-blue);
}

.dual-cta-card h3 {
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: 1.25rem;
  color: var(--cloud-white);
  margin-bottom: 0.75rem;
}

.dual-cta-card p {
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 1.5rem;
  line-height: 1.6;
}

/* ==========================================================================
   Footer — 5-column grid on navy
   ========================================================================== */
.site-footer {
  background: var(--deep-navy);
  color: rgba(255, 255, 255, 0.5);
  padding: 4rem 0 2rem;
  font-size: 0.85rem;
}

.site-footer .container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 1.5rem;
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
  gap: 2.5rem;
  margin-bottom: 2.5rem;
}

.footer-brand .wordmark {
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  font-size: 1.3rem;
  color: var(--cloud-white);
  margin-bottom: 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.5em;
  text-decoration: none;
}

.footer-brand .tagline {
  color: rgba(255, 255, 255, 0.45);
  font-size: 0.88rem;
  font-style: italic;
  margin-bottom: 0;
}

.footer-col h4 {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 1rem;
}

.footer-col a {
  display: block;
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.88rem;
  margin-bottom: 0.5em;
  text-decoration: none;
  transition: color 0.15s;
}

.footer-col a:hover {
  color: var(--tresic-gold);
  text-decoration: none;
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}

.footer-bottom p {
  margin: 0;
  color: rgba(255, 255, 255, 0.4);
  font-size: 0.8rem;
}

.footer-bottom a {
  color: rgba(255, 255, 255, 0.4);
  margin-left: 1.5rem;
  text-decoration: none;
  font-size: 0.8rem;
  transition: color 0.15s;
}

.footer-bottom a:hover {
  color: var(--tresic-gold);
  text-decoration: none;
}

/* ==========================================================================
   Responsive — 1024px
   ========================================================================== */
@media (max-width: 1024px) {
  .home-hero .container {
    grid-template-columns: 1fr;
  }

  .home-hero-visual {
    display: none;
  }

  .home-hero h1 {
    font-size: 2.75rem;
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
  }

  .footer-brand {
    grid-column: 1 / -1;
  }

  .dual-cta-cards {
    flex-direction: column;
    align-items: center;
  }

  .dual-cta-card {
    max-width: 520px;
    width: 100%;
  }
}

/* ==========================================================================
   Responsive — 768px (mobile)
   ========================================================================== */
@media (max-width: 768px) {
  /* Header: hide desktop nav, show hamburger */
  .nav-links {
    display: none;
  }

  .nav-links.open {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: var(--header-height);
    left: 0;
    right: 0;
    background: var(--deep-navy);
    padding: 1rem 1.5rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    z-index: 999;
  }

  .nav-links.open a {
    padding: 0.75em;
    width: 100%;
    border-radius: 6px;
  }

  .nav-toggle {
    display: block;
  }

  /* Dropdowns become inline on mobile */
  .nav-links.open .nav-dropdown {
    position: static;
    transform: none;
    opacity: 1;
    visibility: visible;
    min-width: 0;
    box-shadow: none;
    border: none;
    background: transparent;
    padding: 0 0 0 1rem;
  }

  .nav-cta-group {
    display: none;
  }

  .nav-links.open .nav-cta-group {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
  }

  .nav-links.open .nav-cta-primary,
  .nav-links.open .nav-cta-secondary {
    width: 100%;
    text-align: center;
    padding: 0.65em 1.2em;
  }

  /* Page hero */
  .page-hero {
    padding: calc(var(--header-height) + 2rem) 0 2rem;
  }

  .page-hero h1 {
    font-size: 2rem;
  }

  /* Home hero */
  .home-hero {
    min-height: auto;
    padding: calc(var(--header-height) + 3rem) 0 3rem;
  }

  .home-hero h1 {
    font-size: 2.25rem;
  }

  .home-hero .hero-stats {
    gap: 2rem;
  }

  .home-hero .hero-stat .stat-number {
    font-size: 2rem;
  }

  .home-hero .hero-ctas {
    flex-direction: column;
  }

  .home-hero .hero-ctas .btn {
    width: 100%;
    text-align: center;
  }

  /* Breadcrumb */
  .breadcrumb {
    font-size: 0.8rem;
  }

  /* Dual CTA */
  .dual-cta {
    padding: 3.5rem 0;
  }

  .dual-cta h2 {
    font-size: 1.75rem;
  }

  /* Footer */
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .footer-bottom {
    flex-direction: column;
    text-align: center;
  }

  .footer-bottom a {
    margin-left: 0;
    margin-right: 1rem;
  }
}

/* ==========================================================================
   Responsive — 480px (small mobile)
   ========================================================================== */
@media (max-width: 480px) {
  .site-header .container {
    padding: 0 1rem;
  }

  .home-hero h1 {
    font-size: 1.85rem;
  }

  .home-hero .hero-stats {
    flex-direction: column;
    gap: 1.25rem;
  }

  .page-hero h1 {
    font-size: 1.65rem;
  }

  .dual-cta-card {
    padding: 2rem 1.5rem;
    min-width: 0;
  }

  .footer-grid {
    gap: 1.25rem;
  }
}

/* ==========================================================================
   Print
   ========================================================================== */
@media print {
  .site-header,
  .site-footer,
  .dual-cta,
  .nav-toggle {
    display: none;
  }

  .home-hero,
  .page-hero {
    min-height: auto;
    padding-top: 2rem;
    background: none;
    color: #000;
  }

  .home-hero h1,
  .page-hero h1 {
    color: #000;
  }
}

/* ==========================================================================
   Gaps found during the site rebuild
   Classes referenced by the HTML and by the injected header/footer that had
   no rules. Kept in one block so the additions are obvious.
   ========================================================================== */

/* Mobile dropdown reveal. nav.js toggles .nav-dropdown-open on tap; desktop
   reveal is handled by .nav-item:hover above. Without this rule the mobile
   sub-menus open in the DOM and stay invisible. */
.nav-item.nav-dropdown-open > .nav-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

/* Wide dropdown for long lists (industries) */
.nav-dropdown-wide {
  min-width: 520px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Top-level nav anchors + active page state */
.nav-link {
  white-space: nowrap;
}

.nav-links a.nav-active {
  color: var(--cloud-white);
}

.nav-links a.nav-active::after {
  content: '';
  display: block;
  height: 2px;
  margin-top: 0.25rem;
  background: var(--tresic-gold);
  border-radius: 1px;
}

.nav-dropdown a.nav-active::after {
  display: none;
}

/* Breadcrumb separator. The published standard is a literal "/" in a
   <span class="sep">, not a generated ">". The older .separator rule below
   is retained for any page still using it, with its ">" content removed. */
.breadcrumb .sep {
  margin: 0 0.4em;
  color: var(--medium-gray);
}

.page-hero .breadcrumb .sep,
.home-hero .breadcrumb .sep {
  color: rgba(255, 255, 255, 0.4);
}

.breadcrumb .separator::before {
  content: '/';
}

/* Dual-CTA card accents */
.dual-cta-card.dual-cta-pilot {
  border-top: 3px solid var(--tresic-gold);
}

.dual-cta-card.dual-cta-report {
  border-top: 3px solid var(--intelligence-blue);
}

/* Footer link out to the corporate site */
.footer-tresic-link {
  display: inline-block;
  margin-top: var(--space-xs);
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--tresic-gold);
}

.footer-tresic-link:hover {
  color: var(--cloud-white);
  text-decoration: none;
}

/* Hero button pair */
.hero-cta-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
}

@media (max-width: 860px) {
  .nav-dropdown-wide {
    min-width: 0;
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   Skeleton guard
   Containers awaiting content hold only an HTML comment, which leaves them
   empty in the DOM. Several of them carry a background, padding, borders, or
   grid gaps, so an unfilled one renders as a visible empty slab. Collapse them
   until they have content. Nothing here changes a filled container.
   ========================================================================== */
.flow-diagram:empty,
.product-hero-visual:empty,
.home-hero-visual:empty,
.framework-grid:empty,
.stat-row:empty,
.stat-row-words:empty,
.card-grid:empty,
.contract-list:empty,
.related-rail:empty,
.reader-split:empty,
.workflow:empty,
.feature-grid:empty,
.table-scroll:empty,
.code-frame:empty {
  display: none;
}

/* A section whose container ended up empty shouldn't contribute vertical space */
.section > .container:empty {
  display: none;
}

/* ==========================================================================
   Header breathing room

   The nav grew from four items to six with longer labels, so it ran flush up
   against the wordmark (measured 0px gap at 1633px viewport) and the gold
   active-page underline appeared to touch it. Give the nav its own margin,
   let it shrink before the wordmark does, and tighten item padding on the
   widths where things get close.
   ========================================================================== */
.site-header .wordmark {
  flex-shrink: 0;
  margin-right: var(--space-md);
}

.nav-links {
  margin-left: auto;
  margin-right: var(--space-md);
}

@media (min-width: 861px) and (max-width: 1300px) {
  .nav-links a {
    padding-left: 0.6em;
    padding-right: 0.6em;
    font-size: 0.8rem;
  }

  .site-header .wordmark {
    font-size: 1rem;
    margin-right: var(--space-sm);
  }

  .nav-links {
    margin-right: var(--space-sm);
  }
}

/* Dropdown panels stay inside the viewport rather than being centred on a
   nav item that sits near the right edge. */
@media (min-width: 861px) {
  .nav-item:last-of-type .nav-dropdown {
    left: auto;
    right: 0;
    transform: translateY(4px);
  }

  .nav-item:last-of-type:hover .nav-dropdown,
  .nav-item:last-of-type:focus-within .nav-dropdown,
  .nav-item:last-of-type.nav-dropdown-open > .nav-dropdown {
    transform: translateY(0);
  }
}