/*
 * Star Croisières - Style Override
 * Fix Wayback artifacts + layout responsiveness
 * ============================================================
 */

/* ================================================================
   1. KRITIS: Alpine.js x-cloak fix
   Semua elemen dengan x-cloak HARUS tersembunyi sebelum Alpine load
   ================================================================ */
[x-cloak] {
    display: none !important;
}

/* Hide semua elemen Wayback Machine Toolbar */
#wm-ipp-base,
#wm-ipp,
.wb_archiveTag,
#donato,
.archiveButton,
[id^="wm-"],
[class^="wb_"],
div[style*="archive.org"],
iframe[src*="archive.org"] {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
}

/* ================================================================
   2. Layout Dasar
   ================================================================ */
html {
    scroll-behavior: smooth;
}

body {
    padding-top: 0 !important;
    margin-top: 0 !important;
    min-width: 320px;
    overflow-x: hidden;
    width: 100%;
    max-width: 100vw;
}

/* ================================================================
   3. Header / Menu Fix
   ================================================================ */
header.menu {
    position: sticky;
    top: 0;
    z-index: 50;
    background: #ffffff;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}

/* Desktop menu default tampil */
.menu--desktop {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1.5rem;
    width: 100%;
}

/* Mobile menu default tersembunyi */
.menu--mobile {
    display: none !important;
}

/* Responsif: di bawah lg, balik */
@media (max-width: 1023px) {
    .menu--desktop {
        display: none !important;
    }
    .menu--mobile {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        padding: 0.75rem 1rem;
        width: 100%;
    }
}

/* ================================================================
   4. Slider/Glider images
   ================================================================ */
.glide__slide--hp {
    width: 100%;
    max-height: 500px;
    object-fit: cover;
    display: block;
}

.glide__slides {
    white-space: nowrap;
}

.glide__slide {
    display: inline-block;
    width: 100%;
}

/* ================================================================
   5. Search Box
   ================================================================ */
.marginSearch {
    position: relative;
    margin-top: -56px;
    z-index: 40;
    background: transparent;
}

@media (max-width: 767px) {
    .marginSearch {
        margin-top: 0;
        position: static;
    }
}

/* ================================================================
   6. Color Variables (Star Croisières brand)
   ================================================================ */
:root {
    --sc-orange:       #f4882a;
    --sc-primary:      #003366;
    --sc-dark-blue:    #001d40;
    --sc-darker-blue:  #001428;
}

/* Tailwind-like utility classes (karena file Tailwind lokal mungkin tidak complete) */
.bg-sc-orange        { background-color: var(--sc-orange) !important; }
.text-sc-orange      { color: var(--sc-orange) !important; }
.text-sc-primary     { color: var(--sc-primary) !important; }
.text-dark-blue      { color: var(--sc-dark-blue) !important; }
.text-darker-blue    { color: var(--sc-darker-blue) !important; }
.border-darker-blue  { border-color: var(--sc-darker-blue) !important; }
.decoration-sc-orange{ text-decoration-color: var(--sc-orange) !important; }
.bg-white            { background-color: #ffffff; }
.text-white          { color: #ffffff; }

/* ================================================================
   7. Gambar broken (hanya untuk yang benar-benar kosong)
   ================================================================ */
img[src=""],
img[src="undefined"] {
    min-height: 80px;
    background: linear-gradient(135deg, #e8edf3 0%, #d0d8e4 100%);
    opacity: 0.6;
}

/* ================================================================
   8. Mobile panels (slide-over)
   ================================================================ */
.absolute.top-0.inset-x-0 {
    pointer-events: none;
}
.absolute.top-0.inset-x-0 [x-show] {
    pointer-events: auto;
}

/* ================================================================
   9. Reassurance bar
   ================================================================ */
.header__reassurance {
    display: block !important;
    background: #f8f8f8;
    border-bottom: 1px solid #eee;
    padding: 0.5rem 1.5rem;
}
.header__reassurance__wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    color: var(--sc-dark-blue);
}
.header__reassurance__wrapper div {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

/* ================================================================
   10. Links
   ================================================================ */
a[href=""],
a:not([href]) {
    pointer-events: none;
    color: inherit;
    text-decoration: none;
}

/* ================================================================
   11. Footer
   ================================================================ */
footer {
    margin-top: 2rem;
}

/* ================================================================
   12. Responsive
   ================================================================ */
@media (max-width: 640px) {
    .glide__slide--hp {
        max-height: 250px;
    }
    .header__reassurance__wrapper {
        flex-direction: column;
        gap: 0.5rem;
    }
}

/* Menu desktop nav wrap di layar kecil */
.menu--desktop .menu__nav ul {
    flex-wrap: wrap;
}