/* Kernelka theme — dark-navy header, sticky category-tree sidebar (a
   full-screen drawer on mobile), white content cards on a soft paper
   ground. Colors and layout ported from kernelka.test's own SCSS
   (_variables.scss, _header.scss, _container.scss, _aside.scss). */

:root {
    --kk-main: #282c34;
    --kk-main-dark: #1c1f25;
    --kk-secondary: #dbdbdb;
    --kk-secondary-dark: #b8b8b8;
    --kk-paper: #f4f4f4;
    --kk-radius: 6px;
    --kk-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
    --kk-header-height-desktop: 100px;
    --kk-header-height-mobile: 60px;
    --kk-header-bg-image: none;
    --kk-page-bg-image: none;
    /* The accent, header-fill, accent-text and button-fill variables below
       are admin-editable via functions.php; these are only the fallback
       for first paint. */
    --kk-accent: #12207a;
    --kk-accent-bright: #1670c4;
    --kk-accent-deep: #0c1758;
    --kk-header-fill: var(--kk-accent);
    --kk-accent-text: var(--kk-accent-bright);
    --kk-accent-text-hover: var(--kk-accent);
    --kk-accent-on-dark: var(--kk-accent-bright);
    --kk-button-fill: var(--kk-accent);
    --kk-button-fill-hover: var(--kk-accent-deep);
}

* { box-sizing: border-box; }

html {
    color: var(--kk-main);
    font-family: 'Nunito Sans', sans-serif;
    font-size: 18px;
    scroll-behavior: smooth;
}

body {
    background-color: var(--kk-paper);
    background-image: var(--kk-page-bg-image), repeating-linear-gradient(45deg, rgba(0, 0, 0, 0.02) 0, rgba(0, 0, 0, 0.02) 1px, transparent 1px, transparent 14px);
    background-repeat: repeat, repeat;
    background-attachment: fixed, fixed;
    margin: 0;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 700;
    line-height: 1.25;
}

a { color: var(--kk-accent-text); text-decoration: none; }
a:hover { color: var(--kk-accent-text-hover); }

/* ---------- header ----------
   .kk-header-bar wraps the navy branding block and the top nav. On
   desktop both sit on the same navy strip (nav floated right in
   kernelka.test, flex here). Below 900px the nav detaches into its own
   full-width dark bar *below* the navy block (not painted navy itself)
   — matching kernelka.test's real mobile header exactly, verified via
   a same-origin same-width iframe (window-resize doesn't reproduce the
   real layout viewport in this tool).

   The bar itself always spans the full viewport width — only its
   *content* aligns to the site's 1200px column, via padding (same
   technique kernelka.test uses: padding, not a max-width on the bar). */
.kk-header-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--kk-header-fill);
    background-image: var(--kk-header-bg-image), radial-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px);
    background-repeat: repeat, repeat;
    background-size: auto, 14px 14px;
    height: var(--kk-header-height-desktop);
    padding: 0 1.5em;
    gap: 0.75em;
}

@media (min-width: 1200px) {
    .kk-header-bar { padding: 0 calc((100% - 1200px) / 2 + 1.5em); }
}

.kk-header-brand { display: flex; align-items: center; }
.kk-branding a { display: block; }
.kk-branding img { display: block; height: calc(var(--kk-header-height-desktop) * 0.8); width: auto; }

.kk-trigger-label { display: none; }

.kk-topnav ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25em 0.5em;
    justify-content: flex-end;
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
}

.kk-topnav a {
    color: #fff;
    font-weight: 400;
    font-size: 16px;
    padding: 0.4em 0.6em;
    border-radius: var(--kk-radius);
    transition: background 0.2s ease, color 0.2s ease;
}

.kk-topnav a:hover { background: #fff; color: var(--kk-main); }

/* language codes as one flex item of .kk-topnav ul — wraps to the next
   line as a whole group when the row runs out of room, never splitting
   one language from another mid-list. */
.kk-lang-group { display: flex; align-items: center; gap: 0.25em; }

/* current language: same visual weight as a link, marked active the same
   way hover already reads "interactive" — white pill, brand-color text. */
.kk-lang-group strong {
    display: inline-block;
    color: var(--kk-main);
    background: #fff;
    font-weight: 700;
    font-size: 16px;
    padding: 0.4em 0.6em;
    border-radius: var(--kk-radius);
}

@media (max-width: 899px) {
    .kk-header-bar {
        height: auto;
        padding: 0;
        background: none;
        display: block;
    }
    .kk-header-brand {
        position: relative;
        min-height: var(--kk-header-height-mobile);
        padding: 0 1em;
        background: var(--kk-header-fill);
        background-image: var(--kk-header-bg-image), radial-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px);
        background-repeat: repeat, repeat;
        background-size: auto, 14px 14px;
    }
    .kk-branding img { height: calc(var(--kk-header-height-mobile) * 0.8); }

    /* kernelka.test's plain 3-bar icon: no button/background, just bars
       directly on the navy header, top-right. */
    .kk-trigger-label {
        display: block;
        position: absolute; top: 8px; right: 15px; width: 40px; height: 40px;
        cursor: pointer; z-index: 210;
    }
    .kk-trigger-label span {
        display: block; position: absolute; left: 0; top: 50%; width: 100%; height: 8%;
        background: var(--kk-secondary);
    }
    .kk-trigger-label span::before,
    .kk-trigger-label span::after {
        content: ''; display: block; position: absolute; left: 0; width: 100%; height: 100%;
        background: var(--kk-secondary); transition: transform 0.3s ease;
    }
    .kk-trigger-label span::before { transform: translateY(-250%); }
    .kk-trigger-label span::after { transform: translateY(250%); }
    .kk-menu-trigger:checked ~ .kk-header-bar .kk-trigger-label span::before { transform: translateY(-350%); }
    .kk-menu-trigger:checked ~ .kk-header-bar .kk-trigger-label span::after { transform: translateY(350%); }

    /* the nav itself sits on the page background, not the navy block —
       same horizontal inset as the branding's own padding above it. */
    .kk-topnav { display: block; margin: 0.5em 1em 0; background: var(--kk-main); border-radius: var(--kk-radius); padding: 0.5em; }
    .kk-topnav ul { justify-content: center; }
}

/* ---------- layout: sidebar + content ---------- */
.kk-middle {
    max-width: 1200px;
    margin: 2em auto;
    padding: 0 1.5em;
    display: flex;
    gap: 2em;
    align-items: flex-start;
}

@media (max-width: 899px) {
    .kk-middle { display: block; margin: 0; padding: 0; }
}

.kk-sidebar {
    flex: 0 0 25%;
    max-width: 25%;
    font-size: 16px;
}

@media (min-width: 900px) {
    .kk-sidebar { position: sticky; top: 1em; }
}

.kk-category-label {
    font-weight: 400;
    text-transform: uppercase;
    font-size: 0.95em;
    border-bottom: 2px solid var(--kk-main);
    display: inline-block;
    padding-bottom: 0.25em;
    margin: 0 0 0.75em;
}

.kk-menu-container ul { list-style: none; margin: 0; padding: 0; }

.kk-menu-container > ul > li { margin-bottom: 0.4em; }

.kk-menu-container a {
    display: inline-block;
    padding: 0.2em 0;
    position: relative;
    color: var(--kk-main);
}

.kk-menu-container a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    height: 2px;
    width: 0;
    background: var(--kk-accent-text);
    transition: width 0.25s ease;
}

.kk-menu-container a:hover { color: var(--kk-accent-text-hover); }
.kk-menu-container a:hover::after { width: 100%; }

.kk-menu-container ul ul { margin-left: 1.25em; }

.kk-empty { color: #777; font-style: italic; }

.kk-drawer-title { display: none; }

/* mobile drawer (pure-CSS checkbox toggle; the checkbox itself lives at
   body level, see header.php, so it can reach both the header's
   .kk-trigger-label and .kk-middle's .kk-menu-container through the
   general sibling combinator) */
.kk-menu-trigger { position: absolute; opacity: 0; z-index: -1; }

@media (max-width: 899px) {
    .kk-sidebar { max-width: 100%; padding: 0.75em 1em; }
    .kk-category-label { display: none; }

    .kk-menu-widget { position: static; }
    .kk-menu-container {
        position: fixed; top: 0; bottom: 0; left: -100vw; width: 100vw;
        background: var(--kk-main-dark);
        overflow-y: auto;
        padding: 80px 20px 40px;
        transition: left 0.3s ease;
        z-index: 200;
    }
    .kk-menu-trigger:checked ~ .kk-middle .kk-menu-container { left: 0; }
    .kk-drawer-title {
        display: block; color: var(--kk-secondary); text-transform: uppercase;
        font-weight: 400; font-size: 1.2em; text-align: center; margin: 0 0 1em;
    }
    .kk-menu-container > ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75em; }
    .kk-menu-container > ul > li {
        background: rgba(255, 255, 255, 0.06); border-radius: var(--kk-radius);
        padding: 0.6em 1em; min-width: 220px; text-align: center;
    }
    .kk-menu-container a { color: var(--kk-secondary); text-transform: uppercase; font-size: 0.95em; }
    .kk-menu-container a:hover { color: #fff; }
    .kk-menu-container a::after { display: none; }
    .kk-menu-container ul ul { margin: 0.5em 0 0; }
}

/* ---------- content column ---------- */
.kk-content { flex: 1 1 auto; min-width: 0; }

.kk-panel {
    background: #fff;
    box-shadow: var(--kk-shadow);
    border-radius: var(--kk-radius);
    padding: 2em;
    margin-bottom: 1.5em;
}

@media (max-width: 899px) {
    .kk-panel { padding: 1.25em; margin: 1em; border-radius: var(--kk-radius); }
    .kk-content { padding: 0; }
}

.kk-pagehead { text-align: center; }
.kk-page-title { margin-top: 0; font-weight: 400; }

.kk-feed { display: flex; flex-direction: column; }

/* ---------- post card ---------- */
.kk-card-link { display: block; color: inherit; }
.kk-card-title { font-size: 1.4rem; margin: 0 0 0.75em; font-weight: 400; }
.kk-card-media { text-align: center; }
.kk-card-media img { display: block; width: 100%; height: auto; border-radius: var(--kk-radius); box-shadow: 0 0 2px rgba(0, 0, 0, 0.5); }
.kk-card-media-fallback {
    display: flex; align-items: center; justify-content: center;
    height: 180px; background: var(--kk-secondary); border-radius: var(--kk-radius);
    font-size: 2.5rem; color: var(--kk-main);
}
.kk-card-description { margin: 1em 0 0; text-align: justify; line-height: 1.6; }
.kk-read-more { display: block; font-weight: 400; text-decoration: underline; white-space: nowrap; }
.kk-card-details {
    display: flex; justify-content: space-between; list-style: none;
    margin: 1em 0 0; padding: 0; font-size: 0.85em;
}

/* ---------- pagination ---------- */
.kk-pagination {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 0.25em;
    margin: 1em 0 2em;
}
.kk-page {
    display: inline-block; padding: 0.5em 1em; border-radius: var(--kk-radius);
    background: var(--kk-secondary); font-weight: 700; color: var(--kk-main);
}
.kk-page:hover { background: var(--kk-main); color: #fff; }
.kk-page.is-current { background: var(--kk-main); color: #fff; }
.kk-page-arrow { padding: 0.5em 0.9em; }
.kk-page-arrow.is-disabled { opacity: 0.35; pointer-events: none; }

/* ---------- single post / page ---------- */
.kk-main-image { display: block; margin: 0 auto 1.5em; max-width: 100%; height: auto; border-radius: var(--kk-radius); box-shadow: 0 0 2px rgba(0, 0, 0, 0.5); }

.kk-details {
    background: var(--kk-secondary); border-radius: var(--kk-radius);
    padding: 1em; margin: 0 0 1.5em; font-size: 0.85em; font-weight: 700;
}
.kk-post-categories { float: left; }
.kk-post-categories a { margin-left: 0.4em; }
.kk-post-date { float: right; }
.kk-details-clearfix { clear: both; }

.kk-post-tags {
    background: var(--kk-secondary); border-radius: var(--kk-radius);
    padding: 1em; margin: 1.5em 0; font-size: 0.85em; font-weight: 700;
}
.kk-post-tag {
    display: inline-block; margin: 0 0.3em 0.3em; padding: 0.3em 0.7em;
    background: var(--kk-main); color: var(--kk-secondary); border-radius: var(--kk-radius); font-weight: 400;
}
.kk-post-tag:hover { background: var(--kk-main-dark); color: #fff; }

.kk-tagcloud { display: flex; flex-wrap: wrap; gap: 0.5em; }

.kk-share { margin: 1.5em 0; }
.kk-share-text { display: block; border-top: 1px solid var(--kk-secondary); padding-top: 0.75em; font-size: 0.85em; font-weight: 700; margin-bottom: 0.75em; }
.kk-share-button {
    display: inline-block; margin: 0 0.4em 0.4em 0; padding: 0.5em 0.8em;
    background: #f8f8f8; border: 1px solid var(--kk-secondary); border-radius: 3px;
    color: #656565; font-size: 0.85em;
}
.kk-share-button:hover { border-color: var(--kk-secondary-dark); color: #444; }

.kk-related-heading { margin-top: 2em; }
.kk-related { display: flex; flex-wrap: wrap; gap: 1em; }
.kk-related-item { flex: 1 1 200px; max-width: calc(25% - 0.75em); color: inherit; }
@media (max-width: 899px) { .kk-related-item { max-width: calc(50% - 0.5em); } }
.kk-related-media {
    display: flex; align-items: center; justify-content: center; height: 110px;
    background: var(--kk-secondary); border-radius: var(--kk-radius); overflow: hidden; font-size: 2rem;
}
.kk-related-media img { width: 100%; height: 100%; object-fit: cover; }
.kk-related-title { display: block; margin-top: 0.5em; font-weight: 700; font-size: 0.9em; }

.kk-404 { text-align: center; }
.kk-404-code { font-size: 5rem; font-weight: 700; margin: 0; color: var(--kk-secondary-dark); }

/* ---------- comments ---------- */
.kk-comments { margin-top: 2em; }
.kk-comments-list { list-style: none; margin: 0 0 1.5em; padding: 0; }
.kk-comment {
    background: var(--kk-paper); border: 1px solid var(--kk-secondary);
    border-radius: var(--kk-radius); padding: 1em; margin-bottom: 0.75em;
}
.kk-comment-author { font-weight: 700; }
.kk-comment-date { font-weight: 400; font-size: 0.8em; color: #777; margin-left: 0.5em; }

.kk-comment-form,
.kk-contact-form {
    display: flex; flex-direction: column; gap: 0.75em; max-width: 40em;
}
.kk-comment-form input,
.kk-comment-form textarea,
.kk-contact-form input,
.kk-contact-form textarea,
.kk-contact-form select {
    border: 1px solid var(--kk-secondary-dark); border-radius: var(--kk-radius);
    padding: 0.6em; font-family: inherit; font-size: 1rem;
}
.kk-comment-attention { font-size: 0.85em; color: #666; }
.kk-contact-check { display: flex; align-items: center; gap: 0.5em; font-size: 0.9em; }
.kk-contact-note { font-size: 0.9em; color: #555; }
#contact-form-message.is-success, #comment-form-message { color: #1a7a3a; }
#contact-form-message.is-error { color: #b02a2a; }

/* ---------- buttons ---------- */
.kk-btn {
    display: inline-block; padding: 0.75em 1.5em; border-radius: 2em;
    background: var(--kk-main); color: #fff !important; font-weight: 700; border: none; cursor: pointer;
}
.kk-btn:hover { background: var(--kk-main-dark); }
.kk-btn-light { background: var(--kk-secondary); color: var(--kk-main) !important; }
.kk-btn-light:hover { background: var(--kk-secondary-dark); }
.kk-btn-outline { background: transparent; color: #fff !important; border: 1px solid var(--kk-secondary); }
.kk-btn-outline:hover { background: rgba(255, 255, 255, 0.1); }

/* ---------- footer ---------- */
.kk-footer {
    background: var(--kk-main); color: var(--kk-secondary);
    text-align: center; padding: 2em 1em; margin-top: 2em; font-size: 0.9em; line-height: 2;
}
.kk-footer a { color: var(--kk-secondary); text-decoration: underline; }
.kk-footer a:hover { color: #fff; }

.kk-footer-social { display: flex; justify-content: center; gap: 0.9em; margin: 0 0 1em; }
.kk-footer-social a { display: block; text-decoration: none; }
.kk-social-icon { color: var(--kk-secondary); fill: currentColor; width: 1.15em; height: 1.15em; }
.kk-icon { display: inline-block; width: 1em; height: 1em; vertical-align: -0.125em; fill: currentColor; }
.kk-footer-social a:hover .kk-social-icon { color: var(--kk-accent-on-dark); }

.kk-copyright { margin: 0 0 0.5em; }
.kk-footer-admin { margin: 0; opacity: 0.8; }

.kk-totop {
    position: fixed; bottom: 20px; right: 20px; width: 44px; height: 44px;
    border-radius: 50%; background: var(--kk-button-fill); color: #fff; border: none;
    display: flex; align-items: center; justify-content: center; cursor: pointer;
    opacity: 0; visibility: hidden; transition: opacity 0.2s ease; z-index: 150;
}
.kk-totop.is-visible { opacity: 1; visibility: visible; }
.kk-totop:hover { background: var(--kk-button-fill-hover); }

.kk-cookie {
    position: fixed; left: 0; bottom: 0; width: 100%; z-index: 1000;
    background: rgba(0, 0, 0, 0.9); color: var(--kk-secondary);
    padding: 1.25em; display: flex; flex-wrap: wrap; gap: 1em; align-items: center; justify-content: space-between;
    font-size: 0.9em;
}
.kk-cookie-text p { margin: 0; }
.kk-cookie-actions { display: flex; flex-wrap: wrap; gap: 0.75em; }
html.accept_cookies .kk-cookie { display: none; }

/* ---------- prose / editor content ---------- */
.kk-prose { line-height: 1.6; }
.kk-prose p { margin: 0.75em 0; text-align: justify; }
.kk-prose img { max-width: 100%; height: auto; box-shadow: 0 0 2px rgba(0, 0, 0, 0.5); }
.kk-prose figure { display: table; margin: 1em auto; max-width: 100%; }
.kk-prose figure img { box-shadow: none; display: block; }
.kk-prose figcaption { caption-side: bottom; display: table-caption; font-size: 0.85em; font-style: italic; padding: 0.5em; text-align: center; }
.kk-prose blockquote { border-left: 0.25em solid var(--kk-accent-text); margin: 1em 0; padding: 0.2em 1em; background: var(--kk-paper); }
.kk-prose pre { background: #1e1e1e; color: #eee; padding: 1em; border-radius: var(--kk-radius); overflow-x: auto; }
.kk-prose code { font-family: monospace; background: var(--kk-paper); padding: 0 0.3em; border-radius: 3px; }
.kk-prose pre code { background: none; padding: 0; }
.kk-prose kbd { background: #000; color: var(--kk-secondary); border-radius: 0.2em; padding: 2px 6px; font-family: monospace; }
.kk-prose ul, .kk-prose ol { margin: 1em 0 1em 2em; }
.kk-prose .text-center { text-align: center; }
.kk-prose .separator { border-top: 2px solid var(--kk-secondary-dark); margin: 1.5em auto; width: 150px; }

.kk-prose .black-button {
    display: inline-block; background: var(--kk-main); color: #fff !important;
    border-radius: 2em; padding: 0.9em 1.5em; text-decoration: none !important;
}
.kk-prose .black-button:hover { background: var(--kk-main-dark); }

.kk-prose .inline-images { display: flex; flex-wrap: wrap; gap: 1em; justify-content: center; margin: 1em 0; }
.kk-prose .inline-images figure.image { margin: 0; }

.kk-prose .gallery { display: flex; flex-wrap: wrap; gap: 1em; margin: 1em 0; }
.kk-prose .gallery.columns-2 .gallery-image { width: calc(50% - 0.5em); }
.kk-prose .gallery.columns-3 .gallery-image { width: calc(33.33% - 0.67em); }
.kk-prose .gallery.columns-4 .gallery-image { width: calc(25% - 0.75em); }
.kk-prose .gallery-image { display: block; margin: 0; }
.kk-prose .gallery-image img { width: 100%; height: 100%; object-fit: cover; box-shadow: none; }

.kk-prose .download_block {
    display: flex; align-items: center; justify-content: space-between; gap: 1em;
    background: var(--kk-secondary); border-radius: var(--kk-radius); padding: 1em;
}
.kk-prose .download_button { background: var(--kk-main); color: #fff !important; border-radius: var(--kk-radius); padding: 0.5em 1em; }
.kk-prose .download_button:hover { background: var(--kk-main-dark); }

.kk-prose .embed_video { position: relative; padding-top: 56.25%; height: 0; overflow: hidden; }
.kk-prose .embed_video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.kk-prose .info-box {
    display: grid; grid-template-columns: 1fr 1fr; gap: 1em 2em; align-items: center; margin: 1.5em 0;
}
.kk-prose .info-box.right { direction: rtl; }
.kk-prose .info-box.right > * { direction: ltr; }
.kk-prose .info-box.large { font-size: 1.15em; }
@media (max-width: 719px) { .kk-prose .info-box { grid-template-columns: 1fr; direction: ltr; } }

.kk-search-form { position: relative; max-width: 30em; }
.kk-search-form input { width: 100%; padding: 0.75em 0.75em 0.75em 2.4em; border-radius: 2em; border: 1px solid var(--kk-secondary-dark); font-size: 1rem; }
.kk-search-form .fa-search { position: absolute; left: 0.9em; top: 50%; transform: translateY(-50%); color: #999; }
.kk-search-result p { display: flex; align-items: center; gap: 1em; margin: 1em 0; }
.kk-search-result img { width: 100px; height: 60px; object-fit: cover; border-radius: var(--kk-radius); flex-shrink: 0; }