/* 1. Font Imports */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&family=Outfit:wght@600;700&family=Poppins:wght@300;400;500&display=swap');

/* 2. Custom Font Setup */
@font-face {
    font-family: 'The Breakdown';
    src: url('/static/fonts/TheBreakdown.ttf') format('truetype'); /* Ensure this path is correct */
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* 3. Variables & Theming */
:root {
    /* Core Palette */
    --cream: #F5F0E6;
    --latte: #E3D5CA;
    --almond: #D5B9A1;
    --mocha: #9C7C64;
    --espresso: #6B4E3D;
    --coffee: #3E2C26;
    --obsidian: #1A1210;

    /* Light Theme Mapping (Default) */
    --bg-body: var(--cream);
    --bg-shape-1: rgba(213, 185, 161, 0.2); /* Faint almond for background blobs */
    --text-main: var(--coffee);
    --text-muted: var(--espresso);

    /* Code Area Specifics */
    --code-bg: var(--coffee);
    --code-text: var(--latte);
    --code-header: var(--obsidian);

    /* Component Colors */
    --nav-bg: var(--latte);
    --hero-bg: var(--almond);
    --hero-text: var(--coffee);
    --card-bg: var(--almond);
    --card-img-placeholder: var(--coffee);
    --btn-primary-bg: var(--cream);
    --btn-primary-text: var(--coffee);

    /* Toggle Colors */
    --toggle-bg: var(--latte);
    --toggle-icon: var(--coffee);

    /* Spacing & Radius */
    --radius-pill: 50rem;
    --radius-card: 2.5rem;
    --transition-speed: 0.4s;
}

/* Dark Theme Mapping */
[data-theme="dark"] {
    --bg-body: var(--obsidian);
    --bg-shape-1: rgba(62, 44, 38, 0.4);
    --text-main: var(--cream);
    --text-muted: var(--latte);

    --nav-bg: var(--coffee);
    --hero-bg: var(--coffee);
    --hero-text: var(--cream);
    --card-bg: var(--coffee);
    --card-img-placeholder: var(--cream);
    --btn-primary-bg: var(--almond);
    --btn-primary-text: var(--obsidian);

    /* Dark Theme Code Mapping */
    --code-bg: var(--obsidian);
    --code-text: var(--cream);
    --code-header: var(--coffee);

    --toggle-bg: var(--coffee);
    --toggle-icon: var(--cream);
}

/* 4. Global Styles */
body {
    background-color: var(--bg-body);
    color: var(--text-main);
    font-family: 'Poppins', sans-serif;
    transition: background-color var(--transition-speed) ease, color var(--transition-speed) ease;
    overflow-x: hidden;
    position: relative;
}

h1, h2, h3, h4, h5, h6, .display-title, .nav-link, .btn-pill {
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    color: var(--text-main);
}

/* Abstract Background Pattern (Simulated with CSS Gradients) */
body::before {
    content: '';
    position: fixed;
    top: -10%;
    left: -10%;
    width: 60%;
    height: 60%;
    background: radial-gradient(circle, var(--bg-shape-1) 0%, transparent 70%);
    z-index: -1;
    border-radius: 50%;
    filter: blur(60px);
}

body::after {
    content: '';
    position: fixed;
    bottom: -10%;
    right: -10%;
    width: 70%;
    height: 70%;
    background: radial-gradient(circle, var(--bg-shape-1) 0%, transparent 70%);
    z-index: -1;
    border-radius: 50%;
    filter: blur(60px);
}

h1, h2, h3, h4 {
    font-weight: 700;
}

a {
    text-decoration: none;
    color: inherit;
}

/* 5. Custom Components */

/* Floating Navbar */
.navbar-custom {
    background-color: var(--nav-bg);
    border-radius: var(--radius-pill);
    padding: 0.75rem 2rem;
    box-shadow: 0 4px 20px rgba(0,0,0,0.05);
    display: inline-flex;
    align-items: center;
    gap: 1.5rem;
    transition: background-color var(--transition-speed) ease;
}

.nav-link {
    color: var(--text-main) !important;
    font-weight: 600;
    font-size: 1.1rem;
    position: relative;
}

.nav-link::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: 0;
    left: 50%;
    background-color: var(--text-main);
    transition: all 0.3s ease;
}

.nav-link:hover::after {
    width: 100%;
    left: 0;
}

/* Side Tools (Accessibility + Theme Toggle) */
.side-tools {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    background-color: var(--toggle-bg);
    padding: 0.5rem;
    border-radius: 2rem;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.tool-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: var(--toggle-icon);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.2s;
}

.tool-btn:hover {
    background-color: rgba(255,255,255,0.1);
    transform: scale(1.1);
}

/* Hero Section */
.hero-card {
    background-color: var(--hero-bg);
    border-radius: var(--radius-card);
    padding: 5rem 2rem;
    text-align: center;
    color: var(--hero-text);
    position: relative;
    overflow: hidden;
    transition: background-color var(--transition-speed) ease;
}

.display-title {
    font-family: 'Outfit', sans-serif;
    font-size: clamp(3rem, 10vw, 6rem); /* Responsive sizing */
    line-height: 1.1;
    margin-bottom: 0.5rem;
    opacity: 0; /* For animation */
    animation: fadeInUp 0.8s ease forwards 0.2s;
}

.hero-role {
    font-family: 'Outfit', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    font-size: 1.25rem;
    margin-bottom: 2rem;
    opacity: 0;
    animation: fadeInUp 0.8s ease forwards 0.4s;
}

/* Pill Button */
.btn-pill {
    background-color: var(--btn-primary-bg);
    color: var(--btn-primary-text);
    border-radius: var(--radius-pill);
    padding: 0.75rem 2rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    border: none;
    transition: transform 0.2s, box-shadow 0.2s;
    opacity: 0;
    animation: fadeInUp 0.8s ease forwards 0.6s;
}

.btn-pill:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}

.btn-icon {
    background-color: var(--text-main);
    color: var(--bg-body);
    border-radius: 50%;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Project Cards */
.project-card {
    background-color: var(--card-bg);
    border-radius: var(--radius-card);
    padding: 1.5rem;
    height: 100%;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
}

.project-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.card-image-placeholder {
    background-color: var(--card-img-placeholder);
    color: var(--card-bg); /* Text color inside image for 'IMAGE' text */
    border-radius: 2rem;
    aspect-ratio: 16/10;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 2rem;
    margin-bottom: 1.5rem;
}

.card-title {
    font-size: 1.75rem;
    margin-bottom: 1rem;
    color: var(--text-main);
}

.card-text {
    color: var(--text-muted);
    font-size: 0.95rem;
    line-height: 1.6;
}

.muted-text {
    color: var(--text-muted);
}

/* 6. Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 4. Code Area Styling */
/* The container for the code */
pre {
    background-color: var(--code-bg);
    border-radius: 1.5rem; /* Matches your rounded aesthetic */
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    margin: 2rem 0;
    overflow: hidden; /* Ensures header doesn't spill out */
    position: relative;
}

/* The actual code text */
code {
    font-family: 'JetBrains Mono', monospace !important;
    color: var(--code-text);
    font-size: 0.9rem;
    display: block;
    padding: 1.5rem 2rem;
    overflow-x: auto; /* Horizontal scroll for long lines */
}

/* Optional: A Mac-like 'window' header for code blocks */
pre::before {
    content: '● ● ●'; /* Fake window buttons */
    display: block;
    background-color: var(--code-header);
    color: var(--mocha); /* The dots color */
    padding: 0.5rem 1.5rem;
    font-size: 0.8rem;
    letter-spacing: 5px;
    font-family: sans-serif;
    border-bottom: 2px solid rgba(255,255,255,0.05);
}

/* Inline code highlighting (e.g. inside a paragraph) */
p code {
    background-color: var(--latte);
    color: var(--coffee);
    padding: 0.2rem 0.5rem;
    border-radius: 0.5rem;
    display: inline;
    font-size: 0.85em;
}

[data-theme="dark"] p code {
    background-color: var(--coffee);
    color: var(--cream);
}

/* --- Additions for Base Template --- */

/* 1. Header & Pointer Events */
/* We want clicks to pass through the empty header area to the content below */
.pointer-events-none { pointer-events: none; }
.pointer-events-auto { pointer-events: auto; }

/* 2. Content Spacing */
.content-wrapper {
    /* Padding top for Desktop Header */
    padding-top: 120px;
    /* Padding bottom for Mobile Nav */
    padding-bottom: 100px;
    min-height: 80vh;
}

/* 3. Footer Styling */
.footer-custom {
    background-color: var(--card-bg);
    border-radius: var(--radius-card) var(--radius-card) 0 0; /* Rounded top only */
    color: var(--text-main);
}

.social-icon {
    font-size: 1.5rem;
    margin: 0 1rem;
    color: var(--text-muted);
    transition: color 0.3s ease, transform 0.3s ease;
}

.social-icon:hover {
    color: var(--text-main);
    transform: translateY(-3px);
}

/* 4. Mobile Bottom Nav Styling */
.mobile-nav {
    position: fixed;
    bottom: 1.5rem;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    max-width: 400px;
    background-color: var(--nav-bg);
    border-radius: 2rem;
    padding: 0.75rem 1.5rem;
    box-shadow: 0 10px 40px rgba(0,0,0,0.15);
    z-index: 1000;
    backdrop-filter: blur(10px); /* Optional glass effect */
}

.mobile-link {
    color: var(--text-muted);
    font-size: 1.25rem;
    transition: color 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.mobile-link.active, .mobile-link:hover {
    color: var(--text-main);
}

/* The floating center button (Contact) */
.mobile-action-wrapper {
    position: relative;
    top: -25px; /* Pull it up out of the bar */
}

.mobile-action-btn {
    width: 55px;
    height: 55px;
    background-color: var(--text-main); /* Contrast color */
    color: var(--bg-body);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    transition: transform 0.2s;
    border: 4px solid var(--bg-body); /* Creates a 'cutout' effect */
}

.mobile-action-btn:hover {
    transform: scale(1.1);
    color: var(--bg-body);
}

/* Fix for dark mode border on cutout */
[data-theme="dark"] .mobile-action-btn {
    border-color: var(--obsidian);
}

/* Badge override for softer look */
.badge {
    background-color: var(--bg-body) !important; /* Matches background */
    color: var(--text-muted) !important;
    border: 1px solid var(--text-muted);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.75rem;
    padding: 0.4em 0.8em;
}

[data-theme="dark"] .badge {
    border-color: var(--text-muted);
    color: var(--text-main) !important;
}

/* Smooth Scroll behavior for the whole page */
html {
    scroll-behavior: smooth;
}

.skill-tag {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.85rem;
    background-color: var(--bg-body); /* Creates a 'cutout' look against the card */
    color: var(--text-main);
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    border: 1px solid var(--text-muted);
    transition: transform 0.2s, background-color 0.2s;
    cursor: default;
}

.skill-tag:hover {
    transform: translateY(-2px);
    background-color: var(--text-main);
    color: var(--bg-body);
    border-color: var(--text-main);
}

.game-card {
    border-radius: var(--radius-card);
    overflow: hidden;
    position: relative;
    height: 300px; /* Fixed height ensures grid alignment */
    background-size: cover;
    background-position: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.game-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}

.game-featured {
    background-color: var(--coffee); /* Fallback if image fails */
}

/* Gradient Overlay for text legibility on images */
.game-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: linear-gradient(to top, rgba(0,0,0,0.9), transparent);
    padding: 2rem;
    height: 100%;
    display: flex;
    align-items: flex-end;
}

.game-title {
    color: #fff; /* Always white for contrast on overlay/dark cards */
    font-weight: 700;
}

.border-dashed {
    border-style: dashed !important;
}

.small-pill {
    padding: 0.5rem 1.5rem;
    font-size: 0.9rem;
}

/* --- Games Rotation Section --- */

.game-cover-card {
    transition: transform 0.3s ease;
    cursor: default;
}

.game-cover-card:hover {
    transform: translateY(-5px);
}

.game-image {
    aspect-ratio: 3/4; /* Standard box art ratio */
    border-radius: 1.5rem; /* Matches your rounded theme */
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}

/* If you use real images, add this class to the <img> tag */
.img-cover {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Status Badges */
.game-status {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.3rem 0.6rem;
    border-radius: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
    font-family: 'JetBrains Mono', monospace;
}

.badge-playing {
    background-color: var(--cream);
    color: var(--coffee);
}

.badge-online {
    background-color: #ff4655; /* Valorant Red-ish */
    color: white;
}

.badge-fav {
    background-color: #ffc107; /* Gold */
    color: var(--obsidian);
}

.badge-backlog {
    background-color: rgba(0,0,0,0.5);
    color: white;
    backdrop-filter: blur(4px);
}

.platform-text {
    font-size: 0.8rem;
    color: var(--text-muted);
    font-family: 'Outfit', sans-serif;
}

/* --- About Page Styles --- */

/* 1. Profile Image Area */
.profile-image-container {
    position: relative;
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
    aspect-ratio: 1/1;
}

.profile-placeholder {
    width: 100%;
    height: 100%;
    background-color: var(--mocha);
    border-radius: 2rem;
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: var(--cream);
    overflow: hidden;
    /* If adding real image: background-image: url(...); background-size: cover; */
}

/* The decorative blob behind the image */
.profile-blob {
    position: absolute;
    top: 20px;
    left: 20px;
    width: 100%;
    height: 100%;
    background-color: var(--almond);
    border-radius: 2rem;
    z-index: 1;
    opacity: 0.5;
    transition: transform 0.5s ease;
}

.profile-image-container:hover .profile-blob {
    transform: translate(10px, 10px);
}

/* 2. Timeline Component */
.timeline {
    position: relative;
    padding-left: 2rem;
    border-left: 2px solid var(--latte); /* The vertical line */
}

[data-theme="dark"] .timeline {
    border-left-color: var(--coffee);
}

.timeline-item {
    position: relative;
    margin-bottom: 3rem;
}

.timeline-item:last-child {
    margin-bottom: 0;
}

/* The Dot */
.timeline-marker {
    position: absolute;
    left: -2.6rem; /* Align with line */
    top: 0.25rem;
    width: 1.2rem;
    height: 1.2rem;
    background-color: var(--text-main);
    border: 4px solid var(--bg-body); /* Creates a 'gap' between line and dot */
    border-radius: 50%;
    z-index: 2;
}

/* Different color for Education */
.marker-school {
    background-color: var(--mocha);
}

.timeline-date {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.85rem;
    color: var(--text-muted);
    background-color: var(--nav-bg);
    padding: 0.2rem 0.6rem;
    border-radius: 4px;
    display: inline-block;
    margin-bottom: 0.5rem;
}

.timeline-company {
    font-family: 'Outfit', sans-serif;
    text-transform: uppercase;
    font-size: 0.9rem;
    letter-spacing: 0.05em;
    color: var(--mocha);
    font-weight: 600;
}

.tracking-wide {
    letter-spacing: 0.1em;
}

/* --- Contact Page Styles --- */

/* 1. Labels */
.label-small {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--text-muted);
    margin-bottom: 0.2rem;
    font-family: 'Outfit', sans-serif;
    text-transform: uppercase;
}

/* 2. Email Address Text */
.email-text {
    font-family: 'JetBrains Mono', monospace;
    font-size: 1.1rem;
    color: var(--text-main);
    font-weight: 500;
}

/* 3. Soft Icon Button */
.btn-icon-soft {
    background-color: var(--nav-bg);
    color: var(--text-muted);
    border: none;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-icon-soft:hover {
    background-color: var(--text-main);
    color: var(--bg-body);
    transform: scale(1.1);
}

/* 4. Large Social Buttons */
.social-btn-large {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1rem;
    background-color: var(--card-bg);
    border-radius: 1rem;
    text-decoration: none;
    color: var(--text-main);
    font-weight: 600;
    transition: transform 0.2s, box-shadow 0.2s;
}

.social-btn-large:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    color: var(--text-main);
}

/* 1. Label Styling - Force them to block (top of input) */
.form-label {
    display: block; /* Ensures label sits on its own line */
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    color: var(--text-muted); /* Uses your espresso/mocha color */
    text-transform: uppercase;
    margin-bottom: 0.5rem; /* Space between label and input */
    margin-top: 0.5rem;
}

/* 2. Input & Textarea Styling */
.form-control-custom {
    display: block;
    width: 100%;
    background-color: var(--bg-body) !important; /* Cream color */
    border: 2px solid transparent; /* No border by default */
    border-radius: 1rem; /* Soft rounded corners */
    padding: 1rem 1.5rem; /* Comfortable internal spacing */
    color: var(--text-main);
    font-family: 'Poppins', sans-serif;
    font-size: 1rem;
    transition: all 0.3s ease;
    box-shadow: none; /* Remove default bootstrap shadow */
}

.form-control-custom:focus {
    box-shadow: 0 0 0 4px rgba(156, 124, 100, 0.2); /* Soft mocha glow */
    border-color: var(--mocha);
    outline: none;
}

.form-control-custom::placeholder {
    color: var(--text-muted);
    opacity: 0.5;
}

/* 3. The Dropdown Fix (Crucial) */
select.form-control-custom {
    appearance: none; /* Hides default ugly browser arrow */
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;

    /* Custom Arrow SVG */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%236B4E3D' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");

    /* PREVENTS REPEATING (The zig-zag fix) */
    background-repeat: no-repeat;
    background-position: right 1.5rem center;
    background-size: 16px 12px;
    padding-right: 3rem; /* Prevents text from hitting the arrow */
}

/* 4. Layout Spacing */
.mb-4 {
    margin-bottom: 1.5rem !important; /* ensure good vertical rhythm */
}

/* 6. Status Dot */
.status-dot {
    width: 10px;
    height: 10px;
    background-color: #2ecc71; /* Green */
    border-radius: 50%;
    display: inline-block;
}

.pulse {
    box-shadow: 0 0 0 rgba(46, 204, 113, 0.4);
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(46, 204, 113, 0.4);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(46, 204, 113, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(46, 204, 113, 0);
    }
}

/* --- Project Page Utilities --- */

/* Ensures images fill their containers without stretching */
.object-fit-cover {
    object-fit: cover;
}

/* Rounded corners for the big hero image */
.rounded-5 {
    border-radius: 2rem !important;
}

/* Rich Text Styling (Sanity Content) */
.rich-text-content p {
    margin-bottom: 1.5rem;
    line-height: 1.8;
    color: var(--text-muted);
}

.rich-text-content h2,
.rich-text-content h3 {
    color: var(--text-main);
    font-weight: 700;
    margin-top: 2rem;
    margin-bottom: 1rem;
    font-family: 'Outfit', sans-serif;
}

.rich-text-content ul {
    margin-bottom: 1.5rem;
    padding-left: 1.5rem;
}

.rich-text-content li {
    margin-bottom: 0.5rem;
    color: var(--text-muted);
}

/* Gallery Zoom Effect */
.zoom-effect {
    cursor: pointer;
    transition: transform 0.3s ease;
}

.zoom-effect:hover {
    transform: scale(1.02);
}

/* --- Coming Soon Page Extras --- */

/* Blinking Dot for Terminal Status */
.status-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    background-color: #2ecc71; /* Green */
    border-radius: 50%;
}

.blink {
    animation: blinker 1.5s linear infinite;
}

@keyframes blinker {
    50% { opacity: 0; }
}

/* Striped Progress Bar Animation */
.progress-fill {
    background-image: linear-gradient(
        45deg,
        rgba(255, 255, 255, 0.15) 25%,
        transparent 25%,
        transparent 50%,
        rgba(255, 255, 255, 0.15) 50%,
        rgba(255, 255, 255, 0.15) 75%,
        transparent 75%,
        transparent
    );
    background-size: 1rem 1rem;
    animation: progress-stripes 1s linear infinite;
}

@keyframes progress-stripes {
    0% { background-position: 1rem 0; }
    100% { background-position: 0 0; }
}