/* ============================================
   HUSAIN'S PORTFOLIO - LATE 90s RETRO STYLE
   Classic Web Design Theme (1998-2002)
   ============================================ */

/* ==================== GLOBAL STYLES ==================== */

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

body {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 14px;
    line-height: 1.6;
    color: #000000;
    background: #5a7a8a url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="4" height="4"><rect width="1" height="1" fill="%23ffffff" opacity="0.1"/></svg>') repeat;
    margin: 0;
    padding: 20px 0;
}

/* ==================== CONTAINER ==================== */

.retro-container {
    max-width: 900px;
    margin: 0 auto;
    background: #E8E8E8;
    border: 3px ridge #999999;
    box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.5);
}

/* ==================== HEADER ==================== */

.retro-header {
    background: linear-gradient(to bottom, #0066CC 0%, #003D7A 100%);
    border-bottom: 3px ridge #CCCCCC;
    padding: 20px;
    text-align: center;
}

.retro-logo {
    font-family: "Courier New", Courier, monospace;
    font-size: 32px;
    font-weight: bold;
    color: #FFFF00;
    text-shadow: 2px 2px 0px #000000, 3px 3px 5px rgba(0, 0, 0, 0.8);
    letter-spacing: 2px;
    margin: 0;
    text-transform: uppercase;
}

.retro-tagline {
    font-family: Arial, sans-serif;
    font-size: 14px;
    color: #FFFFFF;
    margin: 10px 0 0 0;
    font-style: italic;
}

/* ==================== NAVIGATION ==================== */

.retro-nav {
    background: linear-gradient(to bottom, #CCCCCC 0%, #999999 100%);
    border-bottom: 2px solid #666666;
    padding: 0;
}

.retro-nav ul {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 0;
    padding: 0;
}

.retro-nav li {
    margin: 0;
}

.retro-nav a {
    display: block;
    padding: 10px 20px;
    text-decoration: none;
    color: #000000;
    font-weight: bold;
    font-size: 13px;
    border-right: 2px outset #FFFFFF;
    border-left: 2px outset #666666;
    background: linear-gradient(to bottom, #DDDDDD 0%, #AAAAAA 100%);
    transition: all 0.2s;
}

.retro-nav a:hover,
.retro-nav a:focus {
    background: linear-gradient(to bottom, #FFCC66 0%, #FF9933 100%);
    color: #000000;
    border-right: 2px inset #666666;
    border-left: 2px inset #FFFFFF;
}

.retro-nav a.active {
    background: linear-gradient(to bottom, #0066CC 0%, #003D7A 100%);
    color: #FFFF00;
}

/* Dropdown styles */
.retro-nav .dropdown {
    position: relative;
}

.retro-nav .dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: #CCCCCC;
    border: 2px ridge #999999;
    min-width: 200px;
    z-index: 1000;
    box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.5);
}

.retro-nav .dropdown:hover .dropdown-menu {
    display: block;
}

.retro-nav .dropdown-menu a {
    border: none;
    border-bottom: 1px solid #999999;
    background: #DDDDDD;
}

.retro-nav .dropdown-menu a:hover {
    background: #FFCC66;
}

/* ==================== MAIN CONTENT ==================== */

.retro-main {
    background: #FFFFFF;
    padding: 20px;
    min-height: 400px;
}

/* ==================== HERO SECTIONS ==================== */

.retro-hero {
    background: linear-gradient(to right, #669999 0%, #336666 100%);
    border: 3px ridge #CCCCCC;
    padding: 30px;
    margin-bottom: 20px;
    text-align: center;
}

.retro-hero h1 {
    font-family: "Courier New", Courier, monospace;
    font-size: 28px;
    color: #FFFF00;
    text-shadow: 2px 2px 0px #000000;
    margin: 0 0 10px 0;
    text-transform: uppercase;
    letter-spacing: 3px;
}

.retro-hero p {
    color: #FFFFFF;
    font-size: 14px;
    margin: 0;
}

/* ==================== SECTION HEADERS ==================== */

.retro-section-header {
    font-family: "Courier New", Courier, monospace;
    font-size: 20px;
    font-weight: bold;
    color: #0066CC;
    text-transform: uppercase;
    letter-spacing: 2px;
    border-bottom: 3px double #0066CC;
    padding-bottom: 5px;
    margin: 20px 0 15px 0;
    text-align: center;
}

.retro-section-header .icon {
    display: inline-block;
    margin-right: 10px;
}

/* ==================== CARDS/BOXES ==================== */

.retro-card {
    background: #F5F5F5;
    border: 3px ridge #CCCCCC;
    padding: 15px;
    margin-bottom: 15px;
    box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3);
}

.retro-card-header {
    background: linear-gradient(to bottom, #0066CC 0%, #003D7A 100%);
    color: #FFFFFF;
    padding: 8px 12px;
    margin: -15px -15px 15px -15px;
    border-bottom: 2px solid #CCCCCC;
    font-weight: bold;
    font-size: 14px;
}

.retro-card-title {
    font-family: Arial, sans-serif;
    font-size: 16px;
    font-weight: bold;
    color: #0066CC;
    margin: 0 0 10px 0;
}

.retro-card-text {
    color: #333333;
    font-size: 13px;
    line-height: 1.5;
}

/* ==================== TABLES ==================== */

.retro-table {
    width: 100%;
    border-collapse: collapse;
    border: 2px solid #999999;
    background: #FFFFFF;
    margin: 15px 0;
}

.retro-table th {
    background: linear-gradient(to bottom, #669999 0%, #336666 100%);
    color: #FFFFFF;
    padding: 10px;
    text-align: left;
    border: 1px solid #666666;
    font-size: 13px;
    font-weight: bold;
}

.retro-table td {
    padding: 8px 10px;
    border: 1px solid #CCCCCC;
    font-size: 13px;
}

.retro-table tr:nth-child(even) {
    background: #F0F0F0;
}

.retro-table tr:hover {
    background: #FFFFCC;
}

/* ==================== BADGES & LABELS ==================== */

.retro-badge {
    display: inline-block;
    padding: 3px 8px;
    font-size: 11px;
    font-weight: bold;
    color: #FFFFFF;
    background: #0066CC;
    border: 1px outset #CCCCCC;
    margin: 2px;
}

.retro-badge-success {
    background: #009900;
}

.retro-badge-warning {
    background: #CC6600;
}

.retro-badge-info {
    background: #669999;
}

/* ==================== BUTTONS ==================== */

.retro-btn {
    display: inline-block;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: bold;
    text-decoration: none;
    color: #000000;
    background: linear-gradient(to bottom, #DDDDDD 0%, #AAAAAA 100%);
    border: 2px outset #CCCCCC;
    cursor: pointer;
    transition: all 0.2s;
    margin: 5px 5px 5px 0;
}

.retro-btn:hover {
    background: linear-gradient(to bottom, #FFCC66 0%, #FF9933 100%);
    border: 2px outset #FFCC66;
    color: #000000;
}

.retro-btn:active {
    border: 2px inset #999999;
}

.retro-btn-primary {
    background: linear-gradient(to bottom, #0099FF 0%, #0066CC 100%);
    color: #FFFFFF;
    border: 2px outset #0099FF;
}

.retro-btn-primary:hover {
    background: linear-gradient(to bottom, #00CCFF 0%, #0099FF 100%);
    color: #FFFFFF;
}

.retro-btn-success {
    background: linear-gradient(to bottom, #00CC00 0%, #009900 100%);
    color: #FFFFFF;
    border: 2px outset #00CC00;
}

.retro-btn-warning {
    background: linear-gradient(to bottom, #FF9933 0%, #CC6600 100%);
    color: #FFFFFF;
    border: 2px outset #FF9933;
}

.retro-btn-small {
    padding: 5px 10px;
    font-size: 11px;
}

/* ==================== GRID SYSTEM ==================== */

.retro-row {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -10px;
}

.retro-col {
    flex: 1;
    padding: 0 10px;
    margin-bottom: 20px;
}

.retro-col-half {
    flex: 0 0 50%;
    max-width: 50%;
    padding: 0 10px;
    margin-bottom: 20px;
}

.retro-col-third {
    flex: 0 0 33.333%;
    max-width: 33.333%;
    padding: 0 10px;
    margin-bottom: 20px;
}

/* ==================== LISTS ==================== */

.retro-list {
    list-style: none;
    padding: 0;
    margin: 15px 0;
}

.retro-list li {
    padding: 8px 10px;
    border-bottom: 1px solid #CCCCCC;
    background: #FFFFFF;
}

.retro-list li:nth-child(odd) {
    background: #F5F5F5;
}

.retro-list li:before {
    content: "▸ ";
    color: #0066CC;
    font-weight: bold;
    margin-right: 5px;
}

/* ==================== TESTIMONIALS ==================== */

.retro-testimonial {
    background: #FFFFEE;
    border: 3px double #CC9900;
    padding: 15px;
    margin: 15px 0;
    font-style: italic;
    position: relative;
}

.retro-testimonial:before {
    content: '"';
    font-size: 48px;
    color: #CC9900;
    position: absolute;
    left: 10px;
    top: 5px;
    font-family: Georgia, serif;
}

.retro-testimonial-text {
    color: #333333;
    margin-left: 30px;
    font-size: 13px;
}

.retro-testimonial-author {
    text-align: right;
    font-weight: bold;
    color: #0066CC;
    margin-top: 10px;
    font-style: normal;
}

/* ==================== SOCIAL LINKS ==================== */

.retro-social {
    text-align: center;
    margin: 20px 0;
}

.retro-social a {
    display: inline-block;
    padding: 10px 20px;
    margin: 5px;
    background: linear-gradient(to bottom, #DDDDDD 0%, #AAAAAA 100%);
    border: 2px outset #CCCCCC;
    text-decoration: none;
    color: #000000;
    font-weight: bold;
    font-size: 12px;
    transition: all 0.2s;
}

.retro-social a:hover {
    background: linear-gradient(to bottom, #FFCC66 0%, #FF9933 100%);
    border: 2px outset #FFCC66;
}

.retro-social .github {
    background: linear-gradient(to bottom, #444444 0%, #222222 100%);
    color: #FFFFFF;
}

.retro-social .linkedin {
    background: linear-gradient(to bottom, #0099CC 0%, #006699 100%);
    color: #FFFFFF;
}

.retro-social .youtube {
    background: linear-gradient(to bottom, #FF3333 0%, #CC0000 100%);
    color: #FFFFFF;
}

.retro-social .hackerrank {
    background: linear-gradient(to bottom, #33CC66 0%, #009933 100%);
    color: #FFFFFF;
}

/* ==================== FOOTER ==================== */

.retro-footer {
    background: linear-gradient(to bottom, #333333 0%, #000000 100%);
    color: #CCCCCC;
    padding: 15px 20px;
    border-top: 3px ridge #999999;
    text-align: center;
    font-size: 12px;
}

.retro-footer p {
    margin: 5px 0;
}

.retro-footer a {
    color: #FFCC66;
    text-decoration: none;
}

.retro-footer a:hover {
    color: #FFFFFF;
    text-decoration: underline;
}

/* ==================== CONSTRUCTION NOTICE ==================== */

.retro-notice {
    background: linear-gradient(45deg, #FFCC00 25%, #000000 25%, #000000 50%, #FFCC00 50%, #FFCC00 75%, #000000 75%, #000000);
    background-size: 20px 20px;
    border: 3px solid #FFCC00;
    padding: 15px;
    margin: 15px 0;
    text-align: center;
}

.retro-notice-content {
    background: #FFFFCC;
    padding: 15px;
    border: 2px solid #000000;
}

.retro-notice h3 {
    color: #CC0000;
    font-family: "Courier New", monospace;
    text-transform: uppercase;
    margin: 0 0 10px 0;
}

/* ==================== MODAL ==================== */

.retro-modal {
    display: none;
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    align-items: center;
    justify-content: center;
}

.retro-modal.active {
    display: flex;
}

.retro-modal-content {
    background: #E8E8E8;
    border: 3px ridge #999999;
    max-width: 500px;
    width: 90%;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
}

.retro-modal-header {
    background: linear-gradient(to bottom, #FFCC00 0%, #FF9900 100%);
    padding: 10px 15px;
    border-bottom: 2px solid #CC6600;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.retro-modal-header h3 {
    margin: 0;
    font-size: 16px;
    font-weight: bold;
}

.retro-modal-close {
    background: #CC0000;
    color: #FFFFFF;
    border: 2px outset #FF3333;
    width: 25px;
    height: 25px;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    line-height: 1;
}

.retro-modal-close:hover {
    background: #FF0000;
}

.retro-modal-body {
    padding: 20px;
}

.retro-modal-footer {
    padding: 10px 15px;
    text-align: right;
    border-top: 1px solid #CCCCCC;
}

/* ==================== STARS RATING ==================== */

.retro-stars {
    color: #FFCC00;
    font-size: 16px;
}

.retro-stars .empty {
    color: #CCCCCC;
}

/* ==================== RESPONSIVE ==================== */

@media (max-width: 768px) {
    body {
        padding: 10px 5px;
    }

    .retro-container {
        border-width: 2px;
    }

    .retro-logo {
        font-size: 24px;
        letter-spacing: 1px;
    }

    .retro-nav ul {
        flex-direction: column;
    }

    .retro-nav a {
        border-right: none;
        border-left: none;
        border-bottom: 1px solid #999999;
    }

    .retro-col-half,
    .retro-col-third {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .retro-hero h1 {
        font-size: 20px;
    }

    .retro-section-header {
        font-size: 16px;
    }
}

@media (max-width: 480px) {
    .retro-logo {
        font-size: 18px;
    }

    .retro-hero {
        padding: 15px;
    }

    .retro-main {
        padding: 10px;
    }
}

/* ==================== UTILITY CLASSES ==================== */

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

.text-right {
    text-align: right;
}

.text-left {
    text-align: left;
}

.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: 5px !important; }
.mb-2 { margin-bottom: 10px !important; }
.mb-3 { margin-bottom: 15px !important; }
.mb-4 { margin-bottom: 20px !important; }

.mt-0 { margin-top: 0 !important; }
.mt-1 { margin-top: 5px !important; }
.mt-2 { margin-top: 10px !important; }
.mt-3 { margin-top: 15px !important; }
.mt-4 { margin-top: 20px !important; }

.hidden {
    display: none;
}

.visible {
    display: block;
}