/* DKM.or.id Brand Colors — selaraskan dengan logo
 * Logo palette:
 *   Blue  #3AADEE  (masjid icon)
 *   Green #28A428  (.or.id text)
 *   Gold  #F5C800  (puncak kubah)
 *   Dark  #1A6FA8  (hover/depth)
 */

:root {
    --dkm-blue:       #3AADEE;
    --dkm-blue-dark:  #1A6FA8;
    --dkm-blue-light: #D6EEF9;
    --dkm-green:      #28A428;
    --dkm-green-dark: #1A7A1A;
    --dkm-gold:       #F5C800;
    --dkm-gold-dark:  #C9A200;

    /* Override Bootstrap primary → blue */
    --bs-primary:        #3AADEE;
    --bs-primary-rgb:    58, 173, 238;
    --bs-orange:         #3AADEE;

    /* Pagination active */
    --bs-pagination-active-bg:           #3AADEE;
    --bs-pagination-active-border-color: #3AADEE;
}

/* ───────── Buttons ───────── */
.btn-primary {
    color: #fff;
    background-color: var(--dkm-blue);
    border-color: var(--dkm-blue);
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.show > .btn-primary.dropdown-toggle {
    color: #fff;
    background-color: var(--dkm-blue-dark);
    border-color: var(--dkm-blue-dark);
}
.btn-primary:focus,
.btn-primary:active:focus {
    box-shadow: 0 0 0 0.25rem rgba(58, 173, 238, 0.5);
}
.btn-primary:disabled,
.btn-primary.disabled {
    background-color: var(--dkm-blue);
    border-color: var(--dkm-blue);
}

.btn-outline-primary {
    color: var(--dkm-blue);
    border-color: var(--dkm-blue);
}
.btn-outline-primary:hover {
    color: #fff;
    background-color: var(--dkm-blue);
    border-color: var(--dkm-blue);
}

/* Green CTA variant */
.btn-success,
.btn-dkm-green {
    background-color: var(--dkm-green);
    border-color: var(--dkm-green);
    color: #fff;
}
.btn-success:hover,
.btn-dkm-green:hover {
    background-color: var(--dkm-green-dark);
    border-color: var(--dkm-green-dark);
}

/* ───────── Text & Link ───────── */
.text-primary {
    color: var(--dkm-blue) !important;
}
.link-primary {
    color: var(--dkm-blue);
}
.link-primary:hover,
.link-primary:focus {
    color: var(--dkm-blue-dark);
}

/* ───────── Background ───────── */
.bg-primary {
    background-color: var(--dkm-blue) !important;
}

/* ───────── Borders ───────── */
.border-primary {
    border-color: var(--dkm-blue) !important;
}

/* ───────── Navbar ───────── */
.navbar-brand img { max-height: 48px; }

/* Make active nav links use brand blue */
.navbar .nav-link.active,
.navbar .nav-link:hover {
    color: var(--dkm-blue) !important;
}

/* ───────── Masthead / Hero ───────── */
header.masthead {
    background: linear-gradient(
        135deg,
        rgba(26, 111, 168, 0.92) 0%,
        rgba(40, 164, 40, 0.80) 100%
    ), url("../assets/img/bg-masthead.jpg");
    background-attachment: scroll;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

/* Search wrapper accent */
.search-wrapper .input-holder .search-icon {
    background: var(--dkm-blue);
}
.search-wrapper .input-holder .search-icon:hover {
    background: var(--dkm-blue-dark);
}

/* ───────── Dividers ───────── */
hr.divider {
    max-width: 3.25rem;
    border-width: 0.2rem;
    border-color: var(--dkm-blue) !important;
    background-color: var(--dkm-blue) !important;
    opacity: 1;
}
hr.divider-primary {
    border-color: var(--dkm-blue) !important;
    background-color: var(--dkm-blue) !important;
}
hr.divider::after {
    color: var(--dkm-blue);
}

/* ───────── Table headers (istilah section) ───────── */
section#istilah table th,
section#istilah table td[style*="color:#16a085"],
section#istilah span[style*="color:#16a085"] {
    color: var(--dkm-blue) !important;
}

/* ───────── Section backgrounds ───────── */
section#istilah { background-color: #f8fbff; padding: 5rem 0; }
section#istilah-jakon { background-color: #fff; padding: 4rem 0; }
section.page-section { padding: 5rem 0; }

/* ───────── Feature icons ───────── */
.bi.text-primary,
i.text-primary {
    color: var(--dkm-blue) !important;
}

/* ───────── Footer top band ───────── */
footer > div.container > div.w-lg-95 {
    border-top: 4px solid var(--dkm-blue);
    border-radius: 0 0 8px 8px;
    padding: 2rem;
}
footer.bg-dark a:hover {
    color: var(--dkm-gold) !important;
}

/* ───────── Card hover border ───────── */
.card:hover {
    border-color: var(--dkm-blue) !important;
}
.card:hover .footer-content a {
    color: var(--dkm-blue) !important;
}

/* ───────── Pagination ───────── */
.paging span.current {
    background: var(--dkm-blue) !important;
}

/* ───────── Badge (search history) ───────── */
.badge-succes,
a.badge-succes {
    display: inline-block;
    padding: 0.35em 0.65em;
    font-size: 0.8em;
    font-weight: 600;
    border-radius: 50rem;
    background-color: rgba(255,255,255,0.25);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.6);
    margin: 2px;
    text-decoration: none;
    transition: background 0.2s;
}
a.badge-succes:hover {
    background-color: var(--dkm-gold);
    color: #000;
    border-color: var(--dkm-gold);
}

/* ───────── Go-to-top button ───────── */
.go-to {
    background-color: var(--dkm-blue);
    color: #fff;
    border-radius: 50%;
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.go-to:hover { background-color: var(--dkm-blue-dark); }

/* ───────── Misc overrides for any leftover orange ───────── */
a { color: var(--dkm-blue); }
a:hover { color: var(--dkm-blue-dark); }

/* Keep dark-section links white */
.bg-dark a,
footer.bg-dark a {
    color: rgba(255,255,255,0.75);
}
.bg-dark a:hover,
footer.bg-dark a:hover {
    color: var(--dkm-gold);
}

/* Section heading accent line */
section h1:after,
section h2:after {
    display: none; /* handled by hr.divider */
}

/* Highlight the gold dome color for decorative elements */
.text-gold { color: var(--dkm-gold) !important; }
.bg-gold   { background-color: var(--dkm-gold) !important; }