/*
  Main stylesheet for the fresh portfolio concept.  This file defines the
  overall look and feel of the site, using a light theme with pastel
  accents.  Colours, fonts and spacing are declared as CSS variables at
  the top for easy customisation.  The layout makes use of flexible
  grids, responsive media queries and subtle animations to bring the
  content to life.
*/

:root {
  /* Dark theme inspired by the original portfolio.  Adjust these variables
     to customise colours throughout the site. */
  --primary-color: #64ffda;      /* vibrant accent for highlights and links */
  --secondary-color: #008c76;    /* secondary accent used for subtle details */
  --bg-color: #0a192f;          /* overall page background (very dark blue) */
  --card-bg: rgba(1, 22, 39, 0.85); /* translucent dark panels for cards and modals */
  --text-color: #ccd6f6;         /* primary text colour (light grey) */
  --heading-font: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --body-font: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--body-font);
  color: var(--text-color);
  background: var(--bg-color);
  line-height: 1.6;
}

img, video {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: var(--primary-color);
  text-decoration: none;
  transition: color 0.3s ease;
}
a:hover {
  color: var(--secondary-color);
}

/* Side navigation */
.side-nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 200px;
  height: 100vh;
  background: var(--card-bg);
  border-right: 1px solid rgba(255, 255, 255, 0.05);
  padding-top: 20px;
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.side-nav .nav-toggle {
  display: none;
  background: none;
  border: none;
  font-size: 1.8rem;
  cursor: pointer;
  color: var(--text-color);
}
.side-nav .nav-items {
  list-style: none;
  margin-top: 40px;
  width: 100%;
  padding-left: 0;
  text-align: center;
}
.side-nav .nav-items li {
  margin: 15px 0;
}
.side-nav .nav-items a {
  display: block;
  padding: 8px 10px;
  color: var(--text-color);
  font-weight: 600;
  border-radius: 4px;
}
.side-nav .nav-items a:hover,
.side-nav .nav-items a.active {
  background: var(--primary-color);
  color: #fff;
}

/* Responsive navigation */
@media (max-width: 768px) {
  .side-nav {
    width: 100%;
    height: auto;
    position: fixed;
    top: 0;
    left: 0;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    border-right: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    padding: 10px 20px;
  }
  .side-nav .nav-toggle {
    display: block;
  }
  .side-nav .nav-items {
    display: none;
    flex-direction: column;
    width: 100%;
    background: var(--card-bg);
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 99;
  }
  .side-nav .nav-items.open {
    display: flex;
  }
  .side-nav .nav-items li {
    margin: 10px 0;
  }
  .main-content {
    margin: 0;
    padding-top: 60px;
  }
}

/* Main content offset to accommodate side nav on large screens */
.main-content {
  margin-left: 200px;
}
@media (max-width: 768px) {
  .main-content {
    margin-left: 0;
  }
}

/* Section styling */
.section {
  padding: 80px 0;
}
.section-title {
  font-family: var(--heading-font);
  font-size: 2rem;
  margin-bottom: 40px;
  color: var(--primary-color);
  position: relative;
}
.section-title::after {
  content: '';
  display: block;
  width: 60px;
  height: 3px;
  background: var(--secondary-color);
  margin-top: 8px;
}
.container {
  width: 90%;
  max-width: 1100px;
  margin: 0 auto;
}

/* Hero */
.hero-section {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--text-color);
}
.hero-section .hero-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('assets/hero-bg.png');
  background-size: cover;
  background-position: center;
  filter: brightness(0.8);
  z-index: -2;
}
.hero-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* Dark gradient overlay similar to the original portfolio theme */
  background: linear-gradient(to bottom right, rgba(10, 25, 47, 0.8), rgba(1, 22, 39, 0.9));
  z-index: -1;
}
.hero-inner {
  z-index: 1;
  max-width: 700px;
}
.hero-name {
  font-size: 3rem;
  margin-bottom: 10px;
  font-weight: bold;
}
.hero-role {
  font-size: 1.5rem;
  margin-bottom: 30px;
  min-height: 2rem;
}
.hero-btn {
  display: inline-block;
  padding: 12px 24px;
  background: var(--secondary-color);
  color: #fff;
  border-radius: 30px;
  font-weight: 600;
  transition: background 0.3s ease, transform 0.3s ease;
}
.hero-btn:hover {
  background: var(--primary-color);
  transform: translateY(-3px);
}
.cursor {
  display: inline-block;
  margin-left: 3px;
  animation: blink 0.7s step-end infinite;
}
@keyframes blink {
  50% { opacity: 0; }
}

/* About */
.about-section .about-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
}
.about-section .about-text {
  flex: 2;
  min-width: 280px;
}
.about-section .about-facts {
  flex: 1;
  min-width: 250px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.about-section .fact-item h3 {
  margin-bottom: 5px;
  font-size: 1rem;
  color: var(--primary-color);
}
.about-section .fact-item p {
  margin: 0;
}

/* Timeline */
.timeline {
  position: relative;
  margin-left: 25px;
}
.timeline::before {
  content: '';
  position: absolute;
  left: 7px;
  top: 0;
  width: 2px;
  height: 100%;
  background: var(--primary-color);
}
.timeline-entry {
  position: relative;
  margin-bottom: 50px;
  padding-left: 40px;
}
.timeline-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--secondary-color);
  position: absolute;
  left: -7px;
  top: 5px;
}
.timeline-panel {
  background: var(--card-bg);
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.08);
}
.timeline-header {
  margin-bottom: 10px;
}
.timeline-header h3 {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 600;
}
.timeline-date {
  display: block;
  font-size: 0.9rem;
  color: #8892b0;
  margin-top: 2px;
}
.timeline-panel p {
  margin-bottom: 10px;
}
.timeline-panel details {
  margin-top: 10px;
}
.timeline-panel summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--primary-color);
}
.timeline-panel summary::-webkit-details-marker {
  display: none;
}

/* Skills */
/* Skills */
.skills-intro {
  margin-bottom: 20px;
  font-style: italic;
  color: #666;
}
.skill-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
}
.skill-badge {
  background: var(--primary-color);
  color: #fff;
  border-radius: 20px;
  padding: 10px 18px;
  cursor: pointer;
  font-size: 0.9rem;
  transition: transform 0.3s ease, background 0.3s ease;
}
.skill-badge:hover {
  transform: translateY(-3px);
  background: var(--secondary-color);
}
.skill-tooltip {
  position: fixed;
  max-width: 300px;
  /* Use a crisp background and border so the tooltip stands out on the light page */
  background: var(--card-bg);
  color: var(--text-color);
  padding: 12px 15px;
  border: 1px solid var(--primary-color);
  border-radius: 6px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  display: none;
  z-index: 300;
}
.skill-tooltip.visible {
  display: block;
}

/* Skill detail panel.  Displays a focused description of the clicked skill. */
.skill-detail {
  position: relative;
  margin-top: 30px;
  background: var(--card-bg);
  border-left: 4px solid var(--primary-color);
  padding: 20px 20px 20px 25px;
  border-radius: 6px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.08);
  display: none;
}
.skill-detail h4 {
  margin-top: 0;
  margin-bottom: 8px;
  color: var(--primary-color);
  font-size: 1.2rem;
}
.skill-detail p {
  margin-bottom: 0;
  font-size: 0.95rem;
  color: var(--text-color);
}
.skill-detail .close-detail {
  position: absolute;
  top: 8px;
  right: 8px;
  background: none;
  border: none;
  font-size: 1.4rem;
  color: #999;
  cursor: pointer;
  transition: color 0.2s ease;
}
.skill-detail .close-detail:hover {
  color: var(--primary-color);
}

/* Carousel */
.carousel-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  overflow: hidden;
}
.projects-carousel {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 10px;
}
.projects-carousel::-webkit-scrollbar {
  display: none;
}
.project-item {
  flex: 0 0 80%;
  max-width: 350px;
  scroll-snap-align: center;
  background: var(--card-bg);
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.08);
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform 0.3s ease;
}
.project-item:hover {
  transform: translateY(-5px);
}
.project-thumb {
  height: 150px;
  border: 2px dashed #355070;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #90a4ae;
  font-size: 0.9rem;
  margin-bottom: 15px;
  text-align: center;
  padding: 10px;
}
.project-item h3 {
  margin: 5px 0;
  font-size: 1.3rem;
  color: var(--primary-color);
}
.project-item p {
  flex: 1;
  margin: 10px 0;
  font-size: 0.95rem;
}
.tech-tags {
  font-size: 0.8rem;
  color: #8892b0;
  margin-bottom: 10px;
}
.learn-more {
  align-self: flex-start;
  padding: 8px 16px;
  background: var(--primary-color);
  color: #fff;
  border: none;
  border-radius: 20px;
  font-size: 0.9rem;
  cursor: pointer;
  transition: background 0.3s ease;
}
.learn-more:hover {
  background: var(--secondary-color);
}
.carousel-btn {
  background: var(--card-bg);
  border: none;
  font-size: 2rem;
  color: var(--primary-color);
  cursor: pointer;
  padding: 10px;
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  transition: transform 0.2s ease;
  z-index: 1;
}
.carousel-btn:focus {
  outline: none;
}
.carousel-btn:hover {
  transform: scale(1.1);
}
.prev {
  margin-right: 10px;
}
.next {
  margin-left: 10px;
}

/* Modals */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.6);
  display: none;
  justify-content: center;
  align-items: flex-start;
  padding: 40px 20px;
  overflow-y: auto;
  z-index: 200;
}
.modal.open {
  display: flex;
}
.modal-content {
  background: var(--card-bg);
  padding: 30px;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  max-width: 800px;
  width: 100%;
  position: relative;
}
.modal-close {
  position: absolute;
  top: 10px;
  right: 10px;
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: var(--text-color);
}
.modal h3 {
  margin-top: 0;
  color: var(--primary-color);
}
.modal-overview {
  margin: 10px 0 20px;
}
.modal-media {
  margin-top: 20px;
  height: 200px;
  border: 2px dashed #355070;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #90a4ae;
  font-size: 0.9rem;
  text-align: center;
  padding: 10px;
}

/* Interests */
.interests-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 30px;
}
.interest-card {
  background: var(--card-bg);
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.08);
  display: flex;
  flex-direction: column;
}
.interest-card h3 {
  margin-bottom: 10px;
  color: var(--primary-color);
}
.interest-card p {
  font-size: 0.95rem;
  margin-bottom: 10px;
}
.interest-gallery {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 5px;
}
.gallery-item {
  min-width: 100px;
  height: 70px;
  border: 2px dashed #355070;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  color: #90a4ae;
  padding: 5px;
  text-align: center;
}

/* Contact */
.contact-section {
  text-align: center;
}
.contact-list {
  list-style: none;
  margin-top: 20px;
}
.contact-list li {
  margin: 8px 0;
  font-size: 1rem;
}
.contact-list a {
  font-weight: 600;
}