/* ============================================================================
   csf-event.css — SKIN UNTUK PLUGIN CSF EVENT
   ----------------------------------------------------------------------------
   APA INI
     Plugin CSF Event membawa gaya bawaannya sendiri yang netral (terang, font
     sistem) supaya tetap bisa dipakai di tema mana pun. Berkas ini memetakan
     gaya itu ke design token milik tema: font Plus Jakarta Sans / Noto Serif,
     palet forest–sage, radius, dan bayangan yang sama dengan halaman post.

   KENAPA DI TEMA, BUKAN DI PLUGIN
     Sama seperti entry-content.css: plugin tidak boleh tahu-menahu soal tema
     tertentu. Tema yang memutuskan tampilannya sendiri.

   YANG DISKIN DI SINI
     Komponen yang dirender plugin dan muncul di luar template tema:
       - popup undangan (tampil di SEMUA halaman)
       - formulir pendaftaran & pesan validasi
       - kartu tiket + QR
       - badge status, hitung mundur, galeri, tombol Tambah ke Kalender
     Tata letak halaman kegiatan sendiri ada di single-kegiatan.php.

   URUTAN
     Dimuat setelah main.css DAN setelah stylesheet plugin, sehingga token di
     bawah ini menang.
   ========================================================================== */

/* ----------------------------------------------------------------------------
   1. PEMETAAN TOKEN
   Plugin membaca variabel ini untuk semua warnanya. Cukup timpa di sini dan
   seluruh komponen plugin ikut berubah.
   -------------------------------------------------------------------------- */
:root {
    --csfev-brand: rgb(var(--color-secondary-rgb));               /* sage — aksi utama   */
    --csfev-accent: rgb(var(--color-accent-yellow-rgb));          /* kuning aksen        */
    --csfev-ink: rgb(var(--color-primary-rgb));                   /* teks utama (putih)  */
    --csfev-muted: rgb(var(--color-on-surface-variant-rgb));      /* teks sekunder       */
    --csfev-line: rgb(var(--color-outline-variant-rgb) / 0.45);   /* garis & tepi        */
    --csfev-surface: rgb(var(--color-surface-container-rgb) / 0.55);
    --csfev-soft: rgb(var(--color-surface-variant-rgb) / 0.35);
    --csfev-radius: var(--radius-default);
    --csfev-shadow: var(--shadow-article);

    --csfev-font-body: var(--font-body);
    --csfev-font-heading: var(--font-headline);
    --csfev-font-label: var(--font-label);
}

/* ----------------------------------------------------------------------------
   2. TIPOGRAFI
   -------------------------------------------------------------------------- */
.csfev-root {
    font-family: var(--font-body);
    font-size: var(--font-size-body-md);
    line-height: var(--line-height-body-md);
    color: rgb(var(--color-on-surface-rgb));
}

.csfev-root h2,
.csfev-root h3,
.csfev-root .csfev-popup-single__title,
.csfev-root .csfev-form__title {
    font-family: var(--font-headline);
    color: rgb(var(--color-primary-rgb));
    line-height: var(--line-height-headline-md);
    font-weight: var(--font-weight-headline-md);
}

/* Label mikro huruf kapital — pola yang dipakai di seluruh situs. */
.csfev-root .csfev-label,
.csfev-root .csfev-meta__label,
.csfev-root .csfev-ticket__label,
.csfev-root .csfev-countdown__label,
.csfev-root .csfev-share__label,
.csfev-root .csfev-badge,
.csfev-root .csfev-btn {
    font-family: var(--font-label);
    letter-spacing: var(--letter-spacing-label-caps);
    text-transform: uppercase;
}

.csfev-root .csfev-label,
.csfev-root .csfev-meta__label,
.csfev-root .csfev-ticket__label,
.csfev-root .csfev-countdown__label {
    font-size: var(--font-size-label-caps);
    font-weight: var(--font-weight-label-caps);
    color: rgb(var(--color-secondary-rgb));
}

/* ----------------------------------------------------------------------------
   3. TOMBOL — pil putih seperti atoms/button-primary
   -------------------------------------------------------------------------- */
.csfev-root .csfev-btn {
    border-radius: var(--radius-full);
    font-size: var(--font-size-label-caps);
    font-weight: var(--font-weight-label-caps);
    transition: all var(--transition-base);
}

.csfev-root .csfev-btn--primary {
    background: rgb(var(--color-primary-rgb));
    color: rgb(var(--color-on-primary-rgb));
    box-shadow: 0 20px 25px -5px rgb(var(--color-primary-rgb) / 0.1);
}
.csfev-root .csfev-btn--primary:hover {
    background: rgb(var(--color-primary-rgb));
    color: rgb(var(--color-on-primary-rgb));
    transform: scale(1.05);
}

.csfev-root .csfev-btn--secondary,
.csfev-root .csfev-btn--ghost {
    background: transparent;
    color: rgb(var(--color-primary-rgb));
    border: 1px solid rgb(var(--color-glow-rgb) / 0.2);
}
.csfev-root .csfev-btn--secondary:hover,
.csfev-root .csfev-btn--ghost:hover {
    background: rgb(var(--color-primary-rgb));
    color: rgb(var(--color-on-primary-rgb));
}

.csfev-root .csfev-btn--link {
    text-transform: none;
    letter-spacing: normal;
    font-family: var(--font-body);
    color: rgb(var(--color-on-surface-variant-rgb));
}

/* ----------------------------------------------------------------------------
   4. FORMULIR — permukaan gelap, garis tipis, fokus sage
   -------------------------------------------------------------------------- */
.csfev-root .csfev-label {
    color: rgb(var(--color-secondary-rgb));
}

.csfev-root .csfev-input {
    background: rgb(var(--color-surface-container-lowest-rgb) / 0.6);
    border: 1px solid rgb(var(--color-outline-variant-rgb) / 0.5);
    border-radius: 12px;
    color: rgb(var(--color-on-surface-rgb));
    font-family: var(--font-body);
    font-size: 16px;                       /* tetap ≥16px: cegah zoom iOS */
}
.csfev-root .csfev-input::placeholder {
    color: rgb(var(--color-on-surface-variant-rgb) / 0.55);
}
.csfev-root .csfev-input:focus {
    border-color: rgb(var(--color-secondary-rgb));
    box-shadow: 0 0 0 3px rgb(var(--color-secondary-rgb) / 0.25);
}
.csfev-root .csfev-field.has-error .csfev-input {
    border-color: rgb(var(--color-error-rgb));
}
.csfev-root .csfev-error {
    color: rgb(var(--color-error-rgb));
    font-family: var(--font-body);
}
.csfev-root .csfev-help {
    color: rgb(var(--color-on-surface-variant-rgb) / 0.8);
}
.csfev-root .csfev-choice,
.csfev-root .csfev-consent {
    color: rgb(var(--color-on-surface-variant-rgb));
}
.csfev-root .csfev-consent a {
    color: rgb(var(--color-secondary-rgb));
}
.csfev-root .csfev-form__hint {
    color: rgb(var(--color-on-surface-variant-rgb) / 0.75);
}

/* Kotak pilihan mengikuti warna sage saat dicentang. */
.csfev-root input[type="checkbox"],
.csfev-root input[type="radio"] {
    accent-color: rgb(var(--color-secondary-rgb));
}

/* ----------------------------------------------------------------------------
   5. BADGE STATUS
   -------------------------------------------------------------------------- */
.csfev-root .csfev-badge {
    font-size: var(--font-size-label-caps);
    font-weight: var(--font-weight-label-caps);
    border-radius: var(--radius-full);
    padding: 6px 14px;
    backdrop-filter: blur(8px);
}
.csfev-root .csfev-badge--success { background: rgb(var(--color-secondary-fixed-rgb) / 0.9); color: rgb(var(--color-on-secondary-fixed-rgb)); }
.csfev-root .csfev-badge--info    { background: rgb(var(--color-secondary-container-rgb) / 0.85); color: rgb(var(--color-on-secondary-container-rgb)); }
.csfev-root .csfev-badge--warning { background: rgb(var(--color-accent-yellow-rgb) / 0.85); color: rgb(var(--color-on-secondary-fixed-rgb)); }
.csfev-root .csfev-badge--danger,
.csfev-root .csfev-badge--live    { background: rgb(var(--color-error-container-rgb) / 0.85); color: rgb(var(--color-on-error-container-rgb)); }
.csfev-root .csfev-badge--neutral { background: rgb(var(--color-surface-variant-rgb) / 0.8); color: rgb(var(--color-on-surface-variant-rgb)); }

/* ----------------------------------------------------------------------------
   6. NOTICE & BANNER
   -------------------------------------------------------------------------- */
.csfev-root .csfev-notice {
    background: rgb(var(--color-surface-variant-rgb) / 0.3);
    border-radius: var(--radius-default);
    border-left-width: 3px;
    color: rgb(var(--color-on-surface-variant-rgb));
    font-family: var(--font-body);
}
.csfev-root .csfev-notice--success { border-color: rgb(var(--color-secondary-rgb)); }
.csfev-root .csfev-notice--warning { border-color: rgb(var(--color-accent-yellow-rgb)); }
.csfev-root .csfev-notice--error   { border-color: rgb(var(--color-error-rgb)); }
.csfev-root .csfev-notice--info    { border-color: rgb(var(--color-secondary-fixed-dim-rgb)); }
.csfev-root .csfev-notice strong { color: rgb(var(--color-primary-rgb)); }

/* ----------------------------------------------------------------------------
   7. HITUNG MUNDUR
   -------------------------------------------------------------------------- */
.csfev-root .csfev-countdown__unit {
    background: rgb(var(--color-surface-container-rgb) / 0.5);
    border: 1px solid rgb(var(--color-glow-rgb) / 0.1);
    border-radius: var(--radius-default);
    backdrop-filter: blur(var(--glass-blur));
    padding: 14px 8px;
}
.csfev-root .csfev-countdown__num {
    font-family: var(--font-serif);
    font-weight: 400;
    color: rgb(var(--color-primary-rgb));
}

/* ----------------------------------------------------------------------------
   8. TIKET PESERTA
   -------------------------------------------------------------------------- */
.csfev-root .csfev-ticket__card {
    background: rgb(var(--color-surface-container-rgb) / 0.5);
    border: 1px dashed rgb(var(--color-outline-variant-rgb));
    border-radius: var(--radius-default);
    backdrop-filter: blur(var(--glass-blur));
    box-shadow: var(--shadow-article);
}
.csfev-root .csfev-ticket__code {
    font-family: var(--font-serif);
    color: rgb(var(--color-primary-rgb));
    letter-spacing: 0.08em;
}
.csfev-root .csfev-ticket__meta dt { color: rgb(var(--color-secondary-rgb)); font-family: var(--font-label); }
.csfev-root .csfev-ticket__meta dd { color: rgb(var(--color-on-surface-rgb)); font-family: var(--font-body); }
.csfev-root .csfev-ticket__hint { color: rgb(var(--color-on-surface-variant-rgb) / 0.8); }
/* QR selalu di atas kotak putih supaya kontras pemindaiannya terjaga. */
.csfev-root .csfev-qr {
    background: #fff;
    border-radius: 12px;
    padding: 10px;
}

/* ----------------------------------------------------------------------------
   9. FAQ — accordion
   -------------------------------------------------------------------------- */
.csfev-root .csfev-faq__item {
    border: 1px solid rgb(var(--color-glow-rgb) / 0.1);
    border-radius: var(--radius-default);
    background: rgb(var(--color-surface-container-rgb) / 0.35);
    margin-bottom: 10px;
    padding: 0 20px;
}
.csfev-root .csfev-faq__item summary {
    font-family: var(--font-headline);
    font-size: 19px;
    color: rgb(var(--color-primary-rgb));
    padding: 18px 0;
}
.csfev-root .csfev-faq__item[open] summary { color: rgb(var(--color-secondary-rgb)); }
.csfev-root .csfev-faq__item > div {
    font-family: var(--font-body);
    color: rgb(var(--color-on-surface-variant-rgb));
    padding-bottom: 14px;
}

/* ----------------------------------------------------------------------------
   10. GALERI & LIGHTBOX
   -------------------------------------------------------------------------- */
.csfev-root .csfev-gallery__item {
    border-radius: var(--radius-default);
    border: 1px solid rgb(var(--color-glow-rgb) / 0.08);
    transition: transform var(--transition-base);
}
.csfev-root .csfev-gallery__item:hover { transform: translateY(-4px); }

/* ----------------------------------------------------------------------------
   11. TAMBAH KE KALENDER
   -------------------------------------------------------------------------- */
.csfev-root .csfev-atc__menu {
    background: rgb(var(--color-surface-container-high-rgb));
    border: 1px solid rgb(var(--color-glow-rgb) / 0.12);
    border-radius: var(--radius-default);
    box-shadow: var(--shadow-glass-xl);
}
.csfev-root .csfev-atc__menu a {
    color: rgb(var(--color-on-surface-rgb));
    font-family: var(--font-body);
    border-radius: 10px;
}
.csfev-root .csfev-atc__menu a:hover {
    background: rgb(var(--color-secondary-rgb) / 0.15);
    color: rgb(var(--color-secondary-rgb));
}

/* ----------------------------------------------------------------------------
   12. POPUP UNDANGAN
   Muncul di semua halaman, jadi bagian ini yang paling menentukan apakah
   plugin terasa "menyatu" dengan situs atau tidak.
   -------------------------------------------------------------------------- */
.csfev-root .csfev-popup-backdrop {
    background: rgb(var(--color-background-rgb) / 0.75);
    backdrop-filter: blur(4px);
}

.csfev-root .csfev-popup {
    background: rgb(var(--color-surface-container-rgb) / 0.92);
    border: 1px solid rgb(var(--color-glow-rgb) / 0.12);
    backdrop-filter: blur(var(--glass-blur-strong));
    box-shadow: var(--shadow-glass-xl);
    color: rgb(var(--color-on-surface-rgb));
}

.csfev-root .csfev-popup__close {
    background: rgb(var(--color-background-rgb) / 0.55);
    border: 1px solid rgb(var(--color-glow-rgb) / 0.15);
    color: rgb(var(--color-primary-rgb));
    backdrop-filter: blur(8px);
}
.csfev-root .csfev-popup__close:hover {
    background: rgb(var(--color-primary-rgb));
    color: rgb(var(--color-on-primary-rgb));
}

.csfev-root .csfev-popup-single__title {
    font-family: var(--font-serif);
    font-weight: 400;
    font-size: 26px;
    color: rgb(var(--color-primary-rgb));
}
.csfev-root .csfev-popup-single__meta {
    font-family: var(--font-body);
    color: rgb(var(--color-on-surface-variant-rgb));
}

.csfev-root .csfev-slide__title { font-family: var(--font-serif); font-weight: 400; }
.csfev-root .csfev-slide__meta,
.csfev-root .csfev-slide__caption { font-family: var(--font-label); letter-spacing: 0.08em; text-transform: uppercase; }
.csfev-root .csfev-slide__caption { color: rgb(var(--color-accent-yellow-rgb)); }
.csfev-root .csfev-slide__cta {
    background: rgb(var(--color-primary-rgb));
    color: rgb(var(--color-on-primary-rgb));
    font-family: var(--font-label);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-label-caps);
}

.csfev-root .csfev-carousel__dot::after { background: rgb(var(--color-glow-rgb) / 0.35); }
.csfev-root .csfev-carousel__dot.is-active::after { background: rgb(var(--color-secondary-rgb)); }
.csfev-root .csfev-carousel__arrow {
    background: rgb(var(--color-surface-container-high-rgb) / 0.9);
    color: rgb(var(--color-primary-rgb));
    border: 1px solid rgb(var(--color-glow-rgb) / 0.15);
    backdrop-filter: blur(8px);
}

/* ----------------------------------------------------------------------------
   12b. FORMULIR SEBAGAI MODAL
   Kartu pemicunya memakai bahasa visual yang sama dengan kartu sidebar.
   -------------------------------------------------------------------------- */
.csfev-root .csfev-formsection__cta {
    background: rgb(var(--color-surface-container-rgb) / 0.4);
    border: 1px solid rgb(var(--color-glow-rgb) / 0.1);
    border-radius: var(--radius-default);
    backdrop-filter: blur(var(--glass-blur));
    box-shadow: var(--shadow-article);
    padding: 36px 24px;
}
.csfev-root .csfev-formsection__intro {
    font-family: var(--font-body);
    font-size: var(--font-size-body-lg);
    color: rgb(var(--color-on-surface-variant-rgb));
}
.csfev-root .csfev-formhost__title {
    font-family: var(--font-serif);
    font-weight: 400;
    font-size: 26px;
    color: rgb(var(--color-primary-rgb));
}

/* Saat masih inline (JavaScript mati), beri wadah agar tidak terlihat telanjang. */
.csfev-root .csfev-formhost:not(.is-modal) .csfev-formhost__panel {
    background: rgb(var(--color-surface-container-rgb) / 0.4);
    border: 1px solid rgb(var(--color-glow-rgb) / 0.1);
    border-radius: var(--radius-default);
    padding: 28px 24px;
    margin-top: 20px;
}

/* ----------------------------------------------------------------------------
   13. STICKY CTA (mobile)
   -------------------------------------------------------------------------- */
.csfev-root .csfev-stickybar {
    background: rgb(var(--color-surface-container-rgb) / 0.92);
    border-top: 1px solid rgb(var(--color-glow-rgb) / 0.12);
    backdrop-filter: blur(var(--glass-blur));
}
.csfev-root .csfev-stickybar__info strong { color: rgb(var(--color-primary-rgb)); font-family: var(--font-label); }
.csfev-root .csfev-stickybar__info span { color: rgb(var(--color-on-surface-variant-rgb)); }

/* ----------------------------------------------------------------------------
   14. KARTU & GRID BAWAAN PLUGIN
   Dipakai shortcode [kegiatan_list] di halaman mana pun.
   -------------------------------------------------------------------------- */
.csfev-root .csfev-card {
    background: rgb(var(--color-surface-container-rgb) / 0.4);
    border: 1px solid rgb(var(--color-glow-rgb) / 0.1);
    border-radius: var(--radius-default);
    backdrop-filter: blur(var(--glass-blur));
    box-shadow: var(--shadow-article);
    transition: transform var(--transition-base);
}
.csfev-root .csfev-card:hover { transform: translateY(-8px); }
.csfev-root .csfev-card__date { color: rgb(var(--color-secondary-rgb)); font-family: var(--font-label); text-transform: uppercase; letter-spacing: var(--letter-spacing-label-caps); }
.csfev-root .csfev-card__title { font-family: var(--font-headline); }
.csfev-root .csfev-card__title a { color: rgb(var(--color-primary-rgb)); }
.csfev-root .csfev-card__title a:hover { color: rgb(var(--color-secondary-rgb)); }
.csfev-root .csfev-card__meta,
.csfev-root .csfev-card__excerpt { color: rgb(var(--color-on-surface-variant-rgb)); font-family: var(--font-body); }

/* ----------------------------------------------------------------------------
   15. BAGIKAN & PROGRESS
   -------------------------------------------------------------------------- */
.csfev-root .csfev-share__btn {
    background: transparent;
    border: 1px solid rgb(var(--color-glow-rgb) / 0.15);
    color: rgb(var(--color-primary-rgb));
    font-family: var(--font-label);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-label-caps);
    font-size: var(--font-size-label-caps);
}
.csfev-root .csfev-share__btn:hover {
    background: rgb(var(--color-primary-rgb));
    color: rgb(var(--color-on-primary-rgb));
    border-color: transparent;
}

.csfev-root .csfev-progress { background: rgb(var(--color-surface-variant-rgb) / 0.6); }
.csfev-root .csfev-progress span { background: rgb(var(--color-secondary-rgb)); }

/* ----------------------------------------------------------------------------
   16. MATIKAN MODE GELAP BAWAAN PLUGIN
   Tema ini SELALU gelap. Blok prefers-color-scheme milik plugin dirancang untuk
   tema terang, dan kalau ikut aktif ia justru menimpa pemetaan di atas.
   -------------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
    :root {
        --csfev-ink: rgb(var(--color-primary-rgb));
        --csfev-muted: rgb(var(--color-on-surface-variant-rgb));
        --csfev-line: rgb(var(--color-outline-variant-rgb) / 0.45);
        --csfev-surface: rgb(var(--color-surface-container-rgb) / 0.55);
        --csfev-soft: rgb(var(--color-surface-variant-rgb) / 0.35);
    }
}