@font-face { font-family: NanumBrushScript;
    src: url('assets/fonts/NanumBrushScript-Regular.ttf');
    font-display: swap; }
@font-face { font-family: Lato;
    src: url('assets/fonts/Lato-Regular.ttf');
    font-display: swap; }
@font-face { font-family: Lato-Thin;
    src: url('assets/fonts/Lato-Thin.ttf');
    font-display: swap; }
@font-face { font-family: Lato-Light;
    src: url('assets/fonts/Lato-Light.ttf');
    font-display: swap; }
@font-face { font-family: Lato-Bold;
    src: url('assets/fonts/Lato-Bold.ttf');
    font-display: swap; }
@font-face { font-family: Lato-Black;
    src: url('assets/fonts/Lato-Black.ttf');
    font-display: swap; }
@font-face { font-family: VarelaRound;
    src: url('assets/fonts/VarelaRound-Regular.ttf');
    font-display: swap; }

@tailwind base;
@tailwind components;
@tailwind utilities;

.tablet-two-col { /* no-op by default, enabled only on tablet via media query */ }
.tablet-right { /* no-op by default, enabled only on tablet via media query */ }
.tablet-show { /* no-op by default, enabled only on tablet via media query */ }
.tablet-hide { /* no-op by default, enabled only on tablet via media query */ }

/* Tablet-only layout adjustments: between 640px and 899px */
@media (min-width: 640px) and (max-width: 899px) {
    /* Two columns after featured: left flexible, right sidebar with a min width */
    .tablet-two-col {
        display: grid !important;
        grid-template-columns: 1fr 310px;
        column-gap: 1rem; /* ~gap-4 */
        row-gap: 1rem;
        align-items: start;
    }

    .tablet-right {
        width: 310px;
        min-width: 310px;
        max-width: 310px;
    }

    /* Utilities to control visibility specifically on tablet */
    .tablet-show { display: block !important; }
    .tablet-hide { display: none !important; }

    /* Tablet sidebar spacing adjustments: tighten space between stacked blocks to ~10px */
    /* Applies to sidebars rendered inside a tablet-right container (Topic/Category pages) */
    .tablet-right aside {
        gap: 10px !important; /* ~10px between Popular and Trending */
    }
    /* Neutralize any extra top margins (like mt-8) on stacked sections to prevent double spacing */
    .tablet-right aside > section {
        margin-top: 0 !important;
    }
}


.skeleton-box {
    position: relative;
    overflow: hidden;
    background-color: #e2e8f0;

    &::after {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        transform: translateX(-100%);
        background-image: linear-gradient(
                90deg,
                rgba(255, 255, 255, 0) 0,
                rgba(255, 255, 255, 0.2) 20%,
                rgba(255, 255, 255, 0.5) 60%,
                rgba(255, 255, 255, 0)
        );
        animation: shimmer 2s infinite;
        content: '';
    }
}
@keyframes shimmer {
    100% {
        transform: translateX(100%);
    }
}

.key-takeaways {
    background-color: #ffffff; /* White card */
    border: 1px solid #00601f; /* Darker green uniform border */
    padding: 0.5rem 0.5rem 0.5rem 4px;
    border-radius: 0.75rem;
    margin: 0.5rem 0;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
    position: relative;
    overflow: hidden;
}
@media (min-width: 1024px) {
    .key-takeaways {
        padding: 1.5rem;
        margin: 1.5rem 0;
    }
}

.key-takeaways::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: transparent;
    pointer-events: none;
}

.table-of-contents-sidebar {
    padding-top: 0;
}

.table-of-contents-sidebar .table-of-contents {
    margin: 0 !important;
    background-color: transparent !important;
    border-left: none !important;
    padding: 0 !important;
}

.table-of-contents-sidebar .table-of-contents ul {
    margin-top: 0 !important;
    display: flex;
    flex-direction: column;
}

.table-of-contents-sidebar .table-of-contents h2,
.table-of-contents-sidebar .table-of-contents h3,
.table-of-contents-sidebar .table-of-contents p {
    margin-top: 0 !important;
}

.table-of-contents-sidebar .table-of-contents p:empty {
    display: none;
}

.table-of-contents-inline {
    background-color: transparent;
    padding: 0;
    margin: 0.5rem 0;
    box-shadow: none;
    position: relative;
    overflow: hidden;
}
@media (min-width: 1024px) {
    .table-of-contents-inline {
        padding: 0;
        margin: 1.5rem 0;
    }
}

.table-of-contents-inline::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: transparent;
    pointer-events: none;
}

.table-of-contents-inline h2, .table-of-contents-inline h2 strong, .table-of-contents-inline h2 span {
    margin-top: 0 !important;
    margin-bottom: 0.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid rgba(28, 100, 242, 0.2);
    color: #1C64F2 !important;
    font-family: Lato-Black, sans-serif !important;
    font-size: 1.25rem !important; /* Reduced from 1.5rem */
    line-height: 1.75rem !important;
    letter-spacing: -0.025em !important;
}
@media (min-width: 1024px) {
    .table-of-contents-inline h2, .table-of-contents-inline h2 strong, .table-of-contents-inline h2 span {
        margin-bottom: 0.75rem;
        padding-bottom: 0.75rem;
        font-size: 1.5rem !important;
        line-height: 2rem !important;
    }
}

.dark .table-of-contents-inline h2, .dark .table-of-contents-inline h2 strong, .dark .table-of-contents-inline h2 span {
    color: #3097ff !important;
    border-bottom-color: rgba(48, 151, 255, 0.2);
}


.dark .table-of-contents-inline {
    background-color: transparent;
    color: #d1d5db;
}

.dark .table-of-contents-inline h2 {
    /* Color handled above for h2 and h2 strong */
}

.table-of-contents-inline ul {
    margin: 0 !important;
    padding: 0 !important;
}

.table-of-contents-inline p:empty {
    display: none;
}

.table-of-contents-inline li {
    list-style-type: none !important;
    position: relative;
    padding-left: 1.25rem;
    padding-top: 0.15rem;
    padding-bottom: 0.15rem;
    margin-bottom: 0;
    margin-left: 0 !important;
    transition: all 0.2s ease;
    border-radius: 0.375rem;
    cursor: pointer;
    border-bottom: none;
}
@media (min-width: 1024px) {
    .table-of-contents-inline li {
        padding-top: 0.35rem;
        padding-bottom: 1px;
    }
}

.table-of-contents-inline li:last-child {
    border-bottom: none;
}

.dark .table-of-contents-inline li {
    border-bottom-color: rgba(48, 151, 255, 0.15);
}

.table-of-contents-inline li a {
    text-decoration: none !important;
    color: inherit !important;
}

.table-of-contents-inline li:hover {
    background-color: rgba(0, 0, 0, 0.03);
    padding-left: 2rem;
}

.dark .table-of-contents-inline li:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

.table-of-contents-inline li:active {
    transform: scale(0.98);
}

.table-of-contents-inline li::before {
    content: "\2192"; /* Right arrow symbol */
    position: absolute;
    left: 0.15rem;
    top: 0.15rem;
    color: #1C64F2; /* Back to Blue */
    font-weight: bold;
    pointer-events: none;
}
@media (min-width: 1024px) {
    .table-of-contents-inline li::before {
        top: 0.35rem;
    }
}

.dark .table-of-contents-inline li::before {
    color: #3097ff; /* Back to Blue */
}

.table-of-contents {
    position: relative;
}

/* Ensure any internal headers or lists align correctly within the container */
.key-takeaways h2 {
    margin-top: 0 !important;
    margin-bottom: 0.1rem;
    color: #00601f;
    font-family: Lato-Bold, serif;
    font-size: 1.25rem; /* Reduced from 1.5rem */
    line-height: 1.75rem;
    position: relative;
    z-index: 1;
}

.key-takeaways-header {
    display: none;
}
@media (max-width: 1023px) {
    .key-takeaways-header {
        display: flex;
        position: absolute;
        left: 8px;
        top: 0.85rem; /* Adjusted from 0.65rem to lower the icon */
    }
    .key-takeaways h2 {
        padding-left: 28px;
    }
}

@media (min-width: 1024px) {
    .key-takeaways-header {
        display: flex;
        position: absolute;
        left: 24px;
        top: 1.85rem; /* Adjusted from 24px to lower the icon and center with larger text */
    }
    .key-takeaways h2 {
        margin-bottom: 0.5rem;
        padding-left: 36px;
        font-size: 1.875rem;
        line-height: 2.25rem;
    }
}

.table-of-contents h2 {
    margin-top: 0 !important;
    margin-bottom: 0.5rem;
    color: inherit;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}

.dark .key-takeaways h2 {
    color: #00b63b;
}


.key-takeaways h3 {
    margin-top: 0 !important;
    position: relative;
    z-index: 1;
}

.table-of-contents h3 {
    margin-top: 0 !important;
}

.dark .key-takeaways {
    background-color: #111827; /* Dark gray card (gray-900) */
    border: 1px solid #00b63b;
    color: #d1d5db;
}

.dark .key-takeaways::after {
    background-color: transparent;
}




/* Specific styling for internal elements in dark mode if needed */
.dark .key-takeaways h3 {
    color: #f9fafb; /* Tailwind gray-50 for headers */
}

.key-takeaways ul {
    list-style: none !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
    position: relative;
    z-index: 1;
}

.key-takeaways ul {
    margin-bottom: 0;
    margin-top: 0.1rem;
}

.table-of-contents ul {
    margin-bottom: 0;
    margin-top: 0.1rem;
}

.table-of-contents ul {
    list-style: none !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
}

.table-of-contents li {
    list-style-type: none !important;
    position: relative;
    margin-bottom: 0;
    margin-left: 0 !important;
    transition: all 0.2s ease;
    border-radius: 0.375rem;
}


.table-of-contents-sidebar .table-of-contents li {
    padding: 0;
    margin-bottom: -0.25rem;
    line-height: 1;
}

.table-of-contents-sidebar .table-of-contents li a {
    padding: 0.75rem 0.5rem 0.75rem 1.75rem;
    display: block;
    width: 100%;
    border-radius: 0.375rem;
    transition: all 0.2s ease;
}

.table-of-contents-sidebar .table-of-contents li a:hover {
    background-color: rgba(28, 100, 242, 0.05);
}

.dark .table-of-contents-sidebar .table-of-contents li a:hover {
    background-color: rgba(48, 151, 255, 0.1);
}

.table-of-contents li::before {
    content: "\2192"; /* Right arrow symbol */
    position: absolute;
    left: 0;
    color: #1C64F2; /* Matches the blue accent border */
    font-weight: bold;
    pointer-events: none;
}

.dark .table-of-contents li::before {
    color: #3097ff;
}

.key-takeaways li {
    margin-bottom: 0;
    position: relative;
    padding-left: 1.25rem;
    padding-top: 0.15rem;
    padding-bottom: 0.15rem;
    list-style-type: none !important;
    z-index: 1;
}
@media (min-width: 1024px) {
    .key-takeaways li {
        padding-left: 1.75rem;
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
    }
}


.key-takeaways li::before {
    content: "\2713"; /* Checkmark symbol */
    position: absolute;
    left: 0;
    top: 0.15rem;
    color: #00601f;
    font-weight: 900;
    pointer-events: none;
    z-index: 1;
}
@media (min-width: 1024px) {
    .key-takeaways li::before {
        top: 0.5rem;
    }
}

.dark .key-takeaways li::before {
    color: #00b63b;
}

/* Fix for "View More" button text color in Featured Listings */
.not-bbcode a.bg-orange-500 {
    color: #e5e7eb !important; /* text-gray-200 equivalent */
}

.not-bbcode a.bg-orange-500:hover {
    color: #ffffff !important; /* white equivalent */
}

/* Specific styling for table of contents links */
.table-of-contents a {
    text-decoration: none;
    display: block;
    width: 100%;
}

.table-of-contents-sidebar .table-of-contents li::before {
    left: 0.5rem;
    top: 0.75rem;
    transform: none;
}

/* Active Anchor Highlighting Logic via Parent Class */
[class*="active-anchor-"] .table-of-contents li a {
    transition: all 0.3s ease;
}

.table-of-contents-sidebar[class*="active-anchor-"] a,
.table-of-contents-sidebar a.active-toc-item {
    transition: all 0.3s ease;
}

/* Dynamically highlight the active anchor link */
.table-of-contents-sidebar.active-anchor-introduction a[href$="#introduction"],
.table-of-contents-sidebar.active-anchor-specs a[href$="#specs"],
.table-of-contents-sidebar.active-anchor-performance a[href$="#performance"],
.table-of-contents-sidebar.active-anchor-design a[href$="#design"],
.table-of-contents-sidebar.active-anchor-interior a[href$="#interior"],
.table-of-contents-sidebar.active-anchor-safety a[href$="#safety"],
.table-of-contents-sidebar.active-anchor-verdict a[href$="#verdict"],
.table-of-contents-sidebar.active-anchor-pricing a[href$="#pricing"],
.table-of-contents-sidebar.active-anchor-features a[href$="#features"],
.table-of-contents-sidebar.active-anchor-summary a[href$="#summary"],
.table-of-contents-sidebar.active-anchor-conclusion a[href$="#conclusion"],
.table-of-contents-sidebar.active-anchor-engine a[href$="#engine"],
.table-of-contents-sidebar.active-anchor-transmission a[href$="#transmission"],
.table-of-contents-sidebar.active-anchor-handling a[href$="#handling"],
.table-of-contents-sidebar.active-anchor-fuel-economy a[href$="#fuel-economy"],
.table-of-contents-sidebar.active-anchor-technology a[href$="#technology"],
.table-of-contents-sidebar a.active-toc-item {
    background-color: rgba(28, 100, 242, 0.1) !important;
    color: #1C64F2 !important;
}

.dark .table-of-contents-sidebar.active-anchor-introduction a[href$="#introduction"],
.dark .table-of-contents-sidebar.active-anchor-specs a[href$="#specs"],
.dark .table-of-contents-sidebar.active-anchor-performance a[href$="#performance"],
.dark .table-of-contents-sidebar.active-anchor-design a[href$="#design"],
.dark .table-of-contents-sidebar.active-anchor-interior a[href$="#interior"],
.dark .table-of-contents-sidebar.active-anchor-safety a[href$="#safety"],
.dark .table-of-contents-sidebar.active-anchor-verdict a[href$="#verdict"],
.dark .table-of-contents-sidebar.active-anchor-pricing a[href$="#pricing"],
.dark .table-of-contents-sidebar.active-anchor-features a[href$="#features"],
.dark .table-of-contents-sidebar.active-anchor-summary a[href$="#summary"],
.dark .table-of-contents-sidebar.active-anchor-conclusion a[href$="#conclusion"],
.dark .table-of-contents-sidebar.active-anchor-engine a[href$="#engine"],
.dark .table-of-contents-sidebar.active-anchor-transmission a[href$="#transmission"],
.dark .table-of-contents-sidebar.active-anchor-handling a[href$="#handling"],
.dark .table-of-contents-sidebar.active-anchor-fuel-economy a[href$="#fuel-economy"],
.table-of-contents-sidebar li.finished-section::before {
    content: "\2713"; /* Checkmark symbol */
    color: #10b981;
    font-weight: 900;
}

.dark .table-of-contents-sidebar li.finished-section::before {
    color: #34d399;
}

.table-of-contents-sidebar li.finished-section a {
    color: #1C64F2 !important; /* Keep blue instead of emerald */
}

.dark .table-of-contents-sidebar li.finished-section a {
    color: #3097ff !important;
}

.table-of-contents-sidebar li.finished-section a.active-toc-item,
.table-of-contents-sidebar.active-anchor-introduction li.finished-section a[href$="#introduction"],
.table-of-contents-sidebar.active-anchor-specs li.finished-section a[href$="#specs"],
.table-of-contents-sidebar.active-anchor-performance li.finished-section a[href$="#performance"],
.table-of-contents-sidebar.active-anchor-design li.finished-section a[href$="#design"],
.table-of-contents-sidebar.active-anchor-interior li.finished-section a[href$="#interior"],
.table-of-contents-sidebar.active-anchor-safety li.finished-section a[href$="#safety"],
.table-of-contents-sidebar.active-anchor-verdict li.finished-section a[href$="#verdict"],
.table-of-contents-sidebar.active-anchor-pricing li.finished-section a[href$="#pricing"],
.table-of-contents-sidebar.active-anchor-features li.finished-section a[href$="#features"],
.table-of-contents-sidebar.active-anchor-summary li.finished-section a[href$="#summary"],
.table-of-contents-sidebar.active-anchor-conclusion li.finished-section a[href$="#conclusion"],
.table-of-contents-sidebar.active-anchor-engine li.finished-section a[href$="#engine"],
.table-of-contents-sidebar.active-anchor-transmission li.finished-section a[href$="#transmission"],
.table-of-contents-sidebar.active-anchor-handling li.finished-section a[href$="#handling"],
.table-of-contents-sidebar.active-anchor-fuel-economy li.finished-section a[href$="#fuel-economy"],
.table-of-contents-sidebar.active-anchor-technology li.finished-section a[href$="#technology"] {
    color: #1C64F2 !important;
}

.dark .table-of-contents-sidebar li.finished-section a.active-toc-item,
.dark .table-of-contents-sidebar.active-anchor-introduction li.finished-section a[href$="#introduction"],
.dark .table-of-contents-sidebar.active-anchor-specs li.finished-section a[href$="#specs"],
.dark .table-of-contents-sidebar.active-anchor-performance li.finished-section a[href$="#performance"],
.dark .table-of-contents-sidebar.active-anchor-design li.finished-section a[href$="#design"],
.dark .table-of-contents-sidebar.active-anchor-interior li.finished-section a[href$="#interior"],
.dark .table-of-contents-sidebar.active-anchor-safety li.finished-section a[href$="#safety"],
.dark .table-of-contents-sidebar.active-anchor-verdict li.finished-section a[href$="#verdict"],
.dark .table-of-contents-sidebar.active-anchor-pricing li.finished-section a[href$="#pricing"],
.dark .table-of-contents-sidebar.active-anchor-features li.finished-section a[href$="#features"],
.dark .table-of-contents-sidebar.active-anchor-summary li.finished-section a[href$="#summary"],
.dark .table-of-contents-sidebar.active-anchor-conclusion li.finished-section a[href$="#conclusion"],
.dark .table-of-contents-sidebar.active-anchor-engine li.finished-section a[href$="#engine"],
.dark .table-of-contents-sidebar.active-anchor-transmission li.finished-section a[href$="#transmission"],
.dark .table-of-contents-sidebar.active-anchor-handling li.finished-section a[href$="#handling"],
.dark .table-of-contents-sidebar.active-anchor-fuel-economy li.finished-section a[href$="#fuel-economy"],
.dark .table-of-contents-sidebar.active-anchor-technology li.finished-section a[href$="#technology"] {
    color: #3097ff !important;
}