/* ==========================
   PCU ICT Troubleshooting Guide
   style1.css — cyber / terminal theme
========================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Share Tech Mono', monospace;
}

html{
    scroll-behavior:smooth;
}

body{
    --bg:#c7d2de;
    --surface:#dbe3ec;
    --surface-alt:#b7c5d6;
    --text:#141a24;
    --text-dim:#454f5f;
    --accent:#0d5bd6;
    --accent2:#00889c;
    --glow:rgba(13,91,214,.3);
    --border:rgba(13,91,214,.4);

    background:
        repeating-linear-gradient(0deg, rgba(13,91,214,.06) 0 1px, transparent 1px 42px),
        repeating-linear-gradient(90deg, rgba(13,91,214,.06) 0 1px, transparent 1px 42px),
        var(--bg);
    color:var(--text);
    transition:background .4s, color .4s;
    position:relative;
}

/* scanline overlay */
body::after{
    content:"";
    position:fixed;
    inset:0;
    pointer-events:none;
    background:repeating-linear-gradient(
        0deg,
        rgba(0,0,0,.035) 0,
        rgba(0,0,0,.035) 1px,
        transparent 1px,
        transparent 3px
    );
    z-index:9998;
}

/* Dark Mode */
body.dark{
    --bg:#04070c;
    --surface:#0a0f18;
    --surface-alt:#0f1622;
    --text:#c9f9e2;
    --text-dim:#7fa89a;
    --accent:#00ff9d;
    --accent2:#00e5ff;
    --glow:rgba(0,255,157,.45);
    --border:rgba(0,255,157,.4);
}

::selection{
    background:var(--accent);
    color:#04070c;
}

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

header{
    background:linear-gradient(90deg,#060a13,#0b1220);
    color:#eafff5;
    position:sticky;
    top:0;
    z-index:1000;
    border-bottom:2px solid #00ffc8;
    box-shadow:0 0 20px rgba(0,255,200,.25);
}

nav{
    max-width:1200px;
    margin:auto;
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:15px 20px;
    flex-wrap:wrap;
    gap:10px;
}

.nav-top{
    display:flex;
    align-items:center;
    gap:12px;
}

.nav-actions{
    display:flex;
    gap:8px;
}

.menu-btn{
    display:none;
    align-items:center;
    border:1px solid rgba(0,255,200,.4);
    background:rgba(0,255,200,.08);
    color:#00ffc8;
    font-size:22px;
    padding:8px 14px;
    border-radius:4px;
    cursor:pointer;
}

.menu-btn .icon-close{
    display:none;
}

.menu-btn.active .icon-menu{
    display:none;
}

.menu-btn.active .icon-close{
    display:inline-block;
}

.logo{
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-family:'Orbitron', sans-serif;
    font-size:22px;
    font-weight:700;
    letter-spacing:1px;
    color:#eafff5;
    text-shadow:0 0 8px rgba(0,255,200,.6), 0 0 18px rgba(0,255,200,.35);
}

.logo .brand-icon{
    width:34px;
    height:34px;
    object-fit:contain;
    filter:drop-shadow(0 0 6px rgba(0,255,200,.6));
}

nav ul{
    list-style:none;
    display:flex;
    gap:20px;
}

nav ul li a{
    color:#d6fff2;
    text-decoration:none;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:1px;
    font-size:13px;
    display:inline-block;
    padding:8px 4px;
    border-bottom:2px solid transparent;
    transition:.25s;
}

nav ul li a::before{
    content:"/";
    color:#00ffc8;
    margin-right:3px;
    opacity:.7;
}

nav ul li a:hover,
nav ul li a.active,
nav ul li a:focus-visible{
    color:#00ffc8;
    border-bottom-color:#00ffc8;
    text-shadow:0 0 8px rgba(0,255,200,.7);
}

a:focus-visible,
button:focus-visible,
.card:focus-visible,
.close:focus-visible{
    outline:2px solid #00e5ff;
    outline-offset:3px;
}

.right-nav{
    display:flex;
    gap:10px;
    align-items:center;
}

#search{
    padding:8px 10px;
    border:1px solid rgba(0,255,200,.4);
    border-radius:4px;
    max-width:180px;
    background:#04070c;
    color:#00ffc8;
    font-family:'Share Tech Mono', monospace;
}

#search::placeholder{
    color:#4a7a6c;
}

#search:focus{
    outline:none;
    box-shadow:0 0 10px rgba(0,255,200,.5);
}

#darkBtn{
    display:inline-flex;
    align-items:center;
    border:1px solid rgba(0,255,200,.4);
    padding:8px 14px;
    border-radius:4px;
    cursor:pointer;
    background:rgba(0,255,200,.08);
    color:#00ffc8;
    font-size:16px;
    transition:background .3s, box-shadow .3s;
}

#darkBtn:hover{
    box-shadow:0 0 10px rgba(0,255,200,.5);
}

#darkBtn .icon-moon{
    display:none;
}

body.dark #darkBtn .icon-sun{
    display:none;
}

body.dark #darkBtn .icon-moon{
    display:inline-block;
}

/* ==========================
   HERO — circuit board panel
========================== */

.hero{
    background:
        radial-gradient(circle at 18% 25%, rgba(0,255,200,.18), transparent 40%),
        radial-gradient(circle at 82% 10%, rgba(0,180,255,.16), transparent 45%),
        repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 1px, transparent 1px 40px),
        repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 1px, transparent 1px 40px),
        linear-gradient(180deg,#060a13,#0b1220);
    color:#eafff5;
    text-align:center;
    padding:110px 20px;
    position:relative;
    overflow:hidden;
}

.hero::before{
    content:"";
    position:absolute;
    inset:0;
    box-shadow:inset 0 0 120px rgba(0,0,0,.6);
    pointer-events:none;
}

.hero-text{
    position:relative;
}

.hero h1{
    font-family:'Orbitron', sans-serif;
    font-weight:900;
    font-size:44px;
    margin-bottom:20px;
    letter-spacing:1px;
    color:#eafff5;
    text-shadow:0 0 10px rgba(0,255,200,.7), 0 0 30px rgba(0,255,200,.35);
    animation:flicker 6s infinite;
}

.hero p{
    max-width:700px;
    margin:auto;
    line-height:1.8;
    color:#b9d9cf;
}

.btn{
    display:inline-block;
    margin-top:28px;
    background:transparent;
    color:#00ffc8;
    text-decoration:none;
    padding:13px 28px;
    border:2px solid #00ffc8;
    text-transform:uppercase;
    letter-spacing:2px;
    font-weight:bold;
    font-size:14px;
    clip-path:polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
    transition:.25s;
}

.btn:hover{
    background:#00ffc8;
    color:#04070c;
    box-shadow:0 0 18px rgba(0,255,200,.7);
    transform:translateY(-2px);
}

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

.container{
    width:90%;
    max-width:1100px;
    margin:auto;
    padding:60px 0;
}

.container h2{
    font-family:'Orbitron', sans-serif;
    text-align:center;
    margin-bottom:35px;
    color:var(--accent);
    text-transform:uppercase;
    letter-spacing:2px;
    text-shadow:0 0 10px var(--glow);
}

.container h2::before{
    content:"<";
    opacity:.6;
    margin-right:6px;
}

.container h2::after{
    content:"/>";
    opacity:.6;
    margin-left:6px;
}

.tips{
    background:linear-gradient(180deg,#060a13,#0b1220);
    color:#eafff5;
    padding:60px 20px;
    border-top:1px solid rgba(0,255,200,.3);
    border-bottom:1px solid rgba(0,255,200,.3);
}

.tips h2{
    font-family:'Orbitron', sans-serif;
    text-align:center;
    margin-bottom:25px;
    text-transform:uppercase;
    letter-spacing:2px;
    color:#00ffc8;
    text-shadow:0 0 10px rgba(0,255,200,.5);
}

.tips ul{
    max-width:700px;
    margin:auto;
    line-height:2;
    font-size:17px;
    list-style:none;
    color:#c8f5e8;
}

.tips li::before{
    content:"$ ";
    color:#00ffc8;
}

.about,
.contact{
    line-height:1.8;
    text-align:center;
    color:var(--text-dim);
}

footer{
    background:linear-gradient(90deg,#060a13,#0b1220);
    color:#00ffc8;
    text-align:center;
    padding:22px;
    margin-top:40px;
    border-top:2px solid #00ffc8;
    font-size:14px;
    letter-spacing:1px;
}

footer p::before{
    content:"> ";
}

footer p::after{
    content:"_";
    animation:blink 1.1s steps(1) infinite;
}

/* ==========================
   CARDS — terminal windows
========================== */

.cards{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:25px;
}

.card{
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:8px;
    padding:44px 20px 20px;
    width:320px;
    min-height:180px;
    cursor:pointer;
    transition:.3s;
    position:relative;
    clip-path:polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px));
}

.card::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    right:0;
    height:28px;
    background:var(--surface-alt);
    border-bottom:1px solid var(--border);
}

.card::after{
    content:"";
    position:absolute;
    top:11px;
    left:14px;
    width:8px;
    height:8px;
    border-radius:50%;
    background:#ff5f56;
    box-shadow:16px 0 0 #ffbd2e, 32px 0 0 #27c93f;
}

.card:hover,
.card:focus-visible{
    transform:translateY(-6px);
    border-color:var(--accent);
    filter:drop-shadow(0 0 12px var(--glow));
}

.card h3{
    font-family:'Orbitron', sans-serif;
    color:var(--accent);
    margin-bottom:10px;
    font-size:16px;
    letter-spacing:.5px;
}

.icon-badge{
    position:relative;
    display:inline-flex;
    margin-right:6px;
    vertical-align:middle;
}

.icon-badge .icon-logo{
    color:var(--accent);
    filter:drop-shadow(0 0 4px var(--glow));
    vertical-align:middle;
}

.icon-badge .badge{
    position:absolute;
    top:-6px;
    right:-7px;
    border-radius:50%;
    filter:drop-shadow(0 0 4px rgba(255,77,77,.8));
}

.card p{
    color:var(--text-dim);
    margin-bottom:15px;
    line-height:1.5;
    font-size:14px;
}

/* Hidden lesson blocks */
.lesson-data h4{
    font-family:'Orbitron', sans-serif;
    color:var(--accent);
    margin-bottom:10px;
    text-transform:uppercase;
    letter-spacing:1px;
    font-size:15px;
}

.lesson-data ol{
    padding-left:20px;
}

.lesson-data li{
    margin-bottom:8px;
    line-height:1.6;
}

.lesson-data li::marker{
    color:var(--accent);
}

/* ==========================
   POPUP MODAL — terminal window
========================== */

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

.modal-content{
    background:var(--surface);
    width:90%;
    max-width:700px;
    max-height:80vh;
    overflow-y:auto;
    padding:44px 30px 30px;
    border-radius:10px;
    position:relative;
    border:1px solid var(--border);
    box-shadow:0 0 30px var(--glow);
    animation:popup .3s ease;
}

.modal-content::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    right:0;
    height:32px;
    background:var(--surface-alt);
    border-bottom:1px solid var(--border);
    border-radius:10px 10px 0 0;
}

.modal-content::after{
    content:"";
    position:absolute;
    top:12px;
    left:16px;
    width:9px;
    height:9px;
    border-radius:50%;
    background:#ff5f56;
    box-shadow:18px 0 0 #ffbd2e, 36px 0 0 #27c93f;
}

.close{
    position:absolute;
    right:12px;
    top:2px;
    font-size:26px;
    color:var(--accent);
    cursor:pointer;
    font-weight:bold;
    line-height:1;
    padding:8px 12px;
    z-index:1;
}

.close:hover{
    text-shadow:0 0 10px var(--glow);
}

.modal-content h2{
    font-family:'Orbitron', sans-serif;
    color:var(--accent);
    margin-bottom:15px;
    padding-right:30px;
    text-transform:uppercase;
    letter-spacing:1px;
    font-size:19px;
}

#modalBody h4{
    color:var(--accent);
    margin-bottom:12px;
}

.video-wrapper{
    position:relative;
    width:100%;
    padding-bottom:56.25%;
    height:0;
    overflow:hidden;
    border-radius:6px;
    margin-bottom:20px;
    border:1px solid var(--border);
    box-shadow:0 0 14px var(--glow);
}

.video-wrapper iframe{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    border:0;
}

.modal-content ol{
    padding-left:20px;
}

.modal-content li{
    margin-bottom:12px;
    line-height:1.7;
}

.modal-content li::marker{
    color:var(--accent);
}

.modal-content li strong{
    color:var(--accent);
}

.modal-content li ul{
    list-style:disc;
    padding-left:20px;
    margin-top:6px;
}

.modal-content li ul li{
    margin-bottom:6px;
    font-size:.95em;
    color:var(--text-dim);
}

.modal-content li ul li::marker{
    color:var(--accent2);
}

.modal-content code{
    background:var(--surface-alt);
    border:1px solid var(--border);
    border-radius:4px;
    padding:1px 6px;
    font-size:.95em;
    color:var(--accent);
}

.modal-content li ul li.warn{
    color:#ff6b6b;
}

.modal-content li ul ul{
    list-style:circle;
    margin-top:4px;
}

.modal-content li ul ul li{
    font-size:.95em;
}

.prevention-tips{
    margin-top:20px;
    padding-top:16px;
    border-top:1px dashed var(--border);
}

.prevention-tips strong{
    color:var(--accent);
    text-transform:uppercase;
    letter-spacing:1px;
    font-size:.95em;
}

.prevention-tips ul{
    list-style:disc;
    padding-left:20px;
    margin-top:10px;
}

.prevention-tips ul li{
    margin-bottom:8px;
    line-height:1.6;
}

.prevention-tips ul li::marker{
    color:var(--accent2);
}

.modal-content li ul li.warn::marker{
    color:#ff6b6b;
}

.switch-icon{
    vertical-align:middle;
    margin:0 2px;
    filter:drop-shadow(0 0 4px rgba(0,255,200,.7));
}

/* ==========================
   ANIMATIONS
========================== */

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

@keyframes popup{
    from{
        transform:scale(.8);
        opacity:0;
    }
    to{
        transform:scale(1);
        opacity:1;
    }
}

@keyframes blink{
    0%,50%{ opacity:1; }
    51%,100%{ opacity:0; }
}

@keyframes flicker{
    0%,19%,21%,23%,80%,100%{
        opacity:1;
        text-shadow:0 0 10px rgba(0,255,200,.7), 0 0 30px rgba(0,255,200,.35);
    }
    20%,22%{
        opacity:.85;
        text-shadow:0 0 4px rgba(0,255,200,.4);
    }
}

/* ==========================
   MOBILE
========================== */

@media (max-width:768px){

    nav{
        display:block;
        padding:12px 15px;
    }

    .nav-top{
        display:flex;
        justify-content:space-between;
        align-items:center;
    }

    .menu-btn{
        display:block;
    }

    /* Collapsible menu */
    nav ul{
        display:none;
        flex-direction:column;
        text-align:center;
        gap:0;
        margin-top:10px;
        background:rgba(0,255,200,.06);
        border:1px solid rgba(0,255,200,.25);
        border-radius:6px;
        overflow:hidden;
    }

    nav ul.open{
        display:flex;
        animation:fade .25s ease;
    }

    nav ul li a{
        display:block;
        padding:14px;
        font-size:15px;
        border-bottom:none;
    }

    nav ul li a:active{
        background:rgba(0,255,200,.12);
    }

    .right-nav{
        margin-top:10px;
    }

    #search{
        width:100%;
        max-width:none;
        padding:12px;
        font-size:16px;
    }

    .hero{
        padding:60px 16px;
    }

    .hero h1{
        font-size:26px;
        line-height:1.3;
    }

    .hero p{
        font-size:15px;
    }

    .btn{
        padding:14px 30px;
        font-size:14px;
    }

    .container{
        padding:40px 0;
    }

    .container h2{
        font-size:22px;
    }

    .cards{
        flex-direction:column;
        align-items:center;
        gap:16px;
    }

    .card{
        width:100%;
        max-width:420px;
        min-height:auto;
        padding:40px 18px 18px;
    }

    .card:active{
        transform:scale(.98);
    }

    .tips{
        padding:40px 16px;
    }

    .tips ul{
        font-size:15px;
    }

    .modal{
        padding:12px;
        align-items:flex-end;
    }

    .modal-content{
        padding:40px 20px 20px;
        max-height:85vh;
        border-radius:15px 15px 0 0;
        width:100%;
    }

    .modal-content h2{
        font-size:18px;
    }

    .modal-content li{
        font-size:15px;
    }

}