/* Traveling Pakistan — heaven on earth theme */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Playfair+Display:wght@600;700&family=Poppins:wght@500;600;700&display=swap');

:root {
    --emerald: #047857;
    --emerald-light: #10b981;
    --sky: #0ea5e9;
    --sky-light: #e0f2fe;
    --gold: #d97706;
    --dark: #0f172a;
    --text: #1e293b;
    --muted: #64748b;
    --bg: #f0fdf9;
    --white: #ffffff;
    --radius: 14px;
    --shadow: 0 8px 30px rgba(4,120,87,.12);
    --font-display: 'Playfair Display', serif;
    --font-head: 'Poppins', sans-serif;
    --font-body: 'Inter', sans-serif;
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { font-family:var(--font-body); color:var(--text); background:var(--bg); line-height:1.8; }
h1,h2,h3 { font-family:var(--font-head); color:var(--dark); line-height:1.25; }
a { color:var(--emerald); text-decoration:none; transition:color .2s; }
a:hover { color:var(--gold); }
img { max-width:100%; height:auto; display:block; }
.container { max-width:1100px; margin:0 auto; padding:0 24px; }

.navbar {
    position:fixed; top:0; left:0; width:100%; z-index:1000;
    background:rgba(255,255,255,.96); backdrop-filter:blur(12px);
    border-bottom:1px solid rgba(16,185,129,.15); box-shadow:0 2px 20px rgba(0,0,0,.04);
}
.nav-inner { display:flex; justify-content:space-between; align-items:center; height:70px; gap:14px; }
.logo { font-family:var(--font-head); font-weight:700; font-size:1.1rem; color:var(--emerald); display:flex; align-items:center; gap:8px; }
.logo img { width:34px; height:34px; border-radius:8px; }
.nav-links { display:flex; flex-wrap:wrap; gap:1.1rem; }
.nav-link { font-size:.86rem; font-weight:500; color:var(--muted); }
.nav-link:hover { color:var(--emerald); }

.hero {
    padding:120px 0 70px; position:relative; overflow:hidden;
    background:linear-gradient(160deg, #ecfdf5 0%, #e0f2fe 40%, #fffbeb 100%);
}
.hero::before {
    content:''; position:absolute; inset:0;
    background:url('/images/wiki/karakoram.jpg') center/cover no-repeat;
    opacity:.18; filter:saturate(1.2);
}
.hero-inner { position:relative; z-index:1; max-width:760px; margin:0 auto; text-align:center; }
.hero-badge {
    display:inline-block; background:rgba(255,255,255,.9); color:var(--emerald);
    padding:.4rem 1.1rem; border-radius:999px; font-size:.8rem; font-weight:600;
    border:1px solid rgba(16,185,129,.25); margin-bottom:1.2rem;
}
.hero h1 {
    font-family:var(--font-display); font-size:clamp(2rem,4.5vw,3rem);
    font-weight:700; margin-bottom:1rem; color:var(--dark);
}
.hero p { font-size:1.1rem; color:var(--muted); margin-bottom:1.6rem; max-width:620px; margin-left:auto; margin-right:auto; }
.hero-btns { display:flex; gap:.8rem; justify-content:center; flex-wrap:wrap; }
.btn {
    display:inline-flex; align-items:center; padding:.72rem 1.5rem; font-weight:600;
    font-size:.9rem; border-radius:var(--radius); transition:all .25s;
}
.btn-primary { background:linear-gradient(135deg,var(--emerald),var(--emerald-light)); color:#fff; box-shadow:0 6px 20px rgba(4,120,87,.3); }
.btn-primary:hover { transform:translateY(-2px); box-shadow:0 10px 28px rgba(4,120,87,.35); }
.btn-outline { background:rgba(255,255,255,.9); border:1px solid #cbd5e1; color:var(--text); }
.btn-outline:hover { border-color:var(--emerald); color:var(--emerald); }

.section { padding:4rem 0; }
.section-white { background:var(--white); }
.section-title { font-family:var(--font-display); font-size:2.1rem; text-align:center; margin-bottom:.5rem; }
.section-sub { text-align:center; color:var(--muted); max-width:580px; margin:0 auto 2.5rem; }

.guide-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:1.25rem; }
.guide-card {
    background:var(--white); border-radius:var(--radius); overflow:hidden;
    border:1px solid rgba(16,185,129,.12); box-shadow:0 4px 16px rgba(0,0,0,.04);
    transition:all .3s;
}
.guide-card:hover { transform:translateY(-5px); box-shadow:var(--shadow); border-color:rgba(16,185,129,.3); }
.guide-card img { width:100%; height:150px; object-fit:cover; }
.guide-card-body { padding:1.15rem 1.25rem 1.3rem; }
.guide-card .tag { font-size:.72rem; font-weight:600; color:var(--sky); text-transform:uppercase; letter-spacing:.04em; }
.guide-card h3 { font-size:1rem; margin:.35rem 0 .3rem; }
.guide-card p { font-size:.84rem; color:var(--muted); }

.page-hero {
    padding:100px 0 36px; position:relative;
    background:linear-gradient(180deg, rgba(236,253,245,.95), var(--bg));
}
.page-hero .cat { font-size:.78rem; font-weight:600; color:var(--emerald); text-transform:uppercase; letter-spacing:.06em; margin-bottom:.5rem; }
.page-hero h1 { font-family:var(--font-display); font-size:clamp(1.7rem,3.5vw,2.4rem); margin-bottom:.55rem; }
.page-hero .lead { color:var(--muted); font-size:1.05rem; max-width:680px; }
.breadcrumb { padding:12px 0; font-size:.84rem; color:var(--muted); }
.breadcrumb a { color:var(--emerald); }

.article-wrap { padding:1.75rem 0 3.5rem; }
.article {
    background:var(--white); border-radius:var(--radius); padding:2rem 2.25rem;
    border:1px solid rgba(16,185,129,.1); box-shadow:0 4px 24px rgba(0,0,0,.04);
}
.article-hero { margin:0 0 1.75rem; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); }
.article-hero img { width:100%; max-height:400px; object-fit:cover; }
.article-hero figcaption { font-size:.78rem; color:var(--muted); padding:.5rem .75rem; background:#f8fafc; }
.article h2 { font-size:1.35rem; margin:1.75rem 0 .7rem; color:var(--emerald); }
.article h3 { font-size:1.1rem; margin:1.3rem 0 .5rem; }
.article p, .article li { color:#334155; margin-bottom:1rem; font-size:.97rem; }
.article ul, .article ol { padding-left:1.5rem; margin-bottom:1rem; }
.article ul { list-style:disc; }
.article ol { list-style:decimal; }
.article a { font-weight:500; }
.article img { margin:1.2rem auto; border-radius:var(--radius); }

.info-card {
    background:linear-gradient(135deg, #ecfdf5, #e0f2fe);
    border:1px solid rgba(16,185,129,.2); border-radius:var(--radius);
    padding:1.35rem 1.5rem; margin:1.25rem 0 1.75rem;
}
.info-card h2 { font-size:1.15rem; margin-bottom:.75rem; color:var(--emerald); }
.info-card ul { list-style:none; padding:0; }
.info-card li { padding:.3rem 0; }

.trust-bar {
    background:var(--dark); color:#94a3b8; text-align:center;
    padding:.65rem; font-size:.78rem;
}
.trust-bar strong { color:#6ee7b7; }

.ad-slot { padding:1.15rem 0; text-align:center; }
.ad-slot--incontent { margin:1.5rem 0; padding:.85rem 0; background:linear-gradient(180deg,#f8fafc,#f0fdf9); border-radius:var(--radius); }

.faq-section { padding:4rem 0; background:var(--white); }
.faq-list { max-width:740px; margin:0 auto; }
.faq-item {
    border:1px solid #e2e8f0; border-radius:var(--radius); margin-bottom:.75rem;
    padding:1.1rem 1.25rem; background:var(--bg);
}
.faq-item h3 { font-size:.98rem; margin-bottom:.4rem; }
.faq-item p { font-size:.9rem; color:var(--muted); margin:0; }

.related { padding:3rem 0; }
.related h2 { font-size:1.25rem; margin-bottom:1rem; }
.related-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:.8rem; }
.related-link {
    display:block; background:var(--white); padding:.95rem 1.1rem;
    border-radius:var(--radius); border:1px solid #e2e8f0; font-size:.88rem; font-weight:500;
}
.related-link:hover { border-color:var(--emerald); background:#ecfdf5; }

.footer { background:var(--dark); color:#94a3b8; padding:2.5rem 0; font-size:.85rem; }
.footer-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:1.5rem; margin-bottom:1.5rem; }
.footer h4 { color:#e2e8f0; font-size:.9rem; margin-bottom:.6rem; }
.footer a { color:#94a3b8; display:block; margin-bottom:.35rem; font-size:.84rem; }
.footer a:hover { color:#6ee7b7; }
.footer-bottom { text-align:center; padding-top:1.25rem; border-top:1px solid #334155; font-size:.8rem; }

@media(max-width:768px) {
    .nav-links { gap:.6rem; font-size:.8rem; }
    .article { padding:1.2rem 1rem; }
    .hero { padding-top:100px; }
}