/*!
Theme Name: Poltekkes_custom
Theme URI: http://underscores.me/
Author: Underscores.me
Author URI: http://underscores.me/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: poltekkes_custom
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

Poltekkes_custom is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

:root {
    /* Identitas Visual Kemenkes */
    --kemenkes-green: #006753; /* Hijau Deep Profesional */
    --kemenkes-accent: #00A79D; /* Hijau Toska Aksen */
    --text-light: #ffffff;
    --text-dark: #333333;
    --bg-body: #f4f4f4; /* Latar belakang konten agar tidak melelahkan mata */
    
    /* Tipografi */
    --font-primary: 'Arial', 'Helvetica', sans-serif;
}

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Generic
# Base
# Layouts Responsif & Master Box (Container)
# Components
# Navigation
# Dashboard Styles
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Generic & Normalize
--------------------------------------------------------------*/
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
html { line-height: 1.15; -webkit-text-size-adjust: 100%; box-sizing: border-box; }
*, *::before, *::after { box-sizing: inherit; }
body { margin: 0; }
main { display: block; }
h1 { font-size: 2em; margin: 0.67em 0; }
hr { box-sizing: content-box; height: 0; overflow: visible; }
pre, code, kbd, samp { font-family: monospace, monospace; font-size: 1em; }
a { background-color: transparent; }
abbr[title] { border-bottom: none; text-decoration: underline; text-decoration: underline dotted; }
b, strong { font-weight: bolder; }
small { font-size: 80%; }
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sub { bottom: -0.25em; }
sup { top: -0.5em; }
img { border-style: none; height: auto; max-width: 100%; }
button, input, optgroup, select, textarea { font-family: inherit; font-size: 100%; line-height: 1.15; margin: 0; }
button, input { overflow: visible; }
button, select { text-transform: none; }
button, [type="button"], [type="reset"], [type="submit"] { -webkit-appearance: button; }
button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner { border-style: none; padding: 0; }
button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring { outline: 1px dotted ButtonText; }
fieldset { padding: 0.35em 0.75em 0.625em; }
legend { box-sizing: border-box; color: inherit; display: table; max-width: 100%; padding: 0; white-space: normal; }
progress { vertical-align: baseline; }
textarea { overflow: auto; width: 100%; }
[type="checkbox"], [type="radio"] { box-sizing: border-box; padding: 0; }
[type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button { height: auto; }
[type="search"] { -webkit-appearance: textfield; outline-offset: -2px; }
[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }
::-webkit-file-upload-button { -webkit-appearance: button; font: inherit; }
details { display: block; }
summary { display: list-item; }
template, [hidden], .updated:not(.published) { display: none; }

/*--------------------------------------------------------------
# Base (Typography & Elements)
--------------------------------------------------------------*/
body, button, input, select, optgroup, textarea {
    color: var(--text-dark);
    font-family: var(--font-primary);
    font-size: 1rem;
    line-height: 1.6;
}

body { background-color: var(--bg-body); }

h1, h2, h3, h4, h5, h6 { clear: both; }

h1, h2, h3 {
    color: var(--kemenkes-green);
    border-left: 5px solid var(--kemenkes-accent);
    padding-left: 15px;
    margin-bottom: 1.5rem;
}

p { margin-bottom: 1.5em; }
dfn, cite, em, i { font-style: italic; }
blockquote { margin: 0 1.5em; }
address { margin: 0 0 1.5em; }

a { color: var(--kemenkes-green); text-decoration: none; }
a:visited { color: var(--kemenkes-green); }
a:hover, a:focus, a:active { color: var(--kemenkes-accent); outline: 0; }

table { margin: 0 0 1.5em; width: 100%; }

/*--------------------------------------------------------------
# Layouts Responsif & Master Box (Container)
--------------------------------------------------------------*/
/* --- HEADER --- */
.site-header {
    background-color: var(--kemenkes-green);
    color: var(--text-light);
    padding: 1rem max(5%, calc((100% - 1200px) / 2));
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 4px solid var(--kemenkes-accent);
}

/* --- WADAH UTAMA KONTEN (BOX) --- */
.site-main {
    max-width: 1200px;
    width: 90%; 
    margin: 3rem auto; 
    padding: 3rem 4rem; 
    background-color: #ffffff; 
    border-radius: 12px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.04); 
    box-sizing: border-box; 
}

.site-main p, .site-main ul, .site-main ol {
    margin-bottom: 1.5rem;
    line-height: 1.8;
    color: #444; 
}

/* --- FOOTER --- */
.site-footer {
    background-color: var(--kemenkes-green);
    color: var(--text-light);
    text-align: center;
    padding: 2rem max(5%, calc((100% - 1200px) / 2));
    margin-top: 4rem;
}

.site-footer a { color: var(--kemenkes-accent); }

/* --- RESPONSIVITAS HP & TABLET --- */
@media screen and (max-width: 768px) {
    .site-main {
        width: 95%; 
        margin: 1.5rem auto;
        padding: 1.5rem; 
    }
    .site-header {
        flex-direction: column;
        gap: 15px;
        padding-top: 1.5rem;
        padding-bottom: 1.5rem;
    }
}

/*--------------------------------------------------------------
# Navigation
--------------------------------------------------------------*/
.main-navigation {
    display: block;
    width: auto;
}

.main-navigation ul {
    display: none;
    list-style: none;
    margin: 0;
    padding-left: 0;
}

/* Tampilan Menu Desktop */
@media screen and (min-width: 37.5em) {
    .menu-toggle { display: none; }
    
    .main-navigation ul {
        display: flex;
        gap: 25px; 
        justify-content: flex-end;
        align-items: center;
    }
    
    .main-navigation a {
        color: var(--text-light);
        font-size: 0.95rem;
        font-weight: 500;
        transition: opacity 0.3s;
    }

    .main-navigation a:hover { opacity: 0.8; }
}

/* --- Penyesuaian Ukuran Logo --- */
.custom-logo {
    max-height: 60px; 
    width: auto;
    object-fit: contain;
}

/* --- Styling Sub-Menu (Dropdown) --- */
.main-navigation ul li { position: relative; }

.main-navigation ul ul {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #ffffff; 
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    min-width: 200px;
    z-index: 999;
    border-radius: 4px;
    padding: 10px 0;
    border-top: 3px solid var(--kemenkes-accent);
}

.main-navigation ul li:hover > ul {
    display: block;
    flex-direction: column;
}

.main-navigation ul ul a {
    color: var(--text-dark) !important;
    padding: 10px 20px;
    font-size: 0.9rem;
    display: block;
    width: 100%;
}

.main-navigation ul ul a:hover {
    background-color: var(--bg-body);
    color: var(--kemenkes-green) !important;
    opacity: 1;
}

.main-navigation i { margin-right: 5px; }

/* --- Penyesuaian Sub-Menu untuk Layar HP --- */
@media screen and (max-width: 768px) {
    .main-navigation ul ul {
        display: block !important; 
        position: relative;
        top: 0;
        box-shadow: none;
        border-top: none;
        background-color: transparent;
        padding-left: 20px;
        margin-top: 5px;
        margin-bottom: 15px;
        border-left: 2px solid var(--kemenkes-accent);
    }

    .main-navigation ul ul a {
        padding: 8px 10px;
        font-size: 0.85rem;
        color: var(--text-light) !important;
    }
    
    .main-navigation ul ul a:hover {
        background-color: transparent;
        color: var(--kemenkes-accent) !important;
    }
}

/*--------------------------------------------------------------
# Dashboard Styles (KPI, Tabel & Widgets)
--------------------------------------------------------------*/
.dashboard-header {
    margin-bottom: 2rem;
    border-bottom: 2px solid var(--bg-body);
    padding-bottom: 1rem;
}

.dashboard-header h2 {
    margin-bottom: 0.5rem;
    border-left: none;
    padding-left: 0;
}

.dashboard-header p { color: #666; margin: 0; }

.dashboard-section {
    background: #fdfdfd;
    padding: 1.5rem;
    border-radius: 8px;
    border: 1px solid #eaeaea;
    margin-bottom: 2rem;
}

/* Grid KPI */
.kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
    margin-bottom: 2.5rem;
}

.kpi-card {
    display: flex;
    align-items: center;
    background: #fff;
    padding: 1.5rem;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    border: 1px solid #eee;
    border-left: 5px solid var(--text-dark);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

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

.kpi-icon { font-size: 2.5rem; margin-right: 1.2rem; opacity: 0.8; }

.kpi-data h3 {
    font-size: 0.9rem;
    color: #666;
    margin: 0 0 5px 0;
    border: none;
    padding: 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.kpi-value { font-size: 1.8rem; font-weight: bold; margin: 0; color: var(--text-dark); line-height: 1; }

.card-green { border-left-color: var(--kemenkes-green); }
.card-green .kpi-icon { color: var(--kemenkes-green); }
.card-blue { border-left-color: #2980b9; }
.card-blue .kpi-icon { color: #2980b9; }
.card-red { border-left-color: #e74c3c; }
.card-red .kpi-icon { color: #e74c3c; }
.card-yellow { border-left-color: #f39c12; }
.card-yellow .kpi-icon { color: #f39c12; }

/* Styling Tabel Kemenkes */
.table-responsive { overflow-x: auto; width: 100%; }
.kemenkes-table { width: 100%; border-collapse: collapse; margin-top: 15px; font-size: 0.95rem; }
.kemenkes-table th, .kemenkes-table td { border: 1px solid #ddd; padding: 12px 15px; text-align: left; }
.kemenkes-table th {
    background-color: var(--kemenkes-green);
    color: var(--text-light);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 0.5px;
}
.kemenkes-table tr:nth-child(even) { background-color: #fcfcfc; }
.kemenkes-table tr:hover { background-color: #f1f8f6; }

.badge { padding: 6px 12px; border-radius: 20px; font-size: 0.75rem; font-weight: bold; color: white; display: inline-block; text-align: center; }
.badge-success { background-color: var(--kemenkes-green); }
.badge-warning { background-color: #f39c12; color: #fff; }
.badge-danger { background-color: #e74c3c; }

/* Widgets / Akses Cepat */
.dashboard-widgets { display: grid; grid-template-columns: 1fr; gap: 25px; }
@media (min-width: 992px) { .dashboard-widgets { grid-template-columns: 1.5fr 1fr; } }
.widget-box { background: #fff; padding: 1.5rem; border-radius: 8px; border: 1px solid #eee; }
.widget-box h3 { font-size: 1.1rem; border-left: none; padding-left: 0; border-bottom: 2px solid var(--bg-body); padding-bottom: 10px; margin-top: 0; }

.action-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 15px; margin-top: 15px; }
.btn-action {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center; background: var(--bg-body); color: var(--kemenkes-green);
    padding: 1.2rem 1rem; border-radius: 8px; font-weight: 600; font-size: 0.85rem;
    transition: all 0.3s; border: 1px solid transparent; cursor: pointer;
}
.btn-action i { font-size: 1.8rem; margin-bottom: 10px; }
.btn-action:hover { background: var(--kemenkes-green); color: #fff; border-color: var(--kemenkes-green); }

/*--------------------------------------------------------------
# Dashboard Layout (Slider & Panel Kinerja)
--------------------------------------------------------------*/

/* Main wrapper tetap bersih tanpa padding berlebih agar box di dalamnya terlihat jelas */
.site-main {
    max-width: 1200px;
    margin: 2rem auto;
    padding: 0; /* Padding diatur di dalam box masing-masing */
    background: transparent; /* Membuat kontainer utama tidak terlihat */
    box-shadow: none;
}

/* BOX 1: Slider Box */
.dashboard-slider-box {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,0,0,0.05);
    margin-bottom: 2rem; /* Jarak antar box */
    border: 1px solid #eaeaea;
}

/* Mengatur Slider agar pas 1200x400 */
.campaignSwiper {
    width: 100%;
    aspect-ratio: 1200 / 400; /* Mengunci rasio agar gambar tidak terpotong */
    height: auto;
}

.slide-content img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Memastikan gambar memenuhi area tanpa distorsi */
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

.slide-text {
    position: relative;
    z-index: 2;
    padding: 4rem;
    color: #fff;
    background: linear-gradient(to right, rgba(0,0,0,0.7) 30%, transparent);
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* BOX 2: Performance Panel Box */
.performance-panel-box {
    background: #fff;
    padding: 3rem;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.05);
    border: 1px solid #eaeaea;
}

/* Styling Section di dalam Panel */
.card-box {
    background: #fdfdfd;
    padding: 1.5rem;
    border-radius: 8px;
    border: 1px solid #f0f0f0;
}

/* Responsivitas Layar Kecil */
@media screen and (max-width: 768px) {
    .performance-panel-box {
        padding: 1.5rem;
    }
    .campaignSwiper {
        aspect-ratio: 16 / 9; /* Di HP rasionya lebih tinggi agar gambar tetap jelas */
    }
    .slide-text {
        padding: 1.5rem;
    }
}
/*--------------------------------------------------------------
# Sidebar & Widgets Area (Layout 2 Kolom)
--------------------------------------------------------------*/
#secondary.widget-area {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    margin-top: 3rem;
    margin-bottom: 3rem;
    width: 100%;
}

.widget {
    background-color: #ffffff;
    padding: 1.5rem 2rem;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.04);
    border: 1px solid #eaeaea;
    margin-bottom: 0;
}

.widget .widget-title {
    color: var(--kemenkes-green);
    font-size: 1.1rem;
    font-weight: bold;
    border-bottom: 2px solid var(--bg-body);
    padding-bottom: 10px;
    margin-bottom: 15px;
    border-left: 4px solid var(--kemenkes-accent);
    padding-left: 12px;
    margin-top: 0;
}

.widget ul { list-style: none; padding-left: 0; margin: 0; }
.widget ul li { padding: 8px 0; border-bottom: 1px dashed #eee; }
.widget ul li:last-child { border-bottom: none; }
.widget ul li a { color: #555; text-decoration: none; transition: color 0.3s ease; }
.widget ul li a:hover { color: var(--kemenkes-accent); }

@media screen and (max-width: 768px) {
    #secondary.widget-area { grid-template-columns: 1fr; gap: 20px; }
}

/*--------------------------------------------------------------
# Box Layout untuk Daftar Postingan (Archive / Blog Page)
--------------------------------------------------------------*/
.site-main article {
    background-color: #ffffff;
    padding: 2rem 2.5rem;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    border: 1px solid #eaeaea;
    margin-bottom: 2.5rem;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.site-main article:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.08);
}

.site-main article .entry-title { margin-top: 0; margin-bottom: 10px; border-left: none; padding-left: 0; }
.site-main article .entry-title a { color: var(--kemenkes-green); text-decoration: none; transition: color 0.3s ease; }
.site-main article .entry-title a:hover { color: var(--kemenkes-accent); }

.site-main article .entry-meta {
    font-size: 0.85rem;
    color: #777;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px dashed #eee;
}

.site-main article .entry-meta a { color: #555; }
.site-main article .entry-meta a:hover { color: var(--kemenkes-accent); }

.single .site-main article { margin-bottom: 0; box-shadow: none; border: none; padding: 0; background-color: transparent; }
.single .site-main article:hover { transform: none; }

@media screen and (max-width: 768px) {
    .site-main article { padding: 1.5rem; margin-bottom: 1.5rem; }
}

/*--------------------------------------------------------------
# Sistem Pelaporan (Modal Popup & Form)
--------------------------------------------------------------*/
.modal-overlay {
    display: none;
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(3px);
    align-items: center;
    justify-content: center;
}

.modal-content {
    background-color: #fff;
    border-radius: 8px;
    width: 90%;
    max-width: 500px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    animation: modalSlideIn 0.3s ease-out forwards;
}

@keyframes modalSlideIn {
    from { transform: translateY(-50px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.modal-header {
    background-color: var(--kemenkes-green);
    color: white;
    padding: 15px 20px;
    border-radius: 8px 8px 0 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-header h3 { color: white; margin: 0; border: none; padding: 0; font-size: 1.1rem; }

.close-modal {
    font-size: 1.5rem;
    font-weight: bold;
    cursor: pointer;
    transition: color 0.2s;
}
.close-modal:hover { color: var(--kemenkes-accent); }

.modal-body { padding: 20px; }
.form-group { margin-bottom: 15px; }
.form-group label { display: block; margin-bottom: 5px; font-weight: bold; color: #555; font-size: 0.9rem; }
.form-group input, .form-group select, .form-group textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-family: inherit;
    box-sizing: border-box;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
    border-color: var(--kemenkes-green);
    outline: none;
}

.btn-submit {
    width: 100%;
    background-color: var(--kemenkes-green);
    color: white;
    padding: 12px;
    border: none;
    border-radius: 4px;
    font-weight: bold;
    cursor: pointer;
    font-size: 1rem;
    transition: background 0.3s;
}
.btn-submit:hover { background-color: var(--kemenkes-accent); }

.btn-tindak {
    background: #2980b9; color: white; border: none; padding: 5px 10px; border-radius: 4px; cursor: pointer; font-size: 0.8rem;
}

/*--------------------------------------------------------------
# Utilities
--------------------------------------------------------------*/
.screen-reader-text { border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute !important; width: 1px; word-wrap: normal !important; }
.screen-reader-text:focus { background-color: #f1f1f1; border-radius: 3px; box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6); clip: auto !important; clip-path: none; color: #21759b; display: block; font-size: 0.875rem; font-weight: 700; height: auto; left: 5px; line-height: normal; padding: 15px 23px 14px; top: 5px; width: auto; z-index: 100000; }
.alignleft { float: left; margin-right: 1.5em; margin-bottom: 1.5em; }
.alignright { float: right; margin-left: 1.5em; margin-bottom: 1.5em; }
.aligncenter { clear: both; display: block; margin-left: auto; margin-right: auto; margin-bottom: 1.5em; }