/*
Theme Name: Siap Tour
Theme URI: https://siapngeweb.com/tour
Author: Siap Digital Indonesia
Author URI: https://siapngeweb.com
Description: Modern and dynamic tour & travel theme for WordPress designed to present your travel agency, tour packages, destinations, and hospitality services in a professional, engaging, and visually appealing way. Built with a clean layout and smooth user experience, this theme helps you showcase your tours, destinations, rentals, and hotels with confidence. Fully responsive and optimized for all devices, it ensures your website looks great on desktop, tablet, and mobile. Equipped with SEO-friendly structure, fast loading performance, and flexible customization options, this theme allows you to easily adjust colors, fonts, and content to match your brand. Perfect for travel agencies, tour operators, and hospitality businesses who want a strong and modern online presence.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: siaptour
Requires at least: 5.5
Requires PHP: 7.4
*/

/* Skip Link (Accessibility) */
.skip-link {
    position: absolute;
    top: -100%;
    left: 0;
    z-index: 100000;
    padding: 12px 24px;
    background: var(--primary-color);
    color: #fff;
    font-weight: 700;
    text-decoration: none;
    border-radius: 0 0 8px 0;
    transition: top 0.2s ease;
}

.skip-link:focus {
    top: 0;
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

/* Focus Visible (Accessibility) */
:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

a:focus:not(:focus-visible),
button:focus:not(:focus-visible) {
    outline: none;
}

/* Global Layout & Typography */
body {
    font-family: var(--body-font);
    margin: 0;
    padding: 0;
    color: var(--text-color);
    background-color: var(--bg-color);
    line-height: 1.6;
}

.container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 5%;
}

/* Video Embed (shared across tours & destinations) */
.video-responsive {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
    border-radius: var(--radius-md);
    overflow: hidden;
    background: rgba(var(--heading-color-rgb), 0.05);
}

.video-responsive iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.site-main {
    padding: 80px 0 40px;
}

/* Related heading override + CTA bar: moved to components.css */

/* ============================================
   Single Hero — Shared Component
   Used by single tour_package, destination,
   rental, hotel, blog
   ============================================ */

.single-hero {
    position: relative;
    padding: 0;
    background-color: var(--bg-color);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-bottom: 1px solid rgba(var(--heading-color-rgb), 0.05);
    min-height: 100vh;
    aspect-ratio: 16 / 9;
    display: flex;
    align-items: flex-end;
}

.single-hero--parallax {
    background-attachment: fixed;
}

.single-hero__overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: -2px;
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.15) 0%,
        rgba(0, 0, 0, 0.05) 30%,
        rgba(0, 0, 0, 0.3) 70%,
        rgba(0, 0, 0, 0.55) 100%
    );
    z-index: 1;
}

.single-hero .hero-content-wrapper {
    position: relative;
    z-index: 2;
    width: 100%;
}

.single-hero__card {
    background: color-mix(in srgb, var(--bg-color) 75%, transparent);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid color-mix(in srgb, var(--heading-color) 10%, transparent);
    border-radius: 24px;
    padding: 32px 36px;
    margin-bottom: 48px;
}

/* Text inside hero card uses theme heading/text colors */
.single-hero__card,
.single-hero__card .single-hero__title,
.single-hero__card .quick-value,
.single-hero__card .single-breadcrumbs .current,
.single-hero__card .single-hero__meta-item a {
    color: var(--heading-color);
}

.single-hero__card .quick-label,
.single-hero__card .single-breadcrumbs a,
.single-hero__card .single-breadcrumbs .sep,
.single-hero__card .single-hero__meta-item {
    color: var(--text-color);
}

.single-hero__card .single-hero__badge {
    color: var(--cta-text-color);
    background: var(--primary-color);
    border-color: var(--primary-color);
}

.single-hero__card .quick-value--price {
    color: var(--primary-color);
}

.single-hero__card .hero-divider {
    background: color-mix(in srgb, var(--heading-color) 15%, transparent);
}

.single-hero__title {
    font-size: var(--h1-size);
    font-weight: 900;
    line-height: 1.15;
    letter-spacing: 1px;
    color: var(--heading-color);
    margin: 0;
}

.hero-divider {
    width: 100%;
    height: 1px;
    background: color-mix(in srgb, var(--heading-color) 15%, transparent);
    margin: 24px 0;
}

/* Badges (categories / destinations) */
.single-hero__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
}

.single-hero__badge {
    display: inline-block;
    background: color-mix(in srgb, var(--primary-color) 15%, transparent);
    border: 1px solid color-mix(in srgb, var(--primary-color) 30%, transparent);
    color: var(--primary-color);
    padding: 6px 18px;
    border-radius: 50px;
    font-size: var(--xs-size);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-decoration: none;
    transition: all 0.3s ease;
    margin-bottom: 8px;
}

.single-hero__badge:hover {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--cta-text-color);
}

/* Meta row (duration, price, group size, etc.) */
.single-hero__meta {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.single-hero__meta-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--button-size);
    color: var(--text-color);
    opacity: 0.8;
}

.single-hero__meta-item .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
    color: var(--primary-color);
}

.single-hero__meta-item img {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
}

.single-hero__meta-item a {
    color: var(--heading-color);
    text-decoration: none;
    font-weight: 600;
    transition: color 0.3s ease;
}

.single-hero__meta-item a:hover {
    color: var(--primary-color);
}

.single-hero__meta-sep {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--text-color);
    opacity: 0.3;
}

/* Actions row (book now, inquire, etc.) */
.single-hero__actions {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

/* Quick info row (tour details) */
.single-hero__quick-info {
    display: flex;
    gap: 32px;
    flex-wrap: wrap;
    margin-bottom: 24px;
}

/* Breadcrumbs inside hero card — force horizontal */
.single-hero__card .single-breadcrumbs {
    flex-direction: row !important;
    flex-wrap: wrap;
    align-items: center !important;
    justify-content: flex-start;
    font-size: var(--small-size);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 20px;
    gap: 0;
}

.single-hero__card .single-breadcrumbs .breadcrumb-path {
    display: contents;
}

.single-hero__card .single-breadcrumbs a {
    color: var(--heading-color);
    text-decoration: none;
    opacity: 0.7;
    transition: color 0.3s ease;
}

.single-hero__card .single-breadcrumbs a:hover {
    color: var(--primary-color);
    opacity: 1;
}

.single-hero__card .single-breadcrumbs .current {
    color: var(--heading-color);
    opacity: 1;
}

.single-hero__card .single-breadcrumbs .sep {
    color: var(--heading-color);
    opacity: 0.4;
    margin: 0 8px;
}

/* Quick info items (tour details: duration, difficulty, etc.) */
.quick-item {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.quick-label {
    font-size: var(--xs-size);
    font-weight: 700;
    color: var(--primary-color);
    text-transform: uppercase;
    letter-spacing: 2px;
}

.quick-value {
    font-size: var(--body-size);
    font-weight: 600;
    color: var(--heading-color);
}

/* Price tag display */
.single-hero__price {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 28px;
    min-height: 54px;
    background: var(--primary-color);
    color: var(--cta-text-color);
    border-radius: 16px;
    font-size: var(--secondary-size);
    font-weight: 800;
    letter-spacing: 0.5px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.single-hero__price:hover {
    filter: brightness(1.1);
    transform: translateY(-2px);
}

.single-hero__price .price-label {
    font-size: var(--xs-size);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity: 0.85;
}

.single-hero__price .price-value {
    font-size: var(--h3-size);
    font-weight: 900;
}

.single-hero__price .price-unit {
    font-size: var(--xs-size);
    font-weight: 600;
    opacity: 0.85;
}

/* Hero action button — styled button (all singles) */
.single-hero .hero-demo-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 16px 28px;
    min-height: 54px;
    background: rgba(var(--heading-color-rgb), 0.06);
    border: 1px solid color-mix(in srgb, var(--heading-color) 15%, transparent);
    border-radius: 16px;
    font-size: var(--small-size);
    font-weight: 700;
    text-decoration: none;
    color: var(--primary-color);
    transition: border-color 0.3s ease, background 0.3s ease, color 0.3s ease;
}

.single-hero .hero-demo-btn:hover {
    border-color: var(--primary-color);
    background: var(--primary-color);
    color: var(--cta-text-color);
}

.single-hero .hero-demo-btn svg {
    flex-shrink: 0;
}

/* Action button outside actions row needs top margin */
.single-hero__quick-info + .hero-demo-btn,
.single-hero__meta + .hero-demo-btn {
    margin-top: 20px;
}

/* Responsive Hero */
@media (max-width: 991px) {
    .single-hero {
        min-height: 100svh;
        aspect-ratio: auto;
    }

    .single-hero__card {
        padding: 24px 20px;
        margin: 0 auto 32px;
        border-radius: 20px;
        text-align: center;
    }

    .single-hero__badges {
        justify-content: center;
    }

    .single-hero__meta {
        justify-content: center;
        gap: 10px;
    }

    .single-hero__quick-info {
        justify-content: center;
        gap: 20px;
    }

    .single-hero__wa-banner {
        flex-direction: column;
        text-align: center;
        gap: 12px;
    }

    /* Action buttons: full width on mobile */
    .single-hero__actions {
        flex-direction: column;
        width: 100%;
    }

    .single-hero__actions a {
        width: 100%;
        justify-content: center;
        text-align: center;
    }

    .single-hero .hero-demo-btn {
        width: 100%;
        justify-content: center;
        text-align: center;
    }
}

@media (max-width: 768px) {
    .single-hero__card {
        padding: 20px 16px;
        margin-bottom: 24px;
        border-radius: 16px;
    }

    /* Breadcrumbs: smaller + lighter on mobile */
    .single-hero__card .single-breadcrumbs {
        font-size: var(--xs-size);
        font-weight: 400;
        letter-spacing: 0.5px;
        margin-bottom: 14px;
    }

    .single-hero__card .single-breadcrumbs .sep {
        margin: 0 5px;
    }

    .siap-breadcrumbs {
        font-size: var(--xs-size);
        font-weight: 400;
    }

    .single-hero__meta-sep {
        display: none;
    }

    .single-hero__quick-info {
        gap: 16px;
    }

    .quick-item {
        gap: 4px;
    }

    .single-hero .hero-demo-btn {
        padding: 14px 24px;
    }
}

@media (max-width: 480px) {
    .single-hero__quick-info {
        gap: 12px;
    }

    .quick-label {
        font-size: 9px;
        letter-spacing: 1px;
    }

    .quick-value {
        font-size: var(--small-size);
    }
}

/* ============================================
   Single Media — Shared Gallery + Video + Map
   Used by single tour_package, destination
   ============================================ */

.single-media-section {
    padding: 48px 0;
    border-top: 1px solid rgba(var(--heading-color-rgb), 0.06);
}

.single-media__title {
    font-size: var(--h3-size);
    font-weight: 800;
    color: var(--heading-color);
    margin: 0 0 24px;
}

.single-media__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

.single-media__item {
    margin: 0;
    border-radius: 12px;
    overflow: hidden;
}

.single-media__item a {
    display: block;
    aspect-ratio: 4/3;
    overflow: hidden;
}

.single-media__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.single-media__item:hover img {
    transform: scale(1.05);
}

.single-media__caption {
    padding: 8px 12px;
    font-size: var(--xs-size);
    color: var(--text-color);
    opacity: 0.6;
}

.single-media__video {
    margin-top: 40px;
}

.single-media__gallery + .single-media__video {
    padding-top: 40px;
    border-top: 1px solid rgba(var(--heading-color-rgb), 0.06);
}

.single-media__map {
    margin-top: 40px;
}

.single-media__map iframe {
    width: 100%;
    height: 400px;
    border: 0;
    border-radius: var(--radius-md);
}

.single-media__gallery + .single-media__map {
    padding-top: 40px;
    border-top: 1px solid rgba(var(--heading-color-rgb), 0.06);
}

.single-media__video + .single-media__map {
    padding-top: 40px;
    border-top: 1px solid rgba(var(--heading-color-rgb), 0.06);
}

@media (max-width: 991px) {
    .single-media__grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
    }

    .single-media__map iframe {
        height: 300px;
    }
}

@media (max-width: 768px) {
    .single-media__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    .single-media__item {
        border-radius: 8px;
    }

    .single-media-section {
        padding: 32px 0;
    }

    .single-media__video {
        margin-top: 24px;
    }

    .single-media__map {
        margin-top: 24px;
    }

    .single-media__map iframe {
        height: 250px;
    }
}

/* ============================================
   Archive Header — Shared Component
   Used by tour archive, destination archive,
   blog archive, contact page, search
   ============================================ */

.archive-header {
    padding: 140px 0 60px;
    text-align: center;
    background: rgba(var(--heading-color-rgb), 0.02);
    position: relative;
}

/* Archive header with background image */
.archive-header--has-bg {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.archive-header--has-bg::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(var(--overlay-bg-rgb), 0.65);
    pointer-events: none;
}

.archive-header--has-bg > .container {
    position: relative;
    z-index: 1;
}

.archive-header--has-bg .archive-header__subtitle {
    color: var(--overlay-text-color);
    opacity: 0.9;
}

.archive-header--has-bg .archive-header__title {
    color: var(--overlay-text-color);
}

.archive-header--has-bg .archive-header__description {
    color: var(--overlay-text-color);
    opacity: 0.8;
}

.archive-header + .container {
    padding-top: 40px;
}

.archive-header__subtitle {
    font-size: var(--secondary-size);
    font-weight: 600;
    color: var(--primary-color);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 8px;
}

.archive-header__title {
    font-size: var(--h1-size);
    font-weight: 900;
    color: var(--heading-color);
    letter-spacing: -1px;
    margin-bottom: 12px;
}

.archive-header__description {
    font-size: var(--body-size);
    color: var(--text-color);
    opacity: 0.7;
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.7;
}

@media (max-width: 991px) {
    .archive-header {
        padding: 120px 0 48px;
    }
}

@media (max-width: 768px) {
    .archive-header {
        padding: 120px 0 40px;
    }

    .archive-header__title {
        font-size: clamp(24px, 5vw, 32px);
    }
}

@media (max-width: 480px) {
    .archive-header {
        padding: 120px 0 32px;
    }
}

/* ============================================
   Empty State — Shared Component
   ============================================ */

.empty-state {
    text-align: center;
    padding: 60px 20px;
}

.empty-state__icon {
    margin-bottom: 16px;
}

.empty-state__icon svg {
    width: 56px;
    height: 56px;
    color: var(--text-color);
    opacity: 0.25;
}

.empty-state h2 {
    font-size: var(--h3-size);
    font-weight: 800;
    color: var(--heading-color);
    margin-bottom: 12px;
}

.empty-state p {
    font-size: var(--content-size);
    color: var(--text-color);
    opacity: 0.7;
}

/* ============================================
   Share Buttons — Shared Component
   ============================================ */

.share-buttons {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 24px 0;
    margin-top: 32px;
    border-top: 1px solid rgba(var(--heading-color-rgb), 0.08);
}

.share-buttons__label {
    font-size: var(--small-size);
    font-weight: 700;
    color: var(--heading-color);
    text-transform: uppercase;
    letter-spacing: 1.5px;
}

.share-buttons__list {
    display: flex;
    gap: 8px;
}

.share-btn {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: rgba(var(--heading-color-rgb), 0.05);
    border: 1px solid rgba(var(--heading-color-rgb), 0.08);
    color: var(--text-color);
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease;
}

.share-btn:hover {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--cta-text-color);
    transform: translateY(-2px);
}

.share-btn svg {
    width: 18px;
    height: 18px;
}

.share-btn--copy.copied {
    background: var(--success-color, #22C55E);
    border-color: var(--success-color, #22C55E);
    color: #ffffff;
}

@media (max-width: 480px) {
    .share-buttons {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .share-btn {
        width: 34px;
        height: 34px;
    }

    .share-btn svg {
        width: 16px;
        height: 16px;
    }
}

/* Remove top padding on pages with full-bleed hero or archive-header (which has its own top padding) */
.home .site-main,
.blog .site-main,
.single-tour_package .site-main,
.single-client .site-main,
.tax-tour_destination .site-main,
.single-rental .site-main,
.single-accommodation .site-main,
.tax-acc_place .site-main,
.single-post .site-main,
.archive .site-main,
.post-type-archive .site-main,
.search .site-main,
.page .site-main {
    padding-top: 0;
}

/* On mobile, admin bar is not fixed, but header is. Offset as needed. */
@media (max-width: 991px) {
    .section-padding {
        padding: 56px 0;
    }
    .site-main {
        padding: 70px 0 32px;
    }
}

@media (max-width: 768px) {
    .section-padding {
        padding: 40px 0;
    }
    .site-main {
        padding: 64px 0 24px;
    }
}

@media screen and (max-width: 600px) {
    .site-main {
        padding: 64px 0 24px;
    }
}

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

.entry-title {
    font-size: var(--h1-font-size, 42px);
    margin-bottom: 20px;
}

.entry-content {
    font-size: var(--body-font-size, 18px);
    color: var(--text-color);
}

.site-footer {
    text-align: center;
}

/* Helper Classes */
.section-padding {
    padding: 80px 0;
}

.section-title {
    font-size: clamp(32px, 5vw, 64px);
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 20px;
    color: var(--heading-color);
}

.section-subtitle {
    font-size: var(--content-size);
    color: var(--primary-color);
    text-transform: uppercase;
    letter-spacing: 3px;
    font-weight: 700;
    margin-bottom: 20px;
}

.text-center {
    text-align: center;
}

.d-flex {
    display: flex;
}

.justify-content-between {
    justify-content: space-between;
}

.align-items-end {
    align-items: flex-end;
}

.btn-main {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 13px 30px;
    background: var(--primary-color);
    color: var(--cta-text-color) !important;
    border: 1px solid transparent;
    border-radius: 100px;
    font-size: var(--button-size);
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.btn-main:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 35px color-mix(in srgb, var(--primary-color) 30%, transparent);
    filter: brightness(1.1);
}

.btn-main.large {
    padding: 18px 45px;
    font-size: var(--secondary-size);
    font-weight: 800;
}

.btn-outline {
    display: inline-flex;
    align-items: center;
    padding: 15px 35px;
    border: 1px solid rgba(var(--primary-color-rgb), 0.2);
    border-radius: 100px;
    color: var(--text-color);
    text-decoration: none;
    font-weight: 700;
    transition: all 0.3s ease;
}

.btn-outline:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
    background: rgba(var(--primary-color-rgb), 0.05);
}

.magnetic {
    display: inline-block;
}

.reveal-text {
    overflow: hidden;
}

.reveal-text span {
    display: block;
}