/* Theme variables */
:root {
  --bg-color: #ffffff;
  --text-color: green;
  --header-bg: #ffffff;
  --menu-border: black;
  --menu-shadow: black;
  --menu-active-bg: lightgray;
  --name-color: black;
  --link-color: green;
}

[data-theme="dark"] {
  --bg-color: #1a1a1a;
  --text-color: #00ff00;
  --header-bg: #1a1a1a;
  --menu-border: #00ff00;
  --menu-shadow: #003300;
  --menu-active-bg: #2a2a2a;
  --name-color: #00ff00;
  --link-color: #00ff00;
}

html, body {
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 0px;
  font-family: 'Electrolize', sans-serif;
  color: var(--text-color);
  background-color: var(--bg-color);
  display: flex-shrink;
  transition: background-color 0.3s ease, color 0.3s ease;
  }

/*
 * Wrapper window
 */
.wrapper {  
  max-width: 100%;
  height: 100%;
  display: grid;
  grid-template-rows: 1fr 10fr;
  grid-template-columns: 20% 80%;
}


/*
 * Navigation menu
 */
.header {
/*  *border:1px solid black;*/
  grid-row: 1 / 2;
  grid-column-start: 1;
  grid-column-end: 3;
    width: 100%;
}

.menu {
  list-style: none;
  padding-left: 0px;
  font-size: 150%;
}

.menu ul {

  list-style-type: none;
  text-align: center;
  padding: 0;
  margin: 1.4em 0;
}

.menu li {
  display: inline-block;
  margin-right: 5%;
  border: 1px solid var(--menu-border);
  box-shadow: 5px 5px var(--menu-shadow);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.menu a {
  text-decoration: none;
  display: block;
  /*padding: 4px;*/
}

/*
 * EN/FR CV versions
 */
.cv-versions {
  list-style: none;
  padding-left: 0px;
  /*font-size: 18px;*/
}
.cv-versions li {
  display: inline-block;
  margin-right: 50px;
}
.cv-versions a {
  text-decoration: none;
  padding: 4px;
}

/*
 * Left/Right windows
 */
.left, .right, .leftright {
  margin: 5%;
  /*border:1px solid black;*/
  grid-row: 2 / 2;
}
.left {
  grid-column: 1/2;
  text-align: center;
  word-wrap: break-word;
  /*
  align-items: center;
  justify-content: center;
  */
}
.right {
  max-width: 60%;
  grid-column: 2/2;
  text-align: center;
  font-size: 120%;
  word-break: break-word;
  /*
  align-items: left;
  */
  justify-content: center;
  
}

.leftright {

  grid-column-start: 2;
  grid-column-end: 3;
  word-wrap: break-word;
  justify-content: center;
}

/*
 * Name + profile picture
 */
.name {
  font-family: 'Tourney', sans-serif;
  color: var(--name-color);
  margin-bottom: 2px;
  font-size: 120%;
  transition: color 0.3s ease;
}
.profile-picture {
  border-radius: 20%;
}

/*
 * Social links
 */
.social-links {
  list-style: none;
  padding-left: 0px;
}
.social-links li {
  display: inline-block;
}
.social-links a {
  text-decoration: none;
  padding: 4px;
}
.logo {
    display: inline-block;
    vertical-align:top;
    /*width: 50px;*/
    height: 30px;
}

@media screen and (max-width: 768px){
    /* Mobile and tablet responsive layout */
    
    /* Stack layout vertically instead of side-by-side */
    .wrapper {
        grid-template-rows: auto auto auto;
        grid-template-columns: 1fr;
    }
    
    /* Make header span full width */
    .header {
        grid-row: 1;
        grid-column: 1;
    }
    
    /* Stack left and right sections vertically */
    .left {
        grid-row: 2;
        grid-column: 1;
        margin: 3% 5%;
    }
    
    .right {
        grid-row: 3;
        grid-column: 1;
        max-width: 100%;
        margin: 3% 5%;
        font-size: 100%;
    }
    
    .leftright {
        grid-row: 2;
        grid-column: 1;
        margin: 3% 5%;
    }
    
    /* Adjust menu for mobile */
    .menu {
        font-size: 100%;
    }
    
    .menu ul {
        margin: 1em 0;
    }
    
    .menu li {
        margin-right: 2%;
        margin-bottom: 0.5em;
        padding: 0.3em 0.5em;
    }
    
    /* Reduce profile picture size on mobile */
    .profile-picture {
        width: 50%;
        max-width: 200px;
    }
    
    /* Adjust name and subtitle */
    .name {
        font-size: 150%;
    }
    
    .subtitle {
        font-size: 100%;
    }
    
    /* Adjust social links */
    .logo {
        height: 25px;
    }
    
    .social-links li {
        margin: 0 0.2em;
    }
}

/* Theme Toggle Button */
.theme-toggle {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 1000;
  cursor: pointer;
}

.theme-toggle input[type="checkbox"] {
  display: none;
}

.theme-toggle label {
  display: block;
  width: 60px;
  height: 30px;
  background-color: var(--menu-border);
  border-radius: 15px;
  position: relative;
  cursor: pointer;
  transition: background-color 0.3s ease;
  border: 2px solid var(--menu-border);
}

.theme-toggle label::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  background-color: #ffffff;
  border-radius: 50%;
  transition: transform 0.3s ease, background-color 0.3s ease;
}

.theme-toggle input[type="checkbox"]:checked + label {
  background-color: #00ff00;
}

.theme-toggle input[type="checkbox"]:checked + label::after {
  transform: translateX(30px);
  background-color: #1a1a1a;
}

/* Sun and Moon icons - using Unicode characters instead of emojis */
.theme-toggle label::before {
  content: '';
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 16px;
  z-index: 1;
  transition: opacity 0.3s ease;
  color: #ffd700;
}

.theme-toggle input[type="checkbox"]:checked + label::before {
  content: '';
  left: auto;
  right: 8px;
  color: #ffffff;
}

@media screen and (max-width: 768px) {
    .theme-toggle {
        top: 10px;
        right: 10px;
    }
    
    .theme-toggle label {
        width: 50px;
        height: 25px;
    }
    
    .theme-toggle label::after {
        width: 17px;
        height: 17px;
        top: 2px;
        left: 2px;
    }
    
    .theme-toggle input[type="checkbox"]:checked + label::after {
        transform: translateX(25px);
    }
    
    .theme-toggle label::before {
        font-size: 14px;
        left: 6px;
    }
    
    .theme-toggle input[type="checkbox"]:checked + label::before {
        right: 6px;
    }
}