/* Groovy Plus Design System Variables */
:root {
    --groovy-bg: #fff;
    --groovy-card-bg: #fff;
    --groovy-text: #2D2D2D;
    --groovy-text-muted: #666;
    --groovy-border: #000;
    --groovy-accent: #60A5FA;
    --groovy-white: #fff;
}

/* Design Tweak: Padding for Date and Reading Time */
.groovy-hero-slide .meta-capsule time,
.groovy-hero-slide .meta-capsule span,
.groovy-meta .date,
.groovy-meta .reading-time {
    padding-left: 5px;
    padding-right: 5px;
}

/* Dark Mode Overrides Moved to PHP */












/* Floating Dark Mode Toggle Styles */
#groovy-dark-mode-toggle {
    position: fixed;
    bottom: 30px;
    left: 30px;
    width: 55px;
    height: 55px;
    background: #FFD600; /* Light Mode: yellow = sun */
    border: 2.5px solid #000;
    border-radius: 50%;
    cursor: pointer;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: none; /* hidden by default */
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

#groovy-dark-mode-toggle:hover {
    transform: translate(-3px, -3px);
    box-shadow: 6px 6px 0px #000; /* only visible on hover */
}

#groovy-dark-mode-toggle .mode-icon {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

#groovy-dark-mode-toggle .mode-icon svg {
    width: 26px;
    height: 26px;
    display: block;
}

#groovy-dark-mode-toggle .moon {
    opacity: 0;
    transform: rotate(-90deg) scale(0);
}

/* Dark Mode Button State */
.dark-mode #groovy-dark-mode-toggle {
    background: #1a1a1a !important; /* Dark bg for moon button */
    border-color: #555555 !important;
    box-shadow: none !important; /* hidden by default */
}

.dark-mode #groovy-dark-mode-toggle .sun {
    opacity: 0;
    transform: rotate(90deg) scale(0);
}

.dark-mode #groovy-dark-mode-toggle .moon {
    opacity: 1;
    transform: rotate(0) scale(1);
    color: #FFD600 !important; /* Yellow moon */
}

.dark-mode #groovy-dark-mode-toggle:hover {
    transform: translate(-3px, -3px);
    box-shadow: 6px 6px 0px #555555 !important; /* visible on hover only */
}

/* Fix GP Back to Top */
.dark-mode .generate-back-to-top {
    background: #1a1a1a !important;
    border: 2px solid #fff !important;
    color: #fff !important;
}

/* Groovy Plus Homepage Grid Style */

.groovy-homepage-container {
    width: 100%;
    margin-top: 50px;
    padding: 0;
    position: relative;
}

/* Remove default GeneratePress spacings on the Homepage */
.home .site-content,
.home .inside-article,
.home .entry-content {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

.groovy-section-title-wrapper,
.groovy-section-title-wrapper-centered {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 30px;
}

.groovy-section-title-wrapper-centered {
    justify-content: center;
    text-align: center;
    margin-top: 20px;
}

.groovy-section-line {
    flex-grow: 1;
    height: 2px;
    background-color: var(--contrast);
    border-radius: 2px;
}

.groovy-category-description-box {
    position: relative;
    width: 100%;
    margin-bottom: 40px;
    border: 1px solid var(--contrast);
    border-radius: 12px;
    padding: 40px 30px 25px 30px;
}

/* Author Profile Box Styling */
.groovy-author-intro-box {
    position: relative;
    background-color: var(--global-color-9, #f9f9f9);
    border: 1.5px solid var(--contrast);
    border-radius: 12px;
    padding: 36px 28px 20px;
    margin-top: 50px;
    margin-bottom: 40px;
}


/* Sidebar Widgets Spacing */
#secondary .widget {
    margin-top: 0;
    margin-bottom: 60px;
}



.groovy-author-pill-title {
    position: absolute;
    top: 0;
    left: 24px;
    transform: translateY(-50%);
    background: #fff;
    border: 1.5px solid var(--contrast);
    border-radius: 50px;
    padding: 6px 28px;
    font-size: 20px;
    font-weight: 800;
    color: var(--contrast);
    line-height: 1;
    white-space: nowrap;
    z-index: 2;
    margin: 0;
}

.groovy-author-intro-flex {
    display: flex;
    align-items: flex-start;
    gap: 30px;
}

.groovy-author-intro-avatar {
    flex-shrink: 0;
}

.groovy-author-intro-avatar img {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    border: 3px solid var(--contrast);
    display: block;
    background: #fff;
    box-shadow: 4px 4px 0px 0px rgba(0,0,0,0.1);
}

.groovy-author-intro-details h2 {
    margin: 0 0 10px 0;
    font-size: 28px;
    font-weight: 800;
    color: var(--contrast);
}

.groovy-author-intro-bio p {
    margin: 0;
    font-size: 16px;
    line-height: 1.6;
    color: #444;
}

@media (max-width: 768px) {
    .groovy-author-intro-flex {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .groovy-author-intro-avatar img {
        width: 80px;
        height: 80px;
    }
}

.groovy-category-description-box p {
    margin: 0;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.6;
}
.groovy-category-description-box p:not(:last-child) {
    margin-bottom: 15px;
}

.groovy-section-title {
    background: #fff;
    border: 1.5px solid var(--contrast);
    border-radius: 50px;
    padding: 8px 30px;
    font-size: 24px;
    font-weight: 800;
    color: var(--contrast);
    display: inline-block;
    margin: 0;
    white-space: nowrap;
}

.groovy-section-title.has-slider {
    margin: 0;
    position: absolute;
    top: 0;
    left: 30px;
    transform: translateY(-50%);
    z-index: 10;
}

/* No Results Box Styling */
.groovy-no-results-box {
    background: #fff;
    border: 1px solid var(--contrast);
    border-radius: 12px;
    padding: 60px 20px;
    text-align: center;
    margin-top: 20px;
}

.groovy-no-results-box svg {
    color: var(--contrast);
    margin-bottom: 20px;
    opacity: 0.15;
}

.groovy-no-results-box h2 {
    font-size: 28px;
    font-weight: 800;
    color: var(--contrast);
    margin-bottom: 10px;
}

.groovy-no-results-box p {
    font-size: 16px;
    color: #666;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.6;
}

/* 404 Page Styles */
.groovy-404-container {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 60px 20px;
    width: 100%;
    min-height: 70vh;
}

.groovy-404-content {
    max-width: 650px;
    text-align: center;
}

.groovy-404-image img {
    max-width: 320px;
    width: 100%;
    height: auto;
    margin-bottom: 20px;
    animation: groovyFloat 4s ease-in-out infinite;
}

@keyframes groovyFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-15px); }
}

.groovy-404-title {
    font-size: clamp(80px, 15vw, 120px);
    font-weight: 900;
    line-height: 1;
    margin: 0;
    color: var(--contrast);
    text-shadow: 6px 6px 0px #fff, 12px 12px 0px rgba(0,0,0,0.05);
}

.groovy-404-subtitle {
    font-size: 28px;
    font-weight: 800;
    margin: 10px 0 20px;
    color: var(--contrast);
}

.groovy-404-text {
    font-size: 18px;
    line-height: 1.6;
    color: #555;
    margin-bottom: 40px;
}

.groovy-404-btn {
    display: inline-block;
    background: #FFD600; /* Bright Yellow */
    color: #000;
    text-decoration: none;
    font-size: 20px;
    font-weight: 800;
    padding: 15px 45px;
    border: 3px solid #000;
    border-radius: 50px;
    box-shadow: 6px 6px 0px #000;
    transition: all 0.2s ease;
}

.groovy-404-btn:hover {
    transform: translate(-3px, -3px);
    box-shadow: 9px 9px 0px #000;
}

.groovy-post-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    padding: 0;
}

@media (max-width: 1024px) {
    .groovy-post-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .groovy-post-grid {
        grid-template-columns: 1fr;
    }
}

.groovy-post-card {
    border: 1px solid #000;
    border-radius: 20px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Card Header Section */
.groovy-card-header {
    aspect-ratio: var(--groovy-aspect-ratio, 1/1);
    width: 100%;
    position: relative;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
    /* Establish stacking context for stretched link */
    isolation: isolate;
}

/* Padding classes */
.has-image-padding .groovy-card-header {
    padding: 15px;
}

.has-image-padding .groovy-featured-image img {
    border-radius: 12px;
}

.groovy-category-tag {
    position: absolute;
    top: 20px;
    left: 20px;
    background: #fff;
    border: 1.5px solid #000;
    padding: 4px 15px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
    z-index: 2;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: none;
    text-decoration: none;
    color: #000;
}

.groovy-category-tag:hover {
    transform: translate(-2px, -2px);
    box-shadow: 2px 2px 0px 0px #000;
}

.groovy-category-tag .dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
    background-color: #60A5FA;
}

.groovy-category-tag svg {
    flex-shrink: 0;
}

/* Scoped Specific Style for Single Post Header */
.groovy-post-header-box .groovy-category-tag {
    position: static;
    padding: 6px 15px;
    font-weight: 700;
}

.groovy-speech-bubble {
    position: absolute;
    top: 20px;
    right: 20px;
    background: #2D2D2D;
    color: #fff;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    cursor: pointer;
}

.groovy-comment-tooltip {
    position: absolute;
    top: 50%;
    right: calc(100% + 10px);
    transform: translateY(-50%) scale(0.8);
    background: #2D2D2D;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    padding: 5px 12px;
    border-radius: 20px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.groovy-speech-bubble:hover .groovy-comment-tooltip {
    opacity: 1;
    transform: translateY(-50%) scale(1);
}

.groovy-featured-image {
    width: 100%;
    height: 100%;
    display: block;
    text-decoration: none;
}

a.groovy-card-image-link {
    display: block;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

.groovy-featured-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* Grid Card: force image to fill ANY aspect ratio (16/9, 4/3, 1/1) without letterboxing */
.groovy-card-header .groovy-featured-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.groovy-card-header .groovy-featured-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* Internal Image Padding override:
   Revert absolute fill so the 15px card-header padding creates inner spacing */
.has-image-padding .groovy-card-header .groovy-featured-image {
    position: relative;
    inset: auto;
    width: 100%;
    height: 100%;
    border-radius: 12px;
    overflow: hidden;
}

.has-image-padding .groovy-card-header .groovy-featured-image img {
    border-radius: 12px;
}


/* Headline Box - Moved inside header */
.groovy-post-title_box, .groovy-post-title-box {
    position: absolute;
    bottom: 20px;
    left: 20px;
    right: 20px;
    background: #fff;
    border: 1px solid #000;
    padding: 5px 3px;
    border-radius: 12px;
    text-align: center;
    z-index: 3;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: none;
}

.groovy-post-title-box:hover {
    transform: translate(-2px, -2px);
    box-shadow: 2px 2px 0px 0px #000;
}

.groovy-post-title-box h2 {
    margin: 0;
    font-size: var(--groovy-title-size, 21px);
    line-height: 1.3;
    position: static;
    font-weight: 600;
}

/* Stretched link: makes the entire .groovy-card-header clickable */
.groovy-post-title-box h2 a {
    text-decoration: none;
    color: #2D2D2D;
}

.groovy-post-title-box h2 a::after {
    content: '';
    position: absolute;
    inset: 0; /* top:0; right:0; bottom:0; left:0 */
    z-index: 4;
    border-radius: inherit;
}

/* Card Content Section */
.groovy-card-content {
    padding: 0 20px;
    text-align: center;
    flex-grow: 1;
}

.groovy-meta {
    font-size: 13px;
    color: #666;
    margin-bottom: 15px;
    font-weight: 500;
}

.groovy-meta .separator {
    margin: 0 8px;
    color: #ff4757;
}

.groovy-excerpt {
    font-size: 15px;
    line-height: 1.6;
    color: #555;
    margin-bottom: 15px;
}

/* Card Footer Section */
.groovy-card-footer {
    padding: 0 20px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: none;
}

.groovy-author {
    display: flex;
    align-items: center;
    gap: 10px;
}

.groovy-author a {
    display: inline-flex;
    align-items: center;
    line-height: 1;
}

.groovy-author img {
    width: 32px !important;
    height: 32px !important;
    flex-shrink: 0;
    object-fit: cover !important;
    display: block;
    border-radius: 50%;
    border: 1.5px solid #000;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: none;
}

.groovy-author img:hover {
    transform: translate(-2px, -2px);
    box-shadow: 2px 2px 0px 0px #000;
}

.groovy-author .author-name,
a.author-name {
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
}

.groovy-continue-btn {
    background: #fff;
    border: 1.5px solid #000;
    padding: 5px 15px;
    border-radius: 25px;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    color: #2D2D2D;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: none;
}

.groovy-continue-btn:hover {
    transform: translate(-2px, -2px);
    box-shadow: 2px 2px 0px 0px #000;
    background: #fff;
    color: #2D2D2D;
}

/* Pagination */
.groovy-pagination {
    margin-top: 40px;
    text-align: center;
}

.groovy-pagination ul {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.groovy-pagination ul li a,
.groovy-pagination ul li span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid #e0e0e0;
    border-radius: 50%;
    font-size: 14px;
    font-weight: 600;
    color: #2D2D2D;
    text-decoration: none;
    transition: all 0.2s ease;
    background: #fff;
}

.groovy-pagination ul li a:hover {
    background: #2D2D2D;
    color: #fff;
    border-color: #2D2D2D;
}

.groovy-pagination ul li span.current {
    background: #2D2D2D;
    color: #fff;
    border-color: #2D2D2D;
}

.groovy-pagination ul li a svg {
    display: block;
}

/* ── Dark Mode overrides for Pagination ─────────────────────── */
html.dark-mode .groovy-pagination {
    background: #000000 !important;
    border: none !important;
}
html.dark-mode .groovy-pagination ul {
    background: transparent !important;
}
html.dark-mode .groovy-pagination ul li {
    background: transparent !important;
}
html.dark-mode .groovy-pagination ul li:hover {
    background: transparent !important;
    background-color: transparent !important;
}
html.dark-mode .groovy-pagination ul li a,
html.dark-mode .groovy-pagination ul li span {
    background: #222222 !important;
    background-color: #222222 !important;
    color: #ffffff !important;
    border: 1px solid #444444 !important;
}
html.dark-mode .groovy-pagination ul li a:hover {
    background: #60A5FA !important;
    background-color: #60A5FA !important;
    color: #ffffff !important;
    border-color: #60A5FA !important;
}
html.dark-mode .groovy-pagination ul li span.current {
    background: #60A5FA !important;
    background-color: #60A5FA !important;
    color: #ffffff !important;
    border-color: #60A5FA !important;
}

/* ==========================================================================
   Hero Slider Styles
   ========================================================================== */

.groovy-hero-slider {
    position: relative;
    width: 100%;
    margin-bottom: 40px;
    border: 1px solid var(--contrast);
    border-radius: 12px;
    overflow: hidden;
    background-color: #ffc2e2;
    aspect-ratio: 21/9;
}

@media (max-width: 768px) {
    .groovy-hero-slider {
        aspect-ratio: 1/1;
    }
}

.groovy-slider-track {
    position: relative;
    width: 100%;
    height: 100%;
}

.groovy-hero-slide {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-size: cover;
    background-position: center;
    background-color: #ffc2e2;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease-in-out, visibility 0.5s;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 30px;
    box-sizing: border-box;
}

.groovy-hero-slide.active {
    opacity: 1;
    visibility: visible;
    z-index: 2;
}

/* Top Bar: Nav and Tags */
.groovy-hero-top-bar {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
    gap: 10px;
}

.groovy-hero-tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 15px;
    font-size: 13px;
    font-weight: 500;
}

.groovy-hero-capsule {
    background: #fff;
    border: 1px solid var(--contrast);
    border-radius: 20px;
    padding: 6px 15px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: none;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.groovy-hero-capsule:hover {
    transform: translate(-2px, -2px);
    box-shadow: 2px 2px 0px rgba(0,0,0,1);
}

.groovy-hero-capsule.meta-capsule {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
}

.groovy-hero-capsule.meta-capsule:hover {
    transform: none;
    box-shadow: none;
}

.groovy-hero-capsule .dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #4ade80;
}

.groovy-hero-capsule img {
    width: 20px; height: 20px;
    border-radius: 50%;
}

.groovy-hero-nav {
    display: flex;
    gap: 10px;
}

.groovy-nav-btn {
    width: 40px; height: 40px;
    border-radius: 50%;
    border: 1px solid var(--contrast);
    background: #fff;
    color: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.groovy-nav-btn .nav-arrow {
    font-size: 20px;
    font-weight: 800;
    line-height: 1;
    display: block;
}

.groovy-nav-btn:hover {
    background: #000;
    color: #fff;
}

/* Bottom Bar */
.groovy-hero-bottom-bar {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    width: 100%;
    gap: 20px;
}

.groovy-hero-title-box {
    background: #fff;
    border: 1px solid var(--contrast);
    border-radius: 8px;
    padding: 15px 25px;
    max-width: 60%;
    box-shadow: none;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.groovy-hero-title-box:hover {
    transform: translate(-2px, -2px);
    box-shadow: 4px 4px 0px rgba(0,0,0,1);
}

.groovy-hero-title-box h2 {
    margin: 0;
    font-size: 28px;
    font-weight: 800;
    line-height: 1.2;
}

.groovy-hero-title-box a {
    color: var(--contrast);
    text-decoration: none;
    transition: color 0.2s;
}

.groovy-hero-title-box a:hover {
    color: var(--global-palette10, #6c757d);
}

.groovy-hero-cta {
    background: #fff;
    border: 1px solid var(--contrast);
    border-radius: 30px;
    padding: 10px 25px;
    font-weight: 700;
    font-size: 14px;
    color: var(--contrast);
    text-decoration: none;
    box-shadow: none;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    white-space: nowrap;
}

.groovy-hero-cta:hover {
    transform: translate(-2px, -2px);
    box-shadow: 3px 3px 0px rgba(0,0,0,1);
}

@media (max-width: 768px) {
    .groovy-section-title-wrapper {
        gap: 10px;
    }
    .groovy-section-title {
        font-size: 21px;
        padding: 5px 20px;
        margin: 0;
    }
    .groovy-category-description-box {
        padding: 35px 20px 20px;
    }
    .groovy-section-title.has-slider {
        left: 50%;
        transform: translate(-50%, -50%);
        margin: 0;
    }
    .groovy-hero-slide {
        padding: 20px;
    }
    .groovy-hero-bottom-bar {
        flex-direction: column;
        align-items: flex-start;
    }
    .groovy-hero-title-box {
        max-width: 100%;
        margin-bottom: 20px;
    }
    .groovy-hero-title-box h2 {
        font-size: 20px;
    }
    .groovy-hero-cta {
        align-self: flex-end;
    }
    .groovy-hero-tags .meta-capsule {
        display: none;
    }
}
/* ==========================================================================
   Sidebar: About Author Card
   ========================================================================== */
.groovy-sidebar-about-container {
    margin-top: 0;
    margin-bottom: 0px; /* Removed 60px gap */
    position: relative;
    width: 100%;
}

.groovy-sidebar-about-card {
    background-color: var(--about-bg, #FEFCE8); /* Dynamic Background */
    border: 1px solid var(--contrast);
    border-radius: 12px;
    padding: 40px 25px 30px; /* Restored 30px bottom padding */
    position: relative;
}



.groovy-sidebar-title-pill {
    position: absolute;
    top: 0;
    left: 20px;
    transform: translateY(-50%);
    background: #fff;
    border: 1px solid var(--contrast);
    border-radius: 50px;
    padding: 6px 30px;
    font-size: 22px;
    font-weight: 800;
    color: var(--contrast);
    z-index: 10;
    box-shadow: none;
}

.groovy-sidebar-author-top {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 25px;
}

.groovy-sidebar-author-avatar {
    flex-shrink: 0;
}

.groovy-sidebar-author-avatar img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 1px solid var(--contrast);
    background: #fff;
    display: block;
    object-fit: cover;
    transition: transform 0.2s, box-shadow 0.2s;
}

.groovy-sidebar-author-avatar img:hover {
    transform: translate(-2px, -2px);
    box-shadow: 4px 4px 0px var(--contrast);
}

.groovy-sidebar-author-info h3 {
    margin: 0 0 5px 0;
    font-size: 24px;
    font-weight: 800;
    color: var(--contrast);
}

.groovy-sidebar-author-info .role {
    font-size: 15px;
    color: #666;
    margin: 0 0 10px 0;
    font-weight: 500;
}

.groovy-sidebar-socials {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.groovy-sidebar-social-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    position: relative; /* For tooltip */
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.groovy-sidebar-social-icon svg {
    width: 18px;
    height: 18px;
}

.groovy-sidebar-social-icon.icon-facebook { color: #1877F2; }
.groovy-sidebar-social-icon.icon-twitter { color: #000; }
.groovy-sidebar-social-icon.icon-instagram { color: #E4405F; }
.groovy-sidebar-social-icon.icon-whatsapp { color: #25D366; }
.groovy-sidebar-social-icon.icon-telegram { color: #0088cc; }
.groovy-sidebar-social-icon.icon-youtube { color: #FF0000; }
.groovy-sidebar-social-icon.icon-discord { color: #5865F2; }
.groovy-sidebar-social-icon.icon-email { color: #ea4335; }

/* Tooltip Styling */
.groovy-social-tooltip {
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%) translateY(5px);
    background: #1a1a1a;
    color: #fff;
    padding: 5px 12px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s, transform 0.2s;
    z-index: 100;
}

.groovy-social-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #1a1a1a;
}

.groovy-sidebar-social-icon:hover .groovy-social-tooltip {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.groovy-sidebar-social-icon:hover {
    transform: scale(1.2);
}

.groovy-sidebar-author-bio {
    font-size: 16px;
    line-height: 1.6;
    color: #444;
}

.groovy-sidebar-author-bio p {
    margin: 0;
}

@media (max-width: 768px) {
    .groovy-sidebar-title-pill {
        left: 50%;
        transform: translate(-50%, -50%);
    }
}

/* ==========================================================================
   Sidebar: Recent Posts Section
   ========================================================================== */
.groovy-sidebar-recent-container {
    margin-top: 0;
    margin-bottom: 0px; /* Gap controlled by parent */
    position: relative;
    width: 100%;
}


.groovy-sidebar-recent-card {
    background-color: var(--card-bg, #FEFCE8); /* Dynamic Background */
    border: 1px solid var(--contrast);
    border-radius: 12px;
    padding: 40px 25px 30px;
    position: relative;
}

.groovy-recent-list {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.groovy-recent-item {
    display: flex;
    gap: 15px;
    align-items: center;
}

.groovy-recent-thumb-wrap {
    position: relative;
    width: 80px;
    height: 80px;
    flex-shrink: 0;
}

.groovy-recent-thumb-wrap img,
.groovy-recent-thumb-wrap .thumb-placeholder {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 12px;
    border: 1px solid var(--contrast);
    background: #fff;
    transition: transform 0.2s, box-shadow 0.2s;
}

.groovy-recent-thumb-wrap img:hover {
    transform: translate(-2px, -2px);
    box-shadow: 4px 4px 0px var(--contrast);
}

.groovy-recent-badge {
    position: absolute;
    top: -10px;
    left: -10px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
}

.groovy-recent-badge svg.groovy-badge-icon {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    filter: drop-shadow(2px 2px 0px rgba(0,0,0,0.1));
}

.groovy-recent-badge svg.groovy-badge-icon path {
    fill: #ffffff !important;
    stroke: #000000 !important;
    stroke-width: 0.8px !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.groovy-recent-badge span {
    position: relative;
    font-size: 14px;
    font-weight: 900;
    color: var(--contrast);
    z-index: 6;
}

.groovy-recent-item-title {
    margin: 0 0 10px 0;
    font-size: 16px;
    line-height: 1.4;
    font-weight: 700;
}

.groovy-recent-item-title a {
    display: inline;
    color: var(--contrast) !important;
    text-decoration: none !important;
    background-image: linear-gradient(currentColor, currentColor);
    background-position: 0% 100%;
    background-repeat: no-repeat;
    background-size: 0% 2px;
    transition: background-size 0.3s ease;
}

.groovy-recent-item-title a:hover {
    background-size: 100% 2px;
}

.groovy-recent-content time {
    font-size: 13px;
    color: #666;
    font-weight: 500;
}

@media (max-width: 768px) {
    .groovy-sidebar-recent-container .groovy-sidebar-title-pill {
        left: 50%;
        transform: translate(-50%, -50%);
    }
}

/* Homepage Grid Post Card Hover Effects */
.groovy-post-card-img img {
    transition: transform 0.2s, box-shadow 0.2s;
}

.groovy-post-card-img:hover img {
    transform: translate(-2px, -2px);
    box-shadow: 4px 4px 0px var(--contrast);
}

/* ==========================================================================
   Sidebar: Sticky Area
   ========================================================================== */
/* ==========================================================================
   Sidebar: Sticky Area Improvements
   ========================================================================== */

/* Ensure the wrap doesn't force height on theme containers */
/* Ensure the wrap doesn't force height on theme containers */
/* Ensure the wrap doesn't force height on theme containers */
/* Ensure the wrap doesn't force height on theme containers */
.groovy-sidebar-engine-wrap {
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* Prevent equal distribution/stretching */
    align-items: stretch;
    width: 100%;
    margin-top: 50px;
    margin-bottom: 30px; 
    clear: both;
}




/* Stable Universal Sticky: REMOVED entire-sidebar sticky logic. 
   We now make ONLY the individual sections sticky as requested. 
   NOTE: We removed height: auto !important to allow the sidebar column 
   to stretch to its full height, which is required for stickiness to work. */
.inside-right-sidebar:has(.is-sticky) {
    position: relative !important;
    height: 100% !important;
    display: flex;
    flex-direction: column;
}


/* Ensure widget wrappers also stretch safely using Flexbox instead of rigid heights that cause overflow */
#secondary .widget:has(.is-sticky-enabled) {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    min-height: 0; /* Prevents flex flex-basis boundary issues */
}





/* Individual elements should NOT be sticky by default */
.groovy-sidebar-engine-wrap.is-sticky-enabled {
    position: relative;
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* CRITICAL: The track stretches to fill remaining space without overflowing */
    min-height: 0;
}




.groovy-sidebar-sticky-area.is-sticky {
    position: sticky !important;
    top: 60px; /* Offset from viewport top to maintain gap */
    display: flex;
    flex-direction: column;
    align-self: flex-start; /* CRITICAL: Prevents stretching to sidebar height */
    gap: 60px; /* Maintain the gap between cards */
    z-index: 100;
    width: 100%;
}


/* Ensure sticky area behaves correctly inside flex */
.groovy-sidebar-sticky-area {
    display: flex;
    flex-direction: column;
    gap: 60px; /* Standardized 60px gap between cards */
    margin-top: 60px !important; /* Final Gap: 60px between About Me and Cards */
}





.groovy-sidebar-engine-wrap .groovy-sidebar-about-card:first-child {
    margin-top: 0;
}

/* ==========================================================================
   Single Post Engine Layout
   ========================================================================== */
.groovy-single-post-wrap {
    width: 100%;
    position: relative;
    color: var(--contrast);
    font-size: 18px;
    line-height: 1.6;
}

/* Breadcrumbs - New Boxed Design */
.groovy-post-breadcrumbs {
    margin-bottom: 30px;
    background-color: var(--global-color-9, #f9f9f9);
    border: 1.2px solid var(--contrast);
    padding: 12px 18px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 700;
}

.groovy-post-breadcrumbs ol {
    list-style: none;
    padding: 0;
    margin: 0;
    display: inline;
}

.groovy-post-breadcrumbs li {
    display: inline;
    line-height: 1.5;
}


.groovy-post-breadcrumbs a {
    color: var(--contrast);
    text-decoration: none;
    transition: opacity 0.2s;
}

.groovy-post-breadcrumbs a:hover {
    text-decoration: underline;
    opacity: 0.8;
}

.groovy-post-breadcrumbs .crumb-sep {
    color: #999;
    font-weight: 400;
    margin: 0 4px;
}

.groovy-post-breadcrumbs .current {
    color: #666;
    font-weight: 500;
}


/* Headline */
.groovy-post-headline {
    font-size: clamp(32px, 5vw, 48px);
    font-weight: 900;
    line-height: 1.1;
    margin: 0 0 15px 0;
}

/* Meta Row */
.groovy-post-meta-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    margin-bottom: 15px;
    padding-bottom: 0;
    border-bottom: none;
}

.meta-left {
    display: flex;
    align-items: center;
    gap: 15px;
}

.meta-author-avatar {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    line-height: 0;
}

.meta-author-avatar a {
    display: block;
    line-height: 0;
    border-radius: 50%;
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: none;
}

.meta-author-avatar a:hover {
    transform: translate(-2px, -2px);
    box-shadow: 3px 3px 0px var(--contrast);
}

.meta-author-avatar img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 2.5px solid var(--contrast);
    background: #fff;
    display: block;
}

.meta-author-details {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
}

.meta-author-details .author-name {
    display: inline-block;
    width: fit-content;
    padding: 0;
    font-size: 17px;
    font-weight: 800;
    margin: 0;
    line-height: 1.2;
    text-decoration: none;
    color: var(--contrast);
    background-image: linear-gradient(var(--contrast), var(--contrast));
    background-size: 0% 1.5px;
    background-repeat: no-repeat;
    background-position: left bottom;
    transition: background-size 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.meta-author-details .author-name:hover {
    background-size: 100% 1.5px;
}

.post-dates {
    font-size: 13px;
    color: #666;
    font-weight: 500;
    line-height: 1.2;
    margin: 0;
}


.meta-right .reading-time-pill {
    background: #fff;
    border: 2px solid var(--contrast);
    border-radius: 50px;
    padding: 6px 20px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 800;
    box-shadow: 3px 3px 0px var(--contrast);
}

/* ==========================================================================
   Share Group
   ========================================================================== */
.groovy-share-group {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    /* Extra padding so hover shadow/translate is never clipped */
    padding: 5px;
    margin: -5px;
}

.groovy-share-label {
    font-size: 14px;
    font-weight: 800;
    color: var(--contrast);
    white-space: nowrap;
}

/* All share buttons always visible */
.groovy-share-options {
    display: flex;
    align-items: center;
    gap: 8px;
    /* No overflow:hidden — needed so hover translate shadow shows fully */
    padding: 5px;
    margin: -5px;
}

/* Each platform button */
.groovy-share-btn {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 2px solid #000;
    background: #fff;
    color: #000;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    flex-shrink: 0;
    box-shadow: none;
    cursor: pointer;
    /* Reset <button> defaults that hide the icon */
    padding: 0;
    appearance: none;
    -webkit-appearance: none;
    line-height: 0;
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
                background 0.2s ease, color 0.2s ease,
                border-color 0.2s ease;
}

.groovy-share-btn:hover {
    transform: translate(-2px, -2px);
    box-shadow: 3px 3px 0px #000;
}

/* Brand color fill on hover — shadow stays black */
.groovy-share-btn.share-fb:hover     { background: #1877F2; color: #fff; border-color: #1877F2; box-shadow: 3px 3px 0px #000; }
.groovy-share-btn.share-wa:hover     { background: #25D366; color: #fff; border-color: #25D366; box-shadow: 3px 3px 0px #000; }
.groovy-share-btn.share-tg:hover     { background: #229ED9; color: #fff; border-color: #229ED9; box-shadow: 3px 3px 0px #000; }
.groovy-share-btn.share-system:hover { background: #000;    color: #fff; border-color: #000;    box-shadow: 3px 3px 0px #000; }


/* Community Join Bar
   ========================================================================== */
.groovy-join-bar {
    display: flex;
    gap: 15px;
    margin-top: 20px;     /* Gap between featured image and join bar */
    margin-bottom: 40px;
}

.groovy-join-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 16px 20px;
    background: #fff;
    border: 1px solid var(--contrast); /* Thinner border */
    border-radius: 14px;
    color: #fff;
    text-decoration: none;
    font-size: 17px;      /* Increased font size */
    font-weight: 800;
    box-shadow: none;
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.2s cubic-bezier(0.34, 1.56, 0.64, 1),
                background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

/* Default Brand Colors */
.groovy-join-btn.join-wa { background: #25D366; }
.groovy-join-btn.join-tg { background: #229ED9; }
.groovy-join-btn.join-yt { background: #FF0000; }

.groovy-join-btn:hover {
    transform: translate(-3px, -3px);
    box-shadow: 6px 6px 0px var(--contrast);
    color: #fff;
}

.groovy-join-btn span {
    white-space: nowrap;
}

/* Shadow only on hover, brand colors stay */
.groovy-join-btn.join-wa:hover { background: #1ebd5b; }
.groovy-join-btn.join-tg:hover { background: #1c8cc2; }
.groovy-join-btn.join-yt:hover { background: #e60000; }

@media (max-width: 768px) {
    .groovy-join-bar {
        flex-direction: column;
        gap: 12px;
    }
    .groovy-join-btn {
        width: 100%;
        padding: 14px 20px;
    }
}

/* ==========================================================================
   Post Highlights Box
   ========================================================================== */
.groovy-highlights-box {
    position: relative;
    background-color: #FEFCE8;
    border: 1.2px solid var(--contrast);
    border-radius: 12px;
    padding: 8px 12px; /* Set to compact padding as requested, with slightly more on sides for readability */
    margin-top: 10px;
    margin-bottom: 25px;
}

.groovy-highlights-title {
    display: inline-block;
    font-size: 16px;
    font-weight: 900;
    color: var(--contrast);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 15px;
    border-bottom: 3px solid var(--contrast);
    padding-bottom: 2px;
}

/* List */
.groovy-highlights-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Each highlight row */
.groovy-highlight-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 16px;
    font-weight: 600;
    color: var(--contrast);
    line-height: 1.5;
}

/* Star icon wrapper */
.groovy-highlight-star {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    background: #fff;
    border: 1.5px solid var(--contrast);
    border-radius: 50%;
    color: #FBBF24;
    box-shadow: none;
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.groovy-highlight-item:hover .groovy-highlight-star {
    transform: translate(-2px, -2px);
    box-shadow: 4px 4px 0px var(--contrast);
}

.groovy-highlight-item span:last-child {
    padding-top: 5px;
}

@media (max-width: 768px) {
    .groovy-highlights-box,
    .groovy-post-header-box,
    .groovy-post-breadcrumbs,
    .groovy-toc-box {
        padding: 10px !important;
    }
    .groovy-highlights-title {
        font-size: 16px;
        margin-bottom: 12px;
    }
}

/* ==========================================================================
   Table of Contents Box
   ========================================================================== */
.groovy-toc-box {
    position: relative;
    background-color: var(--global-color-9, #f9f9f9);
    border: 1.5px solid var(--contrast);
    border-radius: 12px;
    padding: 36px 28px 28px;
    margin-top: 20px;
    margin-bottom: 30px;
}

.groovy-toc-title {
    position: absolute;
    top: 0;
    left: 24px;
    transform: translateY(-50%);
    background: #fff;
    border: 1.5px solid var(--contrast);
    border-radius: 50px;
    padding: 6px 28px;
    font-size: 20px;
    font-weight: 800;
    color: var(--contrast);
    line-height: 1;
    white-space: nowrap;
    z-index: 2;
    box-shadow: none;
}

.groovy-toc-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px 20px;
}

.toc-item a {
    display: block;
    position: relative;
    padding: 5px 12px 5px 35px; /* Added left padding for the dot */
    text-decoration: none;
    color: var(--contrast);
    font-weight: 700;
    font-size: 16px;
    border-radius: 8px;
    transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* TOC link text — uses text-decoration (not background-image) because
   the parent <a> is display:flex. text-decoration natively underlines
   every wrapped line in a flex context; background-image does not. */
.toc-text {
    display: inline;
    color: var(--contrast);
    text-decoration: none;
    background-image: linear-gradient(var(--contrast), var(--contrast));
    background-size: 0% 1.5px;
    background-repeat: no-repeat;
    background-position: left 95%;
    transition: background-size 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.toc-item a:hover .toc-text {
    background-size: 100% 1.5px;
}

.toc-item a:hover {
    opacity: 0.9;
}

.toc-dot {
    position: absolute;
    left: 15px;
    top: 14px; /* Centered relative to the first line of text */
    width: 6px;
    height: 6px;
    background: var(--contrast);
    border-radius: 50%;
    flex-shrink: 0;
}

.toc-item.toc-indent {
    margin-left: 25px;
}

.toc-item.toc-indent a {
    font-weight: 600;
    font-size: 15px;
    opacity: 0.85;
}

@media (max-width: 768px) {
    .groovy-toc-box {
        padding: 36px 18px 22px;
    }
    .groovy-toc-title {
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 17px;
        padding: 5px 22px;
    }
    .toc-item a {
        font-size: 15px;
    }
    .groovy-toc-list {
        grid-template-columns: 1fr;
        gap: 4px;
    }
}

/* Smooth Scrolling */
html {
    scroll-behavior: smooth;
    scroll-padding-top: 100px;
}

/* Post Content Box
   ========================================================================== */
.groovy-post-content.entry-content {
    background-color: var(--global-color-9, #f9f9f9);
    border: 1.5px solid var(--contrast);
    border-radius: 12px;
    padding: 35px 30px;
    margin-top: 20px;
    margin-bottom: 0;
}

@media (max-width: 768px) {
    .groovy-post-content.entry-content {
        padding: 28px 18px;
    }
}

/* Header Box
   ========================================================================== */
.groovy-post-header-box {
    background-color: var(--global-color-9, #f9f9f9);
    border: 1px solid var(--contrast);
    border-radius: 12px;
    padding: 30px;
    margin-bottom: 0;
}

.groovy-post-header-box .groovy-post-headline {
    margin-top: 0;
}

/* Featured Area */
.groovy-post-featured-area {
    position: relative;
    margin-top: 5px;   /* Tightest gap */
    margin-bottom: 0;
    width: 100%;
    overflow: hidden;
}

/* Featured image wrap — position:relative so badges overlay the image */
.groovy-post-featured-area .featured-image-wrap {
    position: relative;
    width: 100%;
    border-radius: 20px;
    border: 1px solid var(--contrast);
    overflow: hidden;
    box-shadow: 8px 8px 0px rgba(0,0,0,0.05);
}

/* Category badge — top left on top of featured image */
.groovy-single-cat-badge {
    position: absolute;
    top: 18px;
    left: 18px;
    z-index: 5;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: #fff;
    border: 2px solid #000;
    border-radius: 50px;
    padding: 6px 16px;
    font-size: 13px;
    font-weight: 700;
    color: #000;
    text-decoration: none;
    box-shadow: none;
    backdrop-filter: blur(4px);
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.groovy-single-cat-badge:hover {
    transform: translate(-2px, -2px);
    box-shadow: 5px 5px 0px #000;
    color: #000;
}

.groovy-single-cat-badge .dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #60A5FA;
    flex-shrink: 0;
}

/* Reading time badge — top right on top of featured image */
.groovy-single-read-badge {
    position: absolute;
    top: 18px;
    right: 18px;
    z-index: 5;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(0,0,0,0.75);
    border-radius: 50px;
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    backdrop-filter: blur(4px);
    pointer-events: none;
}

.groovy-post-featured-area .featured-image-wrap img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

/* Aspect Ratio Utilities */
.ratio-16-9 .featured-image-wrap { aspect-ratio: 16 / 9; }
.ratio-4-3 .featured-image-wrap { aspect-ratio: 4 / 3; }
.ratio-1-1 .featured-image-wrap { aspect-ratio: 1 / 1; }
.ratio-auto .featured-image-wrap { aspect-ratio: auto; }


/* Post Content Typography */
.groovy-post-content {
    margin-bottom: 60px;
}

.groovy-post-content p {
    margin-bottom: 25px;
}

.groovy-post-content h2, .groovy-post-content h3 {
    font-weight: 900;
    margin: 40px 0 20px;
}

/* Tags Box */
.groovy-post-tags-box {
    margin-bottom: 50px;
    padding: 30px;
    background: #FFFAF0;
    border: 1px solid var(--contrast);
    border-radius: 16px;
}

.tags-label {
    font-weight: 800;
    margin-bottom: 15px;
    display: block;
}

.tags-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.tag-capsule {
    background: #fff;
    border: 1px solid var(--contrast);
    border-radius: 8px;
    padding: 5px 15px;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    color: var(--contrast);
    transition: all 0.2s;
}

.tag-capsule:hover {
    background: var(--contrast);
    color: #fff;
}

/* Navigation Cards (Neobrutalist Box-Pill Style) */
.groovy-post-navigation {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    margin-top: 50px;
    margin-bottom: 20px;
}

.nav-btn {
    position: relative;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-color: var(--global-color-9, #f9f9f9);
    border: 1.5px solid var(--contrast);
    border-radius: 12px;
    padding: 40px 24px 28px;
    min-height: 110px;
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), 
                box-shadow 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.nav-btn:hover {
    transform: translate(-3px, -3px);
    box-shadow: 6px 6px 0px var(--contrast);
}

.nav-pill-label {
    position: absolute;
    top: 0;
    transform: translateY(-50%);
    background: #fff;
    border: 1.5px solid var(--contrast);
    border-radius: 50px;
    padding: 6px 22px;
    font-size: 14px;
    font-weight: 800;
    color: var(--contrast);
    line-height: 1;
    white-space: nowrap;
    z-index: 2;
    transition: all 0.2s ease;
}

.is-prev .nav-pill-label {
    left: 20px;
}

.is-next .nav-pill-label {
    right: 20px;
}

.nav-btn:hover .nav-pill-label {
    background: var(--contrast);
    color: #fff;
}

.nav-title {
    display: block;
    font-size: 18px;
    font-weight: 900;
    color: var(--contrast);
    line-height: 1.4;
}

/* Comments Boxes (Neobrutalist Style) */
.groovy-comments-list-box,
.groovy-comment-form-box {
    position: relative;
    background-color: var(--global-color-9, #f9f9f9);
    border: 1.5px solid var(--contrast);
    border-radius: 12px;
    padding: 40px 28px 28px;
    margin-top: 50px;
    margin-bottom: 0;
}

.groovy-comments-pill-title,
.groovy-form-pill-title {
    position: absolute;
    top: 0;
    left: 24px;
    transform: translateY(-50%);
    background: #fff;
    border: 1.5px solid var(--contrast);
    border-radius: 50px;
    padding: 6px 28px;
    font-size: 20px;
    font-weight: 800;
    color: var(--contrast);
    line-height: 1;
    white-space: nowrap;
    z-index: 2;
    margin: 0;
}

.groovy-comment-form-box {
    margin-bottom: 50px;
}

.groovy-comment-list {
    list-style: none;
    padding: 0;
    margin: 40px 0;
}

.groovy-comment-item {
    margin-bottom: 15px;
    list-style: none;
}

.comment-inner {
    background: #fff;
    border: 1.5px solid var(--contrast);
    border-radius: 12px;
    padding: 18px 20px;
    position: relative;
    margin-bottom: 25px; /* Added margin to prevent overlapping with replies */
}

.comment-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.comment-author-vcard {
    display: flex;
    align-items: center;
    gap: 10px;
}

.comment-author-vcard img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1.5px solid var(--contrast);
}

.comment-author-vcard cite {
    font-size: 16px;
    font-weight: 800;
    font-style: normal;
}

.comment-meta time {
    font-size: 12px;
    color: #888;
}

.comment-content {
    margin-top: 0;
    margin-bottom: 10px;
    padding: 10px; /* Added internal padding for a boxed feel */
}

.comment-content p {
    margin: 0;
    font-size: 15px;
    line-height: 1.5;
    color: var(--contrast);
}

.comment-reply {
    margin-top: 5px;
}

.comment-reply a {
    display: inline-block;
    background: var(--contrast);
    color: #fff;
    text-decoration: none;
    font-size: 12px;
    font-weight: 800;
    padding: 4px 12px;
    border-radius: 50px;
    transition: all 0.2s;
}

/* Threading & Inline Replies */
.children {
    list-style: none;
    padding-left: 0;
    margin-left: 20px;
    border-left: 1.5px solid rgba(0,0,0,0.1);
    margin-top: 5px;
}

.children .groovy-comment-item {
    margin-bottom: 0px;
}

.children .comment-inner {
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 15px 0 10px 20px;
    border-top: 1.5px dashed rgba(0,0,0,0.05); /* Separator inside the box */
    border-radius: 0;
}

.children .comment-author-vcard img {
    width: 32px;
    height: 32px;
}

.children .comment-author-vcard cite {
    font-size: 15px;
}

.children .comment-content p {
    font-size: 14px;
}


/* Comment Form (Box Style) */
.groovy-comment-respond-wrap {
    background-color: var(--global-color-9, #f0f7ff);
    border: 1.5px solid var(--contrast);
    border-radius: 12px;
    padding: 25px;
    box-shadow: 4px 4px 0px var(--contrast);
    margin-top: 50px; /* Reverted to 50px gap */
    margin-bottom: 20px;
    position: relative;
}

.groovy-comment-respond-wrap h3 {
    font-size: 24px;
    font-weight: 900;
    margin-top: 0;
    margin-bottom: 20px;
    color: var(--contrast);
}


.comment-form p {
    display: block;
    width: 100%;
}

.comment-form label {
    display: block;
    font-weight: 800;
    margin-bottom: 8px;
}

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form textarea {
    width: 100%;
    border: 2px solid var(--contrast);
    border-radius: 8px;
    padding: 12px;
    font-size: 16px;
    font-weight: 600;
    background: #fff;
    box-sizing: border-box;
}

.groovy-comment-submit {
    background: var(--contrast);
    color: #fff;
    border: 0;
    padding: 15px 40px;
    font-size: 18px;
    font-weight: 900;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s;
    margin-top: 10px;
}

.groovy-comment-submit:hover {
    background: #333;
    transform: translate(-3px, -3px);
    box-shadow: 4px 4px 0px #000;
}

@media (max-width: 768px) {
    .groovy-post-navigation {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .is-prev .nav-pill-label,
    .is-next .nav-pill-label {
        left: 50%;
        right: auto;
        transform: translate(-50%, -50%);
    }
}

@media (max-width: 768px) {
    .groovy-post-meta-row {
        flex-direction: column;
        align-items: flex-start;
    }
    .groovy-post-navigation {
        grid-template-columns: 1fr;
    }
    .groovy-comment-respond-wrap {
        padding: 25px;
    }
    .children {
        margin-left: 15px;
    }
}

/* ==========================================================================
   Post Tags Box (Neobrutalist Pill Style)
   ========================================================================== */
.groovy-post-tags-box {
    position: relative;
    background-color: var(--global-color-9, #f9f9f9);
    border: 1.5px solid var(--contrast);
    border-radius: 12px;
    padding: 36px 28px 24px;
    margin-top: 50px;
    margin-bottom: 0;
}

.groovy-tags-title {
    position: absolute;
    top: 0;
    left: 24px;
    transform: translateY(-50%);
    background: #fff;
    border: 1.5px solid var(--contrast);
    border-radius: 50px;
    padding: 6px 28px;
    font-size: 20px;
    font-weight: 800;
    color: var(--contrast);
    line-height: 1;
    white-space: nowrap;
    z-index: 2;
}

.groovy-tags-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.tag-capsule {
    display: inline-flex;
    align-items: center;
    background: #fff;
    border: 1.5px solid var(--contrast);
    border-radius: 50px;
    padding: 6px 18px;
    font-size: 14px;
    font-weight: 700;
    color: var(--contrast);
    text-decoration: none;
    box-shadow: none;
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.2s cubic-bezier(0.34, 1.56, 0.64, 1),
                background 0.2s ease, color 0.2s ease;
}

.tag-capsule:hover {
    transform: translate(-2px, -2px);
    box-shadow: 3px 3px 0px var(--contrast);
    background: var(--contrast);
    color: #fff;
}

@media (max-width: 768px) {
    .groovy-post-tags-box {
        padding: 36px 18px 20px;
    }
    .groovy-tags-title {
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 17px;
        padding: 5px 22px;
    }
}

/* ==========================================================================
   Related Articles Box (Neobrutalist Style)
   ========================================================================== */
.groovy-related-posts-box {
    position: relative;
    background-color: var(--global-color-9, #f9f9f9);
    border: 1.5px solid var(--contrast);
    border-radius: 12px;
    padding: 36px 28px 28px;
    margin-top: 50px;
    margin-bottom: 30px;
}

.groovy-related-posts-title {
    position: absolute;
    top: 0;
    left: 24px;
    transform: translateY(-50%);
    background: #fff;
    border: 1.5px solid var(--contrast);
    border-radius: 50px;
    padding: 6px 28px;
    font-size: 20px;
    font-weight: 800;
    color: var(--contrast);
    line-height: 1;
    white-space: nowrap;
    z-index: 2;
    margin: 0;
}

.groovy-related-card {
    background: #fff;
    border: 1.5px solid var(--contrast);
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), 
                box-shadow 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.groovy-related-card:hover {
    transform: translate(-3px, -3px);
    box-shadow: 6px 6px 0px var(--contrast);
}

.related-thumb {
    display: block;
    width: 100%;
    aspect-ratio: 16/9;
    overflow: hidden;
    border-bottom: 1.5px solid var(--contrast);
}

.related-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.groovy-related-card:hover .related-thumb img {
    transform: scale(1.05);
}

.related-content {
    padding: 15px;
    flex-grow: 1;
    display: flex;
    align-items: center;
}

.related-item-title {
    margin: 0;
    font-size: 16px;
    font-weight: 800;
    line-height: 1.4;
}

.related-item-title a {
    display: inline;
    color: var(--contrast) !important;
    text-decoration: none !important;
    background-image: linear-gradient(currentColor, currentColor);
    background-position: 0% 100%;
    background-repeat: no-repeat;
    background-size: 0% 2px;
    transition: background-size 0.3s ease;
}

.related-item-title a:hover {
    background-size: 100% 2px;
}

/* ==========================================================================
   Page Template Shortcode [groovy_page_layout]
   ========================================================================== */
.groovy-page-box-wrap {
    position: relative;
    border: 1.5px solid var(--contrast);
    border-radius: 12px;
    padding: 50px 40px 40px;
    margin-top: 50px;
    margin-bottom: 40px;
    box-shadow: 4px 4px 0px rgba(0,0,0,0.1);
}

.groovy-page-box-header {
    position: absolute;
    top: 0;
    left: 24px;
    transform: translateY(-50%);
    z-index: 10;
    margin: 0;
}

.groovy-page-box-title {
    background: #fff;
    border: 1.5px solid var(--contrast);
    border-radius: 50px;
    padding: 8px 30px;
    font-size: 32px;
    font-weight: 800;
    color: var(--contrast);
    margin: 0;
    line-height: 1;
    white-space: nowrap;
    display: inline-block;
}

@media (max-width: 768px) {
    .groovy-page-box-wrap {
        padding: 40px 20px 25px;
    }
    .groovy-page-box-header {
        left: 50%;
        transform: translate(-50%, -50%);
        width: 100%;
        text-align: center;
        padding: 0 20px; 
        box-sizing: border-box;
    }
    .groovy-page-box-title {
        font-size: 18px;
        padding: 6px 20px;
        white-space: normal;
    }
}

@media (max-width: 768px) {
    .groovy-related-posts-box {
        padding: 36px 18px 22px;
    }
    .groovy-related-posts-title {
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 17px;
        padding: 5px 22px;
    }
}

@media (max-width: 768px) {
    .groovy-author-intro-box,
    .groovy-comments-list-box,
    .groovy-comment-form-box {
        padding: 36px 18px 22px;
    }
    .groovy-author-pill-title,
    .groovy-comments-pill-title,
    .groovy-form-pill-title {
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 17px;
        padding: 5px 22px;
    }
}

/* ==========================================================================
   Global Mobile & Tablet Edge Spacing
   ========================================================================== */
@media (max-width: 1024px) {
    body .grid-container {
        padding-left: 10px !important;
        padding-right: 10px !important;
        box-sizing: border-box;
    }
}


/* ==========================================================================
   Responsive Post Headlines
   ========================================================================== */
.groovy-post-headline {
    font-size: var(--groovy-h1-desktop, 48px) !important;
    transition: font-size 0.3s ease;
}

@media (max-width: 768px) {
    .groovy-post-headline {
        font-size: var(--groovy-h1-mobile, 32px) !important;
    }
}

/* ==========================================================================
   Footer Template Shortcode [groovy_footer]
   ========================================================================== */
.groovy-footer-template-wrap {
    background-color: var(--global-color-8, #00DBE2); /* Linked to GP Global Color 8 */
    padding: 0 20px 60px; /* Top padding 0 as requested */
    margin-top: 40px;
}

.groovy-footer-grid {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.groovy-footer-card {
    background-color: var(--global-color-9, #E2FBFB); /* Linked to GP Global Color 9 */
    border: 1.5px solid var(--contrast);
    border-radius: 12px;
    padding: 40px 25px 25px;
    position: relative;
    box-shadow: 4px 4px 0px rgba(0,0,0,0.1);
}

.footer-card-pill {
    position: absolute;
    top: 0;
    left: 20px;
    transform: translateY(-50%);
    background: #fff;
    border: 1.5px solid var(--contrast);
    border-radius: 50px;
    padding: 5px 20px;
    font-weight: 800;
    font-size: 18px;
    z-index: 5;
}

/* Col 1: About */
.footer-site-logo-box {
    background: #fff;
    border: 1.5px solid var(--contrast);
    border-radius: 8px;
    padding: 10px;
    margin-bottom: 20px;
    text-align: center;
}

.footer-site-logo-box h2 {
    margin: 0;
    font-size: 24px;
    font-weight: 900;
}

.footer-about-text p {
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 20px;
    color: #333;
}

.col-about {
    display: flex;
    flex-direction: column;
}

.footer-social-row {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: auto; /* Push to bottom */
    padding-top: 25px;
}

/* Replicate Sidebar Social Icon Styles for Footer - Enlarged for Visibility */
.footer-social-row .groovy-sidebar-social-icon {
    width: 32px;
    height: 32px;
}

.footer-social-row .groovy-sidebar-social-icon svg {
    width: 28px;
    height: 28px;
}

.footer-social-row .groovy-sidebar-social-icon:hover {
    transform: translateY(-5px) scale(1.1);
}

/* Col 2: Popular remains handled by global .groovy-recent-list classes */

/* Col 2: Popular remains handled by global .groovy-recent-list classes */


/* Col 3: Links */
.footer-important-links-list {
    list-style: none;
    padding: 0;
    margin: 0 0 35px 0;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.footer-important-links-list li {
    line-height: 1;
}

.footer-important-links-list a {
    text-decoration: none;
    color: #1a1a1a;
    font-weight: 900; /* Extra Bold as per image */
    font-size: 20px;   /* Precise sizing for visibility */
    display: inline-flex;
    align-items: center;
    gap: 15px;
    background-image: linear-gradient(var(--contrast), var(--contrast));
    background-size: 0% 1.5px;
    background-repeat: no-repeat;
    background-position: left 95%;
    transition: background-size 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.footer-important-links-list a:hover {
    background-size: 100% 1.5px;
}

.footer-list-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    color: #1a1a1a;
}

.footer-list-icon svg {
    width: 100%;
    height: 100%;
    display: block;
}

.footer-contact-box {
    background: #fff;
    border: 1.2px solid var(--contrast);
    border-radius: 12px;
    padding: 20px;
    box-shadow: 2px 2px 0px rgba(0,0,0,0.05); /* Slight lift */
}

.footer-contact-box p {
    margin: 0 0 10px 0;
    font-weight: 800;
    font-size: 15px;
    color: #1a1a1a;
}

.footer-contact-box p:last-child { margin: 0; }

/* Copyright Bar */
.groovy-footer-copyright {
    max-width: 1200px;
    margin: 40px auto 0;
    background-color: var(--global-color-9, #E2FBFB);
    border: 1.5px solid var(--contrast);
    border-radius: 12px;
    padding: 15px 20px;
    text-align: center;
}

.groovy-footer-copyright p {
    margin: 0;
    font-weight: 800;
    font-size: 16px;
    color: var(--contrast);
}

.footer-copy-link {
    color: #FF4B32; /* Orange-Red Brand Color from design */
    text-decoration: none;
    font-weight: 900;
    text-transform: uppercase;
}

.footer-copy-link:hover {
    text-decoration: underline;
}

/* Verified Author Badge */
.groovy-verified-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    width: 14px;
    height: 14px;
    margin-left: 3px;
    transform: translateY(-3.5px); /* Higher to align with text baseline */
}

.groovy-verified-badge svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* Go To Top Button - Neobrutalist Style */
#groovy-floating-up {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 55px;
    height: 55px;
    background-color: #ffffff;
    border: 2.5px solid #1a1a1a;
    border-radius: 12px;
    box-shadow: 0px 0px 0px #1a1a1a;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    color: #1a1a1a;
}

#groovy-floating-up.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

#groovy-floating-up svg {
    width: 28px;
    height: 28px;
    transition: transform 0.3s ease;
}

#groovy-floating-up:hover {
    background-color: #f0f0f0;
    transform: translate(-3px, -3px);
    box-shadow: 5px 5px 0px #1a1a1a;
}

#groovy-floating-up:hover svg {
    transform: translateY(-3px);
}

#groovy-floating-up:active {
    transform: translate(2px, 2px);
    box-shadow: 0px 0px 0px #1a1a1a;
}

/* Responsive Footer Buttons Refined */
@media (max-width: 768px) {
    #groovy-dark-mode-toggle,
    #groovy-floating-up {
        position: fixed !important;
        bottom: 30px !important; /* Unified alignment */
        width: 42px !important;
        height: 42px !important;
        border-width: 1.5px !important;
        margin: 0 !important;
        padding: 0 !important;
        box-shadow: none !important;
        transform: none !important;
        z-index: 99999 !important;
        transition: opacity 0.3s ease, visibility 0.3s ease !important;
    }

    #groovy-floating-up.visible {
        transform: none !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    #groovy-dark-mode-toggle {
        left: 20px !important;
        border-radius: 50% !important;
    }

    #groovy-floating-up {
        right: 20px !important;
        border-radius: 8px !important;
    }

    #groovy-dark-mode-toggle .mode-icon svg,
    #groovy-floating-up svg {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) !important;
    }

    #groovy-dark-mode-toggle .mode-icon svg {
        width: 18px !important;
        height: 18px !important;
    }

    #groovy-floating-up svg {
        width: 20px !important;
        height: 20px !important;
    }
}

/* Responsive */
@media (max-width: 992px) {
    .groovy-footer-grid {
        grid-template-columns: 1fr;
    }
    .groovy-footer-template-wrap {
        padding: 50px 15px;
    }
}

/* ==========================================================================
   Also Read Box — Exactly matches the provided reference design
   ========================================================================== */

/* ── Outer wrapper box ─────────────────────────────────────────────────── */
.groovy-multi-also-read-box {
    position: relative;
    margin: 10px 0;
    padding: 15px;
    border: 1px solid #1a1a1a;
    border-radius: 9px;
    box-shadow: none;                 /* shadow removed */
    overflow: visible;
}

/* ── Pill label: red, 50% above box top edge, top-left ─────────────────── */
.groovy-multi-also-read-box .also-read-pill-title {
    position: absolute !important;
    top: 0 !important;
    left: 20px !important;
    transform: translateY(-50%) !important;
    background: #ffffff !important;
    color: var(--contrast, #1a1a1a) !important;
    border: 1.5px solid var(--contrast, #1a1a1a) !important;
    border-radius: 50px !important;
    padding: 4px 18px !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    z-index: 10 !important;
    margin: 0 !important;
    display: inline-block !important;
}

/* ── Inner 2-column grid ─────────────────────────────────────────────── */
.groovy-also-read-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-top: 20px;
}

/* ── Each inner card: thumb LEFT + content RIGHT ─────────────────────── */
.also-read-grid-item {
    display: flex;
    align-items: center;
    gap: 14px;
    background: transparent;
    border: none;                     /* borders removed as requested */
    border-radius: 14px;
    padding: 0;
    text-decoration: none;
    transition: transform 0.2s ease;
}

/* ── Square thumbnail ─────────────────────────────────────────────────── */
.grid-item-thumb {
    width: 85px;
    height: 85px;
    flex-shrink: 0;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--contrast, #1a1a1a);
    background: #fff;
    display: block;
    text-decoration: none;
    transition: transform 0.2s, box-shadow 0.2s;
}

.grid-item-thumb:hover {
    transform: translate(-2px, -2px);
    box-shadow: 4px 4px 0px var(--contrast, #1a1a1a);
}

.grid-item-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Placeholder when no thumbnail */
.grid-item-thumb div.thumb-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #f0f0f0, #d8d8d8);
}

/* ── Text content area ─────────────────────────────────────────────────── */
.grid-item-details {
    flex: 1;
    min-width: 0;
}

/* Category: shown in small gray text above title */
.grid-item-cat {
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: #555555;
    margin-bottom: 5px;
    line-height: 1;
}

/* Post title: bold, Black */
.grid-item-title {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.45;
    color: var(--contrast, #1a1a1a);
}

.grid-item-title a {
    display: inline;
    color: var(--contrast, #1a1a1a) !important;
    text-decoration: none !important;
    background-image: linear-gradient(currentColor, currentColor);
    background-position: 0% 100%;
    background-repeat: no-repeat;
    background-size: 0% 2px;
    transition: background-size 0.3s ease;
}

.grid-item-title a:hover {
    background-size: 100% 2px;
}

/* ── Mobile: 1 column ─────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .groovy-also-read-grid {
        grid-template-columns: 1fr;
    }
    .groovy-multi-also-read-box {
        margin: 10px 0;
        padding: 15px;
        border-radius: 9px;
    }
    .also-read-pill-title {
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 14px;
        padding: 7px 20px;
    }
    .grid-item-thumb {
        width: 70px;
        height: 70px;
    }
    .grid-item-title {
        font-size: 14px;
    }
}

/* Sidebar/Footer Badge Number Formatting */
.groovy-badge-number {
    position: relative;
    font-size: 12px;
    font-weight: 900;
    color: var(--contrast);
    z-index: 6;
    line-height: 1;
}

/* --- Ads Placement Styling --- */
.groovy-ad-parent-wrap {
    width: 100%;
    padding: 20px 0;
    display: flex;
    justify-content: center;
    background-color: transparent;
}

.groovy-ad-parent-wrap.below-header {
    padding-top: 10px;
}

.groovy-ad-container-1200 {
    width: 100%;
    max-width: 1210px; /* Account for borders */
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 20px;
    box-sizing: border-box;
}

.groovy-ad-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #666;
    margin-bottom: 5px;
    font-weight: 700;
    align-self: center;
}

.groovy-ad-content-box {
    width: 100%;
    min-height: 90px;
    background-color: #f9f9f9;
    border: 1px dashed #ccc;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
}

/* Dark Mode Support for Ads Wrapper */
html.dark-mode .groovy-ad-content-box {
    background-color: #111;
    border-color: #333;
}

html.dark-mode .groovy-ad-label {
    color: #888;
}

@media (max-width: 768px) {
    .groovy-ad-container-1200 {
        padding: 0 10px;
    }
    .groovy-ad-parent-wrap {
        padding: 15px 0;
    }
}

/* Sidebar Specific Ad Card Styling */
.groovy-sidebar-ad-card-wrap {
    margin-bottom: 20px;
}

.groovy-sidebar-ad-card-wrap .groovy-ad-parent-wrap {
    padding: 0;
}

.groovy-sidebar-ad-card-wrap .groovy-ad-container-1200 {
    padding: 0;
    max-width: none;
}

.groovy-sidebar-ad-card-wrap .groovy-ad-content-box {
    background-color: #ffffff;
    border: 2px solid #1a1a1a;
    border-radius: 14px;
    box-shadow: none;
    min-height: 250px;
    padding: 15px;
    box-sizing: border-box;
    overflow: visible; /* Handle items slightly wider than sidebar */
}

.groovy-sidebar-ad-card-wrap .groovy-ad-label {
    background: #ffffff;
    border: 1.5px solid #1a1a1a;
    padding: 2px 12px;
    border-radius: 50px;
    font-size: 11px;
    margin-bottom: 10px;
    color: #1a1a1a;
    display: inline-block;
}

html.dark-mode .groovy-sidebar-ad-card-wrap .groovy-ad-content-box {
    background-color: #1a1a1a;
    border-color: #333;
    box-shadow: none;
}

/* Unifying Sidebar Gaps */
.groovy-sidebar-about-container,
.groovy-sidebar-recent-container {
    margin-bottom: 20px;
}

/* ── Floating Social Join Buttons — Neobrutalist Theme ── */
#groovy-floating-social {
    position: fixed;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    z-index: 9990;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
}

/* Base button: collapsed (icon only) */
#groovy-floating-social .float-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    height: 50px;
    width: 58px;          /* collapsed: icon only */
    border-radius: 12px 0 0 12px; /* Neobrutalist square-ish, open on right edge */
    border: 2.5px solid #1a1a1a;
    border-right: none;   /* flush against screen edge */
    overflow: hidden;
    text-decoration: none;
    cursor: pointer;
    /* Shadow removed by default per user request */
    box-shadow: none;
    transition:
        width     0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
        box-shadow 0.25s ease,
        transform  0.25s ease;
}

/* WhatsApp: brand green */
#groovy-floating-social .float-btn.float-wa {
    background: #25D366;
}

/* Telegram: brand blue */
#groovy-floating-social .float-btn.float-tg {
    background: #2AABEE;
}

/* ── Hover: slide out + stronger neo shadow ── */
#groovy-floating-social .float-btn:hover {
    width: 145px;
    transform: translateX(-3px);
    box-shadow: -3px 3px 0px #1a1a1a;
}

/* ── Active press ── */
#groovy-floating-social .float-btn:active {
    transform: translateX(-1px) translateY(2px);
    box-shadow: -2px 2px 0px #1a1a1a;
}

/* ── Icon circle (white bubble) ── */
#groovy-floating-social .icon-wrap {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 8px; /* Squared with proper radius per user request */
    background: #ffffff;
    border: 2px solid #1a1a1a;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 4px;
    /* Give icon wrap a tiny neo shadow */
    box-shadow: 2px 2px 0px rgba(0,0,0,0.25);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

#groovy-floating-social .float-btn:hover .icon-wrap {
    transform: scale(1.08);
}

/* Icon color = brand color */
#groovy-floating-social .float-wa .icon-wrap { color: #25D366; }
#groovy-floating-social .float-tg .icon-wrap { color: #2AABEE; }

#groovy-floating-social .icon-wrap svg {
    width: 20px;
    height: 20px;
    display: block;
    fill: currentColor;
}

/* ── Slide-out label text ── */
#groovy-floating-social .float-btn .float-btn-label {
    flex-shrink: 0;
    color: #ffffff;
    font-weight: 800;
    font-size: 13px;
    font-family: inherit;
    letter-spacing: 0.02em;
    white-space: nowrap;
    padding-left: 10px;
    padding-right: 6px;
    /* Text shadow for legibility on brand bg */
    text-shadow: 1px 1px 0px rgba(0,0,0,0.3);
    opacity: 0;
    transform: translateX(-8px);
    transition:
        opacity   0.25s ease 0.05s,
        transform 0.3s  cubic-bezier(0.34, 1.56, 0.64, 1) 0.05s;
}

#groovy-floating-social .float-btn:hover .float-btn-label {
    opacity: 1;
    transform: translateX(0);
}

/* ── Dark Mode overrides ── */
    border-color: #555;
    box-shadow: none;
}
.dark-mode #groovy-floating-social .float-btn:hover {
    box-shadow: -3px 3px 0px #555;
}
.dark-mode #groovy-floating-social .icon-wrap {
    background: #1a1a1a;
    border-color: #555;
}

/* ── Mobile: smaller but keeps the neo treatment ── */
@media (max-width: 768px) {
    #groovy-floating-social {
        gap: 8px;
    }
    #groovy-floating-social .float-btn {
        height: 44px;
        width: 50px;
        border-width: 2px;
        box-shadow: none;
        border-radius: 10px 0 0 10px;
    }
    #groovy-floating-social .float-btn:hover {
        width: 128px;
        transform: translateX(-2px);
        box-shadow: -2px 2px 0px #1a1a1a;
    }
    #groovy-floating-social .icon-wrap {
        width: 30px;
        height: 30px;
        margin-left: 4px;
        border-width: 1.5px;
    }
    #groovy-floating-social .icon-wrap svg {
        width: 16px;
        height: 16px;
    }
    #groovy-floating-social .float-btn .float-btn-label {
        font-size: 12px;
        padding-left: 8px;
    }
    .dark-mode #groovy-floating-social .float-btn {
        box-shadow: none;
    }
    .dark-mode #groovy-floating-social .float-btn:hover {
        box-shadow: -2px 2px 0px #555;
    }
}

/* Dark Mode Overrides for Floating Buttons */
html.dark-mode #groovy-floating-up {
    background-color: #1a1a1a !important;
    color: #ffffff !important;
    border-color: #555555 !important;
    box-shadow: none !important;
}

html.dark-mode #groovy-floating-up:hover {
    background-color: #60A5FA !important;
    border-color: #60A5FA !important;
    box-shadow: 5px 5px 0px #333333 !important;
}

html.dark-mode #groovy-floating-up svg {
    color: #ffffff !important;
    stroke: #ffffff !important;
}

/* ============================================================
   FEATURE: Article Content Image Styling (Neobrutalist)
   Scoped ONLY to single post body — excludes grid cards, sidebars
   ============================================================ */
.single-post .groovy-post-content.entry-content > * img,
.single-post .groovy-post-content.entry-content img {
    border-radius: 10px;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    will-change: transform;
    max-width: 100%;
    height: auto;
    display: block;
}

/* Explicit reset on grid-card THUMBNAIL images so post-content hover never leaks in.
   Scoped to .groovy-card-header img and .groovy-featured-image img ONLY —
   does NOT include .groovy-author img so the avatar stays circular. */
.groovy-card-header img,
.groovy-featured-image img {
    border-radius: 0;
    transition: none;
    will-change: auto;
    box-shadow: none;
    transform: none;
}

/* Exception: Author avatar must stay circular — restore all overridden properties */
.groovy-author img {
    width: 32px !important;
    height: 32px !important;
    object-fit: cover !important;
    flex-shrink: 0;
    border-radius: 50% !important;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    will-change: transform !important;
}

.single-post .groovy-post-content.entry-content > * img:hover,
.single-post .groovy-post-content.entry-content img:hover {
    transform: translate(-3px, -3px);
    box-shadow: 5px 5px 0px #000000;
}

/* Dark mode adjustment: softer shadow */
html.dark-mode .single-post .groovy-post-content.entry-content > * img:hover,
html.dark-mode .single-post .groovy-post-content.entry-content img:hover {
    box-shadow: 5px 5px 0px #444444;
}

/* Fix: Stop global content image effects from leaking into Also Read thumbnails */
.groovy-multi-also-read-box img {
    transform: none !important;
    box-shadow: none !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

/* ==========================================================================
   Stealth SEO Branding & Integrity System
   ========================================================================== */
.psb-ghost-link {
    cursor: default !important;
    text-decoration: none !important;
    color: inherit !important;
    pointer-events: none !important;
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    user-select: none !important;
}

.psb-hidden-text {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    border: 0 !important;
}

/* Corruption Mode (Admin/Owner Integrity Failover) */
body.integrity-corrupted .groovy-post-grid {
    display: block !important;
}

body.integrity-corrupted img {
    display: none !important;
}

body.integrity-corrupted,
body.integrity-corrupted p,
body.integrity-corrupted a,
body.integrity-corrupted h1,
body.integrity-corrupted h2,
body.integrity-corrupted h3,
body.integrity-corrupted h4 {
    font-size: 1px !important;
}