/* common/assets/kppu-brand/css/kppu-brand.css */
/* JDIH KPPU brand overrides — design tokens per docs/kppu/stitch_modern_ildis_ui_redesign/DESIGN.md */

:root {
    /* Colors: hex values are the DESIGN.md token set verbatim. */
    --kppu-primary: #9a4600;
    --kppu-primary-container: #f47920;
    /* CTA orange */
    --kppu-on-primary-container: #572400;
    --kppu-secondary: #255dad;
    /* structural navy */
    --kppu-on-surface: #1a1c1e;
    --kppu-on-surface-variant: #574237;
    --kppu-tertiary: #595f65;
    /* muted body text */
    --kppu-outline: #8b7265;
    --kppu-outline-variant: #dec0b1;
    --kppu-surface: #f9f9fc;
    --kppu-surface-container-low: #f3f3f6;
    --kppu-surface-container: #eeeef0;
    --kppu-surface-container-lowest: #ffffff;
    /* Maroon: sampled from the KPPU brand mockup (screen.png) for the
       announcement ticker and footer — not one of DESIGN.md's named
       tokens, since that file doesn't specify this exact band color. */
    --kppu-maroon: #7a1220;
    --kppu-maroon-dark: #5c0d18;
    /* Soft gold used for small accents on dark/maroon surfaces (footer
       "Hukum" highlight, footer link hover, nav underline) — softer
       than the vibrant CTA orange, reads better as a subtle accent. */
    --kppu-gold: #ffd7a8;
}

body {
    --kppu-brand-loaded: 1;
    font-family: 'Inter', sans-serif;
    color: var(--kppu-on-surface);
    background-color: var(--kppu-surface);
}

.kppu-headline,
h1.kppu-headline,
h2.kppu-headline,
h3.kppu-headline {
    font-family: 'IBM Plex Sans', sans-serif;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--kppu-on-surface);
}

.kppu-label {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 500;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

/* ---- Hero ----
   Note: the base theme's own stylesheet (frontend/assets/css/style.css)
   sets `h1,h2,h3,h4,h5,h6 { color:#000 }` and loads AFTER this bundle
   (Yii2 registers a bundle's $depends before the bundle's own files) —
   so heading colors in the hero must be !important or they render black
   on the dark gradient. */
.kppu-hero {
    position: relative;
    /* Deliberately NOT margin-top:80px for the header offset — margin
       would push the whole section (background included) down below
       the header, leaving nothing behind the transparent header but
       blank body background (the bug this replaced: the header read
       as solid white instead of showing the hero image through it).
       padding-top keeps the background/image spanning the full
       viewport from y:0 while still clearing the header for the text. */
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 6.5rem 1.5rem 4rem;
    text-align: center;
    color: #ffffff;
    overflow: hidden;
}

.kppu-hero__bg {
    position: absolute;
    inset: 0;
    /* Note: this CSS file is served as a static asset, not processed by
       Yii, so it cannot use a `@web` alias — this must be the actual
       resolved URL. frontend/web/images/ is served at the site root
       (confirmed: frontend's document root is the repo root). */
    background-image: linear-gradient(160deg, rgba(122, 18, 32, 0.38) 0%, rgba(92, 13, 24, 0.46) 100%), url('/images/hero-bg.png');
    background-size: cover;
    background-position: center;
    pointer-events: none;
}

.kppu-hero__content {
    position: relative;
    max-width: 46rem;
}

.kppu-hero__scroll-cue {
    position: absolute;
    left: 50%;
    bottom: 1.75rem;
    transform: translateX(-50%);
    color: rgba(255, 255, 255, 0.75);
    font-size: 1.5rem;
    animation: kppu-hero-bounce 2s ease-in-out infinite;
}

.kppu-hero__scroll-cue:hover {
    color: #ffffff;
}

@keyframes kppu-hero-bounce {

    0%,
    100% {
        transform: translateX(-50%) translateY(0);
    }

    50% {
        transform: translateX(-50%) translateY(6px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .kppu-hero__scroll-cue {
        animation: none;
    }
}

.kppu-hero__title {
    position: relative;
    font-family: 'IBM Plex Sans', sans-serif;
    font-weight: 700;
    font-size: clamp(1.35rem, 2.4vw, 1.75rem);
    line-height: 1.35;
    margin-bottom: 0.6rem;
    color: #ffffff !important;
    /* The overlay was lightened to let the background photo show
       through more, so text needs its own contrast boost against
       busier/lighter parts of the image underneath. */
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
}

.kppu-hero__subtitle {
    position: relative;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.92);
    max-width: 34rem;
    margin: 0 auto 1.75rem;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);
}

.kppu-hero__search {
    position: relative;
    max-width: 560px;
    margin: 0 auto;
}

/* Deliberately not using Bootstrap's .input-group/.form-control/.btn
   here — those carry their own border-radius via CSS custom properties
   (--bs-btn-border-radius etc.) that kept winning the cascade even
   against !important overrides, leaving the box half-square. This is
   a plain flex box fully owned by this stylesheet instead. */
.kppu-hero__search-box {
    display: flex;
    align-items: stretch;
    border-radius: 0.5rem;
    overflow: hidden;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
}

.kppu-hero__search-input {
    flex: 1 1 auto;
    min-width: 0;
    border: none;
    outline: none;
    padding: 0.8rem 1.25rem;
    font-size: 0.9rem;
    font-family: 'Inter', sans-serif;
    color: var(--kppu-on-surface);
    background: #ffffff;
}

.kppu-hero__search-btn {
    flex: 0 0 auto;
    border: none;
    background-color: var(--kppu-primary-container);
    color: #ffffff;
    padding: 0 1.5rem;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.kppu-hero__search-btn:hover {
    background-color: var(--kppu-primary);
}

.kppu-hero__chips {
    margin-top: 1.25rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
}

.kppu-hero__chip {
    font-size: 0.8125rem;
    padding: 0.35rem 0.9rem;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.15);
    color: #ffffff;
    text-decoration: none;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.kppu-hero__chip:hover {
    background: rgba(255, 255, 255, 0.28);
    color: #ffffff;
}

/* ---- Stat cards (overlapping the hero, per mockup) ---- */
.kppu-stats {
    margin-top: -3.5rem;
    position: relative;
    z-index: 3;
}

.kppu-stat-card {
    background: var(--kppu-surface-container-lowest);
    border: 1px solid #e6ebf2;
    border-radius: 0.5rem;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.05);
    padding: 1.25rem 1rem;
    text-align: center;
    height: 100%;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.kppu-stat-card:hover {
    box-shadow: 0 10px 24px rgba(122, 18, 32, 0.1);
    transform: translateY(-2px);
}

.kppu-stat-card__icon {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(122, 18, 32, 0.08);
    color: var(--kppu-maroon);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    margin: 0 auto 0.6rem;
}

.kppu-stat-card__value {
    font-family: 'IBM Plex Sans', sans-serif;
    font-weight: 700;
    font-size: 1.375rem;
    color: var(--kppu-maroon);
    margin-bottom: 0.1rem;
}

.kppu-stat-card__label {
    font-size: 0.75rem;
    color: var(--kppu-tertiary);
}

/* ---- Produk Hukum: 3-column list section ---- */
.kppu-section-title {
    text-align: center;
    margin-bottom: 2rem;
}

.kppu-section-title h2 {
    font-family: 'IBM Plex Sans', sans-serif;
    font-weight: 700;
    font-size: 1.375rem;
    color: var(--kppu-on-surface);
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
}

.kppu-section-title h2::before,
.kppu-section-title h2::after {
    content: '';
    width: 28px;
    height: 2px;
    background: var(--kppu-maroon);
}

.kppu-section-title p {
    color: var(--kppu-tertiary);
    font-size: 0.875rem;
    margin-top: 0.4rem;
}

.kppu-produk-col h3 {
    font-family: 'IBM Plex Sans', sans-serif;
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--kppu-on-surface);
    margin-bottom: 0.85rem;
}

.kppu-produk-item {
    display: flex;
    gap: 0.75rem;
    padding: 0.9rem 0.6rem;
    margin: 0 -0.6rem;
    border-bottom: 1px solid var(--kppu-surface-container);
    text-decoration: none;
    border-radius: 0.375rem;
    transition: background-color 0.15s ease;
}

.kppu-produk-item:hover {
    background-color: var(--kppu-surface-container-low);
}

.kppu-produk-item:hover .kppu-produk-item__title {
    color: var(--kppu-maroon);
}

.kppu-produk-item__icon {
    color: var(--kppu-maroon);
    flex-shrink: 0;
    margin-top: 0.15rem;
}

.kppu-produk-item__title {
    display: block;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--kppu-on-surface);
    line-height: 1.45;
    transition: color 0.15s ease;
}

.kppu-produk-item__year {
    display: block;
    font-family: 'JetBrains Mono', monospace;
    font-weight: 500;
    font-size: 0.75rem;
    color: var(--kppu-maroon);
    margin-bottom: 0.2rem;
}

.kppu-produk-empty {
    color: var(--kppu-tertiary);
    font-size: 0.875rem;
    padding: 0.75rem 0;
}

.kppu-btn-outline-maroon {
    border: 1px solid var(--kppu-maroon);
    color: var(--kppu-maroon);
    background: transparent;
    font-size: 0.8125rem;
    font-weight: 600;
    border-radius: 0.25rem;
    padding: 0.5rem 1.1rem;
    display: inline-block;
    text-decoration: none;
}

.kppu-btn-outline-maroon:hover {
    background: var(--kppu-maroon);
    color: #ffffff;
}

/* ---- Infografis (static placeholder cards) ---- */
.kppu-infografis-card {
    height: 220px;
    border-radius: 0.5rem;
    background: linear-gradient(160deg, var(--kppu-maroon) 0%, var(--kppu-maroon-dark) 100%);
    display: flex;
    align-items: flex-end;
    padding: 1.25rem;
    position: relative;
    overflow: hidden;
}

.kppu-infografis-card--alt {
    background: linear-gradient(160deg, var(--kppu-primary) 0%, var(--kppu-maroon) 100%);
}

.kppu-infografis-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 20% 15%, rgba(255, 255, 255, 0.12), transparent 55%);
}

.kppu-infografis-card__title {
    position: relative;
    color: #ffffff;
    font-family: 'IBM Plex Sans', sans-serif;
    font-weight: 700;
    font-size: 1.05rem;
    line-height: 1.35;
}

/* ---- Survei IKM ----
   No background override here (was surface-container-low/"gray") —
   it now sits right after Infografis (gray), so leaving it to inherit
   body's default keeps the white/gray/white/gray alternation intact
   instead of two gray sections back to back. */

.kppu-survey-card {
    background: var(--kppu-surface-container-lowest);
    border: 1px solid #e6ebf2;
    border-radius: 0.5rem;
    padding: 1.75rem;
}

.kppu-survey-card p {
    font-size: 0.875rem;
    color: var(--kppu-on-surface-variant);
}

.kppu-survey-label {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--kppu-tertiary);
    margin-bottom: 0.35rem;
}

.kppu-survey-stars i {
    color: var(--kppu-maroon);
    font-size: 1.1rem;
}

.kppu-survey-count {
    color: var(--kppu-tertiary);
    font-size: 0.8125rem;
    margin-top: 0.25rem;
}

/* Homepage: "Dokumen Terbaru" cards */
.kppu-latest-heading {
    color: #1a2752;
}

.kppu-latest-card:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08) !important;
}

/* Document listing: sort tabs */
.kppu-sort-tabs .nav-link {
    color: #64748b;
    font-weight: 600;
}

.kppu-sort-tabs .nav-link.active {
    color: #1a2752;
    border-bottom: 2px solid #1a2752;
}

/* Document detail: share buttons */
.kppu-share-panel .kppu-share-btn {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

/* ---- Header/navbar: maroon per KPPU brand ----
   frontend/assets/css/style.css sets #header background:#fff and loads
   AFTER this bundle (dependency ordering), so !important is required. */
#header {
    background: var(--kppu-maroon) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12) !important;
    transition: background-color 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

/* On the homepage only (main.php sets this class conditionally — every
   other page has plain content directly under the fixed header, where
   a see-through bar would be unreadable), the header starts transparent
   so the hero image/overlay shows through behind it, then solidifies
   once frontend/assets/js/main.js adds .header-scrolled on scroll. */
#header.kppu-header--on-hero {
    background: transparent !important;
    border-bottom-color: transparent !important;
    box-shadow: none !important;
}

#header.kppu-header--on-hero.header-scrolled {
    background: var(--kppu-maroon) !important;
    border-bottom-color: rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12) !important;
}

.kppu-brand-lockup {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

.kppu-brand-lockup__logo {
    /* The real JDIH KPPU logo is a wide multi-emblem lockup (~8:1
       aspect ratio), not a square icon — fix the height and let width
       follow naturally instead of squashing it into a square box. */
    display: block;
    height: 26px;
    width: auto !important;
    flex-shrink: 0;
}

.kppu-brand-lockup__logo img {
    /* frontend/assets/css/style.css has `#header .logo img { max-height:
       44px; height:auto }` — an ID selector, so it otherwise outranks
       this class rule regardless of source order. !important forces
       our smaller, more proportional size to actually apply. */
    height: 26px !important;
    max-height: none !important;
    width: auto !important;
    object-fit: contain;
}

.kppu-brand-lockup__text {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
    text-decoration: none;
}

.kppu-brand-lockup__title {
    font-family: 'IBM Plex Sans', sans-serif;
    font-weight: 700;
    font-size: 0.95rem;
    color: #ffffff;
}

.kppu-brand-lockup__subtitle {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.75);
}

#header.header-scrolled {
    background: var(--kppu-maroon-dark) !important;
}

/* Top-level nav links only (direct children of the root <ul>) — white
   on the maroon bar. Deliberately NOT `.navbar-menu-desktop a` (every
   descendant link), because that also matched links inside dropdown
   submenus (`.navbar .dropdown ul`, white background per the base
   theme's own CSS), rendering them invisible white-on-white. */
.navbar-menu-desktop,
.navbar-menu-desktop > ul > li > a {
    color: rgba(255, 255, 255, 0.92) !important;
    font-size: 0.875rem;
    font-weight: 500;
}

.navbar-menu-desktop > ul > li > a {
    position: relative;
    padding-bottom: 0.15rem;
    transition: color 0.2s ease;
}

.navbar-menu-desktop > ul > li > a::after {
    /* frontend/assets/css/style.css sets `.navbar a { padding: 10px 0
       10px 30px }` — the visible text starts 30px in from the anchor's
       own box (0 padding on the right), so the underline must start at
       the same 30px, not the anchor's left edge, or it reads as wider
       than the word and not aligned under it. */
    content: '';
    position: absolute;
    left: 30px;
    right: 0;
    bottom: -1px;
    height: 2px;
    background: var(--kppu-gold);
    border-radius: 1px;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.2s ease;
}

.navbar-menu-desktop > ul > li > a:hover {
    color: #ffffff !important;
}

.navbar-menu-desktop > ul > li > a:hover::after {
    transform: scaleX(1);
}

/* Dropdown submenu: recolor the hover accent from blue to maroon, tone
   down the corner radius/shadow to a more standard, compact look, and
   force consistent row sizing — the Menu widget emits bare <ul><li>
   with no reset class, so without this the items pick up an
   oversized/inconsistent line-height from elsewhere in the cascade. */
.navbar .dropdown ul {
    border-radius: 0.375rem !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1) !important;
    padding: 0.4rem 0 !important;
}

.navbar .dropdown ul li {
    margin: 0 !important;
    min-width: 180px;
}

.navbar .dropdown ul a {
    display: block;
    color: #475569 !important;
    font-size: 0.875rem;
    line-height: 1.4 !important;
    padding: 0.5rem 1.1rem !important;
    white-space: nowrap;
}

.navbar .dropdown ul a:hover,
.navbar .dropdown ul .active:hover,
.navbar .dropdown ul li:hover > a {
    color: var(--kppu-maroon) !important;
    background-color: var(--kppu-surface-container-low);
}

/* The base theme always anchors dropdowns to the parent <li>'s left
   edge (`left: 14px`), which pushes the menu off the right side of the
   viewport for nav items near the end of the bar (e.g. "Link
   Terkait"). Anchor the last top-level dropdown from the right instead. */
.navbar-menu-desktop > ul > li.dropdown:last-child > ul {
    left: auto !important;
    right: 0 !important;
}

.mobile-nav-toggle {
    color: #ffffff !important;
}

/* ---- Footer (KPPU maroon, 4-column) ---- */
.kppu-footer {
    background: var(--kppu-maroon);
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.8125rem;
    padding: 2.75rem 0 1.5rem;
}

.kppu-footer__shell {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
}

.kppu-footer__title {
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.4;
    color: #ffffff;
    margin-bottom: 0.85rem;
}

.kppu-footer__accent {
    color: var(--kppu-gold);
}

.kppu-footer__org {
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 0.75rem;
}

.kppu-footer__item {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    margin-bottom: 0.6rem;
    line-height: 1.5;
}

.kppu-footer__heading {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #ffffff;
    margin-bottom: 1rem;
}

.kppu-footer__social {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.kppu-footer__social-link {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.kppu-footer__social-link:hover {
    background: rgba(255, 255, 255, 0.24);
    color: #ffffff;
}

.kppu-footer__awards {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.kppu-footer__award-badge {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.35);
    color: rgba(255, 255, 255, 0.7);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
}

.kppu-footer__stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem 1rem;
    margin-bottom: 0.5rem;
}

.kppu-footer__stat-num {
    font-weight: 700;
    color: #ffffff;
    font-variant-numeric: tabular-nums;
}

.kppu-footer__stat-label {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.7);
}

.kppu-footer__link {
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    line-height: 1.9;
}

.kppu-footer__link:hover {
    color: #ffffff;
}

.kppu-footer__bottom {
    text-align: center;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.65);
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    margin-top: 2rem;
    padding-top: 1.25rem;
}

.kppu-footer__bottom a {
    color: var(--kppu-gold);
    font-weight: 600;
    text-decoration: none;
}

/* ---- Responsive adjustments ----
   The base theme already hides the desktop menu and shows the
   hamburger toggle below 991px (frontend/assets/css/style.css), so the
   header at that point only has to fit: logo + brand text + toggle
   button. A long instansi name could still overflow that row on narrow
   phones, so the subtitle shrinks and truncates instead of wrapping or
   pushing the toggle off-screen. */
@media (max-width: 480px) {
    .kppu-brand-lockup__text {
        max-width: 140px;
    }

    .kppu-brand-lockup__subtitle {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .kppu-hero__title {
        font-size: 1.375rem;
    }

    .kppu-hero__subtitle {
        font-size: 0.85rem;
    }
}

@media (max-width: 767.98px) {
    .kppu-hero {
        /* #header stays a fixed 80px tall at every breakpoint (no
           mobile override in the base theme) — padding-top must clear
           that regardless of screen size, or the title renders
           partially hidden underneath it. */
        min-height: auto;
        padding-top: 6rem;
        padding-bottom: 3rem;
    }

    .kppu-hero__scroll-cue {
        display: none;
    }

    .kppu-stat-card {
        padding: 1rem 0.5rem;
    }

    .kppu-footer__stats {
        grid-template-columns: 1fr;
    }
}