/* =======================================================
   KHMC Blog UI/UX Styles v2
   Scoped CSS for blog.php, country blog lists, and articles
   ======================================================= */
:root{
  --khmc-navy:#002854;
  --khmc-blue:#1d4ed8;
  --khmc-gold:#d4af37;
  --khmc-gold-2:#ffd76a;
  --khmc-ink:#0f172a;
  --khmc-text:#475569;
  --khmc-muted:#64748b;
  --khmc-soft:#f6f8fc;
  --khmc-border:#e6edf6;
  --khmc-white:#ffffff;
  --khmc-radius:24px;
  --khmc-shadow:0 20px 45px rgba(15,23,42,.10);
  --khmc-shadow-hover:0 28px 60px rgba(15,23,42,.16);
}
body{ background:#f7f9fd; }
.khmc-blog-container{ position:relative; padding-top:30px; padding-bottom:70px; }
.khmc-blog-hero{ min-height:420px; background-position:center; background-size:cover; position:relative; overflow:hidden; }
.khmc-blog-hero::before{ content:""; position:absolute; inset:0; background:radial-gradient(circle at 20% 20%, rgba(212,175,55,.28), transparent 34%), linear-gradient(135deg,rgba(0,40,84,.88),rgba(0,0,0,.50)); z-index:1; }
.khmc-blog-hero .overlay{ display:none !important; }
.khmc-blog-hero .hero-content{ position:relative; z-index:2; max-width:1050px; margin:0 auto; padding:0 18px; text-align:center; }
.khmc-blog-hero .hero-content h1{ color:#fff; font-size:clamp(36px,5vw,70px); line-height:1.05; letter-spacing:-1.5px; margin-bottom:16px; text-shadow:0 12px 28px rgba(0,0,0,.28); }
.khmc-blog-hero .hero-content p{ color:rgba(255,255,255,.92); font-size:clamp(16px,2vw,22px); max-width:780px; margin:0 auto; line-height:1.7; }
.khmc-blog-toolbar{ display:flex; justify-content:space-between; gap:14px; align-items:center; flex-wrap:wrap; margin:0 0 24px; }
.khmc-blog-back,.khmc-blog-small-btn{ display:inline-flex; align-items:center; gap:8px; min-height:44px; background:rgba(255,255,255,.92); color:var(--khmc-navy)!important; border:1px solid rgba(0,40,84,.10); text-decoration:none!important; padding:10px 18px; border-radius:999px; font-weight:800; box-shadow:0 10px 26px rgba(15,23,42,.08); transition:all .25s ease; backdrop-filter:blur(10px); }
.khmc-blog-back:hover,.khmc-blog-small-btn:hover{ background:var(--khmc-navy); color:#fff!important; transform:translateY(-2px); box-shadow:0 16px 30px rgba(0,40,84,.22); }
.khmc-blog-hub{ padding:0 0 50px; }
.khmc-blog-intro,.khmc-about-khmc{ position:relative; background:linear-gradient(180deg,#ffffff,#fbfdff); padding:32px; border-radius:var(--khmc-radius); box-shadow:var(--khmc-shadow); border:1px solid rgba(0,40,84,.08); overflow:hidden; }
.khmc-blog-intro::after,.khmc-about-khmc::after{ content:""; position:absolute; right:-70px; top:-70px; width:160px; height:160px; background:rgba(212,175,55,.16); border-radius:50%; }
.khmc-blog-intro p,.khmc-about-khmc p{ font-size:16px; color:var(--khmc-text); line-height:1.85; margin:0 0 10px; }
.khmc-blog-intro strong{ color:var(--khmc-navy); font-size:20px; }
.khmc-about-khmc{ border-left:7px solid var(--khmc-gold); margin:26px 0; }
.khmc-about-khmc h3{ color:var(--khmc-navy)!important; margin:0 0 12px!important; font-size:24px; }
.khmc-blog-stats{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; margin:30px 0 44px; }
.khmc-blog-stat-box{ background:#fff; padding:26px 18px; border-radius:22px; text-align:center; box-shadow:var(--khmc-shadow); border:1px solid rgba(0,40,84,.08); position:relative; overflow:hidden; }
.khmc-blog-stat-box::before{ content:""; position:absolute; inset:0 0 auto 0; height:5px; background:linear-gradient(90deg,var(--khmc-navy),var(--khmc-gold)); }
.khmc-blog-stat-number{ font-size:clamp(34px,4vw,48px); color:var(--khmc-gold); font-weight:950; line-height:1; letter-spacing:-1px; }
.khmc-blog-stat-label{ color:var(--khmc-navy); font-weight:900; margin-top:10px; }
.khmc-blog-section-title{ color:var(--khmc-navy); text-align:center; margin:44px 0 18px; font-size:clamp(28px,4vw,42px); letter-spacing:-.8px; }
.khmc-blog-filterbar{ background:#fff; border:1px solid rgba(0,40,84,.08); box-shadow:0 14px 34px rgba(15,23,42,.08); border-radius:22px; padding:18px; margin:20px 0 28px; display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.khmc-blog-filterbar label{ color:var(--khmc-navy); font-weight:900; margin:0; white-space:nowrap; }
.khmc-blog-search{ flex:1; min-width:240px; border:1px solid var(--khmc-border); background:#f8fafc; border-radius:999px; height:50px; padding:0 20px; outline:none; color:var(--khmc-ink); font-weight:600; transition:.25s ease; }
.khmc-blog-search:focus{ border-color:var(--khmc-gold); background:#fff; box-shadow:0 0 0 4px rgba(212,175,55,.14); }
.khmc-filter-count{ color:var(--khmc-muted); font-weight:800; font-size:14px; }
.khmc-no-results{ display:none; background:#fff7ed; color:#9a3412; border:1px solid #fed7aa; padding:16px 18px; border-radius:16px; margin:18px 0; font-weight:800; }
.khmc-destinations-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(285px,1fr)); gap:26px; margin:28px 0 46px; }
.khmc-destination-card{ background:#fff; border-radius:28px; overflow:hidden; box-shadow:var(--khmc-shadow); transition:all .28s ease; display:flex; flex-direction:column; min-height:100%; border:1px solid rgba(0,40,84,.08); position:relative; }
.khmc-destination-card:hover{ transform:translateY(-8px); box-shadow:var(--khmc-shadow-hover); }
.khmc-destination-img{ width:100%; height:205px; object-fit:cover; display:block; filter:saturate(1.04); transition:transform .35s ease; }
.khmc-destination-card:hover .khmc-destination-img{ transform:scale(1.04); }
.khmc-destination-header{ background:linear-gradient(135deg,var(--khmc-navy),#174a7a); color:#fff; padding:20px 24px; text-align:left; }
.khmc-destination-header h2{ color:#fff!important; font-size:24px; margin:0; line-height:1.25; }
.khmc-destination-content{ padding:24px; display:flex; flex-direction:column; flex:1; }
.khmc-blog-count{ background:linear-gradient(135deg,var(--khmc-gold),var(--khmc-gold-2)); color:var(--khmc-navy); display:inline-flex; align-items:center; gap:6px; padding:8px 15px; border-radius:999px; font-weight:950; margin-bottom:14px; font-size:13px; width:max-content; box-shadow:0 8px 16px rgba(212,175,55,.25); }
.khmc-blog-count::before{ content:"✦"; }
.khmc-destination-content p{ color:var(--khmc-text); font-size:15px; line-height:1.75; margin:0 0 15px; }
.khmc-topics-list{ list-style:none; margin:0 0 22px; padding:0; }
.khmc-topics-list li{ padding:10px 0; border-bottom:1px dashed #e2e8f0; color:var(--khmc-text); font-size:14px; line-height:1.55; }
.khmc-view-blogs-btn,.khmc-read-blog-btn,.khmc-whatsapp-btn,.khmc-article-content .whatsapp-btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; background:linear-gradient(135deg,var(--khmc-gold),var(--khmc-gold-2)); color:var(--khmc-navy)!important; padding:13px 24px; text-decoration:none!important; border-radius:999px; font-weight:950; text-align:center; transition:all .25s ease; border:0; box-shadow:0 12px 22px rgba(212,175,55,.24); }
.khmc-view-blogs-btn{ margin-top:auto; width:100%; }
.khmc-view-blogs-btn::after,.khmc-read-blog-btn::after{ content:"→"; font-size:18px; line-height:1; }
.khmc-view-blogs-btn:hover,.khmc-read-blog-btn:hover,.khmc-whatsapp-btn:hover,.khmc-article-content .whatsapp-btn:hover{ transform:translateY(-2px); filter:saturate(1.12); box-shadow:0 18px 30px rgba(212,175,55,.34); }
.khmc-cta-banner{ background:radial-gradient(circle at top left,rgba(212,175,55,.28),transparent 34%),linear-gradient(135deg,var(--khmc-navy),#174a7a); color:#fff; padding:44px; border-radius:28px; text-align:center; margin:46px 0 10px; box-shadow:var(--khmc-shadow); overflow:hidden; position:relative; }
.khmc-cta-banner h2{ color:#fff!important; font-size:clamp(26px,4vw,38px); margin:0 0 14px; }
.khmc-cta-banner p{ color:rgba(255,255,255,.92); line-height:1.8; margin:0 0 14px; }
.khmc-post-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(285px,1fr)); gap:22px; margin:26px 0 55px; }
.khmc-post-card{ background:#fff; border-radius:24px; padding:24px; box-shadow:0 15px 34px rgba(15,23,42,.08); border:1px solid rgba(0,40,84,.08); transition:all .25s ease; display:flex; flex-direction:column; min-height:100%; position:relative; overflow:hidden; }
.khmc-post-card::before{ content:""; position:absolute; inset:0 0 auto 0; height:5px; background:linear-gradient(90deg,var(--khmc-gold),var(--khmc-blue)); transform:scaleX(.28); transform-origin:left; transition:.25s ease; }
.khmc-post-card:hover{ transform:translateY(-6px); box-shadow:var(--khmc-shadow-hover); }
.khmc-post-card:hover::before{ transform:scaleX(1); }
.khmc-post-card h3{ color:var(--khmc-navy); font-size:21px; margin:6px 0 12px; line-height:1.35; letter-spacing:-.25px; }
.khmc-post-card p{ color:var(--khmc-muted); line-height:1.75; margin:0 0 20px; font-size:14.5px; }
.khmc-post-meta{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px; }
.khmc-post-badge{ background:rgba(29,78,216,.08); color:var(--khmc-navy); padding:7px 12px; border-radius:999px; font-size:12px; font-weight:900; display:inline-flex; align-items:center; gap:5px; border:1px solid rgba(29,78,216,.08); }
.khmc-post-badge:first-child{ background:rgba(212,175,55,.14); color:#7c5c00; border-color:rgba(212,175,55,.18); }
.khmc-read-blog-btn{ margin-top:auto; width:max-content; }
.khmc-reading-progress{ position:fixed; top:0; left:0; right:0; height:4px; background:transparent; z-index:99999; }
.khmc-reading-progress span{ display:block; height:100%; width:0; background:linear-gradient(90deg,var(--khmc-gold),var(--khmc-blue)); box-shadow:0 0 12px rgba(212,175,55,.55); }
.khmc-article-shell{ background:transparent; margin:28px 0 65px; overflow:visible; box-shadow:none; border-radius:0; }
.khmc-article-layout{ display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:28px; align-items:start; }
.khmc-article-content{ background:#fff; border-radius:28px; box-shadow:var(--khmc-shadow); border:1px solid rgba(0,40,84,.08); padding:50px; overflow:hidden; }
.khmc-article-content h2{ color:var(--khmc-navy); font-size:clamp(26px,3vw,36px); margin:46px 0 22px; padding-bottom:14px; border-bottom:4px solid var(--khmc-gold); line-height:1.25; letter-spacing:-.55px; scroll-margin-top:90px; }
.khmc-article-content h2:first-child{ margin-top:0; }
.khmc-article-content h3{ color:#174a7a; font-size:24px; margin:30px 0 15px; line-height:1.35; }
.khmc-article-content p{ color:var(--khmc-text); line-height:1.95; margin:0 0 18px; font-size:16px; }
.khmc-article-content strong{ color:var(--khmc-ink); }
.khmc-article-content ul,.khmc-article-content ol{ margin:20px 0 26px 26px; color:var(--khmc-text); padding-left:18px; }
.khmc-article-content li{ margin-bottom:12px; line-height:1.85; padding-left:2px; }
.khmc-article-content table{ width:100%; border-collapse:separate; border-spacing:0; margin:30px 0; background:#fff; border-radius:18px; overflow:hidden; box-shadow:0 12px 28px rgba(15,23,42,.07); border:1px solid var(--khmc-border); }
.khmc-article-content th{ background:linear-gradient(135deg,var(--khmc-navy),#174a7a); color:#fff; padding:17px; text-align:left; font-weight:900; }
.khmc-article-content td{ padding:17px; border-bottom:1px solid #e8eef7; color:var(--khmc-text); vertical-align:top; }
.khmc-article-content tr:last-child td{ border-bottom:0; }
.khmc-article-content tr:nth-child(even) td{ background:#f8fafc; }
.khmc-article-content .highlight-box{ background:linear-gradient(135deg,rgba(0,40,84,.055),rgba(212,175,55,.12)); border:1px solid rgba(212,175,55,.22); border-left:6px solid var(--khmc-gold); padding:24px; margin:30px 0; border-radius:18px; color:var(--khmc-text); }
.khmc-article-content .highlight-box strong{ color:var(--khmc-navy); }
.khmc-article-content .cta-section,.khmc-article-content .footer-cta{ background:radial-gradient(circle at top left,rgba(212,175,55,.24),transparent 35%),linear-gradient(135deg,var(--khmc-navy),#174a7a); color:#fff; padding:42px; border-radius:24px; text-align:center; margin:44px 0; box-shadow:0 18px 38px rgba(0,40,84,.18); }
.khmc-article-content .cta-section h3,.khmc-article-content .footer-cta h2,.khmc-article-content .footer-cta h3{ color:#fff!important; border:0; padding:0; margin:0 0 16px; }
.khmc-article-content .cta-section p,.khmc-article-content .footer-cta p{ color:rgba(255,255,255,.92); }
.khmc-article-content .author-section{ background:linear-gradient(135deg,#f0f7ff,#fffaf0); padding:32px; border-radius:20px; margin:38px 0; text-align:center; border:1px solid rgba(0,40,84,.08); }
.khmc-article-content .author-name{ color:var(--khmc-navy); font-weight:950; font-size:21px; margin-bottom:8px; }
.khmc-article-content .author-title{ color:#174a7a; font-weight:800; }
.khmc-article-content a{ color:var(--khmc-blue); font-weight:800; text-decoration-thickness:2px; text-underline-offset:3px; }
.khmc-article-sidebar{ position:sticky; top:95px; display:flex; flex-direction:column; gap:18px; }
.khmc-sidebar-card{ background:#fff; border:1px solid rgba(0,40,84,.08); border-radius:24px; padding:22px; box-shadow:0 14px 30px rgba(15,23,42,.08); }
.khmc-sidebar-card h3{ color:var(--khmc-navy); margin:0 0 14px; font-size:19px; line-height:1.3; }
.khmc-sidebar-card p{ color:var(--khmc-muted); line-height:1.75; margin:0 0 12px; font-size:14px; }
.khmc-side-meta{ display:flex; flex-wrap:wrap; gap:8px; margin:0 0 8px; }
.khmc-toc-list{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:9px; max-height:360px; overflow:auto; }
.khmc-toc-list a{ display:block; color:var(--khmc-text)!important; text-decoration:none!important; font-size:14px; line-height:1.45; padding:9px 10px; border-radius:12px; border:1px solid transparent; transition:.2s ease; }
.khmc-toc-list a:hover{ background:#f8fafc; color:var(--khmc-navy)!important; border-color:var(--khmc-border); }
.khmc-related-nav{ display:grid; gap:10px; }
.khmc-related-nav a{ display:block; background:#f8fafc; color:var(--khmc-navy)!important; text-decoration:none!important; border:1px solid var(--khmc-border); border-radius:15px; padding:12px 14px; font-weight:850; line-height:1.45; transition:.2s ease; }
.khmc-related-nav a:hover{ background:var(--khmc-navy); color:#fff!important; transform:translateY(-2px); }
.khmc-source-note{ background:#f8fafc; border:1px solid #e2e8f0; border-radius:16px; padding:18px; margin:20px 0; color:var(--khmc-muted); }
@media(max-width:1100px){ .khmc-article-layout{ grid-template-columns:1fr; } .khmc-article-sidebar{ position:relative; top:auto; order:2; grid-row:auto; } .khmc-article-content{ order:1; } }
@media(max-width:900px){ .khmc-blog-stats{ grid-template-columns:repeat(2,minmax(0,1fr)); } .khmc-blog-hero{ min-height:350px; } }
@media(max-width:768px){ .khmc-blog-container{ padding-top:22px; } .khmc-blog-section-title{font-size:28px;} .khmc-blog-intro,.khmc-about-khmc,.khmc-cta-banner{padding:24px;} .khmc-article-content{padding:30px 20px;border-radius:22px;} .khmc-article-content h2{font-size:25px;} .khmc-destination-img{height:170px;} .khmc-blog-filterbar{ display:block; } .khmc-blog-filterbar label,.khmc-filter-count{ display:block; margin-bottom:10px; } .khmc-blog-search{ width:100%; min-width:0; } .khmc-post-grid,.khmc-destinations-grid{ grid-template-columns:1fr; } .khmc-blog-toolbar{ align-items:stretch; } .khmc-blog-back,.khmc-blog-small-btn{ justify-content:center; } }
@media(max-width:520px){ .khmc-blog-stats{ grid-template-columns:1fr; } .khmc-cta-banner{ padding:30px 20px; } .khmc-article-content table{ display:block; overflow-x:auto; white-space:nowrap; } }