@charset "UTF-8";
/***!  /templates/ptapalu_joomla545_template/css/refined-header.css?v=1790436373  !***/

/* Refinements for the PTA Palu topbar, brand header, and primary navigation. */
body.site-ptapalu {
    background-color: var(--pta-page-background) !important;
    color: var(--pta-text);
}

body.site-ptapalu .topbar {
    background: linear-gradient(112deg, var(--pta-footer), var(--pta-topbar)) !important;
    border-bottom: 3px solid var(--pta-secondary) !important;
    box-shadow: inset 0 -1px rgb(255 255 255 / 18%);
    padding: 10px 0 !important;
}

body.site-ptapalu .topbar-service-hours {
    align-items: center;
    display: inline-flex;
    letter-spacing: 0.01em;
    white-space: nowrap;
}

body.site-ptapalu .topbar-service-hours .fa-clock {
    color: var(--pta-secondary);
}

body.site-ptapalu .header-main {
    background-color: var(--pta-header) !important;
    border-bottom: 0 !important;
}

/* Compact gold brand marker: visually paired with the logo, not the page edge. */
body.site-ptapalu .brand-area {
    padding-left: 16px;
    position: relative;
}

body.site-ptapalu .brand-area::before {
    background: var(--pta-secondary);
    border-radius: 8px;
    content: "";
    height: 58px;
    left: 0;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 5px;
}

body.site-ptapalu .navbar {
    background-color: var(--pta-navbar) !important;
    border: 0 !important;
    box-shadow: 0 5px 16px rgb(16 43 58 / 6%);
}

body.site-ptapalu .navbar-nav {
    gap: 0;
}

body.site-ptapalu .navbar-nav > li {
    position: relative;
}

body.site-ptapalu .navbar-nav > li > a,
body.site-ptapalu .navbar-nav > li > span,
body.site-ptapalu .navbar-nav > li > button {
    border-bottom: 3px solid transparent !important;
    color: var(--pta-nav-text) !important;
    padding: 16px 17px !important;
}

body.site-ptapalu .navbar-nav > li:hover > a,
body.site-ptapalu .navbar-nav > li:hover > span,
body.site-ptapalu .navbar-nav > li:hover > button,
body.site-ptapalu .navbar-nav > li.active > a,
body.site-ptapalu .navbar-nav > li.active > span,
body.site-ptapalu .navbar-nav > li.active > button,
body.site-ptapalu .navbar-nav > li > [aria-current="page"] {
    background: var(--pta-nav-active) !important;
    border-bottom-color: var(--pta-secondary) !important;
    color: var(--pta-primary) !important;
}

/* Service cards: same restrained green-to-gold top accent used by the PA template. */
body.site-ptapalu .pta-card-layanan {
    background-color: var(--pta-card-background);
    border-color: var(--pta-line);
    overflow: hidden;
    position: relative;
}

body.site-ptapalu .moduletable {
    background-color: var(--pta-card-background);
    border-color: var(--pta-line);
}

body.site-ptapalu .brand-text .text-secondary,
body.site-ptapalu .pta-card-layanan .text-wrap p {
    color: var(--pta-muted) !important;
}

body.site-ptapalu .pta-card-layanan .text-wrap h4 {
    color: var(--pta-text);
}

body.site-ptapalu .pta-card-layanan::before {
    background: linear-gradient(90deg, var(--pta-primary), var(--pta-secondary));
    content: "";
    height: 4px;
    inset: 0 0 auto;
    position: absolute;
}

/* Survey and footer: preserve the PA template's connected blue-and-gold finish. */
body.site-ptapalu .bottom-section {
    background: linear-gradient(135deg, var(--pta-primary), var(--pta-survey-background)) !important;
    position: relative;
}

body.site-ptapalu .bottom-section::before {
    background: radial-gradient(circle at top right, rgb(255 255 255 / 15%), transparent 35%);
    content: "";
    inset: 0;
    pointer-events: none;
    position: absolute;
}

body.site-ptapalu .bottom-section .container {
    position: relative;
}

body.site-ptapalu .survey-header-dark h2,
body.site-ptapalu .survey-header-dark p,
body.site-ptapalu .scard-dark,
body.site-ptapalu .scard-dark h4,
body.site-ptapalu .scard-score {
    color: #fff;
}

body.site-ptapalu .survey-header-dark p {
    color: var(--pta-footer-text);
}

body.site-ptapalu .scard-dark {
    background: var(--pta-survey-card);
    border: 0;
    border-top: 2px solid var(--pta-survey-border);
    border-radius: 10px;
    box-shadow: none;
}

body.site-ptapalu .scard-dark:hover {
    background: var(--pta-survey-card);
    box-shadow: 0 12px 24px rgb(10 47 61 / 12%);
}

body.site-ptapalu .scard-icon {
    color: var(--pta-secondary);
}

body.site-ptapalu .scard-badge {
    background-color: var(--pta-survey-status);
}

body.site-ptapalu .pta-footer {
    background: linear-gradient(120deg, var(--pta-footer), var(--pta-footer-end)) !important;
    border-top: 4px solid var(--pta-secondary);
}

/* Optional supporting logo at the right side of the desktop header. */
.header-brand-row {
    gap: clamp(1rem, 3vw, 3rem);
}

.header-brand-row .brand-area {
    min-width: 0;
    flex: 1 1 auto;
}

.header-right-logo {
    flex: 0 1 180px;
    justify-content: flex-end;
}

.header-right-logo img {
    display: block;
    width: auto;
    max-width: min(180px, 14vw);
    max-height: 82px;
    object-fit: contain;
}

/* Running text: leave a small gap after the clock, then scroll seamlessly. */
.running-text-section {
    margin-top: 1rem !important;
    margin-bottom: 1rem !important;
}

.pta-running-wrapper .pta-custom-ticker {
    min-width: 0;
    padding: 0 0 0 8px !important;
}

.pta-running-wrapper .pta-custom-ticker .ticker-text {
    padding-left: 0 !important;
    animation: none !important;
}

.pta-running-wrapper .pta-ticker-track {
    display: flex;
    align-items: center;
    gap: 4rem;
    width: max-content;
    min-height: 100%;
    white-space: nowrap;
    will-change: transform;
    animation: pta-ticker-scroll var(--pta-ticker-duration, 24s) linear infinite;
}

.pta-running-wrapper .pta-ticker-item {
    display: inline-block;
    flex: 0 0 auto;
    font-weight: 600;
    font-size: 0.95rem;
    letter-spacing: 0.5px;
    color: var(--pta-primary);
    line-height: 1;
}

@keyframes pta-ticker-scroll {
    to {
        transform: translateX(var(--pta-ticker-distance, -900px));
    }
}

@media (max-width: 768px) {
    .running-text-section {
        margin-top: 0.75rem !important;
        margin-bottom: 0.75rem !important;
    }

    .pta-running-wrapper .pta-ticker-track {
        gap: 2.5rem;
    }

    .pta-running-wrapper .pta-ticker-item {
        font-size: 0.85rem;
    }
}

@media (max-width: 991.98px) {
    .header-right-logo {
        display: none !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pta-running-wrapper .pta-ticker-track {
        animation: none;
    }
}

body.site-ptapalu .pta-footer h3,
body.site-ptapalu .pta-footer .moduletable h3 {
    color: var(--pta-footer-heading) !important;
}

body.site-ptapalu .pta-footer .moduletable,
body.site-ptapalu .pta-footer .moduletable p,
body.site-ptapalu .pta-footer .moduletable span,
body.site-ptapalu .pta-footer a {
    color: var(--pta-footer-text) !important;
}

body.site-ptapalu .pta-footer a:hover {
    color: #fff !important;
}

@media (max-width: 991.98px) {
    body.site-ptapalu .topbar-service-hours {
        white-space: normal;
    }

    body.site-ptapalu .brand-area {
        padding-left: 12px;
    }

    body.site-ptapalu .brand-area::before {
        height: 32px;
        width: 4px;
    }

    body.site-ptapalu .navbar-nav > li > a,
    body.site-ptapalu .navbar-nav > li > span,
    body.site-ptapalu .navbar-nav > li > button {
        padding: 15px 20px !important;
    }
}

@media (min-width: 992px) {
    /* Match the PA template's compact desktop proportions. */
    body.site-ptapalu .topbar {
        padding-block: 10px !important;
    }

    body.site-ptapalu .header-main {
        box-shadow: 0 8px 22px rgb(16 43 58 / 7%);
        padding-block: 1rem !important;
    }

    body.site-ptapalu .brand-area {
        gap: 1rem !important;
        padding-left: 0;
    }

    body.site-ptapalu .brand-area::before {
        background: linear-gradient(var(--pta-secondary), var(--pta-accent-light));
        flex: 0 0 auto;
        height: 78px;
        margin-right: 14px;
        position: static;
        transform: none;
        width: 5px;
    }

    body.site-ptapalu .brand-area .img-logo {
        /* PTA has one institutional line fewer than PA, so a slightly smaller
           visual logo keeps its top and bottom aligned with the text block. */
        height: 82px !important;
        max-height: 82px !important;
        max-width: 94px !important;
        object-fit: contain;
        width: 94px !important;
    }

    body.site-ptapalu .navbar-nav {
        flex-wrap: nowrap;
    }
}

@media (min-width: 992px) and (max-width: 1300px) {
    body.site-ptapalu .navbar-nav > li > a,
    body.site-ptapalu .navbar-nav > li > span,
    body.site-ptapalu .navbar-nav > li > button {
        font-size: 0.92rem;
        padding-inline: 11px !important;
    }
}