/* Urdu2Korean redesign — clean, AdSense-friendly, mobile-first (2026-09-24) */
:root{
  --u2k-green:#24b273;
  --u2k-ink:#0f172a;
  --u2k-muted:#64748b;
  --u2k-line:#e2e8f0;
  --u2k-bg:#ffffff;
  --u2k-soft:#f8fafc;
  --u2k-article:740px;
  --u2k-sidebar:300px;
  --u2k-radius:12px;
  --u2k-shadow:0 1px 2px rgba(15,23,42,.06);
}
html{scroll-behavior:smooth}
body{font-family:system-ui,-apple-system,"Segoe UI",Roboto,Inter,Arial,sans-serif;color:var(--u2k-ink);background:var(--u2k-bg);line-height:1.65}
body.lang-ur,body.lang-ur .urdu-text,[lang="ur"] .urdu-text{
  font-family:"Noto Nastaliq Urdu","Jameel Noori Nastaleeq",system-ui,sans-serif;
  line-height:2;
}
/* Skip / kill preloader flash for speed */
#preloader{display:none!important}

/* ===== Clean header ===== */
.site-header{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.96);backdrop-filter:saturate(1.2) blur(8px);border-bottom:1px solid var(--u2k-line);box-shadow:none}
.nav-wrap{max-width:1120px;margin:0 auto;height:56px;padding:0 1rem;display:flex;align-items:center;justify-content:space-between;gap:1rem}
@media(min-width:768px){.nav-wrap{height:60px;padding:0 1.25rem}}
.u2k-brand-logo{display:flex;align-items:center;gap:.55rem;text-decoration:none;color:var(--u2k-ink)}
.u2k-brand-logo .logo-icon{width:32px;height:32px;flex-shrink:0}
.u2k-brand-logo .logo-icon svg,.u2k-brand-logo .logo-svg{width:32px;height:32px;display:block}
.u2k-brand-logo .logo-text{font-weight:800;font-size:1.05rem;letter-spacing:-.02em}
.u2k-brand-logo .text-2{color:var(--u2k-green)}
.mobile-quick-links{display:none!important} /* clutter removed */
.mobile-controls{display:flex;align-items:center;gap:.5rem}
.menu-arrow-toggle{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:10px;border:1px solid var(--u2k-line);background:#fff;cursor:pointer;color:var(--u2k-ink)}
@media(min-width:900px){.menu-arrow-toggle{display:none}}
.nav.unique-nav,.nav{display:none;position:fixed;inset:56px 0 auto 0;background:#fff;border-bottom:1px solid var(--u2k-line);padding:.75rem 1rem 1rem;z-index:99;max-height:calc(100vh - 56px);overflow:auto}
.nav-toggle:checked ~ .nav,.nav-toggle:checked ~ nav.nav{display:block}
@media(min-width:900px){
  .nav.unique-nav,.nav{display:block!important;position:static;inset:auto;border:0;padding:0;max-height:none;overflow:visible;background:transparent}
}
.nav-menu-inner{display:flex;flex-direction:column;gap:.25rem}
@media(min-width:900px){.nav-menu-inner{flex-direction:row;align-items:center;gap:.15rem}}
.nav-menu-inner > a{
  display:flex;align-items:center;gap:.5rem;
  padding:.55rem .7rem;border-radius:8px;color:#334155;font-weight:600;font-size:.9rem;
  text-decoration:none;border:0!important;background:transparent!important;box-shadow:none!important
}
.nav-menu-inner > a:hover{background:var(--u2k-soft);color:var(--u2k-ink);text-decoration:none}
.nav-menu-inner .nav-icon-wrap{display:none!important} /* remove colored icon boxes */
.nav-menu-inner > a[href*="mskoreanacademy"]{
  background:var(--u2k-green)!important;color:#fff!important;font-weight:700!important;
  margin-inline-start:.35rem
}
.nav-menu-inner > a[href*="mskoreanacademy"]:hover{filter:brightness(.95)}
.u2k-lang-toggle{margin-inline-start:.25rem;display:inline-flex!important;align-items:center;gap:.2rem;padding:.2rem;border:1px solid var(--u2k-line);border-radius:999px;background:var(--u2k-soft)}
.u2k-lang-toggle a{padding:.25rem .55rem!important;border-radius:999px;font-size:.7rem;font-weight:800;text-decoration:none}
.u2k-search{display:none}
@media(min-width:900px){
  .u2k-search{display:flex;align-items:center;margin-inline-start:.35rem}
  .u2k-search form{display:flex;align-items:center;border:1px solid var(--u2k-line);border-radius:999px;background:#fff;overflow:hidden}
  .u2k-search input{border:0;outline:0;padding:.4rem .75rem;width:9.5rem;font-size:.8rem;background:transparent}
  .u2k-search button{border:0;background:transparent;padding:.4rem .65rem;cursor:pointer;color:var(--u2k-muted)}
}

/* ===== Page shells ===== */
.u2k-page{max-width:1120px;margin:0 auto;padding:1rem}
.u2k-layout{display:grid;grid-template-columns:1fr;gap:1.5rem;align-items:start}
@media(min-width:1024px){
  .u2k-layout.has-sidebar{grid-template-columns:minmax(0,var(--u2k-article)) var(--u2k-sidebar);justify-content:center;gap:2rem}
}
.u2k-article,.u2k-content-col{max-width:var(--u2k-article);width:100%;margin:0 auto}
.u2k-sidebar{
  display:none
}
@media(min-width:1024px){
  .u2k-sidebar{display:block;position:sticky;top:76px}
}
.u2k-sidebar .ad-container{margin:0 0 1rem}

/* ===== Clean hero (home + pages) ===== */
.u2k-hero-simple{
  padding:1.75rem 1rem 1.25rem;text-align:center;background:linear-gradient(180deg,#f0fdf6 0%,#fff 70%);
  border-bottom:1px solid var(--u2k-line)
}
.u2k-hero-simple h1{font-size:clamp(1.75rem,4vw,2.5rem);line-height:1.2;margin:0 0 .75rem;letter-spacing:-.02em}
.u2k-hero-simple p{max-width:36rem;margin:0 auto 1.25rem;color:var(--u2k-muted);font-size:1.05rem}
.u2k-hero-actions{display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center}
.u2k-btn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;padding:.7rem 1.15rem;border-radius:10px;font-weight:700;font-size:.95rem;text-decoration:none;border:1px solid transparent}
.u2k-btn-primary{background:var(--u2k-green);color:#fff}
.u2k-btn-primary:hover{filter:brightness(.95);text-decoration:none;color:#fff}
.u2k-btn-ghost{background:#fff;border-color:var(--u2k-line);color:var(--u2k-ink)}
.u2k-btn-ghost:hover{background:var(--u2k-soft);text-decoration:none}

/* Slim page hero override */
header.relative.overflow-hidden.px-4{
  padding:1.25rem 1rem 1.5rem!important;margin-bottom:1rem!important;border-radius:0!important;
  background:#fff!important;border-bottom:1px solid var(--u2k-line)
}
header.relative.overflow-hidden.px-4 > .absolute{display:none!important}
header.relative.overflow-hidden.px-4 h1{font-size:clamp(1.6rem,3.5vw,2.25rem)!important;margin-bottom:.5rem!important}
header.relative.overflow-hidden.px-4 .inline-flex.items-center.gap-2.px-4{display:none!important} /* Interactive Tool chip */

/* Breadcrumbs */
.u2k-crumbs{display:flex;flex-wrap:wrap;gap:.35rem;align-items:center;font-size:.75rem;color:var(--u2k-muted);margin:0 0 1rem}
.u2k-crumbs a{color:var(--u2k-muted);text-decoration:none}
.u2k-crumbs a:hover{color:var(--u2k-green)}
.u2k-crumbs span[aria-hidden]{opacity:.5}

/* ===== Homepage tools — flat list/grid ===== */
.u2k-section{padding:2rem 1rem}
.u2k-section-head{max-width:40rem;margin:0 auto 1.25rem;text-align:center}
.u2k-section-head h2{font-size:clamp(1.35rem,3vw,1.85rem);margin:0 0 .4rem;letter-spacing:-.02em}
.u2k-section-head p{margin:0;color:var(--u2k-muted);font-size:.95rem}
.u2k-tool-grid{display:grid;grid-template-columns:1fr;gap:.65rem;max-width:900px;margin:0 auto}
@media(min-width:640px){.u2k-tool-grid{grid-template-columns:1fr 1fr}}
@media(min-width:960px){.u2k-tool-grid{grid-template-columns:1fr 1fr 1fr}}
.u2k-tool-link{
  display:flex;align-items:flex-start;gap:.75rem;padding:.9rem 1rem;
  border:1px solid var(--u2k-line);border-radius:var(--u2k-radius);background:#fff;
  text-decoration:none;color:inherit;transition:border-color .15s,box-shadow .15s
}
.u2k-tool-link:hover{border-color:#86efac;box-shadow:var(--u2k-shadow);text-decoration:none}
.u2k-tool-ico{
  width:2.25rem;height:2.25rem;border-radius:8px;display:flex;align-items:center;justify-content:center;
  font-size:1rem;font-weight:800;flex-shrink:0;background:#ecfdf5;color:#047857
}
.u2k-tool-link h3{margin:0 0 .2rem;font-size:.95rem;font-weight:700;line-height:1.3}
.u2k-tool-link p{margin:0;font-size:.8rem;color:var(--u2k-muted);line-height:1.4}
.u2k-filters{display:flex;flex-wrap:wrap;gap:.4rem;justify-content:center;margin:0 0 1rem}
.u2k-filters button{
  border:1px solid var(--u2k-line);background:#fff;border-radius:999px;padding:.35rem .8rem;
  font-size:.75rem;font-weight:700;color:#475569;cursor:pointer
}
.u2k-filters button.active,.u2k-filters button:hover{background:var(--u2k-ink);color:#fff;border-color:var(--u2k-ink)}

/* Soften old heavy tool cards when redesign class present */
body.u2k-redesign .tool-item-card{
  border-radius:12px!important;padding:1rem!important;box-shadow:none!important;
  border:1px solid var(--u2k-line)!important;background:#fff!important
}
body.u2k-redesign .tool-item-card:hover{transform:none!important;box-shadow:var(--u2k-shadow)!important}

/* LMS strip — compact */
.u2k-lms-strip{
  margin:1.5rem auto;max-width:900px;padding:1.25rem 1.25rem;border-radius:var(--u2k-radius);
  background:#0f172a;color:#fff;display:flex;flex-wrap:wrap;gap:1rem;align-items:center;justify-content:space-between
}
.u2k-lms-strip h2{margin:0 0 .35rem;font-size:1.15rem}
.u2k-lms-strip p{margin:0;color:#cbd5e1;font-size:.9rem;max-width:36rem}

/* Related */
.u2k-related{margin:2rem auto 1rem;max-width:var(--u2k-article);padding:0 1rem}
.u2k-related h2{font-size:1.1rem;margin:0 0 .75rem}
.u2k-related-grid{display:grid;grid-template-columns:1fr;gap:.5rem}
@media(min-width:560px){.u2k-related-grid{grid-template-columns:1fr 1fr}}
.u2k-related a{
  display:block;padding:.75rem .9rem;border:1px solid var(--u2k-line);border-radius:10px;
  text-decoration:none;color:inherit;font-weight:600;font-size:.9rem
}
.u2k-related a:hover{border-color:#86efac;background:#f0fdf4}
.u2k-related a span{display:block;font-weight:500;color:var(--u2k-muted);font-size:.75rem;margin-top:.2rem}

/* Ads — quieter chrome, reserved min space to limit CLS */
.ad-container{my:0}
.ad-container .u2k-ad-frame{
  border:1px solid var(--u2k-line)!important;border-radius:10px!important;background:#fafafa!important;
  box-shadow:none!important;padding:.5rem!important;max-width:100%
}
.u2k-ad-label{font-size:10px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;color:#94a3b8;text-align:center;margin-bottom:.35rem;user-select:none}
ins.adsbygoogle{display:block;min-height:90px}

/* Footer simplify a bit */
.u2k-footer{background:#0f172a!important}
.footer-badge{display:none!important}

/* Dark homepage hero override when redesign home used */
.u2k-home-legacy-hide{display:none!important}

/* Slim top promo bar */
body.u2k-redesign .bg-slate-950.border-b { padding-top:0.35rem!important; padding-bottom:0.35rem!important; font-size:12px; }
body.u2k-redesign .bg-slate-950 .animate-pulse { display:none; }

/* WhatsApp float: keep but less aggressive */
.whatsapp-float{bottom:4.5rem}

/* Ensure article prose readable */
.u2k-content-col p,.u2k-content-col li{font-size:1.05rem;line-height:1.7;color:#334155}
.u2k-content-col h2{font-size:1.35rem;margin-top:1.5rem}

/* Homepage H1: EPS-TOPIK on its own line (esp. mobile UR) */
.u2k-home-h1{display:flex;flex-direction:column;align-items:center;gap:.35rem;line-height:1.25}
.u2k-home-h1-main{display:block}
.u2k-home-h1-eps{display:block;font-size:.85em;font-weight:800;letter-spacing:.02em}
@media(min-width:640px){
  body:not(.lang-ur) .u2k-home-h1{flex-direction:row;flex-wrap:wrap;justify-content:center;gap:.4rem .55rem}
  body:not(.lang-ur) .u2k-home-h1-eps{font-size:1em}
}
body.lang-ur .u2k-home-h1{gap:.5rem}
body.lang-ur .u2k-home-h1-eps{font-size:.72em;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif!important;line-height:1.3}
.u2k-article-body{max-width:740px;margin:0 auto;padding:0 1rem 2rem;font-size:1.05rem;line-height:1.75;color:#334155}
.u2k-article-body h1{font-size:clamp(1.6rem,3.5vw,2.15rem);color:#0f172a;margin:0 0 .75rem;letter-spacing:-.02em}
.u2k-article-body h2{font-size:1.25rem;color:#0f172a;margin:1.75rem 0 .65rem;font-weight:800}
.u2k-article-body h3{font-size:1.05rem;color:#0f172a;margin:1.25rem 0 .4rem;font-weight:700}
.u2k-article-body p{margin:0 0 1rem}
.u2k-article-body ul{margin:0 0 1.15rem;padding-inline-start:1.2rem}
.u2k-article-body li{margin:.35rem 0}
.u2k-callout{margin:1.25rem 0;padding:.9rem 1rem;border:1px solid #e2e8f0;border-radius:10px;background:#f8fafc}
.u2k-callout strong{display:block;margin-bottom:.35rem;color:#0f172a}
.u2k-article-body .u2k-cta{display:inline-flex;margin:.25rem .5rem .75rem 0;padding:.65rem 1rem;border-radius:10px;background:#24b273;color:#fff;font-weight:700;text-decoration:none}
.u2k-article-body .u2k-cta.secondary{background:#0f172a}
.u2k-crumbs.urdu-text,.u2k-article-body .u2k-crumbs{font-family:inherit}
body.lang-ur .footer-heading{text-transform:none;letter-spacing:0;font-size:0.8rem}
body.lang-ur .footer-link{font-size:0.9rem}