/* ========================
   1. CSS VARIABLES (DARK MODE)
   ======================== */
:root {
  --bg-color: white;
  --text-color: black;
  --link-color: black;
  --hover-color: #ff0303; /* RED accent */
  --hr-color: black;
  --muted-color: #555;
  --input-bg: #f8f9fa;
  --input-border: #ced4da;
}

[data-theme="dark"] {
  --bg-color: #121212;
  --text-color: #e0e0e0;
  --link-color: #e0e0e0;
  --hover-color: #ff5555;
  --hr-color: #444;
  --muted-color: #aaa;
  --input-bg: #2b2b2b;
  --input-border: #444;
}

/* FIX: Invert Burger Menu Color in Dark Mode */
[data-theme="dark"] .navbar-light .navbar-toggler-icon {
    filter: invert(1) grayscale(100%) brightness(200%);
}

/* ========================
   2. GENERAL STYLES
   ======================== */
html {
  scroll-behavior: smooth;
}

body {
  background-color: var(--bg-color);
  color: var(--text-color);
  transition: background-color 0.3s, color 0.3s;
}

h1 {
  line-height: 1;
  margin-left:0;
  font-family: "HelveticaNeueLTStd-Bd", sans-serif;
  color: var(--text-color);
}

h2 {
  line-height: 1;
  margin-left:0;
  font-family: "HelveticaNeueLTStd-Bd", sans-serif;
  font-size:1vw;
  color: var(--text-color);
}

ul { padding: 0; margin: 0; }
li { display: inline; padding-left: 0; padding-right: 30px; }

a { font-size: 1.2vw; }
h2 a { font-size: 1vw; }

a:link, a:visited {
  color: var(--link-color);
  text-decoration: none;
}
a:hover { color: var(--hover-color); }

/* FIX: Force Active Color with !important */
ul li a.current { 
    color: var(--hover-color) !important; 
}
.navbar-nav a.current {
    color: var(--hover-color) !important;
}

hr {
 height: 2px;
 background-color: var(--hr-color);
 border: none;
}

p{ margin: 0; }
.row { margin: 0; }

.title-name { color: var(--link-color); }
.title-name:hover { color: var(--text-color); }

.col-lg-3 { padding: 0; }
.col-md-6 { margin-bottom: 0; }
.col-lg-9 { padding: 0; vertical-align: bottom; }

.container-fluid {
  padding: 0 2.7% 0 2.7%;
  font-family: "HelveticaNeueLTStd-Md", sans-serif;
}

.title-font { font-size: 1.2vw; }

/* ========================
   3. STRUCTURE & LAYOUT
   ======================== */
.menu-bar {
  position: sticky;
  position: -webkit-sticky;
  top: 0;
  z-index: 1000;
  width:100%;
  background-color: var(--bg-color);
  transition: background-color 0.3s;
}

/* THEME TOGGLE (DESKTOP) */
#theme-container {
  position: absolute;
  right: 15px; 
  /* FIX: Moved down to 2.8vw to align with menu text (one line below top) */
  top: 2.8vw;
  z-index: 1001;
}

.theme-btn {
  background: none;
  border: none;
  color: var(--link-color);
  font-size: 1.2vw;
  cursor: pointer;
}
.theme-btn:hover { color: var(--hover-color); }

/* Spacer logic */
.about:before, .portfolio:before, .research:before, .tools:before, .contact:before {
  display: block; content: " "; height: 5vw; visibility: hidden;
}
.about:after, .portfolio:after, .research:after, .tools:after, .landing:after {
  display: block; content: " "; height: 5vw; visibility: hidden;
}

.footer {
  position: sticky;
  position: -webkit-sticky;
  bottom: 0;
  z-index: 1000;
  width:100%;
  background-color: var(--bg-color);
  transition: background-color 0.3s;
}

.menu-font {
  line-height: 1;
  font-size: 1.2vw;
  margin: 0;
}

.landing-page-left {
  position:relative;
  text-align: left;
  margin-bottom: 1vw;
  padding-right:0.5vw;
}

.landing-page-text {
  position:static;
  text-align: left;
  line-height: 1.1;
  margin-bottom: 1vw;
}

/* ======= TEXT SIZING UPDATES ======= */

.about-text {
  font-size: 2.8vw; 
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.portfolio-item {
  font-size: 2.2vw;
  margin-top: 0.3vw;
  font-weight: bold;
  margin-bottom: 0.5vw;
}

.portfolio-desc-pos {
  font-style: normal;
  font-weight: bold;
  font-size: 1.3vw;
  color: var(--hover-color);
  margin-bottom: 1vw;
  display: block;
}

.portfolio-desc {
  font-size: 1.2vw;
  line-height: 1.4;
  color: var(--text-color);
}

.tech-stack {
  font-weight: bold;
  color: var(--muted-color);
  display: inline-block;
  margin-top: 1vw;
}

/* ==================================== */

#about, #portfolio, #research, #tools {
  padding-top: 5vw;
  -webkit-padding-before:5vw;
  scroll-margin-top: 5vw; 
}

/* CONTACT SECTION ADJUSTMENTS */
#contact {
  padding-top: 5vw;
  padding-bottom: 5vw;
  min-height: 80vh; 
  display: flex;
  flex-direction: column;
  justify-content: center;
  scroll-margin-top: 5vw;
}

.contact-info h2 {
    font-size: 1.5vw;
    margin-bottom: 1.5vw;
}

/* Contact Form Input Styling */
.form-control {
    background-color: var(--input-bg);
    color: var(--text-color);
    border: 1px solid var(--input-border);
    padding: 1.5rem 1rem; 
    font-size: 1.2rem;
}
.form-control:focus {
    background-color: var(--input-bg);
    color: var(--text-color);
    border-color: var(--hover-color);
    box-shadow: 0 0 0 0.2rem rgba(255, 3, 3, 0.25);
}
textarea.form-control {
    min-height: 150px;
}


.pointer { cursor: pointer; }
.pointer:hover { color: var(--hover-color); }

.socialSpaces { margin-right:0.5vw; }

.box{ width: calc(100vw / 9 ); }
.box img{ width:100%; height:auto; background-color:white; }

#nextPage {
  text-align: right;
  font-size: 2vw;
  position: absolute;
  right: 0;
  top: -0.5vw;
  line-height: 1;
}

/* ========================
   4. MOBILE STYLES
   ======================== */
@media screen and (max-width: 780px) {
  #about, #portfolio, #research, #tools, #contact {
    scroll-margin-top: 15vh;
  }
    
  .menu-font {
    line-height: 1.4;
    font-size: 4vw; 
    margin: 0;
  }

  .about-text { font-size: 5vw; } 

  .portfolio-item {
    font-size: 7vw;
    margin-bottom: 2vw;
  }
  
  .portfolio-desc-pos {
    font-size: 5vw;
    margin-bottom: 4vw;
  }

  .portfolio-desc { font-size: 4vw; }

  .title-font, .title-name { font-size: 6vw; }

  .top-menu-link {
    font-size: 8vw; 
    display: block; 
    padding: 10px 0; 
  }

  .bottom-menu-link { font-size: 10vw; }
  
  #nextPage {
    font-size: 10vw; 
    position: relative; 
    top: 0;
    right: auto;
    text-align: right; 
    line-height: 1;
  }

  #footer-copyright { display: none; }
  .socialSpaces { margin-right:2vw; margin-left:2vw; }

  h2 { font-size:5vw; }
  h2 a { font-size: 5vw; }
  
  .navbar-toggler { margin-top: -5px; }

  /* THEME TOGGLE MOBILE FIX */
  #theme-container {
    /* FIX: On mobile, keep it high to align with Burger */
    top: 1vw;
    right: 75px; 
  }
  .theme-btn {
    font-size: 6vw;
  }
  
  .contact-info h2 { font-size: 4vw; margin-bottom: 3vw; }
  #contact { min-height: auto; } 
  .col-lg-6.landing-page-text { padding-right: 15px; } 
}