/*
Theme Name: Adot Minimalis
Theme URI: https://adot.web.id
Author: Sandy Firmansyah
Author URI: https://sandy.biz.id
Description: Theme WordPress ultra-minimalis, super cepat, dan SEO-ready tanpa plugin.
Version: 11.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: adot-minimalis
Tags: blog, one-column, two-columns, right-sidebar, custom-logo, post-formats, custom-background, custom-header, editor-style, wide-blocks
Requires at least: 5.8
Tested up to: 6.5
Requires PHP: 7.4
*/

/*
Copyright 2025 Sandy Firmansyah
This theme is licensed under the GNU General Public License v2 or later.
*/

/* --- Global & Reset --- */
*, *::before, *::after { box-sizing: border-box; }
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; line-height: 1.7; color: #333; background: #fff; margin: 0; }
.container { max-width: 1100px; margin: 0 auto; padding: 0 20px; }
a { color: #30A953; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }

/* --- WordPress Core CSS Classes --- */
.screen-reader-text { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.alignleft { float: left; margin: 0.5em 1em 0.5em 0; }
.alignright { float: right; margin: 0.5em 0 0.5em 1em; }
.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.wp-caption { max-width: 100%; margin-bottom: 1.5em; }
.wp-caption-text { text-align: center; font-size: 12px; color: #777; margin: 0.5em 0; }
.gallery-caption { text-align: center; font-size: 12px; color: #777; margin: 0.5em 0; }
.sticky { background: #f5f5f5; padding: 20px; border-left: 3px solid #30A953; }
.bypostauthor > .comment-body { border-left: 2px solid #30A953; padding-left: 15px; }


/* --- Header --- */
.site-header { padding: 8px 0; position: sticky; top: 0; background-color: rgba(255, 255, 255, 0.95); backdrop-filter: blur(5px); z-index: 999; box-shadow: 0 2px 5px rgba(0,0,0,0.05); }
.header-inner { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; }
.site-branding .custom-logo { max-height: 45px; width: auto; }


/* =================================
   MOBILE FIRST LAYOUT (Default)
   ================================= */

/* --- Mobile Header Layout --- */
.site-branding, .main-navigation { order: 1; }
.header-search { order: 2; width: 100%; margin-top: 15px; }
.search-form { display: flex; width: 100%; }
.search-form label { width: 100%; }
.search-form .search-field { width: 100%; border: 1px solid #ddd; padding: 10px; border-radius: 4px; font-size: 16px; }
.search-form .search-submit { display: none; }

/* --- Mobile Navigation --- */
.menu-toggle { background: transparent; border: 1px solid #ddd; border-radius: 4px; padding: 8px; cursor: pointer; z-index: 1001; }
.hamburger-icon { display: block; position: relative; width: 22px; height: 2px; background-color: #333; }
.hamburger-icon::before, .hamburger-icon::after { content: ''; position: absolute; width: 22px; height: 2px; background-color: #333; left: 0; transition: all 0.2s ease-in-out; }
.hamburger-icon::before { top: -7px; }
.hamburger-icon::after { top: 7px; }

.main-navigation ul { list-style: none; margin: 0; padding: 0; }
.main-navigation .menu { display: none; }
.main-navigation.toggled .menu { display: block; position: absolute; top: 100%; left: 0; width: 100%; background: #fff; box-shadow: 0 5px 10px rgba(0,0,0,0.1); z-index: 1000; padding: 10px 0; border-top: 1px solid #e9e9e9; }
.main-navigation li { display: block; position: relative; }
.main-navigation a { display: flex; justify-content: space-between; align-items: center; padding: 12px 20px; color: #333; transition: color 0.2s; }
.main-navigation a:hover { color: #30A953; }
.dropdown-toggle { position: static; width: auto; height: auto; padding: 0 10px; background: transparent; border: none; cursor: pointer; }
.arrow-down { border: solid #555; border-width: 0 2px 2px 0; display: inline-block; padding: 3px; transform: rotate(45deg); transition: transform 0.2s; }
.main-navigation .menu-item-has-children.is-toggled > a .arrow-down { transform: rotate(-135deg); }
.main-navigation .sub-menu { display: none; padding-left: 0; background: #f9f9f9; }
.main-navigation .menu-item-has-children.is-toggled > .sub-menu { display: block; }
.main-navigation .sub-menu a { display: block; padding: 10px 20px 10px 30px; border-bottom: 1px solid #eee; font-size: 15px; }


/* --- Hero Section & Main Content --- */
.hero-section { background-color: #f9f9f9; padding: 40px 0; border-bottom: 1px solid #e9e9e9; }
.main-content-area { display: flex; flex-direction: column; gap: 40px; padding-top: 40px; }
.hero-grid,
.archive-grid {
    display: grid;
    gap: 20px;
    grid-template-columns: 1fr;
    margin-bottom: 40px;
}
.hero-grid-item { position: relative; display: block; overflow: hidden; border-radius: 8px; background-color: #eee; aspect-ratio: 4/3; }
.hero-grid-item img,
.post-thumbnail-list img,
.post-thumbnail-single img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}
.hero-grid-item:hover img,
.post-thumbnail-list a:hover img,
.post-thumbnail-single:hover img {
    transform: scale(1.05);
}
.hero-item-title { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 100%); color: #fff; margin: 0; padding: 30px 20px 20px; font-size: 18px; }
.post-item-list { display: flex; flex-direction: column; gap: 20px; margin-bottom: 40px; }
.post-thumbnail-list { width: 100%; border-radius: 8px; overflow: hidden; aspect-ratio: 16 / 9; }
#secondary.widget-area { width: 100%; }
.post-thumbnail-single { margin-bottom: 30px; border-radius: 8px; overflow: hidden; }

.single-post-container .post-header {
    overflow: visible;
}
.single-post-container .post-meta {
    float: none;
    text-align: left;
    margin: 20px 0;
    font-size: 12px;
    font-weight: bold;
    color: #333;
}
.single-post-container .post-meta a {
    color: #30A953;
    text-decoration: underline;
}

/* Sembunyikan item hero ke-4 dst di mobile */
.hero-grid-item:nth-child(n+4) { display: none; }

/* Styling untuk Marquee */
@keyframes marquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
.marquee-section {
    width: 100%;
    overflow: hidden;
    padding: 10px 0;
    background-color: #333;
    color: #fff;
    border-bottom: 1px solid #444;
}
.marquee-inner {
    display: flex;
    width: fit-content;
    animation: marquee 80s linear infinite;
}
.marquee-content {
    display: flex;
    white-space: nowrap;
    flex-shrink: 0;
}
.marquee-content a {
    color: #fff;
    padding: 0 15px;
    font-size: 14px;
    font-weight: 500;
}
.marquee-content a:hover {
    text-decoration: underline;
}
.marquee-content .marquee-separator {
    color: #30A953;
}


/* =================================
   DESKTOP LAYOUT
   ================================= */
@media screen and (min-width: 769px) {
    /* Header Desktop */
    .site-branding, .main-navigation { order: 1; }
    .header-search { order: 2; width: auto; margin-top: 0; }
    .header-inner { flex-wrap: nowrap; }
    .menu-toggle { display: none; }
    
    .main-navigation .menu { display: flex !important; position: static; background: none; box-shadow: none; width: auto; }
    .main-navigation .menu > li { margin-left: 10px; }
    .main-navigation .menu > li:first-child { margin-left: 0; }
    .main-navigation a { border: none; padding: 10px 15px; border-radius: 4px; }
    .main-navigation a:hover { background-color: #f5f5f5; color: #30A953; }
    .main-navigation .menu-item-has-children > a { padding-right: 40px; position: relative; }
    .main-navigation .menu-item-has-children .dropdown-toggle { display: block; position: absolute; top: 50%; right: 15px; transform: translateY(-50%); pointer-events: none; }
    .main-navigation .sub-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; min-width: 220px; border: 1px solid #eee; box-shadow: 0 4px 8px rgba(0,0,0,0.05); }
    .main-navigation li:hover > .sub-menu { display: block; }
    .main-navigation .sub-menu a { border-bottom: none; }
    .main-navigation .sub-menu a:hover { background-color: #30A953; color: #fff; }
    
    /* Content Layout Desktop */
    .main-content-area { flex-direction: row; align-items: flex-start; }
    #primary.content-area { flex: 1; }
    #secondary.widget-area { flex-basis: 300px; flex-shrink: 0; position: -webkit-sticky; position: sticky; top: 80px; }
    
    .post-item-list { flex-direction: row; align-items: center; }
    .post-thumbnail-list { width: 300px; flex-shrink: 0; aspect-ratio: 3 / 2; }
    
    .hero-grid,
    .archive-grid { grid-template-columns: repeat(2, 1fr); }
    .hero-grid-item:nth-child(n+4) { display: block; }
}

@media screen and (min-width: 992px) {
    .hero-grid,
    .archive-grid { grid-template-columns: repeat(3, 1fr); }
}

/* --- Lainnya --- */
.archive-header {
    margin-bottom: 40px;
    padding-bottom: 20px;
    border-bottom: 1px solid #e9e9e9;
}
.archive-header .page-title { font-size: 32px; }
.archive-description { color: #555; font-size: 16px; margin-top: 10px; }

.pagination { margin: 40px 0; }
.pagination .nav-links { display: flex; justify-content: center; gap: 5px; }
.page-numbers { display: block; padding: 8px 15px; border: 1px solid #ddd; border-radius: 4px; color: #333; }
.page-numbers.current, .page-numbers:hover { background-color: #30A953; color: #fff; border-color: #30A953; }

.widget { margin-bottom: 30px; }
.widget-title { font-size: 20px; margin-bottom: 15px; border-bottom: 2px solid #30A953; padding-bottom: 5px; }
.widget-area .widget a { color: #333; transition: color 0.2s; }
.widget-area .widget a:hover { color: #30A953; }

.widget ul { list-style: none; padding: 0; margin: 0; }
.widget ul li { margin-bottom: 5px; padding-bottom: 5px; border-bottom: 1px solid #f0f0f0; }
.widget ul li:last-child { border-bottom: none; margin-bottom: 0; }

.sidebar-inner { border: 1px solid #e9e9e9; padding: 20px; border-radius: 8px; }
.load-more-button { display: block; width: 100%; max-width: 300px; margin: 20px auto; padding: 12px 20px; background-color: #30A953; color: #fff; border: none; border-radius: 5px; cursor: pointer; }
.site-footer { text-align: center; margin-top: 50px; padding: 30px 20px; font-size: 14px; color: #888; border-top: 1px solid #e9e9e9; }

.post-footer {
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid #e9e9e9;
    font-size: 14px;
    color: #555;
    line-height: 1.6;
}
.post-footer > span {
    margin-right: 15px;
}
.post-footer span span {
    font-weight: bold;
    color: #333;
    margin-right: 8px;
}
.post-footer a {
    text-decoration: underline;
    text-decoration-color: #ddd;
    text-decoration-thickness: 1px;
}
.post-footer a:hover {
    text-decoration-color: #30A953;
}

.comments-area,
.comment-respond {
    margin-top: 40px;
    padding-top: 30px;
    border-top: 1px solid #e9e9e9;
}
.comments-area ol {
    list-style: none;
    padding: 0;
}
.comment-form input[type="submit"] {
    background-color: #30A953;
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 4px;
    cursor: pointer;
}