@media (min-width: 1200px) { .container { width: 1350px; } }

/* Force the row/columns to lay out side-by-side. Without this, .col-md-8
   and .col-md-4 are just plain block elements with a width set — they still
   stack vertically (sidebar ends up below everything, including comments)
   because nothing declares .row as a flex/float container. */
.row{display:block;}
@media (min-width: 992px) {
    .row{display:flex !important;flex-wrap:wrap;align-items:flex-start;gap:0 2%;}
    .col-md-8{flex:0 0 70%;max-width:70%;width:70% !important;}
    .col-md-4{flex:0 0 28%;max-width:28%;width:28% !important;display:block !important;}
}

/* ================= ARTICLE HEADER ================= */
.page-title{background:#141414 !important;color:#fff;font-size:20px;font-weight:700;line-height:1.4;
    display:flex;align-items:flex-start;gap:10px;
    padding:16px 18px;border-radius:6px;margin:15px 0 0;box-shadow:0 0 1px rgba(204,197,185,.5);}
.page-title .material-text{color:#fff;flex:1;min-width:0;}
.page-title .title-emoji{font-size:22px;line-height:1;flex-shrink:0;margin-top:2px;}
@media (max-width:767px){
    .page-title{width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);
        border-radius:0;padding:16px 14px;}
}

.page-meta{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0 18px;}
.page-meta > span,.page-meta > a{display:inline-flex;align-items:center;gap:8px;
    padding:10px 16px;border-radius:6px;font-weight:700;font-size:14.5px;text-decoration:none;
    font-family:'Trebuchet MS',Helvetica,sans-serif !important;}
.page-meta > span{background:#1a73e8;color:#fff;}
.page-meta > a{background:#fff;color:#111;}
.page-meta > a:hover{background:#e6e6e6;color:#111;}
.page-meta .material-text{color:inherit;}
.page-meta i.material-icons{display:inline-flex;align-items:center;justify-content:center;width:15px;height:15px;flex-shrink:0;line-height:1;}
.page-meta > span i.material-icons::before,
.page-meta > a i.material-icons::before{font-family:"FontAwesome";font-style:normal;font-size:15px;line-height:1;}
.page-meta > span i.material-icons::before{content:"\f073";}
.page-meta > a i.material-icons::before{content:"\f07b";color:#555;}

.page-body{color:#ddd;font-size:16px;line-height:1.7;background:#141414;padding:15px;border-radius:6px;
    overflow-x:hidden;}
.page-body img{border-radius:4px;margin:10px auto;max-width:100%;height:auto;display:block;}
.page-body img.alignleft{float:left;margin:10px 20px 10px 0;}
.page-body img.alignright{float:right;margin:10px 0 10px 20px;}
.page-body img.aligncenter{margin-left:auto;margin-right:auto;}
.page-body a{color:#0087fc;}

/* Make embedded video/iframes (YouTube etc.) fully responsive instead of
   sticking to their hardcoded width/height attributes on small screens. */
.page-body iframe,
.page-body video,
.page-body embed,
.page-body object{
    max-width:100%;
    width:100%;
    aspect-ratio:16/9;
    height:auto;
    border:0;
    display:block;
    margin:10px 0;
}
/* Some page builders/oEmbeds wrap the iframe in a div - make sure that
   wrapper never forces a fixed pixel width either. */
.page-body p > iframe,
.page-body .wp-embed-responsive,
.page-body .wp-block-embed__wrapper,
.page-body .fluid-width-video-wrapper{
    max-width:100% !important;
    width:100% !important;
}
@media (max-width:767px){
    .page-body{padding:12px;}
    .page-body table{display:block;max-width:100%;overflow-x:auto;}
}

/* ================= ENGAGEMENT / REACTIONS ================= */
.engagement-section{margin-top:35px;padding-top:10px;text-align:center;}
.engagement-title{color:#fff;font-size:26px;font-weight:800;margin:10px 0 20px;}
.reactions-total{color:#0087fc;font-size:19px;font-weight:700;margin-bottom:18px;}
.reactions-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px 10px;margin:0 auto 10px;max-width:720px;}
.reaction-item{display:flex;flex-direction:column;align-items:center;gap:8px;}
.reaction-btn{display:flex;align-items:center;justify-content:flex-start;gap:8px;width:100%;cursor:pointer;
    background:#6e6e6e;border:none;border-radius:0;padding:14px 10px;
    font-family:'Open Sans',sans-serif;transition:.15s ease;}
.reaction-btn:hover{background:#7a7a7a;}
.reaction-btn.voted{background:#0087fc;}
.reaction-btn .reaction-emoji{font-size:22px;line-height:1;display:inline-block;flex-shrink:0;
    animation:reactionBounce 2.4s ease-in-out infinite;will-change:transform;transform:translateZ(0);
    backface-visibility:hidden;}
.reaction-item:nth-child(2) .reaction-emoji{animation-delay:.15s;}
.reaction-item:nth-child(3) .reaction-emoji{animation-delay:.3s;}
.reaction-item:nth-child(4) .reaction-emoji{animation-delay:.45s;}
.reaction-item:nth-child(5) .reaction-emoji{animation-delay:.6s;}
/* Stop the bounce once a choice is locked in — five infinite animations
   running forever is what was making the whole page feel janky on scroll. */
.reaction-btn.voted .reaction-emoji,
.reactions-grid.is-locked .reaction-emoji{animation:none;transform:none;}
@media (prefers-reduced-motion:reduce){
    .reaction-btn .reaction-emoji{animation:none;}
}
.reaction-btn .reaction-label{color:#fff;font-weight:800;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.reaction-count{color:#0087fc;font-size:20px;font-weight:800;}
@keyframes reactionBounce{
    0%,100%{transform:translateY(0) rotate(0deg);}
    25%{transform:translateY(-4px) rotate(-8deg);}
    50%{transform:translateY(0) rotate(0deg);}
    75%{transform:translateY(-3px) rotate(8deg);}
}
@media (max-width:520px){
    .reactions-grid{grid-template-columns:repeat(3,1fr);gap:8px 6px;max-width:100%;}
    .reaction-btn{padding:12px 6px;gap:6px;border-radius:0;}
    .reaction-btn .reaction-emoji{font-size:18px;}
    .reaction-btn .reaction-label{font-size:11.5px;}
    .reaction-count{font-size:17px;}
}
@media (max-width:360px){
    .reaction-btn{flex-direction:column;gap:4px;padding:10px 4px;}
    .reaction-btn .reaction-label{font-size:10.5px;}
}

.subscribe-row{display:flex;align-items:center;justify-content:flex-start;gap:8px;color:#999;
    font-size:16px;padding:14px 0;border-bottom:1px solid #262626;cursor:pointer;}
.subscribe-row i{font-size:16px;}

/* ================= COMMENTS ================= */
.comments-area{margin-top:10px;}
.comments-count{color:#999;font-size:14px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
    padding-bottom:12px;border-bottom:3px solid #0087fc;margin:20px 0;display:inline-block;}
#commentform{margin:15px 0 30px;}
.comment-form-comment textarea{width:100%;border:none;border-radius:8px;background:#fff;color:#111;
    padding:16px 18px;font-size:16px;min-height:60px;resize:vertical;box-sizing:border-box;}
.comment-form-inline-fields{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px;}
.comment-form-inline-fields p{flex:1;min-width:160px;margin:0;}
.comment-form-inline-fields input{width:100%;border:1px solid #333;border-radius:6px;background:#1c1c1c;
    color:#fff;padding:11px 14px;font-size:16px;box-sizing:border-box;}
.comment-form-inline-fields input::placeholder{color:#888;}
.form-submit{margin-top:14px;}
.comment-submit-btn{background:#1a73e8;color:#fff;border:none;border-radius:6px;font-weight:700;
    padding:12px 26px;font-size:15px;cursor:pointer;transition:.2s ease;}
.comment-submit-btn:hover{background:#1558b0;}

ol.comment-list{list-style:none;margin:20px 0 0;padding:0;}
ol.comment-list li{background:#1b1b1b;border-radius:8px;padding:16px;margin-bottom:14px;}
ol.comment-list .comment-author img{border-radius:50%;}
ol.comment-list .fn{color:#fff;font-weight:700;font-style:normal;}
ol.comment-list .comment-metadata{color:#888;font-size:12.5px;}
ol.comment-list .comment-metadata a{color:#888;text-decoration:none;}
ol.comment-list .comment-content p{color:#ccc;font-size:14.5px;line-height:1.6;}
ol.comment-list .reply a{color:#0087fc;font-size:13px;font-weight:700;text-decoration:none;}
.no-comments{color:#999;}

/* ================= SIDEBAR ================= */
.primary-sidebar{margin-top:30px;}
@media (min-width:992px){
    .primary-sidebar{position:sticky !important;display:block !important;top:20px;align-self:flex-start;}
}
.widget-title{display:flex;align-items:center;gap:10px;background:#141414 !important;color:#fff;
    font-size:19px;font-weight:700;padding:14px 16px;border-radius:6px;margin:0 0 12px;
    box-shadow:0 0 1px rgba(204,197,185,.5);}
.widget-title i.material-icons{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;flex-shrink:0;line-height:1;}
.widget-title i.material-icons::before{font-family:"FontAwesome";content:"\f00a";font-size:19px;color:#fff;}
.widget-body{margin-bottom:25px;}
.widget-body .input-group{display:flex;gap:8px;}
.widget-body input[type="search"]{flex:1;border:none;border-radius:5px;background:#fff;color:#111;
    padding:13px 15px;font-size:16px;box-sizing:border-box;}
.widget-body .search-submit{background:#e6e6e6;color:#111;border:1px solid #ccc;border-radius:5px;
    font-weight:700;padding:0 20px;cursor:pointer;}
.widget-category select{width:100%;border:none;border-radius:5px;background:#fff;color:#111;
    padding:14px 15px;font-size:16px;box-sizing:border-box;appearance:none;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='9'><path d='M1 1l6 6 6-6' stroke='%23555' stroke-width='2' fill='none'/></svg>");
    background-repeat:no-repeat;background-position:right 15px center;}

/* ================= RECENT / ALL POSTS WIDGET ================= */
.widget-body:has(.post-list){position:relative;}
@media (min-width:992px){
    .widget-body:has(.post-list)::after{
        content:"";position:absolute;left:0;right:0;bottom:0;height:36px;
        background:linear-gradient(to bottom, rgba(0,0,0,0), #000);
        pointer-events:none;
    }
}
.post-list{display:flex;flex-direction:column;gap:12px;}
.post-list-item{display:flex;align-items:center;gap:12px;background:#1b1b1b;border-radius:8px;
    padding:10px;text-decoration:none;transition:.15s ease;border:1px solid transparent;
    content-visibility:auto;contain-intrinsic-size:0 98px;contain:layout style paint;}
.post-list-item:hover{background:#232323;border-color:#0087fc;}
.post-list-thumb{flex-shrink:0;width:78px;height:78px;border-radius:6px;overflow:hidden;background:#333;}
.post-list-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.post-list-info{min-width:0;flex:1;}
.post-list-title{color:#fff;font-size:14px;font-weight:700;line-height:1.35;margin:0 0 6px;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.post-list-item:hover .post-list-title{color:#0087fc;}
.post-list-meta{display:flex;align-items:center;gap:6px;color:#888;font-size:12px;}
.post-list-meta i.material-icons{font-size:12px;}
.post-list-meta i.material-icons::before{font-family:"FontAwesome";content:"\f073";}
.no-more-posts{color:#888;font-size:13.5px;text-align:center;padding:14px 0;}

/* ================= POST NAVIGATION ================= */
.post-nav{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:28px 0 10px;}
.post-nav-item{display:flex;align-items:center;gap:12px;background:#1b1b1b;border-radius:8px;
    padding:16px;text-decoration:none;border:1px solid #262626;transition:.2s ease;min-width:0;}
.post-nav-item:hover{border-color:#0087fc;background:#202020;}
.post-nav-empty{background:transparent;border:none;}
.post-nav-arrow{flex-shrink:0;width:38px;height:38px;border-radius:50%;background:#0087fc;
    display:flex;align-items:center;justify-content:center;}
.post-nav-arrow i.material-icons{font-size:15px;color:#fff;}
.post-nav-prev .post-nav-arrow i.material-icons::before{font-family:"FontAwesome";content:"\f104";}
.post-nav-next .post-nav-arrow i.material-icons::before{font-family:"FontAwesome";content:"\f105";}
.post-nav-text{min-width:0;display:flex;flex-direction:column;gap:5px;}
.post-nav-next .post-nav-text{text-align:right;}
.post-nav-label{color:#888;font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;}
.post-nav-title{color:#fff;font-size:14.5px;font-weight:700;line-height:1.35;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.post-nav-item:hover .post-nav-title{color:#0087fc;}
@media (max-width:576px){
    .post-nav{grid-template-columns:1fr;}
}

@media (max-width:991px){
    .primary-sidebar{width:100%;}
}
.yt-facade{position:relative;width:100%;aspect-ratio:16/9;margin:10px 0;border-radius:4px;overflow:hidden;
    cursor:pointer;background-color:#000;background-size:cover;background-position:center;}
.yt-facade-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);opacity:.9;}
.yt-facade:hover .yt-facade-play{opacity:1;}