/*
Theme Name: FDE Home Site
Theme URI: https://wh2610.cc
Description: Custom theme for FDE's Home Site - Field Deployment Engineer's Corner
Version: 1.0
Author: FDE
Text Domain: fde-home
*/

:root{--primary:#1b2a4a;--accent:#2980b9;--bg:#f4f6f9;--card-bg:#fff;--text:#2c3e50;--text-light:#7f8c8d;--border:#dce1e8;--banner-h:280px}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans SC',sans-serif;background:var(--bg);color:var(--text);line-height:1.7}
a{color:var(--accent);text-decoration:none;transition:color .2s}a:hover{color:var(--primary)}
img{max-width:100%;display:block}
header{background:var(--primary);color:#fff;position:sticky;top:0;z-index:100;box-shadow:0 2px 8px rgba(0,0,0,.15)}
.header-inner{max-width:1100px;margin:0 auto;padding:.9rem 1.5rem;display:flex;justify-content:space-between;align-items:center}
.logo{font-size:1.3rem;font-weight:700;color:#fff;letter-spacing:.5px}
.logo small{display:block;font-size:.75rem;font-weight:400;opacity:.75;letter-spacing:0}
.logo a,.logo a:hover{color:#fff;text-decoration:none}
nav{display:flex;gap:1.2rem;align-items:center}
nav a{color:rgba(255,255,255,.85);font-size:.9rem;font-weight:500}
nav a:hover{color:#fff;border-bottom:2px solid var(--accent);padding-bottom:2px}
.lang-btn{background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.3);color:#fff;padding:.3rem .9rem;border-radius:4px;font-size:.82rem;cursor:pointer;transition:background .2s}
.lang-btn:hover{background:rgba(255,255,255,.25)}
.banner{width:100%;height:var(--banner-h);background:linear-gradient(135deg,#1b2a4a 0%,#2c3e50 50%,#2980b9 100%);position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center}
.banner img{width:100%;height:100%;object-fit:cover;position:absolute;top:0;left:0}
.banner-overlay{position:relative;z-index:2;text-align:center;color:#fff;padding:0 1.5rem}
.banner-overlay h1{font-size:2.4rem;margin-bottom:.5rem;text-shadow:0 2px 10px rgba(0,0,0,.4)}
.banner-overlay p{font-size:1.1rem;opacity:.9;text-shadow:0 1px 6px rgba(0,0,0,.3)}
.section-title{max-width:1100px;margin:2.5rem auto 1.2rem;padding:0 1.5rem;display:flex;align-items:center;gap:.8rem}
.section-title h2{font-size:1.5rem;color:var(--primary);white-space:nowrap}
.section-title::after{content:'';flex:1;height:2px;background:linear-gradient(to right,var(--accent),transparent)}
.container{max-width:1100px;margin:0 auto;padding:0 1.5rem 2rem}
.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:1.5rem}
.article-card{background:var(--card-bg);border:1px solid var(--border);border-radius:8px;overflow:hidden;transition:transform .2s,box-shadow .2s;display:flex;flex-direction:column}
.article-card:hover{transform:translateY(-3px);box-shadow:0 6px 20px rgba(0,0,0,.08)}
.card-body{padding:1.5rem;flex:1;display:flex;flex-direction:column}
.article-meta{font-size:.8rem;color:var(--text-light);margin-bottom:.5rem;display:flex;gap:.8rem;align-items:center}
.tag{padding:.15rem .6rem;border-radius:3px;font-size:.72rem;font-weight:600;color:#fff}
.tag-job{background:#27ae60}.tag-fde{background:var(--accent)}
.article-card h3{font-size:1.15rem;margin-bottom:.5rem;line-height:1.4}
.article-card h3 a{color:var(--primary)}
.article-excerpt{color:#555;font-size:.92rem;flex:1;margin-bottom:.8rem}
.read-more{font-size:.85rem;font-weight:600;margin-top:.6rem;display:inline-block}
.footer-sections{background:#fff;border-top:1px solid var(--border);margin-top:3rem}
.footer-grid{max-width:1100px;margin:0 auto;padding:2.5rem 1.5rem;display:grid;grid-template-columns:repeat(3,1fr);gap:2rem}
.footer-col h3{font-size:1.05rem;color:var(--primary);margin-bottom:1rem;padding-bottom:.5rem;border-bottom:2px solid var(--accent)}
.footer-col p,.footer-col li{font-size:.9rem;color:#555;line-height:1.8}
.footer-col ul{list-style:none}
.footer-col li{padding:.3rem 0;border-bottom:1px solid var(--border)}
.footer-col li:last-child{border-bottom:none}
.footer-col a{color:var(--accent)}
footer.site-footer{background:var(--primary);color:rgba(255,255,255,.7);text-align:center;padding:1.5rem;font-size:.82rem}
footer.site-footer a{color:rgba(255,255,255,.9)}
.beian{text-align:center;padding:15px 0;font-size:14px;color:rgba(255,255,255,.6);background:var(--primary)}
.beian a{color:rgba(255,255,255,.8);text-decoration:none}
.beian a:hover{color:#fff}
@media(max-width:768px){
    :root{--banner-h:180px}
    .banner-overlay h1{font-size:1.5rem}.banner-overlay p{font-size:.9rem}
    .header-inner{flex-direction:column;gap:.6rem}
    .logo{text-align:center}
    nav{flex-wrap:wrap;justify-content:center;gap:.8rem}
    .card-grid{grid-template-columns:1fr}
    .footer-grid{grid-template-columns:1fr;gap:1.5rem}
    .section-title h2{font-size:1.2rem}
}