:root {
    --bg-color: #0a0e17;
    --bg-secondary: #0f1420;
    --text-main: #f0f4f8;
    --text-muted: #8c9bb3;
    --primary: #5aa2ff;
    --primary-glow: rgba(90, 162, 255, 0.4);
    --secondary: #6f86d6;
    --accent: #6f86d6;
    --glass-bg: rgba(255, 255, 255, 0.03);
    --glass-border: rgba(255, 255, 255, 0.08);
    --glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
    --transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    --gold: #e9b44c;
    --gold-hover: #f0c065;
    --gold-glow: rgba(233, 180, 76, 0.4);
}

/* Background Ambient Glow */
body::before {
    content: '';
    position: fixed;
    top: -20%;
    left: -10%;
    width: 50vw;
    height: 50vw;
    background: radial-gradient(circle, var(--primary-glow) 0%, transparent 60%);
    filter: blur(100px);
    z-index: -1;
    opacity: 0.5;
    pointer-events: none;
}

body::after {
    content: '';
    position: fixed;
    bottom: -20%;
    right: -10%;
    width: 60vw;
    height: 60vw;
    background: radial-gradient(circle, rgba(111, 134, 214, 0.3) 0%, transparent 60%);
    filter: blur(120px);
    z-index: -1;
    opacity: 0.5;
    pointer-events: none;
}

/* Blog Container */
.blog-container {
    padding-top: 72px;
    /* Standard header height */
}

/* Hero Section Sync */
.blog-hero {
    padding: 100px 0 60px !important;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.gradient-text {
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.section-badge {
    display: inline-block;
    padding: 0.4rem 1.2rem;
    background: rgba(90, 162, 255, 0.1);
    border: 1px solid rgba(90, 162, 255, 0.2);
    color: var(--primary);
    border-radius: 50px;
    font-size: 0.9rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 1.5rem;
}

.blog-hero h1 {
    font-size: clamp(2.5rem, 8vw, 4.2rem);
    font-weight: 900;
    line-height: 1.1;
    margin-bottom: 1.5rem;
    color: var(--text-main);
}

@media (max-width: 768px) {
    .blog-hero {
        padding: 80px 0 40px !important;
    }

    .blog-hero h1 {
        font-size: 2.2rem;
    }
}

.blog-hero p {
    font-size: 0.95rem;
    /* Reduced from 1.1rem */
    color: var(--text-muted);
    max-width: 700px;
    margin: 0 auto 2rem;
    line-height: 1.6;
}

/* Specific adjustment for single posts hero to be even tighter */
.single-post-hero {
    padding: 60px 0 30px !important;
}

.single-post-hero h1 {
    font-size: clamp(2rem, 6vw, 3rem);
    margin-bottom: 0;
}

/* Sub-header mimics PrivateMovieZ categories nav */
/* Refined Sub-header & Search */
.blog-sub-header {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--glass-border);
    border-radius: 50px;
    padding: 10px 25px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 2rem auto 4rem;
    max-width: 900px;
    gap: 20px;
    flex-wrap: wrap;
    backdrop-filter: blur(10px);
}

@media (max-width: 768px) {
    .blog-sub-header {
        border-radius: 12px;
        justify-content: center;
        padding: 15px;
    }
}

.blog-categories ul {
    list-style: none;
    display: flex;
    gap: 20px;
    margin: 0;
    padding: 0;
}

.blog-sub-header a {
    color: var(--text-main);
    font-size: 0.9rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: var(--transition);
}

.blog-sub-header a:hover {
    color: var(--primary);
}

.blog-sub-header a i {
    color: var(--primary);
}

/* Premium Search Form */
.blog-search {
    flex-grow: 0;
}

.blog-search form {
    display: flex;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--glass-border);
    border-radius: 30px;
    overflow: hidden;
    transition: var(--transition);
}

.blog-search form:focus-within {
    border-color: var(--primary);
    box-shadow: 0 0 10px rgba(90, 162, 255, 0.2);
}

.blog-search label {
    margin-bottom: 0px;
    display: flex;
    align-items: center;
}

/* Hide WP default search labels */
.blog-search .screen-reader-text,
.blog-search label>span:first-child {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    -webkit-clip-path: inset(50%);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    word-wrap: normal !important;
}

.blog-search input[type="text"],
.blog-search input[type="search"] {
    background: transparent;
    border: none;
    padding: 8px 15px;
    color: var(--text-main);
    outline: none;
    font-size: 0.9rem;
    width: 160px;
}

.blog-search button,
.blog-search input[type="submit"] {
    background: var(--primary);
    color: #000;
    border: none;
    padding: 8px 20px;
    cursor: pointer;
    font-family: inherit;
    font-weight: 600;
    font-size: 0.85rem;
    text-transform: uppercase;
    transition: var(--transition);
}

.blog-search button:hover,
.blog-search input[type="submit"]:hover {
    background: var(--gold);
}

/* Helper: Hidden but accessible text */
.screen-reader-text {
    clip: rect(1px, 1px, 1px, 1px);
    position: absolute !important;
    height: 1px;
    width: 1px;
    overflow: hidden;
}

/* Navigation & Header Components
   The header/currency widgets are NOT restyled here any more. This theme used to
   carry its own copy (.nav-currency > .currency-selected + .currency-dropdown as
   the popup), which is the shape the main site used a few releases ago. The main
   site now ships .currency-dropdown as the WRAPPER and .currency-menu as the
   popup, so the old copy fought the shared styles.css: .nav-right's 20px gap beat
   the responsive 10/8/6px steps, and .currency-dropdown{position:absolute} was
   applied to what the shared CSS treats as a relative wrapper. header.php now
   emits the same markup as the main site, so styles.css/theme.css style it. */

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Post Grid Layout */
.post-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 25px;
    margin-bottom: 40px;
}

@media (max-width: 768px) {
    .post-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 15px;
    }
}

.post-card {
    background: var(--bg-secondary);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    overflow: hidden;
    transition: var(--transition);
    display: flex;
    flex-direction: column;
}

.post-card:hover {
    transform: translateY(-5px);
    border-color: rgba(90, 162, 255, 0.3);
    box-shadow: 0 5px 20px rgba(90, 162, 255, 0.1);
}

.post-thumbnail {
    width: 100%;
    position: relative;
    padding-top: 150%;
    /* 2:3 Aspect ratio like movie posters */
    overflow: hidden;
    background: var(--bg-color);
}

.post-thumbnail img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: var(--transition);
}

.post-card:hover .post-thumbnail img {
    transform: scale(1.05);
}

.post-info {
    padding: 15px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.post-meta {
    margin-bottom: 8px;
}

.post-cat {
    background: rgba(90, 162, 255, 0.1);
    color: var(--primary);
    font-size: 0.75rem;
    padding: 3px 8px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
    display: inline-block;
}

.post-title {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.4;
    margin-bottom: 8px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.post-title a {
    color: var(--text-main);
    text-decoration: none;
}

.post-title a:hover {
    color: var(--primary);
}

.post-date {
    font-size: 0.8rem;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: auto;
}

/* Pagination */
.pagination {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin: 40px 0;
}

.pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: var(--bg-secondary);
    border: 1px solid var(--glass-border);
    border-radius: 8px;
    color: var(--text-main);
    transition: var(--transition);
    text-decoration: none;
}

.pagination .page-numbers:hover,
.pagination .page-numbers.current {
    background: var(--primary);
    color: #000;
    border-color: var(--primary);
}

/* Single Post Content Styling for readability */
.single-post-wrapper {
    max-width: 900px;
    margin: 0 auto;
    padding-top: 20px;
}

.single-post-content {
    font-size: 1.15rem;
    line-height: 1.8;
    color: var(--text-main);
    overflow-wrap: break-word;
    word-wrap: break-word;
}

/* Post Content Safety: Keep everything in layout */
.single-post-content img,
.single-post-content figure,
.single-post-content table,
.single-post-content iframe,
.single-post-content video {
    max-width: 100% !important;
    height: auto !important;
    border-radius: 12px;
}

.single-post-content table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 2rem;
    display: block;
    overflow-x: auto;
}

.single-post-content pre,
.single-post-content code {
    max-width: 100%;
    white-space: pre-wrap;
    word-break: break-all;
    background: var(--bg-secondary);
    padding: 15px;
    border-radius: 8px;
    border: 1px solid var(--glass-border);
}

.single-post-content h2,
.single-post-content h3 {
    margin-top: 1.5em;
    margin-bottom: 0.5em;
    color: var(--text-main);
}

.single-post-content p {
    margin-bottom: 1.5em;
}

.single-post-content a {
    color: var(--primary);
    text-decoration: underline;
}

.single-post-content a:hover {
    color: var(--gold);
}

/* Performance & Smooth Scrolling Classes */
html,
body {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    text-rendering: optimizeLegibility;
}

img {
    max-width: 100%;
    height: auto;
    /* content-visibility:auto was here. It let the browser skip painting an image
       until it was almost on screen, on top of the loading="lazy" the images
       already carry, so on a slow Android scroll the card thumbnails showed up as
       empty boxes that filled in a beat later. */
}

.post-card {
    will-change: transform;
    /* CSS containment for performance */
    contain: layout style;
}

/* =====================================================
   BLOG SIDEBAR LAYOUT (sticky on desktop, responsive)
   ===================================================== */
/* position:sticky breaks if any ancestor has overflow:hidden — the main CSS sets
   section{overflow:hidden}, so re-enable visible overflow on the blog containers. */
.ok-index-posts,.post-content-section,.blog-container,.ok-blog-layout,.ok-blog-main{overflow:visible !important;}
/* The main CSS sets html,body{overflow-x:hidden} which turns BODY into a scroll
   container (overflow:hidden auto) and breaks position:sticky. `clip` prevents the
   horizontal scrollbar WITHOUT creating a scroll container, so sticky works again. */
html,body{overflow-x:clip !important;overflow-y:visible !important;}
.ok-blog-layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:2.5rem;align-items:start;}
.ok-blog-main{min-width:0;}
.ok-blog-sidebar{position:sticky;top:100px;display:flex;flex-direction:column;gap:1.4rem;}
.ok-side-card{background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:16px;padding:1.3rem 1.4rem;}
.ok-side-title{font-size:1.05rem;font-weight:700;color:var(--text-main);margin:0 0 1rem;padding-bottom:0.7rem;border-bottom:1px solid var(--glass-border);}
.ok-side-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0.6rem;}
.ok-side-list li{margin:0;}
.ok-side-list a{color:var(--text-muted);text-decoration:none;font-size:0.92rem;line-height:1.45;transition:color .2s;}
.ok-side-list a:hover{color:var(--primary);}
.ok-side-cats ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0.6rem;}
.ok-side-cta p{color:var(--text-muted);font-size:0.9rem;line-height:1.55;margin:0 0 1rem;}
.ok-side-btn{width:100%;text-align:center;display:block;}
.ok-blog-sidebar .search-form,.ok-blog-sidebar form[role="search"]{display:flex;gap:0.5rem;margin:0;}
.ok-blog-sidebar .search-field,.ok-blog-sidebar input[type="search"]{flex:1;min-width:0;width:100%;padding:0.6rem 0.8rem;border-radius:10px;border:1px solid var(--glass-border);background:var(--glass-bg);color:var(--text-main);font-size:0.9rem;}
.ok-blog-sidebar .search-submit,.ok-blog-sidebar input[type="submit"]{padding:0.6rem 0.9rem;border-radius:10px;border:none;background:var(--primary);color:#0a0e17;font-weight:700;cursor:pointer;}

/* Tablet: sidebar drops below content, cards flow in a row */
@media (max-width:1024px){
  .ok-blog-layout{grid-template-columns:1fr;}
  .ok-blog-sidebar{position:static;top:auto;flex-direction:row;flex-wrap:wrap;margin-top:2.5rem;}
  .ok-side-card{flex:1 1 260px;}
}
/* Mobile: full-width stacked */
@media (max-width:600px){
  .ok-blog-sidebar{flex-direction:column;gap:1.1rem;}
  .ok-side-card{flex:1 1 auto;}
}

/* =====================================================
   COMMENT FORM (Leave a Reply) — aligned + themed
   ===================================================== */
.comments-area{margin-top:2.5rem;}
#respond,.comment-respond{background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:16px;padding:1.8rem;}
.comment-reply-title{font-size:1.45rem;font-weight:700;color:var(--text-main);margin:0 0 0.4rem;}
.comment-notes,.comment-form-cookies-consent label{color:var(--text-muted);font-size:0.88rem;line-height:1.5;}
.comment-form{display:flex;flex-direction:column;gap:1rem;margin-top:1.1rem;}
.comment-form p{margin:0;}
.comment-form label{display:block;font-size:0.85rem;font-weight:600;color:var(--text-muted);margin-bottom:0.4rem;}
.comment-form input[type="text"],.comment-form input[type="email"],.comment-form input[type="url"],.comment-form textarea{width:100%;padding:0.8rem 1rem;border-radius:10px;border:1px solid var(--glass-border);background:rgba(255,255,255,0.04);color:var(--text-main);font-size:0.95rem;font-family:inherit;box-sizing:border-box;}
.comment-form textarea{min-height:140px;resize:vertical;display:block;}
.comment-form input:focus,.comment-form textarea:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-glow);}
.comment-form-cookies-consent{display:flex;align-items:flex-start;gap:0.55rem;}
.comment-form-cookies-consent input{width:auto;margin-top:0.2rem;}
.comment-form-cookies-consent label{margin-bottom:0;}
.form-submit{margin:0;}
.form-submit .submit,#submit{background:var(--primary);color:#0a0e17;border:none;padding:0.85rem 2rem;border-radius:10px;font-weight:700;font-size:0.95rem;cursor:pointer;transition:var(--transition);}
.form-submit .submit:hover,#submit:hover{filter:brightness(1.1);transform:translateY(-1px);}
/* Two-column for name/email on desktop */
@media(min-width:768px){
  .comment-form{display:grid;grid-template-columns:1fr 1fr;gap:1rem 1.2rem;align-items:end;}
  .comment-notes,.comment-form-comment,.comment-form-url,.comment-form-cookies-consent,.form-submit,.logged-in-as{grid-column:1 / -1;}
}
/* Existing comments list */
.comment-list{list-style:none;margin:0 0 2rem;padding:0;display:flex;flex-direction:column;gap:1.2rem;}
.comment-list .comment-body{background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:14px;padding:1.2rem 1.4rem;}
.comment-list .comment-author .fn{color:var(--text-main);font-weight:700;}
.comment-list .comment-meta a{color:var(--text-muted);font-size:0.82rem;text-decoration:none;}

/* Comment form — light mode */
html[data-theme="light"] #respond,html[data-theme="light"] .comment-respond{background:#ffffff;border-color:rgba(0,0,0,0.08);box-shadow:0 4px 18px rgba(15,23,42,0.05);}
html[data-theme="light"] .comment-reply-title{color:#0f172a;}
html[data-theme="light"] .comment-form label{color:#475569;}
html[data-theme="light"] .comment-notes,html[data-theme="light"] .comment-form-cookies-consent label{color:#64748b;}
html[data-theme="light"] .comment-form input[type="text"],html[data-theme="light"] .comment-form input[type="email"],html[data-theme="light"] .comment-form input[type="url"],html[data-theme="light"] .comment-form textarea{background:#f8fafc;border-color:rgba(0,0,0,0.12);color:#0f172a;}
html[data-theme="light"] .comment-list .comment-body{background:#fff;border-color:rgba(0,0,0,0.08);}
html[data-theme="light"] .comment-list .comment-author .fn{color:#0f172a;}

/* Light mode sidebar */
html[data-theme="light"] .ok-side-card{background:#ffffff;border-color:rgba(0,0,0,0.08);box-shadow:0 4px 18px rgba(15,23,42,0.05);}
html[data-theme="light"] .ok-side-title{color:#0f172a;border-bottom-color:rgba(0,0,0,0.08);}
html[data-theme="light"] .ok-side-list a{color:#475569;}
html[data-theme="light"] .ok-side-list a:hover{color:#1d63d8;}
html[data-theme="light"] .ok-side-cta p{color:#475569;}
html[data-theme="light"] .ok-blog-sidebar .search-field,html[data-theme="light"] .ok-blog-sidebar input[type="search"]{background:#f8fafc;border-color:rgba(0,0,0,0.12);color:#0f172a;}
/* === Restored article (post) design CSS === */

/* OffshoreKaka Final Article Presentation System */
.ok-article-page { padding-top: 72px; }
.ok-article-hero { position: relative; padding: 44px 0 24px; overflow: hidden; }
.ok-article-hero:before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 18% 10%, rgba(90, 162, 255,.16), transparent 30%), radial-gradient(circle at 82% 0%, rgba(233, 180, 76,.10), transparent 26%); pointer-events: none; }
.ok-article-hero-inner { position: relative; max-width: 980px; margin: 0 auto; text-align: center; }
.ok-article-cat { display: inline-flex; align-items: center; justify-content: center; min-height: 32px; padding: 6px 12px; border-radius: 999px; color: var(--gold); background: rgba(233, 180, 76,.08); border: 1px solid rgba(233, 180, 76,.22); font-size: .76rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; }
.ok-article-cat:hover { color: #051018; background: var(--gold); }
.ok-article-hero h1 { margin: 14px auto 12px; max-width: 940px; color: var(--text-main); font-size: clamp(2rem, 4.8vw, 4rem); line-height: 1.08; font-weight: 900; letter-spacing: 0; }
.ok-article-meta { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px 14px; color: var(--text-muted); font-size: .9rem; }
.ok-article-meta span { display: inline-flex; align-items: center; gap: 8px; }
.ok-article-meta span:not(:last-child):after { content: ''; width: 5px; height: 5px; border-radius: 999px; background: var(--primary); opacity: .6; margin-left: 6px; }
.ok-article-section { padding-top: 8px !important; padding-bottom: 70px; overflow: visible !important; }
.ok-article-layout { grid-template-columns: minmax(0, 900px) 320px; gap: 34px; align-items: start; justify-content: center; }
.single-post-wrapper { max-width: none; padding-top: 0; }
.ok-article-content { max-width: 900px; margin: 0; padding: 0; }
.ok-article-content > *:first-child { margin-top: 0 !important; }
.ok-article-content .ok-pro-panel { position: relative; padding: 24px; border-radius: 18px; overflow: hidden; background: linear-gradient(145deg, rgba(255,255,255,.07), rgba(255,255,255,.025)); border: 1px solid rgba(255,255,255,.11); box-shadow: 0 22px 60px rgba(0,0,0,.26); }
.ok-article-content .ok-pro-panel:before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--primary), var(--gold), #22c55e); }
.ok-article-content .ok-pro-kicker { display: inline-flex; padding: 5px 10px; border-radius: 999px; background: rgba(233, 180, 76,.10); color: var(--gold); border: 1px solid rgba(233, 180, 76,.22); font-size: .72rem; }
.ok-article-content .ok-pro-panel h2 { margin-top: 10px; }
.ok-article-content .ok-pro-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 18px; }
.ok-article-content .ok-pro-card { min-height: 130px; padding: 16px; border-radius: 14px; background: rgba(3,7,18,.58); border: 1px solid rgba(255,255,255,.09); box-shadow: inset 0 1px 0 rgba(255,255,255,.04); }
.ok-article-content .ok-pro-card strong { color: #fff; font-size: .95rem; }
.ok-article-content .ok-pro-card span { color: var(--text-muted); font-size: .9rem; line-height: 1.55; }
.ok-article-content .ok-toc { display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 10px !important; margin: 18px 0 28px; padding: 16px 18px !important; border-radius: 16px; background: rgba(90, 162, 255,.045); border: 1px solid rgba(90, 162, 255,.14); }
.ok-article-content .ok-toc strong { flex: 0 0 100%; display: block; margin: 0 0 2px !important; color: #fff; line-height: 1.25; }
.ok-article-content .ok-toc a { display: inline-flex !important; align-items: center; justify-content: center; min-height: 34px; margin: 0 !important; padding: 7px 12px !important; border-radius: 999px; color: #dbeafe; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.10); text-decoration: none; line-height: 1.15; white-space: nowrap; font-size: .86rem; font-weight: 700; }
.ok-article-content .ok-toc a:hover { color: #0a0e17; background: var(--gold); }
.ok-article-content h2 { margin: 2.3rem 0 1rem; color: #fff; font-size: clamp(1.45rem, 2.4vw, 2rem); line-height: 1.18; }
.ok-article-content h2:after { content: ''; display: block; width: 72px; height: 3px; margin-top: .65rem; border-radius: 999px; background: linear-gradient(90deg, var(--primary), var(--gold)); }
.ok-article-content h3 { color: #e2e8f0; font-size: 1.14rem; margin: 1.35rem 0 .55rem; }
.ok-article-content p, .ok-article-content li { color: #b8c4d6; font-size: 1rem; line-height: 1.82; }
.ok-article-content p { margin-bottom: 1.15rem; }
.ok-article-content a { color: var(--primary); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.ok-article-content ul { margin: 1rem 0 1.35rem; padding: 1rem 1.2rem 1rem 2.35rem; border-radius: 14px; background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.08); }
.ok-article-content li { margin: .42rem 0; }
.ok-article-content figure.wp-block-image { margin: 1.7rem 0 2rem; padding: 8px; border-radius: 20px; background: linear-gradient(135deg, rgba(90, 162, 255,.22), rgba(233, 180, 76,.16)); border: 1px solid rgba(255,255,255,.12); box-shadow: 0 22px 60px rgba(0,0,0,.28); }
.ok-article-content figure.wp-block-image img { display: block; width: 100%; height: auto; border-radius: 14px; }
.ok-article-content figcaption { color: #aebbd0; text-align: center; font-size: .86rem; padding: 10px 6px 2px; }
.ok-article-content table { display: table; width: 100%; border-collapse: separate; border-spacing: 0; overflow: hidden; border-radius: 14px; border: 1px solid rgba(255,255,255,.10); background: rgba(2,6,23,.65); box-shadow: 0 14px 34px rgba(0,0,0,.18); }
.ok-article-content th { padding: 13px 14px; color: #0a0e17; background: linear-gradient(135deg, var(--primary), var(--gold)); text-align: left; font-weight: 900; }
.ok-article-content td { padding: 13px 14px; border-top: 1px solid rgba(255,255,255,.08); color: #cbd5e1; }
.ok-article-content .ok-depth-section { margin: 2rem 0; padding: 22px; border-radius: 18px; border: 1px solid rgba(90, 162, 255,.13); background: linear-gradient(145deg, rgba(90, 162, 255,.055), rgba(255,255,255,.025)); }
.ok-article-content .ok-depth-section h2:first-child { margin-top: 0; }
.ok-article-content .ok-cta-box { margin: 2.2rem 0; padding: 22px; border-radius: 18px; border: 1px solid rgba(233, 180, 76,.28); background: linear-gradient(135deg, rgba(233, 180, 76,.12), rgba(90, 162, 255,.055)); box-shadow: 0 18px 44px rgba(0,0,0,.20); }
.ok-article-content .ok-cta-box strong { display: block; color: #fff; font-size: 1.08rem; margin-bottom: 6px; }
.ok-article-content .ok-cta-box p { margin-bottom: 8px; }
.ok-article-content .ok-cta-box a { display: inline-flex; align-items: center; min-height: 40px; padding: 9px 14px; border-radius: 999px; background: var(--gold); color: #061018; text-decoration: none; font-weight: 900; }
.ok-blog-sidebar { top: 92px; }
.ok-side-card { border-radius: 16px; background: linear-gradient(145deg, rgba(255,255,255,.055), rgba(255,255,255,.025)); box-shadow: 0 16px 44px rgba(0,0,0,.18); }
.ok-side-title { font-size: .96rem; letter-spacing: .02em; }
.ok-side-list a { display: block; padding: 7px 0; border-bottom: 1px solid rgba(255,255,255,.055); }
.ok-side-list li:last-child a { border-bottom: 0; }

html[data-theme="light"] .ok-article-hero:before { background: radial-gradient(circle at 18% 10%, rgba(29, 99, 216,.11), transparent 30%), radial-gradient(circle at 82% 0%, rgba(245,158,11,.13), transparent 26%); }
html[data-theme="light"] .ok-article-cat { color: #92400e; background: #eef2f9; border-color: rgba(245,158,11,.28); }
html[data-theme="light"] .ok-article-cat:hover { color: #111827; background: #facc15; }
html[data-theme="light"] .ok-article-hero h1 { color: #0f172a; }
html[data-theme="light"] .ok-article-meta { color: #475569; }
html[data-theme="light"] .ok-article-content .ok-pro-panel,
html[data-theme="light"] .ok-article-content .ok-depth-section { background: #ffffff; border-color: rgba(15,23,42,.10); box-shadow: 0 18px 42px rgba(15,23,42,.08); }
html[data-theme="light"] .ok-article-content .ok-pro-card { background: #f8fafc; border-color: rgba(15,23,42,.09); }
html[data-theme="light"] .ok-article-content .ok-pro-card strong,
html[data-theme="light"] .ok-article-content h2,
html[data-theme="light"] .ok-article-content h3,
html[data-theme="light"] .ok-article-content .ok-cta-box strong { color: #0f172a; }
html[data-theme="light"] .ok-article-content p,
html[data-theme="light"] .ok-article-content li,
html[data-theme="light"] .ok-article-content .ok-pro-card span { color: #334155; }
html[data-theme="light"] .ok-article-content ul { background: #ffffff; border-color: rgba(15,23,42,.10); box-shadow: 0 12px 30px rgba(15,23,42,.055); }
html[data-theme="light"] .ok-article-content .ok-toc { background: #ffffff !important; border: 1px solid rgba(15,23,42,.10) !important; border-left: 4px solid #1d63d8 !important; box-shadow: 0 12px 30px rgba(15,23,42,.07) !important; }
html[data-theme="light"] .ok-article-content .ok-toc strong { color: #0f172a !important; }
html[data-theme="light"] .ok-article-content .ok-toc a { color: #0f172a !important; background: #f1f5f9 !important; border-color: rgba(15,23,42,.10) !important; }
html[data-theme="light"] .ok-article-content .ok-toc a:hover { color: #fff !important; background: #1d63d8 !important; }
html[data-theme="light"] .ok-article-content figure.wp-block-image { background: linear-gradient(135deg, #eef2f9 0%, #ffffff 68%, #fef3c7 100%); border-color: rgba(15,23,42,.10); box-shadow: 0 18px 42px rgba(15,23,42,.08); }
html[data-theme="light"] .ok-article-content figcaption { color: #475569; }
html[data-theme="light"] .ok-article-content table { background: #ffffff; border-color: rgba(15,23,42,.10); box-shadow: 0 14px 34px rgba(15,23,42,.06); }
html[data-theme="light"] .ok-article-content th { color: #0f172a; background: #f1f5f9; border-bottom: 1px solid rgba(15,23,42,.10); }
html[data-theme="light"] .ok-article-content td { color: #334155; border-top-color: rgba(15,23,42,.09); background: #fff; }
html[data-theme="light"] .ok-article-content tr:nth-child(even) td { background: #f8fafc; }
html[data-theme="light"] .ok-article-content .ok-cta-box { background: linear-gradient(135deg, #eef2f9 0%, #ffffff 55%, #eef2f9 100%); border-color: rgba(245,158,11,.34); box-shadow: 0 18px 42px rgba(15,23,42,.08); }

@media (max-width: 1024px) {
  .ok-article-layout { grid-template-columns: 1fr; }
  .ok-blog-sidebar { position: static; }
}
@media (max-width: 760px) {
  .ok-article-page { padding-top: 64px; }
  .ok-article-hero { padding: 30px 0 18px; }
  .ok-article-hero h1 { font-size: clamp(1.65rem, 8vw, 2.45rem); }
  .ok-article-layout { gap: 22px; }
  .ok-article-content .ok-pro-panel,
  .ok-article-content .ok-depth-section,
  .ok-article-content .ok-cta-box { padding: 16px; }
  .ok-article-content .ok-pro-grid { grid-template-columns: 1fr; }
  .ok-article-content .ok-toc { align-items: stretch !important; gap: 8px !important; padding: 14px !important; }
  .ok-article-content .ok-toc a { flex: 1 1 calc(50% - 8px); white-space: normal; }
  .ok-article-content table { display: block; overflow-x: auto; }
}

/* Tighten header-to-article gap — .blog-container already clears the 72px fixed header,
   so the extra page padding-top is redundant; trim hero top padding too. */
.ok-article-page{padding-top:0 !important;}
.ok-article-hero{padding-top:34px !important;}

/* Category count on same line as the category name (count was wrapping to next line) */
.ok-side-cats .cat-item{display:flex;align-items:baseline;justify-content:space-between;gap:0.5rem;}
.ok-side-cats .cat-item a{display:inline;flex:0 1 auto;}

/* =====================================================
   BLOG INDEX — professional hosting-company design
   ===================================================== */
.ok-blog-home{padding-bottom:3rem;}

/* Hero */
.ok-index-hero{position:relative;padding:64px 0 42px;text-align:center;overflow:hidden;}
.ok-index-hero:before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 20% 12%,rgba(90, 162, 255,.14),transparent 38%),radial-gradient(circle at 82% 8%,rgba(111, 134, 214,.13),transparent 36%);pointer-events:none;}
.ok-index-hero .container{position:relative;max-width:880px;}
.ok-index-kicker{display:inline-block;font-size:.76rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--primary);background:rgba(90, 162, 255,.08);border:1px solid rgba(90, 162, 255,.25);padding:.45rem 1.05rem;border-radius:999px;margin-bottom:1.25rem;}
.ok-index-hero h1{font-size:clamp(2rem,4vw,3.05rem);font-weight:900;line-height:1.12;margin:0 0 1rem;letter-spacing:-.02em;}
.ok-index-hero p{color:var(--text-muted);font-size:1.06rem;line-height:1.6;max-width:680px;margin:0 auto 1.7rem;}
.ok-topic-chips{display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center;}
.ok-topic-chips a{font-size:.86rem;font-weight:600;color:var(--text-main);background:var(--glass-bg);border:1px solid var(--glass-border);padding:.5rem 1.1rem;border-radius:999px;text-decoration:none;transition:var(--transition);}
.ok-topic-chips a:hover{border-color:var(--primary);color:var(--primary);transform:translateY(-2px);}

/* Section head */
.ok-section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;margin-bottom:1.9rem;flex-wrap:wrap;}
.ok-section-head span{display:block;font-size:.78rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--primary);margin-bottom:.35rem;}
.ok-section-head h2{font-size:1.65rem;font-weight:800;margin:0;}
.ok-section-link{color:var(--text-muted);text-decoration:none;font-weight:600;font-size:.92rem;white-space:nowrap;transition:color .2s;}
.ok-section-link:hover{color:var(--primary);}

/* Card grid */
.ok-enhanced-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.6rem;}
.post-card{background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:18px;overflow:hidden;display:flex;flex-direction:column;transition:transform .3s cubic-bezier(.16,1,.3,1),box-shadow .3s,border-color .3s;}
.post-card:hover{transform:translateY(-6px);border-color:rgba(90, 162, 255,.35);box-shadow:0 24px 50px rgba(0,0,0,.35),0 0 28px rgba(90, 162, 255,.08);}
.post-thumbnail{display:block;aspect-ratio:16/9;overflow:hidden;background:var(--bg-secondary);}
.post-thumbnail img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease;display:block;}
.post-card:hover .post-thumbnail img{transform:scale(1.05);}
.post-info{padding:1.3rem 1.4rem 1.5rem;display:flex;flex-direction:column;gap:.7rem;flex:1;}
.post-meta{display:flex;align-items:center;gap:.7rem;font-size:.78rem;}
.post-cat{font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--primary);font-size:.72rem;}
.ok-read-time{color:var(--text-muted);}
.post-title{font-size:1.18rem;font-weight:700;line-height:1.35;margin:0;}
.post-title a{color:var(--text-main);text-decoration:none;transition:color .2s;}
.post-title a:hover{color:var(--primary);}
.ok-card-excerpt{color:var(--text-muted);font-size:.92rem;line-height:1.6;margin:0;}
.ok-card-footer{display:flex;align-items:center;justify-content:space-between;margin-top:auto;padding-top:.7rem;}
.post-date{color:var(--text-muted);font-size:.8rem;display:flex;align-items:center;gap:.4rem;}
.ok-read-more{color:var(--primary);font-weight:700;font-size:.85rem;text-decoration:none;display:inline-flex;align-items:center;gap:.3rem;transition:gap .2s;}
.ok-read-more:after{content:'\2192';}
.ok-read-more:hover{gap:.6rem;}

/* Featured first card — spans both columns, horizontal */
.ok-feature-card{grid-column:1 / -1;flex-direction:row;}
.ok-feature-card .post-thumbnail{flex:1 1 50%;aspect-ratio:auto;min-height:300px;}
.ok-feature-card .post-info{flex:1 1 50%;justify-content:center;padding:2.2rem;gap:.9rem;}
.ok-feature-card .post-title{font-size:1.7rem;}
.ok-feature-card .ok-card-excerpt{font-size:1.02rem;}

/* Empty state */
.ok-empty-state{text-align:center;padding:3rem 1rem;background:var(--glass-bg);border:1px dashed var(--glass-border);border-radius:18px;}
.ok-empty-state h2{font-size:1.4rem;margin:0 0 .5rem;}
.ok-empty-state p{color:var(--text-muted);margin:0;}

/* Pagination */
.ok-index-pagination{display:flex;justify-content:center;flex-wrap:wrap;gap:.5rem;margin-top:2.6rem;}
.ok-index-pagination .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:42px;height:42px;padding:0 .85rem;border-radius:10px;border:1px solid var(--glass-border);background:var(--glass-bg);color:var(--text-main);text-decoration:none;font-weight:600;transition:var(--transition);}
.ok-index-pagination .page-numbers:hover,.ok-index-pagination .page-numbers.current{background:var(--primary);color:#0a0e17;border-color:var(--primary);}

/* Responsive */
@media(max-width:768px){
  .ok-enhanced-grid{grid-template-columns:1fr;}
  .ok-feature-card{flex-direction:column;}
  .ok-feature-card .post-thumbnail{aspect-ratio:16/9;min-height:0;}
  .ok-feature-card .post-info{padding:1.4rem;}
  .ok-feature-card .post-title{font-size:1.35rem;}
  .ok-index-hero{padding:40px 0 28px;}
}

/* Light mode */
html[data-theme="light"] .ok-index-kicker{background:rgba(29, 99, 216,.08);border-color:rgba(29, 99, 216,.25);color:#1d63d8;}
html[data-theme="light"] .ok-index-hero p{color:#475569;}
html[data-theme="light"] .ok-section-head h2{color:#0f172a;}
html[data-theme="light"] .post-card{background:#fff;border-color:rgba(0,0,0,.08);box-shadow:0 4px 18px rgba(15,23,42,.05);}
html[data-theme="light"] .post-card:hover{border-color:rgba(29, 99, 216,.35);box-shadow:0 24px 50px rgba(15,23,42,.12);}
html[data-theme="light"] .post-title a{color:#0f172a;}
html[data-theme="light"] .ok-card-excerpt,html[data-theme="light"] .ok-read-time,html[data-theme="light"] .post-date{color:#64748b;}
html[data-theme="light"] .ok-topic-chips a{background:#fff;border-color:rgba(0,0,0,.1);color:#0f172a;}
html[data-theme="light"] .ok-empty-state{background:#fff;border-color:rgba(0,0,0,.12);}
html[data-theme="light"] .ok-index-pagination .page-numbers{background:#fff;border-color:rgba(0,0,0,.1);color:#0f172a;}
\n/* OffshoreKaka Copyable Command Blocks */\n.ok-code-wrap{position:relative;margin:1.1rem 0 1.4rem;border-radius:14px;overflow:hidden;border:1px solid rgba(90, 162, 255,.18);background:#050b14;box-shadow:0 14px 34px rgba(0,0,0,.22)}\n.ok-code-copy{position:absolute;top:9px;right:9px;z-index:2;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.08);color:#e2e8f0;border-radius:8px;padding:6px 10px;font-size:.78rem;font-weight:800;cursor:pointer}\n.ok-code-copy:hover{background:var(--gold);color:#071018}\n.single-post-content .ok-code-wrap pre{margin:0!important;padding:44px 16px 16px!important;border:0!important;border-radius:0!important;background:transparent!important;overflow-x:auto!important;white-space:pre!important}\n.single-post-content .ok-code-wrap code{display:block!important;background:transparent!important;border:0!important;padding:0!important;color:#d1fae5!important;font-size:.92rem!important;line-height:1.65!important;white-space:pre!important;word-break:normal!important;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace!important}\nhtml[data-theme="light"] .ok-code-wrap{background:#0f172a;border-color:rgba(15,23,42,.18)}\nhtml[data-theme="light"] .ok-code-copy{background:#f8fafc;color:#0f172a;border-color:rgba(15,23,42,.18)}\n

/* === CLEAN card image sizing (vertical cards, fixed image height) === */
.post-card{display:flex !important;flex-direction:column !important;}
.post-card .post-thumbnail{display:block !important;position:static !important;width:100% !important;height:200px !important;max-height:200px !important;min-height:0 !important;aspect-ratio:auto !important;overflow:hidden !important;flex:0 0 auto !important;}
.post-card .post-thumbnail img{position:static !important;width:100% !important;height:200px !important;max-height:200px !important;object-fit:cover !important;display:block !important;}
.post-card .post-info{flex:0 1 auto !important;}
.ok-card-footer{margin-top:1rem !important;}
/* Featured = full-width vertical card, taller image */
.ok-feature-card{grid-column:1 / -1 !important;flex-direction:column !important;}
.ok-feature-card .post-thumbnail,.ok-feature-card .post-thumbnail img{height:320px !important;max-height:320px !important;flex:0 0 auto !important;}
.ok-feature-card .post-info{padding:1.8rem !important;}
.ok-feature-card .post-title{font-size:1.5rem !important;}
@media(max-width:768px){
  .post-card .post-thumbnail,.post-card .post-thumbnail img{height:190px !important;max-height:190px !important;}
  .ok-feature-card .post-thumbnail,.ok-feature-card .post-thumbnail img{height:210px !important;max-height:210px !important;}
}
/* Mobile/tablet scroll smoothness — fixed blurred glow layers + backdrop-filter cause repaint jank */
@media(max-width:1024px){
  body::before, body::after{display:none !important;}
  #mainHeader{backdrop-filter:none !important;-webkit-backdrop-filter:none !important;}
}

/* ROOT CAUSE FIX: base theme has .post-thumbnail{padding-top:150%} which (with box-sizing
   border-box) forced the <a> to ~620px regardless of height. Kill it so height applies. */
.post-card .post-thumbnail{padding:0 !important;padding-top:0 !important;padding-bottom:0 !important;}

/* === Copyable code blocks === */
.ok-article-content pre,.single-post-content pre{position:relative;background:#0b0e16;border:1px solid var(--glass-border);border-radius:12px;padding:2.4rem 1.1rem 1.1rem;margin:1.5rem 0;overflow-x:auto;font-size:.9rem;line-height:1.65;}
.ok-article-content pre code,.single-post-content pre code{background:none !important;border:0;padding:0;color:#d6e0ee;font-family:"JetBrains Mono","Fira Code",ui-monospace,SFMono-Regular,Menlo,monospace;white-space:pre;}
.ok-copy-btn{position:absolute;top:8px;right:8px;background:rgba(255,255,255,.08);border:1px solid var(--glass-border);color:#cbd5e1;font-size:.72rem;font-weight:600;padding:.32rem .62rem;border-radius:7px;cursor:pointer;display:inline-flex;align-items:center;gap:.35rem;transition:all .18s;z-index:2;}
.ok-copy-btn:hover{background:var(--primary);color:#0a0e17;border-color:var(--primary);}
.ok-copy-btn.copied{background:#16a34a;color:#fff;border-color:#16a34a;}
.ok-article-content :not(pre)>code,.single-post-content :not(pre)>code{background:rgba(90, 162, 255,.1);color:var(--primary);padding:.12em .42em;border-radius:5px;font-size:.88em;font-family:"JetBrains Mono",ui-monospace,monospace;}
html[data-theme="light"] .ok-article-content pre,html[data-theme="light"] .single-post-content pre{background:#0f172a;border-color:rgba(0,0,0,.12);}
html[data-theme="light"] .ok-article-content :not(pre)>code,html[data-theme="light"] .single-post-content :not(pre)>code{background:rgba(29, 99, 216,.1);color:#1d63d8;}
@media(max-width:600px){.ok-article-content pre,.single-post-content pre{font-size:.82rem;padding:2.2rem .85rem 1rem;}}

/* QA fix: stack ok-pro-card label above value */
.ok-pro-card strong{display:block;margin-bottom:.2rem;}

/* Light-mode currency popup now comes from the shared theme.css
   (html[data-theme="light"] .currency-menu), so the local override is gone.
   Only the hover tint is not in the shared file. */
html[data-theme="light"] .currency-menu .currency-item:hover{background:rgba(15,23,42,.05);}

/* Logo sizing is owned by the main site's styles.css (it steps the logo down at
   1024 / 768 / 420 / 360). An earlier `max-width:none` here undid the 420px step,
   so under a 430px phone the logo rendered at its natural 360px and shoved the
   theme toggle, currency picker and hamburger off the screen. Only keep the bit
   that is actually needed: the logo must not be squeezed by its flex siblings. */
@media (max-width: 768px){
  header .logo{flex-shrink:0;}
}


/* Footer surfaces identical to the main site */
body > footer, footer.site-footer{background:#080c15 !important;border-top:1px solid rgba(148,163,184,0.12) !important;}
html[data-theme="light"] body > footer, html[data-theme="light"] footer.site-footer{background:#ffffff !important;border-top:1px solid #e3e8f0 !important;}