/* WHANE'S WEB: V3.6 - BULLETPROOF MOBILE STACKING + TERMINAL UPDATES */

:root {
    --qc-orange: #ff6600;
    --charcoal: #121212;
    --tile-bg: #1a1a1a;
    --indicator-cyan: #00ffff;
    --text-white: #ffffff;
    --transition: 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

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

body {
    background-color: var(--charcoal);
    color: var(--text-white);
    font-family: 'Segoe UI', Tahoma, sans-serif;
    padding: 60px 20px;
    display: flex;
    justify-content: center;
}

/* MAIN GRID SYSTEM (DESKTOP) */
.main-container {
    display: grid;
    width: 100%;
    max-width: 1100px;
    gap: 25px;
    grid-template-columns: repeat(4, 1fr);
}

.branding-group, .module-stack { 
    display: contents; 
}

.tile {
    background: var(--tile-bg);
    border: 3px solid #333;
    padding: 40px;
    position: relative;
    transition: var(--transition);
}

/* LOGO SECTION */
.logo-tile {
    grid-column: span 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 6px solid var(--qc-orange);
}

.rotating-hex {
    transform-origin: 50% 50%;
    animation: rotate-chassis 15s linear infinite;
}

@keyframes rotate-chassis {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* BRANDING & TITLES */
.title-tile {
    grid-column: span 3;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.title-tile h1 {
    color: var(--qc-orange);
    text-transform: uppercase;
    font-size: 3rem;
    letter-spacing: 6px;
    line-height: 1.1;
}

.text-orange { color: var(--qc-orange) !important; }
.text-white { color: var(--text-white) !important; }

.orange-underline {
    height: 6px;
    background: var(--qc-orange);
    width: 180px;
    margin-top: 20px;
}

/* DASHBOARD & BODY TILES */
.tile-link.full-width {
    grid-column: span 4;
    text-decoration: none;
    color: inherit;
}

.body-tile { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    min-height: 140px; 
    padding: 40px; 
}

.content-block { 
    flex: 1; 
    margin-right: 20px; 
}

/* SYSTEM BUTTONS (Single-line Fix) */
.tile-btn { 
    padding: 12px 28px; 
    border: 3px solid var(--qc-orange); 
    color: var(--qc-orange); 
    background: transparent;
    font-weight: 900; 
    text-transform: uppercase;
    transition: var(--transition);
    white-space: nowrap; 
    display: inline-block;
}

/* HOVER STATES: CYAN OVERRIDE */
.tile-link:hover .tile { 
    border-color: var(--indicator-cyan); 
    transform: scale(1.01); 
}

.tile-link:hover .tile-btn {
    background: var(--indicator-cyan);
    border-color: var(--indicator-cyan);
    color: #000000;
}

/* Standalone Button Hover (For "Send Signal") */
.tile-btn:hover {
    background: var(--indicator-cyan) !important;
    border-color: var(--indicator-cyan) !important;
    color: #000000 !important;
    cursor: pointer;
    box-shadow: 0 0 15px var(--indicator-cyan);
}

.tile-link:hover .text-orange { 
    color: var(--indicator-cyan) !important; 
}

/* GLOBAL FOOTER TARGETING (Automatic qc-orange) */
.mini-tile {
    min-height: 80px !important;
    border-style: dashed !important;
}

.mini-tile .content-block span {
    color: var(--qc-orange);
    font-weight: 900;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.tile-link:hover .mini-tile .content-block span {
    color: var(--indicator-cyan);
}

/* PROFILE PAGE (ABOUT.HTML) SPECIFICS */
.profile-card { 
    grid-column: span 4; 
    display: flex; 
    flex-direction: column; 
    padding: 50px; 
}

.profile-intro {
    margin-bottom: 60px; 
    border-bottom: 1px solid #333;
    padding-bottom: 20px;
}

.profile-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 60px;
}

/* ENLARGED NESTED HEXAGON (180px) */
.hex-border {
    width: 180px; 
    height: 180px; 
    background: var(--qc-orange);
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    display: flex; 
    align-items: center; 
    justify-content: center;
}

.hex-inner {
    width: 168px; 
    height: 168px; 
    background: #222;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    overflow: hidden;
}

.profile-img { 
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
    display: block; 
}

.id-badge { 
    text-align: right; 
    font-family: 'Courier New', monospace; 
    font-size: 1rem; 
}

/* BIO BOXES */
.profile-bio-box {
    background: rgba(255, 102, 0, 0.03);
    border-left: 4px solid var(--qc-orange);
    padding: 35px;
    margin-bottom: 30px;
}

.neighborhood-title { 
    font-size: 1.1rem; 
    text-transform: uppercase; 
    letter-spacing: 2px; 
    font-weight: 900; 
    margin-bottom: 20px; 
}

.value-list { list-style: none; padding-left: 5px; margin-top: 15px; }
.value-list li { position: relative; padding-left: 25px; margin-bottom: 12px; }
.value-list li::before { content: "•"; color: var(--qc-orange); font-size: 1.5rem; position: absolute; left: 0; top: -4px; }

/* CONTACT FORM TERMINAL */
.contact-form {
    display: flex;
    flex-direction: column;
    gap: 25px;
    margin-top: 20px;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.form-group label {
    font-weight: 900;
    letter-spacing: 2px;
    color: var(--qc-orange);
}

.form-group input, 
.form-group textarea {
    background: #222;
    border: 3px solid #333;
    padding: 20px;
    color: white;
    font-family: inherit;
    transition: var(--transition);
}

.form-group textarea {
    font-family: 'Courier New', monospace;
    min-height: 250px;
    resize: vertical;
}

.form-group input:focus, 
.form-group textarea:focus {
    outline: none;
    border-color: var(--qc-orange);
}

.full-width-btn {
    width: 100%;
    margin-top: 10px;
}

/* --- MOBILE RESPONSIVE OVERRIDE --- */
@media (max-width: 800px) {
    body { padding: 20px 10px; }
    
    .main-container { 
        display: flex !important;           
        flex-direction: column !important;
        gap: 20px;
    }

    .logo-tile, .title-tile, .tile-link.full-width { 
        width: 100% !important; 
    }

    .title-tile {
        text-align: center;
        align-items: center;
    }

    .title-tile h1 {
        font-size: 2.2rem;
        letter-spacing: 3px;
    }

    .orange-underline {
        margin: 20px auto 0 auto;
    }

    .body-tile { 
        flex-direction: column !important; 
        text-align: center; 
        gap: 25px; 
        padding: 30px 20px;
    }

    .content-block { margin-right: 0; }

    /* Profile Specifics for Mobile */
    .profile-card { padding: 25px; }
    
    .profile-header { 
        flex-direction: column !important; 
        align-items: center !important; 
        gap: 30px; 
    }

    .hex-border { 
        width: 160px; 
        height: 160px; 
    }

    .hex-inner { 
        width: 150px; 
        height: 150px; 
    }

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