/*
Theme Name: Tasikmalaya Kabupaten
Theme URI: https://tasikmalayakab.go.id
Description: Tema resmi Pemerintah Kabupaten Tasikmalaya. Dikonversi dari Next.js frontend dengan desain modern dan responsif.
Version: 1.3.2
Author: Pemerintah Kabupaten Tasikmalaya
Author URI: https://tasikmalayakab.go.id
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: tasikmalaya
Tags: government, news, blog, custom-colors, custom-menu, featured-images, full-width-template, rtl-language-support, sticky-post, 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 with others.
*/

/* ==========================================================================
   CSS Variables - Warna dari Tailwind Config
   ========================================================================== */
:root {
    --hijau-50: #eef8f1;
    --hijau-100: #d8efe0;
    --hijau-200: #b3dfc2;
    --hijau-300: #81c99b;
    --hijau-400: #4ea970;
    --hijau-500: #2f8550;
    --hijau-600: #1f6b42;
    --hijau-700: #155832;
    --hijau-800: #0f3f24;
    --hijau-900: #092d19;
    --hijau-950: #061f12;
    --emas-400: #f5c842;
    --emas-500: #e6b020;
    --emas-600: #c49200;
    --font-heading: Georgia, serif;
    --font-body: system-ui, -apple-system, sans-serif;
}

/* ==========================================================================
   Base Styles
   ========================================================================== */
html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-body);
    color: #1f2937;
    background-color: #ffffff;
    line-height: 1.6;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-heading);
}

a {
    color: var(--hijau-600);
    text-decoration: none;
    transition: color 0.2s ease;
}

a:hover {
    color: var(--hijau-800);
}

/* ==========================================================================
   Shared navigation shell
   ========================================================================== */
.site-header a,
.site-footer a {
    color: inherit;
}

.main-navigation .sub-menu {
    border-radius: 0 0 0.5rem 0.5rem;
    min-width: 220px;
    padding: 0.25rem 0;
}

/* Keep the WordPress menu visible even if a builder or plugin resets utility classes. */
.main-navigation ul {
    margin: 0;
    list-style: none;
}

.main-navigation .menu,
.main-navigation #primary-menu {
    display: flex;
    align-items: center;
    gap: 0.125rem;
    padding: 0;
}

.main-navigation li {
    list-style: none;
}

.main-navigation li>a {
    white-space: nowrap;
}

.main-navigation .sub-menu .sub-menu {
    top: 0;
    left: 100%;
    border-radius: 0.5rem;
}

.main-navigation li:hover>.sub-menu,
.main-navigation li:focus-within>.sub-menu {
    display: block;
}

/* A nested menu belongs to its own parent item, never to the whole top-level
   dropdown. This keeps Dokumen Perencanaan and Dokumen Pelaporan independent. */
.main-navigation .sub-menu .sub-menu {
    display: none;
}

.main-navigation .sub-menu li:hover>.sub-menu,
.main-navigation .sub-menu li:focus-within>.sub-menu {
    display: block;
}

#mobile-menu .mobile-primary-menu,
#mobile-menu .menu {
    display: block;
    margin: 0;
    padding: 0;
}

#mobile-menu .menu-item-has-children>a {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

#mobile-menu a {
    display: block;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--hijau-700);
    color: #fff;
    font-size: 0.875rem;
}

#mobile-menu .sub-menu {
    position: static;
    display: none;
    min-width: 0;
    padding: 0 0 0 1rem;
    border-radius: 0;
    background: var(--hijau-900);
    box-shadow: none;
}

#mobile-menu .menu-item-has-children.is-open>.sub-menu {
    display: block;
}

#mobile-menu .sub-menu a {
    color: #fff;
}

/* Preserve the same 7-column proportions as the frontend calendar. */
.agenda-app [data-agenda-days],
.agenda-app [data-agenda-weekdays] {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
}

.agenda-app [data-agenda-days]>div {
    display: flex;
    min-width: 0;
    aspect-ratio: 1 / 1;
    align-items: center;
    justify-content: center;
}

.agenda-app [data-agenda-days] button {
    width: 2rem;
    height: 2rem;
    max-width: 100%;
    padding: 0;
    line-height: 1;
}

/* ==========================================================================
   Utility Classes (dari Tailwind)
   ========================================================================== */
.container {
    max-width: 80rem;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
}

.section-title {
    font-size: 1.5rem;
    font-family: var(--font-heading);
    font-weight: 700;
    color: var(--hijau-800);
    margin-bottom: 0.25rem;
}

.section-divider {
    width: 3rem;
    height: 0.25rem;
    background-color: var(--emas-500);
    margin-bottom: 1.5rem;
    border-radius: 0.25rem;
}

.card {
    background-color: #ffffff;
    border-radius: 0.5rem;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    border: 1px solid #f3f4f6;
    transition: box-shadow 0.2s ease;
    overflow: hidden;
}

.card:hover {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background-color: var(--hijau-700);
    color: #ffffff;
    padding: 0.625rem 1.25rem;
    border-radius: 0.375rem;
    font-weight: 500;
    transition: background-color 0.2s ease;
}

.btn-primary:hover {
    background-color: var(--hijau-800);
    color: #ffffff;
}

.btn-outline {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    border: 1px solid var(--hijau-700);
    color: var(--hijau-700);
    padding: 0.625rem 1.25rem;
    border-radius: 0.375rem;
    font-weight: 500;
    transition: background-color 0.2s ease;
}

.btn-outline:hover {
    background-color: var(--hijau-50);
}

/* ==========================================================================
   WordPress Content Styles
   ========================================================================== */
.wp-content img {
    border-radius: 0.375rem;
    max-width: 100%;
    height: auto;
}

.wp-content a {
    color: var(--hijau-600);
    text-decoration: underline;
}

.wp-content a:hover {
    color: var(--hijau-800);
}

.wp-content p {
    margin-bottom: 1rem;
    line-height: 1.75;
}

.wp-content ul,
.wp-content ol {
    margin-bottom: 1rem;
    padding-left: 1.5rem;
}

.wp-content ul {
    list-style-type: disc;
}

.wp-content ol {
    list-style-type: decimal;
}

.wp-content li {
    margin-bottom: 0.25rem;
}

.wp-content h2 {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--hijau-800);
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
}

.wp-content h3 {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--hijau-700);
    margin-top: 1.25rem;
    margin-bottom: 0.5rem;
}

.wp-content table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1rem;
    font-size: 0.875rem;
}

.wp-content table th {
    background-color: var(--hijau-700);
    color: #ffffff;
    padding: 0.5rem 0.75rem;
    text-align: left;
}

.wp-content table td {
    border: 1px solid #e5e7eb;
    padding: 0.5rem 0.75rem;
}

.wp-content table tr:nth-child(even) td {
    background-color: #f9fafb;
}

.wp-content iframe {
    width: 100%;
    min-height: 720px;
    border: 0;
    border-radius: 1rem;
    background: #f3f4f6;
}

@media (max-width: 640px) {
    .wp-content iframe {
        min-height: 520px;
    }
}

/* ==========================================================================
   TablePress Enhancement
   ========================================================================== */
.wp-content .tablepress {
    min-width: 720px;
}

.wp-content .tablepress td a.wpdm-btn {
    text-decoration: none !important;
}

/* ==========================================================================
   Profile Rich Content
   ========================================================================== */
.profile-rich-content img {
    display: block;
    max-height: 520px;
    width: auto;
    max-width: 100%;
    margin: 1.5rem auto;
    object-fit: contain;
}

.profile-rich-content h2 {
    padding-top: 1rem;
    border-top: 1px solid #e5e7eb;
}

/* ==========================================================================
   Accessibility
   ========================================================================== */
.screen-reader-text {
    clip: rect(1px, 1px, 1px, 1px);
    position: absolute !important;
    height: 1px;
    width: 1px;
    overflow: hidden;
}

.screen-reader-text:focus {
    clip: auto !important;
    display: block;
    height: auto;
    left: 5px;
    top: 5px;
    width: auto;
    z-index: 100000;
    padding: 15px 23px 14px;
    background-color: #f1f1f1;
    color: #21759b;
    text-decoration: none;
    box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
}

/* ==========================================================================
   Alignment Classes
   ========================================================================== */
.alignleft {
    float: left;
    margin-right: 1.5rem;
    margin-bottom: 1rem;
}

.alignright {
    float: right;
    margin-left: 1.5rem;
    margin-bottom: 1rem;
}

.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 1rem;
}

.alignfull {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

.alignwide {
    width: 100%;
    max-width: 100%;
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 768px) {
    .section-title {
        font-size: 1.25rem;
    }
}

html {
    font-size: calc(16px * var(--a11y-font-scale, 1));
}

html.a11y-readable-font body {
    font-family: Arial, Verdana, sans-serif !important;
}

html.a11y-underline-links a {
    text-decoration: underline !important;
    text-underline-offset: .18em;
}

html.a11y-line-height body,
html.a11y-line-height p,
html.a11y-line-height li,
html.a11y-line-height article,
html.a11y-line-height .wp-content {
    line-height: 1.85 !important;
}

html.a11y-grayscale {
    filter: grayscale(1);
}

html.a11y-high-contrast body {
    background: #000 !important;
    color: #fff !important;
}

html.a11y-high-contrast main,
html.a11y-high-contrast section,
html.a11y-high-contrast article,
html.a11y-high-contrast .bg-white,
html.a11y-high-contrast .bg-gray-50 {
    background-color: #000 !important;
    color: #fff !important;
}

.a11y-floating {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 12px;
}

.a11y-floating-button {
    display: inline-flex;
    height: 56px;
    width: 56px;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 999px;
    background: #155832;
    color: #fff;
    font-size: 24px;
    box-shadow: 0 14px 32px rgba(21, 88, 50, .32);
    cursor: pointer;
}

.a11y-floating-button:hover {
    background: #0f3f24;
    transform: translateY(-2px);
}

.a11y-panel[hidden] {
    display: none;
}

.a11y-panel {
    width: min(360px, calc(100vw - 28px));
    border: 1px solid rgba(21, 88, 50, .12);
    border-radius: 24px;
    background: #fff;
    color: #1f2937;
    box-shadow: 0 24px 60px rgba(8, 47, 24, .24);
    overflow: hidden;
}

.a11y-panel-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 18px 14px;
    background: linear-gradient(135deg, #155832, #0f3f24);
    color: #fff;
}

.a11y-panel-head p {
    margin: 0;
    color: #f5c842;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.a11y-panel-head h2 {
    margin: 4px 0 0;
    color: #fff;
    font-size: 20px;
    font-weight: 700;
}

.a11y-icon-button {
    display: inline-flex;
    height: 36px;
    width: 36px;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, .14);
    color: #fff;
    font-size: 24px;
    cursor: pointer;
}

.a11y-panel-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    padding: 16px;
}

.a11y-panel-action {
    display: inline-flex;
    min-height: 48px;
    align-items: center;
    justify-content: flex-start;
    gap: 9px;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    background: #f9fafb;
    padding: 10px 12px;
    color: #155832;
    font-size: 13px;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
}

.a11y-panel-action:hover {
    border-color: rgba(21, 88, 50, .3);
    background: #eef8f1;
    transform: translateY(-1px);
}

.a11y-panel-action-active {
    border-color: #155832;
    background: #d8efe0;
}

.a11y-panel-note {
    margin: 0;
    border-top: 1px solid #eef2f7;
    padding: 12px 16px 16px;
    color: #6b7280;
    font-size: 12px;
    line-height: 1.55;
}

.a11y-floating-button:focus-visible,
.a11y-icon-button:focus-visible,
.a11y-panel-action:focus-visible {
    outline: 3px solid #e6b020;
    outline-offset: 3px;
}

@media (max-width: 640px) {
    .a11y-floating {
        right: 12px;
        bottom: 12px;
    }

    .a11y-panel-grid {
        grid-template-columns: 1fr;
    }
}