/*
Theme Name: Astra Child - DKIP Bulungan
Theme URI: https://diskominfo.bulungan.go.id/
Description: Astra Child Theme - DKIP Bulungan | Flat Government Modern
Author: DKIP Kabupaten Bulungan
Author URI: https://diskominfo.bulungan.go.id/
Template: astra
Version: 4.1.0
*/

/* =========================================================
   01. DESIGN TOKENS
   ========================================================= */

:root {

    /* Government Colors */
    --gov-navy: #0f172a;
    --gov-navy-light: #1e293b;

    --gov-blue: #2563eb;
    --gov-blue-dark: #1d4ed8;

    --gov-cyan: #06b6d4;

    --gov-blue-light: #eff6ff;
    --gov-cyan-light: #ecfeff;

    /* Page */
    --gov-background: #f8fafc;
    --gov-surface: #ffffff;

    /* Text */
    --gov-text: #0f172a;
    --gov-text-secondary: #475569;
    --gov-text-muted: #64748b;

    /* Border */
    --gov-border: #e2e8f0;

    /* Shadcn compatibility */
    --background: 210 40% 98%;
    --foreground: 222 47% 11%;

    --card: 0 0% 100%;

    --primary: 221 83% 53%;
    --primary-foreground: 0 0% 100%;

    --secondary: 214 32% 91%;
    --secondary-foreground: 222 47% 11%;

    --muted: 210 40% 96%;
    --muted-foreground: 215 16% 47%;

    --border: 214 32% 91%;
    --input: 214 32% 91%;

    --ring: 221 83% 53%;

    --radius: 0.5rem;
}


/* =========================================================
   02. GLOBAL
   ========================================================= */

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    padding: 0;

    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif;

    color: var(--gov-text);
    background: var(--gov-background);

    line-height: 1.7;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.site-content {
    background: var(--gov-background);
}

main.site-main {
    background: transparent;
}


/* =========================================================
   03. GLOBAL CONTAINER
   ========================================================= */

.ast-container {
    max-width: 1200px;
}

.elementor-section > .elementor-container {
    max-width: 1200px;
}


/* =========================================================
   04. HEADER
   ========================================================= */

#masthead {
    position: relative;
    z-index: 100;

    background: #ffffff;

    border: 0 !important;

    box-shadow:
        0 1px 0 rgba(15, 23, 42, 0.08);
}


/* Single blue-cyan accent line */

#masthead::after {
    content: "";

    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    height: 2px;

    background: linear-gradient(
        90deg,
        var(--gov-blue),
        var(--gov-cyan)
    );
}


/* Astra header */

.ast-primary-header-bar {
    background: #ffffff !important;

    border: 0 !important;
}

.ast-primary-header-bar .ast-builder-grid-row {
    min-height: 76px;
}


/* =========================================================
   05. HEADER LOGO
   ========================================================= */

.custom-logo-link img,
.site-logo-img,
.ast-site-identity img {
    max-height: 58px;

    width: auto;

    transition:
        transform 0.2s ease;
}

.custom-logo-link:hover img,
.ast-site-identity:hover img {
    transform: scale(1.02);
}


/* =========================================================
   06. MAIN NAVIGATION
   ========================================================= */

.main-header-menu {
    gap: 4px;
}

.main-header-menu > .menu-item > .menu-link {
    display: inline-flex;

    align-items: center;

    min-height: 42px;

    padding: 0 14px;

    color: #475569;

    font-size: 14px;
    font-weight: 600;

    border-radius: 7px;

    transition:
        color 0.2s ease,
        background 0.2s ease;
}

.main-header-menu > .menu-item > .menu-link:hover {
    color: var(--gov-blue);

    background: var(--gov-blue-light);
}


/* Active menu */

.main-header-menu > .current-menu-item > .menu-link,
.main-header-menu > .current_page_item > .menu-link,
.main-header-menu > .current-menu-ancestor > .menu-link {
    color: #ffffff !important;

    background: var(--gov-blue) !important;
}


/* =========================================================
   07. DROPDOWN
   ========================================================= */

.main-header-menu .sub-menu {
    min-width: 220px;

    padding: 8px;

    background: #ffffff;

    border: 1px solid var(--gov-border);

    border-radius: 8px;

    box-shadow:
        0 12px 30px rgba(15, 23, 42, 0.10);
}

.main-header-menu .sub-menu .menu-link {
    padding: 10px 13px;

    color: #475569;

    font-size: 14px;
    font-weight: 500;

    border-radius: 6px;

    transition:
        color 0.2s ease,
        background 0.2s ease;
}

.main-header-menu .sub-menu .menu-link:hover {
    color: var(--gov-blue);

    background: var(--gov-blue-light);
}


/* =========================================================
   08. HEADER CTA
   ========================================================= */

/*
   Untuk membuat menu menjadi tombol:
   tambahkan class "header-cta"
   pada menu item di WordPress.
*/

.main-header-menu .header-cta > .menu-link {
    margin-left: 8px;

    padding: 0 18px;

    color: #ffffff !important;

    background: var(--gov-blue) !important;

    border-radius: 7px;

    font-weight: 700;

    box-shadow: none;

    transition:
        background 0.2s ease,
        transform 0.2s ease;
}

.main-header-menu .header-cta > .menu-link:hover {
    color: #ffffff !important;

    background: var(--gov-blue-dark) !important;

    transform: translateY(-1px);
}


/* =========================================================
   09. TYPOGRAPHY
   ========================================================= */

h1,
h2,
h3,
h4,
h5,
h6 {
    margin-top: 0;

    color: var(--gov-navy);

    font-weight: 700;

    line-height: 1.25;

    letter-spacing: -0.02em;
}

h1 {
    font-size: clamp(2rem, 4vw, 3rem);
}

h2 {
    font-size: clamp(1.65rem, 3vw, 2.25rem);
}

h3 {
    font-size: clamp(1.3rem, 2vw, 1.6rem);
}

p {
    color: var(--gov-text-secondary);
}

strong,
b {
    color: var(--gov-navy);
}


/* =========================================================
   10. LINKS
   ========================================================= */

a {
    color: var(--gov-blue);

    text-decoration: none;

    transition:
        color 0.2s ease;
}

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


/* =========================================================
   11. ELEMENTOR — FLAT MODE
   ========================================================= */

/*
   Semua container Elementor dibuat FLAT.

   Tidak ada:
   - card
   - nested card
   - border container
   - box shadow
   - background putih bertingkat
*/

.elementor-element.e-con,
.elementor-element.e-con.e-child,
.e-con.e-child,
.elementor-section,
.elementor-container,
.elementor-column,
.elementor-widget-wrap,
.elementor-widget,
.elementor-widget-container {
    border: none !important;

    box-shadow: none !important;
}


/* Container transparan */

.elementor-element.e-con,
.elementor-element.e-con.e-child,
.e-con.e-child,
.elementor-section,
.elementor-container,
.elementor-column,
.elementor-widget-wrap {
    background: transparent !important;
}


/* Tidak ada radius pada container */

.elementor-element.e-con,
.elementor-element.e-con.e-child,
.e-con.e-child,
.elementor-section,
.elementor-container,
.elementor-column,
.elementor-widget-wrap {
    border-radius: 0 !important;
}


/* Widget container transparan */

.elementor-widget-container {
    background: transparent;
}


/* =========================================================
   12. ELEMENTOR HEADING
   ========================================================= */

.elementor-heading-title {
    color: var(--gov-navy);

    font-weight: 700;
}

.elementor-widget-text-editor {
    color: var(--gov-text-secondary);
}

.elementor-widget-text-editor p {
    margin-bottom: 1em;
}


/* =========================================================
   13. ELEMENTOR IMAGE
   ========================================================= */

.elementor-widget-image img {
    max-width: 100%;
    height: auto;

    border: 0 !important;

    box-shadow: none !important;

    border-radius: 8px;
}


/* =========================================================
   14. ELEMENTOR BUTTON
   ========================================================= */

.elementor-button,
button,
input[type="submit"],
input[type="button"] {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 8px;

    min-height: 44px;

    padding: 0 20px;

    color: #ffffff !important;

    background: var(--gov-blue) !important;

    border: 0 !important;

    border-radius: 7px !important;

    font-size: 14px;
    font-weight: 700;

    line-height: 1;

    box-shadow: none !important;

    transition:
        background 0.2s ease,
        transform 0.2s ease;
}

.elementor-button:hover,
button:hover,
input[type="submit"]:hover,
input[type="button"]:hover {
    color: #ffffff !important;

    background: var(--gov-blue-dark) !important;

    transform: translateY(-1px);
}


/* Secondary / outline button */

.elementor-button.secondary,
.button.secondary {
    color: var(--gov-blue) !important;

    background: #ffffff !important;

    border: 1px solid var(--gov-blue) !important;
}

.elementor-button.secondary:hover,
.button.secondary:hover {
    color: #ffffff !important;

    background: var(--gov-blue) !important;
}


/* =========================================================
   15. FORM
   ========================================================= */

input:not([type="submit"]):not([type="button"]),
textarea,
select,
.elementor-field {
    width: 100%;

    color: var(--gov-text);

    background: #ffffff;

    border: 1px solid var(--gov-border) !important;

    border-radius: 6px;

    box-shadow: none !important;

    font-size: 14px;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

input:not([type="submit"]):not([type="button"]),
select,
.elementor-field {
    min-height: 44px;
}

textarea {
    min-height: 110px;

    padding: 12px 14px;
}

input:focus,
textarea:focus,
select:focus,
.elementor-field:focus {
    border-color: var(--gov-blue) !important;

    outline: none !important;

    box-shadow:
        0 0 0 3px rgba(37, 99, 235, 0.10) !important;
}


/* =========================================================
   16. CONTENT — NO CARD
   ========================================================= */

article,
.ast-article-single,
.entry-content,
.site-main,
.content-area {
    border: none !important;

    box-shadow: none !important;
}


/* Article */

.ast-article-single {
    background: transparent !important;

    border-radius: 0 !important;
}


/* Content */

.entry-content {
    background: transparent !important;

    border: none !important;

    box-shadow: none !important;
}


/* =========================================================
   17. HOMEPAGE — FLAT
   ========================================================= */

.home .site-content,
.home .site-main,
.home article,
.home .ast-article-single,
.home .entry-content {
    background: transparent !important;

    border: none !important;

    box-shadow: none !important;

    border-radius: 0 !important;
}


/* Elementor homepage */

.home .elementor,
.home .elementor-section,
.home .elementor-container,
.home .elementor-column,
.home .elementor-widget-wrap,
.home .elementor-widget-container {
    background: transparent !important;

    border: none !important;

    box-shadow: none !important;
}


/* =========================================================
   18. BADGE / LABEL
   ========================================================= */

.badge,
.elementor-badge,
.category-badge {
    display: inline-flex;

    align-items: center;

    padding: 5px 10px;

    color: var(--gov-blue);

    background: var(--gov-blue-light);

    border: 1px solid #dbeafe;

    border-radius: 999px;

    font-size: 12px;

    font-weight: 700;

    line-height: 1.2;
}


/* =========================================================
   19. ARCHIVE / BLOG — FLAT LIST
   ========================================================= */

.archive .site-main,
.blog .site-main {
    background: transparent;
}

.archive article,
.blog article {
    margin-bottom: 32px;

    padding: 0 0 24px;

    background: transparent !important;

    border: none !important;

    border-bottom: 1px solid var(--gov-border) !important;

    border-radius: 0 !important;

    box-shadow: none !important;
}


/* Archive title */

.archive-title,
.page-title {
    color: var(--gov-navy);

    font-weight: 700;
}


/* =========================================================
   20. SEARCH — FLAT LIST
   ========================================================= */

.search-results article {
    background: transparent !important;

    border: none !important;

    border-bottom: 1px solid var(--gov-border) !important;

    border-radius: 0 !important;

    box-shadow: none !important;
}


/* =========================================================
   21. FOOTER
   ========================================================= */

.site-footer {
    position: relative;

    margin-top: 60px;

    color: #cbd5e1;

    background:
        linear-gradient(
            135deg,
            #0f172a 0%,
            #172554 55%,
            #0f172a 100%
        );

    border: 0 !important;
}


/* Footer accent */

.site-footer::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;
    right: 0;

    height: 3px;

    background: linear-gradient(
        90deg,
        var(--gov-blue),
        var(--gov-cyan)
    );
}


/* Footer columns */

.site-footer .ast-builder-footer-grid-columns {
    border: 0 !important;
}


/* =========================================================
   22. FOOTER TYPOGRAPHY
   ========================================================= */

.site-footer h1,
.site-footer h2,
.site-footer h3,
.site-footer h4,
.site-footer h5,
.site-footer h6 {
    color: #ffffff;
}

.site-footer p,
.site-footer li {
    color: #cbd5e1;
}

.site-footer .widget-title {
    margin-bottom: 15px;

    color: #ffffff;

    font-size: 15px;

    font-weight: 700;
}


/* =========================================================
   23. FOOTER LINKS
   ========================================================= */

.site-footer a {
    color: #cbd5e1;

    transition:
        color 0.2s ease;
}

.site-footer a:hover {
    color: #67e8f9;
}


/* =========================================================
   24. FOOTER LOGO
   ========================================================= */

.site-footer .custom-logo-link img,
.site-footer .footer-logo img {
    max-height: 70px;

    width: auto;

    filter: none !important;
}


/* =========================================================
   25. FOOTER SOCIAL
   ========================================================= */

.site-footer .ast-social-color-type-custom a {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    width: 38px;
    height: 38px;

    color: #cbd5e1 !important;

    background: rgba(255, 255, 255, 0.08);

    border: 1px solid rgba(255, 255, 255, 0.10);

    border-radius: 50%;

    transition:
        color 0.2s ease,
        background 0.2s ease,
        transform 0.2s ease;
}

.site-footer .ast-social-color-type-custom a:hover {
    color: #ffffff !important;

    background: var(--gov-blue);

    transform: translateY(-2px);
}


/* =========================================================
   26. COPYRIGHT
   ========================================================= */

.site-below-footer-wrap {
    background: rgba(2, 6, 23, 0.65);

    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.site-below-footer-wrap p,
.site-below-footer-wrap span {
    color: #94a3b8;

    font-size: 13px;
}


/* =========================================================
   27. FOOTER ELEMENTOR
   ========================================================= */

.site-footer .elementor-element.e-con,
.site-footer .elementor-element.e-con.e-child,
.site-footer .e-con.e-child,
.site-footer .elementor-widget-container {
    background: transparent !important;

    border: none !important;

    box-shadow: none !important;
}


/* =========================================================
   28. ACCESSIBILITY
   ========================================================= */

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: 3px solid rgba(37, 99, 235, 0.35) !important;

    outline-offset: 2px;
}


/* =========================================================
   29. TEXT SELECTION
   ========================================================= */

::selection {
    color: #ffffff;

    background: var(--gov-blue);
}


/* =========================================================
   30. SCROLLBAR
   ========================================================= */

::-webkit-scrollbar {
    width: 9px;
}

::-webkit-scrollbar-track {
    background: #f1f5f9;
}

::-webkit-scrollbar-thumb {
    background: #94a3b8;

    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--gov-blue);
}


/* =========================================================
   31. TABLE
   ========================================================= */

table {
    width: 100%;

    border-collapse: collapse;

    background: transparent;
}

th {
    color: #ffffff;

    background: var(--gov-navy);

    font-weight: 700;
}

th,
td {
    padding: 12px 14px;

    border-bottom: 1px solid var(--gov-border);

    text-align: left;
}

td {
    color: var(--gov-text-secondary);
}

tr:hover td {
    background: var(--gov-blue-light);
}


/* =========================================================
   32. BLOCKQUOTE
   ========================================================= */

blockquote {
    margin: 24px 0;

    padding: 16px 20px;

    color: var(--gov-text-secondary);

    background: var(--gov-blue-light);

    border-left: 4px solid var(--gov-blue);

    border-radius: 0;
}


/* =========================================================
   33. LIST
   ========================================================= */

.entry-content ul,
.entry-content ol {
    color: var(--gov-text-secondary);

    padding-left: 24px;
}

.entry-content li {
    margin-bottom: 6px;
}


/* =========================================================
   34. HR
   ========================================================= */

hr {
    margin: 30px 0;

    border: 0;

    border-top: 1px solid var(--gov-border);
}


/* =========================================================
   35. MOBILE HEADER
   ========================================================= */

@media (max-width: 921px) {

    .ast-primary-header-bar .ast-builder-grid-row {
        min-height: 68px;
    }

    .custom-logo-link img,
    .ast-site-identity img {
        max-height: 50px;
    }

    .main-header-menu > .menu-item > .menu-link {
        padding: 10px 12px;
    }

}


/* =========================================================
   36. TABLET / MOBILE
   ========================================================= */

@media (max-width: 768px) {

    body {
        font-size: 15px;
    }

    .ast-container {
        padding-left: 18px;
        padding-right: 18px;
    }

    .elementor-section {
        padding-left: 0 !important;

        padding-right: 0 !important;
    }

    .elementor-widget-heading .elementor-heading-title {
        line-height: 1.3;
    }

    .elementor-button {
        min-height: 44px;

        padding-left: 17px;

        padding-right: 17px;
    }

    .site-footer {
        margin-top: 40px;
    }

}


/* =========================================================
   37. SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {

    h1 {
        font-size: 1.8rem;
    }

    h2 {
        font-size: 1.5rem;
    }

    h3 {
        font-size: 1.25rem;
    }

    .ast-container {
        padding-left: 15px;

        padding-right: 15px;
    }

    .elementor-button {
        width: 100%;
    }

}


/* =========================================================
   38. REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;

        transition-duration: 0.01ms !important;

        animation-duration: 0.01ms !important;

        animation-iteration-count: 1 !important;
    }

}