/**
 * Suar Indonesia Theme - Main Stylesheet
 * 
 * @package Suar_Indonesia
 */

/* ================================================
   CSS Variables (dapat diubah dari customizer)
   ================================================ */
:root {
    --primary-color: #DC143C;
    --secondary-color: #1E3A8A;
    --text-dark: #1a1a1a;
    --text-gray: #666666;
    --text-light: #999999;
    --bg-light: #f5f5f5;
    --bg-card: #ffffff;
    --border-color: #e0e0e0;
    --white: #ffffff;
    --transition: all 0.3s ease;
    --header-text-color: #000000;
}

/* Dark mode is now controlled via body.dark-mode class set by JavaScript toggle */
/* The @media (prefers-color-scheme: dark) has been removed to allow manual control */

/* ================================================
   Dark Mode Support (Manual Toggle via JS)
   ================================================ */
body.dark-mode {
    background-color: #121212 !important;
    color: #e5e5e5 !important;
}

body.dark-mode .site-header {
    background-color: #1e1e1e !important;
    border-bottom: 1px solid #333333;
}

body.dark-mode .header-main {
    background-color: #1e1e1e !important;
}

body.dark-mode .main-navigation {
    background-color: #1E3A8A !important;
}

body.dark-mode .site-content {
    background-color: #121212 !important;
}

body.dark-mode .site-content .container {
    background-color: #121212 !important;
}

body.dark-mode .post-card,
body.dark-mode .widget,
body.dark-mode .sidebar,
body.dark-mode .single-post,
body.dark-mode .comments-area,
body.dark-mode .suar-slider-container,
body.dark-mode .page-header {
    background-color: #1e1e1e !important;
    color: #e5e5e5 !important;
}

body.dark-mode .post-content,
body.dark-mode .entry-content,
body.dark-mode .post-excerpt {
    color: #b0b0b0 !important;
}

body.dark-mode .post-title a,
body.dark-mode .entry-title,
body.dark-mode .widget-title,
body.dark-mode .suar-recent-title a,
body.dark-mode .slide-title a,
body.dark-mode .thumb-title,
body.dark-mode .suar-big-title a,
body.dark-mode .suar-small-title a,
body.dark-mode .suar-cat-title a,
body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode h5,
body.dark-mode h6 {
    color: #e5e5e5 !important;
}

body.dark-mode a {
    color: #b0b0b0;
}

body.dark-mode a:hover {
    color: #DC143C;
}

body.dark-mode .post-title a:hover,
body.dark-mode .suar-recent-title a:hover,
body.dark-mode .suar-big-title a:hover,
body.dark-mode .suar-small-title a:hover {
    color: #DC143C !important;
}

body.dark-mode .post-meta,
body.dark-mode .entry-meta,
body.dark-mode .comment-metadata a,
body.dark-mode .post-date,
body.dark-mode .byline {
    color: #888888 !important;
}

body.dark-mode .site-footer {
    background-color: #0a0a0a !important;
}

body.dark-mode input[type="text"],
body.dark-mode input[type="email"],
body.dark-mode input[type="url"],
body.dark-mode input[type="search"],
body.dark-mode textarea {
    background-color: #1e1e1e !important;
    border-color: #333333 !important;
    color: #e5e5e5 !important;
}

body.dark-mode .search-field,
body.dark-mode .search-form input {
    background-color: #1e1e1e !important;
    color: #e5e5e5 !important;
}

body.dark-mode .widget-title {
    border-bottom-color: #333333 !important;
    color: #e5e5e5 !important;
}

body.dark-mode .suar-slider-container,
body.dark-mode .suar-slider-thumbs,
body.dark-mode .thumb-item,
body.dark-mode .suar-cat-section {
    background-color: #1e1e1e !important;
    border-color: #333333 !important;
}

.latest-news-section .section-title {
    padding-left: 25px;
    /* Align with card content */
    margin-bottom: 10px;
    margin-top: 40px;
}

body.dark-mode .suar-main-slider {
    background-color: #000 !important;
}

body.dark-mode .section-title,
body.dark-mode .section-title span,
body.dark-mode .suar-cat-header {
    color: #e5e5e5 !important;
    background-color: transparent !important;
    border-color: #e5e5e5 !important;
}

body.dark-mode .posts-grid {
    background-color: transparent !important;
}

body.dark-mode .content-area,
body.dark-mode #primary,
body.dark-mode #main {
    background-color: #121212 !important;
}

body.dark-mode .related-posts,
body.dark-mode .related-post {
    background-color: #1e1e1e !important;
}

body.dark-mode .logo-light {
    display: none !important;
}

body.dark-mode .logo-dark {
    display: block !important;
}

body.dark-mode .breaking-news-wrapper {
    background-color: #8b0000 !important;
}

body.dark-mode .breaking-label {
    background-color: #600000 !important;
    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.3);
}

body.dark-mode .breaking-item a,
body.dark-mode .breaking-content {
    color: #ffffff !important;
}

body.dark-mode .pagination .page-numbers {
    background-color: #1e1e1e !important;
    color: #e5e5e5 !important;
    border-color: #333333 !important;
}

body.dark-mode .pagination .page-numbers.current,
body.dark-mode .pagination .page-numbers:hover {
    background-color: #DC143C !important;
    color: #ffffff !important;
}

body.dark-mode .post-thumbnail {
    background-color: #333333 !important;
}

body.dark-mode .dark-mode-toggle {
    color: #e5e5e5 !important;
}

body.dark-mode .dark-mode-toggle:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
}

body.dark-mode .search-toggle {
    color: #e5e5e5 !important;
}

body.dark-mode .site-title a {
    color: #DC143C !important;
}

/* Extra dark mode coverage for slider and content */
body.dark-mode .suar-main-slider,
body.dark-mode .suar-slide-item {
    background-color: #1e1e1e !important;
}

body.dark-mode .suar-slider-thumbs,
body.dark-mode .thumb-item {
    background-color: #1e1e1e !important;
    border-color: #333333 !important;
}

body.dark-mode .thumb-title,
body.dark-mode .slide-title,
body.dark-mode .slide-title a {
    color: #e5e5e5 !important;
}

body.dark-mode .container {
    background-color: transparent !important;
}

body.dark-mode .homepage-widgets,
body.dark-mode .suar-big-post,
body.dark-mode .suar-small-post,
body.dark-mode .suar-cat-big,
body.dark-mode .suar-big-content,
body.dark-mode .suar-small-content {
    background-color: #1e1e1e !important;
}

body.dark-mode .suar-big-thumb,
body.dark-mode .suar-small-thumb,
body.dark-mode .suar-recent-thumb {
    background-color: #333333 !important;
}

body.dark-mode .featured-post,
body.dark-mode .featured-post .post-content {
    background-color: #1e1e1e !important;
    color: #e5e5e5 !important;
}

body.dark-mode #content,
body.dark-mode .site-main {
    background-color: #121212 !important;
}

body.dark-mode .widget ul li,
body.dark-mode .widget a {
    color: #b0b0b0 !important;
    border-color: #333333 !important;
}

body.dark-mode .widget a:hover {
    color: #DC143C !important;
}

/* ================================================
   Reset & Base Styles
   ================================================ */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: var(--text-dark);
    background-color: var(--bg-light);
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    color: var(--primary-color);
    text-decoration: none;
    transition: var(--transition);
}

a:hover {
    color: var(--secondary-color);
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Utility Classes */
.mobile-only {
    display: none;
}

.desktop-only {
    display: inline-flex;
    align-items: center;
}

/* Logo switching - Default (Light Mode) */
.logo-light {
    display: block;
}

.logo-dark {
    display: none;
}

/* ================================================
   Breaking News (Below Header)
   ================================================ */
.breaking-news-wrapper {
    background-color: var(--primary-color);
    color: var(--header-text-color);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.breaking-container {
    display: flex;
    align-items: center;
    overflow: hidden;
}

.breaking-label {
    background-color: #b91032;
    /* Sedikit lebih gelap dari primary */
    padding: 10px 20px;
    font-weight: 800;
    font-size: 13px;
    text-transform: uppercase;
    white-space: nowrap;
    z-index: 2;
    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
}

.breaking-content {
    flex: 1;
    overflow: hidden;
    position: relative;
    padding: 8px 0;
}

.breaking-marquee {
    display: inline-block;
    white-space: nowrap;
    animation: marquee 20s linear infinite;
    padding-left: 100%;
    /* Start from outside right */
}

.breaking-marquee:hover {
    animation-play-state: paused;
    /* Pause on hover */
}

.breaking-item {
    margin-right: 30px;
    font-size: 14px;
    font-weight: 500;
}

.breaking-item a {
    color: var(--white);
}

.breaking-item a:hover {
    text-decoration: underline;
    opacity: 0.9;
}

.breaking-item .separator {
    margin-left: 30px;
    opacity: 0.5;
    color: var(--header-text-color);
}

.breaking-item a {
    color: var(--header-text-color);
    text-decoration: none;
}

.breaking-item a:hover {
    text-decoration: underline;
}

@keyframes marquee {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-100%);
    }
}

@media (max-width: 768px) {
    .breaking-news-wrapper {
        border-top: none;
    }

    .breaking-label {
        padding: 8px 12px;
        font-size: 11px;
    }

    .breaking-item {
        font-size: 13px;
    }
}

/* ================================================
   Site Header
   ================================================ */
.site-header {
    background-color: var(--white);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    position: sticky;
    top: 0;
    z-index: 1000;
}

.header-main {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0;
}

.site-branding {
    flex: 0 0 auto;
}

.site-title {
    font-size: 32px;
    font-weight: 800;
    margin: 0;
    color: var(--primary-color);
    text-transform: uppercase;
    letter-spacing: 1px;
}

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

.site-description {
    font-size: 12px;
    color: var(--text-gray);
    margin: 0;
}

.custom-logo-link img {
    max-height: 60px;
    width: auto;
}

/* Header Right */
.header-right {
    display: flex;
    align-items: center;
    gap: 20px;
}

.social-links {
    display: flex;
    gap: 10px;
}

.social-link {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: var(--bg-light);
    color: var(--text-gray);
    transition: var(--transition);
}

.social-link:hover {
    background-color: var(--primary-color);
    color: var(--white);
}

.search-toggle {
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    color: var(--text-dark);
    transition: var(--transition);
}

.search-toggle:hover {
    color: var(--primary-color);
}

/* ================================================
   Navigation Menu Dropdown (Submenu)
   ================================================ */
.main-navigation {
    background-color: var(--secondary-color);
    padding: 0;
    position: relative;
    z-index: 100;
    /* Ensure menu is above other content */
}

.nav-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center;
    width: max-content;
    flex-shrink: 0;
    white-space: nowrap !important;
}

.nav-menu li {
    position: relative;
}

.nav-menu a {
    display: block;
    padding: 12px 20px;
    color: var(--white);
    font-weight: 500;
    font-size: 15px;
    transition: var(--transition);
}

.nav-menu a:hover,
.nav-menu .current-menu-item>a,
.nav-menu li:hover>a {
    /* Keep parent active on hover */
    background-color: rgba(255, 255, 255, 0.1);
    color: var(--white);
}

/* Submenu Styles */
.nav-menu ul.sub-menu {
    display: none;
    /* Hide by default */
    position: absolute;
    top: 100%;
    left: 0;
    background-color: var(--secondary-color);
    /* Same Blue */
    min-width: 200px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    z-index: 999;
}

/* Show submenu on hover (Desktop) */
.nav-menu li:hover>ul.sub-menu {
    display: block;
    animation: fadeIn 0.2s ease;
}

/* Submenu Link Styles */
.nav-menu ul.sub-menu li {
    width: 100%;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.nav-menu ul.sub-menu li:last-child {
    border-bottom: none;
}

.nav-menu ul.sub-menu a {
    padding: 12px 25px;
    font-size: 14px;
}

.nav-menu ul.sub-menu a:hover {
    background-color: rgba(0, 0, 0, 0.1);
    /* Slightly darker on hover */
    padding-left: 30px;
    /* Slight movement effect */
}

/* Simple Fade In Animation */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

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

/* Add Dropdown Indicator */
.nav-menu .menu-item-has-children>a::after {
    content: "▼";
    font-size: 10px;
    margin-left: 6px;
    opacity: 0.7;
    display: inline-block;
}

/* Mobile Submenu Handling overrides */
/* Mobile Nav Scrollable Modification */
.scroll-container {
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    /* Smooth scroll on iOS */
    scrollbar-width: none;
    /* Firefox */
    cursor: grab;
    /* Suggest dragging */
    padding-bottom: 5px;
    /* Prevent scrollbar overlapping content if visible */
    display: flex;
    /* Ensure flex container */
    align-items: center;
    /* Center items vertically */
    width: 100%;
    max-width: 100%;
    /* Ensure it follows container constraints but scrolls internally */
    position: relative;
}

.scroll-container::-webkit-scrollbar {
    display: none;
    /* Chrome, Safari, Opera */
}

.scroll-container.active {
    cursor: grabbing;
}

/* Ensure menu items don't wrap and have spacing */
.nav-menu {
    flex-wrap: nowrap;
    width: max-content;
    /* Ensure UL takes necessary width */
}

.nav-menu li {
    display: inline-block;
    flex: 0 0 auto;
    white-space: nowrap !important;
}

/* Dark Mode Toggle Button */
.dark-mode-toggle {
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    color: var(--text-dark);
    transition: var(--transition);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dark-mode-toggle:hover {
    background-color: rgba(0, 0, 0, 0.05);
    color: var(--primary-color);
}

/* Dark mode specific for toggle */
body.dark-mode .dark-mode-toggle .icon-moon {
    display: none !important;
}

body.dark-mode .dark-mode-toggle .icon-sun {
    display: block !important;
}

body.dark-mode .dark-mode-toggle:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

/* Remove old mobile toggle and related styles if they exist or ensure they're hidden/overridden */
.menu-toggle {
    display: none !important;
    /* Force hide hamburger */
}

/* Mobile Submenu Handling overrides */
@media (max-width: 768px) {
    .nav-menu li {
        width: auto;
        /* Allow auto width for scrolling */
    }

    /* Keep margins for spacing */
    .nav-menu a {
        padding: 12px 15px;
        /* Adjust padding for mobile text */
        font-size: 14px;
    }
}

/* Search Form */
.search-form-wrapper {
    padding: 20px;
    background-color: var(--white);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.search-form {
    display: flex;
    gap: 10px;
}

.search-form input[type="search"] {
    flex: 1;
    padding: 10px 15px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    font-size: 15px;
}

.search-form button {
    padding: 10px 30px;
    background-color: var(--primary-color);
    color: var(--white);
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 600;
    transition: var(--transition);
}

.search-form button:hover {
    background-color: var(--secondary-color);
}

/* ================================================
   Site Content Layout
   ================================================ */
.site-content {
    padding: 40px 0;
}

.site-content .container {
    display: grid;
    grid-template-columns: 1fr 350px;
    gap: 40px;
}

.content-area {
    min-width: 0;
}

/* ================================================
   Posts Grid
   ================================================ */
.posts-grid {
    display: grid;
    gap: 30px;
}

/* Featured Post (First post on homepage) */
.featured-post {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 25px;
    background-color: var(--white);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}

.featured-post .post-thumbnail {
    position: relative;
    overflow: hidden;
}

.featured-post .post-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

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

.featured-post .post-content {
    padding: 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.featured-post .post-title {
    font-size: 32px;
    line-height: 1.3;
    margin: 15px 0;
}

/* Regular Posts */
.post-card {
    background-color: var(--white);
    border-radius: 8px;
    overflow: hidden;
    transition: var(--transition);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

.post-card:hover {
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
    transform: translateY(-3px);
}

.post-thumbnail {
    position: relative;
    overflow: hidden;
    background-color: var(--bg-light);
}

.post-thumbnail img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    transition: transform 0.4s ease;
}

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

/* Category Badge */
.post-category {
    position: absolute;
    bottom: 15px;
    left: 15px;
    background-color: var(--primary-color);
    color: var(--white);
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    border-radius: 3px;
    z-index: 2;
}

.post-category.small {
    position: static;
    display: inline-block;
    margin-bottom: 8px;
    font-size: 11px;
    padding: 4px 10px;
}

/* Post Content */
.post-content {
    padding: 20px;
}

.post-title {
    font-size: 20px;
    line-height: 1.4;
    margin: 0 0 12px 0;
    font-weight: 700;
}

.post-title a {
    color: var(--text-dark);
}

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

/* Post Meta */
.post-meta {
    display: flex;
    align-items: center;
    gap: 15px;
    font-size: 13px;
    color: var(--text-light);
    margin-bottom: 12px;
}

.post-meta svg {
    margin-right: 4px;
    vertical-align: middle;
}

.post-date,
.byline,
.comments-link {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Post Excerpt */
.post-excerpt {
    font-size: 15px;
    color: var(--text-gray);
    line-height: 1.6;
}

/* ================================================
   Single Post
   ================================================ */
.single-post {
    background-color: var(--white);
    padding: 40px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.entry-header {
    margin-bottom: 30px;
}

.entry-categories {
    margin-bottom: 15px;
}

.category-badge {
    display: inline-block;
    background-color: var(--primary-color);
    color: var(--white);
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    border-radius: 3px;
}

.entry-title {
    font-size: 28px;
    line-height: 1.3;
    margin-bottom: 20px;
    font-weight: 800;
    color: var(--text-dark);
}

.entry-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    font-size: 14px;
    color: var(--text-light);
    padding-bottom: 20px;
    border-bottom: 2px solid var(--bg-light);
}

.single-post .post-thumbnail {
    margin-bottom: 30px;
    border-radius: 8px;
    overflow: hidden;
}

.single-post .post-thumbnail img {
    width: 100%;
    height: auto;
}

/* Entry Content (Gutenberg) */
.entry-content {
    font-size: 17px;
    line-height: 1.8;
    color: var(--text-dark);
}

.entry-content p {
    margin-bottom: 20px;
}

.entry-content h2,
.entry-content h3,
.entry-content h4 {
    margin: 30px 0 15px;
    font-weight: 700;
    line-height: 1.3;
}

.entry-content h2 {
    font-size: 26px;
}

.entry-content h3 {
    font-size: 22px;
}

.entry-content h4 {
    font-size: 19px;
}

.entry-content ul,
.entry-content ol {
    margin-bottom: 20px;
    padding-left: 30px;
}

.entry-content li {
    margin-bottom: 8px;
}

.entry-content img {
    border-radius: 6px;
    margin: 25px 0;
}

.entry-content blockquote {
    border-left: 4px solid var(--primary-color);
    padding-left: 25px;
    margin: 25px 0;
    font-style: italic;
    color: var(--text-gray);
}

/* Post Tags */
.post-tags {
    margin: 30px 0;
    padding: 20px 0;
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
}

.tags-label {
    font-weight: 700;
    margin-right: 10px;
}

.post-tags a {
    display: inline-block;
    background-color: var(--bg-light);
    padding: 5px 12px;
    margin: 3px;
    font-size: 13px;
    border-radius: 3px;
    color: var(--text-gray);
}

.post-tags a:hover {
    background-color: var(--primary-color);
    color: var(--white);
}

/* Share Buttons */
.entry-footer {
    margin-top: 30px;
}

.share-buttons {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.share-label {
    font-weight: 700;
    margin-right: 5px;
}

.share-btn {
    padding: 8px 16px;
    background-color: var(--bg-light);
    color: var(--text-dark);
    border-radius: 4px;
    font-size: 14px;
    font-weight: 600;
    transition: var(--transition);
}

.share-btn:hover {
    background-color: var(--primary-color);
    color: var(--white);
}

/* Related Posts */
.related-posts {
    margin-top: 50px;
    padding-top: 40px;
    border-top: 2px solid var(--border-color);
}

.related-title {
    font-size: 24px;
    margin-bottom: 25px;
    font-weight: 700;
}

.related-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.related-post {
    background-color: var(--bg-light);
    border-radius: 6px;
    overflow: hidden;
    transition: var(--transition);
}

.related-post:hover {
    box-shadow: 0 3px 15px rgba(0, 0, 0, 0.1);
}

.related-thumbnail img {
    width: 100%;
    height: 150px;
    object-fit: cover;
}

.related-post-title {
    font-size: 15px;
    padding: 15px;
    margin: 0;
}

.related-post-title a {
    color: var(--text-dark);
}

.related-date {
    font-size: 12px;
    color: var(--text-light);
    padding: 0 15px 15px;
    display: block;
}

/* ================================================
   Sidebar
   ================================================ */
.sidebar {
    background-color: var(--white);
    padding: 25px;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

.widget {
    margin-bottom: 30px;
}

.widget:last-child {
    margin-bottom: 0;
}

.widget-title {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 3px solid var(--primary-color);
    color: var(--text-dark);
}

.widget ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.widget li {
    padding: 10px 0;
    border-bottom: 1px solid var(--bg-light);
}

.widget li:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.widget a {
    color: var(--text-dark);
    font-size: 15px;
    display: inline-block;
}

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

/* Custom Widget: Suar Recent Posts Aesthetic */
.suar-recent-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
}

.suar-recent-item {
    margin-bottom: 5px;
}

.suar-recent-thumb {
    position: relative;
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 8px;
    aspect-ratio: 16/10;
    background-color: var(--bg-light);
}

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

.suar-recent-thumb .no-thumb {
    background-color: #ddd;
}

.suar-recent-item:hover .suar-recent-thumb img {
    transform: scale(1.05);
}

.suar-recent-cat {
    position: absolute;
    bottom: 5px;
    left: 5px;
    /* Overlay Style */
    background-color: var(--primary-color);
    color: var(--white);
    padding: 3px 8px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    border-radius: 3px;
    z-index: 2;
}

.suar-recent-title {
    font-size: 13px;
    line-height: 1.4;
    margin: 0;
    font-weight: 600;
}

.suar-recent-title a {
    color: var(--text-dark);
    text-decoration: none;
}

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

/* ================================================
   Homepage Category Layout Widget
   ================================================ */
.suar-cat-section {
    margin-bottom: 40px;
    padding-bottom: 30px;
    border-bottom: 1px solid var(--border-color);
}

.suar-cat-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
    border-bottom: 2px solid var(--text-dark);
    padding-bottom: 10px;
}

.suar-cat-title {
    font-size: 24px;
    font-weight: 800;
    margin: 0;
    text-transform: uppercase;
}

.suar-cat-title a {
    color: var(--text-dark);
}

.suar-cat-more {
    font-size: 14px;
    color: var(--primary-color);
    font-weight: 600;
}

.suar-cat-more .arrow {
    font-weight: bold;
    display: inline-block;
    transition: transform 0.2s;
}

.suar-cat-more:hover .arrow {
    transform: translateX(5px);
}

/* Big Post (Top) */
.suar-cat-big {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 25px;
    margin-bottom: 30px;
}

.suar-big-thumb img {
    width: 100%;
    height: 300px;
    object-fit: cover;
    border-radius: 6px;
}

.suar-big-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.suar-big-title {
    font-size: 24px;
    margin: 0 0 15px 0;
    line-height: 1.3;
}

.suar-big-title a {
    color: var(--text-dark);
}

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

.suar-big-excerpt {
    font-size: 16px;
    color: var(--text-gray);
    line-height: 1.6;
}

/* Small Posts (Bottom Grid) */
.suar-cat-small-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.suar-small-thumb img {
    width: 100%;
    height: 150px;
    object-fit: cover;
    border-radius: 6px;
    margin-bottom: 10px;
}

.suar-small-title {
    font-size: 16px;
    line-height: 1.4;
    margin: 0;
    font-weight: 700;
}

.suar-small-title a {
    color: var(--text-dark);
}

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

/* Responsive */
@media (max-width: 768px) {
    .suar-cat-big {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .suar-big-thumb img {
        height: 200px;
    }

    .suar-big-title {
        font-size: 20px;
    }

    .suar-cat-small-container {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}

/* ================================================
   Pagination
   ================================================ */
.pagination {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 50px;
}

.pagination .page-numbers {
    padding: 10px 16px;
    background-color: var(--white);
    color: var(--text-dark);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    transition: var(--transition);
}

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

/* ================================================
   Page/Archive Header
   ================================================ */
.page-header {
    background-color: var(--white);
    padding: 30px;
    margin-bottom: 30px;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

.page-title {
    font-size: 32px;
    font-weight: 800;
    margin: 0;
    color: var(--text-dark);
}

.archive-description {
    margin-top: 15px;
    color: var(--text-gray);
    font-size: 16px;
}

/* ================================================
   404 Error Page
   ================================================ */
.error-404 {
    text-align: center;
    padding: 60px 20px;
}

.error-404-content {
    max-width: 600px;
    margin: 0 auto;
}

.error-404 .page-title {
    font-size: 120px;
    color: var(--primary-color);
    margin-bottom: 10px;
}

.error-title {
    font-size: 32px;
    margin-bottom: 15px;
}

.error-message {
    font-size: 16px;
    color: var(--text-gray);
    margin-bottom: 30px;
}

.btn-home {
    display: inline-block;
    padding: 12px 30px;
    background-color: var(--primary-color);
    color: var(--white);
    border-radius: 6px;
    font-weight: 600;
    transition: var(--transition);
}

.btn-home:hover {
    background-color: var(--secondary-color);
    color: var(--white);
}

.search-404,
.recent-posts-404 {
    margin-top: 40px;
}

.recent-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-top: 20px;
}

.recent-post-item {
    display: flex;
    gap: 15px;
    background-color: var(--bg-light);
    padding: 15px;
    border-radius: 6px;
}

.recent-thumbnail img {
    width: 80px;
    height: 60px;
    object-fit: cover;
    border-radius: 4px;
}

.recent-title {
    font-size: 14px;
    margin: 0 0 5px 0;
}

.recent-title a {
    color: var(--text-dark);
}

.recent-date {
    font-size: 12px;
    color: var(--text-light);
}

/* ================================================
   Footer
   ================================================ */
.site-footer {
    background-color: var(--text-dark);
    color: var(--text-light);
    padding: 40px 0 20px;
    margin-top: 60px;
}

.footer-widgets {
    margin-bottom: 40px;
}

.footer-widget-area {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
}

.footer-column .widget-title {
    color: var(--white);
    border-color: var(--primary-color);
}

.footer-column .widget a {
    color: var(--text-light);
}

.footer-column .widget a:hover {
    color: var(--white);
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 30px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-copyright {
    font-size: 14px;
}

.footer-menu {
    list-style: none;
    display: flex;
    gap: 20px;
    margin: 0;
}

.footer-menu a {
    color: var(--text-light);
    font-size: 14px;
}

.footer-menu a:hover {
    color: var(--white);
}

/* ================================================
   Responsive Design
   ================================================ */

/* Tablet */
@media (max-width: 992px) {
    .site-content .container {
        grid-template-columns: 1fr;
    }

    .featured-post {
        grid-template-columns: 1fr;
    }

    .featured-post .post-title {
        font-size: 26px;
    }

    .related-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .footer-widget-area {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Mobile */
@media (max-width: 768px) {

    /* Fix horizontal overflow */
    html,
    body {
        overflow-x: hidden;
        width: 100%;
    }

    .container {
        padding: 0 15px;
        max-width: 100%;
        overflow-x: hidden;
    }

    /* Header */
    .header-main {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 5px 0;
        /* Reduced padding */
        gap: 20px;
    }

    .site-branding {
        flex-shrink: 0;
    }

    .site-branding img {
        max-height: 50px;
        width: auto;
    }

    /* Header Banner Area */
    .header-banner-area {
        flex-grow: 1;
        display: flex;
        justify-content: flex-end;
        /* Align to right */
        align-items: center;
        margin: 0 20px;
    }

    .header-banner-img {
        max-height: 60px;
        /* Limit height to fit header */
        width: auto;
        max-width: 100%;
        object-fit: contain;
    }

    .header-right {
        display: flex;
        align-items: center;
        gap: 15px;
        flex-shrink: 0;
    }

    /* Show banner on mobile but smaller */
    .header-banner-area {
        display: flex;
        justify-content: flex-end;
        margin: 0 10px;
        /* Reduced margin */
        flex-grow: 1;
        /* Allow it to take space */
    }

    .header-banner-img {
        max-height: 40px;
        /* Smaller height for mobile */
        width: auto;
        object-fit: contain;
    }

    /* Navigation - Mobile Menu */
    .mobile-nav-flex {
        display: flex;
        /* Flex container */
        width: 100%;
        overflow-x: auto;
        /* Allow container to scroll */
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        /* Hide scrollbar Firefox */
    }

    .mobile-nav-flex::-webkit-scrollbar {
        display: none;
        /* Hide scrollbar Chrome/Safari */
    }

    .main-navigation {
        width: 100%;
        min-height: 40px;
    }

    .nav-menu {
        display: flex !important;
        flex-direction: row !important;
        width: max-content;
        /* Force wide width to trigger parent scroll */
        background-color: transparent;
        margin: 0;
        flex-wrap: nowrap !important;
        padding-right: 20px;
        align-items: center;
        overflow: visible;
        /* Disable internal scroll */
        gap: 0;
    }

    /* Show ALL items */
    .nav-menu li {
        width: auto;
        border-bottom: none;
        display: inline-block !important;
        /* Force show */
        flex: 0 0 auto;
        /* Do not shrink */
        white-space: nowrap !important;
    }

    .nav-menu li:nth-child(-n+2) {
        display: inline-block !important;
    }

    /* On very small screens */
    @media (max-width: 360px) {
        .nav-menu li:nth-child(2) {
            display: inline-block !important;
        }
    }

    /* Remove active/expanded logic */
    .nav-menu.active {
        flex-direction: row !important;
        width: max-content !important;
    }

    .nav-menu a {
        padding: 10px 15px;
        font-size: 14px;
        white-space: nowrap;
    }

    /* Ensure hamburger is hidden */
    .menu-toggle {
        display: none !important;
    }


    /* Remove old hamburger spans if present or ensure they don't conflict */
    .menu-icon {
        display: none;
    }

    /* Breaking News - Make it smaller */
    .breaking-news-wrapper {
        padding: 0;
    }

    .breaking-container {
        flex-direction: row;
    }

    .breaking-label {
        padding: 6px 10px;
        font-size: 9px;
    }

    .breaking-content {
        padding: 6px 0;
    }

    .breaking-item {
        font-size: 12px;
    }

    /* Reduce spacing between header and content */
    .site-content {
        padding-top: 5px !important;
        /* Minimized padding */
        margin-top: 0 !important;
    }

    .site-content .container {
        padding-top: 0;
        gap: 15px;
    }

    .breaking-news-wrapper {
        margin-bottom: 10px;
        /* Reduced margin */
    }

    /* Posts */
    .posts-grid {
        gap: 15px;
    }

    .post-card {
        margin-bottom: 15px;
    }

    .post-thumbnail img {
        height: 180px;
    }

    .post-content {
        padding: 12px;
    }

    .post-title {
        font-size: 16px;
    }

    .post-excerpt {
        font-size: 13px;
        display: none;
        /* Hide excerpt on mobile for cleaner look */
    }

    /* Single Post */
    .entry-title {
        font-size: 22px;
    }

    .single-post {
        padding: 10px 8px;
    }

    .entry-content {
        font-size: 15px;
    }

    /* Sidebar - Stack below content */
    .sidebar {
        margin-top: 20px;
        padding: 15px;
    }

    /* Related & Grids */
    .related-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    /* Footer */
    .footer-widget-area {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .footer-bottom {
        flex-direction: column;
        gap: 10px;
        text-align: center;
    }

    .recent-grid {
        grid-template-columns: 1fr;
    }

    /* Homepage Widgets */
    .homepage-widgets {
        margin: 15px 0 !important;
    }

    /* Category Layout Widget Mobile */
    .suar-cat-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
    }

    .suar-cat-title {
        font-size: 18px;
    }

    /* Mobile Share Button */
    .mobile-only {
        display: inline-flex !important;
    }

    .desktop-only {
        display: none !important;
    }

    .mobile-share-btn {
        background: #25D366;
        /* WhatsApp Greenish or generic share color */
        color: white;
        border: none;
        padding: 4px 10px;
        border-radius: 4px;
        font-size: 12px;
        align-items: center;
        gap: 5px;
        cursor: pointer;
        line-height: 1;
        margin-left: 10px;
    }

    .mobile-share-btn svg {
        width: 12px;
        height: 12px;
    }
}

@media (max-width: 480px) {
    .container {
        padding: 0 10px;
    }

    .site-branding img {
        max-height: 35px;
    }

    .site-title {
        font-size: 18px;
    }

    .breaking-label {
        padding: 5px 8px;
        font-size: 8px;
    }

    .breaking-item {
        font-size: 11px;
    }

    .post-thumbnail img {
        height: 160px;
    }

    .post-title {
        font-size: 15px;
    }

    .entry-title {
        font-size: 20px;
    }

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

    .entry-content h3 {
        font-size: 17px;
    }

    /* Suar Recent Grid - 1 column on small mobile */
    .suar-recent-grid {
        grid-template-columns: 1fr;
    }
}

/* ================================================
   Comments Section Aesthetic
   ================================================ */
.comments-area {
    margin-top: 40px;
    background: var(--bg-card);
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

.comments-title {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 30px;
    position: relative;
    padding-bottom: 15px;
    border-bottom: 2px solid #f0f0f0;
}

.comments-title::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 60px;
    height: 2px;
    background: var(--primary-color);
}

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

.comment-list li {
    margin-bottom: 25px;
}

.comment-body {
    position: relative;
    padding-left: 70px;
}

.comment-meta {
    margin-bottom: 10px;
}

.comment-author .avatar {
    position: absolute;
    left: 0;
    top: 5px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #f0f0f0;
}

.comment-author .fn {
    font-style: normal;
    font-weight: 700;
    font-size: 16px;
    color: var(--text-dark);
}

.comment-metadata {
    font-size: 13px;
    color: var(--text-gray);
    margin-top: 2px;
}

.comment-metadata a {
    color: var(--text-gray);
    text-decoration: none;
}

.comment-content {
    font-size: 15px;
    color: #444;
    line-height: 1.6;
}

.reply {
    margin-top: 10px;
}

.comment-reply-link {
    display: inline-block;
    padding: 4px 12px;
    background: #f5f5f5;
    color: var(--text-dark);
    font-size: 12px;
    border-radius: 15px;
    font-weight: 600;
    transition: all 0.2s ease;
}

.comment-reply-link:hover {
    background: var(--primary-color);
    color: #fff;
}

/* Comment Form */
.comment-respond {
    margin-top: 40px;
    padding-top: 30px;
    border-top: 1px solid #f0f0f0;
}

.comment-reply-title {
    font-size: 20px;
    margin-bottom: 20px;
    display: block;
}

.comment-form {
    display: grid;
    gap: 15px;
}

.comment-notes,
.logged-in-as {
    font-size: 14px;
    color: var(--text-gray);
    margin-bottom: 15px;
}

.comment-form-comment label,
.comment-form-author label,
.comment-form-email label,
.comment-form-url label {
    display: block;
    font-weight: 600;
    margin-bottom: 5px;
    font-size: 14px;
}

.comment-form-comment textarea,
.comment-form-author input,
.comment-form-email input,
.comment-form-url input {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-family: inherit;
    font-size: 14px;
    transition: all 0.2s;
    background: var(--bg-light);
}

.comment-form-comment textarea:focus,
.comment-form-author input:focus,
.comment-form-email input:focus,
.comment-form-url input:focus {
    outline: none;
    border-color: var(--secondary-color);
    background: var(--bg-card);
    box-shadow: 0 0 0 3px rgba(30, 58, 138, 0.1);
}

.form-submit .submit-btn {
    background: var(--primary-color);
    color: #fff;
    border: none;
    padding: 12px 30px;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.form-submit .submit-btn:hover {
    background: var(--secondary-color);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(220, 20, 60, 0.2);
}

/* Responsive Comments */
@media (max-width: 600px) {
    .comments-area {
        padding: 20px;
    }

    .comment-body {
        padding-left: 0;
        margin-top: 10px;
    }

    .comment-author .avatar {
        position: relative;
        width: 40px;
        height: 40px;
        margin-right: 10px;
        margin-bottom: 10px;
        float: left;
    }

    .comment-meta {
        display: flex;
        align-items: center;
        margin-bottom: 15px;
    }

    .comment-author .fn {
        display: block;
    }

    .comment-metadata {
        margin-left: 10px;
    }

    /* ================================================
   Related Posts "Widget" Style (Horizontal Scroll)
   ================================================ */
    .related-posts.widget-style {
        margin-top: 40px;
        padding-top: 20px;
        border-top: 1px solid #eee;
    }

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

    .related-title {
        font-size: 20px;
        font-weight: 800;
        text-transform: uppercase;
        position: relative;
        padding-left: 15px;
    }

    .related-title::before {
        content: '';
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 4px;
        height: 100%;
        background: var(--primary-color);
    }

    .scroll-instruction {
        font-size: 12px;
        color: var(--text-gray);
        font-style: italic;
    }

    .related-scroll-container {
        display: flex;
        gap: 15px;
        overflow-x: auto;
        padding-bottom: 20px;
        /* Space for scrollbar */
        scroll-snap-type: x mandatory;
        /* Hide scrollbar for standard browsers */
        scrollbar-width: thin;
        scrollbar-color: var(--primary-color) #f0f0f0;
    }

    /* Hide scrollbar for Webkit */
    .related-scroll-container::-webkit-scrollbar {
        height: 6px;
    }

    .related-scroll-container::-webkit-scrollbar-track {
        background: #f0f0f0;
        border-radius: 3px;
    }

    .related-scroll-container::-webkit-scrollbar-thumb {
        background: var(--primary-color);
        border-radius: 3px;
    }

    .related-card {
        flex: 0 0 160px;
        /* Fixed width for cards */
        scroll-snap-align: start;
        display: flex;
        flex-direction: column;
    }

    .related-link {
        text-decoration: none;
        color: inherit;
        display: block;
        height: 100%;
    }

    .related-image-wrapper {
        width: 100%;
        aspect-ratio: 2 / 3;
        /* Tall portrait ratio */
        border-radius: 8px;
        overflow: hidden;
        margin-bottom: 10px;
        background: #eee;
    }

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

    .related-card:hover .related-image-wrapper img {
        transform: scale(1.05);
    }

    .related-card-title {
        font-size: 14px;
        line-height: 1.4;
        font-weight: 600;
        margin: 0;
        color: var(--text-dark);
        display: -webkit-box;
        -webkit-line-clamp: 3;
        line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    /* Mobile specific for scroll */
    @media (max-width: 600px) {
        .related-card {
            flex: 0 0 140px;
            /* Slightly smaller on mobile */
        }

        .related-image-wrapper {
            border-radius: 6px;
        }
    }
}

/* ================================================
   Horizontal News Cards (Berita Terbaru)
   ================================================ */
/* Horizontal News Cards (Berita Terbaru) */
.news-list-horizontal {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.news-card-horizontal {
    display: flex;
    flex-direction: row;
    gap: 25px;
    padding: 25px;
    border: 1px solid var(--border-color);
    border-radius: 16px;
    background-color: var(--bg-card);
    transition: var(--transition);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.02);
}

.news-card-horizontal:last-child {
    border-bottom: 1px solid var(--border-color);
    /* Maintain border for last item too since it's a card now */
}

.news-card-horizontal:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
    border-color: var(--primary-color);
}

.news-card-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.news-card-title {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.4;
    margin: 0 0 12px 0;
    color: var(--text-dark);
}

.news-card-title a {
    color: inherit;
    text-decoration: none;
    transition: color 0.3s ease;
}

.news-card-title a:hover {
    color: var(--primary-color);
    text-decoration: none;
}

.news-card-excerpt {
    font-size: 15px;
    line-height: 1.6;
    color: var(--text-gray);
    margin: 0;
}

.news-card-image {
    flex: 0 0 200px;
    width: 200px;
    height: 135px;
    overflow: hidden;
    border-radius: 12px;
}

.news-card-image a {
    display: block;
    width: 100%;
    height: 100%;
}

.news-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.news-card-horizontal:hover .news-card-image img {
    transform: scale(1.08);
}

/* Dark Mode for Horizontal News Cards */
body.dark-mode .news-card-horizontal,
html.dark-mode .news-card-horizontal {
    background-color: #1e1e1e !important;
    border-color: #333333 !important;
    box-shadow: none;
}

body.dark-mode .news-card-horizontal:hover {
    border-color: #DC143C !important;
    background-color: #252525 !important;
}

body.dark-mode .news-card-title,
html.dark-mode .news-card-title {
    color: #e5e5e5;
}

body.dark-mode .news-card-title a,
html.dark-mode .news-card-title a {
    color: #e5e5e5;
}

body.dark-mode .news-card-title a:hover,
html.dark-mode .news-card-title a:hover {
    color: #DC143C;
}

body.dark-mode .news-card-excerpt,
html.dark-mode .news-card-excerpt {
    color: #b0b0b0;
}

/* Responsive Horizontal News Cards */
@media (max-width: 768px) {
    .news-card-horizontal {
        gap: 15px;
        padding: 20px;
        /* Increased padding inside the card */
        flex-direction: column-reverse;
        /* Stack image on top or text? User said "dempet dengan kotak", likely standard row but compressed. Let's keep row but fix padding. Actually, let's keep row as user screenshot implies row. Just fix padding. */
        flex-direction: row;
    }

    /* Align title on mobile */
    .latest-news-section .section-title {
        padding-left: 20px;
        margin-bottom: 15px;
        margin-top: 30px;
        /* Slight increase on mobile too */
    }

    .news-card-title {
        font-size: 16px;
    }

    .news-card-excerpt {
        font-size: 13px;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .news-card-image {
        flex: 0 0 120px;
        width: 120px;
        height: 80px;
    }
}

@media (max-width: 480px) {
    .news-card-title {
        font-size: 15px;
        margin-bottom: 5px;
        /* Reduce title margin on small screens */
    }

    .news-card-excerpt {
        font-size: 12px;
    }

    .news-card-image {
        flex: 0 0 100px;
        width: 100px;
        height: 70px;
    }

    /* Fix slider wrapper background on mobile */
    .homepage-slider-section,
    .homepage-slider-section .widget {
        background: transparent !important;
        background-color: transparent !important;
        border: none !important;
        box-shadow: none !important;
        padding: 0 !important;
    }
}

/* ================================================
   Suar Slider Widget (Highlight)
   ================================================ */
.suar-slider-container {
    margin-bottom: 30px;
    position: relative;
    background: var(--bg-card);
    padding: 20px;
    border-radius: 16px;
    border: 1px solid var(--border-color);
    overflow: hidden;
}

/* Main Slider */
.suar-main-slider {
    position: relative;
    width: 100%;
    /* Keep aspect ratio 16:9 roughly or fixed height */
    height: 400px;
    overflow: hidden;
    border-radius: 8px;
    background: #000;
    margin-bottom: 15px;
}

.suar-slide-item {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
    z-index: 1;
    pointer-events: none;
    /* Prevent clicking hidden slides */
}

.suar-slide-item.active {
    opacity: 1;
    z-index: 2;
    pointer-events: auto;
}

.slide-image {
    width: 100%;
    height: 100%;
    position: relative;
}

.slide-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.slide-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 70%;
    /* Gradient height */
    background: linear-gradient(to top, rgba(0, 0, 0, 0.95), transparent);
}

.slide-content {
    position: absolute;
    bottom: 30px;
    left: 30px;
    right: 30px;
    color: #fff;
    z-index: 3;
}

.slide-category {
    background: var(--primary-color);
    color: #fff;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    border-radius: 3px;
    display: inline-block;
    margin-bottom: 10px;
}

.slide-title {
    font-size: 28px;
    font-weight: 800;
    margin: 0 0 10px 0;
    line-height: 1.3;
}

.slide-title a {
    color: #fff;
    text-decoration: none;
}

.slide-title a:hover {
    color: #f0f0f0;
}

.slide-meta {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.8);
}

/* Navigation Buttons */
.slider-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    transition: all 0.3s;
}

.slider-nav:hover {
    background: var(--primary-color);
}

.slider-nav.prev {
    left: 15px;
}

.slider-nav.next {
    right: 15px;
}

/* Thumbnails */
.suar-slider-thumbs {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    padding: 0 10px;
    /* Safe padding */
}

.thumb-item {
    cursor: pointer;
    transition: all 0.3s;
    opacity: 0.6;
}

.thumb-item.active,
.thumb-item:hover {
    opacity: 1;
}

.thumb-image {
    height: 80px;
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 8px;
    position: relative;
}

.thumb-item.active .thumb-image {
    /* Optional: highlight border */
    box-shadow: 0 0 0 2px var(--primary-color);
}

.thumb-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.thumb-title {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    margin: 0;
    color: var(--text-dark);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Thumbnail Link Styling */
.thumb-link {
    display: block;
    text-decoration: none;
    color: inherit;
}

.thumb-link:hover .thumb-title {
    color: var(--primary-color);
}

.thumb-link:hover .thumb-image img {
    transform: scale(1.05);
}

.thumb-image img {
    transition: transform 0.3s ease;
}

/* Responsive Slider */
@media (max-width: 768px) {
    .suar-main-slider {
        height: 250px;
    }

    .slide-title {
        font-size: 18px;
    }

    .slide-content {
        bottom: 20px;
        left: 20px;
        right: 20px;
    }

    .suar-slider-thumbs {
        /* Horizontal scroll on mobile */
        grid-template-columns: none;
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        padding-bottom: 10px;
        gap: 10px;
    }

    .thumb-item {
        flex: 0 0 140px;
        scroll-snap-align: start;
        opacity: 1;
        /* Always visible on mobile */
    }

    .thumb-image {
        height: 90px;
    }
}

/* ================================================
   Global Mobile Responsive Fixes (Widget Prevention)
   ================================================ */
@media (max-width: 600px) {

    /* Prevent horizontal overflow general */
    body,
    html {
        overflow-x: hidden;
    }

    img {
        max-width: 100%;
        height: auto;
    }

    /* Force consistent layout for Recent & Popular Widgets */
    .suar-recent-grid {
        display: flex;
        /* Flex container for list */
        flex-direction: column;
        gap: 15px;
    }

    .suar-recent-item {
        display: flex;
        flex-direction: row;
        /* Ensure row layout */
        align-items: flex-start;
        /* Align top for better text flow, or center? */
        gap: 15px;
        width: 100%;
    }

    .suar-recent-item .suar-recent-thumb {
        flex: 0 0 90px;
        /* Fixed width for container */
        width: 90px;
        height: 70px;
        /* Fixed height */
        border-radius: 4px;
        overflow: hidden;
        position: relative;
    }

    .suar-recent-item .suar-recent-thumb img,
    .suar-recent-item .suar-recent-thumb .no-thumb {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover;
        display: block;
    }

    .suar-recent-item .suar-recent-thumb .no-thumb {
        background-color: #eee;
        /* Fallback color */
    }

    .suar-recent-title {
        font-size: 14px;
        line-height: 1.4;
        margin: 0;
        /* consistent margin */
        flex-grow: 1;
        /* Take remaining space */
        align-self: center;
        /* Center text vertically with image */
    }

    /* Popular Posts Widget might use diff class? No, checked functions.php, it uses same structure. */
    .suar-popular-item {
        /* If popular widget uses this class, ensure same logic */
        display: flex;
        flex-direction: row;
        gap: 15px;
        align-items: center;
        margin-bottom: 15px;
    }

    /* Ensure no double padding/margins */
    .widget ul,
    .widget ol {
        margin: 0;
        padding: 0;
    }

    .suar-popular-number {
        font-size: 24px;
        line-height: 1;
    }

    /* Category Layout Widget - 1 Column */
    .suar-cat-layout {
        display: grid;
        grid-template-columns: 1fr !important;
        gap: 20px;
    }

    .suar-cat-main {
        margin-bottom: 15px;
    }

    .cat-main-title {
        font-size: 18px;
    }

    /* Sidebar General */
    #secondary {
        padding: 0 15px;
    }

    .widget {
        margin-bottom: 30px;
        width: 100%;
        overflow: hidden;
        /* Prevent internal overflow */
    }

    /* Breaking News Ticker width fix */
    .breaking-news-wrapper {
        width: 100%;
        overflow: hidden;
    }
}

/* ================================================
   Related Posts Section - Al Jazeera Style
   ================================================ */
.related-posts.widget-style {
    background-color: var(--bg-card);
    padding: 25px;
    margin-top: 30px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.related-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    border-bottom: 2px solid var(--primary-color);
    padding-bottom: 10px;
}

.related-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-dark);
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.scroll-instruction {
    font-size: 12px;
    color: var(--text-gray);
    display: none;
}

.related-scroll-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.related-card {
    background-color: transparent;
    border-radius: 0;
    overflow: hidden;
    transition: transform 0.3s ease;
}

.related-card:hover {
    transform: translateY(-3px);
}

.related-link {
    display: block;
    text-decoration: none;
    color: inherit;
}

.related-image-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 3/4;
    overflow: hidden;
    border-radius: 6px;
    background-color: var(--bg-light);
}

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

.related-card:hover .related-image-wrapper img {
    transform: scale(1.05);
}

.related-card-title {
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--text-dark);
    margin: 12px 0 0 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.related-link:hover .related-card-title {
    color: var(--primary-color);
}

/* Dark Mode for Related Posts */
body.dark-mode .related-posts.widget-style,
html.dark-mode .related-posts.widget-style {
    background-color: #1e1e1e !important;
}

body.dark-mode .related-title,
html.dark-mode .related-title {
    color: #e5e5e5 !important;
}

body.dark-mode .related-card-title,
html.dark-mode .related-card-title {
    color: #e5e5e5 !important;
}

body.dark-mode .related-link:hover .related-card-title,
html.dark-mode .related-link:hover .related-card-title {
    color: #DC143C !important;
}

body.dark-mode .related-image-wrapper,
html.dark-mode .related-image-wrapper {
    background-color: #333333 !important;
}

/* Tablet - 3 columns */
@media (max-width: 992px) {
    .related-scroll-container {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Mobile - Horizontal Scroll */
@media (max-width: 768px) {
    .related-posts.widget-style {
        padding: 15px;
        margin-top: 20px;
        border-radius: 0;
    }

    .related-header {
        margin-bottom: 15px;
    }

    .related-title {
        font-size: 16px;
    }

    .scroll-instruction {
        display: block;
    }

    .related-scroll-container {
        display: flex;
        overflow-x: auto;
        overflow-y: hidden;
        gap: 15px;
        padding-bottom: 10px;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .related-scroll-container::-webkit-scrollbar {
        display: none;
    }

    .related-card {
        flex: 0 0 140px;
        min-width: 140px;
        scroll-snap-align: start;
    }

    .related-image-wrapper {
        aspect-ratio: 3/4;
    }

    .related-card-title {
        font-size: 13px;
        margin-top: 8px;
        -webkit-line-clamp: 2;
        line-clamp: 2;
    }
}

/* Very small mobile */
@media (max-width: 480px) {
    .related-card {
        flex: 0 0 120px;
        min-width: 120px;
    }

    .related-card-title {
        font-size: 12px;
    }
}

/* ================================================
   Desktop/Mobile View Toggle Button (in footer)
   ================================================ */
.desktop-toggle-wrapper {
    display: none;
    /* Hidden by default (desktop) */
    text-align: center;
    padding: 20px 0 5px;
}

/* Only show on mobile screens */
@media (max-width: 768px) {
    .desktop-toggle-wrapper {
        display: block;
    }

    .desktop-view-toggle {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 10px 20px;
        border: none;
        border-radius: 50px;
        background: linear-gradient(135deg, var(--secondary-color), #2d4ea3);
        color: #ffffff;
        font-size: 13px;
        font-weight: 600;
        cursor: pointer;
        box-shadow: 0 4px 15px rgba(30, 58, 138, 0.4);
        transition: all 0.3s ease;
        white-space: nowrap;
        font-family: inherit;
    }

    .desktop-view-toggle:hover,
    .desktop-view-toggle:active {
        transform: scale(1.05);
        box-shadow: 0 6px 20px rgba(30, 58, 138, 0.5);
    }

    .desktop-view-toggle .toggle-icon {
        font-size: 16px;
        line-height: 1;
    }

    /* Active state: switch back to mobile */
    .desktop-view-toggle.is-desktop {
        background: linear-gradient(135deg, var(--primary-color), #e63956);
        box-shadow: 0 4px 15px rgba(220, 20, 60, 0.4);
    }

    .desktop-view-toggle.is-desktop:hover,
    .desktop-view-toggle.is-desktop:active {
        box-shadow: 0 6px 20px rgba(220, 20, 60, 0.5);
    }

    /* Dark mode support */
    body.dark-mode .desktop-view-toggle {
        background: linear-gradient(135deg, #2d4ea3, #3b5fc0);
        box-shadow: 0 4px 15px rgba(45, 78, 163, 0.5);
    }

    body.dark-mode .desktop-view-toggle.is-desktop {
        background: linear-gradient(135deg, #b91032, #DC143C);
        box-shadow: 0 4px 15px rgba(185, 16, 50, 0.5);
    }
}

/* When in force-desktop mode, ensure toggle is still visible and clickable */
html.force-desktop .desktop-toggle-wrapper {
    display: block;
    text-align: center;
    padding: 20px 0 5px;
}

html.force-desktop .desktop-view-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border: none;
    border-radius: 50px;
    background: linear-gradient(135deg, var(--primary-color), #e63956);
    color: #ffffff;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(220, 20, 60, 0.4);
    transition: all 0.3s ease;
    white-space: nowrap;
    font-family: inherit;
}

html.force-desktop .desktop-view-toggle:hover,
html.force-desktop .desktop-view-toggle:active {
    transform: scale(1.05);
    box-shadow: 0 6px 20px rgba(220, 20, 60, 0.5);
}

html.force-desktop .desktop-view-toggle .toggle-icon {
    font-size: 16px;
    line-height: 1;
}