/* ==========================================================================
   KhanxTools — Global UI layer  (kt-ui.css)
   Loaded LAST on every page, so it wins the cascade over inline <style>.
   Two jobs:
     1. Contrast — lift muted text/borders to WCAG AA on the dark theme.
     2. Responsiveness — make every page usable from 320px up.
   Nothing here changes the brand palette; it only strengthens it.
   ========================================================================== */

/* ── 1. TOKEN OVERRIDES — contrast ───────────────────────────────────────── */
:root {
  /* Surfaces: slightly lifted so cards separate from the page background */
  --bg-card: rgba(255, 255, 255, 0.062);
  --border: rgba(255, 255, 255, 0.145);

  /* Text ramp — measured against --bg #060B18
     text-1 #F1F5F9 ≈ 16.4:1 | text-2 #C2CFDF ≈ 11.6:1 | text-3 #93A4B8 ≈ 7.1:1 */
  --text-1: #F3F7FC;
  --text-2: #C2CFDF;
  --text-3: #93A4B8;

  /* Accents nudged brighter so they pass on dark surfaces */
  --primary-h: #9AA4FF;
  --accent: #4DE0F5;

  --focus: #9AA4FF;
}

/* Common hard-coded muted greys used across pages, lifted in place. */
[style*="#5E6E82"], [style*="#475569"], [style*="#64748B"] { color: var(--text-3) !important; }

/* Body copy and small print */
body { color: var(--text-1); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
p, li, td, dd, blockquote { color: var(--text-2); }
small, .meta, .blog-meta, .article-meta, .img-caption, .footer-bottom p,
.footer-col ul a, .footer-brand p, .lbl, .fsize, .file-meta, .blog-date {
  color: var(--text-3);
}
.footer-col ul a:hover, .footer-col ul a:focus-visible { color: #FFFFFF; }

/* Headings stay pure white for maximum separation */
h1, h2, h3, h4, h5, h6 { color: #FFFFFF; }

/* Links inside prose need to be visibly links */
.prose a, .article-wrap a, .faq-a a, .info-sec a:not(.btn):not(.tool-card):not(.tool-link-card) {
  color: var(--primary-h);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
.prose a:hover, .article-wrap a:hover { color: #FFFFFF; }

/* Card and input borders */
.tool-card, .why-card, .testi-card, .blog-card, .faq-item, .price-card,
.step-card, .rel-card, .related-card, .tool-link-card, .feat, .drop-zone,
input, textarea, select {
  border-color: var(--border);
}
input, textarea, select {
  color: var(--text-1);
  background: rgba(255, 255, 255, 0.05);
}
input::placeholder, textarea::placeholder { color: #8494A8; opacity: 1; }

/* Secondary buttons: the old 7% fill was near-invisible on --bg-2 */
.btn-secondary {
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.20);
  color: #FFFFFF;
}
.btn-secondary:hover { background: rgba(255, 255, 255, 0.16); }

/* Disabled controls should read as disabled without dropping below 4.5:1 */
.btn[disabled], button[disabled] { opacity: 0.55; cursor: not-allowed; }

/* Badges / pills */
.badge { background: rgba(99, 102, 241, 0.20); border-color: rgba(99, 102, 241, 0.45); color: #B9C0FF; }
.badge-accent { background: rgba(34, 211, 238, 0.16); border-color: rgba(34, 211, 238, 0.40); color: #7FEAFA; }

/* Selection + focus: one visible ring everywhere, keyboard only */
::selection { background: rgba(99, 102, 241, 0.45); color: #fff; }
a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: 6px;
}
input:focus, textarea:focus, select:focus { border-color: var(--primary-h); }

/* Skip the noise overlay on small screens — it costs paint time and dulls text */
@media (max-width: 640px) { body::before { opacity: 0.22; } }

/* Honour the OS high-contrast preference */
@media (prefers-contrast: more) {
  :root { --text-2: #E4ECF6; --text-3: #BDC9D8; --border: rgba(255, 255, 255, 0.28); }
}


/* ── 2. UNIVERSAL RESPONSIVE SAFETY ──────────────────────────────────────── */
html, body { max-width: 100%; overflow-x: hidden; }

img, video, canvas, svg, iframe { max-width: 100%; height: auto; }
canvas { display: block; }

/* Long words, URLs and file names must never widen the page */
h1, h2, h3, h4, p, li, a, td, .fname, .pdf-name, .tool-card h3, .blog-card h3 {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Code and tables scroll instead of stretching */
pre { overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; }
table { display: block; width: 100%; overflow-x: auto; border-collapse: collapse; }

/* Respect notches and home indicators */
.container { padding-left: max(20px, env(safe-area-inset-left)); padding-right: max(20px, env(safe-area-inset-right)); }
footer { padding-bottom: max(32px, env(safe-area-inset-bottom)); }

/* Touch targets: 44px minimum on anything tappable */
@media (pointer: coarse) {
  .btn, .nav-links a, .mobile-nav a, .footer-col ul a, .faq-q,
  button, .tool-pill, .rem-btn, .pdf-remove, .nav-hamburger {
    min-height: 44px;
  }
  .btn, button { touch-action: manipulation; }
}


/* ── 3. BREAKPOINTS ──────────────────────────────────────────────────────── */

/* ≤ 1024px — laptops and large tablets */
@media (max-width: 1024px) {
  .container { max-width: 100%; }
  .footer-grid { gap: 32px; }
  .security-card { gap: 32px; padding: 40px; }
  .why-section, .how-section, .testi-section, .blog-section,
  .faq-section, .cta-section, .pricing-section { padding: 72px 0; }
}

/* ≤ 820px — tablets and large phones */
@media (max-width: 820px) {
  html { font-size: 15.5px; }

  .nav-inner { height: 60px; }
  .mobile-nav { inset: 60px 0 0; overflow-y: auto; }

  .hero { padding: 72px 0 56px; }
  .hero h1 { font-size: clamp(2rem, 7vw, 2.9rem); }
  .hero-sub { font-size: 1.02rem; }
  .hero-stats { gap: 28px 36px; margin-top: 44px; }

  /* Grids that were fixed-column collapse to two */
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .feats-grid, .steps-grid, .rel-grid, .why-grid,
  .blog-grid, .testi-grid { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
  ul.tools-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }

  .article-wrap, .prose { max-width: 100%; }
  .tool-hero { padding: 56px 0 32px; }
  .work-area { padding: 0 4px; }

  .search-results-grid { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
  .filter-tabs { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 6px; scrollbar-width: none; }
  .filter-tabs::-webkit-scrollbar { display: none; }
}

/* ≤ 640px — phones */
@media (max-width: 640px) {
  html { font-size: 15px; }

  .container { padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); }

  /* Sections tighten so the page isn't 80% empty space */
  section, .why-section, .how-section, .testi-section, .blog-section,
  .faq-section, .cta-section, .pricing-section, .tools-section, .info-sec, .info-sec-alt {
    padding-top: 48px;
    padding-bottom: 48px;
  }
  .hero { padding: 52px 0 40px; }
  .section-header { margin-bottom: 36px; }

  .hero-ctas { flex-direction: column; align-items: stretch; gap: 10px; }
  .hero-ctas .btn { width: 100%; }
  .btn-lg { padding: 13px 22px; font-size: 0.95rem; }

  .hero-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
  .hero-stat .num { font-size: 1.35rem; }

  /* One column for everything card-shaped */
  .footer-grid, .feats-grid, .steps-grid, .rel-grid, .why-grid,
  .blog-grid, .testi-grid, .pricing-grid, .how-steps { grid-template-columns: 1fr; }
  ul.tools-grid, .search-results-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .tool-card { padding: 20px 16px; border-radius: 18px; }
  .tool-card .arrow { display: none; }
  .tool-card p { font-size: 0.76rem; }

  .how-step { padding: 0 0 28px; }
  .security-card { padding: 26px 20px; gap: 24px; }
  .security-text h2 { font-size: 1.4rem; }
  .cta-card { padding: 40px 20px; }
  .price-card { padding: 26px 20px; }
  .plan-price { font-size: 2.4rem; }

  .faq-q { padding: 16px 18px; font-size: 0.92rem; }
  .faq-a { padding: 0 18px 18px; }

  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 14px; }

  /* Tool pages */
  .tool-hero { padding: 40px 0 24px; }
  .tool-icon-lg { width: 56px; height: 56px; }
  .drop-zone { padding: 32px 16px; border-radius: 16px; }
  .drop-icon { width: 48px; height: 48px; }
  .tool-actions { flex-direction: column; }
  .tool-actions .btn { width: 100%; }
  .tool-formats, .tool-pill { font-size: 0.72rem; }
  .file-info-row, .pdf-item { flex-wrap: wrap; gap: 8px; }
  .fname, .pdf-name { max-width: 100%; }
  .opt-row, .options-row { flex-direction: column; align-items: stretch; }

  /* Blog / article pages */
  .article-wrap { padding: 0; }
  .prose { font-size: 1rem; line-height: 1.75; }
  .prose h2 { font-size: 1.35rem; margin-top: 32px; }
  .prose h3 { font-size: 1.1rem; }
  .article-img-wrap img { border-radius: 12px; }
  .article-meta { flex-wrap: wrap; gap: 8px; }
}

/* ≤ 420px — small phones */
@media (max-width: 420px) {
  ul.tools-grid, .search-results-grid { grid-template-columns: 1fr; }
  .hero-stats { grid-template-columns: 1fr 1fr; gap: 16px; }
  .plan-price { font-size: 2.1rem; }
  .cta-card h2, .section-header h2 { font-size: 1.5rem; }
}

/* Landscape phones: don't let a full-height mobile menu trap the user */
@media (max-height: 460px) and (orientation: landscape) {
  .mobile-nav { overflow-y: auto; padding-bottom: 32px; }
}

/* ── 4. PRINT ────────────────────────────────────────────────────────────── */
@media print {
  .nav, .mobile-nav, footer, #_ktBadge, #_ktBadgeTop, #_ktUOvr { display: none !important; }
  body { background: #fff; color: #000; }
  .prose, p, li { color: #000; }
}

/* ── 5. TOOL CARD ICON COLOURS ───────────────────────────────────────────────
   index.html markup uses t-amb / t-cyan / t-grn / t-ind / t-rose, but only
   t-img / t-mrg / t-cmp / t-org / t-wrd were ever defined in its stylesheet.
   The rest fell through to no background and inherited white, which is why
   half the grid looked flat. Defined here so every page gets them. */
.tool-icon.t-ind,  .tool-icon.indigo { background: rgba(99, 102, 241, 0.16);  color: #9AA4FF; }
.tool-icon.t-cyan, .tool-icon.cyan   { background: rgba(34, 211, 238, 0.14);  color: #4DE0F5; }
.tool-icon.t-grn,  .tool-icon.green  { background: rgba(52, 211, 153, 0.14);  color: #34D399; }
.tool-icon.t-amb,  .tool-icon.amber  { background: rgba(251, 191, 36, 0.14);  color: #FBBF24; }
.tool-icon.t-rose, .tool-icon.rose   { background: rgba(251, 113, 133, 0.14); color: #FB7185; }
.tool-icon.t-vio,  .tool-icon.violet { background: rgba(167, 139, 250, 0.15);  color: #C4B5FD; }
.tool-icon.t-sky,  .tool-icon.sky    { background: rgba(56, 189, 248, 0.14);  color: #7DD3FC; }

/* Any icon that still has no colour class gets the house indigo rather than
   a bare white glyph on a transparent square. */
.tool-card .tool-icon:not([class*="t-"]):not([style*="background"]):not(.indigo):not(.cyan):not(.green):not(.amber):not(.rose) {
  background: rgba(99, 102, 241, 0.16);
  color: #9AA4FF;
}

/* ── 6. LANGUAGE SWITCHER ────────────────────────────────────────────────────
   It shipped as a white box with a bright indigo border floating over a dark
   page, and it sat on top of the last card's text. Themed and moved out of
   the way; on phones it docks bottom-centre-right above the browser chrome. */
.lang-switcher {
  background: #0C1428 !important;
  border: 1px solid rgba(154, 164, 255, 0.42) !important;
  border-radius: 100px !important;
  padding: 7px 12px !important;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.5) !important;
  bottom: 20px !important;
  right: 16px !important;
  z-index: 8999 !important;
}
.lang-switcher select { color: var(--text-1) !important; font-family: inherit; }
.lang-switcher select option { background: #0C1428; color: #F3F7FC; }

/* Keep floating widgets from covering the end of the page */
body { padding-bottom: 0; }
@media (max-width: 640px) {
  footer { padding-bottom: max(96px, calc(72px + env(safe-area-inset-bottom))); }
  .lang-switcher { bottom: 14px !important; right: 12px !important; padding: 6px 10px !important; }
}

/* ── 7. HEADER LANGUAGE SWITCHER ─────────────────────────────────────────────
   A native <select> laid transparently over a styled pill: keeps the OS
   picker (which is what people expect on a phone) without its default chrome. */
.kt-lang {
  order: -1;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px 6px 11px;
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: var(--text-1);
  font-family: var(--font-body), Inter, system-ui, sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
  white-space: nowrap;
}
.kt-lang:hover { background: rgba(255, 255, 255, 0.13); border-color: rgba(154, 164, 255, 0.5); }
.kt-lang:focus-within { outline: 2px solid var(--focus); outline-offset: 2px; }
.kt-lang-flag { font-size: 0.95rem; line-height: 1; }
.kt-lang-code { letter-spacing: 0.04em; }
.kt-lang-caret { color: var(--text-3); flex-shrink: 0; }
.kt-lang select {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  border: none;
  -webkit-appearance: none;
  appearance: none;
}
.kt-lang select option { background: #0C1428; color: #F3F7FC; font-weight: 500; }

/* Compact auth buttons — small and fully rounded, matching the pill */
#ktSignupBtn {
  padding: 7px 14px !important;
  font-size: 0.78rem !important;
  border-radius: 100px !important;
  line-height: 1.2 !important;
}
#ktLoginBtn {
  padding: 7px 10px !important;
  font-size: 0.78rem !important;
  border-radius: 100px !important;
  line-height: 1.2 !important;
}
.nav-actions { gap: 8px; }

@media (max-width: 640px) {
  /* Flag only — the code and caret cost width the nav doesn't have */
  .kt-lang { padding: 6px 9px; gap: 0; }
  .kt-lang-code, .kt-lang-caret { display: none; }
  #ktSignupBtn { padding: 6px 12px !important; font-size: 0.74rem !important; }
  .nav-actions { gap: 6px; }
  .nav-inner { gap: 8px; }
}
@media (max-width: 380px) {
  #ktSignupBtn { padding: 6px 10px !important; font-size: 0.7rem !important; }
}

/* The floating box is gone; drop the reserved space it needed */
@media (max-width: 640px) {
  footer { padding-bottom: max(72px, calc(56px + env(safe-area-inset-bottom))); }
}

/* Not every page defined .sr-only, and the switcher's label relies on it —
   without this the words "Choose language" render inside the pill. */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* ── 8. HEADER WORDMARK ──────────────────────────────────────────────────────
   Was plain Sora 700 at default tracking, with a stray space between the mark
   and the text, and an indigo gradient square sitting behind a logo PNG that
   already has its own artwork. Rebuilt as a proper lockup. */
.nav-logo {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-display), Sora, sans-serif;
  font-size: 1.12rem;
  font-weight: 800;
  letter-spacing: -0.032em;   /* optical tracking — Sora sets loose by default */
  line-height: 1;
  color: #FFFFFF;
  text-decoration: none;
  transition: opacity 0.2s ease;
}
.nav-logo:hover { opacity: 0.82; }

/* A stray `.nav-logo { margin-bottom: 16px }` meant for the footer was pushing
   the header lockup off the nav's vertical centre on every page. */
nav .nav-logo, header .nav-logo { margin-bottom: 0; }

/* No box behind the mark — the PNG is the mark */
.nav-logo .kt-mark {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  box-shadow: none;
  border-radius: 9px;
  overflow: hidden;
}
.nav-logo .kt-mark img {
  width: 34px !important;
  height: 34px !important;
  object-fit: contain;
  display: block;
}

.kt-word { display: inline-block; white-space: nowrap; }

/* "Tools" picks up the brand gradient; "Khanx" stays solid white so the
   lockup still reads at small sizes. */
.kt-word-alt { color: var(--primary-h); }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .kt-word-alt {
    background: linear-gradient(135deg, #9AA4FF 0%, #C4B5FD 55%, #4DE0F5 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
  }
}

/* Footer lockup: same shape, quieter */
footer .nav-logo { font-size: 1.05rem; margin-bottom: 16px; }

@media (max-width: 640px) {
  .nav-logo { font-size: 1.02rem; gap: 8px; letter-spacing: -0.034em; }
  .nav-logo .kt-mark { width: 30px; height: 30px; }
  .nav-logo .kt-mark img { width: 30px !important; height: 30px !important; }
}
@media (max-width: 380px) {
  .nav-logo { font-size: 0.95rem; gap: 7px; }
  .nav-logo .kt-mark { width: 28px; height: 28px; }
  .nav-logo .kt-mark img { width: 28px !important; height: 28px !important; }
}

/* Windows high-contrast / forced colours: gradient text disappears there */
@media (forced-colors: active) {
  .kt-word-alt { -webkit-text-fill-color: currentColor; color: currentColor; background: none; }
}

/* ── 9. HEADER TAGLINE ───────────────────────────────────────────────────────
   "Smart Tools. Faster Work." sits under the wordmark. Stacked in a column so
   the mark stays vertically centred against the two lines as a unit. */
.kt-lockup {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 2px;
  min-width: 0;
}
.kt-tagline {
  font-family: var(--font-body), Inter, system-ui, sans-serif;
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.02em;   /* opens up at small size — the opposite of the wordmark */
  line-height: 1.1;
  color: var(--text-3);
  white-space: nowrap;
  text-transform: none;
}
.nav-logo:hover .kt-tagline { color: var(--text-2); }

/* Slightly tighter wordmark now that it's the top line of a two-line lockup */
.nav-logo { align-items: center; }
.kt-word { line-height: 1.05; }

/* The tagline is the first thing to go when the nav gets tight — the logo and
   the controls matter more than a strapline on a 360px screen. */
@media (max-width: 560px) {
  .kt-tagline { display: none; }
}

/* Footer keeps it, with room to breathe */
footer .kt-tagline { font-size: 0.68rem; display: block; }