/* =========================================================
   Karimunjawa Open Trip — Shared Design System
   ========================================================= */

:root {
    --teal: #28a49a;
    --teal-dark: #1f8078;
    --navy: #0f2f3f;
    --cream: #f7f5ef;
    --yellow: #ffda57;
    --yellow-dark: #f0c53f;
    --text-muted: #6b7280;
    --font-display: 'Poppins', sans-serif;
}

html {
    overflow-x: hidden;
}
body {
    font-family: 'Poppins', sans-serif;
    color: #333;
    background-color: #fff;
    overflow-x: hidden;
    max-width: 100%;
}

/* Poppins across the board — Bold for primary headings, SemiBold for secondary
   headings/brand, Regular/Medium for nav, buttons and body text */
h1 {
    font-weight: 700;
}
h2, h3, h4, h5, h6,
.navbar-brand {
    font-weight: 600;
}
.btn-custom,
.btn-outline-custom,
.site-navbar .nav-link,
.section-label,
.day-badge,
.breadcrumb-badge,
.badge {
    font-weight: 500;
}

a {
    text-decoration: none;
}

.text-teal { color: var(--teal); }
.bg-teal { background-color: var(--teal); }
.bg-cream { background-color: var(--cream); }
/* Hero badge is an informational label, not a click target, so it stays
   teal (the site's brand/info color) rather than the yellow reserved for
   .btn-custom's actual conversion actions — otherwise it visually
   competes with the real CTA sitting right below it. */
.badge-accent {
    background-color: var(--teal) !important;
    color: #fff;
}

/* ---------- Buttons ---------- */
/* .btn-custom is reserved for the site's actual conversion actions
   (Reserve Your Seat, Book This Package, Send via WhatsApp, ...) so it
   gets the one accent color that isn't already used elsewhere as a
   solid fill (teal is the brand/selection color — nav pills, tabs,
   links) — that's the whole point of picking it out from the rest. */
.btn-custom {
    background-color: var(--yellow);
    color: var(--navy);
    border-radius: 30px;
    padding: 10px 8px 10px 24px;
    display: inline-flex;
    align-items: center;
    gap: 14px;
    border: 0 solid;
    font-weight: 500;
    white-space: nowrap;
    outline: 1px solid rgba(15, 47, 63, 0.18);
    outline-offset: 0;
    box-shadow: inset 0 0 20px rgba(255, 255, 255, 0), 0 0 0 rgba(255, 218, 87, 0);
    transition: background-color 0.4s ease,
                box-shadow 1.1s cubic-bezier(0.19, 1, 0.22, 1),
                outline-color 1.1s cubic-bezier(0.19, 1, 0.22, 1),
                outline-offset 1.1s cubic-bezier(0.19, 1, 0.22, 1);
}
.btn-custom .btn-dot {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(15, 47, 63, 0.12);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    flex-shrink: 0;
    transition: transform 0.4s ease;
}
.btn-custom:hover {
    background-color: var(--yellow-dark);
    color: var(--navy);
    outline-color: rgba(15, 47, 63, 0);
    outline-offset: 8px;
    box-shadow: inset 0 0 20px rgba(255, 255, 255, 0.55), 0 0 22px rgba(255, 218, 87, 0.65);
}
.btn-custom:hover .btn-dot {
    transform: translateX(3px);
}

.btn-outline-custom {
    background: rgba(255, 255, 255, 0.14);
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.22);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
    border-radius: 30px;
    padding: 10px 8px 10px 24px;
    display: inline-flex;
    align-items: center;
    gap: 14px;
    font-weight: 500;
    white-space: nowrap;
    position: relative;
    overflow: hidden;
    transition: background 0.3s ease;
}
.btn-outline-custom::after {
    content: "";
    position: absolute;
    top: -50px;
    left: -75px;
    width: 50px;
    height: 155px;
    background: rgba(255, 255, 255, 0.3);
    transform: rotate(35deg);
    z-index: -1;
    transition: left 550ms cubic-bezier(0.19, 1, 0.22, 1);
}
.btn-outline-custom .btn-dot {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(255,255,255,0.15);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}
.btn-outline-custom:hover {
    background: rgba(255, 255, 255, 0.22);
    color: #fff;
}
.btn-outline-custom:hover::after {
    left: 120%;
}

/* ---------- Nav ---------- */
/* Desktop (xl and up): unchanged floating pill, overlaying the hero, not sticky */
.site-navbar {
    position: absolute;
    top: 40px;
    left: 0;
    right: 0;
    z-index: 20;
}
.site-navbar .container {
    background: rgba(255, 255, 255, 0.14);
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    border: 1px solid rgba(255, 255, 255, 0.22);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
    border-radius: 50px;
    padding: 10px 12px 10px 24px;
}
.site-navbar .navbar-brand {
    font-weight: 600;
    letter-spacing: 0.5px;
}
.site-navbar .navbar-brand a {
    color: inherit;
    text-decoration: none;
}
.site-navbar .navbar-brand .custom-logo {
    height: 44px;
    width: auto;
    max-width: 160px;
    object-fit: contain;
}

/* Mobile/tablet (below xl, hamburger view): full-width sticky bar, no rounded corners */
@media (max-width: 1199.98px) {
    .site-navbar {
        position: sticky;
        top: 0;
        left: auto;
        right: auto;
        z-index: 1030;
        padding: 0;
    }
    .site-navbar .container {
        max-width: 100%;
        background: #fff;
        border: none;
        box-shadow: 0 4px 24px rgba(0, 0, 0, 0.1);
        border-radius: 0;
        padding: 18px 12px;
    }
    .site-navbar .navbar-brand {
        font-size: 1.05rem;
        color: #1a2e35 !important;
    }
    .site-navbar .navbar-brand .custom-logo {
        height: 36px;
    }
    .site-navbar.navbar-dark .nav-link {
        color: #333 !important;
    }
    .site-navbar .navbar-toggler {
        border-color: rgba(0, 0, 0, 0.15);
    }
    .site-navbar .navbar-toggler-icon {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(0, 0, 0, 0.85)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
    }
}
.site-navbar .nav-link {
    font-weight: 500;
    margin: 0 6px;
}
.site-navbar.navbar-dark .nav-link {
    color: rgba(255,255,255,0.9);
}
.site-navbar.navbar-light .nav-link {
    color: #333;
}
.site-navbar .nav-link.active {
    text-decoration: underline;
    text-underline-offset: 6px;
}

/* ---------- Page Hero (inner pages) ---------- */
.page-hero {
    background: linear-gradient(rgba(15,47,63,0.55), rgba(15,47,63,0.55)), var(--hero-img) no-repeat center center;
    background-size: cover;
    border-radius: 0 0 40px 40px;
    padding-bottom: 60px;
    padding-top: 2rem;
}
/* From the xl breakpoint up, .site-navbar floats over the hero as an
   absolutely-positioned glass pill instead of sitting in normal flow, so
   the hero needs its own extra top padding here to keep the breadcrumb
   clear of it — otherwise raising the navbar's own top offset pushes it
   down into the breadcrumb text. */
@media (min-width: 1200px) {
    .page-hero {
        padding-top: 6rem;
    }
}
.page-hero .breadcrumb-badge {
    color: #fff;
    font-size: 0.85rem;
}
.page-hero h1 {
    /* Bootstrap's .mt-3 utility (used inline in every page-*.php template
       for this heading) carries !important, so this needs it too to win. */
    margin-top: 1.5rem !important;
}

/* ---------- Trip / package cards (used by the Trip Group block) ---------- */
.price-hero-card {
    background: var(--teal);
    color: #fff;
    border-radius: 20px;
    padding: 28px 32px;
}
.day-badge {
    display: inline-block;
    background: var(--navy);
    color: #fff;
    border-radius: 20px;
    padding: 6px 18px;
    font-weight: 600;
    font-size: 0.85rem;
    margin-bottom: 14px;
}

/* ---------- Cards ---------- */
.rounded-card {
    border-radius: 20px;
    overflow: hidden;
    border: none;
    box-shadow: 0 4px 20px rgba(0,0,0,0.06);
}

/* ---------- Clickable feature tiles ---------- */
.feature-tile {
    cursor: pointer;
    transition: box-shadow 0.35s ease, transform 0.35s ease;
}
.feature-tile img {
    transition: transform 0.6s ease;
}
.feature-tile:hover img {
    transform: scale(1.08);
}
.feature-tile:hover {
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.14);
    transform: translateY(-4px);
}
.feature-tile-teal-body {
    background: linear-gradient(135deg, #0c6e73 0%, #1c9c94 100%);
}
.feature-tile-teal-body p {
    color: rgba(255, 255, 255, 0.85);
}

/* ---------- Clickable image thumbnails (About / Schedule, etc.) ---------- */
.image-hover-zoom {
    display: block;
    cursor: pointer;
    transition: box-shadow 0.35s ease;
}
.image-hover-zoom img {
    display: block;
    width: 100%;
    transition: transform 0.6s ease;
}
.image-hover-zoom:hover img {
    transform: scale(1.08);
}
.image-hover-zoom:hover {
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.18);
}

/* ---------- Image border-draw hover frame (adapted from CodePen "Button 1" hover effect) ---------- */
.img-border-frame {
    position: relative;
}
.img-border-frame .border-draw-svg {
    position: absolute;
    top: 10px;
    left: 10px;
    width: calc(100% - 20px);
    height: calc(100% - 20px);
    pointer-events: none;
    z-index: 3;
}
.img-border-frame .border-draw-path {
    fill: none;
    stroke: #fff;
    stroke-width: 6;
    stroke-dasharray: 15, 310;
    stroke-dashoffset: 48;
    opacity: 0;
    transition: stroke-dasharray 0.35s linear,
                stroke-dashoffset 0.35s linear,
                stroke-width 0.35s linear,
                opacity 0.25s linear;
}
.feature-tile:hover .border-draw-path,
.image-hover-zoom:hover .border-draw-path,
.hero-highlight-card:hover .border-draw-path {
    stroke-width: 6;
    stroke-dasharray: 422, 0;
    stroke-dashoffset: 0;
    opacity: 1;
    transition: stroke-dasharray 1.35s cubic-bezier(0.19, 1, 0.22, 1),
                stroke-dashoffset 1.35s cubic-bezier(0.19, 1, 0.22, 1),
                stroke-width 1.35s cubic-bezier(0.19, 1, 0.22, 1),
                opacity 0.6s ease;
}

/* ---------- Destination photo gallery (single.php) ----------
   CSS Grid gallery (no JS library): the layout adapts automatically to
   how many photos are attached to the post (1 today, more once uploaded
   later). Every tile crops to a fixed aspect ratio via object-fit, so the
   gallery looks consistent regardless of each photo's native resolution —
   a large source photo no longer dominates the layout and a small one no
   longer looks cramped/pixelated. Each item still reuses
   .rounded-card/.image-hover-zoom/.img-border-frame so it gets the same
   hover treatment as photos everywhere else on the site "for free". */
.kjt-gallery {
    display: grid;
    gap: 10px;
}
.kjt-gallery__item {
    height: 100%;
    min-height: 0;
}
.kjt-gallery__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.kjt-gallery__more {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(15, 47, 63, 0.55);
    color: #fff;
    font-size: 1.5rem;
    font-weight: 700;
    z-index: 2;
}

/* One photo: single wide hero tile */
.kjt-gallery--1 {
    grid-template-columns: 1fr;
}
.kjt-gallery--1 .kjt-gallery__item {
    aspect-ratio: 16 / 9;
}

/* Two photos: even side-by-side */
.kjt-gallery--2 {
    grid-template-columns: 1fr 1fr;
}
.kjt-gallery--2 .kjt-gallery__item {
    aspect-ratio: 4 / 3;
}

/* Three photos: one big + two stacked */
.kjt-gallery--3 {
    grid-template-columns: 2fr 1fr;
    grid-template-rows: 1fr 1fr;
    height: 440px;
}
.kjt-gallery--3 .kjt-gallery__item:nth-child(1) {
    grid-row: 1 / 3;
}

/* Exactly four photos: one big + three stacked */
.kjt-gallery--4 {
    grid-template-columns: 2fr 1fr;
    grid-template-rows: repeat(3, 1fr);
    height: 440px;
}
.kjt-gallery--4 .kjt-gallery__item:nth-child(1) { grid-column: 1; grid-row: 1 / 4; }
.kjt-gallery--4 .kjt-gallery__item:nth-child(2) { grid-column: 2; grid-row: 1; }
.kjt-gallery--4 .kjt-gallery__item:nth-child(3) { grid-column: 2; grid-row: 2; }
.kjt-gallery--4 .kjt-gallery__item:nth-child(4) { grid-column: 2; grid-row: 3; }

/* Five or more photos: one big + four thumbnails (extras collapse into a "+N" tile) */
.kjt-gallery--many {
    grid-template-columns: 2fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    height: 440px;
}
.kjt-gallery--many .kjt-gallery__item:nth-child(1) { grid-column: 1; grid-row: 1 / 3; }
.kjt-gallery--many .kjt-gallery__item:nth-child(2) { grid-column: 2; grid-row: 1; }
.kjt-gallery--many .kjt-gallery__item:nth-child(3) { grid-column: 3; grid-row: 1; }
.kjt-gallery--many .kjt-gallery__item:nth-child(4) { grid-column: 2; grid-row: 2; }
.kjt-gallery--many .kjt-gallery__item:nth-child(5) { grid-column: 3; grid-row: 2; }

@media (max-width: 767.98px) {
    .kjt-gallery--2,
    .kjt-gallery--3,
    .kjt-gallery--4,
    .kjt-gallery--many {
        grid-template-columns: 1fr;
        grid-template-rows: none;
        height: auto;
    }
    .kjt-gallery--2 .kjt-gallery__item,
    .kjt-gallery--3 .kjt-gallery__item,
    .kjt-gallery--4 .kjt-gallery__item,
    .kjt-gallery--many .kjt-gallery__item {
        aspect-ratio: 4 / 3;
        grid-column: 1 !important;
        grid-row: auto !important;
    }
}

/* ---------- Gallery lightbox (Bootstrap Modal, see assets/js/lightbox.js) ---------- */
.kjt-lightbox .modal-dialog {
    max-width: min(90vw, 1100px);
}
.kjt-lightbox .modal-content {
    background: transparent;
    border: none;
}
.kjt-lightbox__img {
    display: block;
    width: 100%;
    max-height: 85vh;
    object-fit: contain;
    border-radius: 12px;
}
.kjt-lightbox__close {
    position: absolute;
    top: -40px;
    right: 0;
    z-index: 2;
}
.kjt-lightbox__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.15);
    border: none;
    border-radius: 50%;
    color: #fff;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    z-index: 2;
    transition: background 0.2s ease;
}
.kjt-lightbox__nav:hover {
    background: rgba(255, 255, 255, 0.3);
}
.kjt-lightbox__prev { left: -60px; }
.kjt-lightbox__next { right: -60px; }
@media (max-width: 991.98px) {
    .kjt-lightbox__close {
        top: 8px;
        right: 8px;
        background: rgba(0, 0, 0, 0.4);
        border-radius: 50%;
    }
    .kjt-lightbox__prev { left: 8px; }
    .kjt-lightbox__next { right: 8px; }
}

/* ---------- "Learn More" style arrow links ---------- */
.learn-more-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
}
.learn-more-link .lm-text {
    position: relative;
}
.learn-more-link .lm-text::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 0;
    height: 2px;
    background: currentColor;
    transition: width 0.3s ease;
}
.learn-more-link:hover .lm-text::after {
    width: 100%;
}
.learn-more-link .lm-arrow {
    display: inline-block;
    transition: transform 0.3s ease;
}
.learn-more-link:hover .lm-arrow {
    transform: translateX(4px);
}
.section-label {
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--teal);
}

/* ---------- Pagination (archive/category listings) ---------- */
.kjt-pagination .nav-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.kjt-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 6px;
    border-radius: 50%;
    background: var(--cream);
    color: var(--navy);
    font-weight: 600;
    transition: background-color 0.3s ease, color 0.3s ease;
}
.kjt-pagination a.page-numbers:hover {
    background: var(--teal);
    color: #fff;
}
.kjt-pagination .page-numbers.current {
    background: var(--teal);
    color: #fff;
}
.kjt-pagination .page-numbers.dots {
    background: transparent;
    color: #999;
}
.kjt-pagination .page-numbers.prev,
.kjt-pagination .page-numbers.next {
    background: transparent;
    color: var(--teal);
    font-size: 1.1rem;
}
.kjt-pagination a.page-numbers.prev:hover,
.kjt-pagination a.page-numbers.next:hover {
    background: var(--teal);
    color: #fff;
}

/* ---------- Pricing tables ---------- */
.price-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}
.price-table th, .price-table td {
    padding: 12px 16px;
    border-bottom: 1px solid #eee;
}
.price-table thead th {
    background-color: var(--cream);
    font-weight: 600;
    color: var(--navy);
}
.price-table tbody tr:last-child td {
    border-bottom: none;
}
.price-tag {
    font-weight: 700;
    color: var(--teal);
}

/* ---------- Inclusion / Exclusion lists ---------- */
.list-check, .list-cross {
    list-style: none;
    padding-left: 0;
    margin-bottom: 0;
}
.list-check li, .list-cross li {
    padding-left: 30px;
    position: relative;
    margin-bottom: 10px;
    color: #444;
}
.list-check li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--teal);
    font-weight: 700;
}
.list-cross li::before {
    content: "✕";
    position: absolute;
    left: 0;
    color: #c0392b;
    font-weight: 700;
}

/* ---------- Timeline / Itinerary ---------- */
.timeline {
    position: relative;
    padding-left: 30px;
    border-left: 2px dashed #d5d5d5;
}
.timeline-item {
    position: relative;
    padding-bottom: 28px;
}
.timeline-item:last-child { padding-bottom: 0; }
.timeline-item::before {
    content: "";
    position: absolute;
    left: -37px;
    top: 4px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--teal);
    border: 3px solid #fff;
    box-shadow: 0 0 0 2px var(--teal);
}
.timeline-time {
    font-weight: 700;
    color: var(--teal-dark);
    display: block;
    margin-bottom: 2px;
}

/* ---------- CTA banner (bottom of every page) ---------- */
.cta-banner {
    background: linear-gradient(rgba(15,47,63,0.75), rgba(15,47,63,0.75)), url('../img/hero/bottom-panel.jpg') no-repeat center center;
    background-size: cover;
    border-radius: 40px;
    padding: 70px 20px;
    color: #fff;
    text-align: center;
    margin: 60px 0 0 0;
    border: 1px solid rgba(255, 255, 255, 0.22);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}

/* ---------- Footer ---------- */
.site-footer {
    --footer-bg-img: url('../img/hero/footer-bg.jpg');
    background-image: linear-gradient(rgba(8, 22, 30, 0.6), rgba(8, 22, 30, 0.6)), var(--footer-bg-img);
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: bottom center;
    color: rgba(255,255,255,0.75);
    border-radius: 40px 40px 0 0;
    margin-top: -40px;
    padding: 60px 0 20px 0;
    position: relative;
    z-index: 1;
}
@media (max-width: 1199.98px) {
    .site-footer {
        border-radius: 0;
    }
}
.site-footer h6 {
    color: #fff;
    font-weight: 600;
    margin-bottom: 16px;
}
.site-footer a {
    color: rgba(255,255,255,0.75);
}
.site-footer a:hover { color: #fff; }
.site-footer .footer-bottom {
    border-top: 1px solid rgba(255,255,255,0.15);
    margin-top: 40px;
    padding-top: 20px;
    font-size: 0.85rem;
}

/* ---------- Nav pills for tabs (schedule / packages) ---------- */
.nav-pills .nav-link {
    border-radius: 30px;
    padding: 10px 22px;
    font-weight: 500;
    color: #333;
    background-color: #fff;
    border: 1px solid #e2e2e2;
}
.nav-pills .nav-link.active {
    background-color: var(--teal);
    color: #fff;
    border-color: var(--teal);
}

/* ---------- Testimonial ---------- */
.testimonial-card {
    background: var(--cream);
    border-radius: 20px;
    padding: 30px;
}

/* ---------- Misc ---------- */
.divider-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--teal);
    display: inline-block;
}
.note-box {
    background: var(--cream);
    border-left: 4px solid var(--teal);
    border-radius: 10px;
    padding: 16px 20px;
    color: #555;
    font-size: 0.95rem;
}

/* ---------- Scroll-reveal animations ---------- */
.reveal-up,
.reveal-left,
.reveal-right,
.reveal-scale {
    opacity: 0;
    transition: opacity 0.7s ease-out, transform 0.7s ease-out;
    transition-delay: var(--reveal-delay, 0s);
    will-change: opacity, transform;
}
.reveal-up { transform: translateY(32px); }
.reveal-left { transform: translateX(-36px); }
.reveal-right { transform: translateX(36px); }
.reveal-scale { transform: scale(0.94); }

.reveal-up.is-visible,
.reveal-left.is-visible,
.reveal-right.is-visible,
.reveal-scale.is-visible {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .reveal-up,
    .reveal-left,
    .reveal-right,
    .reveal-scale {
        opacity: 1;
        transform: none;
        transition: none;
    }
}