/* ==========================================================================
   HackTheBox Writeup Layout Styles
   ========================================================================== */

/* HTB Color Scheme - Uses site's existing color variables */
:root {
    --htb-primary: var(--primary-color, #d85a1f);      /* Updated to new muted orange */
    --htb-primary-dark: var(--secondary-color, #044571); /* Updated to new deeper blue */
    --htb-bg: #111827;
    --difficulty-easy: #4CAF50;
    --difficulty-medium: #FFC107;
    --difficulty-hard: #FF5722;
    --difficulty-insane: #9C27B0;
    --os-linux: #FCC624;
    --os-windows: #0078D6;
}

/* HTB Page Container */
.htb-page {
    max-width: 1400px;
    margin: 0 auto;
}

/* HTB Badge */
.htb-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--htb-primary);      /* Solid color instead of gradient */
    padding: 0.5rem 1rem;
    border-radius: 0;                    /* No round corners */
    margin-bottom: 1.5rem;
    box-shadow: none;                    /* Simplified */
    border: 2px solid var(--htb-primary-dark);
}

.htb-logo {
    font-size: 1.5rem;
}

.htb-label {
    font-weight: 700;
    color: #000;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.9rem;
}

/* HTB Header */
.htb-header {
    background: var(--card-background);
    padding: 2rem;
    border-radius: 0;                      /* No round corners */
    box-shadow: none;                      /* Simplified */
    margin-bottom: 2rem;
    border-left: 5px solid var(--htb-primary);
    border: 2px solid var(--htb-primary);
}

/* Machine Info Card */
.htb-machine-info {
    background: rgba(216, 90, 31, 0.08);    /* Solid color with opacity instead of gradient */
    border: 2px solid var(--htb-primary);
    border-radius: 12px;
    padding: 1.5rem;
    margin: 1.5rem 0;
}

.info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
}

.info-item {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.info-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 600;
}

.info-value {
    font-weight: 700;
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.info-value i {
    font-size: 1rem;
}

.info-value code {
    background: var(--code-background);
    padding: 0.25rem 0.75rem;
    border-radius: 4px;
    font-family: 'Courier New', monospace;
    font-size: 1rem;
    font-weight: 600;
}

/* Difficulty Badges */
.difficulty-easy { color: var(--difficulty-easy); }
.difficulty-medium { color: var(--difficulty-medium); }
.difficulty-hard { color: var(--difficulty-hard); }
.difficulty-insane { color: var(--difficulty-insane); }

/* OS Icons */
.os-linux { color: var(--os-linux); }
.os-windows { color: var(--os-windows); }

/* HTB Tags */
.htb-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1.5rem;
}

.htb-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--htb-primary);
    color: #000;
    padding: 0.4rem 1rem;
    border-radius: 20px;
    font-size: 0.875rem;
    font-weight: 700;
    transition: all 0.3s ease;
}

.htb-tag:hover {
    background: var(--htb-primary-dark);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(216, 90, 31, 0.3);    /* Updated to new primary color */
}

.htb-tag i {
    font-size: 0.75rem;
}

/* Summary Box */
.htb-summary {
    background: rgba(59, 130, 246, 0.08);    /* Solid color with opacity */
    border-left: 4px solid #3B82F6;
    padding: 1.5rem 2rem;
    margin: 2rem 0;
    border-radius: 8px;
}

.htb-summary h2 {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0;
    margin-bottom: 1rem;
    color: #3B82F6;
}

.htb-summary p {
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.7;
}

/* Attack Path */
.htb-attack-path {
    margin: 2.5rem 0;
    padding: 2rem;
    background: var(--card-background);
    border-radius: 12px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.htb-attack-path h2 {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0;
    margin-bottom: 1.5rem;
    color: var(--htb-primary);
}

.path-steps {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    margin-top: 1.5rem;
}

.path-step {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    background: rgba(216, 90, 31, 0.10);     /* Solid color with opacity */
    border: 2px solid var(--htb-primary);
    padding: 0.75rem 1.25rem;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.95rem;
    transition: all 0.3s ease;
}

.path-step:hover {
    background: rgba(216, 90, 31, 0.20);     /* Darker on hover */
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(216, 90, 31, 0.2);
}

.step-number {
    background: var(--htb-primary);
    color: #000;
    font-weight: 800;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
}

.path-arrow {
    color: var(--htb-primary);
    font-size: 1.2rem;
}

/* Key Learnings */
.htb-learnings {
    background: rgba(255, 193, 7, 0.08);     /* Solid color with opacity */
    border-left: 4px solid #FFC107;
    padding: 1.5rem 2rem;
    margin: 2rem 0;
    border-radius: 8px;
}

.htb-learnings h2 {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0;
    margin-bottom: 1rem;
    color: #FFC107;
}

.learnings-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.learnings-list li {
    padding-left: 2rem;
    margin-bottom: 0.75rem;
    position: relative;
}

.learnings-list li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--htb-primary);
    font-weight: bold;
    font-size: 1.2rem;
}

/* HTB Content Styling */
.htb-content {
    margin: 2rem 0;
}

.htb-content h2 {
    border-left: 4px solid var(--htb-primary);
    padding-left: 1rem;
    margin-top: 2.5rem;
}

.htb-content h3 {
    color: var(--htb-primary);
    margin-top: 2rem;
}

/* HTB Navigation Cards */
.htb-navigation {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 3px solid var(--htb-primary);
}

.htb-navigation h3 {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
    color: var(--htb-primary);
}

.htb-nav-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
}

.htb-nav-card {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1.5rem;
    background: var(--card-background);
    border: 2px solid var(--border-color);
    border-radius: 12px;
    text-decoration: none;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.htb-nav-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: var(--htb-primary);    /* Solid color instead of gradient */
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

.htb-nav-card:hover::before {
    transform: scaleX(1);
}

.htb-nav-card:hover {
    border-color: var(--htb-primary);
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(216, 90, 31, 0.2);    /* Updated to new primary color */
}

.nav-direction {
    font-size: 0.875rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.nav-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary);
}

.nav-difficulty {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 4px;
    font-size: 0.85rem;
    font-weight: 700;
    margin-top: 0.5rem;
}

.nav-os {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    background: var(--code-background);
    border-radius: 4px;
    font-size: 0.85rem;
    font-weight: 600;
    margin-top: 0.5rem;
}

/* Enhanced TOC for HTB */
.htb-toc {
    position: sticky;
    top: 2rem;
}

.htb-toc .toc-sticky {
    background: var(--card-background);
    border: 2px solid var(--htb-primary);
    border-radius: 12px;
    padding: 1.5rem;
}

.htb-toc .toc-title {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--htb-primary);
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid var(--border-color);
}

.htb-toc .toc-content a {
    color: var(--text-color) !important;     /* Use site text color */
    transition: all 0.2s ease;
    padding: 0.25rem 0;
    display: block;
    text-decoration: none;
}

.htb-toc .toc-content a:hover {
    color: var(--htb-primary) !important;
    padding-left: 0.5rem;
}

.toc-quick-jump {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
}

.toc-quick-jump button {
    width: 100%;
    padding: 0.75rem;
    background: var(--htb-primary);
    color: #000;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 700;
    font-size: 0.9rem;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.toc-quick-jump button:hover {
    background: var(--htb-primary-dark);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(216, 90, 31, 0.3);    /* Updated to new primary color */
}

/* Responsive Design */
@media (max-width: 768px) {
    .htb-header {
        padding: 1.5rem;
    }

    .info-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .path-steps {
        flex-direction: column;
        align-items: flex-start;
    }

    .path-arrow {
        transform: rotate(90deg);
    }

    .htb-nav-grid {
        grid-template-columns: 1fr;
    }

    .htb-toc {
        position: static;
        margin-top: 2rem;
    }
}

/* Dark Mode Specific */
body.dark .htb-machine-info {
    background: rgba(216, 90, 31, 0.12);     /* Solid color with opacity */
}

body.dark .htb-summary {
    background: rgba(59, 130, 246, 0.12);    /* Solid color with opacity */
}

body.dark .htb-learnings {
    background: rgba(255, 193, 7, 0.12);     /* Solid color with opacity */
}

/* Print Styles */
@media print {
    .htb-badge,
    .htb-tags,
    .htb-navigation,
    .htb-toc {
        display: none;
    }

    .htb-machine-info {
        border: 2px solid #000;
        page-break-inside: avoid;
    }
}