/*
    Dark theme reskin
    -----------------
    Loaded last, overrides the base template colours.
    Palette: graphite surfaces, soft light text, Leica-yellow + blue accents.
*/

:root {
    --bg:        #0f1216;
    --bg-alt:    #14181e;
    --surface:   #1b2027;
    --surface-2: #20262f;
    --border:    #2a313b;
    --text:      #e7eaee;
    --text-soft: #aab3bf;
    --text-dim:  #8b95a1;
    --accent:    #4aa8e0; /* timeline / links */
    --yellow:    #ffcd00; /* Leica */
}

body {
    background: var(--bg);
    color: var(--text);
}

/* --- headings --- */
.heading,
#about h2,
#experience h2,
#experience .vtimeline-content h3,
#education h2,
#projects h2,
#skills h2,
#contact h2,
.education-block h3,
.education-block h4,
.vtimeline-content h3,
.vtimeline-date {
    color: var(--text);
}

.heading:after {
    background: var(--yellow);
}

a { color: var(--accent); }
a:hover { color: var(--yellow); }

/* --- header / nav --- */
header {
    background: rgba(15, 18, 22, 0.96);
    box-shadow: none;
    border-bottom: 1px solid var(--border);
}

header.sticky {
    background: rgba(15, 18, 22, 0.96);
}

header a { color: var(--text-soft); }
header a:hover,
header a:focus { color: var(--yellow); }

#menu.active { background: var(--bg); }

#mobile-menu-open,
#mobile-menu-close { color: var(--text); background: var(--surface); }

/* --- lead / hero --- */
#lead-overlay {
    background: rgba(11, 14, 18, 0.72);
}

#lead-content h2 { color: var(--yellow); }

.btn-rounded-white {
    color: var(--yellow);
    border-color: var(--yellow);
}

.btn-rounded-white:hover {
    background: var(--yellow);
    color: #14181e;
}

/* --- generic alt background --- */
.background-alt {
    background: var(--bg-alt);
}

/* --- about --- */
#about { background: var(--bg); border-bottom: 1px solid var(--border); }
#about p,
#about .about-content p { color: var(--text-soft); }

/* --- experience timeline --- */
#experience { border-bottom: 1px solid var(--border); }

.vtimeline-content {
    background: var(--surface);
    border: 1px solid var(--border);
}
.vtimeline-content h4 { color: var(--text-dim); }
.vtimeline-content p,
.vtimeline-content ul,
.vtimeline-content li { color: var(--text-soft); }
.vtimeline-content ul {
    margin: 10px 0 0 0;
    padding-left: 18px;
    font-size: 0.9em;
}
.vtimeline-content li { margin-bottom: 6px; }

/* --- education --- */
#education { border-bottom: 1px solid var(--border); }
.education-block { border: 1px solid var(--border); background: var(--surface); }
.education-block span { color: var(--text-dim); }
.education-block h4 { color: var(--text-soft); }
.education-block p,
.education-block ul,
.education-block li { color: var(--text-soft); }

/* --- projects --- */
.project {
    background: var(--surface);
    border: 1px solid var(--border);
}
.project-info h3 { color: var(--text); }
.project-info p  { color: var(--text-soft); }

/* uniform 300x300 image box: no overlap, no squish, stays tall enough for the text */
.project-image { width: 300px; height: 300px; background: #14181e; }
.project-image img {
    width: 300px;
    height: 300px;
    object-fit: contain;
    display: block;
}

/* --- skills --- */
#skills { background: var(--bg); }
#skills li {
    background: var(--surface-2);
    color: var(--text-soft);
    vertical-align: middle; /* keep shine chips (overflow:hidden) aligned with the rest */
}

/* highlighted "shining" core skills */
#skills li.skill-shine {
    position: relative;
    overflow: hidden;
    color: #14181e;
    font-weight: 700;
    background: linear-gradient(135deg, #ffd84d, var(--yellow));
    box-shadow: 0 0 14px rgba(255, 205, 0, 0.45);
    animation: skill-glow 2.4s ease-in-out infinite;
}

/* moving sheen sweeping across the chip */
#skills li.skill-shine::after {
    content: "";
    position: absolute;
    top: 0;
    left: -120%;
    width: 60%;
    height: 100%;
    background: linear-gradient(115deg,
        transparent 0%,
        rgba(255, 255, 255, 0.85) 50%,
        transparent 100%);
    transform: skewX(-20deg);
    animation: skill-sheen 3.2s ease-in-out infinite;
}

@keyframes skill-glow {
    0%, 100% { box-shadow: 0 0 12px rgba(255, 205, 0, 0.40); }
    50%      { box-shadow: 0 0 22px rgba(255, 205, 0, 0.75); }
}

@keyframes skill-sheen {
    0%   { left: -120%; }
    55%  { left: 130%; }
    100% { left: 130%; }
}

@media (prefers-reduced-motion: reduce) {
    #skills li.skill-shine { animation: none; }
    #skills li.skill-shine::after { animation: none; display: none; }
}

/* --- contact --- */
#contact {
    background: linear-gradient(160deg, #16213040, transparent), var(--bg-alt);
}
#contact h2 { color: var(--text); }

/* --- footer --- */
footer { background: #0b0e12; }
.copyright p,
.top i,
.social a { color: var(--text-soft); }
.social a:hover { color: var(--yellow); }

/* card shadows read better dark */
.shadow,
.shadow-large {
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
}