:root {
    --primary:      #1a3a5c;
    --secondary:    #2980b9;
    --accent:       #27ae60;
    --light:        #f0f4f8;
    --text:         #2d3748;
    --text-light:   #718096;
    --white:        #ffffff;
    --border:       #dde3ea;
    --shadow:       0 2px 12px rgba(0,0,0,0.08);
    --shadow-lg:    0 8px 32px rgba(0,0,0,0.12);
    --radius:       10px;
    --font:         -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --serif:        'Georgia', 'Times New Roman', serif;
    --ease:         all 0.3s ease;
    --max:          1100px;
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { font-family:var(--font); line-height:1.7; color:var(--text); background:var(--white); }
a { color:var(--secondary); text-decoration:none; transition:var(--ease); }
a:hover { color:var(--primary); }
img { max-width:100%; height:auto; display:block; }
h1,h2,h3,h4 { font-family:var(--serif); color:var(--primary); line-height:1.3; }

/* SKIP NAV */
.skip-nav {
    position: absolute;
    top: -100%;
    left: 0;
    background: var(--secondary);
    color: var(--white);
    padding: 0.75rem 1.5rem;
    z-index: 9999;
    font-weight: 600;
    font-size: 0.95rem;
    border-radius: 0 0 var(--radius) 0;
    transition: top 0.2s ease;
    text-decoration: none;
}
.skip-nav:focus { top: 0; }

/* FOCUS VISIBLE */
*:focus { outline: none; }
*:focus-visible {
    outline: 3px solid var(--secondary);
    outline-offset: 3px;
    border-radius: 3px;
}
.site-header *:focus-visible,
.site-footer *:focus-visible { outline-color: var(--white); }

/* HEADER */
.site-header {
    background: var(--primary);
    padding: 0 1.5rem;
    position: sticky;
    top:0; z-index:100;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
}
.site-header-inner {
    max-width: var(--max);
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 60px;
}
.site-header .logo { color:var(--white); font-family:var(--serif); font-size:1.05rem; }
.site-header .logo:hover { color:rgba(255,255,255,0.85); }
.header-nav { display:flex; gap:1.25rem; }
.header-nav a { color:rgba(255,255,255,0.8); font-size:0.88rem; }
.header-nav a:hover { color:var(--white); }

/* BREADCRUMB */
.breadcrumb { background:var(--light); padding:0.6rem 1.5rem; font-size:0.85rem; }
.breadcrumb-inner { max-width:var(--max); margin:0 auto; display:flex; gap:0.4rem; align-items:center; flex-wrap:wrap; color:var(--text-light); }
.breadcrumb a { color:var(--secondary); }
.breadcrumb-sep { color:var(--border); }

/* BLOG LIST HERO */
.blog-hero {
    background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
    color: var(--white);
    padding: 4rem 1.5rem;
    text-align: center;
}
.blog-hero h1 { color:var(--white); font-size:clamp(1.75rem,4vw,2.5rem); margin-bottom:0.75rem; }
.blog-hero p { opacity:0.9; font-size:1.05rem; max-width:600px; margin:0 auto; }

/* BLOG GRID */
.blog-list-section { max-width:var(--max); margin:3rem auto 5rem; padding:0 1.5rem; }
.blog-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(290px,1fr)); gap:1.75rem; }
.blog-card {
    background: var(--white);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
    transition: var(--ease);
    border-top: 4px solid transparent;
    display: flex;
    flex-direction: column;
}
.blog-card:hover { transform:translateY(-6px); box-shadow:var(--shadow-lg); border-top-color:var(--secondary); }
.blog-card-icon {
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    padding: 2rem;
    font-size: 2.5rem;
    color: var(--white);
    text-align: center;
}
.blog-card-body { padding:1.5rem; flex:1; display:flex; flex-direction:column; }
.blog-card-meta { display:flex; gap:0.75rem; margin-bottom:0.75rem; flex-wrap:wrap; align-items:center; }
.blog-tag { background:var(--light); color:var(--primary); padding:0.2rem 0.65rem; border-radius:20px; font-size:0.78rem; font-weight:600; }
.blog-date { color:var(--text-light); font-size:0.82rem; }
.blog-card h2 { font-size:1.05rem; margin-bottom:0.75rem; }
.blog-card h2 a { color:var(--primary); }
.blog-card h2 a:hover { color:var(--secondary); }
.blog-card p { color:var(--text-light); font-size:0.93rem; line-height:1.6; flex:1; margin-bottom:1rem; }
.blog-read-more { display:inline-flex; align-items:center; gap:0.4rem; color:var(--secondary); font-weight:600; font-size:0.88rem; margin-top:auto; }
.blog-read-more:hover { color:var(--primary); }

/* ARTICLE HEADER */
.article-header {
    background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
    color: var(--white);
    padding: 4rem 1.5rem 3rem;
}
.article-header-inner { max-width:780px; margin:0 auto; }
.article-tag { display:inline-block; background:rgba(255,255,255,0.2); color:var(--white); padding:0.25rem 0.75rem; border-radius:20px; font-size:0.82rem; margin-bottom:1rem; }
.article-header h1 { color:var(--white); font-size:clamp(1.5rem,3.5vw,2.25rem); margin-bottom:1rem; }
.article-meta { display:flex; gap:1.5rem; opacity:0.85; font-size:0.88rem; flex-wrap:wrap; }
.article-meta i { margin-right:0.3rem; }

/* ARTICLE BODY */
.article-body { max-width:780px; margin:3rem auto; padding:0 1.5rem; }
.article-body h2 { font-size:1.5rem; margin-top:2.5rem; margin-bottom:1rem; padding-bottom:0.5rem; border-bottom:2px solid var(--light); }
.article-body h3 { font-size:1.2rem; margin-top:1.75rem; margin-bottom:0.75rem; color:var(--secondary); }
.article-body p { margin-bottom:1.25rem; line-height:1.85; }
.article-body ul, .article-body ol { margin-bottom:1.25rem; padding-left:1.75rem; }
.article-body li { margin-bottom:0.5rem; line-height:1.7; }
.article-body strong { color:var(--primary); }

/* BOXES */
.disclaimer {
    background: #fffbeb;
    border-left: 4px solid #f59e0b;
    padding: 1.25rem 1.5rem;
    border-radius: 0 var(--radius) var(--radius) 0;
    margin: 2rem 0;
    font-size: 0.93rem;
    color: #78350f;
}
.highlight-box {
    background: var(--light);
    border-left: 4px solid var(--secondary);
    padding: 1.25rem 1.5rem;
    border-radius: 0 var(--radius) var(--radius) 0;
    margin: 1.5rem 0;
}
.highlight-box p { margin:0; }
.emergency-box {
    background: #fef2f2;
    border: 2px solid #ef4444;
    border-radius: var(--radius);
    padding: 1.25rem 1.5rem;
    margin: 1.5rem 0;
}
.emergency-box h4 { color:#991b1b; margin-bottom:0.75rem; display:flex; align-items:center; gap:0.5rem; font-size:1rem; }
.emergency-box ul { margin-bottom:0; }

/* ARTICLE NAV */
.article-nav {
    max-width: 780px;
    margin: 3rem auto 1rem;
    padding: 1.25rem 1.5rem;
    background: var(--light);
    border-radius: var(--radius);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}
.article-nav a { display:inline-flex; align-items:center; gap:0.4rem; color:var(--secondary); font-weight:600; font-size:0.9rem; }
.article-nav a:hover { color:var(--primary); }

/* RELATED */
.related-section { max-width:780px; margin:1rem auto 4rem; padding:0 1.5rem; }
.related-section h3 { font-size:1.2rem; margin-bottom:1.25rem; }
.related-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(210px,1fr)); gap:1rem; }
.related-card { background:var(--light); padding:1.25rem; border-radius:var(--radius); transition:var(--ease); }
.related-card:hover { background:var(--border); transform:translateY(-2px); }
.related-card h4 { font-size:0.93rem; margin-bottom:0.4rem; }
.related-card h4 a { color:var(--primary); }
.related-card h4 a:hover { color:var(--secondary); }
.related-card p { font-size:0.82rem; color:var(--text-light); }

/* FOOTER */
.site-footer { background:var(--primary); color:rgba(255,255,255,0.75); padding:2rem 1.5rem; text-align:center; font-size:0.9rem; }
.site-footer a { color:rgba(255,255,255,0.7); }
.site-footer a:hover { color:var(--white); }

@media (max-width: 600px) {
    .site-header-inner { padding:0; }
    .header-nav { display:none; }
    .article-body { padding:0 1rem; }
    .article-nav { flex-direction:column; }
    .blog-grid { grid-template-columns:1fr; }
}