/*
Copyright 2025 Jordan Scott, Code Talkers Engineering
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.

MTD Demo - Code Talkers Engineering Brand
Secure communications through innovative engineering solutions
*/

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&family=Open+Sans:wght@400;600&family=Fira+Code:wght@400;500&display=swap');

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

:root {
    /* Code Talkers Engineering Brand Colors */
    --cte-red: #FF0000;
    --cte-red-dark: #CC0000;
    --cte-red-light: rgba(255, 0, 0, 0.1);
    --cte-red-accent: rgba(255, 0, 0, 0.15);
    --cte-black: #000000;
    --cte-dark-gray: #2C2C2C;
    --cte-gray: #6c757d;
    --cte-light-gray: #F5F5F5;
    --cte-white: #FFFFFF;

    /* Semantic Colors */
    --primary: var(--cte-red);
    --primary-dark: var(--cte-red-dark);
    --secondary: var(--cte-dark-gray);
    --success: #28a745;
    --warning: #ffc107;
    --danger: var(--cte-red);
    --info: #17a2b8;
    --dark: var(--cte-dark-gray);
    --light: var(--cte-light-gray);
    --border: #dee2e6;

    /* Shadows */
    --shadow-subtle: 0 2px 4px rgba(0,0,0,0.1);
    --shadow: 0 4px 12px rgba(0,0,0,0.1);
    --shadow-hover: 0 4px 12px rgba(255,0,0,0.2);
    --shadow-strong: 0 6px 20px rgba(0,0,0,0.15);

    /* Typography */
    --header-font: 'Montserrat', sans-serif;
    --body-font: 'Open Sans', sans-serif;
    --code-font: 'Fira Code', 'Courier New', monospace;

    /* Layout */
    --sidebar-width: 280px;
}

body {
    font-family: var(--body-font);
    background: var(--cte-white);
    color: var(--cte-dark-gray);
    line-height: 1.6;
}

.app-container {
    display: flex;
    min-height: 100vh;
}

/* Sidebar Navigation */
.sidebar {
    width: var(--sidebar-width);
    background: linear-gradient(180deg, var(--cte-dark-gray) 0%, var(--cte-black) 100%);
    color: white;
    display: flex;
    flex-direction: column;
    position: fixed;
    height: 100vh;
    overflow-y: auto;
    box-shadow: 4px 0 20px rgba(0,0,0,0.2);
}

.logo {
    padding: 25px 20px;
    border-bottom: 2px solid var(--cte-red);
    text-align: center;
}

.logo-image {
    max-width: 200px;
    height: auto;
    margin-bottom: 10px;
}

/* SVG Logo Placeholder - Replace with actual logo */
.logo-placeholder {
    background: var(--cte-white);
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 12px;
    display: inline-block;
}

.logo-placeholder svg {
    width: 180px;
    height: 50px;
}

.logo h2 {
    font-family: var(--header-font);
    font-size: 1.2em;
    margin-bottom: 5px;
    color: var(--cte-white);
    font-weight: 700;
}

.logo-tagline {
    opacity: 0.9;
    font-size: 0.85em;
    color: var(--cte-red);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.nav-menu {
    list-style: none;
    padding: 30px 0 20px 0;
    flex: 1;
}

.nav-item {
    display: flex;
    align-items: center;
    padding: 15px 25px;
    cursor: pointer;
    transition: all 0.3s;
    border-left: 4px solid transparent;
}

.nav-item:hover {
    background: rgba(255,255,255,0.1);
}

.nav-item.active {
    background: var(--cte-red-light);
    border-left-color: var(--cte-red);
}

.nav-icon {
    font-size: 1.5em;
    margin-right: 15px;
}

.nav-text {
    font-weight: 500;
}

.sidebar-footer {
    padding: 20px;
    border-top: 1px solid rgba(255,255,255,0.1);
}

.btn-github {
    width: 100%;
    padding: 12px;
    background: rgba(255,255,255,0.2);
    border: 1px solid rgba(255,255,255,0.3);
    color: white;
    border-radius: 5px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
}

.btn-github:hover {
    background: rgba(255,255,255,0.3);
    transform: translateY(-2px);
}

/* Main Content */
.main-content {
    flex: 1;
    margin-left: var(--sidebar-width);
    padding: 0;
    background: white;
}

.page {
    display: none;
    animation: fadeIn 0.4s;
}

.page.active {
    display: block;
}

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

.page-header {
    background: linear-gradient(135deg, var(--cte-red) 0%, var(--cte-dark-gray) 100%);
    color: white;
    padding: 60px 40px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

/* Arc pattern background for headers */
.page-header::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background-image:
        radial-gradient(circle at 100% 0%, transparent 50%, rgba(255,255,255,0.05) 50%),
        radial-gradient(circle at 0% 100%, transparent 50%, rgba(255,255,255,0.05) 50%);
    pointer-events: none;
}

.page-header h1 {
    font-family: var(--header-font);
    font-size: 2.5em;
    margin-bottom: 10px;
    font-weight: 700;
    position: relative;
    z-index: 1;
    color: white !important;
}

.subtitle {
    font-size: 1.2em;
    opacity: 0.9;
}

.content-section {
    padding: 40px;
    max-width: 1200px;
    margin: 0 auto;
}

.content-section.full-width {
    max-width: none;
    padding: 0;
    height: calc(100vh - 200px);
}

/* Introduction Page Styles */
.hero-box {
    background: linear-gradient(135deg, var(--cte-red-light) 0%, var(--cte-light-gray) 100%);
    padding: 40px;
    border-radius: 10px;
    margin-bottom: 30px;
    border-left: 5px solid var(--cte-red);
}

.hero-box h2 {
    font-family: var(--header-font);
    color: var(--cte-red);
    margin-bottom: 20px;
    font-size: 2em;
    font-weight: 700;
}

.lead {
    font-size: 1.2em;
    line-height: 1.8;
    color: #495057;
}

.info-card {
    background: #e7f3ff;
    border-left: 4px solid var(--info);
    padding: 30px;
    border-radius: 8px;
    margin: 30px 0;
}

.info-card h3 {
    color: var(--info);
    margin-bottom: 15px;
    font-size: 1.5em;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin: 40px 0;
}

.feature-card {
    background: white;
    border: 2px solid var(--border);
    border-radius: 10px;
    padding: 25px;
    text-align: center;
    transition: all 0.3s;
}

.feature-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow);
    border-color: var(--primary);
}

.feature-icon {
    font-size: 3em;
    margin-bottom: 15px;
}

.feature-card h4 {
    color: var(--dark);
    margin-bottom: 10px;
    font-size: 1.2em;
}

.feature-card p {
    color: #6c757d;
    font-size: 0.95em;
}

.warning-box {
    background: #fff3cd;
    border-left: 4px solid var(--warning);
    padding: 30px;
    border-radius: 8px;
    margin: 30px 0;
}

.warning-box h3 {
    color: #856404;
    margin-bottom: 15px;
}

.warning-box ul {
    margin: 20px 0;
    padding-left: 20px;
}

.warning-box li {
    margin: 10px 0;
}

.highlight {
    background: rgba(255, 193, 7, 0.3);
    padding: 15px;
    border-radius: 5px;
    font-weight: 600;
    font-size: 1.1em;
    margin-top: 20px;
}

.philosophy-box {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    padding: 40px;
    border-radius: 10px;
    margin: 30px 0;
}

.philosophy-box h3 {
    color: var(--primary);
    margin-bottom: 20px;
    font-size: 1.8em;
}

blockquote {
    background: white;
    border-left: 4px solid var(--primary);
    padding: 20px;
    margin: 20px 0;
    font-style: italic;
    font-size: 1.1em;
}

cite {
    display: block;
    margin-top: 10px;
    font-size: 0.9em;
    color: #6c757d;
}

.benefits-list {
    margin-top: 20px;
}

.benefit-item {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding: 20px;
    background: white;
    border-radius: 8px;
    margin: 15px 0;
    box-shadow: var(--shadow);
}

.benefit-icon {
    font-size: 2.5em;
    flex-shrink: 0;
}

.benefit-item strong {
    display: block;
    color: var(--dark);
    font-size: 1.2em;
    margin-bottom: 5px;
}

.benefit-item p {
    color: #6c757d;
}

.research-box {
    background: #d1ecf1;
    border-left: 4px solid var(--info);
    padding: 30px;
    border-radius: 8px;
    margin: 30px 0;
}

.research-box h3 {
    color: #0c5460;
    margin-bottom: 15px;
}

.research-box ul {
    margin: 20px 0;
    padding-left: 20px;
}

.research-box li {
    margin: 10px 0;
}

.conclusion-box {
    background: linear-gradient(135deg, var(--success) 0%, #20c997 100%);
    color: white;
    padding: 40px;
    border-radius: 10px;
    margin: 40px 0;
    text-align: center;
}

.conclusion-box h3 {
    font-size: 2em;
    margin-bottom: 20px;
}

.conclusion-box .lead {
    color: white;
    margin-bottom: 30px;
}

.btn-primary {
    background: white;
    color: var(--success);
    border: none;
    padding: 15px 30px;
    border-radius: 5px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.2);
}

.btn-large {
    font-size: 18px;
    padding: 18px 40px;
}

.fun-fact {
    background: #f8f9fa;
    border: 2px dashed var(--border);
    padding: 20px;
    border-radius: 8px;
    text-align: center;
    margin-top: 40px;
    font-style: italic;
}

/* Links */
a {
    color: var(--primary);
    text-decoration: none;
    transition: color 0.3s;
}

a:hover {
    color: var(--primary-dark);
    text-decoration: underline;
}

/* Demo iframe */
.demo-iframe {
    width: 100%;
    height: 100%;
    border: none;
}

/* Responsive */
@media (max-width: 768px) {
    .sidebar {
        width: 100%;
        position: relative;
        height: auto;
    }

    .main-content {
        margin-left: 0;
    }

    .nav-menu {
        display: flex;
        overflow-x: auto;
        padding: 10px 0;
    }

    .nav-item {
        flex-direction: column;
        text-align: center;
        min-width: 100px;
        padding: 15px 10px;
    }

    .nav-icon {
        margin-right: 0;
        margin-bottom: 5px;
    }

    .page-header h1 {
        font-size: 1.8em;
    }

    .content-section {
        padding: 20px;
    }

    .features-grid {
        grid-template-columns: 1fr;
    }
}

/* Algorithm Page Styles */
.algorithm-step {
    background: white;
    border: 2px solid var(--border);
    border-radius: 10px;
    padding: 30px;
    margin: 20px 0;
    transition: all 0.3s;
}

.algorithm-step:hover {
    border-color: var(--primary);
    box-shadow: var(--shadow);
}

.step-number {
    display: inline-block;
    background: var(--primary);
    color: white;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    text-align: center;
    line-height: 40px;
    font-weight: bold;
    margin-right: 15px;
    font-size: 1.2em;
}

.code-block {
    background: #282c34;
    color: #abb2bf;
    padding: 20px;
    border-radius: 8px;
    overflow-x: auto;
    margin: 20px 0;
    font-family: 'Courier New', monospace;
    font-size: 0.9em;
}

.diagram {
    text-align: center;
    margin: 30px 0;
}

.diagram img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: var(--shadow);
}

/* IP Hopping Styles */
.ip-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 10px;
    margin: 20px 0;
}

.ip-box {
    background: var(--light);
    border: 2px solid var(--border);
    padding: 15px 10px;
    text-align: center;
    border-radius: 5px;
    font-family: 'Courier New', monospace;
    font-size: 0.85em;
    transition: all 0.3s;
}

.ip-box.active {
    background: var(--success);
    color: white;
    border-color: var(--success);
    transform: scale(1.1);
    box-shadow: 0 0 20px rgba(40, 167, 69, 0.5);
}

.ip-box.recent {
    background: rgba(40, 167, 69, 0.2);
    border-color: var(--success);
}

/* Packet Reconstruction Styles */
.packet-container {
    position: relative;
    height: 400px;
    background: var(--light);
    border: 2px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
    margin: 20px 0;
}

.packet {
    position: absolute;
    width: 60px;
    height: 40px;
    background: var(--primary);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    font-weight: bold;
    box-shadow: var(--shadow);
    transition: all 0.5s;
}

.packet.assembled {
    background: var(--success);
}

.controls {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin: 20px 0;
}

.btn {
    padding: 12px 24px;
    border: none;
    border-radius: 5px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
}

.btn-success {
    background: var(--success);
    color: white;
}

.btn-success:hover {
    background: #218838;
}

.btn-danger {
    background: var(--danger);
    color: white;
}

.btn-danger:hover {
    background: #c82333;
}

.btn-secondary {
    background: #6c757d;
    color: white;
}

.btn-secondary:hover {
    background: #5a6268;
}

/* Code Talkers Engineering Footer */
.cte-footer {
    background: linear-gradient(135deg, var(--cte-dark-gray) 0%, var(--cte-black) 100%);
    color: var(--cte-white);
    padding: 60px 40px 30px;
    margin-top: 60px;
    border-top: 4px solid var(--cte-red);
}

.footer-content {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 40px;
    margin-bottom: 40px;
}

.footer-section h3 {
    font-family: var(--header-font);
    color: var(--cte-red);
    margin-bottom: 20px;
    font-size: 1.3em;
    font-weight: 700;
}

.footer-section p {
    line-height: 1.8;
    opacity: 0.9;
}

.footer-logo {
    text-align: center;
}

.footer-logo-img {
    max-width: 200px;
    margin-bottom: 15px;
}

.footer-tagline {
    font-style: italic;
    color: var(--cte-red);
    font-size: 1.1em;
    margin-top: 15px;
}

.footer-links {
    list-style: none;
    padding: 0;
}

.footer-links li {
    margin: 12px 0;
}

.footer-links a {
    color: var(--cte-white);
    text-decoration: none;
    transition: all 0.3s;
    display: inline-block;
}

.footer-links a:hover {
    color: var(--cte-red);
    transform: translateX(5px);
}

.footer-links a::before {
    content: '→ ';
    color: var(--cte-red);
    margin-right: 5px;
}

.social-links {
    display: flex;
    gap: 15px;
    margin-top: 20px;
}

.social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    color: var(--cte-white);
    text-decoration: none;
    transition: all 0.3s;
    font-size: 1.2em;
}

.social-link:hover {
    background: var(--cte-red);
    transform: translateY(-3px);
    box-shadow: 0 4px 12px rgba(255, 0, 0, 0.4);
}

.footer-bottom {
    text-align: center;
    padding-top: 30px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    opacity: 0.8;
    font-size: 0.9em;
}

.footer-bottom p {
    margin: 8px 0;
}

/* CTA Button (Code Talkers Red) */
.cta-button {
    background: var(--cte-red);
    color: var(--cte-white);
    border: none;
    padding: 15px 30px;
    font-family: var(--header-font);
    font-weight: 700;
    border-radius: 5px;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: var(--shadow);
}

.cta-button:hover {
    background: var(--cte-red-dark);
    box-shadow: var(--shadow-hover);
    transform: translateY(-2px);
}

.cta-button-large {
    padding: 18px 40px;
    font-size: 18px;
}

/* Brand Badge */
.brand-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--cte-red-light);
    border: 2px solid var(--cte-red);
    padding: 12px 20px;
    border-radius: 8px;
    font-weight: 600;
    margin: 20px 0;
}

.brand-badge::before {
    content: '⚡';
    font-size: 1.5em;
}

/* Arc Design Elements */
.arc-divider {
    height: 4px;
    background: linear-gradient(90deg, var(--cte-red) 0%, transparent 100%);
    border-radius: 2px;
    margin: 40px 0;
}

.arc-bullet {
    list-style: none;
    padding-left: 0;
}

.arc-bullet li {
    padding-left: 30px;
    position: relative;
    margin: 15px 0;
}

.arc-bullet li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 12px;
    height: 12px;
    background: var(--cte-red);
    border-radius: 50%;
    box-shadow: 0 0 0 4px var(--cte-red-light);
}

/* Update h1, h2 styling with red */
h1, h2 {
    font-family: var(--header-font);
    color: var(--cte-red);
    font-weight: 700;
}

h3, h4 {
    font-family: var(--header-font);
    font-weight: 600;
}

/* Update link colors */
a {
    color: var(--cte-red);
    text-decoration: none;
    transition: all 0.3s;
}

a:hover {
    color: var(--cte-red-dark);
    text-decoration: underline;
}

/* Update code blocks with red accents */
.code-block {
    background: var(--cte-dark-gray);
    color: #abb2bf;
    padding: 20px;
    border-radius: 8px;
    overflow-x: auto;
    margin: 20px 0;
    font-family: var(--code-font);
    font-size: 0.9em;
    border-left: 4px solid var(--cte-red);
}

/* Research Project Label */
.research-label {
    display: inline-block;
    background: var(--cte-red);
    color: var(--cte-white);
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 0.75em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-left: 10px;
}

/* Hero Section for Introduction */
.hero-section {
    text-align: center;
    padding: 80px 40px;
    background: linear-gradient(135deg, var(--cte-light-gray) 0%, var(--cte-white) 100%);
    position: relative;
    overflow: hidden;
}

.hero-section::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, var(--cte-red-light) 0%, transparent 70%);
    opacity: 0.3;
    animation: pulse 10s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

.hero-section h1 {
    font-size: 3em;
    margin-bottom: 20px;
    position: relative;
    z-index: 1;
}

.hero-section .subtitle {
    font-size: 1.5em;
    color: var(--cte-gray);
    margin-bottom: 30px;
    position: relative;
    z-index: 1;
}

.hero-cta {
    position: relative;
    z-index: 1;
}