/* =====================================================================
   MEROKALAM BLOG — POST TEMPLATE REDESIGN
   ---------------------------------------------------------------------
   Layered on top of the existing site-wide stylesheets (main, mk-shared,
   blog.min.css) rather than replacing them, so the rest of merokalam.com
   is untouched. This file only reshapes the blog *post* experience.

   This is the "master template" stylesheet: a new article should never
   need to define its own font-size, H2 color, box style, or width.
   Everything here is a shared rule; a post supplies only content and
   front-matter variables (see src/posts/*.njk).
   ===================================================================== */

/* Safety net: keep the post typeface correct even if a shared stylesheet
   ever fails to load — matches the Mukta font used site-wide. */
body { font-family: 'Mukta', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }

/* Reading progress bar -------------------------------------------------*/
.mk-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0%; background: linear-gradient(90deg, var(--mk-blue), var(--mk-cyan)); z-index: 1000; transition: width .1s linear; }

/* Hero — trimmed ~20% vertically so the answer sits higher above the fold */
.blog-hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #0f172a 0%, #1e3a5f 55%, #1a3355 100%);
  padding: 2.7rem 1.5rem 2.35rem;
}
.blog-hero::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 15% 0%, rgba(96,165,250,.16) 0%, transparent 55%),
              radial-gradient(ellipse at 85% 100%, rgba(8,145,178,.14) 0%, transparent 55%);
  pointer-events: none;
}
.blog-hero-inner { position: relative; max-width: 880px; margin: 0 auto; text-align: left; }
.blog-hero-badge {
  display: none;
  /* Removed site-wide per request — was the small uppercase pill (e.g.
     "MONEY GUIDE", "GUIDE") above the H1 in every post's hero. Hiding it
     here (one shared stylesheet loaded on every blog post) instead of
     stripping the markup from 179 individual post files or the shared
     layout — same effect, far smaller/safer change, and it's a one-line
     revert if ever wanted back. */
}
.blog-hero h1 {
  font-size: clamp(1.65rem, 3.4vw, 2.4rem);
  font-weight: 800; line-height: 1.16; letter-spacing: -.01em;
  color: #fff !important; -webkit-text-fill-color: #fff !important;
  margin: 0 0 .7rem;
}
.blog-hero p {
  color: rgba(255,255,255,.86) !important;
  font-size: clamp(.93rem, 1.3vw, 1.02rem);
  line-height: 1.65; margin: 0 0 1.05rem;
  /* The site's older blog.min.css (loaded before this file) sets its own
     .blog-hero p { max-width:560px; margin-left/right:auto } — same
     specificity, so a property this rule doesn't redeclare would still
     resolve to that old value. Override both explicitly instead of just
     omitting them, so the paragraph actually spans the same width as h1. */
  max-width: none; margin-left: 0; margin-right: 0;
}
.blog-hero-meta { display: flex; flex-wrap: wrap; gap: .55rem 1.1rem; }
.blog-hero-meta span {
  font-size: .8rem; font-weight: 700; color: rgba(255,255,255,.72);
  display: inline-flex; align-items: center; gap: .4rem;
}
.blog-hero-meta span:not(:last-child)::after { content: '•'; margin-left: 1.1rem; color: rgba(255,255,255,.3); }

/* Trust line — "Sources checked: ..." for legal/financial/government guides */
.blog-hero-verified {
  display: flex; align-items: center; gap: .4rem; margin-top: .7rem;
  font-size: .78rem; font-weight: 700; color: #86efac;
}
.blog-hero-verified svg { width: 14px; height: 14px; flex: 0 0 auto; }

/* Breadcrumb polish --------------------------------------------------*/
.blog-bc { font-size: .82rem; padding: .85rem 1.5rem; }

/* Two-column layout: sticky TOC + article -----------------------------*/
/* Sidebar ~220px, gap ~36px, article capped ~800px — a long line of text
   is hard to read, so the article column never grows to fill a wide
   monitor; the composition just centers with a bit more breathing room
   on very wide screens instead of stretching. */
.blog-layout {
  max-width: 1200px; margin: 0 auto; padding: 2rem 1.5rem 0;
  display: grid; grid-template-columns: 220px minmax(0,800px); gap: 2.25rem; align-items: start;
  justify-content: center;
}
/* min-width: 0 overrides the grid item's default min-width: auto. Without
   it, this column refuses to shrink below the intrinsic width of its
   widest content (a long TOC link, a wide table) — invisible on desktop
   where the 800px track has room, but on mobile (grid collapses to a
   single 1fr column below 1000px) that same intrinsic width blows the
   whole column past the viewport, pushing every paragraph off both
   edges. This one property is the fix for that. */
.blog-layout .blog-wrap { max-width: none; margin: 0; padding: 0; min-width: 0; }
.blog-toc-mobile nav { min-width: 0; }

.blog-toc { position: sticky; top: 90px; display: none; align-self: start; }
.blog-toc-inner {
  background: #fff; border: 1px solid var(--mk-border); border-radius: var(--mk-radius-md);
  padding: 1.1rem 1.2rem; max-height: calc(100vh - 110px); overflow-y: auto;
}
[data-theme="dark"] .blog-toc-inner { background: #0f172a; }
.blog-toc-title { font-size: .72rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; color: var(--mk-muted); margin: 0 0 .7rem; }
.blog-toc-inner nav, .blog-toc-mobile nav {
  display: flex; flex-direction: column; align-items: stretch; gap: .05rem;
  /* Without this, the sitewide "nav:not(.bc){align-items:center}" rule in
     mk-shared.min.css centers each TOC link instead of stretching it full
     width, so shorter one-line entries render visibly indented next to
     longer ones. This restores left-aligned, full-width TOC links. */
}
.blog-toc-inner a, .blog-toc-mobile a {
  font-size: .82rem; font-weight: 600; color: var(--mk-body); text-decoration: none;
  padding: .42rem .6rem; border-radius: .5rem; border-left: 2px solid transparent;
  line-height: 1.4; transition: background .12s, color .12s, border-color .12s;
}
.blog-toc-inner a:hover, .blog-toc-mobile a:hover { background: var(--mk-bg-soft); color: var(--mk-blue); }
.blog-toc-inner a.is-active, .blog-toc-mobile a.is-active { color: var(--mk-blue); background: rgba(37,99,235,.08); border-left-color: var(--mk-blue); font-weight: 700; }

/* Mobile "On this page" — a collapsible <details> disclosure instead of
   either a permanent sidebar (no room) or a flat pill row (loses meaning
   on a 4000-word guide). Native <details>/<summary>: no JS required. */
.blog-toc-mobile { display: block; margin: 0 0 1.3rem; border: 1px solid var(--mk-border); border-radius: var(--mk-radius-md); background: #fff; }
[data-theme="dark"] .blog-toc-mobile { background: #0f172a; }
.blog-toc-mobile summary {
  display: flex; align-items: center; justify-content: space-between; gap: .6rem;
  padding: .85rem 1rem; font-size: .86rem; font-weight: 700; color: var(--mk-ink);
  cursor: pointer; list-style: none; user-select: none;
}
.blog-toc-mobile summary::-webkit-details-marker { display: none; }
.blog-toc-mobile summary::before { content: '☰'; font-size: .8em; color: var(--mk-muted); }
.blog-toc-mobile summary::after {
  content: ''; margin-left: auto; width: 18px; height: 18px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center; background-size: 14px;
  transition: transform .15s ease;
}
.blog-toc-mobile[open] summary::after { transform: rotate(180deg); }
.blog-toc-mobile nav { padding: 0 .7rem .8rem; }
.blog-toc-mobile nav a { padding: .55rem .6rem; border-radius: .5rem; }

/* The sidebar and the mobile disclosure are two faces of the same TOC —
   tied to one breakpoint so they can never both show at once. */
@media (min-width: 1000px) {
  .blog-toc { display: block; }
  .blog-toc-mobile { display: none; }
}

/* Flagship Tools sidebar --------------------------------------------------
   A right-side discovery rail that replaces the left "On this page" TOC on
   migrated posts, so a blog visitor immediately sees that Merokalam is a
   full tools platform, not just an article. Opt-in via .has-flagship on
   .blog-layout: every post that still ships the old <aside class="blog-toc">
   is completely untouched by any of this (.blog-layout's own default
   grid-template-columns is unchanged), so this can be rolled out one post
   at a time. Sticky/breakpoint mechanics mirror .blog-toc above for the
   same "one sidebar visible at a time" behaviour. */
.blog-layout.has-flagship {
  grid-template-columns: minmax(0,800px) 260px;
}
@media (max-width: 999px) {
  .blog-layout.has-flagship { grid-template-columns: 1fr; }
}

.blog-flagship { position: sticky; top: 90px; display: none; align-self: start; }
.blog-flagship-inner {
  background: #fff; border: 1px solid var(--mk-border); border-radius: var(--mk-radius-md);
  padding: 1.1rem 1rem; max-height: calc(100vh - 110px); overflow-y: auto;
}
[data-theme="dark"] .blog-flagship-inner { background: #0f172a; }
.blog-flagship-title {
  font-size: .72rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase;
  color: var(--mk-muted); margin: 0 0 .75rem;
}
.blog-flagship-inner nav { display: flex; flex-direction: column; gap: .3rem; }
.bf-item {
  display: flex; align-items: center; gap: .65rem; min-width: 0;
  padding: .5rem .5rem; border-radius: .6rem; text-decoration: none;
  border: 1px solid transparent; transition: background .12s, border-color .12s;
}
.bf-item:hover { background: var(--mk-bg-soft); border-color: var(--mk-border); }
.bf-ic {
  flex: 0 0 auto; width: 32px; height: 32px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(37,99,235,.09); color: var(--mk-blue);
}
.bf-ic svg { width: 16px; height: 16px; display: block; }
.bf-body { min-width: 0; }
.bf-body strong { display: block; font-size: .82rem; font-weight: 700; color: var(--mk-ink); line-height: 1.3; }
.bf-body small { display: block; font-size: .71rem; color: var(--mk-muted); line-height: 1.4; margin-top: .1rem; }
.blog-flagship-more {
  display: block; text-align: center; margin-top: .7rem; padding-top: .7rem;
  border-top: 1px solid var(--mk-border); font-size: .78rem; font-weight: 800;
  color: var(--mk-blue); text-decoration: none;
}
.blog-flagship-more:hover { text-decoration: underline; }

/* Mobile: a horizontally-scrollable strip near the top of the article,
   in the same slot .blog-toc-mobile used to occupy, rather than a second
   collapsible disclosure -- it stays visible without a tap, which matters
   for a "discover the tools" goal, and a reader who never taps a disclosure
   would otherwise never see it at all. */
.blog-flagship-mobile { display: block; margin: 0 0 1.3rem; }
.blog-flagship-mobile .blog-flagship-title { padding: 0 .1rem; }
.blog-flagship-mobile-row {
  display: flex; gap: .6rem; overflow-x: auto; padding: .15rem .1rem .4rem;
  -webkit-overflow-scrolling: touch; scrollbar-width: thin;
}
.blog-flagship-mobile-row .bf-item {
  flex: 0 0 auto; width: 128px; flex-direction: column; align-items: flex-start;
  gap: .5rem; background: #fff; border-color: var(--mk-border);
}
[data-theme="dark"] .blog-flagship-mobile-row .bf-item { background: #0f172a; }
.blog-flagship-mobile-row .bf-body small { display: none; }

/* The sidebar and the mobile strip are two faces of the same discovery
   rail -- tied to one breakpoint, same as .blog-toc/.blog-toc-mobile above,
   so they can never both show at once. Declared last so it wins the
   cascade over the unconditional display rules above at >=1000px. */
@media (min-width: 1000px) {
  .blog-flagship { display: block; }
  .blog-flagship-mobile { display: none; }
}

/* Social share row — icons are inline SVG, links go straight to each
   platform's own share endpoint. No SDK script tags (that's what actually
   costs page-load time with most "share button" plugins), so this is
   free: zero extra requests, zero extra render-blocking JS.
   Prefixed blog-share- deliberately: the site already ships a floating
   .share-bar rail (mk-shared.css, position:fixed) and a separate animated
   .mk-share-bar widget used on tool pages — reusing either name would
   silently inherit their rules instead of this component's own layout. */
.blog-share-bar {
  display: flex; align-items: center; flex-wrap: wrap; gap: .7rem 1rem;
  padding: .9rem 0; margin: 0 0 1.6rem; border-bottom: 1px solid var(--mk-border);
}
.blog-share-bar-end { border-bottom: none; border-top: 1px solid var(--mk-border); margin: 2.4rem 0 0; padding-top: 1.4rem; }
.blog-share-label { font-size: .74rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--mk-muted); }
.blog-share-icons { display: flex; align-items: center; gap: .5rem; }
.blog-share-icon {
  position: relative;
  width: 34px; height: 34px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--mk-bg-soft); border: 1px solid var(--mk-border); color: var(--mk-body);
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: background .15s ease, color .15s ease, border-color .15s ease, transform .15s ease;
}
.blog-share-icon svg { width: 15px; height: 15px; }
.blog-share-icon:hover { transform: translateY(-2px); }
.blog-share-icon.fb:hover { background: #1877f2; border-color: #1877f2; color: #fff; }
.blog-share-icon.x:hover { background: #000; border-color: #000; color: #fff; }
.blog-share-icon.wa:hover { background: #25d366; border-color: #25d366; color: #fff; }
.blog-share-icon.li:hover { background: #0a66c2; border-color: #0a66c2; color: #fff; }
.blog-share-icon.mail:hover { background: var(--mk-slate); border-color: var(--mk-slate); color: #fff; }
.blog-share-icon.copy:hover { background: var(--mk-blue); border-color: var(--mk-blue); color: #fff; }
.blog-share-toast {
  position: absolute; bottom: 120%; left: 50%; transform: translateX(-50%);
  background: #111827; color: #fff; font-size: .68rem; font-weight: 700;
  padding: .3rem .55rem; border-radius: .4rem; white-space: nowrap;
  opacity: 0; pointer-events: none; transition: opacity .15s ease;
}
.blog-share-icon.copy.copied .blog-share-toast { opacity: 1; }
[data-theme="dark"] .blog-share-icon { background: #0f172a; }
@media (max-width: 999px) {
  .blog-layout { grid-template-columns: 1fr; }
}

/* Article typography rhythm --------------------------------------------
   One scale, defined once. A new post never sets its own font-size. */
.blog-body { font-size: 18px; line-height: 1.75; color: var(--mk-body); }
.blog-body > p { margin: 0 0 1.35em; }
.blog-body h2 {
  font-size: 28px; font-weight: 800; color: var(--mk-ink);
  letter-spacing: -.01em; line-height: 1.3; margin: 48px 0 18px; scroll-margin-top: 100px;
}
.blog-body h2:first-child { margin-top: 0; }
.blog-body h3 {
  font-size: 22px; font-weight: 800; color: var(--mk-ink);
  line-height: 1.4; margin: 32px 0 14px; scroll-margin-top: 100px;
}
.blog-body a { color: var(--mk-blue); text-decoration-thickness: 1px; text-underline-offset: 2px; }
.blog-body strong { color: var(--mk-ink); }
.blog-body ul, .blog-body ol { margin: 0 0 1.25em 1.3rem; padding: 0; }
.blog-body li { margin-bottom: .4rem; line-height: 1.65; }
/* Secondary/supporting text used inside components (timeline step
   descriptions, small print under a table, etc.) — one shared size.
   Darker than --mk-muted on purpose: at 15px, the lighter slate read
   as too low-contrast against white. */
.mk-small, .flow-body span { font-size: 15px; line-height: 1.65; color: #4b5563; }
[data-theme="dark"] .mk-small, [data-theme="dark"] .flow-body span { color: #9ca3af; }

@media (max-width: 640px) {
  .blog-body h2 { font-size: 22px; margin: 36px 0 14px; }
  .blog-body h3 { font-size: 19px; margin: 26px 0 12px; }
}

/* Quick Answer — MeroKalam's signature component --------------------- */
.quick-answer {
  border: 1px solid #bbf7d0; border-left: 4px solid var(--mk-green); border-radius: var(--mk-radius-md);
  background: #f0fdf4; padding: 1.1rem 1.3rem; margin: 1.3rem 0;
}
[data-theme="dark"] .quick-answer { background: rgba(22,163,74,.1); border-color: rgba(22,163,74,.3); }
.quick-answer-label {
  display: block; font-size: .72rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase;
  color: #15803d; margin-bottom: .5rem;
}
[data-theme="dark"] .quick-answer-label { color: #86efac; }
.quick-answer p { margin: 0; font-size: 16px; line-height: 1.7; color: #14532d; }
[data-theme="dark"] .quick-answer p { color: #bbf7d0; }

/* Key Facts — fast mobile-friendly summary panel ---------------------- */
.key-facts { border: 1px solid var(--mk-border); border-radius: var(--mk-radius-md); background: #fff; padding: 1rem 1.2rem; margin: 1.3rem 0; }
[data-theme="dark"] .key-facts { background: #0f172a; }
.key-facts-label { display: block; font-size: .72rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; color: var(--mk-muted); margin-bottom: .6rem; }
.key-facts-rows { display: flex; flex-direction: column; }
.key-facts-row { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: .48rem 0; border-top: 1px solid var(--mk-border); }
.key-facts-row:first-child { border-top: none; }
.key-facts-row dt { font-size: .87rem; color: var(--mk-body); font-weight: 600; }
.key-facts-row dd { margin: 0; font-size: .91rem; color: var(--mk-ink); font-weight: 800; text-align: right; }
.key-facts-note { margin: .65rem 0 0; font-size: .78rem; color: var(--mk-muted); }

/* Who this guide is for ------------------------------------------------ */
.guide-for { border: 1px solid #dbeafe; border-radius: var(--mk-radius-md); background: #eff6ff; padding: 1.1rem 1.3rem; margin: 1.3rem 0; }
[data-theme="dark"] .guide-for { background: rgba(37,99,235,.1); border-color: rgba(37,99,235,.3); }
.guide-for-label { display: block; font-size: .72rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; color: #1d4ed8; margin-bottom: .7rem; }
[data-theme="dark"] .guide-for-label { color: #93c5fd; }
.guide-for ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.guide-for li { display: flex; align-items: flex-start; gap: .55rem; font-size: .89rem; color: #1e3a5f; line-height: 1.5; }
[data-theme="dark"] .guide-for li { color: #dbeafe; }
.guide-for li svg { flex: 0 0 auto; width: 16px; height: 16px; margin-top: .15rem; color: var(--mk-blue); }

/* Compact inline tool links — the quiet version of the tools promo,
   used the first time a guide mentions related tools. The full card
   version (mk-tools-landing) belongs further down, after the reader
   has actually gotten into the content. */
.tools-inline { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .6rem; margin: 1.1rem 0 1.4rem; font-size: .87rem; color: var(--mk-muted); }
.tools-inline strong { color: var(--mk-ink); font-weight: 700; margin-right: .2rem; }
.tools-inline a { color: var(--mk-blue); font-weight: 700; text-decoration: none; }
.tools-inline a:hover { text-decoration: underline; }
.tools-inline .ti-sep { color: var(--mk-border); }

/* What To Do Now — action box, distinct from Quick Answer. Quick Answer
   is "what the answer is"; this is "what you should actually do." ------ */
.action-box { border: 1px solid #fde68a; border-left: 4px solid var(--mk-amber); border-radius: var(--mk-radius-md); background: #fffbeb; padding: 1.1rem 1.3rem; margin: 1.3rem 0; }
[data-theme="dark"] .action-box { background: rgba(217,119,6,.1); border-color: rgba(217,119,6,.3); }
.action-box-label { display: block; font-size: .72rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; color: #92400e; margin-bottom: .7rem; }
[data-theme="dark"] .action-box-label { color: #fcd34d; }
.action-box ol { list-style: none; counter-reset: action; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.action-box li { counter-increment: action; display: flex; gap: .65rem; font-size: .92rem; color: #78350f; line-height: 1.55; }
[data-theme="dark"] .action-box li { color: #fde68a; }
.action-box li::before {
  content: counter(action); flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%;
  background: var(--mk-amber); color: #fff; font-size: .72rem; font-weight: 800;
  display: flex; align-items: center; justify-content: center; margin-top: .1rem;
}
.action-box-note { margin: .8rem 0 0; font-size: .82rem; font-weight: 700; color: #92400e; }
[data-theme="dark"] .action-box-note { color: #fcd34d; }

/* Process overview label ------------------------------------------------ */
.process-intro { font-size: .85rem; font-weight: 600; color: var(--mk-muted); margin: 1.1rem 0 .9rem; }

/* Ad slots: quiet, clearly separated from editorial content -------------*/
.mk-blog-ad { margin: 1.6rem 0; }
.mk-blog-ad-box { min-height: 1px; }
/* Ads are off site-wide until you flip "adsEnabled" to true in
   src/_data/site.json — one place, not per post. While off, the ad
   script never even loads (see layouts/post.njk), and these slots
   take up zero space instead of leaving empty gaps. */
[data-ads="off"] .mk-blog-ad { display: none; }

/* FAQ accordion ----------------------------------------------------------*/
.blog-faq .faq-list { display: flex; flex-direction: column; gap: .6rem; margin: 1.2rem 0; }
.faq-it { border: 1px solid var(--mk-border); border-radius: var(--mk-radius-md); background: #fff; overflow: hidden; }
[data-theme="dark"] .faq-it { background: #0f172a; }
.faq-q { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.2rem; font-weight: 700; font-size: .93rem; color: var(--mk-ink); cursor: pointer; user-select: none; }
[data-theme="dark"] .faq-q { background: transparent !important; }
.faq-q::after {
  content: ''; flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%; background: rgba(37,99,235,.1);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232563eb' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center; background-size: 12px;
  transition: transform .2s ease;
}
.faq-q.open::after { transform: rotate(180deg); }
.faq-bd { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .22s ease; }
.faq-bd.open { grid-template-rows: 1fr; }
.faq-ans { overflow: hidden; font-size: .88rem; color: var(--mk-body); line-height: 1.7; padding: 0 1.2rem; }
.faq-bd.open .faq-ans { padding: 0 1.2rem 1.1rem; }

/* Site-wide theme.js injects a dark-mode toggle button (#themeToggle) at
   the start of .mk-nav-links on every page it runs on, including blog
   posts. Blog pages don't offer a dark-mode switch, so on this template
   that button renders as a stray, unstyled icon (two overlapping moon/sun
   SVGs) right before "All Tools" in the top nav. This file loads only on
   blog pages, so hiding it here doesn't touch the toggle on the rest of
   the site. */
.mk-nav #themeToggle { display: none !important; }