/*
 * Oktoved – Aktualno (blog) styling
 *
 * 1. Category filter as pills — same look as the shop Advanced Filters
 *    (see css/filter-pills.css). Betheme hides the category list behind a
 *    "Filter > Categories" toggle; we hide that toggle bar and show the
 *    category list permanently, styled as pills.
 * 2. Aligned article grid — equal-height cards via a fixed thumbnail ratio
 *    and clamped title/excerpt, so columns and rows line up.
 * 3. Article title hover colour #f59e62 so the cursor target is obvious.
 *
 * Brand palette:
 *   Primary      #83aedc   soft blue  → active pill fill
 *   Primary Dark #264653   dark navy  → idle text
 *   Orange       #f59e62              → article title hover
 */

:root {
    --aktualno-title-hover: #f59e62;
}

/* ── 1. Category filter → pills ───────────────────────────────────── */

/* Hide Betheme's "Filter | Categories | Tags | Authors" toggle bar */
#Filters .filters_buttons {
    display: none !important;
}

/* Betheme collapses the list wrapper by default — keep it always open */
#Filters .filters_wrapper {
    display: block !important;
    margin-top: 0 !important;
    border: none !important;
}

/* Show only the categories list, as a centred horizontal pill row */
#Filters .filters_wrapper ul.categories {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 8px !important;
    list-style: none !important;
    padding: 12px 0 !important;
    margin: 0 !important;
    border: none !important;
    overflow: visible !important;
}

/* Tags / authors lists stay hidden (toggle bar is gone) */
#Filters .filters_wrapper ul.tags,
#Filters .filters_wrapper ul.authors {
    display: none !important;
}

/* Pills sit side by side — override Betheme's percentage widths */
#Filters .filters_wrapper ul.categories li {
    flex: 0 0 auto !important;
    width: auto !important;
    display: inline-flex !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* No close button when the list is permanently visible */
#Filters .filters_wrapper ul.categories li.close {
    display: none !important;
}

/* Idle pill — matches .mfn-advanced-filters-checkbox-label in filter-pills.css */
#Filters .filters_wrapper ul.categories li a {
    display: inline-block !important;
    width: auto !important;
    padding: var(--pill-padding, 8px 22px) !important;
    border-radius: var(--pill-radius, 30px) !important;
    border: none !important;
    background: transparent !important;
    cursor: pointer !important;
    font-size: var(--pill-font-size, 16px) !important;
    font-weight: 400 !important;
    color: var(--pill-text, #264653) !important;
    line-height: 1.4 !important;
    white-space: nowrap !important;
    transition: color 0.18s ease !important;
    user-select: none;
}

#Filters .filters_wrapper ul.categories li a:hover {
    color: var(--pill-hover, #f59e62) !important;
    background: transparent !important;
}

#Filters .filters_wrapper ul.categories li a:after {
    display: none !important;   /* kill .style-simple underline variant */
}

/* Active pill — filled badge, same as the checked state on the shop */
#Filters .filters_wrapper ul.categories li.current-cat a {
    background: var(--pill-active-bg, #83aedc) !important;
    color: #ffffff !important;
    font-weight: 600 !important;
}

/* ── 2. Aligned article grid ──────────────────────────────────────── */

/* Uniform thumbnail crop so every card starts at the same height */
.posts_group .post-item .image_wrapper img {
    aspect-ratio: 3 / 2;
    object-fit: cover;
    width: 100%;
    height: auto;
}

/* Clamp titles to two lines, reserving the space even for short ones */
.posts_group .post-item .post-title .entry-title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

/* Clamp excerpts to three lines */
.posts_group .post-item .post-excerpt {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}

/* ── Helper for background doodles placed via BeBuilder ───────────── */

/* Original helper — absolute positioning. Kept exactly as first deployed so
   existing doodles that use it don't move. */
.oktoved-deco {
    position: absolute;
    pointer-events: none;
    z-index: 1;
}

/* Layout-neutral helper — safe to add to ANY doodle element regardless of
   how it was positioned (paddings, offsets, absolute). Makes it a pure
   ornament: click-through, non-selectable, non-draggable. */
.oktoved-deco,
.oktoved-deco *,
.oktoved-noselect,
.oktoved-noselect * {
    pointer-events: none;
    user-select: none;              /* not highlightable by drag-select */
    -webkit-user-select: none;
    -webkit-user-drag: none;        /* no drag "ghost" image */
    -webkit-touch-callout: none;    /* no iOS long-press save/copy menu */
}

/* Decorations are ornamental — below tablet width they fight the text for
   space and reflow unpredictably, so hide them wholesale. */
@media only screen and (max-width: 959px) {
    .oktoved-deco,
    .oktoved-noselect {
        display: none !important;
    }
}

/* ── 3. Article title hover colour ────────────────────────────────── */

.post-item .post-title a:hover,
.post-item .post-title a:hover * {
    color: var(--aktualno-title-hover) !important;
}

/* ── 4. Collapse the empty single-post header ─────────────────────── */

/*
 * On single posts Betheme always prints <header class="section-post-header">
 * (betheme/includes/content-single.php), even when everything it can hold is
 * switched off. With the current options it holds nothing:
 *   - prev/next arrows  → Options > Blog > "Prev & next navigation: hide header"
 *   - post title        → Options > Blog > "Title" off        → .no-title
 *   - featured image    → per-post "Hide image" meta          → .no-img
 *   - love button       → Share style "simple" renders it in the footer
 * What is left is an empty section that still carries its section padding and
 * the .post-header{margin-bottom:20px} rule — the visible gap between the
 * page title and the first paragraph.
 *
 * .no-img only appears when the post's "Hide image" box is ticked (or it has
 * no featured image at all). A post whose featured image is set but broken —
 * attachment deleted, so get_the_post_thumbnail() prints no <img> — keeps a
 * header holding an empty .image_frame. Its zoom <svg> carries no width or
 * height, so it falls back to the SVG default of 300×150: that is the gap.
 *
 * So don't key on .no-img — key on "this header contains no media". :has()
 * re-checks per post, so the header comes back on its own as soon as anything
 * real lands in it: a working image, a video embed, or the prev/next arrows
 * (Options > Blog > "Prev & next navigation"). .no-title.share-simple stays in
 * the selector so turning the title or the header love button back on also
 * restores it.
 */
.single-post article.no-title.share-simple > .section-post-header:not(:has(img, iframe, video, .post-nav)) {
    display: none;
}