/**
 * File        : landing-hero.css
 * Description : Color tokens, font pairing, & styling final — header/main/footer + Poppins/Lato.
 * Project     : lib.test — CANDRALOKA PUSTAKA
 * Author      : CLU (UI/UX & Product Designer)
 * Created     : 2026-07-11
 * Updated     : 2026-07-18
 */

:root {
    --color-header-teal: #005751;
    /* [THECHNOLOGY-MOD] : token strip bg & height dihapus — dead token,
       strip header/footer sudah tidak ada (temuan QC 2026-07-16) */
    --color-main-bg: #F1F8F7;
    --color-navy: #0a2a62;
    --color-accent: #1b3bee;
    --color-body: #444444;
    --color-contrast: #ffffff;
    --font-heading: 'Poppins', sans-serif;
    --font-body: 'Lato', sans-serif;
}

/* ===== Global Typography ===== */
body {
    font-family: var(--font-body);
    background: var(--color-main-bg);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
}

/* ===== Main Layout ===== */
.main-content {
    background-color: var(--color-main-bg);
    padding-top: 0;
    padding-bottom: 0;
}

/* ===== Hero (Layer 1) ===== */
.hero {
    position: relative;
    display: flex;
    width: 100%;
    /* [THECHNOLOGY-MOD] : Full viewport — header strip removed (Layer 1/3 parity with Layer 2) */
    min-height: 100dvh;
    align-self: stretch;
    overflow: hidden;
}

.hero-content {
    position: relative;
    z-index: 2;
    flex: 0 0 35%;
    display: flex;
    flex-direction: column;
    /* [THECHNOLOGY-MOD] : ganti dari center+translateY ke flex-start+padding-top —
       translateY(%) dihitung dari tinggi elemen sendiri, hasilnya tidak proporsional.
       padding-top lebih predictable dan mudah di-tuning visual. */
    justify-content: flex-start;
    align-items: center;
    text-align: center;
    padding: 2rem 2.5rem;
    background: transparent;
}

.hero-content img {
    width: 80px;
    height: 80px;
    object-fit: contain;
    margin-bottom: 1.5rem;
    align-self: center;
}

.hero-content h1 {
    font-family: var(--font-heading);
    font-size: clamp(1.8rem, 4vw, 2.5rem);
    font-weight: 800;
    color: var(--color-navy);
    line-height: 1.15;
    margin-bottom: 0.5rem;
}

.hero-sub {
    font-family: var(--font-heading);
    font-size: clamp(1.15rem, 2.5vw, 1.5rem);
    font-weight: 600;
    color: var(--color-header-teal);
    margin-bottom: 1rem;
}

.hero-desc {
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--color-body);
    line-height: 1.7;
    margin-bottom: 2rem;
}

.hero-btn {
    font-family: var(--font-body);
    padding: 0.75rem 2rem;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 0.5rem;
    background: var(--color-header-teal);
    color: #fff;
    border: none;
    display: inline-flex;
    align-items: center;
    align-self: center;
    text-decoration: none;
    transition: background 200ms ease;
}

.hero-btn:hover {
    background: #004740;
    color: #fff;
}

.hero-btn:focus-visible {
    outline: 3px solid var(--color-accent);
    outline-offset: 3px;
}

.hero-media {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.hero-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ===== Hero — Responsive ===== */
@media (max-width: 991.98px) {
    .hero {
        flex-direction: column;
        min-height: auto;
    }

    .hero-content {
        position: static;
        flex: 0 0 auto;
        padding: 2.5rem 1.5rem;
        align-items: center;
        text-align: center;
        background: var(--color-main-bg);
    }

    .hero-btn {
        align-self: center;
    }

    .hero-media {
        position: static;
        z-index: auto;
        flex: 0 0 auto;
        height: 35vh;
        min-height: 240px;
    }
}

@media (max-width: 767.98px) {
    .hero-content {
        padding: 2rem 1.25rem;
    }

    .hero-media {
        height: 28vh;
        min-height: 200px;
    }

    .hero-content h1 {
        font-size: clamp(1.5rem, 5vw, 2rem);
    }
}

/* ===== Footer ===== */
/* [THECHNOLOGY-MOD] : Overlay transparan fixed — parity dengan Layer 2 (full-bleed foto, footer teks tipis nempel di foto) */
footer.site-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 3;
    background: transparent;
    padding: 1rem 0;
    text-align: center;
}

footer.site-footer p {
    font-family: var(--font-body);
    color: var(--color-navy);
}

.footer-credit {
    font-size: 0.8125rem;
    color: var(--color-body);
}

.footer-credit a {
    color: var(--color-header-teal);
    font-weight: 600;
    text-decoration: none;
}

.footer-credit a:hover {
    text-decoration: underline;
}

.footer-credit a:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

/* ===== Layer 3 — Service Selection Heading ===== */
.layer-section .layer-heading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 0 2rem;
    text-align: center;
}

/* [THECHNOLOGY-MOD] : samakan weight & size dengan .hero-content h1 (Layer 1)
   untuk konsistensi heading utama antar layer */
.layer-section .welcome-text {
    font-family: var(--font-heading);
    color: var(--color-navy);
    font-weight: 800;
    font-size: clamp(1.8rem, 4vw, 2.5rem);
    text-transform: uppercase;
    margin-bottom: 0;
}

/* [THECHNOLOGY-MOD] : heading Layer 3 kegedean di mobile, size dikecilkan
   (weight tetap 800 untuk konsistensi bobot). Blok media query WAJIB setelah
   rule base di atas — sebelumnya ditulis sebelum rule base sehingga kalah
   cascade order dan tidak pernah aktif (temuan QC 2026-07-16, fix #3) */
@media (max-width: 767.98px) {
    .layer-section .welcome-text {
        font-size: 1.5rem;
    }
}

/* ===== Layer 3 — Full-Bleed Wrapper + Vertical Centering ===== */
/* [THECHNOLOGY-MOD] : .container dipindah ke DALAM .layer-section (lihat index.php) —
   .layer-section sekarang wrapper luar full-width/full-viewport, parity dengan .hero.
   Rule lama ".main-content > .container { margin: auto }" dihapus karena .container
   bukan lagi direct child .main-content — dead selector, centering dipindah ke sini. */
/* [THECHNOLOGY-MOD] : background-image (webp) diganti CSS gradient — percobaan
   background-image (backdrop polos & versi ilustrasi rak buku) sama-sama tidak
   cocok (terlalu kosong / terlalu ramai), gradient dipilih supaya konsisten warm-tone
   tanpa file image tambahan & tanpa risiko noise visual */
/* [THECHNOLOGY-MOD] : justify-content center → flex-start + padding-top — heading & card
   digeser ke atas sebagai satu unit (bukan cuma heading), karena keduanya 1 flex item
   yang sama (.container) di dalam .layer-section */
.layer-section {
    width: 100%;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding-top: clamp(1.5rem, 5vw, 3rem);
    background: linear-gradient(180deg, #E4D3B8 0%, #C9B291 55%, #A88D66 100%);
}

/* ===== Layer 3 — Mobile (heading bias atas + clearance footer fixed) ===== */
/* [THECHNOLOGY-MOD] : fix laporan mobile in-app browser (FB/WA WebView) —
   (a) footer.site-footer position:fixed TIDAK mendorong konten dalam document
       flow; di mobile 2 card stacked (col-12) bottom card ketutupan footer
       (terukur: card bottom 639px vs footer top 598px @375x667 = overlap 41px).
       padding-bottom 6rem = tinggi footer aktual (~70px, bisa 2 baris + wrap
       di layar sempit) + gap aman ~26px, margin ekstra untuk WebView.
   (b) padding-top dikurangi khusus mobile → heading "Silakan pilih layanan"
       bias lebih ke atas, tidak kegantung ke tengah.
   Scoped ke .layer-section (Layer 3 only) — TIDAK menyentuh .hero (Layer 1).
   Blok WAJIB setelah rule base .layer-section di atas (cascade order). */
@media (max-width: 767.98px) {
    .layer-section {
        padding-top: 1rem;
        padding-bottom: 6rem;
    }
}