/* ═══════════════════════════════════════════════════
   css/components.css
   Component-level styles (nav, sections, cards…)
═══════════════════════════════════════════════════ */

/* ── Navbar ───────────────────────────────────────── */
#nav {
  position:       fixed;
  top: 0; left: 0; right: 0;
  z-index:        100;
  transition:     background 0.3s, border-color 0.3s;
  border-bottom:  1px solid transparent;
}
#nav.scrolled {
  background:        rgba(249, 248, 246, 0.88);
  backdrop-filter:   blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom-color: var(--border);
}
.nav-row {
  max-width:       var(--max-w);
  margin:          0 auto;
  padding:         0 var(--px);
  height:          58px;
  display:         flex;
  align-items:     center;
  justify-content: space-between;
}
.logo {
  font-family:    'Instrument Serif', Georgia, serif;
  font-size:      19px;
  color:          var(--ink);
  text-decoration:none;
  letter-spacing: -0.01em;
}
.logo em { color: var(--teal); font-style: normal; }

.nav-links {
  display:     flex;
  align-items: center;
  gap:         28px;
  list-style:  none;
}
.nav-links a {
  font-size:       13px;
  color:           var(--ink-2);
  text-decoration: none;
  transition:      color var(--t);
}
.nav-links a:hover,
.nav-links a.active { color: var(--teal); }

/* ── Mobile menu ──────────────────────────────────── */
#mob-menu {
  display:         none;
  position:        fixed;
  inset:           0;
  background:      rgba(249, 248, 246, 0.97);
  backdrop-filter: blur(12px);
  z-index:         200;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  gap:             32px;
}
#mob-menu.open { display: flex; }
#mob-menu a {
  font-family:     'Instrument Serif', Georgia, serif;
  font-size:       2.2rem;
  color:           var(--ink);
  text-decoration: none;
  transition:      color var(--t);
}
#mob-menu a:hover { color: var(--teal); }

/* ── Hero ─────────────────────────────────────────── */
.hero-tagline {
  font-size:   15px;
  color:       var(--ink-2);
  line-height: 1.8;
  max-width:   520px;
  margin-top:  24px;
}

/* ── About ────────────────────────────────────────── */
.cert-card {
  display:         flex;
  align-items:     center;
  gap:             14px;
  padding:         14px 18px;
  background:      var(--surface);
  border:          1px solid var(--border);
  border-radius:   var(--r-md);
  text-decoration: none;
  color:           var(--ink);
  transition:      border-color var(--t), transform var(--t);
}
.cert-card:hover  { border-color: var(--teal-border); transform: translateY(-2px); }
.cert-icon {
  width:           36px;
  height:          36px;
  border-radius:   9px;
  background:      var(--teal-dim);
  border:          1px solid var(--teal-border);
  display:         flex;
  align-items:     center;
  justify-content: center;
  color:           var(--teal);
  flex-shrink:     0;
}

/* ── Projects ─────────────────────────────────────── */
.filter-tab {
  font-size:     13px;
  font-weight:   500;
  padding:       6px 18px;
  border-radius: 999px;
  border:        1px solid var(--border);
  background:    transparent;
  color:         var(--ink-2);
  cursor:        pointer;
  transition:    all var(--t);
}
.filter-tab:hover  { border-color: var(--teal-border); color: var(--teal); }
.filter-tab.active { background: var(--teal); color: #fff; border-color: var(--teal); }

.proj-card {
  background:    var(--surface);
  border:        1px solid var(--border);
  border-radius: var(--r-lg);
  overflow:      hidden;
  transition:    border-color var(--t), transform var(--t), box-shadow var(--t);
  display:       flex;
  flex-direction:column;
}
.proj-card:hover {
  border-color: var(--teal-border);
  transform:    translateY(-4px);
  box-shadow:   0 16px 40px rgba(0, 0, 0, 0.06);
}
.proj-thumb {
  aspect-ratio:    16/9;
  background:      linear-gradient(135deg, rgba(0,128,128,0.07), rgba(0,128,128,0.02));
  border-bottom:   1px solid var(--border);
  display:         flex;
  align-items:     center;
  justify-content: center;
}
.proj-icon {
  width:           48px;
  height:          48px;
  border-radius:   12px;
  background:      var(--teal-dim);
  border:          1px solid var(--teal-border);
  display:         flex;
  align-items:     center;
  justify-content: center;
  color:           var(--teal);
}
.proj-body  { padding: 22px 24px 24px; flex: 1; display: flex; flex-direction: column; }
.proj-tags  { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.proj-impact {
  font-size:     12px;
  color:         var(--teal);
  background:    var(--teal-dim);
  border-left:   2px solid var(--teal);
  padding:       8px 12px;
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  margin-top:    auto;
  padding-top:   12px;
  line-height:   1.55;
}

/* ── Skills ───────────────────────────────────────── */
.skill-group-label {
  font-size:      11px;
  font-weight:    500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color:          var(--teal);
  margin-bottom:  14px;
}
.tool-pills      { display: flex; flex-wrap: wrap; gap: 8px; }
.tool-pill {
  display:         inline-flex;
  align-items:     center;
  font-size:       13px;
  color:           var(--ink-2);
  background:      var(--surface);
  border:          1px solid var(--border);
  border-radius:   var(--r-sm);
  padding:         8px 13px;
  transition:      border-color var(--t), color var(--t);
}
.tool-pill:hover  { border-color: var(--teal-border); color: var(--teal); }

/* ── Contact ──────────────────────────────────────── */
.contact-row {
  display:         flex;
  align-items:     center;
  gap:             16px;
  padding:         18px 22px;
  background:      var(--surface);
  border:          1px solid var(--border);
  border-radius:   var(--r-lg);
  text-decoration: none;
  color:           var(--ink);
  transition:      border-color var(--t), transform var(--t);
}
.contact-row:hover { border-color: var(--teal-border); transform: translateX(5px); }
.contact-icon {
  width:           42px;
  height:          42px;
  border-radius:   10px;
  background:      var(--teal-dim);
  display:         flex;
  align-items:     center;
  justify-content: center;
  color:           var(--teal);
  flex-shrink:     0;
}

/* ── Resources ────────────────────────────────────── */
.res-category-header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         16px 20px;
  cursor:          pointer;
  user-select:     none;
  transition:      background var(--t);
  border-radius:   var(--r-md);
}
.res-category-header:hover { background: var(--surface-2); }

.res-dot {
  width:         8px;
  height:        8px;
  border-radius: 50%;
  flex-shrink:   0;
}
.res-dot.green  { background: #22c55e; }
.res-dot.yellow { background: #eab308; }
.res-dot.blue   { background: #3b82f6; }
.res-dot.orange { background: #f97316; }
.res-dot.purple { background: #a855f7; }
.res-dot.teal   { background: var(--teal); }
.res-dot.pink   { background: #ec4899; }
.res-dot.sky    { background: #0ea5e9; }

.res-chevron {
  color:       var(--ink-3);
  transition:  transform var(--t);
  flex-shrink: 0;
}
.res-chevron.open { transform: rotate(180deg); }

.res-body {
  padding:    4px 20px 18px;
  display:    flex;
  flex-direction: column;
  gap:        2px;
}
.res-link {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             12px;
  padding:         9px 10px;
  font-size:       13px;
  color:           var(--ink-2);
  text-decoration: none;
  border-radius:   var(--r-sm);
  transition:      background var(--t), color var(--t);
}
.res-link:hover { background: var(--surface-2); color: var(--ink); }
.res-lang {
  font-size:      10px;
  font-weight:    500;
  letter-spacing: 0.06em;
  padding:        2px 7px;
  border-radius:  999px;
  flex-shrink:    0;
}
.lang-ES { background: rgba(0,128,128,0.10); color: var(--teal); border: 1px solid var(--teal-border); }
.lang-EN { background: rgba(59,130,246,0.10); color: #3b82f6;   border: 1px solid rgba(59,130,246,0.25); }

.readings-banner {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             16px;
  padding:         20px 24px;
  background:      var(--teal-dim);
  border:          1px solid var(--teal-border);
  border-radius:   var(--r-lg);
  text-decoration: none;
  color:           var(--ink);
  transition:      background var(--t), transform var(--t);
  margin-top:      12px;
}
.readings-banner:hover { background: rgba(0,128,128,0.14); transform: translateY(-2px); }

/* ── Footer ───────────────────────────────────────── */
footer {
  border-top: 1px solid var(--border);
  padding:    26px 0;
}
.footer-inner {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  flex-wrap:       wrap;
  gap:             8px;
}
.footer-text { font-size: 13px; color: var(--ink-3); }

/* ── Hamburger btn ────────────────────────────────── */
#ham-btn {
  display:    none;
  background: none;
  border:     none;
  cursor:     pointer;
  padding:    4px;
  color:      var(--ink);
}
@media (max-width: 640px) {
  #ham-btn              { display: block; }
  .nav-links            { display: none; }
  #nav .btn-ghost       { display: none; }
}