/**
 * Percetakan Wisuda Theme - Optimized CSS
 * Version: 1.0.0 by Wisuda Research
 * Mobile-First Sticky Header with Enhanced UX
 */

:root{--color-primary:#d4ff00;--color-primary-dark:#b8db00;--color-white:#fff;--color-text:#333;--color-text-light:#666;--color-border:#ddd;--color-background:#f5f5f5;--container-max:1200px;--spacing:20px;--font-base:Arial,sans-serif;--font-size:14px}

*{margin:0;padding:0;box-sizing:border-box}

body{font-family:var(--font-base);font-size:var(--font-size);line-height:1.6;color:var(--color-text);background:var(--color-background)}

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

a{color:var(--color-text);text-decoration:none;transition:color .2s}

a:hover{color:var(--color-primary-dark)}

/* ===========================
   STICKY HEADER WRAPPER
   Contains: Header only (Banner & Nav are unsticky)
   =========================== */

.sticky-header-wrapper{position:sticky;top:0;left:0;right:0;z-index:9999;background:var(--color-white)}

.sticky-header-wrapper.has-shadow{box-shadow:0 2px 10px rgba(0,0,0,.1)}

/* Banner unsticky on desktop */
.header-banner{position:relative}

/* ===========================
   TOP HEADER BAR
   =========================== */

.site-header{background:var(--color-white);border-bottom:1px solid var(--color-border);position:relative}

.header-inner{max-width:var(--container-max);margin:0 auto;padding:10px var(--spacing);display:flex;align-items:center;justify-content:space-between;gap:15px}

/* Menu Toggle / Hamburger - ALWAYS VISIBLE */
.menu-toggle{display:flex !important;flex-direction:column;align-items:center;justify-content:center;background:none;border:none;cursor:pointer;padding:8px;z-index:1002;width:40px;height:40px;flex-shrink:0}

.hamburger{display:flex !important;flex-direction:column;width:24px;gap:5px}

.hamburger span{display:block !important;height:3px;width:100%;background:var(--color-text);border-radius:2px;transition:transform .3s,opacity .3s}

.menu-toggle[aria-expanded="true"] .hamburger span:nth-child(1){transform:translateY(8px) rotate(45deg)}

.menu-toggle[aria-expanded="true"] .hamburger span:nth-child(2){opacity:0}

.menu-toggle[aria-expanded="true"] .hamburger span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

/* Site Branding / Logo */
.site-branding{flex:1;display:flex;justify-content:center;align-items:center}

.site-branding a{display:flex;align-items:center}

.site-branding img,.site-logo-img,.custom-logo{max-height:50px;width:auto;object-fit:contain}

.site-logo-link{display:flex;align-items:center}

/* Header Search */
.header-search{display:flex;align-items:center;flex-shrink:0}

.header-search form{display:flex;align-items:center;background:var(--color-white);border:1px solid var(--color-border);border-radius:4px;overflow:hidden}

.header-search input[type="search"]{padding:8px 12px;border:none;width:180px;font-size:14px;outline:none}

.header-search input[type="search"]:focus{outline:none}

.header-search button{padding:8px 12px;border:none;background:var(--color-primary);cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--color-text)}

.header-search button:hover{background:var(--color-primary-dark)}

.header-search button svg{width:20px;height:20px}

/* Mobile Navigation - Hidden by default, shown on toggle */
.mobile-navigation{display:block;position:absolute;top:100%;left:0;right:0;width:100%;background:var(--color-white);max-height:0;overflow:hidden;transition:max-height .3s ease;box-shadow:0 4px 10px rgba(0,0,0,.15);z-index:1001}

.mobile-navigation.active{max-height:500px;overflow-y:auto}

.mobile-nav-menu{list-style:none;padding:0;margin:0}

.mobile-nav-menu li{border-bottom:1px solid var(--color-border)}

.mobile-nav-menu li:last-child{border-bottom:none}

.mobile-nav-menu a{display:block;padding:15px 20px;font-weight:600;color:var(--color-text)}

.mobile-nav-menu a:hover{background:var(--color-background)}

/* ===========================
   BANNER WRAPPERS - Desktop shows banner outside sticky, mobile shows inside
   =========================== */

/* Desktop: show banner outside sticky wrapper, hide the one inside */
.banner-wrapper-desktop{display:block;margin-top:var(--spacing)}
.banner-wrapper-mobile{display:none}

/* ===========================
   BANNER (Normal flow on desktop, inside sticky on mobile)
   =========================== */

.header-banner{background:var(--color-background);width:100%;line-height:0}

.header-banner-inner{max-width:var(--container-max);margin:0 auto;padding:0 var(--spacing);line-height:0}

.header-banner-link{display:block;line-height:0}

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

/* AdSense banner specific styles */
.header-banner-adsense .header-banner-inner{line-height:normal;display:flex;justify-content:center;align-items:center;min-height:90px}

/* Visibility control for AdSense */
.banner-desktop-only{display:block}
.banner-mobile-only{display:none}

/* ===========================
   MAIN NAVIGATION (Desktop Only)
   =========================== */

.main-navigation{background:var(--color-primary);display:block;position:relative;z-index:1}

.nav-container{max-width:var(--container-max);margin:0 auto;display:flex;justify-content:center;align-items:center;position:relative}

.nav-menu{list-style:none;display:flex;margin:0;padding:0}

.nav-menu li{border-right:1px solid var(--color-primary-dark)}

.nav-menu li:last-child{border-right:none}

.nav-menu a{display:block;padding:12px 25px;font-weight:700;color:var(--color-text)}

.nav-menu a:hover{background:var(--color-primary-dark)}

/* ===========================
   BODY PADDING FOR STICKY HEADER
   =========================== */

body{padding-top:0}

body.has-sticky-header{padding-top:0}

/* ===========================
   CONTENT LAYOUT
   =========================== */

.site-content{max-width:var(--container-max);margin:0 auto;padding:var(--spacing)}

.content-wrapper{display:grid;grid-template-columns:2fr 1fr;gap:var(--spacing);width:100%;max-width:100%}

.main-content{display:flex;flex-direction:column;gap:var(--spacing)}

/* ===========================
   POST STYLES
   =========================== */

.post{background:var(--color-white);padding:var(--spacing);border:1px solid var(--color-border);border-radius:5px}

.post-category{display:inline-block;background:var(--color-border);padding:3px 10px;font-size:12px;border-radius:3px;margin-bottom:10px}

.post-title{font-size:20px;margin:10px 0;font-weight:700}

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

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

.post-excerpt{margin:15px 0;line-height:1.7}

.read-more{color:#c06c84;font-weight:700;margin-left:5px}

.post-meta{color:var(--color-text-light);font-size:13px;margin-top:10px}

/* ===========================
   SIDEBAR STYLES
   =========================== */

.sidebar{display:flex;flex-direction:column;gap:var(--spacing)}

.widget{background:var(--color-white);padding:var(--spacing);border:1px solid var(--color-border);border-radius:5px}

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

.widget ul{list-style:none}

.widget li{padding:8px 0;border-bottom:1px solid var(--color-border)}

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

.widget a{color:var(--color-text)}

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

/* ===========================
   SEARCH FORM (Widget)
   =========================== */

.sidebar .search-form{display:flex}

.sidebar .search-form input[type="search"]{flex:1;padding:8px 12px;border:1px solid var(--color-border);border-radius:3px 0 0 3px}

.sidebar .search-form button{padding:8px 15px;background:var(--color-primary);border:none;border-radius:0 3px 3px 0;cursor:pointer;font-weight:700}

/* ===========================
   PAGINATION
   =========================== */

.pagination{margin-top:var(--spacing);text-align:center}

.pagination .nav-links{display:flex;justify-content:center;gap:5px;flex-wrap:wrap}

.pagination .page-numbers{display:inline-block;padding:8px 15px;background:var(--color-white);border:1px solid var(--color-border);border-radius:3px}

.pagination .current{background:var(--color-primary);border-color:var(--color-primary)}

/* ===========================
   404 & NO POSTS
   =========================== */

.no-posts{background:var(--color-white);padding:40px;text-align:center;border:1px solid var(--color-border);border-radius:5px}

.no-posts h2{margin-bottom:10px;color:var(--color-text)}

.no-posts p{color:var(--color-text-light)}

.error-404{background:var(--color-white);padding:40px;text-align:center;border:1px solid var(--color-border);border-radius:5px}

.error-404 h1{font-size:72px;color:var(--color-primary-dark);margin-bottom:10px}

.error-404 h2{margin-bottom:20px}

.error-404 p{color:var(--color-text-light);margin-bottom:20px}

.error-404 a{display:inline-block;padding:10px 25px;background:var(--color-primary);border-radius:5px;font-weight:700}

/* ===========================
   FOOTER
   =========================== */

.site-footer{background:var(--color-text);color:var(--color-white);padding:var(--spacing);text-align:center;margin-top:var(--spacing)}

.footer-content{max-width:var(--container-max);margin:0 auto}

.footer-content p{margin-bottom:10px}

.footer-pages-menu{margin-top:15px;padding-top:15px;border-top:1px solid rgba(255,255,255,.2);font-size:13px;line-height:1.8}

.footer-pages-menu a{color:var(--color-white);text-decoration:none;transition:color .3s,text-decoration .3s;white-space:nowrap}

.footer-pages-menu a:hover{color:var(--color-primary);text-decoration:underline}

/* ===========================
   BACK TO TOP
   =========================== */

#back-to-top{position:fixed;bottom:30px;right:30px;width:50px;height:50px;background:var(--color-primary);border:none;border-radius:50%;font-size:24px;cursor:pointer;opacity:0;visibility:hidden;transition:all .3s;z-index:9999;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 10px rgba(0,0,0,.2)}

#back-to-top.visible{opacity:1;visibility:visible}

#back-to-top:hover{background:var(--color-primary-dark);transform:translateY(-3px)}

/* ===========================
   SINGLE POST
   =========================== */

.single-post .post-content{line-height:1.8}

.single-post .post-content p{margin-bottom:20px}

.single-post .post-content h2,.single-post .post-content h3,.single-post .post-content h4{margin:30px 0 15px}

.single-post .post-content ul,.single-post .post-content ol{margin:15px 0;padding-left:30px}

.single-post .post-content li{margin-bottom:8px}

.single-post .post-content img{margin:20px auto;border-radius:5px}

.single-post .post-content blockquote{border-left:4px solid var(--color-primary);padding:15px 20px;margin:20px 0;background:var(--color-background);font-style:italic}

.post-navigation{margin-top:30px;padding-top:20px;border-top:1px solid var(--color-border);display:flex;justify-content:space-between}

.post-navigation a{color:var(--color-primary-dark);font-weight:700}

/* ===========================
   ARCHIVE
   =========================== */

.archive-header{background:var(--color-white);padding:var(--spacing);margin-bottom:var(--spacing);border:1px solid var(--color-border);border-radius:5px}

.archive-title{font-size:24px;margin-bottom:5px}

.archive-description{color:var(--color-text-light)}

/* ===========================
   SEARCH HEADER
   =========================== */

.search-header{background:var(--color-white);padding:var(--spacing);margin-bottom:var(--spacing);border:1px solid var(--color-border);border-radius:5px}

.search-title{font-size:24px}

.search-title span{color:var(--color-primary-dark)}

/* ===========================
   NO RESULTS
   =========================== */

.no-results{background:var(--color-white);padding:40px;text-align:center;border:1px solid var(--color-border);border-radius:5px}

.no-results h2{margin-bottom:15px}

.no-results p{color:var(--color-text-light);margin-bottom:20px}

.no-results .search-form{max-width:400px;margin:0 auto}

/* ===========================
   RESPONSIVE - TABLET
   =========================== */

@media(max-width:992px){
.header-search input[type="search"]{width:150px}
.content-wrapper{grid-template-columns:1fr}
.nav-menu a{padding:12px 18px}
}

/* ===========================
   RESPONSIVE - MOBILE (768px and below)
   =========================== */

@media(max-width:768px){
/* Sticky wrapper for mobile - header + banner stay sticky, nav is hidden */
.sticky-header-wrapper{position:fixed;top:0;left:0;right:0;z-index:1000;background:var(--color-white);transform:translateY(0) !important;opacity:1 !important}

.site-header{background:var(--color-white)}

/* Mobile: show banner inside sticky wrapper, hide desktop banner */
.banner-wrapper-desktop{display:none}
.banner-wrapper-mobile{display:block}

/* Banner sticky on mobile */
.header-banner{position:relative;background:var(--color-background);margin-top:15px}

/* Banner padding same as site-content on mobile */
.header-banner-inner{padding:0 10px}

/* Visibility control for AdSense on mobile */
.banner-desktop-only{display:none}
.banner-mobile-only{display:block}

.header-inner{padding:8px 10px}

.menu-toggle{width:36px;height:36px;padding:6px}

.hamburger{width:22px;gap:4px}

.hamburger span{height:2px}

.site-branding img,.site-logo-img,.custom-logo{max-height:40px}

.header-search input[type="search"]{width:120px;padding:6px 10px;font-size:13px}

.header-search button{padding:6px 10px}

.header-search button svg{width:18px;height:18px}

/* Hide desktop navigation on mobile */
.main-navigation{display:none !important}

/* Mobile navigation styles */
.mobile-navigation{display:block;position:fixed;top:auto;background:var(--color-white)}

/* Add body padding to prevent content from hiding under sticky header */
body{padding-top:140px;overflow-x:hidden;width:100%}

.site-content{padding:15px 10px}

.content-wrapper{grid-template-columns:1fr;gap:15px}

.main-content,.sidebar{width:100%;max-width:100%;gap:15px}

.post{padding:15px;width:100%;max-width:100%}

.post-title{font-size:18px;line-height:1.4}

.widget{padding:15px}

.widget-title{font-size:16px}

#back-to-top{bottom:20px;right:15px;width:45px;height:45px;font-size:20px}

/* Footer pages menu responsive */
.footer-pages-menu{font-size:12px;line-height:2}

.footer-pages-menu a{display:inline-block;padding:2px 0}

html{overflow-x:hidden;width:100%}

img,iframe,video,embed,object{max-width:100%!important;height:auto!important}

p,li,div,span,a{overflow-wrap:break-word!important;word-wrap:break-word!important;word-break:break-word!important}
}

/* ===========================
   RESPONSIVE - SMALL MOBILE
   =========================== */

@media(max-width:480px){
.header-inner{gap:8px}

.header-search input[type="search"]{width:80px;padding:5px 8px;font-size:12px}

.header-search button{padding:5px 8px}

.site-branding img,.site-logo-img,.custom-logo{max-height:35px}

/* Adjust body padding for smaller header */
body{padding-top:130px}

.site-content{padding:10px}

.post,.widget{padding:12px}

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

#back-to-top{bottom:15px;right:10px;width:40px;height:40px;font-size:18px}
}

/* ===========================
   UTILITIES
   =========================== */

.screen-reader-text{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.clearfix::after{content:"";display:table;clear:both}