/* File Path: /assets/css/style.css */

/* --- Global Variables (Dark Mode Defaults) --- */
:root {
  /* Core Brand Colors - Updated for a more vibrant dark theme */
  --primary: #1F528C; /* Vibrant Blue from reference */
  --primary-dark: #153A6A;
  --secondary: #B5331D; /* Vibrant Red from reference */
  --accent-light: #7b9cff;

  /* Dark Mode Palette */
  --text-primary: #e2e8f0;
  --text-secondary: #a0a6b5;
  --text-subtle: #7a8290;
  --bg-main: #141721; /* Fallback background color */
  --bg-surface: #1e2434;
  --bg-input: #293041;
  --border-subtle: rgba(255, 255, 255, 0.15);
  --border-active: rgba(31, 82, 140, 0.6);
  --error: #ef4444;

  /* Glassmorphism Effect - Updated for more pop */
  --glass-bg: rgba(255, 255, 255, 0.1);
  --glass-blur: 15px;
  --glass-border: 1px solid rgba(255, 255, 255, 0.2);
  --glass-shadow: 0 4px 30px rgba(0, 0, 0, 0.2);

  /* Transitions */
  --transition-medium: 0.3s ease-in-out;
}

/* --- Light Mode Variables --- */
[data-theme="light"] {
  --primary: #4363e8;
  --primary-dark: #314bba;
  --secondary: #E84D4D;
  --text-primary: #2d3748;
  --text-secondary: #5a6b8a;
  --bg-main: #f0f3f8;
  --bg-surface: #ffffff;
  --bg-input: #e2e6ed;
  --border-subtle: rgba(0, 0, 0, 0.08);
  --glass-bg: rgba(255, 255, 255, 0.6);
  --glass-blur: 15px;
  --glass-border: 1px solid rgba(0, 0, 0, 0.08);
  --glass-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  --error: #dc2626;
}

/* --- Base Styles --- */
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { overflow-x: hidden; }
body {
  font-family: 'Inter', sans-serif; 
  background-color: var(--bg-main); /* Fallback */
  /* Swapped gradient colors */
  background-image: linear-gradient(to bottom right, #B5331D, #1F528C);
  background-attachment: fixed;
  color: var(--text-primary);
  min-height: 100vh; 
  display: flex; 
  flex-direction: column;
  transition: background-image 0.5s ease-in-out, color var(--transition-medium);
}
/* Light mode body background override */
[data-theme="light"] body {
    background-image: none; /* Remove gradient in light mode */
    background-color: var(--bg-main);
}

#body-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    z-index: 1500; 
    background: rgba(0,0,0,0.5);
    display: none; /* Hidden by default */
}
body.nav-open #body-overlay { display: block; }

/* --- Header --- */
.app-header {
  /* This is the main, full-width header bar */
  display: flex; 
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 0.25rem 2rem; /* Further reduced vertical padding */
  position: sticky; 
  top: 0; /* Stick to the top */
  z-index: 1000;
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  border-bottom: var(--glass-border);
  border-bottom-left-radius: 16px;
  border-bottom-right-radius: 16px;
}
.logo { 
    font-size: 2rem; 
    font-weight: 800; 
    text-decoration: none; 
    padding: 0.5rem 1.5rem;
    /* Default (Dark Mode) Logo Style */
    color: var(--text-primary);
    background: none;
    -webkit-background-clip: unset;
    -webkit-text-fill-color: unset;
}
/* Light Mode Logo Style */
[data-theme="light"] .logo {
    background: linear-gradient(90deg, var(--primary), var(--secondary)); 
    -webkit-background-clip: text; 
    -webkit-text-fill-color: transparent; 
}
.header-controls { 
    display: flex; 
    align-items: center; 
    gap: 1.5rem; 
    /* The control's individual container is now transparent */
    padding: 0.5rem 1.5rem;
}
.theme-toggle-container { display: flex; align-items: center; gap: 0.7rem; }
.theme-label { font-size: 0.85rem; color: var(--text-secondary); }
.switch { position: relative; display: inline-block; width: 50px; height: 26px; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: var(--bg-input); transition: background-color 0.4s; border-radius: 9999px; border: 1px solid var(--border-subtle); }
.slider:before { position: absolute; content: ""; height: 20px; width: 20px; left: 3px; bottom: 3px; background: linear-gradient(45deg, var(--primary), var(--primary-dark)); transition: 0.4s; border-radius: 50%; }
input:checked + .slider:before { transform: translateX(24px); background: linear-gradient(45deg, var(--secondary), #ff8a8a); }
.hamburger-btn { background: none; border: none; color: var(--text-primary); font-size: 1.5rem; cursor: pointer; padding: 0.5rem; }

/* --- Side Navigation --- */
.side-nav {
    position: fixed; top: 0; right: 0; width: 280px; height: 100%;
    /* Updated to use glassmorphism theme */
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    border-left: var(--glass-border); 
    z-index: 2000;
    transform: translateX(100%); transition: transform var(--transition-medium);
    display: flex; flex-direction: column;
    /* Added rounded corners */
    border-top-left-radius: 16px;
    border-bottom-left-radius: 16px;
}
body.nav-open .side-nav { transform: translateX(0); }
.side-nav-header { display: flex; justify-content: space-between; align-items: center; padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--border-subtle); }
.side-nav-header h2 { font-size: 1.2rem; margin: 0; }
.close-nav-btn { background: none; border: none; color: var(--text-secondary); font-size: 2rem; line-height: 1; cursor: pointer; }
.nav-link { color: var(--text-secondary); text-decoration: none; padding: 1rem 1.5rem; font-size: 1rem; font-weight: 500; border-bottom: 1px solid var(--border-subtle); transition: color 0.2s, background-color 0.2s; display: block; }
.nav-link:hover, .nav-link.active { color: var(--text-primary); background-color: rgba(0,0,0,0.2); }
.nav-item.has-submenu .nav-link-header { display: flex; justify-content: space-between; align-items: center; cursor: pointer; color: var(--text-secondary); text-decoration: none; padding: 1rem 1.5rem; font-size: 1rem; font-weight: 500; border-bottom: 1px solid var(--border-subtle); transition: color 0.2s, background-color 0.2s; }
.nav-item.has-submenu .nav-link-header:hover { color: var(--text-primary); background-color: rgba(0,0,0,0.2); }
.nav-item.has-submenu .nav-link-header i { transition: transform var(--transition-medium); }
.nav-item.has-submenu .nav-link-header.active i { transform: rotate(180deg); }
.submenu { max-height: 0; overflow: hidden; transition: max-height var(--transition-medium); background-color: rgba(0,0,0,0.15); border-bottom: 1px solid var(--border-subtle); }
.submenu.open { max-height: 500px; }
.submenu .nav-link { display: flex; align-items: center; padding: 0.8rem 1.5rem 0.8rem 2.5rem; font-size: 0.95rem; border-bottom: 1px solid var(--border-subtle); opacity: 0.8; }
.submenu .nav-link:hover { opacity: 1; }
.submenu .nav-link:last-child { border-bottom: none; }

/* --- Main Content --- */
.main-content { 
    flex-grow: 1; 
    padding: 2rem 3rem; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: center;
    text-align: center;
}

/* --- Footer --- */
.app-footer {
  margin-top: auto;
  padding: 0.5rem 2rem;
  font-size: 0.85rem;
  color: var(--text-secondary);
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  border-top: var(--glass-border);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  /* Added rounded corners to match header */
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
}
.app-footer > a { justify-self: start; }
.app-footer p { margin: 0; justify-self: center; }
.app-footer .footer-right { justify-self: end; }
.social-icons { display: flex; align-items: center; gap: 0.75rem; }
.social-icons a, .app-footer > a { color: var(--text-secondary); font-size: 1.3rem; transition: color 0.2s, transform 0.2s; }
.social-icons a:hover, .app-footer > a:hover { color: var(--primary); transform: scale(1.15); }

/* --- Footer Animation Styles --- */
.footer-right { display: flex; align-items: center; gap: 0.5rem; color: var(--text-secondary); }
.rotating-text-container { height: 24px; overflow: hidden; display: flex; align-items: flex-start; }
.rotating-text { display: flex; flex-direction: column; transition: transform 0.5s ease-in-out; }
.rotating-text span { height: 24px; line-height: 24px; white-space: nowrap; font-weight: 500; color: var(--text-primary); }
#linkedinLink.linkedin-glow i { animation: glowing 1s ease-in-out forwards; }
@keyframes glowing {
  0% { text-shadow: 0 0 0px var(--primary); }
  50% { text-shadow: 0 0 8px var(--primary), 0 0 16px var(--primary); }
  100% { text-shadow: 0 0 0px var(--primary); }
}

/* --- Animations --- */
.fade-in {
    animation: fadeInAnimation 0.8s ease-in-out forwards;
}

@keyframes fadeInAnimation {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}