/*
 * Shared styles for experience detail pages.
 * Linked by all experience-*.html files so these rules are defined once.
 * Do NOT link from index.html — the global transition rule would affect
 * elements that rely on their own transition settings.
 */

* {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.animate-page-enter {
    animation: slideDownEnter var(--anim-page-enter) var(--anim-page-enter-ease) forwards;
}

@keyframes slideDownEnter {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Content card — light mode */
.content-card {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
}

/* Content card — dark mode */
.dark-mode .content-card {
    background: rgba(30, 41, 59, 0.95);
    border: 1px solid rgba(148, 163, 184, 0.15);
    box-shadow: 0 0 0 1px rgba(148, 163, 184, 0.08), 0 25px 50px rgba(0, 0, 0, 0.4);
}

.dark-mode .content-card,
.dark-mode .content-card h1,
.dark-mode .content-card h2,
.dark-mode .content-card h3,
.dark-mode .content-card h4 {
    color: #f1f5f9 !important;
}

.dark-mode .content-card p,
.dark-mode .content-card li,
.dark-mode .content-card li span {
    color: #e2e8f0 !important;
}

.dark-mode .content-card .text-gray-500,
.dark-mode .content-card .text-gray-600 {
    color: #cbd5e1 !important;
}

.dark-mode .content-card .text-gray-700 {
    color: #e2e8f0 !important;
}

.dark-mode .content-card .text-gray-900 {
    color: #f8fafc !important;
}

.dark-mode .content-card .border-gray-200 {
    border-color: #475569 !important;
}

.dark-mode .content-card a {
    color: #93c5fd !important;
}

.dark-mode .content-card a:hover {
    color: #bfdbfe !important;
}

/* ── Utility classes ──────────────────────────────────────────────────────
   Sizing driven by tokens in assets/theme.css.
   Pair with Tailwind colour utilities for background/text colour.
   ──────────────────────────────────────────────────────────────────────── */

/* Achievement bullet dot — used in <span> inside <li class="flex items-start"> */
.achievement-bullet {
    width:       var(--bullet-size);
    height:      var(--bullet-size);
    border-radius: 9999px;
    margin-top:  var(--bullet-mt);
    margin-right: var(--bullet-mr);
    flex-shrink: 0;
}

/* Content section heading (h2) */
.content-section-title {
    font-size:   var(--section-title-size);
    font-weight: 600;
    color: #111827;
}
.dark-mode .content-section-title {
    color: #f8fafc;
}

/* Prev/Next navigation links in experience page footers */
.experience-nav-link {
    display:     flex;
    align-items: center;
    gap:         0.25rem;
    color:       #64748b;
    transition:  color 0.15s;
}
.experience-nav-link:hover {
    color: var(--hero-c2);
}
.dark-mode .experience-nav-link {
    color: #94a3b8;
}
.dark-mode .experience-nav-link:hover {
    color: #93c5fd;
}