/* Minikoding visual system */
:root {
  --mk-bg: #F8FAFC;
  --mk-primary: #2563EB;
  --mk-navy: #172554;
  --mk-footer: #101827;
  --mk-description: #64748B;
  --mk-muted: #94A3B8;
  --mk-border: #E2E8F0;
  --mk-soft-blue: #EFF6FF;
  --mk-radius: 18px;
  --mk-shadow: 0 12px 32px rgba(23, 37, 84, .07);
}
html { scroll-behavior: smooth; }
body { background: var(--mk-bg); color: var(--mk-navy); }
a { text-underline-offset: 3px; }
a:hover { color: var(--mk-primary); }
.wp-site-blocks { overflow: clip; }
.mk-container { width: min(1180px, calc(100% - 40px)); margin-inline: auto; }
.mk-header { background: #172554; color: #fff; }
.mk-header a { color: #fff; text-decoration: none; }
.mk-header .wp-block-site-title a { font-weight: 850; letter-spacing: -.04em; }
.mk-header .wp-block-navigation-item__content { font-size: .94rem; font-weight: 600; }
.mk-header .wp-block-navigation__responsive-container.is-menu-open { background: #172554; color: #fff; padding: 28px; }
.mk-header .wp-block-navigation__responsive-container.is-menu-open a { color: #fff; }
.mk-header .wp-block-site-tagline { color: #BFDBFE; font-size: .75rem; margin-top: -5px; }
.mk-hero { background: linear-gradient(135deg, #EFF6FF 0%, #F8FAFC 62%, #E0EAFF 100%); border: 1px solid #DBEAFE; border-radius: 26px; padding: clamp(28px, 6vw, 76px); }
.mk-eyebrow { color: #2563EB; font-size: .75rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.mk-hero h1 { max-width: 780px; font-size: clamp(2.45rem, 6vw, 4.65rem); letter-spacing: -.055em; line-height: 1.04; }
.mk-hero p { max-width: 660px; color: var(--mk-description); font-size: clamp(1rem, 2vw, 1.2rem); }
.mk-button .wp-block-button__link, .wp-block-button__link { background: var(--mk-primary); color: #fff; border-radius: 10px; padding: 13px 22px; font-weight: 750; transition: transform .2s ease, background .2s ease; }
.mk-button .wp-block-button__link:hover, .wp-block-button__link:hover { background: #1D4ED8; color: #fff; transform: translateY(-2px); }
.mk-section-heading { margin-bottom: 22px; }
.mk-section-heading h2 { font-size: clamp(1.7rem, 3vw, 2.35rem); letter-spacing: -.035em; margin-bottom: 8px; }
.mk-section-heading p { color: var(--mk-description); margin-top: 0; }
.mk-card, .wp-block-post, .mk-category-card { background: #fff; border: 1px solid var(--mk-border); border-radius: var(--mk-radius); overflow: hidden; box-shadow: 0 4px 18px rgba(23,37,84,.035); }
.mk-card { padding: 22px; }
.mk-card:hover, .mk-category-card:hover, .wp-block-post:hover { box-shadow: var(--mk-shadow); transform: translateY(-3px); transition: .2s ease; }
.mk-category-card { padding: 22px; height: 100%; }
.mk-category-card h3 { margin: 0 0 8px; font-size: 1.08rem; }
.mk-category-card p { color: var(--mk-description); font-size: .92rem; margin: 0; }
.mk-icon { display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: var(--mk-soft-blue); color: var(--mk-primary); font-weight: 900; margin-bottom: 14px; }
.mk-post-grid .wp-block-post { padding-bottom: 18px; }
.mk-post-grid .wp-block-post-featured-image { margin: 0 0 16px; }
.mk-post-grid .wp-block-post-featured-image img { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.mk-post-grid .wp-block-post-title, .mk-post-grid .wp-block-post-date, .mk-post-grid .wp-block-post-excerpt { margin-inline: 18px; }
.mk-post-grid .wp-block-post-title { font-size: 1.15rem; line-height: 1.35; }
.mk-post-grid .wp-block-post-title a { color: var(--mk-navy); text-decoration: none; }
.mk-post-grid .wp-block-post-date { color: var(--mk-muted); font-size: .8rem; margin-top: 12px; }
.mk-post-grid .wp-block-post-excerpt { color: var(--mk-description); font-size: .92rem; }
.mk-ai-panel { background: #101827; color: #fff; border-radius: 24px; padding: clamp(26px, 5vw, 54px); }
.mk-ai-panel h2 { color: #fff; }
.mk-ai-panel p { color: #CBD5E1; }
.mk-ai-panel .wp-block-button__link { background: #60A5FA; color: #0F172A; }
.mk-newsletter { background: #EFF6FF; border: 1px solid #DBEAFE; border-radius: 22px; padding: clamp(24px, 4vw, 42px); }
.mk-newsletter p { color: var(--mk-description); }
.mk-footer { background: var(--mk-footer); color: #fff; }
.mk-footer h2, .mk-footer h3, .mk-footer .wp-block-site-title { color: #fff; }
.mk-footer p, .mk-footer a { color: #CBD5E1; }
.mk-footer a:hover { color: #fff; }
.mk-copyright { border-top: 1px solid #334155; color: #94A3B8; padding-top: 18px; font-size: .85rem; }
.mk-copyright p { color: #94A3B8; }
.mk-breadcrumb { color: var(--mk-description); font-size: .85rem; }
.mk-content-card { background: #fff; border: 1px solid var(--mk-border); border-radius: 20px; padding: clamp(20px, 4vw, 42px); }
.wp-block-post-content { color: #334155; }
.wp-block-post-content h2, .wp-block-post-content h3 { color: var(--mk-navy); margin-top: 1.8em; }
.wp-block-post-content pre { background: #0F172A; color: #E2E8F0; border-radius: 12px; padding: 20px; overflow-x: auto; }
.wp-block-post-content code { font-size: .9em; }
.wp-block-search__input { border: 1px solid var(--mk-border); border-radius: 10px; padding: 10px 14px; }
.wp-block-search__button { border: 0; border-radius: 10px; background: var(--mk-primary); color: #fff; padding: 10px 16px; }
.wp-block-post-navigation-link a, .wp-block-query-pagination a { color: var(--mk-primary); }
.wp-block-separator { border-color: var(--mk-border); }
@media (max-width: 781px) {
  .mk-container { width: min(100% - 28px, 1180px); }
  .mk-hero { border-radius: 18px; padding: 28px 22px; }
  .mk-hero h1 { font-size: clamp(2.25rem, 11vw, 3.35rem); }
  .mk-header .wp-block-group { flex-wrap: wrap; }
  .mk-footer .wp-block-columns { gap: 24px; }
}


/* v1.1: reading time, TOC, code tools, related posts, dark mode */
.mk-reading-time { display: inline-flex; align-items: center; gap: 6px; color: var(--mk-description); font-size: .86rem; }
.mk-reading-time:before { content: "◷"; color: var(--mk-primary); }
.mk-toc { margin: 26px 0 34px; padding: 20px 24px; background: #EFF6FF; border: 1px solid #DBEAFE; border-radius: 14px; }
.mk-toc__heading { color: #172554; font-weight: 800; margin-bottom: 8px; }
.mk-toc ol { margin: 0; padding-left: 22px; }
.mk-toc li { margin: 6px 0; color: #2563EB; }
.mk-toc a { color: #1E40AF; text-decoration: none; }
.mk-toc a:hover { text-decoration: underline; }
.mk-toc__subitem { margin-left: 16px !important; font-size: .94em; }
.wp-block-post-content pre, .entry-content pre { position: relative; padding: 52px 20px 20px; }
.mk-copy-code { position: absolute; top: 10px; right: 10px; border: 1px solid #475569; border-radius: 7px; padding: 5px 10px; color: #E2E8F0; background: #1E293B; font: inherit; font-size: .75rem; cursor: pointer; }
.mk-copy-code:hover { background: #334155; }
.mk-related-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 20px 0; }
.mk-related-card { overflow: hidden; background: #fff; border: 1px solid var(--mk-border); border-radius: 14px; }
.mk-related-card__image { display: block; aspect-ratio: 16/9; overflow: hidden; }
.mk-related-card__image img { width: 100%; height: 100%; object-fit: cover; }
.mk-related-card__body { padding: 14px; }
.mk-related-card__date { color: var(--mk-muted); font-size: .78rem; margin: 0 0 7px; }
.mk-related-card h3 { font-size: 1rem; line-height: 1.4; margin: 0; }
.mk-related-card h3 a { color: var(--mk-navy); text-decoration: none; }
.mk-theme-toggle { display: inline-flex; align-items: center; gap: 7px; border: 1px solid rgba(255,255,255,.3); border-radius: 999px; padding: 7px 12px; background: transparent; color: #fff; font: inherit; font-size: .8rem; cursor: pointer; }
.mk-theme-toggle:hover { background: rgba(255,255,255,.12); }
html[data-mk-theme="dark"] body { background: #0B1220; color: #E2E8F0; }
html[data-mk-theme="dark"] .mk-hero { background: linear-gradient(135deg, #172554, #111827); border-color: #334155; }
html[data-mk-theme="dark"] .mk-hero h1,
html[data-mk-theme="dark"] .mk-section-heading h2,
html[data-mk-theme="dark"] .mk-content-card h1,
html[data-mk-theme="dark"] .mk-content-card h2,
html[data-mk-theme="dark"] .mk-content-card h3 { color: #F8FAFC; }
html[data-mk-theme="dark"] .mk-hero p,
html[data-mk-theme="dark"] .mk-section-heading p,
html[data-mk-theme="dark"] .mk-category-card p,
html[data-mk-theme="dark"] .wp-block-post-content { color: #CBD5E1; }
html[data-mk-theme="dark"] .mk-category-card,
html[data-mk-theme="dark"] .mk-content-card,
html[data-mk-theme="dark"] .wp-block-post,
html[data-mk-theme="dark"] .mk-related-card { background: #111827; border-color: #334155; }
html[data-mk-theme="dark"] .mk-category-card h3,
html[data-mk-theme="dark"] .mk-post-grid .wp-block-post-title a,
html[data-mk-theme="dark"] .mk-related-card h3 a { color: #F8FAFC; }
html[data-mk-theme="dark"] .mk-newsletter,
html[data-mk-theme="dark"] .mk-toc { background: #172554; border-color: #334155; }
html[data-mk-theme="dark"] .mk-toc__heading,
html[data-mk-theme="dark"] .mk-toc a { color: #DBEAFE; }
html[data-mk-theme="dark"] .mk-newsletter h2 { color: #F8FAFC; }
html[data-mk-theme="dark"] .mk-newsletter p { color: #CBD5E1; }
html[data-mk-theme="dark"] .mk-post-grid .wp-block-post-excerpt { color: #CBD5E1; }
html[data-mk-theme="dark"] .mk-post-grid .wp-block-post-date { color: #94A3B8; }
html[data-mk-theme="dark"] .wp-block-search__input { background: #111827; color: #F8FAFC; border-color: #475569; }
@media (max-width: 700px) {
  .mk-related-grid { grid-template-columns: 1fr; }
  .mk-toc { padding: 17px; }
}