/* ============================================================
   Linh Phan — UX Portfolio
   Shared stylesheet for all pages (nav, footer, tokens, resets,
   responsive rules, accordions, and hover states).
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Lato:wght@400;700;900&display=swap');

:root {
  --font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-body: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'Menlo', ui-monospace, 'SF Mono', Consolas, monospace;
  --fill-success-strong: #77C7AF;
}

body { margin: 0; background: #070707; font-family: 'Lato', system-ui, sans-serif; color: #E8F7EE; }
* { box-sizing: border-box; }
a { color: #E8F7EE; }
::selection { background: #E8F7EE; color: #070707; }
a:focus-visible, button:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid #E8F7EE; outline-offset: 3px; border-radius: 2px;
}

img { max-width: 100%; }

/* ── Skip link ─────────────────────────────────────────────── */
.skip-link {
  position: absolute; left: 16px; top: -72px; z-index: 100;
  background: #E8F7EE; color: #070707; padding: 12px 20px; border-radius: 8px;
  font-family: var(--font-body, sans-serif); font-weight: 700; font-size: 15px;
  text-decoration: none; transition: top .16s ease;
}
.skip-link:focus { top: 16px; color: #070707; }

/* ── Nav ───────────────────────────────────────────────────── */
.nav-burger {
  display: none; align-items: center; justify-content: center;
  width: 48px; height: 48px; padding: 0; background: none;
  border: 1px solid rgba(232,247,238,.28); border-radius: 8px;
  cursor: pointer; color: #E8F7EE;
}
.dropdown-menu[hidden], .mobile-menu[hidden] { display: none !important; }
.dropdown-menu-overlay { position: fixed; inset: 0; z-index: 25; }
.dropdown-menu {
  position: absolute; top: 44px; left: 0; width: 344px;
  background: #0F1310; border: 1px solid rgba(232,247,238,.14); border-radius: 14px;
  box-shadow: 0 20px 48px rgba(0,0,0,.6); padding: 10px; z-index: 30;
  animation: rise .16s ease both;
}
.chev-icon { transition: transform .16s ease; }
.case-toggle[aria-expanded="true"] .chev-icon { transform: rotate(180deg); }

/* ── Hover states (replaces prototype's style-hover attribute) ── */
.hover-mint:hover { color: #E8F7EE; }
.icon-circle:hover { background: #E8F7EE; color: #070707; }
.btn-mint:hover { background: #CFE6D8; }
.btn-outline:hover { background: rgba(232,247,238,.08); }
.btn-outline-dark:hover { background: rgba(7,7,7,.06); }
.btn-dark-invert:hover { background: #1C221E; }
.btn-dark-fade:hover { opacity: .85; }
.dropdown-item:hover { background: #141915; }
.footer-link:hover { color: #E8F7EE; }
.also-check-card:hover { background: #141915; border-color: rgba(232,247,238,.32); }
.back-to-top:hover { background: #E8F7EE; color: #070707; }

.work-row:hover .work-arrow { transform: translateX(6px); }
.work-row:hover { background: #0C100D; }

@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) { .rise { animation: rise .7s cubic-bezier(.2,.7,.3,1) both; } }

/* ── Accordions (native <details>) ────────────────────────── */
details.dd { border: 1px solid rgba(232,247,238,.14); border-radius: 14px; background: #0F1310; overflow: hidden; }
details.dd summary { list-style: none; cursor: pointer; padding: 24px; display: flex; align-items: center; gap: 16px; min-height: 44px; }
details.dd summary::-webkit-details-marker { display: none; }
details.dd .chev { margin-left: auto; color: #9FB3A8; transition: transform .15s ease; font-size: 14px; }
details.dd[open] .chev { transform: rotate(180deg); }
details.dd .body { padding: 0 24px 24px 60px; }

details.csc summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 12px;
  min-height: 44px; padding: 8px 0; font-family: var(--font-body); font-weight: 700; font-size: 15px;
  color: #E8F7EE;
}
details.csc summary::-webkit-details-marker { display: none; }
details.csc .chev { color: #E8F7EE; transition: transform .15s ease; display: inline-flex; }
details.csc[open] .chev { transform: rotate(90deg); }
/* csc on a light (mint) band defaults to dark text; .dark reverses it back to light text for csc placed on the dark page background */
details.csc.on-light summary { color: #070707; }
details.csc.on-light .chev { color: #070707; }
details.csc.on-light.dark summary { color: #E8F7EE; }
details.csc.on-light.dark .chev { color: #E8F7EE; }

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 900px) {
  .nav-links { display: none !important; }
  .nav-burger { display: flex !important; }
  nav { padding-left: 20px !important; padding-right: 20px !important; }
  header, section, .wrap, footer { padding-left: 20px !important; padding-right: 20px !important; }
  .two-col, .three-col, .grid2, .grid3, .grid4, .grid5, .sidecol {
    grid-template-columns: 1fr !important;
  }
  .work-row { grid-template-columns: 1fr !important; gap: 24px !important; }
  .hero-h1 { font-size: 64px !important; }
  .statement { font-size: 28px !important; }
  .cta-h2 { font-size: 44px !important; }
  .about-h1 { font-size: 44px !important; }
  .cs-h1 { font-size: 40px !important; }
}