/*
Theme Name: Diskominfo Nabire Smart Theme
Theme URI: https://diskominfo.nabirekab.go.id
Author: Tim Pengembang Diskominfo Kabupaten Nabire
Author URI: https://nabirekab.go.id
Description: Tema WordPress kustom profesional dan modern untuk Dinas Komunikasi dan Informatika Kabupaten Nabire. Dirancang khusus untuk layanan publik G2C, berstandar aksesibilitas tinggi, serta kompatibel penuh dengan WordPress 7.x dan Gutenberg Editor.
Version: 1.0.0
Tested up to: 7.0
Requires at least: 6.5
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: diskominfo-nabire
Tags: government, accessibility-ready, custom-menu, custom-logo, wide-blocks, block-styles, translation-ready

==========================================================================
TABLE OF CONTENTS:
1. CSS Custom Properties (Variables)
2. Reset & Accessibility
3. Header & Navigation (Navbar)
4. Hero Headline & Cards Section
5. Grid Layanan Publik Section
6. Content & Sidebar Styling
7. Forms & Search Bar
8. Pagination Styling
9. Footer Section
10. Gutenberg Blocks & Utilities
==========================================================================
*/

/* ------------------------------------------------------------------------
   1. CSS CUSTOM PROPERTIES (Palet Warna & Variabel)
   ------------------------------------------------------------------------ */
:root {
  /* Primary: Biru Kominfo */
  --color-primary: #00529B;
  --color-primary-dark: #003366;
  --color-primary-light: #1E73BE;

  /* Accent: Kuning/Emas Papua & Nabire */
  --color-accent: #FFC72C;
  --color-accent-hover: #E0A800;

  /* Neutral & Status */
  --color-dark: #1F2937;
  --color-gray-dark: #4B5563;
  --color-gray-medium: #D1D5DB;
  --color-gray-light: #F3F4F6;
  --color-white: #FFFFFF;
  --color-alert-red: #DC2626;

  /* Typography & Layout */
  --font-main: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  --container-max-width: 1200px;
  --border-radius: 8px;
  --transition-fast: 0.2s ease-in-out;
  --box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

/* ------------------------------------------------------------------------
   2. RESET & ACCESSIBILITY
   ------------------------------------------------------------------------ */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-main);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--color-dark);
  background-color: #F9FAFB;
  -webkit-font-smoothing: antialiased;
}

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

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

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

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

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Focus Visible untuk Keyboard Navigation (Aksesibilitas) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--color-accent) !important;
  outline-offset: 2px !important;
}

/* ------------------------------------------------------------------------
   3. HEADER & NAVIGATION (Navbar)
   ------------------------------------------------------------------------ */
.site-header {
  position: relative;
  z-index: 100;
}

#site-navigation ul,
.main-navigation ul,
.main-navigation ul.nav-menu {
  list-style: none !important;
  list-style-type: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 1.5rem !important;
}

#site-navigation li,
.main-navigation li {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.main-navigation a {
  color: var(--color-primary-dark);
  font-weight: 600;
  font-size: 0.95rem;
  padding: 0.5rem 0;
  text-decoration: none !important;
  transition: color var(--transition-fast);
  position: relative;
  display: inline-block;
}

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

.main-navigation a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0%;
  height: 2px;
  background-color: var(--color-accent);
  transition: width var(--transition-fast);
}

.main-navigation a:hover::after {
  width: 100%;
}

/* Submenu / Dropdown */
.main-navigation .menu-item-has-children {
  position: relative;
}

.main-navigation .sub-menu {
  display: none !important;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: var(--color-white);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  border-top: 3px solid var(--color-accent);
  border-radius: 0 0 var(--border-radius) var(--border-radius);
  min-width: 220px;
  z-index: 999;
  flex-direction: column !important;
  gap: 0 !important;
  padding: 0.5rem 0 !important;
}

.main-navigation .menu-item-has-children:hover > .sub-menu {
  display: flex !important;
}

.main-navigation .sub-menu a {
  padding: 0.6rem 1.2rem;
  font-size: 0.875rem;
  width: 100%;
  border-bottom: 1px solid #F1F5F9;
}

.main-navigation .sub-menu a::after {
  display: none;
}

/* ------------------------------------------------------------------------
   4. HERO HEADLINE & CARDS SECTION
   ------------------------------------------------------------------------ */
.headline-card {
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
  border: 1px solid #E5E7EB;
}

.headline-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--box-shadow);
}

.headline-thumbnail img {
  transition: transform 0.3s ease;
}

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

/* ------------------------------------------------------------------------
   5. GRID LAYANAN PUBLIK SECTION
   ------------------------------------------------------------------------ */
.service-card {
  transition: all var(--transition-fast);
  border: 1px solid #E5E7EB;
}

.service-card:hover {
  border-color: var(--color-primary);
  box-shadow: var(--box-shadow);
  transform: translateY(-5px);
}

.service-icon {
  display: inline-block;
  transition: transform var(--transition-fast);
}

.service-card:hover .service-icon {
  transform: scale(1.1);
}

/* ------------------------------------------------------------------------
   6. CONTENT & SIDEBAR STYLING
   ------------------------------------------------------------------------ */
.news-list-item {
  transition: background-color var(--transition-fast);
}

.news-list-item:hover {
  background-color: #FAFAFA;
}

.widget {
  margin-bottom: 2rem;
}

.widget-title {
  font-size: 1.15rem;
  color: var(--color-primary-dark);
  padding-bottom: 0.5rem;
  margin-bottom: 1rem;
  border-bottom: 2px solid var(--color-accent);
  position: relative;
  font-weight: 700;
}

.widget ul {
  list-style: none;
}

.widget ul li {
  padding: 0.5rem 0;
  border-bottom: 1px dashed var(--color-gray-medium);
  font-size: 0.9rem;
}

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

/* ------------------------------------------------------------------------
   7. FORMS & SEARCH BAR
   ------------------------------------------------------------------------ */
.search-form {
  display: flex;
  gap: 0.5rem;
  max-width: 100%;
}

.search-form input[type="search"] {
  flex: 1;
  padding: 0.6rem 1rem;
  border: 1px solid var(--color-gray-medium);
  border-radius: var(--border-radius);
  font-size: 0.9rem;
  outline: none;
}

.search-form input[type="search"]:focus {
  border-color: var(--color-primary);
}

.search-form button,
.search-form input[type="submit"] {
  background-color: var(--color-primary);
  color: var(--color-white);
  border: none;
  padding: 0.6rem 1.2rem;
  border-radius: var(--border-radius);
  font-weight: 600;
  cursor: pointer;
  transition: background-color var(--transition-fast);
}

.search-form button:hover,
.search-form input[type="submit"]:hover {
  background-color: var(--color-primary-dark);
}

/* ------------------------------------------------------------------------
   8. PAGINATION STYLING
   ------------------------------------------------------------------------ */
.pagination-wrapper .page-numbers,
.nav-links .page-numbers {
  display: inline-block;
  padding: 0.5rem 0.9rem;
  margin-right: 0.25rem;
  border: 1px solid var(--color-gray-medium);
  border-radius: 4px;
  color: var(--color-primary-dark);
  font-weight: 600;
  font-size: 0.875rem;
}

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

.pagination-wrapper a.page-numbers:hover,
.nav-links a.page-numbers:hover {
  background-color: var(--color-accent);
  color: var(--color-dark);
  border-color: var(--color-accent);
}

/* ------------------------------------------------------------------------
   9. FOOTER SECTION
   ------------------------------------------------------------------------ */
.site-footer a {
  transition: opacity var(--transition-fast);
}

.site-footer a:hover {
  opacity: 0.8;
  text-decoration: underline;
}

.footer-ppid-menu {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-ppid-menu li {
  margin-bottom: 0.6rem;
  font-size: 0.9rem;
}

.footer-ppid-menu a {
  color: var(--color-white);
  display: inline-block;
}

/* ------------------------------------------------------------------------
   10. GUTENBERG BLOCKS & RESPONSIVE MEDIA QUERIES
   ------------------------------------------------------------------------ */
.alignwide {
  margin-left: -5%;
  margin-right: -5%;
  max-width: 110%;
}

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

/* Mobile & Tablet Adjustments (< 768px) */
@media screen and (max-width: 768px) {
  .site-header .site-container {
    flex-wrap: wrap;
  }

  .main-navigation .menu-toggle {
    display: block !important;
  }

  #site-navigation ul.nav-menu,
  .main-navigation ul.nav-menu {
    display: none !important;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: var(--color-white);
    flex-direction: column !important;
    padding: 1rem 1.5rem !important;
    box-shadow: 0 10px 15px rgba(0,0,0,0.1);
    gap: 0.5rem !important;
    align-items: flex-start !important;
  }

  #site-navigation ul.nav-menu.toggled-on,
  .main-navigation ul.nav-menu.toggled-on {
    display: flex !important;
  }

  .main-navigation a {
    width: 100%;
    padding: 0.75rem 0;
    border-bottom: 1px solid #F1F5F9;
  }

  .alignwide, .alignfull {
    margin-left: 0;
    margin-right: 0;
    max-width: 100%;
    width: 100%;
  }
}