/*
  This stylesheet defines the visual appearance for the portfolio website.
  It uses CSS variables for the colour palette, making it easy to adjust
  the accent colours or base background. The theme is a dark backdrop
  punctuated with vivid purple highlights to create a modern, elegant look.
*/

/* Colour palette */
:root {
  --background: #0d0717; /* deep dark background */
  --surface: #19102e; /* card and section backgrounds */
  --primary: #8b5cf6; /* primary purple accent */
  --primary-light: #b69df8; /* lighter purple accent */
  --text-primary: #ffffff; /* main text colour */
  --text-secondary: #c5b9e6; /* secondary text colour */
  --border-radius: 0.75rem;
  --transition-speed: 0.3s ease;
}

/* Enable smooth scrolling when navigating to anchor links */
html {
  scroll-behavior: smooth;
}

/* Global reset and base styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Poppins', sans-serif;
  background: var(--background);
  color: var(--text-primary);
  line-height: 1.6;
  overflow-x: hidden;
}

a {
  color: var(--primary);
  text-decoration: none;
  transition: color var(--transition-speed);
}

a:hover,
a:focus {
  color: var(--primary-light);
}

/* Navigation bar */
.navbar {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(25, 16, 46, 0.8);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
  padding: 0.5rem 1.5rem;
  border-radius: var(--border-radius);
  z-index: 100;
  backdrop-filter: blur(6px);
}

.nav-list {
  list-style: none;
  display: flex;
  gap: 1.5rem;
  align-items: center;
}

.nav-list li a {
  font-weight: 500;
  color: var(--text-secondary);
}

.nav-list li a:hover,
.nav-list li a:focus {
  color: var(--primary-light);
}

/* Hero Section */
.hero-section {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: radial-gradient(circle at center, rgba(73, 41, 133, 0.6) 0%, transparent 60%)
    , var(--background);
  padding: 0 1rem;
}

.hero-content h1 {
  font-size: 2.7rem;
  font-weight: 700;
  margin-bottom: 1rem;
}

.highlight {
  color: var(--primary);
}

.subtitle {
  font-size: 1.1rem;
  color: var(--text-secondary);
  max-width: 600px;
  margin: 0 auto 2rem;
}

.btn-primary {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  background: var(--primary);
  color: var(--background);
  border-radius: var(--border-radius);
  font-weight: 600;
  transition: background var(--transition-speed), transform var(--transition-speed);
}

.btn-primary:hover,
.btn-primary:focus {
  background: var(--primary-light);
  transform: translateY(-2px);
}

/* Section base styling */
section {
  padding: 4rem 1.5rem;
  max-width: 1100px;
  margin: 0 auto;
}

.section-header {
  margin-bottom: 2rem;
  text-align: left;
}

.section-header h2 {
  font-size: 2rem;
  margin-bottom: 0.5rem;
}

.tagline {
  font-size: 0.9rem;
  color: var(--text-secondary);
}

/* About Section */
.about-section {
  background: linear-gradient(to bottom right, rgba(43, 29, 73, 0.6), rgba(29, 20, 52, 0.6));
  border-radius: var(--border-radius);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
}

.about-content p {
  margin-bottom: 1rem;
  color: var(--text-secondary);
  max-width: 800px;
}

/* Skills Section */
.skills-section {
  background: radial-gradient(circle at top left, rgba(79, 46, 139, 0.45), transparent 70%)
    , var(--background);
}

.skills-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
}

.skill-group {
  flex: 1 1 250px;
  background: var(--surface);
  padding: 1.5rem;
  border-radius: var(--border-radius);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.skill-group h3 {
  margin-bottom: 1rem;
  font-size: 1.2rem;
  color: var(--primary-light);
}

.skill-tags {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.skill-tags li {
  background: var(--background);
  color: var(--primary-light);
  padding: 0.3rem 0.8rem;
  border-radius: var(--border-radius);
  font-size: 0.85rem;
  border: 1px solid var(--primary);
}

/* Projects Section */
.projects-section {
  background: radial-gradient(circle at bottom right, rgba(69, 32, 124, 0.4), transparent 70%)
    , var(--background);
}

.projects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 2rem;
}

.project-card {
  background: var(--surface);
  padding: 1.5rem;
  border-radius: var(--border-radius);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.35);
  transition: transform var(--transition-speed), box-shadow var(--transition-speed);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.project-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.5);
}

.project-title {
  font-size: 1.3rem;
  margin-bottom: 0.75rem;
  color: var(--primary-light);
}

.project-description {
  flex-grow: 1;
  font-size: 0.9rem;
  color: var(--text-secondary);
  margin-bottom: 1rem;
}

.project-tags {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.project-tags li {
  background: var(--background);
  padding: 0.3rem 0.8rem;
  border-radius: var(--border-radius);
  font-size: 0.75rem;
  border: 1px solid var(--primary);
  color: var(--primary-light);
}

.btn-secondary {
  display: inline-block;
  align-self: flex-start;
  padding: 0.5rem 1.2rem;
  background: var(--primary);
  color: var(--background);
  border-radius: var(--border-radius);
  font-weight: 500;
  transition: background var(--transition-speed), transform var(--transition-speed);
  margin-top: auto;
}

.btn-secondary:hover,
.btn-secondary:focus {
  background: var(--primary-light);
  transform: translateY(-2px);
}

/* Contact Section */
.contact-section {
  background: linear-gradient(to top left, rgba(53, 27, 97, 0.5), rgba(19, 12, 39, 0.5))
    , var(--background);
  border-radius: var(--border-radius);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

.contact-container {
  background: var(--surface);
  padding: 2rem;
  border-radius: var(--border-radius);
  text-align: center;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.35);
}

.contact-text {
  margin-bottom: 1rem;
  color: var(--text-secondary);
}

.contact-email {
  font-size: 1rem;
  margin-bottom: 1rem;
  color: var(--primary-light);
}

.social-links {
  display: flex;
  justify-content: center;
  gap: 1rem;
}

.social-icon {
  font-size: 1.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--surface);
  color: var(--primary);
  border: 1px solid var(--primary);
  transition: background var(--transition-speed), color var(--transition-speed), transform var(--transition-speed);
}

.social-icon:hover,
.social-icon:focus {
  background: var(--primary);
  color: var(--background);
  transform: translateY(-3px);
}

/* Footer */
.footer {
  text-align: center;
  padding: 2rem 1rem;
  font-size: 0.8rem;
  color: var(--text-secondary);
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.footer span[contenteditable] {
  color: var(--primary-light);
  cursor: text;
}

/* purple contact button */
.btn-purple {
  background: linear-gradient(135deg,#7b2cff,#9b4dff);
  color:#fff;
  border:0;
  padding:10px 16px;
  border-radius:8px;
  cursor:pointer;
  font-weight:600;
  box-shadow:0 6px 18px rgba(123,45,255,0.12);
}

/* modal */
.modal{display:none;position:fixed;inset:0;align-items:center;justify-content:center;background:rgba(0,0,0,0.45);z-index:9999}
.modal[aria-hidden="false"]{display:flex}
.modal-inner{background:#0f1113;color:#fff;padding:20px;border-radius:12px;max-width:720px;width:96%;box-shadow:0 10px 50px rgba(0,0,0,0.6);position:relative}
.modal-close{position:absolute;right:18px;top:14px;background:transparent;border:0;color:#ddd;font-size:18px;cursor:pointer}

.modal-inner h3{margin-top:0}
.modal-inner label{display:block;margin:10px 0;font-size:14px;color:#d6d6d6}
.modal-inner input[type="text"],
.modal-inner input[type="email"],
.modal-inner textarea{width:100%;padding:10px;border-radius:8px;border:1px solid rgba(255,255,255,0.06);background:rgba(255,255,255,0.03);color:#fff;box-sizing:border-box}

.form-row{display:flex;gap:10px;align-items:center;margin-top:12px}
.btn-primary{background:#3b82f6;color:#fff;border:0;padding:8px 12px;border-radius:8px;cursor:pointer}
.btn-secondary{background:transparent;color:#ddd;border:1px solid rgba(255,255,255,0.06);padding:8px 12px;border-radius:8px;cursor:pointer}

.form-status{margin-top:10px;font-size:13px;color:#d6d6d6}

/* preferred DM radio styling */
.pref-dm { margin-top:12px; padding-top:6px; border-top:1px solid rgba(255,255,255,0.03); }
.radio-label { display:inline-flex; align-items:center; gap:8px; margin-right:12px; font-size:14px; color:#e6e6e8; }
.radio-label input[type="radio"] { width:16px; height:16px; accent-color:#7b2cff; }
.pref-note { margin:6px 0 0 0; color:#cfcfd1; font-size:12px; }

/* Credits floating button */
.credits-btn{
  position:fixed;
  right:18px;            /* change to 'left' if you prefer left side */
  bottom:18px;           /* change to top/bottom as you want */
  z-index:99999;
  background:linear-gradient(135deg,#7b2cff,#9b4dff);
  color:#fff;
  border:0;
  padding:10px 14px;
  border-radius:10px;
  box-shadow:0 8px 30px rgba(0,0,0,0.35);
  cursor:pointer;
  font-weight:600;
  font-size:14px;
}

/* Slide-in panel */
.credits-panel{
  position:fixed;
  right:-420px;          /* hidden by default (panel width) */
  top:0;
  height:100vh;
  width:380px;           /* panel width */
  max-width:90%;
  background:#0f1113;
  color:#fff;
  box-shadow:-20px 0 40px rgba(0,0,0,0.6);
  z-index:99998;
  transition: right .32s cubic-bezier(.2,.9,.2,1);
  display:flex;
  align-items:flex-start;
  overflow:auto;
  padding:18px;
}

/* when visible */
.credits-panel.open{
  right:0;
}

/* inner content */
.credits-inner{ width:100%; padding-right:8px; }
.credits-close{ background:transparent;border:0;color:#cfcfd1;font-size:18px;position:absolute;right:14px;top:12px;cursor:pointer }
.credits-inner h3{ margin-top:6px; margin-bottom:8px; font-size:18px }
.credits-list{ list-style:none; padding:0; margin:0 0 10px 0; }
.credits-list li{ margin:8px 0; color:#e6e6e8; font-size:14px }

/* small file link */
.credits-file a{ color:#9b8efc; font-size:13px; text-decoration:underline; }

/* mobile tweak: full-screen panel on small screens */
@media (max-width:520px){
  .credits-panel{ width:100%; right:-100%; }
  .credits-panel.open{ right:0; }
  .credits-btn{ right:12px; bottom:12px; padding:8px 12px; font-size:13px; }
}

/* ----------------------------- */
/* Legal pages (Terms/Privacy)   */
/* ----------------------------- */

.legal-container {
    max-width: 900px;
    margin: 80px auto;
    padding: 40px;
    background: rgba(0,0,0,0.35);
    border-radius: 16px;
    backdrop-filter: blur(10px);
    box-shadow: 0 0 20px rgba(123, 44, 255, 0.4);
    color: #fff;
    font-family: 'Poppins', sans-serif;
}

.legal-container h1 {
    font-size: 36px;
    margin-bottom: 20px;
    color: #bb86ff;
    font-weight: 700;
}

.legal-container h2 {
    font-size: 24px;
    margin-top: 30px;
    color: #d1b2ff;
}

.legal-container p,
.legal-container li {
    line-height: 1.6;
    font-size: 16px;
    margin: 10px 0;
    color: #e3d6ff;
}

.legal-container ul {
    padding-left: 20px;
}