/*
 * Saiz header — bar tarikh/jam, baris logo (jata + nama portal) dan bar
 * menu — serta elemen abstrak latar baris logo.
 *
 * Templat header dalam DB TIDAK disunting; setiap bahagian disasarkan
 * dengan :has() pada kandungan yang memang unik padanya:
 *   BAR ATAS = bekas Spectra yang memegang #jam-live-saya
 *   BARIS    = kumpulan berlatar putih yang memegang blok ikpkt/pautan-pantas
 *   DALAM    = kumpulan alignwide di dalamnya (flex: logo kiri, pautan kanan)
 *   MENU     = kumpulan merah yang memegang butang .butang-kursus-hover
 * Tanpa sokongan :has(), header kekal seperti asal.
 *
 * Peraturan baris logo dan menu dibungkus :where() (keutamaan sifar) supaya
 * peraturan mod padat header terapung (header-terapung.css) sentiasa menang.
 */

/* --- 0. Bar tarikh/jam ----------------------------------------------------
   Dua bekas Spectra bersarang, masing-masing padding 10px atas & bawah
   (40px ruang menegak di sekeliling teks 15px). Dikurangkan kepada
   4px + 2px; tinggi bar kini ditentukan oleh pil bahasa (32px). */
header .wp-block-uagb-container:has(#jam-live-saya) {
    padding-top: 4px !important;
    padding-bottom: 4px !important;
    min-height: 0 !important;
}

header .wp-block-uagb-container:has(#jam-live-saya) .wp-block-uagb-container:has(#jam-live-saya) {
    padding-top: 2px !important;
    padding-bottom: 2px !important;
}

/* Gaya asal dalam blok html templat: .header-tarikh-saya { font-size: 15px } */
header .header-tarikh-saya {
    font-size: 14px;
    color: #374151;
    letter-spacing: 0.01em;
}

/* --- 0b. Pil tarikh & jam ------------------------------------------------
   #jam-live-saya diisi oleh skrip dalam blok html templat header dengan tiga
   span: .jam-masihi, .jam-hijrah, .jam-masa. Pemisah asal " | " datang
   daripada CSS dalam blok yang sama
     #jam-live-saya .jam-bahagian + .jam-bahagian::before { content: "|" }
   (1,2,1) — diganti di sini dengan ikon (topeng SVG, warna tema) dan garis
   pemisah halus. Skrip dan templat dalam DB tidak disentuh.
   Tinggi pil 32px = sama dengan pil bahasa di sebelah kanan bar. */
header #jam-live-saya {
    display: inline-flex;
    align-items: center;
    box-sizing: border-box;
    height: 32px;
    padding: 0 4px;
    background: #ffffff;
    border: 1px solid #d5dae2;
    border-radius: 999px;
    box-shadow: 0 1px 2px rgba(17, 24, 39, 0.05);
    line-height: 1;
}

/* Blok asal: .header-tarikh-saya > * + * { margin-left: 15px !important } */
header .header-tarikh-saya > #jam-live-saya {
    margin-left: 0 !important;
}

header #jam-live-saya .jam-bahagian {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0 12px;
    color: #374151;
    white-space: nowrap;
}

header #jam-live-saya .jam-bahagian + .jam-bahagian {
    border-left: 1px solid #e5e7eb;
}

/* Ikon: topeng SVG diwarnakan dengan background-color, jadi warna tema
   dikawal di satu tempat. */
header #jam-live-saya .jam-bahagian.jam-masihi::before,
header #jam-live-saya .jam-bahagian.jam-hijrah::before,
header #jam-live-saya .jam-bahagian.jam-masa::before {
    content: "" !important;
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    margin: 0 !important;
    background-color: #cf2e2e;
    -webkit-mask: var(--ikpkt-ikon) center / contain no-repeat;
            mask: var(--ikpkt-ikon) center / contain no-repeat;
}

header #jam-live-saya .jam-masihi {
    --ikpkt-ikon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4.5' width='18' height='16.5' rx='2.5'/%3E%3Cpath d='M16 2.5v4M8 2.5v4M3 9.5h18'/%3E%3C/svg%3E");
}

header #jam-live-saya .jam-hijrah {
    --ikpkt-ikon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.5 14.2A8.5 8.5 0 1 1 9.8 3.5a6.6 6.6 0 0 0 10.7 10.7z'/%3E%3C/svg%3E");
}

header #jam-live-saya .jam-masa {
    --ikpkt-ikon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3.2 2'/%3E%3C/svg%3E");
    color: #1f2937;
    font-weight: 600;
    /* Digit lebar sama: jam tidak "bergoyang" bila minit berubah. */
    font-variant-numeric: tabular-nums;
}

/* Telefon: blok asal menyusun jam dalam grid dua baris (Hijrah di baris
   kedua). Pil menjadi segi empat bucu bulat; pemisah hanya antara Masihi
   dan masa (baris pertama). */
@media (max-width: 600px) {
    /* display mesti diulang: header #jam-live-saya (1,0,1) di atas
       mengatasi inline-grid blok asal (1,0,0) dan akan merosakkan susunan
       dua baris. Grid 2 lajur; .jam-hijrah ke baris 2 (peraturan asal). */
    header #jam-live-saya {
        display: inline-grid;
        grid-template-columns: auto auto;
        justify-content: center;
        height: auto;
        padding: 6px 4px;
        border-radius: 14px;
        row-gap: 6px;
    }

    header #jam-live-saya .jam-bahagian.jam-hijrah {
        border-left: 0;
        justify-content: center;
    }
}

/* --- 1. Saiz baris logo ----------------------------------------------------
   Padding asal (~22px atas/bawah) datang daripada peraturan teras WP
   :where(.wp-block-group.has-background) { padding: 1.25em 2.375em }. */
:where(.wp-block-group:has(> .wp-block-group > .ikpkt-pautan-pantas)) {
    padding-top: 14px !important;
    padding-bottom: 14px !important;
}

/* 587px -> 440px. Peraturan Spectra (.uagb-block-xxx ... img) tiada
   !important, jadi ini mengatasinya; mod padat (290px) kekal menang. */
:where(.wp-block-group:has(> .ikpkt-pautan-pantas)) .wp-block-uagb-image__figure img {
    width: 440px !important;
    max-width: 100%;
    height: auto !important;
    /* JPG logo berlatar putih tulen: multiply menjadikan putih itu telus
       di atas corak latar, tanpa menyunting imej logo. */
    mix-blend-mode: multiply;
}

/* --- 2. Elemen abstrak latar -------------------------------------------- */
:where(.wp-block-group:has(> .wp-block-group > .ikpkt-pautan-pantas)) {
    position: relative;
    isolation: isolate;
    overflow: hidden;
}

/* Lengkungan sepusat di tepi kanan atas & kiri bawah skrin, dan segi empat
   bucu bulat kecil — bahasa visual sama seperti bahagian tab bantuan. */
:where(.wp-block-group:has(> .wp-block-group > .ikpkt-pautan-pantas))::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='150' fill='none' stroke='%23cf2e2e' stroke-width='1.2'%3E%3Ccircle cx='330' cy='-6' r='54' stroke-opacity='.26'/%3E%3Ccircle cx='330' cy='-6' r='92' stroke-opacity='.18'/%3E%3Ccircle cx='330' cy='-6' r='132' stroke-opacity='.11'/%3E%3Crect x='150' y='86' width='30' height='30' rx='8' stroke-opacity='.2' transform='rotate(18 165 101)'/%3E%3Ccircle cx='214' cy='34' r='3.5' fill='%23cf2e2e' fill-opacity='.22' stroke='none'/%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='150' fill='none' stroke='%23cf2e2e' stroke-width='1.2'%3E%3Ccircle cx='-10' cy='160' r='60' stroke-opacity='.2'/%3E%3Ccircle cx='-10' cy='160' r='100' stroke-opacity='.12'/%3E%3C/svg%3E"),
        radial-gradient(120% 140% at 100% 0%, rgba(237, 162, 74, 0.07) 0%, rgba(207, 46, 46, 0.03) 35%, transparent 60%);
    background-repeat: no-repeat;
    background-position: right top, left bottom, 0 0;
    background-size: auto 100%, auto 100%, 100% 100%;
}

/* Grid titik di ruang antara logo dan pautan pantas, pudar di kedua-dua
   hujung supaya tidak menyentuh logo mahupun butang. */
:where(.wp-block-group:has(> .ikpkt-pautan-pantas)) {
    position: relative;
}

:where(.wp-block-group:has(> .ikpkt-pautan-pantas))::before {
    content: "";
    position: absolute;
    top: 10%;
    bottom: 10%;
    left: 44%;
    right: 20%;
    z-index: -1;
    pointer-events: none;
    background-image: radial-gradient(circle, rgba(207, 46, 46, 0.2) 1.1px, transparent 1.5px);
    background-size: 14px 14px;
    background-position: center;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 30%, #000 70%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 30%, #000 70%, transparent 100%);
}

/* --- 3. Bar menu -----------------------------------------------------------
   85px (gaya inline templat, min-height) -> 64px. Mod padat header
   terapung kekal lebih rendah (header-terapung.css: 52px). */
:where(header .wp-block-group.has-background:has(.butang-kursus-hover)) {
    min-height: 64px !important;
}

:where(header .wp-block-group.has-background:has(.butang-kursus-hover)) .wp-block-navigation-item__content {
    /* Tema: :root :where(.wp-block-navigation) { font-size: small } ~ 16px. */
    font-size: 15px;
}

:where(header .butang-kursus-hover) .wp-block-button__link {
    padding: 10px 22px !important;
    font-size: 14px;
    line-height: 1.2;
}

/* --- 4. Skrin lebih kecil ----------------------------------------------- */
@media (max-width: 1024px) {
    :where(.wp-block-group:has(> .ikpkt-pautan-pantas)) .wp-block-uagb-image__figure img {
        width: 380px !important;
    }

    :where(.wp-block-group:has(> .ikpkt-pautan-pantas))::before {
        left: 50%;
        right: 26%;
    }
}

@media (max-width: 781px) {
    :where(.wp-block-group:has(> .ikpkt-pautan-pantas)) .wp-block-uagb-image__figure img {
        width: 320px !important;
    }

    /* Logo dan butang bertindan (lihat pautan-pantas.css): tiada ruang
       tengah untuk grid titik; lengkungan dikecilkan. */
    :where(.wp-block-group:has(> .ikpkt-pautan-pantas))::before {
        display: none;
    }

    :where(.wp-block-group:has(> .wp-block-group > .ikpkt-pautan-pantas))::after {
        background-size: auto 70%, auto 60%, 100% 100%;
    }
}