/* ══════════════════════════════════════════════════════
   NEXUS BRAND SYSTEM — CleantechHUB
   Source of truth. All Nexus pages import this file.
   Brand: Manual de Marca CTH, January 2024
   ══════════════════════════════════════════════════════ */

/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700;800&display=swap');

:root {
  /* ── CTH Palette (only 5 colors permitted) ── */
  --deep-blue:    #0C498A;
  --cyan:         #B2EEFA;
  --light-green:  #9DC384;
  --forest:       #669348;
  --sky:          #69B5FA;
  --white:        #FFFFFF;

  /* ── Semantic tokens ── */
  --color-primary:     var(--deep-blue);
  --color-accent:      var(--light-green);
  --color-bg:          #EEF6FF;
  --color-card:        var(--white);
  --color-text:        #1A2332;
  --color-mid:         #475569;
  --color-muted:       #94A3B8;
  --color-border:      #D1E3F8;

  /* ── Typography ── */
  --font-base: 'Open Sans', 'PT Sans', sans-serif;
  --font-size-base: 13px;

  /* ── Spacing / Shape ── */
  --radius:       12px;
  --radius-sm:    8px;
  --radius-pill:  20px;
  --nav-h:        52px;

  /* ── Shadows ── */
  --shadow-card:  0 2px 12px rgba(12,73,138,.10);
  --shadow-hover: 0 8px 28px rgba(12,73,138,.18);
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-base);
  background: var(--color-bg);
  color: var(--color-text);
  font-size: var(--font-size-base);
  min-height: 100vh;
}

/* ── Shared Nav ──
   All nav styles are now injected by nexus-nav.js (hamburger version).
   This avoids cascade conflicts between CSS file and JS-injected styles.
   Only --nav-h token is used by other rules (e.g. sticky filter bar top offset).
*/

/* ── Shared Page Header ── */
.page-header {
  background: var(--deep-blue);
  padding: 24px 24px 0;
  position: relative;
  overflow: hidden;
}
.page-header::after {
  content: '';
  position: absolute;
  bottom: -40px; right: -40px;
  width: 180px; height: 180px;
  background: radial-gradient(circle, rgba(105,181,250,.15) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}
.ph-eyebrow {
  font-size: 10px;
  font-weight: 700;
  color: var(--sky);
  text-transform: uppercase;
  letter-spacing: 1.2px;
  margin-bottom: 6px;
}
.ph-title {
  font-size: 24px;
  font-weight: 800;
  color: var(--white);
  letter-spacing: -.4px;
  margin-bottom: 4px;
}
.ph-sub {
  font-size: 12px;
  color: rgba(178,238,250,.65);
  margin-bottom: 20px;
}
.ph-stats {
  display: flex;
  gap: 24px;
  border-top: 1px solid rgba(178,238,250,.12);
  padding: 14px 0;
}
.ph-stat-n { font-size: 20px; font-weight: 800; color: var(--light-green); }
.ph-stat-l { font-size: 9px; color: rgba(178,238,250,.55); text-transform: uppercase; letter-spacing: .5px; margin-top: 2px; }

/* ── Shared Filter Bar ── */
.filter-bar {
  background: var(--white);
  border-bottom: 2px solid var(--color-border);
  padding: 12px 24px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  position: sticky;
  top: var(--nav-h);
  z-index: 100;
  box-shadow: 0 2px 8px rgba(12,73,138,.06);
}
.search-box {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--color-bg);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 6px 12px;
  flex: 1;
  min-width: 160px;
  max-width: 240px;
}
.search-box input {
  border: none; background: transparent;
  font-family: var(--font-base); font-size: 12px;
  color: var(--color-text); outline: none; width: 100%;
}
.filter-pill {
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  font-size: 10px;
  font-weight: 700;
  border: 1.5px solid var(--color-border);
  background: var(--white);
  color: var(--color-mid);
  cursor: pointer;
  transition: all .13s;
  white-space: nowrap;
  font-family: var(--font-base);
}
.filter-pill:hover { border-color: var(--deep-blue); color: var(--deep-blue); }
.filter-pill.active { background: var(--deep-blue); color: #fff; border-color: var(--deep-blue); }
.filter-pill.fp-green.active { background: var(--forest); border-color: var(--forest); }
.filter-pill.fp-sky.active { background: var(--sky); color: var(--deep-blue); border-color: var(--sky); }
.result-count { margin-left: auto; font-size: 11px; color: var(--color-muted); white-space: nowrap; }

/* ── Shared Content Area ── */
.content-area {
  max-width: 960px;
  margin: 0 auto;
  padding: 20px 24px 60px;
}

/* ── Shared Footer ── */
.nexus-footer {
  background: var(--deep-blue);
  color: rgba(178,238,250,.5);
  text-align: center;
  padding: 16px;
  font-size: 10px;
  letter-spacing: .3px;
  border-top: 1px solid rgba(178,238,250,.1);
}
.nexus-footer a { color: var(--light-green); text-decoration: none; font-weight: 700; }
.nexus-footer a:hover { text-decoration: underline; }

/* ── Utility badges ── */
.badge-sm {
  font-size: 9px; font-weight: 700;
  padding: 2px 7px; border-radius: 10px;
  white-space: nowrap;
  display: inline-block;
}
.b-ce  { background: #E0F2FE; color: #0369A1; }
.b-bio { background: #DCFCE7; color: #166634; }
.b-en  { background: #FEF3C7; color: #92400E; }
.b-seed { background: #EDE9FE; color: #5B21B6; }
.b-prog { background: var(--color-bg); color: var(--deep-blue); }

/* ══════════════════════════════════════════════════════
   NEXUS MOBILE — Responsive additions
   Breakpoints: 720px (nav), 600px (grids), 480px (stats)
   All additions are @media max-width only — no desktop impact
   ══════════════════════════════════════════════════════ */

/* ── Global mobile resets ── */
@media (max-width: 767px) {
  body { overflow-x: hidden; }

  /* Prevent iOS input zoom (triggers when font-size < 16px) */
  input, textarea, select {
    font-size: 16px !important;
  }

  /* Disable hover lift on touch devices — prevents cards staying "lifted" after tap */
  @media (hover: none) {
    .startup-card:hover,
    .mentor-card:hover,
    .funder-card:hover,
    .module-card:hover,
    .activity-item:hover {
      transform: none !important;
      box-shadow: var(--shadow-card) !important;
    }
  }
}

/* ── Page header — smaller text + padding on mobile ── */
@media (max-width: 600px) {
  .page-header { padding: 16px 16px 0; }

  .ph-title { font-size: 20px; }

  .ph-sub { font-size: 11px; margin-bottom: 14px; }

  /* Stats bar: 4-col row → 2×2 grid */
  .ph-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    padding: 0;
  }
  .ph-stats > div {
    padding: 12px 0;
    border-right: 1px solid rgba(178,238,250,.1);
    border-bottom: 1px solid rgba(178,238,250,.1);
    text-align: center;
  }
  .ph-stats > div:nth-child(2),
  .ph-stats > div:nth-child(4) { border-right: none; }
  .ph-stats > div:nth-child(3),
  .ph-stats > div:nth-child(4) { border-bottom: none; }

  .ph-stat-n { font-size: 18px; }
}

/* ── Filter bar — search full-width top, pills horizontal scroll bottom ── */
@media (max-width: 767px) {
  .filter-bar {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 10px 14px;
    /* Keep sticky — critical for mobile usability */
  }

  /* Search box takes full width */
  .search-box {
    max-width: 100%;
    flex: none;
    width: 100%;
  }

  /* Pills row: horizontal scrollable strip */
  .filter-pills-row {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 2px; /* prevent clipping shadow on pills */
    scrollbar-width: none; /* Firefox */
  }
  .filter-pills-row::-webkit-scrollbar { display: none; } /* Chrome/Safari */

  .filter-pill {
    white-space: nowrap;
    flex-shrink: 0;
  }

  /* Result count: hide on mobile (redundant when filters are scrollable) */
  .result-count { display: none; }
}

/* ── Content area — tighter padding on mobile ── */
@media (max-width: 600px) {
  .content-area {
    padding: 12px 12px 40px;
  }
}

/* ── Mentor card grid — single column below 540px ── */
@media (max-width: 540px) {
  .mentor-grid {
    grid-template-columns: 1fr;
  }
}

/* ── Funder card grid — single column below 540px ── */
@media (max-width: 540px) {
  .funder-grid {
    grid-template-columns: 1fr;
  }
}

/* ── Startup card grid — single column below 380px ── */
@media (max-width: 380px) {
  .card-grid {
    grid-template-columns: 1fr;
  }
}

/* ── Touch UX: LinkedIn button tap target ── */
@media (max-width: 600px) {
  .li-btn {
    padding: 8px 12px;
    font-size: 11px;
    min-height: 36px;
  }
}