/* ===================== RESET ===================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Segoe UI', sans-serif; color: #1a1a1a; background: #fff; line-height: 1.7; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
ul { list-style: none; }

/* ===================== CONTAINER ===================== */
.container { max-width: 1100px; margin: 0 auto; padding: 0 20px; }

/* ===================== HEADER / NAV ===================== */
.site-header { background: #1a2238; padding: 0; position: sticky; top: 0; z-index: 100; box-shadow: 0 2px 10px rgba(0,0,0,.3); }
.nav-wrap { display: flex; align-items: center; justify-content: space-between; height: 60px; }
.logo { font-size: 1.25rem; font-weight: 800; color: #fff; letter-spacing: .5px; }
.logo span { color: #f5a623; }
.main-nav { display: flex; gap: 24px; }
.main-nav a { color: #ccc; font-size: .9rem; font-weight: 500; transition: color .2s; }
.main-nav a:hover { color: #f5a623; }
.nav-toggle { display: none; background: none; border: none; color: #fff; font-size: 1.5rem; cursor: pointer; }

/* ===================== HERO ===================== */
.hero { background: linear-gradient(135deg, #1a2238 0%, #2d3e6b 50%, #1a5276 100%); color: #fff; padding: 70px 0 60px; }
.hero-inner { max-width: 750px; }
.hero h1 { font-size: 2rem; font-weight: 800; line-height: 1.3; margin-bottom: 18px; }
.hero h1 span { display: block; font-size: 1.1rem; font-weight: 400; color: #aec6e8; margin-top: 8px; }
.hero p { font-size: 1rem; color: #c5d8f0; margin-bottom: 28px; line-height: 1.8; }
.hero-btns { display: flex; gap: 14px; flex-wrap: wrap; }
.btn-primary { background: #f5a623; color: #1a2238; padding: 12px 24px; border-radius: 6px; font-weight: 700; font-size: .95rem; transition: background .2s; }
.btn-primary:hover { background: #e09800; }
.btn-secondary { background: transparent; color: #fff; border: 2px solid #fff; padding: 12px 24px; border-radius: 6px; font-weight: 600; font-size: .95rem; transition: all .2s; }
.btn-secondary:hover { background: #fff; color: #1a2238; }

/* ===================== AD BLOCK ===================== */
.ad-block { background: #f0f0f0; border: 1px dashed #ccc; text-align: center; color: #888; font-size: .85rem; padding: 18px; margin: 30px auto; border-radius: 4px; }

/* ===================== POSTS SECTION ===================== */
.posts-section { padding: 40px 0 60px; }
.section-header { margin-bottom: 32px; }
.section-header h2 { font-size: 1.6rem; font-weight: 800; color: #1a2238; margin-bottom: 6px; }
.section-header p { color: #666; font-size: .95rem; }

.posts-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 28px; }

.post-card { border: 1px solid #e2e8f0; border-radius: 10px; overflow: hidden; background: #fff; box-shadow: 0 2px 12px rgba(0,0,0,.07); transition: transform .2s, box-shadow .2s; display: flex; flex-direction: column; }
.post-card:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0,0,0,.12); }

.post-meta-top { padding: 12px 16px 0; }
.tag { background: #eef2ff; color: #2d3e6b; font-size: .8rem; font-weight: 700; padding: 4px 10px; border-radius: 20px; display: inline-block; }

.post-thumb { width: 100%; height: 200px; object-fit: cover; margin-top: 12px; }
.post-thumb-placeholder { width: 100%; height: 200px; background: linear-gradient(135deg, #2d3e6b, #1a5276); display: flex; align-items: center; justify-content: center; font-size: 3rem; margin-top: 12px; }

.post-body { padding: 16px 18px 20px; flex: 1; display: flex; flex-direction: column; }
.post-body h3 { font-size: 1rem; font-weight: 700; color: #1a2238; margin-bottom: 10px; line-height: 1.4; }
.post-body h3 small { font-weight: 500; color: #4a5568; font-size: .85rem; display: block; margin-top: 4px; }
.post-body p { font-size: .9rem; color: #555; line-height: 1.6; flex: 1; margin-bottom: 14px; }
.read-more { color: #1a5276; font-weight: 700; font-size: .9rem; transition: color .2s; margin-top: auto; }
.read-more:hover { color: #f5a623; }

/* ===================== SINGLE POST PAGE ===================== */
.breadcrumb { padding: 14px 0; font-size: .85rem; color: #888; }
.breadcrumb a { color: #1a5276; }
.breadcrumb a:hover { text-decoration: underline; }

.post-hero-img { width: 100%; max-height: 420px; object-fit: cover; border-radius: 10px; margin-bottom: 30px; }
.post-hero-img-placeholder { width: 100%; height: 360px; background: linear-gradient(135deg, #2d3e6b, #1a5276); border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 5rem; margin-bottom: 30px; }

.post-layout { display: grid; grid-template-columns: 1fr 300px; gap: 40px; padding: 40px 0 60px; align-items: start; }

.post-content .post-category { font-size: .8rem; font-weight: 700; color: #1a5276; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 12px; }
.post-content h1 { font-size: 1.8rem; font-weight: 800; color: #1a2238; line-height: 1.3; margin-bottom: 10px; }
.post-content .post-meta { font-size: .85rem; color: #888; margin-bottom: 24px; }
.post-content p { font-size: 1rem; color: #333; line-height: 1.85; margin-bottom: 18px; }
.post-content h2 { font-size: 1.3rem; font-weight: 800; color: #1a2238; margin: 30px 0 12px; border-left: 4px solid #f5a623; padding-left: 12px; }
.post-content h3 { font-size: 1.1rem; font-weight: 700; color: #2d3e6b; margin: 22px 0 10px; }
.post-content ul { padding-left: 20px; margin-bottom: 18px; list-style: disc; }
.post-content ul li { margin-bottom: 8px; font-size: .97rem; color: #444; }
.post-content .tip-box { background: #fffbea; border: 1px solid #f5a623; border-radius: 8px; padding: 16px 18px; margin: 24px 0; font-size: .95rem; }
.post-content .tip-box strong { color: #b7780a; }
.post-content .action-box { background: #eef9ee; border: 1px solid #48bb78; border-radius: 8px; padding: 16px 18px; margin: 24px 0; font-size: .95rem; }
.post-content .action-box strong { color: #276749; }
.post-content .post-inline-img { width: 100%; border-radius: 10px; margin: 26px 0; max-height: 380px; object-fit: cover; }
.post-content .post-inline-img-placeholder { width: 100%; height: 320px; background: linear-gradient(135deg, #1a5276, #2d3e6b); border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 4rem; margin: 26px 0; }
.post-content .continue-link { display: inline-block; margin-top: 30px; background: #1a2238; color: #fff; padding: 12px 22px; border-radius: 6px; font-weight: 700; transition: background .2s; }
.post-content .continue-link:hover { background: #f5a623; color: #1a2238; }

/* SIDEBAR */
.sidebar .widget { background: #f7faff; border: 1px solid #e2e8f0; border-radius: 10px; padding: 20px; margin-bottom: 24px; }
.sidebar .widget h4 { font-size: 1rem; font-weight: 800; color: #1a2238; margin-bottom: 14px; padding-bottom: 8px; border-bottom: 2px solid #f5a623; }
.sidebar .widget ul li { margin-bottom: 10px; }
.sidebar .widget ul li a { font-size: .9rem; color: #2d3e6b; transition: color .2s; display: block; }
.sidebar .widget ul li a:hover { color: #f5a623; }

/* ===================== STATIC PAGES ===================== */
.static-page { padding: 50px 0 70px; max-width: 800px; }
.static-page h1 { font-size: 1.8rem; font-weight: 800; color: #1a2238; margin-bottom: 20px; }
.static-page h2 { font-size: 1.2rem; font-weight: 700; color: #2d3e6b; margin: 24px 0 10px; }
.static-page p { color: #444; line-height: 1.8; margin-bottom: 14px; }

/* ===================== FOOTER ===================== */
.site-footer { background: #1a2238; color: #bbb; padding: 50px 0 0; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 40px; padding-bottom: 40px; }
.footer-grid h4 { color: #fff; font-size: 1rem; margin-bottom: 14px; }
.footer-grid p { font-size: .9rem; line-height: 1.7; }
.footer-grid ul li { margin-bottom: 8px; }
.footer-grid ul li a { font-size: .9rem; color: #aaa; transition: color .2s; }
.footer-grid ul li a:hover { color: #f5a623; }
.footer-bottom { border-top: 1px solid #2d3e6b; text-align: center; padding: 16px 0; font-size: .85rem; color: #777; }

/* ===================== RESPONSIVE ===================== */
@media (max-width: 768px) {
  .main-nav { display: none; flex-direction: column; position: absolute; top: 60px; left: 0; right: 0; background: #1a2238; padding: 16px 20px; gap: 14px; }
  .main-nav.open { display: flex; }
  .nav-toggle { display: block; }
  .hero h1 { font-size: 1.4rem; }
  .posts-grid { grid-template-columns: 1fr; }
  .post-layout { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 28px; }
}