/* base.css */
@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@400;700&display=swap');

:root {
    /* Responsive font sizing - scales with viewport */
    font-size: clamp(12px, 2vw, 20px);
}

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

body {
    font-family: 'Lexend', Arial, sans-serif;
    color: #fff;
    padding: clamp(1rem, 5vw, 2rem);
    background:
        linear-gradient(to right, rgba(255, 107, 157, 0.12) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 107, 157, 0.12) 1px, transparent 1px);
    background-size: 20px 20px;
    background-color: #1b0f19;
    background-attachment: fixed;
    min-height: 100vh;
}

body.voice-page {
    min-height: 100dvh;
    padding: 0;
    overflow: hidden;
    display: grid;
    place-items: center;
}

body.voice-page .voice-stage {
    width: 100vw;
    height: 100dvh;
    padding: clamp(1rem, 2.2vw, 2rem);
    display: grid;
    grid-template-rows: auto auto 1fr auto;
    align-content: start;
}

/* Adjust header for dark mode */
header {
    text-align: center;
    margin-bottom: clamp(1rem, 5vw, 2rem);
}

/* Theme toggle button */
.theme-toggle {
    margin-left: clamp(0.5rem, 2vw, 1rem);
    padding: clamp(0.3rem, 1vw, 0.7rem) clamp(0.5rem, 1.5vw, 0.8rem);
    border-radius: clamp(0.3rem, 1vw, 0.5rem);
    border: 1px solid #777;
    background: transparent;
    color: inherit;
    cursor: pointer;
    font-weight: bold;
    font-size: clamp(0.75rem, 1.5vw, 1rem);
}
.theme-toggle:hover {
    background: rgba(255,255,255,0.03);
}

body.retro-theme .theme-toggle {
    border-color: #627d98;
    color: #333344;
    background: rgba(0,0,0,0.02);
}

h1 {
    font-size: clamp(1.5rem, 6vw, 3rem);
    color: #ff157d;
}

.hidden {
    display: none;
    max-width: 0px;
    max-height: 0px;
    position: absolute;
}

footer {
    text-align: center;
    margin-top: clamp(2rem, 10vw, 4rem);
    font-size: clamp(0.75rem, 1.5vw, 1rem);
    color: #fff;
}

footer a {
    text-decoration: none;
    font-size: clamp(1rem, 2vw, 1.5rem);
    margin-right: clamp(0.5rem, 2vw, 1rem);
    margin-bottom: clamp(0.3rem, 1vw, 0.5rem);
    color: #fff;
}

footer a:hover {
    color: #c1c1c1;
}

/* Retro theme filter text */
body.retro-theme .filter label {
    color: #333344;
}

footer p{
    text-align: center;
    font-size: clamp(0.75rem, 1.5vw, 1rem);
    color: #fff;
}

.blur-image, .project img.blur-image {
    filter: blur(2px) saturate(0);
}

.intro-text {
    text-align: center;
    margin: clamp(1rem, 3vw, 2rem) auto clamp(2rem, 8vw, 3rem);
    max-width: 90%;
    font-size: clamp(1rem, 2vw, 1.3rem);
    color: #fff;
}

/* Horizontal Rule */
hr {
    border: none;
    background-color: #a81350;
    height: 0;
    margin: 0;
    opacity: 1;
    background: linear-gradient(to right, #ff157d, #a81350);
    height: clamp(2px, 0.5vw, 4px);
    border-radius: clamp(0.3rem, 1vw, 0.5rem);
    box-shadow: 0px clamp(1px, 0.3vw, 3px) clamp(3px, 1vw, 8px) rgba(0, 0, 0, 0.3);
    margin: clamp(1.5rem, 5vw, 2rem) 0;
}

/* Styling for inline code blocks inside backticks */
highlight-text {
    background-color: #2d2d2d;
    padding: clamp(0.1rem, 0.5vw, 0.3rem) clamp(0.3rem, 1vw, 0.5rem);
    border-radius: clamp(0.2rem, 0.5vw, 0.3rem);
    font-family: monospace;
    font-weight: bold;
    color: white;
}

custom-tooltip {
    position: relative;
    display: inline-block;
    cursor: pointer;
    color: #ff157d;
    font-weight: bold;
}

custom-tooltip p{
    color: #ff157d;
}

custom-tooltip .tooltip-box {
    visibility: hidden;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    background-color: #a81350;
    color: #fff;
    padding: clamp(0.3rem, 1vw, 0.7rem) clamp(0.5rem, 1.5vw, 0.8rem);
    border-radius: clamp(0.2rem, 0.5vw, 0.3rem);
    white-space: normal;
    font-size: clamp(0.75rem, 1.5vw, 1rem);
    z-index: 10;
    opacity: 0;
    transition: opacity 0.2s;
    max-width: 90vw;
    min-width: clamp(200px, 80vw, 300px);
}

custom-tooltip .tooltip-box::after {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent #a81350 transparent;
}

body.retro-theme custom-tooltip:hover .tooltip-box {
    visibility: visible;
    opacity: 1;
    background-color: #d4881e;
}

/* Custom scrollbar for WebKit browsers (Chrome, Safari, Edge) */
::-webkit-scrollbar {
    width: 12px;
    transition: background-color 0.3s ease;
}

/* Track (background of the scrollbar) */
::-webkit-scrollbar-track {
    background: #ff157d;
    border-radius: 10px;
    transition: background-color 0.3s ease;
}

/* Handle (scrollbar thumb) */
::-webkit-scrollbar-thumb {
    background-color: #a81350;
    border-radius: 10px;
    border: 3px solid #980000;
    transition: background-color 0.3s ease;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background-color: #ff4a8c;
}

/* Custom scrollbar for Firefox */
html {
    scrollbar-width: thin;
    scrollbar-color: #ff157d #980000;
}

/* Retro theme Firefox scrollbar */
body.retro-theme {
    scrollbar-color: #d4a574 #f5deb3;
}

/* Retro theme color swap */
body.retro-theme {
    background-color: #f3eac2; /* soft cream */
    color: #333344; /* dark grayish-blue for comfortable contrast */
    background:
    /* subtle grid pattern for retro theme */
        linear-gradient(to right, #e6d5bd 1px, transparent 1px),
        linear-gradient(to bottom, #e6d5bd 1px, transparent 1px);
    background-size: 20px 20px;
    background-color: #f3eac2;
}

body.retro-theme h1 {
    color: #ff6f61; /* muted coral */
}

body.retro-theme .intro-text {
    color: #333344; /* dark grayish-blue to match body text */
}

/* Retro theme section backgrounds */
body.retro-theme .background-section {
    background-color: #f5deb3 !important; /* wheat/beige */
    color: #333344;
}

body.retro-theme footer a {
    color: #627d98; /* soft blue */
}

body.retro-theme .highlight-text {
    background-color: #a0c1b8; /* muted teal */
    color: #333344;
}

/* Retro theme purple-to-orange/yellow color replacements */
body.retro-theme h1 {
    color: #ff6f61; /* muted coral (already set above) */
}

body.retro-theme custom-tooltip {
    color: #d4a574; /* replace #627d98 soft blue */
}

body.retro-theme custom-tooltip p {
    color: #d4a574;
}

body.retro-theme custom-tooltip .tooltip-box {
    background-color: #d4a574; /* replace #4c3a62 dark purple */
    color: #333344;
}

body.retro-theme custom-tooltip .tooltip-box::after {
    border-color: transparent transparent #d4a574 transparent;
}

body.retro-theme hr {
    background: linear-gradient(to right, #f4a460, #d4881e); /* replace purple gradient */
}

/* Retro theme navbar */
body.retro-theme .navbar {
    background-color: #d4a574;
}

/* Scrollbar in retro theme */
body.retro-theme ::-webkit-scrollbar-thumb {
    background-color: #d4a574; /* tan for consistency */
}

body.retro-theme ::-webkit-scrollbar-thumb:hover {
    background-color: #d4881e; /* burnt orange on hover */
}

body.retro-theme ::-webkit-scrollbar-track {
    background: #f5deb3; /* light wheat background */
}

/* Hero Section Styles */
.hero-section {
    max-width: 1000px;
    margin: 40px auto;
    padding: 40px;
    background: #ff157d;
    border-radius: 12px;
    border-left: 4px solid #ff157d;
}

.hero-content {
    display: flex;
    align-items: center;
    gap: 40px;
}

.hero-text {
    flex: 1;
}

.hero-title {
    font-size: 48px;
    color: #fff;
    margin-bottom: 8px;
    font-weight: bold;
}

.hero-subtitle {
    font-size: 24px;
    color: #fff;
    margin-bottom: 30px;
    font-weight: 500;
}

.hero-info {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 30px;
}

.info-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    border-left: 3px solid #ff157d;
}

.info-label {
    font-size: 12px;
    font-weight: bold;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.info-value {
    font-size: 15px;
    color: #fff;
    line-height: 1.4;
}

.hero-mission {
    font-size: 16px;
    color: #fff;
    line-height: 1.6;
    font-style: italic;
    padding: 20px;
    background: rgba(255, 21, 125, 0.1);
    border-radius: 8px;
}

.hero-image {
    flex: 0 0 300px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-image img {
    width: 100%;
    max-width: 280px;
    height: auto;
    border-radius: 12px;
    border: 3px solid #ff157d;
    box-shadow: 0 8px 24px rgba(255, 21, 125, 0.3);
    object-fit: cover;
}

/* Retro theme overrides for hero section */
body.retro-theme .hero-section {
    background: #e6d5bd;
    border-left-color: #f4a460;
}

body.retro-theme .hero-title {
    color: #d4a574;
}

body.retro-theme .hero-subtitle {
    color: #d4881e;
}

body.retro-theme .info-label {
    color: #f4a460;
}

body.retro-theme .info-value {
    color: #333344;
}

body.retro-theme .info-item {
    background: rgba(0, 0, 0, 0.05);
    border-left-color: #f4a460;
}

body.retro-theme .hero-mission {
    background: rgba(244, 164, 96, 0.1);
    color: #333344;
}

/* Responsive design for hero section */
@media (max-width: 768px) {
    .hero-section {
        padding: 30px;
        margin: 30px auto;
    }

    .hero-content {
        flex-direction: column;
        gap: 20px;
    }

    .hero-title {
        font-size: 36px;
    }

    .hero-subtitle {
        font-size: 18px;
    }

    .hero-info {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .hero-mission {
        font-size: 14px;
    }
}