/* ==========================================================================
   Primary navigation — modern restyle
   ========================================================================== */
.main-navigation {
    background: linear-gradient(180deg, var(--lpf-chrome-3) 0%, var(--lpf-chrome-2) 100%);
    border-bottom: 3px solid var(--lpf-accent-mid);
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.18);
}

.main-navigation #primary-menu > li > a {
    position: relative;
    padding: 16px 20px;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--lpf-on-dark);
    border-radius: 6px 6px 0 0;
    transition: color 0.25s ease, background-color 0.25s ease;
}

/* Sliding underline on hover */
.main-navigation #primary-menu > li > a::after {
    content: "";
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 6px;
    height: 2px;
    border-radius: 2px;
    background: var(--lpf-accent);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

.main-navigation #primary-menu > li > a:hover {
    color: #ffffff;
    background-color: rgba(255, 255, 255, 0.07);
}

.main-navigation #primary-menu > li > a:hover::after {
    transform: scaleX(1);
}

/* Home is no longer permanently highlighted — the accent follows the current page */
.main-navigation #primary-menu > li:first-child > a {
    background: transparent;
    color: var(--lpf-on-dark);
}

body.home .main-navigation #primary-menu > li:first-child > a,
.main-navigation #primary-menu > li.current-menu-item > a,
.main-navigation #primary-menu > li.current_page_item > a,
.main-navigation #primary-menu > li.current-menu-ancestor > a,
.main-navigation #primary-menu > li.current-category-ancestor > a {
    background: linear-gradient(135deg, var(--lpf-accent-mid) 0%, var(--lpf-accent-strong) 100%);
    color: #ffffff;
    box-shadow: 0 4px 14px rgba(var(--lpf-accent-rgb), 0.35);
}

body.home .main-navigation #primary-menu > li:first-child > a::after,
.main-navigation #primary-menu > li.current-menu-item > a::after,
.main-navigation #primary-menu > li.current_page_item > a::after {
    display: none;
}

.main-navigation #primary-menu > li > a:focus-visible {
    outline: 2px solid var(--lpf-accent);
    outline-offset: -3px;
}

/* ==========================================================================
   Search box — integrated into the bar, accent button instead of stock blue
   ========================================================================== */
.nav-search .search-form {
    display: flex;
    align-items: center;
    gap: 2px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 8px;
    padding: 3px;
    transition: background-color 0.25s ease, border-color 0.25s ease;
}

.nav-search .search-form:focus-within {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(var(--lpf-accent-rgb), 0.75);
}

.nav-search input[type="search"] {
    width: 190px;
    padding: 7px 12px;
    border: none;
    background: transparent;
    color: #ffffff;
    font-size: 14px;
    border-radius: 6px;
}

.nav-search input[type="search"]::placeholder {
    color: rgba(255, 255, 255, 0.55);
}

.nav-search input[type="search"]:focus {
    outline: none;
}

.nav-search button {
    background: linear-gradient(135deg, var(--lpf-accent-mid) 0%, var(--lpf-accent-strong) 100%);
    border: none;
    border-radius: 6px;
    padding: 8px 14px;
    color: #ffffff;
    cursor: pointer;
    transition: filter 0.25s ease, transform 0.2s ease;
}

.nav-search button:hover {
    filter: brightness(1.08);
    transform: translateY(-1px);
}

/* ==========================================================================
   Mobile: stacked items, left accent bar instead of the underline
   ========================================================================== */
@media (max-width: 768px) {
    .main-navigation #primary-menu > li > a {
        padding: 13px 15px;
        border-radius: 0;
    }

    .main-navigation #primary-menu > li > a::after {
        display: none;
    }

    body.home .main-navigation #primary-menu > li:first-child > a,
    .main-navigation #primary-menu > li.current-menu-item > a,
    .main-navigation #primary-menu > li.current_page_item > a {
        box-shadow: none;
        border-left: 4px solid var(--lpf-accent);
    }

    .nav-search .search-form {
        max-width: 100%;
    }

    .nav-search input[type="search"] {
        width: 100%;
    }
}

/* ==========================================================================
   Homepage & archive cards
   ========================================================================== */

/* Section heading above the grid (homepage only) */
body.home .posts-grid::before {
    content: "Latest Articles";
    grid-column: 1 / -1;
    font-size: 24px;
    font-weight: 700;
    color: var(--lpf-ink);
    letter-spacing: -0.01em;
    padding-bottom: 12px;
    border-bottom: 3px solid var(--lpf-accent-mid);
}

.posts-grid {
    gap: 28px;
}

/* Card shell */
.posts-grid article {
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border: 1px solid var(--lpf-line);
    border-radius: 12px;
    box-shadow: 0 2px 6px rgba(var(--lpf-shadow-rgb), 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.posts-grid article:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 36px -12px rgba(var(--lpf-shadow-rgb), 0.28);
    border-color: rgba(var(--lpf-accent-rgb), 0.45);
}

/* Cover images: featured images are 1280x896 (10:7), so match that ratio
   exactly — the whole image shows, nothing is cropped at any card width. */
.posts-grid .post-thumbnail {
    position: relative;
    aspect-ratio: 10 / 7;
    height: auto;
}

/* Safety net: if a future image has a different ratio, keep the top
   (where these banners carry their title text) rather than centre-cropping. */
.posts-grid .post-thumbnail img {
    object-position: center top;
}

/* Title — clamped to two lines so cards line up */
.posts-grid .entry-title {
    font-size: 19px;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.posts-grid .entry-title a {
    color: var(--lpf-ink);
}

.posts-grid .entry-title a:hover {
    color: var(--lpf-accent-strong);
}

/* Meta row */
.posts-grid .entry-meta {
    font-size: 12.5px;
    color: var(--lpf-faint);
    flex-wrap: wrap;
    row-gap: 4px;
}

.posts-grid .entry-meta i,
.reading-time i {
    color: var(--lpf-accent-mid);
}

.posts-grid .entry-meta .separator {
    color: var(--lpf-line);
}

/* Excerpt — clamped, and the link is pushed to the bottom of every card */
.posts-grid .entry-summary {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.posts-grid .entry-summary p {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 16px;
}

/* "Continue Reading" — text link with a sliding arrow, not a blue block */
.posts-grid .more-link {
    margin-top: auto;
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0;
    background: none;
    border-radius: 0;
    color: var(--lpf-accent-strong) !important;
    font-weight: 700;
    font-size: 14px;
    transition: gap 0.25s ease, color 0.25s ease;
}

.posts-grid .more-link:hover {
    background: none;
    /* accent-mid is lighter than the rest state, so contrast fell to
       3.74:1 on the white card exactly when the user was interacting.
       accent-deep darkens on hover instead, at 7.51:1. */
    color: var(--lpf-accent-deep) !important;
    gap: 12px;
}

/* ==========================================================================
   Pagination
   ========================================================================== */
.pagination .page-numbers,
.pagination a,
.pagination span {
    border-radius: 8px;
    padding: 10px 16px;
    font-weight: 600;
    border: 1px solid var(--lpf-line);
    transition: all 0.25s ease;
}

.pagination .page-numbers:hover,
.pagination a:hover,
.pagination .page-numbers.current,
.pagination .current {
    background: linear-gradient(135deg, var(--lpf-accent-mid) 0%, var(--lpf-accent-strong) 100%);
    border-color: transparent;
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(var(--lpf-accent-rgb), 0.3);
}

/* ==========================================================================
   Sidebar — one accent ramp; the theme used to mix two unrelated brand colours
   ========================================================================== */
.widget-area .widget,
.tabbed-widget {
    border-radius: 12px;
    border: 1px solid var(--lpf-line);
    box-shadow: 0 2px 8px rgba(var(--lpf-shadow-rgb), 0.05);
}

.tab-nav button:hover,
.tab-nav button.active {
    color: var(--lpf-accent-strong);
}

.tab-nav button:hover {
    background: rgba(var(--lpf-accent-rgb), 0.06);
}

.tab-nav button.active::after {
    background: var(--lpf-accent-mid);
}

.tabbed-widget .tab-pane ul li:hover {
    background: var(--lpf-accent-tint);
}

.tabbed-widget .tab-pane ul li a:hover {
    color: var(--lpf-accent-strong);
}


/* ==========================================================================
   Homepage responsive
   ========================================================================== */
@media (max-width: 768px) {
    body.home .posts-grid::before {
        font-size: 20px;
    }

    .posts-grid {
        gap: 20px;
    }

    .posts-grid .post-thumbnail {
        height: auto;
    }

    .posts-grid .entry-title {
        font-size: 17px;
    }
}

@media (max-width: 480px) {
    .posts-grid .post-thumbnail {
        height: auto;
    }
}


/* ==========================================================================
   Sidebar widgets
   ========================================================================== */
.widget-area .widget,
.widget-area .tabbed-widget {
    border-radius: 12px;
    border: 1px solid var(--lpf-line);
    box-shadow: 0 2px 8px rgba(var(--lpf-shadow-rgb), 0.05);
    overflow: hidden;
}

/* Headings: accent bar instead of a full underline */
.widget-area .widget-title,
.widget_categories .widget-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--lpf-ink) !important;
    border-bottom: none !important;
    padding-bottom: 0 !important;
    margin: 0 0 16px !important;
}

.widget-area .widget-title::before,
.widget_categories .widget-title::before {
    content: "";
    width: 4px;
    height: 18px;
    border-radius: 2px;
    background: linear-gradient(180deg, var(--lpf-accent-mid) 0%, var(--lpf-accent-strong) 100%);
    flex-shrink: 0;
}

/* --- Popular / Recent tabs --- */
.tab-nav {
    background: var(--lpf-surface-2);
    border-bottom: 1px solid var(--lpf-line) !important;
}

.tab-nav button {
    padding: 14px 12px;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--lpf-faint);
}

.tab-nav button:hover {
    color: var(--lpf-accent-strong);
    background: rgba(var(--lpf-accent-rgb), 0.06);
}

.tab-nav button.active {
    background: #ffffff;
    color: var(--lpf-accent-strong);
}

.tab-nav button.active::after {
    height: 3px;
    background: linear-gradient(90deg, var(--lpf-accent-mid) 0%, var(--lpf-accent-strong) 100%);
}

.tabbed-widget .tab-pane ul li {
    padding: 14px 18px !important;
    border-bottom: 1px solid var(--lpf-line-soft);
    border-left: 3px solid transparent;
    transition: background-color 0.25s ease, border-color 0.25s ease, padding-left 0.25s ease;
}

.tabbed-widget .tab-pane ul li:hover {
    background: var(--lpf-accent-tint);
    border-left-color: var(--lpf-accent-mid);
    padding-left: 22px !important;
}

.tabbed-widget .tab-pane ul li a {
    font-size: 14.5px;
    font-weight: 600;
    color: var(--lpf-ink);
    line-height: 1.45;
}

.tabbed-widget .tab-pane ul li a:hover {
    color: var(--lpf-accent-strong);
}

.tabbed-widget .tab-pane ul li .post-date {
    font-size: 12px;
    color: var(--lpf-faint);
    margin-top: 5px;
}

/* --- Categories --- */
/* The count is a sibling of the link, so the row needs to be the flex
   container — previously the badge dropped onto its own line. */
.widget_categories ul li {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    padding: 11px 10px !important;
    border-radius: 8px !important;
    border-bottom: 1px solid var(--lpf-line-soft) !important;
    transition: background-color 0.25s ease, padding-left 0.25s ease !important;
}

.widget_categories ul li:hover {
    background: var(--lpf-accent-tint) !important;
    padding-left: 14px !important;
}

.widget_categories ul li a {
    flex: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    font-size: 14.5px !important;
    font-weight: 600 !important;
}

.widget_categories ul li .count {
    flex-shrink: 0;
    margin: 0 !important;
    min-width: 26px !important;
    padding: 3px 9px !important;
    border-radius: 999px !important;
    background: rgba(var(--lpf-accent-rgb), 0.10) !important;
    border: 1px solid rgba(var(--lpf-accent-rgb), 0.22) !important;
    color: var(--lpf-accent-strong) !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em !important;
    box-shadow: none !important;
    transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease !important;
}

/* Fills with the brand gradient only when you hover the row */
.widget_categories ul li:hover .count {
    background: linear-gradient(135deg, var(--lpf-accent-mid) 0%, var(--lpf-accent-strong) 100%) !important;
    border-color: transparent !important;
    color: #ffffff !important;
    transform: none !important;
    box-shadow: 0 3px 8px rgba(var(--lpf-accent-rgb), 0.28) !important;
}

/* Fixed icon column keeps every category label on the same line-up */
.widget_categories ul li a::before {
    content: "\f07b" !important;
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
    font-size: 15px !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 22px !important;
    width: 22px !important;
    min-width: 22px !important;
    max-width: 22px !important;
    margin-right: 0 !important;
    color: var(--lpf-faint) !important;
    transition: color 0.25s ease !important;
}

.widget_categories ul li:hover a::before,
.widget_categories ul li a:hover::before {
    color: var(--lpf-accent-mid) !important;
    transform: none !important;
}

.widget_categories ul li a {
    min-width: 0 !important;
}

/* Category icons — matched on the exact slug.
   The theme's own rule targets [href*="linux"], which matches EVERY category
   because the domain contains "linux", and forces a Font Awesome 5 family that
   FA6 does not define — so each rule below sets its own family and weight.
   Icons are pre-mapped for categories that do not exist yet (AWS, Azure, CI/CD,
   Ansible, databases, ...): create the category and its icon appears. */
.widget_categories ul li a[href$="/category/aws/"]::before,
.widget_categories ul li a[href$="/category/amazon-web-services/"]::before,
.widget_categories ul li a[href$="/category/amazon/"]::before,
.widget_categories ul li a[href$="/category/azure/"]::before,
.widget_categories ul li a[href$="/category/microsoft-azure/"]::before,
.widget_categories ul li a[href$="/category/gcp/"]::before,
.widget_categories ul li a[href$="/category/google-cloud/"]::before,
.widget_categories ul li a[href$="/category/digitalocean/"]::before,
.widget_categories ul li a[href$="/category/cloudflare/"]::before,
.widget_categories ul li a[href$="/category/docker/"]::before,
.widget_categories ul li a[href$="/category/jenkins/"]::before,
.widget_categories ul li a[href$="/category/linux/"]::before,
.widget_categories ul li a[href$="/category/ubuntu/"]::before,
.widget_categories ul li a[href$="/category/centos/"]::before,
.widget_categories ul li a[href$="/category/rhel/"]::before,
.widget_categories ul li a[href$="/category/redhat/"]::before,
.widget_categories ul li a[href$="/category/fedora/"]::before,
.widget_categories ul li a[href$="/category/suse/"]::before,
.widget_categories ul li a[href$="/category/windows/"]::before,
.widget_categories ul li a[href$="/category/git/"]::before,
.widget_categories ul li a[href$="/category/github/"]::before,
.widget_categories ul li a[href$="/category/gitlab/"]::before,
.widget_categories ul li a[href$="/category/python/"]::before,
.widget_categories ul li a[href$="/category/nodejs/"]::before,
.widget_categories ul li a[href$="/category/php/"]::before,
.widget_categories ul li a[href$="/category/wordpress/"]::before {
    font-family: "Font Awesome 6 Brands" !important;
    font-weight: 400 !important;
}

.widget_categories ul li a[href$="/category/cloud/"]::before,
.widget_categories ul li a[href$="/category/cloud-infrastructure/"]::before,
.widget_categories ul li a[href$="/category/infrastructure/"]::before,
.widget_categories ul li a[href$="/category/migration/"]::before,
.widget_categories ul li a[href$="/category/kubernetes/"]::before,
.widget_categories ul li a[href$="/category/k8s/"]::before,
.widget_categories ul li a[href$="/category/eks/"]::before,
.widget_categories ul li a[href$="/category/aks/"]::before,
.widget_categories ul li a[href$="/category/gke/"]::before,
.widget_categories ul li a[href$="/category/containers/"]::before,
.widget_categories ul li a[href$="/category/helm/"]::before,
.widget_categories ul li a[href$="/category/terraform/"]::before,
.widget_categories ul li a[href$="/category/ansible/"]::before,
.widget_categories ul li a[href$="/category/automation/"]::before,
.widget_categories ul li a[href$="/category/ci-cd/"]::before,
.widget_categories ul li a[href$="/category/cicd/"]::before,
.widget_categories ul li a[href$="/category/pipelines/"]::before,
.widget_categories ul li a[href$="/category/devops/"]::before,
.widget_categories ul li a[href$="/category/gitops/"]::before,
.widget_categories ul li a[href$="/category/monitoring-tools/"]::before,
.widget_categories ul li a[href$="/category/monitoring/"]::before,
.widget_categories ul li a[href$="/category/observability/"]::before,
.widget_categories ul li a[href$="/category/prometheus/"]::before,
.widget_categories ul li a[href$="/category/grafana/"]::before,
.widget_categories ul li a[href$="/category/logging/"]::before,
.widget_categories ul li a[href$="/category/performance/"]::before,
.widget_categories ul li a[href$="/category/security/"]::before,
.widget_categories ul li a[href$="/category/devsecops/"]::before,
.widget_categories ul li a[href$="/category/compliance/"]::before,
.widget_categories ul li a[href$="/category/bash/"]::before,
.widget_categories ul li a[href$="/category/shell/"]::before,
.widget_categories ul li a[href$="/category/scripting/"]::before,
.widget_categories ul li a[href$="/category/programming/"]::before,
.widget_categories ul li a[href$="/category/api/"]::before,
.widget_categories ul li a[href$="/category/database/"]::before,
.widget_categories ul li a[href$="/category/mysql/"]::before,
.widget_categories ul li a[href$="/category/mariadb/"]::before,
.widget_categories ul li a[href$="/category/postgresql/"]::before,
.widget_categories ul li a[href$="/category/mongodb/"]::before,
.widget_categories ul li a[href$="/category/redis/"]::before,
.widget_categories ul li a[href$="/category/storage/"]::before,
.widget_categories ul li a[href$="/category/backup/"]::before,
.widget_categories ul li a[href$="/category/networking/"]::before,
.widget_categories ul li a[href$="/category/network/"]::before,
.widget_categories ul li a[href$="/category/server/"]::before,
.widget_categories ul li a[href$="/category/nginx/"]::before,
.widget_categories ul li a[href$="/category/apache/"]::before,
.widget_categories ul li a[href$="/category/virtualization/"]::before,
.widget_categories ul li a[href$="/category/vmware/"]::before,
.widget_categories ul li a[href$="/category/tutorials/"]::before,
.widget_categories ul li a[href$="/category/guides/"]::before,
.widget_categories ul li a[href$="/category/news/"]::before,
.widget_categories ul li a[href$="/category/tips/"]::before,
.widget_categories ul li a[href$="/category/ai/"]::before,
.widget_categories ul li a[href$="/category/machine-learning/"]::before,
.widget_categories ul li a[href$="/category/finops/"]::before,
.widget_categories ul li a[href$="/category/cost-optimization/"]::before,
.widget_categories ul li a[href$="/category/troubleshooting/"]::before,
.widget_categories ul li a[href$="/category/uncategorized/"]::before {
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
}

.widget_categories ul li a[href$="/category/aws/"]::before { content: "\f375" !important; }
.widget_categories ul li a[href$="/category/amazon-web-services/"]::before { content: "\f375" !important; }
.widget_categories ul li a[href$="/category/amazon/"]::before { content: "\f375" !important; }
.widget_categories ul li a[href$="/category/azure/"]::before { content: "\f3ca" !important; }
.widget_categories ul li a[href$="/category/microsoft-azure/"]::before { content: "\f3ca" !important; }
.widget_categories ul li a[href$="/category/gcp/"]::before { content: "\f1a0" !important; }
.widget_categories ul li a[href$="/category/google-cloud/"]::before { content: "\f1a0" !important; }
.widget_categories ul li a[href$="/category/digitalocean/"]::before { content: "\f391" !important; }
.widget_categories ul li a[href$="/category/cloudflare/"]::before { content: "\e07d" !important; }
.widget_categories ul li a[href$="/category/docker/"]::before { content: "\f395" !important; }
.widget_categories ul li a[href$="/category/jenkins/"]::before { content: "\f3b6" !important; }
.widget_categories ul li a[href$="/category/linux/"]::before { content: "\f17c" !important; }
.widget_categories ul li a[href$="/category/ubuntu/"]::before { content: "\f7df" !important; }
.widget_categories ul li a[href$="/category/centos/"]::before { content: "\f789" !important; }
.widget_categories ul li a[href$="/category/rhel/"]::before { content: "\f7bc" !important; }
.widget_categories ul li a[href$="/category/redhat/"]::before { content: "\f7bc" !important; }
.widget_categories ul li a[href$="/category/fedora/"]::before { content: "\f798" !important; }
.widget_categories ul li a[href$="/category/suse/"]::before { content: "\f7d6" !important; }
.widget_categories ul li a[href$="/category/windows/"]::before { content: "\f17a" !important; }
.widget_categories ul li a[href$="/category/git/"]::before { content: "\f841" !important; }
.widget_categories ul li a[href$="/category/github/"]::before { content: "\f09b" !important; }
.widget_categories ul li a[href$="/category/gitlab/"]::before { content: "\f296" !important; }
.widget_categories ul li a[href$="/category/python/"]::before { content: "\f3e2" !important; }
.widget_categories ul li a[href$="/category/nodejs/"]::before { content: "\f3d3" !important; }
.widget_categories ul li a[href$="/category/php/"]::before { content: "\f457" !important; }
.widget_categories ul li a[href$="/category/wordpress/"]::before { content: "\f19a" !important; }
.widget_categories ul li a[href$="/category/cloud/"]::before { content: "\f0c2" !important; }
.widget_categories ul li a[href$="/category/cloud-infrastructure/"]::before { content: "\f0c2" !important; }
.widget_categories ul li a[href$="/category/infrastructure/"]::before { content: "\f0c2" !important; }
.widget_categories ul li a[href$="/category/migration/"]::before { content: "\f362" !important; }
.widget_categories ul li a[href$="/category/kubernetes/"]::before { content: "\f1b3" !important; }
.widget_categories ul li a[href$="/category/k8s/"]::before { content: "\f1b3" !important; }
.widget_categories ul li a[href$="/category/eks/"]::before { content: "\f1b3" !important; }
.widget_categories ul li a[href$="/category/aks/"]::before { content: "\f1b3" !important; }
.widget_categories ul li a[href$="/category/gke/"]::before { content: "\f1b3" !important; }
.widget_categories ul li a[href$="/category/containers/"]::before { content: "\f468" !important; }
.widget_categories ul li a[href$="/category/helm/"]::before { content: "\f21a" !important; }
.widget_categories ul li a[href$="/category/terraform/"]::before { content: "\f542" !important; }
.widget_categories ul li a[href$="/category/ansible/"]::before { content: "\f085" !important; }
.widget_categories ul li a[href$="/category/automation/"]::before { content: "\f085" !important; }
.widget_categories ul li a[href$="/category/ci-cd/"]::before { content: "\f021" !important; }
.widget_categories ul li a[href$="/category/cicd/"]::before { content: "\f021" !important; }
.widget_categories ul li a[href$="/category/pipelines/"]::before { content: "\f021" !important; }
.widget_categories ul li a[href$="/category/devops/"]::before { content: "\f534" !important; }
.widget_categories ul li a[href$="/category/gitops/"]::before { content: "\f126" !important; }
.widget_categories ul li a[href$="/category/monitoring-tools/"]::before { content: "\f201" !important; }
.widget_categories ul li a[href$="/category/monitoring/"]::before { content: "\f201" !important; }
.widget_categories ul li a[href$="/category/observability/"]::before { content: "\f201" !important; }
.widget_categories ul li a[href$="/category/prometheus/"]::before { content: "\f1fe" !important; }
.widget_categories ul li a[href$="/category/grafana/"]::before { content: "\f1fe" !important; }
.widget_categories ul li a[href$="/category/logging/"]::before { content: "\f15c" !important; }
.widget_categories ul li a[href$="/category/performance/"]::before { content: "\f625" !important; }
.widget_categories ul li a[href$="/category/security/"]::before { content: "\f3ed" !important; }
.widget_categories ul li a[href$="/category/devsecops/"]::before { content: "\f3ed" !important; }
.widget_categories ul li a[href$="/category/compliance/"]::before { content: "\f46c" !important; }
.widget_categories ul li a[href$="/category/bash/"]::before { content: "\f120" !important; }
.widget_categories ul li a[href$="/category/shell/"]::before { content: "\f120" !important; }
.widget_categories ul li a[href$="/category/scripting/"]::before { content: "\f120" !important; }
.widget_categories ul li a[href$="/category/programming/"]::before { content: "\f121" !important; }
.widget_categories ul li a[href$="/category/api/"]::before { content: "\f121" !important; }
.widget_categories ul li a[href$="/category/database/"]::before { content: "\f1c0" !important; }
.widget_categories ul li a[href$="/category/mysql/"]::before { content: "\f1c0" !important; }
.widget_categories ul li a[href$="/category/mariadb/"]::before { content: "\f1c0" !important; }
.widget_categories ul li a[href$="/category/postgresql/"]::before { content: "\f1c0" !important; }
.widget_categories ul li a[href$="/category/mongodb/"]::before { content: "\f1c0" !important; }
.widget_categories ul li a[href$="/category/redis/"]::before { content: "\f1c0" !important; }
.widget_categories ul li a[href$="/category/storage/"]::before { content: "\f0a0" !important; }
.widget_categories ul li a[href$="/category/backup/"]::before { content: "\f187" !important; }
.widget_categories ul li a[href$="/category/networking/"]::before { content: "\f6ff" !important; }
.widget_categories ul li a[href$="/category/network/"]::before { content: "\f6ff" !important; }
.widget_categories ul li a[href$="/category/server/"]::before { content: "\f233" !important; }
.widget_categories ul li a[href$="/category/nginx/"]::before { content: "\f233" !important; }
.widget_categories ul li a[href$="/category/apache/"]::before { content: "\f233" !important; }
.widget_categories ul li a[href$="/category/virtualization/"]::before { content: "\f390" !important; }
.widget_categories ul li a[href$="/category/vmware/"]::before { content: "\f390" !important; }
.widget_categories ul li a[href$="/category/tutorials/"]::before { content: "\f518" !important; }
.widget_categories ul li a[href$="/category/guides/"]::before { content: "\f518" !important; }
.widget_categories ul li a[href$="/category/news/"]::before { content: "\f1ea" !important; }
.widget_categories ul li a[href$="/category/tips/"]::before { content: "\f0eb" !important; }
.widget_categories ul li a[href$="/category/ai/"]::before { content: "\f5dc" !important; }
.widget_categories ul li a[href$="/category/machine-learning/"]::before { content: "\f5dc" !important; }
.widget_categories ul li a[href$="/category/finops/"]::before { content: "" !important; }
.widget_categories ul li a[href$="/category/cost-optimization/"]::before { content: "" !important; }
.widget_categories ul li a[href$="/category/troubleshooting/"]::before { content: "\f7d9" !important; }
.widget_categories ul li a[href$="/category/uncategorized/"]::before { content: "\f07b" !important; }

/* Debian has no brand icon in Font Awesome 6 Free — fall back to Tux. */
.widget_categories ul li a[href$="/category/debian/"]::before {
    content: "\f17c" !important;
    font-family: "Font Awesome 6 Brands" !important;
    font-weight: 400 !important;
}


/* ==========================================================================
   Footer
   ========================================================================== */
footer.site-footer-new {
    background: linear-gradient(180deg, var(--lpf-chrome-3) 0%, var(--lpf-chrome-2) 100%) !important;
    border-top: 3px solid var(--lpf-accent-mid);
}

footer.site-footer-new .footer-grid {
    grid-template-columns: 1.3fr 1.1fr 0.9fr !important;
    gap: 48px !important;
    padding: 56px 0 44px !important;
}

footer.site-footer-new .footer-heading {
    position: relative;
    font-size: 15px !important;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    border-bottom: none !important;
    padding: 0 0 0 14px !important;
    margin-bottom: 18px !important;
}

footer.site-footer-new .footer-heading::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 16px;
    border-radius: 2px;
    background: linear-gradient(180deg, var(--lpf-accent-mid) 0%, var(--lpf-accent-strong) 100%);
}

footer.site-footer-new .footer-heading-space {
    margin-top: 34px !important;
}

/* Newsletter */
footer.site-footer-new .footer-email-input {
    border-radius: 8px !important;
    padding: 13px 16px !important;
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    transition: background-color 0.25s ease, border-color 0.25s ease !important;
}

footer.site-footer-new .footer-email-input:focus {
    outline: none;
    background: rgba(255, 255, 255, 0.12) !important;
    border-color: rgba(var(--lpf-accent-rgb), 0.8) !important;
}

footer.site-footer-new .footer-subscribe-btn {
    background: linear-gradient(135deg, var(--lpf-accent-mid) 0%, var(--lpf-accent-strong) 100%) !important;
    border-radius: 8px !important;
    letter-spacing: 0.04em;
    transition: filter 0.25s ease, transform 0.2s ease, box-shadow 0.25s ease !important;
}

footer.site-footer-new .footer-subscribe-btn:hover {
    filter: brightness(1.07);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(var(--lpf-accent-rgb), 0.35);
}

/* Link lists — chevron marker, slide on hover */
footer.site-footer-new .footer-posts-list a,
footer.site-footer-new .footer-links-list a {
    display: block;
    position: relative;
    padding-left: 16px;
    transition: color 0.25s ease, padding-left 0.25s ease !important;
}

footer.site-footer-new .footer-posts-list a::before,
footer.site-footer-new .footer-links-list a::before {
    content: "\203A";
    position: absolute;
    left: 0;
    top: -1px;
    color: var(--lpf-accent-mid);
    font-weight: 700;
    font-size: 16px;
}

footer.site-footer-new .footer-posts-list a:hover,
footer.site-footer-new .footer-links-list a:hover {
    color: #ffffff !important;
    padding-left: 22px;
}

footer.site-footer-new .footer-posts-list li {
    margin-bottom: 14px !important;
    padding-bottom: 14px !important;
}

footer.site-footer-new .footer-links-list li {
    margin-bottom: 12px !important;
}

/* Social buttons */
footer.site-footer-new .footer-social-link {
    border-radius: 8px !important;
    transition: background 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease !important;
}

footer.site-footer-new .footer-social-link:hover {
    background: linear-gradient(135deg, var(--lpf-accent-mid) 0%, var(--lpf-accent-strong) 100%) !important;
    border-color: transparent !important;
    transform: translateY(-3px);
    box-shadow: 0 8px 18px rgba(var(--lpf-accent-rgb), 0.35);
}

/* Copyright strip */
footer.site-footer-new .footer-copyright {
    background: rgba(0, 0, 0, 0.18) !important;
    padding: 20px 0 !important;
}

footer.site-footer-new .footer-copyright a:hover {
    color: var(--lpf-accent-mid) !important;
}

@media (max-width: 992px) {
    footer.site-footer-new .footer-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 36px !important;
    }
}

@media (max-width: 768px) {
    footer.site-footer-new .footer-grid {
        grid-template-columns: 1fr !important;
        gap: 32px !important;
        padding: 40px 0 36px !important;
    }
}

/* ==========================================================================
   Header — sticky navigation and a tighter brand bar
   ========================================================================== */

/* The theme sets overflow-x:hidden on html/body, which turns them into scroll
   containers and kills position:sticky. `clip` hides overflow without that
   side effect, so the nav can stick. */
@supports (overflow: clip) {
    html,
    body {
        overflow-x: clip;
    }
}

.site-header {
    padding: 16px 0 !important;
}

.site-branding .site-logo {
    max-height: 68px;
    transition: opacity 0.25s ease;
}

.site-branding .logo-link:hover .site-logo {
    opacity: 0.88;
}

/* Nav pins to the top once the brand bar scrolls away */
.main-navigation {
    position: sticky;
    top: 0;
    z-index: 500;
}

/* ==========================================================================
   Single post — reading progress, header, typography
   ========================================================================== */

/* Scroll-linked progress bar (Chrome/Edge; simply absent elsewhere) */
@supports (animation-timeline: scroll()) {
    body.single::before {
        content: "";
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        z-index: 9998;
        background: linear-gradient(90deg, var(--lpf-accent-mid) 0%, var(--lpf-accent-strong) 100%);
        transform: scaleX(0);
        transform-origin: 0 50%;
        animation: lpf-read-progress linear both;
        animation-timeline: scroll(root);
    }

    @keyframes lpf-read-progress {
        to { transform: scaleX(1); }
    }
}

/* --- Title block --- */
.single .entry-header {
    position: relative;
    border-bottom: none !important;
    padding-bottom: 22px;
    margin-bottom: 28px;
}

.single .entry-header::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 72px;
    height: 4px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--lpf-accent-mid) 0%, var(--lpf-accent-strong) 100%);
}

.single .entry-title {
    font-size: 37px !important;
    line-height: 1.22 !important;
    letter-spacing: -0.02em;
    color: var(--lpf-ink) !important;
}

/* Meta as chips rather than pipe-separated text */
.single .entry-meta {
    gap: 8px;
    flex-wrap: wrap;
}

.single .entry-meta > span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 13px;
    border-radius: 999px;
    background: var(--lpf-surface-2);
    border: 1px solid var(--lpf-line);
    font-size: 13px;
    color: var(--lpf-muted);
}

.single .entry-meta .separator {
    display: none !important;
}

.single .entry-meta i {
    color: var(--lpf-accent-mid);
}

.single .entry-meta a {
    color: var(--lpf-muted);
}

/* --- Featured image --- */
.single .post-thumbnail img {
    border-radius: 12px !important;
    box-shadow: 0 16px 36px -14px rgba(var(--lpf-shadow-rgb), 0.35) !important;
}

/* --- Body copy --- */
.single .entry-content {
    font-size: 16px;
    line-height: 1.85;
    color: var(--lpf-body);
}

.single .entry-content > p:first-of-type {
    color: var(--lpf-body);
}

.single .entry-content h2 {
    font-size: 24px !important;
    margin-top: 46px !important;
    padding: 0 0 0 15px !important;
    border-bottom: none !important;
    border-left: 4px solid var(--lpf-accent-mid);
    line-height: 1.3;
}

.single .entry-content h3 {
    font-size: 19px !important;
    color: var(--lpf-accent-strong) !important;
    margin-top: 34px !important;
}

/* Links follow the brand instead of the theme's stock blue */
.single .entry-content a {
    color: var(--lpf-accent-strong);
    text-decoration: underline;
    text-decoration-color: rgba(var(--lpf-accent-strong-rgb), 0.35);
    text-underline-offset: 3px;
    border-bottom: none !important;
}

.single .entry-content a:hover {
    color: var(--lpf-accent-strong);
    text-decoration-color: var(--lpf-accent-strong);
}

/* --- Code blocks: terminal chrome ---
   Painted with backgrounds rather than pseudo-elements so the title bar stays
   put when a long command scrolls the block sideways. */
.single .entry-content pre {
    position: relative;
    padding-top: 46px !important;
    border-left: 4px solid var(--lpf-accent-mid) !important;
    background-color: var(--lpf-code-bg) !important;
    background-image:
        radial-gradient(circle 4px at 18px 16px, #ff5f57 99%, transparent 100%),
        radial-gradient(circle 4px at 36px 16px, #febc2e 99%, transparent 100%),
        radial-gradient(circle 4px at 54px 16px, #28c840 99%, transparent 100%),
        linear-gradient(var(--lpf-code-bar) 0 32px, transparent 32px) !important;
    background-repeat: no-repeat !important;
    box-shadow: 0 8px 22px -10px rgba(var(--lpf-shadow-rgb), 0.45) !important;
}

/* --- Blockquotes --- */
.single .entry-content blockquote {
    background: var(--lpf-accent-tint) !important;
    border-left: 5px solid var(--lpf-accent-mid) !important;
    border-radius: 0 10px 10px 0;
}

/* --- Author box --- */
.author-bio-box {
    border-radius: 14px !important;
    border-color: var(--lpf-line) !important;
    background: linear-gradient(180deg, var(--lpf-surface-2) 0%, var(--lpf-surface-2) 100%) !important;
    padding: 28px !important;
}

.author-avatar img {
    border: 3px solid #ffffff;
    box-shadow: 0 0 0 3px rgba(var(--lpf-accent-rgb), 0.35), 0 8px 20px rgba(var(--lpf-shadow-rgb), 0.12);
}

.author-name {
    font-size: 20px !important;
}

.author-name::before {
    content: "Written by";
    display: block;
    margin-bottom: 4px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--lpf-faint);
}

/* --- Previous / next --- */
.post-navigation-optimized .nav-item {
    border-radius: 12px !important;
    border-color: var(--lpf-line) !important;
}

.post-navigation-optimized .nav-item:hover {
    border-color: rgba(var(--lpf-accent-rgb), 0.5) !important;
    box-shadow: 0 16px 32px -14px rgba(var(--lpf-shadow-rgb), 0.3) !important;
}

.post-navigation-optimized .nav-thumb {
    border-radius: 8px !important;
}

.post-navigation-optimized .nav-label {
    color: var(--lpf-faint) !important;
}

.post-navigation-optimized .nav-label i {
    color: var(--lpf-accent-mid);
}

.post-navigation-optimized .nav-item:hover .nav-title {
    color: var(--lpf-accent-strong) !important;
}

/* --- Related posts --- */
.related-posts h3 {
    position: relative;
    border-bottom: none !important;
    padding-bottom: 14px !important;
}

.related-posts h3::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 72px;
    height: 4px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--lpf-accent-mid) 0%, var(--lpf-accent-strong) 100%);
}

.related-post-item {
    border-radius: 12px !important;
    border-color: var(--lpf-line) !important;
}

.related-post-item:hover {
    border-color: rgba(var(--lpf-accent-rgb), 0.45) !important;
    box-shadow: 0 16px 36px -12px rgba(var(--lpf-shadow-rgb), 0.28) !important;
}

/* Same crop fix as the homepage cards: match the 10:7 images */
.related-post-thumbnail {
    height: auto !important;
    aspect-ratio: 10 / 7;
}

.related-post-thumbnail img {
    object-position: center top;
}

.related-post-title {
    font-size: 16px !important;
    line-height: 1.45 !important;
}

.related-post-title a:hover {
    color: var(--lpf-accent-strong) !important;
}

/* ==========================================================================
   Header / single post — responsive
   ========================================================================== */
@media (max-width: 768px) {
    .site-header {
        padding: 12px 0 !important;
    }

    .single .entry-title {
        font-size: 25px !important;
    }

    .single .entry-content {
        font-size: 16px;
    }

    .single .entry-content h2 {
        font-size: 21px !important;
        margin-top: 34px !important;
    }

    .single .entry-content pre {
        padding-top: 42px !important;
    }

    .single .entry-meta > span {
        font-size: 12px;
        padding: 4px 10px;
    }
}

/* ==========================================================================
   Static pages (About, Contact, Sitemap)
   ========================================================================== */
.page article.page {
    border: 1px solid var(--lpf-line);
    border-radius: 14px !important;
    box-shadow: 0 2px 10px rgba(var(--lpf-shadow-rgb), 0.06) !important;
    padding: 44px !important;
}

.page .entry-header {
    position: relative;
    border-bottom: none !important;
    padding-bottom: 22px !important;
    margin-bottom: 30px !important;
}

.page .entry-header::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 72px;
    height: 4px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--lpf-accent-mid) 0%, var(--lpf-accent-strong) 100%);
}

.page .entry-title {
    font-size: 34px !important;
    letter-spacing: -0.02em;
    color: var(--lpf-ink) !important;
}

.page .entry-content {
    font-size: 16px !important;
    line-height: 1.85 !important;
    color: var(--lpf-body) !important;
}

.page .entry-content > p:first-of-type {
    color: var(--lpf-body);
}

.page .entry-content h2 {
    font-size: 24px !important;
    margin: 42px 0 18px !important;
    padding: 0 0 0 15px !important;
    border-bottom: none !important;
    border-left: 4px solid var(--lpf-accent-mid);
    line-height: 1.3;
}

.page .entry-content h3 {
    font-size: 19px !important;
    color: var(--lpf-accent-strong) !important;
    margin: 28px 0 12px !important;
}

/* Lists with brand markers */
.page .entry-content ul {
    list-style: none !important;
    padding-left: 4px !important;
}

.page .entry-content ul li {
    position: relative;
    padding-left: 28px;
    margin-bottom: 12px !important;
}

.page .entry-content a {
    color: var(--lpf-accent-strong) !important;
    text-decoration: underline;
    text-decoration-color: rgba(var(--lpf-accent-strong-rgb), 0.35);
    text-underline-offset: 3px;
}

.page .entry-content a:hover {
    color: var(--lpf-accent-strong) !important;
    text-decoration-color: var(--lpf-accent-strong);
}

.page .entry-content blockquote {
    background: var(--lpf-accent-tint) !important;
    border-left: 5px solid var(--lpf-accent-mid) !important;
    border-radius: 0 10px 10px 0;
}

/* ==========================================================================
   Sitemap page
   ========================================================================== */
.lpf-sitemap {
    margin-top: 4px;
}

.lpf-sm-block {
    margin-bottom: 44px;
}

.lpf-sm-block:last-child {
    margin-bottom: 0;
}

.lpf-sm-heading {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 22px !important;
    font-weight: 700;
    color: var(--lpf-ink) !important;
    margin: 0 0 20px !important;
    padding: 0 0 0 15px !important;
    border-left: 4px solid var(--lpf-accent-mid);
    border-bottom: none !important;
}

.lpf-sm-total,
.lpf-sm-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    padding: 3px 9px;
    border-radius: 999px;
    background: rgba(var(--lpf-accent-rgb), 0.10);
    border: 1px solid rgba(var(--lpf-accent-rgb), 0.22);
    color: var(--lpf-accent-strong);
    font-size: 11.5px;
    font-weight: 700;
}

.lpf-sm-note {
    margin: -8px 0 20px !important;
    font-size: 14px !important;
    color: var(--lpf-faint) !important;
}

/* Page links */
.lpf-sm-links {
    list-style: none !important;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 0 !important;
    margin: 0 !important;
}

.lpf-sm-links li {
    margin: 0 !important;
    padding: 0 !important;
}

.lpf-sm-links li::before {
    display: none !important;
}

.lpf-sm-links a {
    display: inline-block;
    padding: 9px 16px;
    border-radius: 8px;
    background: var(--lpf-surface-2);
    border: 1px solid var(--lpf-line);
    color: var(--lpf-ink) !important;
    font-weight: 600;
    font-size: 14.5px;
    text-decoration: none !important;
    transition: all 0.25s ease;
}

.lpf-sm-links a:hover {
    background: linear-gradient(135deg, var(--lpf-accent-mid) 0%, var(--lpf-accent-strong) 100%);
    border-color: transparent;
    color: #ffffff !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(var(--lpf-accent-rgb), 0.3);
}

/* Category chips */
.lpf-sm-cats {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.lpf-sm-cat {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 9px 14px;
    border-radius: 999px;
    background: #ffffff;
    border: 1px solid var(--lpf-line);
    color: var(--lpf-ink) !important;
    font-weight: 600;
    font-size: 14.5px;
    text-decoration: none !important;
    transition: all 0.25s ease;
}

.lpf-sm-cat:hover {
    border-color: rgba(var(--lpf-accent-rgb), 0.5);
    color: var(--lpf-accent-strong) !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(var(--lpf-shadow-rgb), 0.1);
}

/* Per-category article lists */
.lpf-sm-group {
    margin-bottom: 30px;
    padding: 22px 24px;
    background: var(--lpf-surface-2);
    border: 1px solid var(--lpf-line-soft);
    border-radius: 12px;
    scroll-margin-top: 110px;
}

.lpf-sm-subheading {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 17px !important;
    margin: 0 0 14px !important;
    color: var(--lpf-ink) !important;
}

.lpf-sm-subheading a {
    color: var(--lpf-ink) !important;
    text-decoration: none !important;
}

.lpf-sm-subheading a:hover {
    color: var(--lpf-accent-strong) !important;
}

.lpf-sm-posts {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.lpf-sm-posts li {
    padding: 9px 0 !important;
    margin: 0 !important;
    border-bottom: 1px dashed var(--lpf-line);
}

.lpf-sm-posts li:last-child {
    border-bottom: none;
}

.lpf-sm-posts li::before {
    display: none !important;
}

.lpf-sm-posts a {
    color: var(--lpf-body) !important;
    font-size: 15px;
    font-weight: 500;
    text-decoration: none !important;
    transition: color 0.2s ease, padding-left 0.2s ease;
}

.lpf-sm-posts a:hover {
    color: var(--lpf-accent-strong) !important;
    padding-left: 5px;
}

@media (max-width: 768px) {
    .page article.page {
        padding: 24px !important;
    }

    .page .entry-title {
        font-size: 25px !important;
    }

    .page .entry-content {
        font-size: 16px !important;
    }

    .page .entry-content h2 {
        font-size: 20px !important;
    }

    .lpf-sm-heading {
        font-size: 19px !important;
    }

    .lpf-sm-group {
        padding: 16px 16px;
    }
}

/* ==========================================================================
   Mobile header — search collapses behind a button
   ========================================================================== */
.search-toggle-btn {
    display: none;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 38px;
    flex-shrink: 0;
    padding: 0;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 6px;
    color: var(--lpf-on-dark);
    font-size: 15px;
    cursor: pointer;
    transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.search-toggle-btn.is-open {
    background: linear-gradient(135deg, var(--lpf-accent-mid) 0%, var(--lpf-accent-strong) 100%);
    border-color: transparent;
    color: #ffffff;
}

@media (max-width: 768px) {
    .search-toggle-btn {
        display: inline-flex;
    }

    /* The hamburger lives in the brand bar, so that bar is what must stick */
    .site-header {
        position: sticky;
        top: 0;
        z-index: 501;
        padding: 10px 0 !important;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.22);
    }

    .main-navigation {
        position: static;
    }

    .site-header .container {
        gap: 10px;
    }

    .site-branding .site-logo {
        max-height: 44px;
    }

    /* Search is hidden until the magnifier is tapped */
    .nav-search {
        display: none;
        margin: 0 !important;
        padding: 12px 0 14px;
    }

    .main-navigation.search-open .nav-search {
        display: block;
        animation: lpf-slide-down 0.25s ease;
    }

    .nav-search .search-form {
        max-width: 100%;
    }

    .main-navigation.toggled #primary-menu {
        animation: lpf-slide-down 0.25s ease;
        padding: 6px 0 10px;
    }

    @keyframes lpf-slide-down {
        from { opacity: 0; transform: translateY(-6px); }
        to   { opacity: 1; transform: translateY(0); }
    }
}

/* ==========================================================================
   Sidebar author card
   ========================================================================== */
.lpf-author-card {
    padding: 22px !important;
    text-align: left;
    background: linear-gradient(180deg, #ffffff 0%, var(--lpf-surface-2) 100%) !important;
}

.lpf-ac-top {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 14px;
}

.lpf-ac-avatar {
    width: 62px !important;
    height: 62px !important;
    border-radius: 50% !important;
    border: 3px solid #ffffff;
    box-shadow: 0 0 0 3px rgba(var(--lpf-accent-rgb), 0.35);
    flex-shrink: 0;
}

.lpf-ac-eyebrow {
    display: block;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--lpf-faint);
    margin-bottom: 3px;
}

.lpf-ac-name {
    display: block;
    font-size: 18px;
    font-weight: 700;
    color: var(--lpf-ink);
    line-height: 1.25;
}

.lpf-ac-bio {
    font-size: 14px !important;
    line-height: 1.65 !important;
    color: var(--lpf-muted) !important;
    margin: 0 0 16px !important;
}

.lpf-ac-btn {
    display: block;
    text-align: center;
    padding: 10px 16px;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--lpf-accent-mid) 0%, var(--lpf-accent-strong) 100%);
    color: #ffffff !important;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none !important;
    transition: filter 0.25s ease, transform 0.2s ease, box-shadow 0.25s ease;
}

.lpf-ac-btn:hover {
    filter: brightness(1.07);
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(var(--lpf-accent-rgb), 0.32);
}

.lpf-ac-social {
    display: flex;
    gap: 8px;
    margin-top: 14px;
}

.lpf-ac-social a {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: var(--lpf-surface-2);
    border: 1px solid var(--lpf-line);
    color: var(--lpf-muted) !important;
    font-size: 13px;
    text-decoration: none !important;
    transition: all 0.25s ease;
}

.lpf-ac-social a:hover {
    background: linear-gradient(135deg, var(--lpf-accent-mid) 0%, var(--lpf-accent-strong) 100%);
    border-color: transparent;
    color: #ffffff !important;
    transform: translateY(-2px);
}


/* ==========================================================================
   Sidebar order + consulting card
   ========================================================================== */

/* The tabbed widget is hardcoded in sidebar.php before the widget area, so
   DOM order alone cannot put the author card first. Flex ordering gives a
   deliberate sequence: who I am -> what to read -> hire me -> browse topics. */
.widget-area {
    display: flex;
    flex-direction: column;
}

.widget-area .lpf-author-card { order: 1; }
.widget-area .tabbed-widget   { order: 2; }
.widget-area .lpf-cta-card    { order: 3; }
.widget-area .widget_categories { order: 4; }
.widget-area .widget { order: 5; }

/* --- Consulting card: dark, so it stands out among the white widgets --- */
.lpf-cta-card {
    position: relative;
    overflow: hidden;
    padding: 24px 22px !important;
    border-radius: 12px !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    background: linear-gradient(160deg, var(--lpf-chrome-3) 0%, var(--lpf-chrome) 100%) !important;
    box-shadow: 0 14px 30px -16px rgba(var(--lpf-shadow-rgb), 0.55) !important;
}

.lpf-cta-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--lpf-accent-mid) 0%, var(--lpf-accent-strong) 100%);
}

.lpf-cta-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    padding: 5px 12px;
    border-radius: 999px;
    background: rgba(var(--lpf-warm-rgb), 0.12);
    border: 1px solid rgba(var(--lpf-warm-rgb), 0.35);
    color: var(--lpf-warm-soft);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.lpf-cta-badge .dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--lpf-warm);
    animation: lpf-cta-pulse 2s infinite;
}

@keyframes lpf-cta-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(var(--lpf-warm-rgb), 0.5); }
    70%  { box-shadow: 0 0 0 7px rgba(var(--lpf-warm-rgb), 0); }
    100% { box-shadow: 0 0 0 0 rgba(var(--lpf-warm-rgb), 0); }
}

.lpf-cta-title {
    margin: 0 0 10px !important;
    color: #ffffff !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    border: none !important;
    padding: 0 !important;
}

.lpf-cta-text {
    margin: 0 0 15px !important;
    color: var(--lpf-on-dark-muted) !important;
    font-size: 14px !important;
    line-height: 1.65 !important;
}

.lpf-cta-list {
    list-style: none !important;
    margin: 0 0 18px !important;
    padding: 0 !important;
}

.lpf-cta-list li {
    position: relative;
    margin: 0 0 9px !important;
    padding: 0 0 0 24px !important;
    border: none !important;
    color: var(--lpf-on-dark-muted);
    font-size: 13.5px;
    line-height: 1.5;
}

.lpf-cta-list li::before {
    content: "\f00c";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    left: 0;
    top: 2px;
    font-size: 11px;
    color: var(--lpf-accent-mid);
}

.lpf-cta-btn {
    display: block;
    text-align: center;
    padding: 12px 16px;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--lpf-accent-mid) 0%, var(--lpf-accent-strong) 100%);
    color: #ffffff !important;
    font-size: 14.5px;
    font-weight: 700;
    text-decoration: none !important;
    transition: filter 0.25s ease, transform 0.2s ease, box-shadow 0.25s ease;
}

.lpf-cta-btn:hover {
    filter: brightness(1.08);
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(var(--lpf-accent-rgb), 0.38);
}

.lpf-cta-alt {
    display: block;
    text-align: center;
    margin-top: 11px;
    color: var(--lpf-on-dark-muted) !important;
    font-size: 13px;
    text-decoration: none !important;
    transition: color 0.25s ease;
}

.lpf-cta-alt:hover {
    color: #ffffff !important;
    text-decoration: underline !important;
}

/* ==========================================================================
   Menu icons + info strip
   ========================================================================== */

/* Topic icons in the menu, matching the sidebar. Hidden below 1200px so the
   seven items never wrap onto a second line on smaller laptops. */
@media (min-width: 1200px) {
    .main-navigation #primary-menu > li > a::before {
        font-family: "Font Awesome 6 Free";
        font-weight: 900;
        font-size: 12.5px;
        margin-right: 8px;
        opacity: 0.72;
        transition: opacity 0.25s ease;
    }

    .main-navigation #primary-menu > li > a:hover::before,
    .main-navigation #primary-menu > li.current-menu-item > a::before {
        opacity: 1;
    }

    .main-navigation #primary-menu > li:first-child > a::before { content: "\f015"; }
    .main-navigation #primary-menu > li > a[href$="/about-me/"]::before { content: "\f007"; }
    .main-navigation #primary-menu > li > a[href$="/contact/"]::before { content: "\f0e0"; }
    .main-navigation #primary-menu > li > a[href$="/category/devops/"]::before { content: "\f534"; }
    .main-navigation #primary-menu > li > a[href$="/category/kubernetes/"]::before { content: "\f1b3"; }
    .main-navigation #primary-menu > li > a[href$="/category/terraform/"]::before { content: "\f542"; }
    .main-navigation #primary-menu > li > a[href$="/category/monitoring-tools/"]::before { content: "\f201"; }
    .main-navigation #primary-menu > li > a[href$="/category/security/"]::before { content: "\f3ed"; }
    .main-navigation #primary-menu > li > a[href$="/category/cloud/"]::before { content: "\f0c2"; }
    .main-navigation #primary-menu > li > a[href$="/category/database/"]::before { content: "\f1c0"; }

    /* Brand marks need the Brands face */
    .main-navigation #primary-menu > li > a[href$="/category/linux/"]::before,
    .main-navigation #primary-menu > li > a[href$="/category/docker/"]::before,
    .main-navigation #primary-menu > li > a[href$="/category/git/"]::before,
    .main-navigation #primary-menu > li > a[href$="/category/google-cloud/"]::before,
    .main-navigation #primary-menu > li > a[href$="/category/aws/"]::before,
    .main-navigation #primary-menu > li > a[href$="/category/azure/"]::before,
    .main-navigation #primary-menu > li > a[href$="/category/wordpress/"]::before {
        font-family: "Font Awesome 6 Brands";
        font-weight: 400;
    }

    .main-navigation #primary-menu > li > a[href$="/category/linux/"]::before { content: "\f17c"; }
    .main-navigation #primary-menu > li > a[href$="/category/docker/"]::before { content: "\f395"; }
    .main-navigation #primary-menu > li > a[href$="/category/git/"]::before { content: "\f1d3"; }
    .main-navigation #primary-menu > li > a[href$="/category/google-cloud/"]::before { content: "\f1a0"; }
    .main-navigation #primary-menu > li > a[href$="/category/aws/"]::before { content: "\f375"; }
    .main-navigation #primary-menu > li > a[href$="/category/azure/"]::before { content: "\f3ca"; }
    .main-navigation #primary-menu > li > a[href$="/category/wordpress/"]::before { content: "\f19a"; }
}

/* Slightly tighter bar */
.main-navigation #primary-menu > li > a {
    padding: 15px 18px;
}


/* ==========================================================================
   Menu: floating pills
   The active item used to be a full-height solid block wedged into the bar,
   which fought with the bar's own accent rule. Pills sit inside the bar with
   breathing room, so the highlight reads as a state rather than a button.
   Desktop only — the mobile dropdown keeps full-width rows.
   ========================================================================== */
@media (min-width: 769px) {
    .main-navigation .container {
        padding-top: 8px;
        padding-bottom: 8px;
    }

    .main-navigation .nav-menu-wrapper {
        align-items: center;
    }

    .main-navigation #primary-menu {
        align-items: center;
        gap: 3px;
    }

    .main-navigation #primary-menu > li > a {
        padding: 9px 15px !important;
        border-radius: 9px !important;
        font-size: 14.5px !important;
        font-weight: 600 !important;
        letter-spacing: 0.015em !important;
        line-height: 1.45 !important;
        color: var(--lpf-on-dark-muted) !important;
    }

    /* The pill is the indicator now, so retire the sliding underline */
    .main-navigation #primary-menu > li > a::after {
        display: none !important;
    }

    .main-navigation #primary-menu > li > a:hover {
        background-color: rgba(255, 255, 255, 0.10) !important;
        color: #ffffff !important;
    }

    body.home .main-navigation #primary-menu > li:first-child > a,
    .main-navigation #primary-menu > li.current-menu-item > a,
    .main-navigation #primary-menu > li.current_page_item > a,
    .main-navigation #primary-menu > li.current-menu-ancestor > a,
    .main-navigation #primary-menu > li.current-category-ancestor > a {
        background: linear-gradient(135deg, var(--lpf-accent-mid) 0%, var(--lpf-accent-strong) 100%) !important;
        color: #ffffff !important;
        box-shadow: 0 6px 16px -5px rgba(var(--lpf-accent-rgb), 0.6) !important;
    }

    /* Crisper icons */
    .main-navigation #primary-menu > li > a::before {
        opacity: 0.8;
        font-size: 13px;
        margin-right: 9px;
    }

    .main-navigation #primary-menu > li > a:hover::before,
    .main-navigation #primary-menu > li.current-menu-item > a::before,
    body.home .main-navigation #primary-menu > li:first-child > a::before {
        opacity: 1;
    }

    /* Search sits level with the pills */
    .nav-search .search-form {
        padding: 2px !important;
    }

    .nav-search input[type="search"] {
        padding: 8px 12px !important;
    }

    .nav-search button {
        padding: 8px 14px !important;
        border-radius: 7px !important;
    }
}

/* ==========================================================================
   Info strip on mobile
   As a flex row the site name and the tagline became two separate columns,
   each wrapping and centring independently. On narrow screens let the strip
   flow as ordinary text instead, left aligned, so it reads as one sentence.
   ========================================================================== */

/* RSS now lives as one icon in the social row */
footer.site-footer-new .footer-social-link svg {
    width: 18px !important;
    height: 18px !important;
}

/* ==========================================================================
   Page layout + contact form
   ========================================================================== */

/* Two-column layout. Grid rather than flex: the theme sets competing
   flex-basis (350px) and width (300px) on the sidebar in two stylesheets,
   which left pages rendering the aside below the content. Grid columns are
   explicit and cannot be undone by those declarations. */
@media (min-width: 993px) {
    body .content-sidebar-wrap {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 300px !important;
        grid-template-rows: auto !important;
        align-items: start !important;
        gap: 30px !important;
    }

    body .content-sidebar-wrap > .content-area {
        grid-column: 1 !important;
        grid-row: 1 !important;
        width: auto !important;
        max-width: none !important;
        min-width: 0 !important;
        float: none !important;
    }

    body .content-sidebar-wrap > .widget-area {
        grid-column: 2 !important;
        grid-row: 1 !important;
        width: 100% !important;
        max-width: none !important;
        flex: none !important;
        float: none !important;
    }
}
/* --- Contact form (Contact Form 7) --- */
.wpcf7 {
    margin-top: 26px;
}

.wpcf7-form p {
    margin: 0 0 18px !important;
}

.wpcf7-form label {
    display: block;
    margin-bottom: 8px;
    color: var(--lpf-ink);
    font-size: 14.5px;
    font-weight: 600;
}

.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form input[type="url"],
.wpcf7-form select,
.wpcf7-form textarea {
    width: 100%;
    padding: 13px 15px;
    border: 1px solid var(--lpf-line);
    border-radius: 8px;
    background: var(--lpf-surface-2);
    color: var(--lpf-body);
    font-family: inherit;
    font-size: 15px;
    line-height: 1.5;
    transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.wpcf7-form input[type="text"]:focus,
.wpcf7-form input[type="email"]:focus,
.wpcf7-form input[type="tel"]:focus,
.wpcf7-form input[type="url"]:focus,
.wpcf7-form select:focus,
.wpcf7-form textarea:focus {
    outline: none;
    border-color: var(--lpf-accent-mid);
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(var(--lpf-accent-rgb), 0.15);
}

.wpcf7-form textarea {
    min-height: 170px;
    resize: vertical;
}

.wpcf7-form input[type="submit"],
.wpcf7-submit {
    display: inline-block;
    width: auto;
    padding: 14px 36px !important;
    border: none !important;
    border-radius: 8px !important;
    background: linear-gradient(135deg, var(--lpf-accent-mid) 0%, var(--lpf-accent-strong) 100%) !important;
    color: #ffffff !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: filter 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.wpcf7-form input[type="submit"]:hover,
.wpcf7-submit:hover {
    filter: brightness(1.07);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(var(--lpf-accent-rgb), 0.35);
}

.wpcf7-not-valid-tip {
    margin-top: 6px;
    color: #d63638;
    font-size: 13px;
}

.wpcf7-response-output {
    margin: 22px 0 0 !important;
    padding: 14px 16px !important;
    border-radius: 8px !important;
    border-width: 1px !important;
    font-size: 14.5px;
}

.wpcf7 form.sent .wpcf7-response-output {
    border-color: rgba(5, 150, 105, 0.4) !important;
    background: rgba(5, 150, 105, 0.07);
    color: #046c4a;
}

.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output {
    border-color: rgba(214, 54, 56, 0.4) !important;
    background: rgba(214, 54, 56, 0.06);
    color: #b32d2e;
}

/* --- Intro + contact details cards --- */
.contact-page-intro {
    margin-bottom: 6px;
}

.contact-info-section {
    margin-top: 42px;
    padding-top: 30px;
    border-top: 1px solid var(--lpf-line-soft);
}

.contact-info-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

.contact-info-item {
    padding: 22px 20px;
    background: var(--lpf-surface-2);
    border: 1px solid var(--lpf-line);
    border-radius: 12px;
    transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.2s ease;
}

.contact-info-item:hover {
    border-color: rgba(var(--lpf-accent-rgb), 0.4);
    box-shadow: 0 10px 24px -14px rgba(var(--lpf-shadow-rgb), 0.35);
    transform: translateY(-3px);
}

.contact-info-item h3 {
    margin: 0 0 8px !important;
    color: var(--lpf-ink) !important;
    font-size: 16px !important;
}

.contact-info-item a {
    word-break: break-word;
}

/* The theme leaves .contact-icon empty — give each card its own mark */
.contact-info-item .contact-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    margin-bottom: 14px;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(var(--lpf-accent-rgb), 0.12), rgba(var(--lpf-accent-strong-rgb), 0.08));
    border: 1px solid rgba(var(--lpf-accent-rgb), 0.25);
    color: var(--lpf-accent-strong);
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 16px;
}

.contact-info-item:nth-child(1) .contact-icon::before { content: "\f0e0"; }
.contact-info-item:nth-child(2) .contact-icon::before { content: "\f017"; }
.contact-info-item:nth-child(3) .contact-icon::before { content: "\f1e0"; }

@media (max-width: 782px) {
    .contact-info-grid {
        grid-template-columns: 1fr;
    }

    .wpcf7-form input[type="submit"],
    .wpcf7-submit {
        width: 100%;
    }
}
/* ==========================================================================
   ON DARK CHROME — the accent has to step brighter
   The shared gradient is tuned for white text on light surfaces. Against the
   graphite header, footer and consulting card that same teal goes muddy and
   white-on-teal drops to 2.3:1, so those surfaces use the bright ramp with
   dark ink instead (8.8:1). Same hue, correct contrast in both directions.
   ========================================================================== */
@media (min-width: 769px) {
    body.home .main-navigation #primary-menu > li:first-child > a,
    .main-navigation #primary-menu > li.current-menu-item > a,
    .main-navigation #primary-menu > li.current_page_item > a,
    .main-navigation #primary-menu > li.current-menu-ancestor > a,
    .main-navigation #primary-menu > li.current-category-ancestor > a {
        background: var(--lpf-btn-on-dark) !important;
        color: var(--lpf-btn-on-dark-ink) !important;
        box-shadow: 0 6px 16px -6px rgba(var(--lpf-accent-rgb), 0.55) !important;
    }
}

.nav-search button,
.search-toggle-btn.is-open,
.menu-toggle-btn.is-open {
    background: var(--lpf-btn-on-dark);
    color: var(--lpf-btn-on-dark-ink);
    border-color: transparent;
}

.nav-search button:hover {
    filter: brightness(1.06);
}

footer.site-footer-new .footer-subscribe-btn,
footer.site-footer-new .footer-social-link:hover,
.lpf-cta-btn {
    background: var(--lpf-btn-on-dark) !important;
    color: var(--lpf-btn-on-dark-ink) !important;
    border-color: transparent !important;
}

footer.site-footer-new .footer-heading::before,
.lpf-cta-card::before {
    background: linear-gradient(90deg, var(--lpf-accent-bright) 0%, var(--lpf-accent) 100%);
}

footer.site-footer-new {
    border-top-color: var(--lpf-accent) !important;
}

footer.site-footer-new .footer-posts-list a::before,
footer.site-footer-new .footer-links-list a::before,
.lpf-cta-list li::before {
    color: var(--lpf-accent);
}

footer.site-footer-new .footer-copyright a:hover {
    color: var(--lpf-accent-bright) !important;
}

/* The status badge is the one warm note on the page — amber, so "available"
   reads as a state rather than as more brand colour. */
.lpf-cta-badge {
    background: rgba(var(--lpf-warm-rgb), 0.13) !important;
    border-color: rgba(var(--lpf-warm-rgb), 0.38) !important;
    color: var(--lpf-warm-soft) !important;
}

/* Keyboard focus on dark chrome needs the bright step to be visible at all. */
.site-header :focus-visible,
.main-navigation :focus-visible,
footer.site-footer-new :focus-visible,
.lpf-cta-card :focus-visible,
.lpf-hero :focus-visible {
    outline-color: var(--lpf-accent-bright);
}


/* ==========================================================================
   HOMEPAGE HERO
   The homepage used to open straight into a wall of ten identical cards, with
   no statement of what the site is or any way to narrow it down. The hero
   answers "what is this / how much is here / where do I start" above the fold,
   and puts search and the topic list within one reach.
   ========================================================================== */
.lpf-hero {
    position: relative;
    overflow: hidden;
    margin: 0 0 34px;
    padding: 52px 0 46px;
    background: linear-gradient(155deg, var(--lpf-chrome-3) 0%, var(--lpf-chrome) 62%, var(--lpf-chrome-deep) 100%);
    border-bottom: 1px solid var(--lpf-chrome-line);
}

/* Two soft teal lights, plus a faint grid — enough texture to stop the band
   reading as a flat rectangle, quiet enough to keep the type first. */
.lpf-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(760px 320px at 82% -10%, rgba(var(--lpf-accent-rgb), 0.20), transparent 70%),
        radial-gradient(520px 280px at 8% 115%, rgba(var(--lpf-accent-rgb), 0.11), transparent 72%);
    pointer-events: none;
}

/* grid backdrop removed: .lpf-hero::after */

.lpf-hero > .container {
    position: relative;
    z-index: 1;
}

.lpf-hero-inner {
    max-width: 760px;
}

.lpf-hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 18px;
    padding: 6px 14px 6px 12px;
    border-radius: var(--lpf-radius-pill);
    background: rgba(var(--lpf-accent-rgb), 0.12);
    border: 1px solid rgba(var(--lpf-accent-rgb), 0.30);
    color: var(--lpf-accent-bright);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.lpf-hero-eyebrow::before {
    content: "\f120";           /* terminal prompt */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 11px;
    letter-spacing: 0;
}

.lpf-hero-title {
    margin: 0 0 16px;
    color: #ffffff;
    font-size: 42px;
    font-weight: 700;
    line-height: 1.16;
    letter-spacing: -0.025em;
}

.lpf-hero-title em {
    font-style: normal;
    color: var(--lpf-accent-bright);
}

.lpf-hero-sub {
    margin: 0 0 26px;
    max-width: 60ch;
    color: var(--lpf-on-dark-muted);
    font-size: 17px;
    line-height: 1.65;
}

/* --- Hero search --- */
.lpf-hero-search .search-form {
    display: flex;
    gap: 8px;
    max-width: 520px;
    padding: 6px;
    border-radius: var(--lpf-radius);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.16);
    backdrop-filter: blur(4px);
}

.lpf-hero-search .search-form label {
    flex: 1;
    min-width: 0;
    margin: 0;
}

.lpf-hero-search input[type="search"] {
    width: 100%;
    padding: 12px 14px;
    border: none;
    border-radius: var(--lpf-radius-sm);
    background: transparent;
    color: #ffffff;
    font-family: inherit;
    font-size: 15px;
}

.lpf-hero-search input[type="search"]::placeholder {
    color: rgba(255, 255, 255, 0.52);
}

.lpf-hero-search input[type="search"]:focus {
    outline: none;
}

.lpf-hero-search .search-form:focus-within {
    border-color: rgba(var(--lpf-accent-rgb), 0.7);
    background: rgba(255, 255, 255, 0.10);
}

.lpf-hero-search button {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 22px;
    border: none;
    border-radius: var(--lpf-radius-sm);
    background: var(--lpf-btn-on-dark);
    color: var(--lpf-btn-on-dark-ink);
    font-family: inherit;
    font-size: 14.5px;
    font-weight: 700;
    cursor: pointer;
    transition: filter 0.2s ease, transform 0.2s ease;
}

.lpf-hero-search button:hover {
    filter: brightness(1.07);
    transform: translateY(-1px);
}

.lpf-hero-search .search-submit .screen-reader-text {
    position: static !important;
    clip-path: none !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    overflow: visible !important;
}

/* --- Stat row --- */
.lpf-hero-stats {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 26px;
    margin-top: 24px;
    color: var(--lpf-on-dark-muted);
    font-size: 14px;
}

.lpf-hero-stat {
    display: inline-flex;
    align-items: baseline;
    gap: 7px;
}

.lpf-hero-stat b {
    color: #ffffff;
    font-size: 19px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}


/* ==========================================================================
   TOPIC RAIL
   Every category, ordered by depth, one tap from the top of the homepage.
   Previously the only route into a topic was the sidebar, below the fold.
   ========================================================================== */
.lpf-topics {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin: 0 0 34px;
}

.lpf-topic {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: var(--lpf-radius-pill);
    background: var(--lpf-surface);
    border: 1px solid var(--lpf-line);
    color: var(--lpf-ink) !important;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none !important;
    transition: border-color 0.22s ease, color 0.22s ease, transform 0.18s ease, box-shadow 0.22s ease;
}

.lpf-topic:hover {
    border-color: rgba(var(--lpf-accent-rgb), 0.55);
    color: var(--lpf-accent-strong) !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 18px -10px rgba(var(--lpf-shadow-rgb), 0.45);
}

.lpf-topic span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    padding: 2px 7px;
    border-radius: var(--lpf-radius-pill);
    background: rgba(var(--lpf-accent-rgb), 0.11);
    border: 1px solid rgba(var(--lpf-accent-rgb), 0.22);
    color: var(--lpf-accent-strong);
    font-size: 11.5px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.lpf-topic:hover span {
    background: var(--lpf-btn-on-light);
    border-color: transparent;
    color: #ffffff;
}


/* ==========================================================================
   SECTION HEADING
   Replaces the "Latest Articles" text that used to live in a ::before, so the
   heading is a real h2 — reachable by screen readers and by search engines.
   ========================================================================== */
.lpf-section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin: 0 0 22px;
    padding-bottom: 13px;
    border-bottom: 1px solid var(--lpf-line);
}

.lpf-section-title {
    position: relative;
    margin: 0;
    padding-left: 15px;
    color: var(--lpf-ink);
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.015em;
    line-height: 1.25;
}

.lpf-section-title::before {
    content: "";
    position: absolute;
    left: 0;
    top: 3px;
    bottom: 3px;
    width: 4px;
    border-radius: 2px;
    background: linear-gradient(180deg, var(--lpf-accent-mid) 0%, var(--lpf-accent-strong) 100%);
}

.lpf-section-note {
    flex-shrink: 0;
    color: var(--lpf-faint);
    font-size: 13.5px;
}

/* The old pseudo-element heading is now redundant. */
body.home .posts-grid::before {
    content: none !important;
    display: none !important;
}


/* ==========================================================================
   FEATURED LEAD CARD
   The newest tutorial gets a wide card above the grid. Ten identical tiles
   gave a reader no starting point; one clear entry does.
   ========================================================================== */
.lpf-lead {
    display: grid;
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
    align-items: stretch;
    margin: 0 0 30px;
    background: var(--lpf-surface);
    border: 1px solid var(--lpf-line);
    border-radius: var(--lpf-radius);
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(var(--lpf-shadow-rgb), 0.06);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.lpf-lead:hover {
    transform: translateY(-4px);
    border-color: rgba(var(--lpf-accent-rgb), 0.45);
    box-shadow: 0 20px 40px -18px rgba(var(--lpf-shadow-rgb), 0.32);
}

.lpf-lead-media {
    position: relative;
    display: block;
    overflow: hidden;
    background: var(--lpf-surface-3);
}

.lpf-lead-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
    transition: transform 0.45s ease;
}

.lpf-lead:hover .lpf-lead-media img {
    transform: scale(1.04);
}

.lpf-lead-flag {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 13px;
    border-radius: var(--lpf-radius-pill);
    background: rgba(10, 20, 32, 0.82);
    border: 1px solid rgba(var(--lpf-warm-rgb), 0.45);
    color: var(--lpf-warm-soft);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    backdrop-filter: blur(3px);
}

.lpf-lead-flag::before {
    content: "\f005";           /* star */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 10px;
    letter-spacing: 0;
}

.lpf-lead-body {
    display: flex;
    flex-direction: column;
    padding: 30px 32px;
}

.lpf-lead-cat {
    align-self: flex-start;
    margin-bottom: 12px;
    padding: 4px 11px;
    border-radius: var(--lpf-radius-pill);
    background: rgba(var(--lpf-accent-rgb), 0.10);
    border: 1px solid rgba(var(--lpf-accent-rgb), 0.24);
    color: var(--lpf-accent-strong) !important;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none !important;
}

.lpf-lead-cat:hover {
    background: var(--lpf-btn-on-light);
    border-color: transparent;
    color: #ffffff !important;
}

.lpf-lead-title {
    margin: 0 0 12px;
    font-size: 26px;
    font-weight: 700;
    line-height: 1.28;
    letter-spacing: -0.02em;
}

.lpf-lead-title a {
    color: var(--lpf-ink);
    text-decoration: none;
    transition: color 0.25s ease;
}

.lpf-lead-title a:hover {
    color: var(--lpf-accent-strong);
}

.lpf-lead-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 16px;
    margin-bottom: 14px;
    color: var(--lpf-faint);
    font-size: 13px;
}

.lpf-lead-meta i {
    margin-right: 5px;
    color: var(--lpf-accent-mid);
}

.lpf-lead-excerpt {
    margin: 0 0 20px;
    color: var(--lpf-body);
    font-size: 15.5px;
    line-height: 1.7;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.lpf-lead-cta {
    margin-top: auto;
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 11px 22px;
    border-radius: var(--lpf-radius-sm);
    background: var(--lpf-btn-on-light);
    color: #ffffff !important;
    font-size: 14.5px;
    font-weight: 700;
    text-decoration: none !important;
    transition: filter 0.22s ease, transform 0.2s ease, box-shadow 0.22s ease, gap 0.22s ease;
}

.lpf-lead-cta:hover {
    filter: brightness(1.08);
    transform: translateY(-2px);
    gap: 14px;
    box-shadow: 0 10px 22px -8px rgba(var(--lpf-accent-strong-rgb), 0.55);
}

@media (max-width: 900px) {
    .lpf-lead {
        grid-template-columns: 1fr;
    }

    .lpf-lead-media {
        aspect-ratio: 10 / 7;
    }

    .lpf-lead-body {
        padding: 24px 22px;
    }

    .lpf-lead-title {
        font-size: 22px;
    }
}


/* ==========================================================================
   HERO / RAIL — responsive
   ========================================================================== */
@media (max-width: 992px) {
    .lpf-hero {
        padding: 42px 0 38px;
    }

    .lpf-hero-title {
        font-size: 34px;
    }
}

@media (max-width: 768px) {
    .lpf-hero {
        margin-bottom: 26px;
        padding: 32px 0 30px;
    }

    .lpf-hero-title {
        font-size: 27px;
    }

    .lpf-hero-sub {
        font-size: 15.5px;
        margin-bottom: 22px;
    }

    .lpf-hero-search .search-form {
        max-width: 100%;
    }

    .lpf-hero-search button {
        padding: 12px 16px;
    }

    .lpf-hero-search .search-submit .screen-reader-text {
        display: none;
    }

    .lpf-hero-stats {
        gap: 8px 18px;
        font-size: 13px;
    }

    .lpf-hero-stat b {
        font-size: 17px;
    }

    /* The rail scrolls sideways instead of stacking into a tall block. */
    .lpf-topics {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
        margin-bottom: 26px;
        padding-bottom: 4px;
        -webkit-overflow-scrolling: touch;
    }

    .lpf-topics::-webkit-scrollbar {
        display: none;
    }

    .lpf-topic {
        flex-shrink: 0;
    }

    .lpf-section-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }

    .lpf-section-title {
        font-size: 19px;
    }
}


/* ==========================================================================
   EMPTY AND SEARCH STATES
   ========================================================================== */
.lpf-noresults {
    padding: 44px 34px;
    background: var(--lpf-surface);
    border: 1px solid var(--lpf-line);
    border-radius: var(--lpf-radius);
    text-align: center;
}

.lpf-noresults i {
    display: block;
    margin-bottom: 14px;
    color: var(--lpf-accent-mid);
    font-size: 30px;
}

.lpf-noresults h2 {
    margin: 0 0 8px !important;
    color: var(--lpf-ink) !important;
    font-size: 21px !important;
    border: none !important;
    padding: 0 !important;
}

.lpf-noresults p {
    margin: 0 auto 20px;
    max-width: 46ch;
    color: var(--lpf-muted);
    font-size: 15px;
}


/* ==========================================================================
   CARD GRID — small corrections that fall out of the recolour
   ========================================================================== */
.posts-grid .entry-title a {
    color: var(--lpf-ink);
}

.posts-grid .entry-title a:hover {
    color: var(--lpf-accent-strong);
}

.posts-grid .more-link,
.posts-grid .more-link:hover {
    color: var(--lpf-accent-strong) !important;
}

.posts-grid article:hover {
    border-color: rgba(var(--lpf-accent-rgb), 0.45);
}

/* Cards sit on the white sheet, so give the page ground a little separation. */
body {
    background-color: var(--lpf-ground);
}


/* ==========================================================================
   CARD CATEGORY CHIP + ARCHIVE INTRO
   The grid hid categories entirely, so a reader scanning ten cards had no
   idea which were Docker and which were Linux until they clicked through.
   ========================================================================== */
.posts-grid .lpf-card-cat {
    align-self: flex-start;
    display: inline-block;
    margin-bottom: 10px;
    padding: 3px 10px;
    border-radius: var(--lpf-radius-pill);
    background: rgba(var(--lpf-accent-rgb), 0.10);
    border: 1px solid rgba(var(--lpf-accent-rgb), 0.24);
    color: var(--lpf-accent-strong) !important;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none !important;
    transition: background 0.22s ease, border-color 0.22s ease, color 0.22s ease;
}

.posts-grid .lpf-card-cat:hover {
    background: var(--lpf-btn-on-light);
    border-color: transparent;
    color: #ffffff !important;
}

.lpf-archive-intro {
    margin: -6px 0 24px;
    padding: 16px 20px;
    background: var(--lpf-surface-2);
    border: 1px solid var(--lpf-line);
    border-left: 4px solid var(--lpf-accent-mid);
    border-radius: 0 var(--lpf-radius-sm) var(--lpf-radius-sm) 0;
    color: var(--lpf-muted);
    font-size: 15px;
    line-height: 1.7;
}

.lpf-archive-intro p:last-child {
    margin-bottom: 0;
}

/* The empty-state search reuses the hero's shape but sits on a white card,
   so it needs the light palette rather than the on-dark one. */
.lpf-noresults-search .search-form {
    margin: 0 auto;
    background: var(--lpf-surface-2);
    border-color: var(--lpf-line);
    backdrop-filter: none;
}

.lpf-noresults-search input[type="search"] {
    color: var(--lpf-ink);
}

.lpf-noresults-search input[type="search"]::placeholder {
    color: var(--lpf-faint);
}

.lpf-noresults-search .search-form:focus-within {
    background: var(--lpf-surface);
    border-color: rgba(var(--lpf-accent-rgb), 0.6);
}

.lpf-noresults-search button {
    background: var(--lpf-btn-on-light);
    color: #ffffff;
}

.lpf-noresults-topics {
    justify-content: center;
    margin: 24px 0 0;
}


/* ==========================================================================
   HERO BLEED
   .site-content ships a 1290px cap, 30px top margin and 15px side padding, so
   the hero would otherwise float as an inset rectangle with a white gap above
   it. On the one view that renders the hero, hand those constraints to the
   inner .container instead and let the band run to the edges of the page sheet.
   ========================================================================== */
body.lpf-has-band #content.site-content {
    max-width: none;
    margin-top: 0;
    padding-left: 0;
    padding-right: 0;
}

body.lpf-has-band #content.site-content > .container {
    max-width: 1290px;
    margin: 0 auto;
    padding: 0 15px;
}

/* The hero already carries the space below it. */
body.lpf-has-band .content-sidebar-wrap {
    margin-top: 0;
}


/* White chevron on the lighter end of the accent gradient was 3.05:1; the
   on-light pair carries it at 5.47:1 and reads as a solid button. */
#back-to-top {
    background: var(--lpf-btn-on-light);
    box-shadow: 0 6px 18px -6px rgba(var(--lpf-accent-strong-rgb), 0.55);
}

#back-to-top:hover {
    background: var(--lpf-btn-on-light);
    filter: brightness(1.1);
    box-shadow: 0 10px 24px -8px rgba(var(--lpf-accent-strong-rgb), 0.6);
}


/* ==========================================================================
   BANNER IMAGES MUST NOT LOSE THEIR BAKED-IN TITLE
   Every featured image is a 1280x896 banner with the article title rendered
   into the artwork, so any crop eats words. The containers below are already
   10:7 — the same shape as the source — so `contain` renders identically to
   `cover` for them today. What it buys is that an image at any other ratio
   letterboxes against the dark backdrop instead of having its title sliced.
   ========================================================================== */
.lpf-lead-media,
.posts-grid .post-thumbnail,
.related-post-thumbnail {
    background: var(--lpf-chrome);
}

.lpf-lead-media img,
.posts-grid .post-thumbnail img,
.related-post-thumbnail img {
    object-fit: contain !important;
    object-position: center !important;
}

/* The lead's media column stretches to whatever height the text column needs,
   so an even split keeps the letterbox bars to a couple of dozen pixels. */
.lpf-lead {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}


/* ==========================================================================
   PAGE BANNER BAND — archives, search results, static pages
   The homepage had a hero while every other view opened with a bare white
   card. This is the same graphite treatment at about half the height: it
   carries the h1, says how much is behind the page, and on a topic page
   offers the sibling topics so a reader can hop sideways without scrolling
   to the sidebar.
   ========================================================================== */
.lpf-pagehead {
    position: relative;
    overflow: hidden;
    margin: 0 0 30px;
    padding: 34px 0 30px;
    background: linear-gradient(155deg, var(--lpf-chrome-3) 0%, var(--lpf-chrome) 62%, var(--lpf-chrome-deep) 100%);
    border-bottom: 1px solid var(--lpf-chrome-line);
}

.lpf-pagehead::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(620px 260px at 84% -20%, rgba(var(--lpf-accent-rgb), 0.18), transparent 70%),
        radial-gradient(420px 220px at 6% 120%, rgba(var(--lpf-accent-rgb), 0.10), transparent 72%);
    pointer-events: none;
}

/* grid backdrop removed: .lpf-pagehead::after */

.lpf-pagehead > .container {
    position: relative;
    z-index: 1;
}

.lpf-pagehead-inner {
    display: flex;
    align-items: flex-start;
    gap: 20px;
}

/* Topic mark — the same icon vocabulary the sidebar uses, at banner scale. */
.lpf-pagehead-mark {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 62px;
    height: 62px;
    border-radius: 16px;
    background: rgba(var(--lpf-accent-rgb), 0.12);
    border: 1px solid rgba(var(--lpf-accent-rgb), 0.30);
    color: var(--lpf-accent-bright);
    font-size: 26px;
    line-height: 1;
}

.lpf-pagehead-body {
    min-width: 0;
    flex: 1;
}

.lpf-pagehead-eyebrow {
    display: block;
    margin-bottom: 7px;
    color: var(--lpf-accent-bright);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.lpf-pagehead-title {
    margin: 0 0 9px;
    color: #ffffff;
    font-size: 34px;
    font-weight: 700;
    line-height: 1.18;
    letter-spacing: -0.022em;
    overflow-wrap: break-word;
}

.lpf-pagehead-desc {
    margin: 0 0 10px;
    max-width: 68ch;
    color: var(--lpf-on-dark-muted);
    font-size: 16px;
    line-height: 1.6;
}

.lpf-pagehead-meta {
    margin: 0;
    color: var(--lpf-accent-bright);
    font-size: 13.5px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.lpf-pagehead-search {
    margin-top: 18px;
}

.lpf-pagehead-search .search-form {
    max-width: 460px;
}

/* --- Sibling topic rail, on dark --------------------------------------- */
.lpf-pagehead-rail {
    margin: 24px 0 0;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.10);
}

.lpf-pagehead-rail .lpf-topic {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.14);
    color: var(--lpf-on-dark-muted) !important;
}

.lpf-pagehead-rail .lpf-topic:hover {
    background: var(--lpf-btn-on-dark);
    border-color: transparent;
    color: var(--lpf-btn-on-dark-ink) !important;
    box-shadow: 0 8px 18px -8px rgba(var(--lpf-accent-rgb), 0.5);
}

.lpf-pagehead-rail .lpf-topic span {
    background: rgba(var(--lpf-accent-rgb), 0.20);
    border-color: rgba(var(--lpf-accent-rgb), 0.30);
    color: var(--lpf-accent-bright);
}

.lpf-pagehead-rail .lpf-topic:hover span {
    background: rgba(0, 0, 0, 0.22);
    border-color: transparent;
    color: var(--lpf-btn-on-dark-ink);
}

/* A page whose h1 now lives in the band must not keep the card's own rule. */
body.lpf-has-band .page article.page > .entry-header {
    display: none;
}

@media (max-width: 768px) {
    .lpf-pagehead {
        margin-bottom: 24px;
        padding: 24px 0 22px;
    }

    .lpf-pagehead-inner {
        gap: 14px;
    }

    .lpf-pagehead-mark {
        width: 46px;
        height: 46px;
        border-radius: 12px;
        font-size: 19px;
    }

    .lpf-pagehead-title {
        font-size: 24px;
    }

    .lpf-pagehead-desc {
        font-size: 14.5px;
    }

    .lpf-pagehead-rail {
        margin-top: 18px;
        padding-top: 16px;
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .lpf-pagehead-rail::-webkit-scrollbar {
        display: none;
    }
}

@media (max-width: 480px) {
    /* The mark costs more width than it earns on a small phone. */
    .lpf-pagehead-mark {
        display: none;
    }

    .lpf-pagehead-title {
        font-size: 21px;
    }
}

/* The section heading is styled by class, so h1 and h2 render identically —
   only the document outline changes. */
h1.lpf-section-title {
    font-size: 22px;
}


/* ==========================================================================
   "START HERE" STRIP
   Runs on flush beneath the hero, sharing its ground, separated only by a
   hairline — so the two read as one banner in two zones rather than as two
   dark rectangles with a gap. 57 tutorials in reverse-chronological order
   gave a first-time visitor nothing to grab; these are the three to read.
   ========================================================================== */
body.lpf-has-starthere .lpf-hero {
    margin-bottom: 0;
    border-bottom: none;
}

.lpf-starthere {
    position: relative;
    overflow: hidden;
    margin: 0 0 34px;
    padding: 26px 0 30px;
    background: linear-gradient(180deg, var(--lpf-chrome-deep) 0%, var(--lpf-chrome) 100%);
    border-top: 1px solid rgba(255, 255, 255, 0.09);
    border-bottom: 1px solid var(--lpf-chrome-line);
}

.lpf-starthere::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(680px 200px at 20% 130%, rgba(var(--lpf-accent-rgb), 0.13), transparent 70%);
    pointer-events: none;
}

.lpf-starthere > .container {
    position: relative;
    z-index: 1;
}

.lpf-starthere-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.lpf-starthere-title {
    margin: 0;
    color: #ffffff;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.lpf-starthere-eyebrow {
    display: inline-block;
    margin-right: 12px;
    padding: 4px 11px;
    border-radius: var(--lpf-radius-pill);
    background: rgba(var(--lpf-accent-rgb), 0.14);
    border: 1px solid rgba(var(--lpf-accent-rgb), 0.32);
    color: var(--lpf-accent-bright);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    vertical-align: 2px;
}

.lpf-starthere-all {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--lpf-accent-bright) !important;
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none !important;
    transition: gap 0.22s ease, color 0.22s ease;
}

.lpf-starthere-all:hover {
    color: #ffffff !important;
    gap: 12px;
}

.lpf-starthere-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.lpf-starthere-card {
    display: block;
    padding: 16px 18px;
    border-radius: var(--lpf-radius);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.11);
    text-decoration: none !important;
    transition: background 0.25s ease, border-color 0.25s ease, transform 0.2s ease, box-shadow 0.25s ease;
}

.lpf-starthere-card:hover {
    background: rgba(255, 255, 255, 0.09);
    border-color: rgba(var(--lpf-accent-rgb), 0.55);
    transform: translateY(-3px);
    box-shadow: 0 14px 28px -16px rgba(0, 0, 0, 0.7);
}

.lpf-starthere-body {
    display: block;
    min-width: 0;
}

.lpf-starthere-cat {
    display: block;
    margin-bottom: 4px;
    color: var(--lpf-accent-bright);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.lpf-starthere-name {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 6px;
    color: #ffffff;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
}

.lpf-starthere-time {
    display: block;
    color: var(--lpf-on-dark-muted);
    font-size: 12.5px;
}

.lpf-starthere-time i {
    margin-right: 5px;
    color: var(--lpf-accent);
}

@media (max-width: 900px) {
    .lpf-starthere-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .lpf-starthere-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .lpf-starthere-title {
        font-size: 15.5px;
    }
}


/* ==========================================================================
   CLOSING TOPIC BAND
   Sits between the white article grid and the dark footer, so it is light on
   purpose — two dark bands touching would merge into one slab. Richer than
   the chip rail at the top, which is a filter rather than something to read.
   ========================================================================== */
.lpf-topicband {
    position: relative;
    margin: 46px 0 0;
    padding: 44px 0 48px;
    background:
        radial-gradient(760px 300px at 88% -30%, rgba(var(--lpf-accent-rgb), 0.09), transparent 70%),
        linear-gradient(180deg, var(--lpf-surface) 0%, var(--lpf-surface-2) 45%, var(--lpf-surface-3) 100%);
    border-top: 1px solid var(--lpf-line);
}

.lpf-topicband-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 26px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--lpf-line);
}

.lpf-topicband-eyebrow {
    display: block;
    margin-bottom: 6px;
    color: var(--lpf-accent-strong);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.lpf-topicband-title {
    margin: 0;
    color: var(--lpf-ink);
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.lpf-topicband-all {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 3px;
    color: var(--lpf-accent-strong) !important;
    font-size: 14.5px;
    font-weight: 700;
    text-decoration: none !important;
    transition: gap 0.22s ease, color 0.22s ease;
}

.lpf-topicband-all:hover {
    color: var(--lpf-accent-deep) !important;
    gap: 13px;
}

.lpf-topicband-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
    gap: 14px;
}

.lpf-topiccard {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 18px;
    border-radius: var(--lpf-radius);
    background: var(--lpf-surface);
    border: 1px solid var(--lpf-line);
    text-decoration: none !important;
    transition: border-color 0.25s ease, transform 0.2s ease, box-shadow 0.25s ease;
}

.lpf-topiccard:hover {
    border-color: rgba(var(--lpf-accent-rgb), 0.5);
    transform: translateY(-3px);
    box-shadow: 0 16px 30px -18px rgba(var(--lpf-shadow-rgb), 0.45);
}

.lpf-topiccard-mark {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 11px;
    background: rgba(var(--lpf-accent-rgb), 0.10);
    border: 1px solid rgba(var(--lpf-accent-rgb), 0.24);
    color: var(--lpf-accent-strong);
    font-size: 17px;
    line-height: 1;
    transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.lpf-topiccard:hover .lpf-topiccard-mark {
    background: var(--lpf-btn-on-light);
    border-color: transparent;
    color: #ffffff;
}

.lpf-topiccard-body {
    display: block;
    min-width: 0;
}

.lpf-topiccard-name {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 5px;
    color: var(--lpf-ink);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
}

.lpf-topiccard-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    padding: 2px 7px;
    border-radius: var(--lpf-radius-pill);
    background: rgba(var(--lpf-accent-rgb), 0.11);
    border: 1px solid rgba(var(--lpf-accent-rgb), 0.22);
    color: var(--lpf-accent-strong);
    font-size: 11px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.lpf-topiccard-desc {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: var(--lpf-muted);
    font-size: 13.5px;
    line-height: 1.55;
}

@media (max-width: 768px) {
    .lpf-topicband {
        margin-top: 34px;
        padding: 32px 0 34px;
    }

    .lpf-topicband-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .lpf-topicband-title {
        font-size: 21px;
    }

    .lpf-topicband-grid {
        grid-template-columns: 1fr;
    }
}


/* ==========================================================================
   FOOTER — BRAND COLUMN
   Replaces the topic chips that used to sit here. The homepage now shows every
   topic as a full icon card immediately above the footer, and the sidebar
   lists them on every other view, so the chips were the third copy on the
   page. The footer had no statement of what this site is; now it does, and it
   carries the one outbound link to the consulting side — devopslinx.com and
   cloudian.dev both point back here, so the loop closes.
   ========================================================================== */
footer.site-footer-new .footer-col-brand {
    max-width: 420px;
}

/* --- Wordmark --- */
footer.site-footer-new .footer-brand {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 16px;
    text-decoration: none !important;
}

footer.site-footer-new .footer-brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    border-radius: 9px;
    background: rgba(var(--lpf-accent-rgb), 0.14);
    border: 1px solid rgba(var(--lpf-accent-rgb), 0.32);
    color: var(--lpf-accent-bright);
    font-size: 14px;
    transition: background 0.25s ease, border-color 0.25s ease;
}

footer.site-footer-new .footer-brand:hover .footer-brand-mark {
    background: rgba(var(--lpf-accent-rgb), 0.22);
    border-color: rgba(var(--lpf-accent-rgb), 0.5);
}

footer.site-footer-new .footer-brand-name {
    color: #ffffff;
    font-size: 19px;
    font-weight: 400;
    letter-spacing: -0.01em;
    line-height: 1.1;
}

footer.site-footer-new .footer-brand-name strong {
    font-weight: 700;
    color: var(--lpf-accent-bright);
}

footer.site-footer-new .footer-col-brand .footer-text {
    margin: 0 0 18px 0 !important;
    max-width: 40ch;
}

/* --- Fact row --- */
footer.site-footer-new .footer-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 22px;
    list-style: none;
    margin: 0 0 20px;
    padding: 0;
}

footer.site-footer-new .footer-facts li {
    margin: 0;
    padding: 0;
    border: none;
    color: var(--lpf-on-dark-muted);
    font-size: 13px;
    line-height: 1.3;
}

footer.site-footer-new .footer-facts b {
    display: block;
    color: #ffffff;
    font-size: 20px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}

/* --- Consulting link ---
   Amber, matching the sidebar's "Available for projects" badge: on this site
   the warm tone is reserved for status, so it reads as a state rather than as
   another navigation link. */
footer.site-footer-new .footer-consult {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 9px 16px;
    border-radius: var(--lpf-radius-pill);
    background: rgba(var(--lpf-warm-rgb), 0.10);
    border: 1px solid rgba(var(--lpf-warm-rgb), 0.34);
    color: var(--lpf-warm-soft) !important;
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none !important;
    transition: background 0.25s ease, border-color 0.25s ease, gap 0.22s ease;
}

footer.site-footer-new .footer-consult:hover {
    background: rgba(var(--lpf-warm-rgb), 0.18);
    border-color: rgba(var(--lpf-warm-rgb), 0.55);
    color: #ffffff !important;
    gap: 13px;
}

footer.site-footer-new .footer-consult .dot {
    width: 7px;
    height: 7px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--lpf-warm);
    animation: lpf-cta-pulse 2s infinite;
}

@media (max-width: 992px) {
    footer.site-footer-new .footer-col-brand {
        max-width: none;
    }
}

@media (max-width: 480px) {
    footer.site-footer-new .footer-facts {
        gap: 8px 18px;
    }

    footer.site-footer-new .footer-facts b {
        font-size: 18px;
    }
}


/* ==========================================================================
   PAGE BULLETS
   These were Font Awesome check marks. A tick means "done" or "verified" —
   wrong for a list of tools someone works with, and a row of them reads as a
   compliance checklist. A ringed dot carries no such meaning, scales with the
   text, and needs no icon font to render.
   ========================================================================== */
.page .entry-content ul li::before {
    content: "" !important;
    position: absolute;
    left: 5px;
    top: 0.62em;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--lpf-accent-mid) 0%, var(--lpf-accent-strong) 100%);
    box-shadow: 0 0 0 3px rgba(var(--lpf-accent-rgb), 0.14);
    font-size: 0 !important;
}


/* ==========================================================================
   ABOUT — TECHNOLOGY STACK LISTS
   Six sub-sections of "Label: a, b, c, d, e" ran as wrapping prose lines that
   were impossible to scan. The words are unchanged; each technology is now its
   own chip, and the label sits above rather than inline.
   ========================================================================== */
.page .entry-content ul.lpf-stack-list {
    list-style: none !important;
    margin: 18px 0 26px !important;
    padding-left: 0 !important;
}

.page .entry-content ul.lpf-stack-list > li {
    position: relative;
    padding-left: 0 !important;
    margin-bottom: 16px !important;
}

/* The chip rows carry their own structure — no marker needed. */
.page .entry-content ul.lpf-stack-list > li::before {
    display: none !important;
}

.lpf-stack-label {
    display: block;
    margin-bottom: 7px;
    color: var(--lpf-ink);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.lpf-stack-items {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.lpf-chip {
    display: inline-flex;
    align-items: center;
    padding: 5px 12px;
    border-radius: var(--lpf-radius-pill);
    background: var(--lpf-surface-2);
    border: 1px solid var(--lpf-line);
    color: var(--lpf-body);
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.35;
    white-space: nowrap;
    transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}

.lpf-chip:hover {
    background: var(--lpf-accent-tint);
    border-color: rgba(var(--lpf-accent-rgb), 0.45);
    color: var(--lpf-accent-strong);
}

@media (max-width: 480px) {
    .lpf-chip {
        font-size: 13px;
        padding: 4px 10px;
    }

    .lpf-stack-items {
        gap: 6px;
    }
}


/* ==========================================================================
   ABOUT — CLOSING CALL TO ACTION
   "Services Offered" listed six services and then simply stopped, with no way
   to act on any of them.
   ========================================================================== */
.page .entry-content .lpf-about-cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 18px;
    margin: 30px 0 8px !important;
    padding: 22px 24px;
    border-radius: var(--lpf-radius);
    background: linear-gradient(135deg, var(--lpf-surface-2) 0%, var(--lpf-accent-tint) 100%);
    border: 1px solid var(--lpf-line);
}

.page .entry-content .lpf-about-cta-primary {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 11px 24px;
    border-radius: var(--lpf-radius-sm);
    background: var(--lpf-btn-on-light);
    color: #ffffff !important;
    font-size: 14.5px;
    font-weight: 700;
    text-decoration: none !important;
    transition: filter 0.2s ease, transform 0.2s ease, box-shadow 0.22s ease, gap 0.22s ease;
}

.page .entry-content .lpf-about-cta-primary:hover {
    filter: brightness(1.08);
    transform: translateY(-2px);
    gap: 13px;
    box-shadow: 0 10px 22px -8px rgba(var(--lpf-accent-strong-rgb), 0.55);
    text-decoration: none !important;
}

.page .entry-content .lpf-about-cta-alt {
    color: var(--lpf-muted) !important;
    font-size: 14px;
    text-decoration: none !important;
    border-bottom: 1px solid rgba(var(--lpf-accent-rgb), 0.35);
}

.page .entry-content .lpf-about-cta-alt:hover {
    color: var(--lpf-accent-strong) !important;
    border-bottom-color: var(--lpf-accent-strong);
}

/* Five accounts now, not three — let both rows wrap rather than overflow
   their column on a narrow viewport. */
footer.site-footer-new .footer-social-icons,
.lpf-ac-social {
    flex-wrap: wrap;
}

/* ==========================================================================
   SOCIAL ICON SIZING
   Seven accounts. The footer column is 261px and the sidebar card 256px, so
   at 34px the row needed 298px and wrapped. 30px on a 7px gap comes to 252px
   and clears both. On phones the footer is a single full-width column, so the
   icons go back up to 38px there rather than staying needlessly small for
   touch.
   ========================================================================== */
footer.site-footer-new .footer-social-icons,
.lpf-ac-social {
    gap: 7px !important;
}

footer.site-footer-new .footer-social-link,
.lpf-ac-social a {
    width: 30px !important;
    height: 30px !important;
    font-size: 13px !important;
}

footer.site-footer-new .footer-social-link svg,
.lpf-ac-social a svg {
    width: 14px !important;
    height: 14px !important;
}

@media (max-width: 768px) {
    footer.site-footer-new .footer-social-icons {
        gap: 10px !important;
    }

    footer.site-footer-new .footer-social-link {
        width: 38px !important;
        height: 38px !important;
        font-size: 16px !important;
    }

    footer.site-footer-new .footer-social-link svg {
        width: 17px !important;
        height: 17px !important;
    }
}

/* ==========================================================================
   [lpf_social] — account row inside page content
   Used on the Contact page, where the accounts used to be a hand-typed
   sentence that went stale. Light-surface styling, since page cards are white.
   ========================================================================== */
.lpf-social-inline {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 4px;
}

.page .entry-content a.lpf-social-chip,
a.lpf-social-chip {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: var(--lpf-surface);
    border: 1px solid var(--lpf-line);
    color: var(--lpf-muted) !important;
    font-size: 15px;
    text-decoration: none !important;
    transition: background 0.22s ease, border-color 0.22s ease, color 0.22s ease, transform 0.18s ease;
}

.page .entry-content a.lpf-social-chip:hover,
a.lpf-social-chip:hover {
    background: var(--lpf-btn-on-light);
    border-color: transparent;
    color: #ffffff !important;
    transform: translateY(-2px);
    text-decoration: none !important;
}

a.lpf-social-chip svg {
    width: 15px;
    height: 15px;
    fill: currentColor;
}

/* The contact cards hold three columns; keep the row tidy inside one. */
.contact-info-item .lpf-social-inline {
    gap: 7px;
}

.contact-info-item a.lpf-social-chip {
    width: 34px;
    height: 34px;
    font-size: 14px;
}


/* ==========================================================================
   SHARE THIS GUIDE — end of every article
   Native share URLs, so this costs no third-party script and no extra
   request. Each button carries its network's own colour in --b and only
   wears it on hover, so the resting row stays calm and on-brand rather than
   turning into a strip of clashing logos.
   ========================================================================== */
.lpf-share {
    margin: 44px 0 8px;
    padding: 24px 26px;
    border: 1px solid var(--lpf-line);
    border-radius: var(--lpf-radius);
    background: linear-gradient(135deg, var(--lpf-surface-2) 0%, var(--lpf-accent-tint) 100%);
}

.lpf-share-head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 18px;
}

.lpf-share-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    border-radius: 11px;
    background: rgba(var(--lpf-accent-rgb), 0.12);
    border: 1px solid rgba(var(--lpf-accent-rgb), 0.26);
    color: var(--lpf-accent-strong);
    font-size: 16px;
}

.single .entry-content .lpf-share-title {
    margin: 0 0 2px !important;
    color: var(--lpf-ink);
    font-size: 16.5px;
    font-weight: 700;
    line-height: 1.3;
    text-align: left;
}

.single .entry-content .lpf-share-sub {
    margin: 0 !important;
    color: var(--lpf-muted);
    font-size: 13.5px;
    line-height: 1.5;
    text-align: left;
}

/* --- The row --- */
.lpf-share-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.single .entry-content a.lpf-share-btn,
.lpf-share-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    border-radius: var(--lpf-radius-sm);
    background: var(--lpf-surface);
    border: 1px solid var(--lpf-line);
    color: var(--lpf-body) !important;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    text-decoration: none !important;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.16s ease;
}

.single .entry-content a.lpf-share-btn:hover,
.lpf-share-btn:hover {
    background: var(--b, var(--lpf-accent-strong));
    border-color: var(--b, var(--lpf-accent-strong));
    color: #ffffff !important;
    transform: translateY(-2px);
    text-decoration: none !important;
}

.lpf-share-btn i,
.lpf-share-btn svg {
    font-size: 14px;
    flex-shrink: 0;
}

.lpf-share-btn svg {
    width: 14px;
    height: 14px;
}

/* Copy link confirms itself rather than silently succeeding. */
.lpf-share-copy.is-done {
    background: var(--lpf-accent-strong) !important;
    border-color: var(--lpf-accent-strong) !important;
    color: #ffffff !important;
}

/* The OS share sheet button, revealed only where navigator.share exists. */
.lpf-share-native {
    background: var(--lpf-btn-on-light) !important;
    border-color: transparent !important;
    color: #ffffff !important;
}

.lpf-share-native:hover {
    filter: brightness(1.08);
}

@media (max-width: 600px) {
    .lpf-share {
        padding: 20px 18px;
    }

    /* Labels are the first thing to go: seven icons still fit a phone, seven
       labelled buttons do not. Copy link keeps its label because the icon
       alone does not say what it does. */
    .lpf-share-btn .lpf-share-label {
        display: none;
    }

    .lpf-share-copy .lpf-share-label,
    .lpf-share-native span {
        display: inline;
    }

    .lpf-share-btn {
        padding: 10px 12px;
    }

    .lpf-share-btn i,
    .lpf-share-btn svg {
        font-size: 15px;
    }
}