/**
 * Hotel Single Page Styles
 * Conversion-optimized design for hotel excursion landing pages
 * Uses PCA design tokens from tokens.css
 *
 * @package PCA
 * @since 1.0.0
 */

/* ================================
   Container & Layout
   ================================ */

.pca-container {
    max-width: 1170px;
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--space-xl);
    padding-right: var(--space-xl);
}

/* ================================
   Hero Section - Centered & High Contrast
   ================================ */

.pca-hotel-hero {
    position: relative;
    min-height: 600px;
    display: flex;
    align-items: center;
    overflow: hidden;
    color: white;
    padding: var(--space-2xl) 0;
}

/* Desktop: Shorter hero to show tour grid peek above fold (improves scroll depth) */
@media (min-width: 992px) {
    .pca-hotel-hero {
        min-height: 520px;
    }
}

/* Hero background image (positioned absolutely for LCP optimization) */
.pca-hero-bg-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    display: block;
}

/* Overlay gradient (replaces inline style from background-image) */
.pca-hotel-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.6));
    pointer-events: none; /* Allow clicks through to buttons/links */
}

.pca-hotel-hero__content {
    position: relative;
    z-index: 2;
    width: 100%;
}

/* Centered hero layout */
.pca-hero-centered {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.pca-hero-text {
    max-width: 100%;
}

/* Eyebrow text */
.pca-hotel-hero__eyebrow {
    font-size: 16px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(255, 255, 255, 0.95);
    margin-bottom: var(--space-md);
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.pca-hotel-page .pca-hotel-hero__title {
    font-family: var(--font-display) !important;
    font-size: 36px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    margin-bottom: var(--space-lg);
    color: white !important;
    text-align: center;
    letter-spacing: -0.02em;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
    max-width: 900px;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.pca-hotel-hero__title-prefix {
    font-size: 16px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(255, 255, 255, 0.95);
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    display: block;
}

.pca-hotel-page .pca-hotel-hero__title-hotel {
    display: block;
    font-size: 36px !important;
    font-weight: 700 !important;
}

.pca-hotel-hero__subtitle-below {
    font-size: 16px;
    font-weight: 500;
    line-height: 1.4;
    max-width: 600px;
    margin: 0.5rem auto 1rem;
    color: rgba(255, 255, 255, 0.9);
    text-align: center;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    letter-spacing: 0.01em;
}

.pca-hotel-hero__description {
    font-size: 18px;
    font-weight: var(--weight-regular);
    line-height: 1.6;
    max-width: 700px;
    margin: 0 auto var(--space-xl);
    color: rgba(255, 255, 255, 0.95);
    text-align: center;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

/* Legacy subtitle class for backwards compatibility */
.pca-hotel-hero__subtitle {
    font-size: 18px;
    font-weight: var(--weight-regular);
    line-height: 1.6;
    max-width: 700px;
    margin: 0 auto var(--space-xl);
    color: rgba(255, 255, 255, 0.95);
    text-align: center;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

/* Desktop: Larger hero text for impact */
@media (min-width: 769px) {
    .pca-hotel-page .pca-hotel-hero__title {
        font-size: 36px !important;
        margin-bottom: var(--space-xl);
    }

    .pca-hotel-hero__title-prefix {
        font-size: 14px;
        letter-spacing: 0.15em;
    }

    .pca-hotel-hero__subtitle,
    .pca-hotel-hero__description {
        font-size: 20px;
        margin-bottom: var(--space-2xl);
    }

    .pca-hotel-hero__subtitle-below {
        font-size: 18px;
    }

    .pca-hotel-hero__eyebrow {
        font-size: 14px;
        letter-spacing: 0.15em;
    }
}

/* Large desktop: Consistent sizing */
@media (min-width: 1200px) {
    .pca-hotel-page .pca-hotel-hero__title {
        font-size: 36px !important;
    }
}

/* Hero CTA Buttons - Centered with proper spacing */
.pca-hotel-hero__cta {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0;
    flex-wrap: wrap;
}

.pca-btn-icon {
    width: 20px;
    height: 20px;
    margin-left: var(--space-xs);
    margin-right: -4px;
    transition: transform 0.2s;
}

.pca-btn:hover .pca-btn-icon {
    transform: translateX(4px);
}

/* ================================
   Buttons
   ================================ */

/* Base button - parent theme safe */
a.pca-btn,
button.pca-btn {
    /* Layout */
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    padding: var(--space-sm, 0.75rem) var(--space-xl, 2rem);
    min-height: 50px;
    
    /* Font properties - explicit override */
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    font-style: normal !important;
    line-height: 1.25 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    text-decoration: none !important;
    
    /* Visual */
    border-radius: 8px;
    border: 2px solid transparent;
    cursor: pointer;
    transition: all 0.2s ease;
}

/* Primary button - nuclear override for white text */
a.pca-btn.pca-btn--primary,
button.pca-btn.pca-btn--primary {
    /* Color - MUST be white */
    color: #ffffff !important;
    background: var(--color-primary, #ff9900) !important;
    border-color: var(--color-primary, #ff9900) !important;
    box-shadow: 0 2px 8px rgba(255, 153, 0, 0.3);
    
    /* Font weight - explicit 500 */
    font-weight: 500 !important;
}

a.pca-btn.pca-btn--primary:hover,
button.pca-btn.pca-btn--primary:hover,
a.pca-btn.pca-btn--primary:focus,
button.pca-btn.pca-btn--primary:focus {
    /* Keep white on hover/focus */
    color: #ffffff !important;
    background: var(--color-primary-hover, #e68a00) !important;
    border-color: var(--color-primary-hover, #e68a00) !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(255, 153, 0, 0.4);
    text-decoration: none !important;
}

.pca-btn--secondary {
    background: rgba(255, 255, 255, 0.15);
    color: white;
    border: 2px solid rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.pca-btn--secondary:hover {
    background: white;
    color: #333;
    border-color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(255, 255, 255, 0.3);
}

.pca-btn--outline {
    background: transparent;
    color: var(--color-primary);
    border-color: var(--color-primary);
}

.pca-btn--outline:hover {
    background: var(--color-primary);
    color: white;
}

/* Large button variant - maintain font protection */
a.pca-btn.pca-btn--large,
button.pca-btn.pca-btn--large {
    padding: var(--space-md, 1rem) var(--space-2xl, 3rem) !important;
    font-size: 18px !important;
    font-weight: 500 !important;
    min-height: 56px;
}

/* Small button variant */
a.pca-btn.pca-btn--small,
button.pca-btn.pca-btn--small {
    padding: var(--space-xs, 0.5rem) var(--space-md, 1rem) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    min-height: 40px;
}

/* ================================
   Pickup Banner
   ================================ */

.pca-hotel-pickup-banner {
    background: linear-gradient(135deg, var(--color-primary, #ff9900) 0%, var(--color-primary-hover, #e68a00) 100%);
    color: white;
    padding: var(--space-lg) 0;
}

/* Middle position variant - more spacing as section divider */
.pca-pickup-banner--middle {
    margin: var(--space-2xl) 0;
    border-radius: var(--radius-lg);
}

.pca-pickup-banner__content {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    justify-content: center;
    text-align: center;
}

.pca-pickup-banner__content i {
    font-size: 32px;
    color: #ffd700;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

.pca-pickup-banner__text strong {
    display: block;
    font-size: var(--fs-h3);
    font-weight: var(--weight-bold);
    margin-bottom: var(--space-xs);
}

.pca-pickup-banner__text p {
    margin: 0;
    font-size: var(--fs-sm);
    opacity: 0.9;
}

/* ================================
   Main Content
   ================================ */

.pca-hotel-main {
    padding: var(--space-2xl) 0;
    background: var(--color-background-light, #f8f9fa);
}

.pca-hotel-intro {
    max-width: 800px;
    margin: 0 auto var(--space-2xl);
    text-align: center;
}

.pca-intro-eyebrow {
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-primary, #ff9900);
    margin-bottom: var(--space-sm);
}

.pca-hotel-intro h2 {
    font-family: var(--font-display);
    font-size: var(--fs-h2);
    font-weight: var(--weight-bold);
    line-height: var(--lh-snug);
    margin-bottom: var(--space-lg);
    color: var(--color-heading);
}

.pca-hotel-intro__text {
    font-size: var(--fs-h4);
    line-height: var(--lh-body);
    color: var(--color-body);
}

/* ================================
   Tours Section
   ================================ */

.pca-hotel-tours-section {
    margin-bottom: var(--space-2xl);
    overflow: hidden; /* Prevent row negative margins from causing horizontal scroll */
}

.pca-hotel-tours-header {
    text-align: center;
    margin-bottom: var(--space-2xl);
}

.pca-tours-intro {
    font-size: 16px;
    line-height: 1.6;
    color: var(--color-text);
    margin: 0 auto var(--space-lg);
    max-width: 700px;
}

.pca-hotel-tours-header h2 {
    font-family: var(--font-display);
    font-size: var(--fs-h2);
    font-weight: var(--weight-bold);
    line-height: var(--lh-snug);
    margin: 0;
    color: var(--color-heading);
}

.pca-section-subtitle {
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: var(--weight-regular);
    color: var(--color-text-light);
    display: inline-block;
    margin-left: 0.5rem;
}

/* Hide subtitle on mobile for cleaner scan */
@media (max-width: 768px) {
    .pca-section-subtitle {
        display: none;
    }
}

/* Ensure tour grid stays contained - matches landing.php pattern */
.pca-hotel-tours-section .service-list-wrapper {
    width: 100%;
    max-width: 100%;
}

.pca-hotel-tours-footer {
    margin-top: 2rem;
    text-align: center;
}

.pca-tours-footer-text {
    font-size: var(--fs-body);
    color: var(--color-muted);
    margin-bottom: var(--space-md);
    font-weight: 500;
}

/* Empty state for no tours */
.pca-no-tours {
    text-align: center;
    padding: var(--space-2xl);
    color: var(--color-muted);
    font-size: var(--fs-body);
}

/* ================================
   Benefits Section
   ================================ */

.pca-hotel-benefits {
    margin-bottom: var(--space-2xl);
}

.pca-hotel-benefits h2 {
    font-family: var(--font-display);
    font-size: var(--fs-h2);
    font-weight: var(--weight-bold);
    line-height: var(--lh-snug);
    text-align: center;
    margin-bottom: var(--space-2xl);
    color: var(--color-heading);
}

.pca-benefits-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--space-lg);
}

.pca-benefit-card {
    background: var(--color-background);
    padding: var(--space-xl) var(--space-lg);
    border-radius: var(--radius-xl);
    text-align: center;
    box-shadow: var(--shadow-sm);
    transition: transform 0.2s;
}

.pca-benefit-card:hover {
    transform: translateY(-4px);
}

.pca-benefit-card i {
    font-size: 40px;
    color: var(--color-primary);
    margin-bottom: var(--space-md);
}

.pca-benefit-card h3 {
    font-family: var(--font-display);
    font-size: var(--fs-h4);
    font-weight: var(--weight-bold);
    line-height: var(--lh-head);
    margin-bottom: var(--space-sm);
    color: var(--color-heading);
}

.pca-benefit-card p {
    font-size: var(--fs-sm);
    line-height: var(--lh-body);
    color: var(--color-body);
    margin: 0;
}

/* ================================
   FAQ Section
   ================================ */

.pca-hotel-faq {
    max-width: 800px;
    margin: 0 auto var(--space-2xl);
}

.pca-hotel-faq h2 {
    font-family: var(--font-display);
    font-size: var(--fs-h2);
    font-weight: var(--weight-bold);
    line-height: var(--lh-snug);
    text-align: center;
    margin-bottom: var(--space-2xl);
    color: var(--color-heading);
}

.pca-faq-accordion {
    background: var(--color-background);
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.pca-faq-item {
    border-bottom: 1px solid var(--color-border);
}

.pca-faq-item:last-child {
    border-bottom: none;
}

.pca-faq-question {
    width: 100%;
    padding: var(--space-lg);
    background: var(--color-background);
    border: none;
    text-align: left;
    font-size: var(--fs-body);
    font-weight: var(--weight-semibold);
    font-family: var(--font-body);
    color: var(--color-heading);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background 0.2s;
}

.pca-faq-question:hover {
    background: var(--color-background-light);
}

.pca-faq-question i {
    transition: transform 0.3s;
    color: var(--color-primary);
}

.pca-faq-question[aria-expanded="true"] i {
    transform: rotate(180deg);
}

.pca-faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.pca-faq-answer p {
    padding: 0 var(--space-lg) var(--space-lg);
    margin: 0;
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    color: var(--color-body);
}

.pca-faq-answer p:first-child {
    padding-top: var(--space-xs);
}

.pca-faq-answer p:last-child {
    padding-bottom: var(--space-lg);
}

.pca-faq-answer ul {
    margin: var(--space-sm) 0;
    padding: 0 var(--space-lg) 0 calc(var(--space-lg) + var(--space-xl));
    list-style-type: disc;
}

.pca-faq-answer ul li {
    margin-bottom: var(--space-xs);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    color: var(--color-body);
    padding-left: var(--space-xs);
}

.pca-faq-answer ul li:last-child {
    margin-bottom: var(--space-md);
}

.pca-faq-answer ul li strong {
    font-weight: var(--weight-semibold);
    color: var(--color-heading);
}

.pca-faq-question[aria-expanded="true"] + .pca-faq-answer {
    max-height: 600px; /* Increased to accommodate list content */
}

/* ================================
   Disclaimer
   ================================ */

.pca-hotel-disclaimer {
    max-width: 800px;
    margin: 0 auto;
    padding: var(--space-md);
    background: var(--color-background-light);
    border-left: 4px solid var(--color-border-muted);
    border-radius: var(--radius-lg);
}

.pca-disclaimer-text {
    margin: 0;
    font-size: var(--fs-xs);
    line-height: var(--lh-body);
    color: var(--color-muted);
    display: flex;
    gap: var(--space-sm);
}

.pca-disclaimer-text i {
    flex-shrink: 0;
    margin-top: 2px;
}

/* ================================
   Breadcrumb Navigation - Parent Theme Isolation
   ================================ */

/* Highly specific selector to override parent theme breadcrumb styles */
nav.pca-breadcrumb[aria-label="Breadcrumb"] {
    background: var(--color-background-light, #f9fafb);
    padding: var(--space-xs, 0.5rem) 0;
    margin: 0 !important;
    border: none !important;
    box-shadow: none !important;
}

nav.pca-breadcrumb[aria-label="Breadcrumb"] ol {
    display: flex !important;
    list-style: none !important;
    margin: 0 auto !important;
    padding: 0 2rem !important;
    max-width: 1170px;
    font-size: 12px !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0;
}

nav.pca-breadcrumb[aria-label="Breadcrumb"] li {
    display: flex !important;
    align-items: center;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    font-size: 12px !important;
    font-family: inherit !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
}

nav.pca-breadcrumb[aria-label="Breadcrumb"] li::before {
    content: none !important;
    display: none !important;
}

nav.pca-breadcrumb[aria-label="Breadcrumb"] li:not(:last-child)::after {
    content: '›' !important;
    margin: 0 var(--space-xs, 0.5rem) !important;
    color: var(--color-muted, #9ca3af) !important;
    font-size: 14px;
    font-weight: 400;
}

/* Links inside breadcrumb - COMPLETE font override to beat parent theme */
nav.pca-breadcrumb[aria-label="Breadcrumb"] a,
nav.pca-breadcrumb[aria-label="Breadcrumb"] a:link,
nav.pca-breadcrumb[aria-label="Breadcrumb"] a:visited {
    /* Color & decoration */
    color: var(--color-primary, #0ea5e9) !important;
    text-decoration: none !important;
    
    /* Font properties - override Elementor global styles */
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    font-style: normal !important;
    line-height: 1.5 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    
    /* Spacing & display */
    padding: 0 !important;
    margin: 0 !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    
    /* Transition */
    transition: color 0.2s ease, text-decoration 0.2s ease;
}

nav.pca-breadcrumb[aria-label="Breadcrumb"] a:hover,
nav.pca-breadcrumb[aria-label="Breadcrumb"] a:active {
    text-decoration: underline !important;
    color: var(--color-primary-dark, #0284c7) !important;
    background: none !important;
    border: none !important;
}

nav.pca-breadcrumb[aria-label="Breadcrumb"] a:focus-visible {
    outline: 2px solid var(--color-primary, #0ea5e9) !important;
    outline-offset: 2px !important;
    border-radius: 2px;
    text-decoration: underline !important;
}

/* Current page (not a link) */
nav.pca-breadcrumb[aria-label="Breadcrumb"] li[aria-current="page"] {
    color: var(--color-muted, #6b7280) !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    font-style: normal !important;
    line-height: 1.5 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
}

/* Compact breadcrumb on mobile - show only last 2 levels */
@media (max-width: 768px) {
    nav.pca-breadcrumb[aria-label="Breadcrumb"] {
        padding: 6px 0 !important;
    }
    
    nav.pca-breadcrumb[aria-label="Breadcrumb"] ol {
        font-size: 11px !important;
        padding: 0 1rem !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none; /* Firefox */
    }
    
    /* Mobile link styles - smaller font */
    nav.pca-breadcrumb[aria-label="Breadcrumb"] a,
    nav.pca-breadcrumb[aria-label="Breadcrumb"] a:link,
    nav.pca-breadcrumb[aria-label="Breadcrumb"] a:visited {
        font-size: 11px !important;
    }
    
    /* Mobile current page - smaller font */
    nav.pca-breadcrumb[aria-label="Breadcrumb"] li[aria-current="page"] {
        font-size: 11px !important;
    }
    
    /* Hide scrollbar for Chrome/Safari/Edge */
    nav.pca-breadcrumb[aria-label="Breadcrumb"] ol::-webkit-scrollbar {
        display: none !important;
    }
    
    /* Hide first level (Excursions) - show only: Hotels › Hotel Name */
    nav.pca-breadcrumb[aria-label="Breadcrumb"] li:first-child {
        display: none;
    }
    
    /* Truncate long hotel names */
    nav.pca-breadcrumb[aria-label="Breadcrumb"] li[aria-current="page"] {
        max-width: 60vw;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

/* ================================
   Popular Tours Section
   ================================ */

.pca-hotel-popular-tours {
    margin: var(--space-2xl) 0;
}

.pca-hotel-popular-tours h2 {
    font-family: var(--font-display);
    font-size: var(--fs-h2);
    font-weight: var(--weight-bold);
    text-align: center;
    margin-bottom: var(--space-xl);
    color: var(--color-heading);
}

/* Popular tours now use parent theme's service-list-wrapper class for consistent 4-column grid */

/* ================================
   Responsive Styles
   ================================ */

@media (max-width: 768px) {
    .pca-container {
        padding-left: var(--space-md);
        padding-right: var(--space-md);
    }

    .pca-hotel-hero {
        min-height: 500px;
        padding: var(--space-2xl) 0;
    }

    /* Mobile: Consistent 36px sizing */
    .pca-hotel-page .pca-hotel-hero__title {
        font-size: 36px !important;
        font-weight: 700 !important;
        margin-bottom: var(--space-md);
    }

    .pca-hotel-hero__title-prefix {
        font-size: 12px;
        letter-spacing: 0.08em;
    }

    .pca-hotel-hero__subtitle,
    .pca-hotel-hero__description {
        font-size: 16px;
        margin: 0 auto var(--space-lg);
        line-height: 1.5;
    }

    .pca-hotel-hero__subtitle-below {
        font-size: 15px;
        margin: 0.5rem auto 0.75rem;
    }

    .pca-hotel-hero__eyebrow {
        font-size: 12px;
        letter-spacing: 0.08em;
    }

    .pca-hotel-hero__cta {
        flex-direction: column;
        gap: 0.75rem;
    }

    .pca-btn {
        width: 100%;
        max-width: 100%;
        min-width: 280px;
    }

    .pca-pickup-banner__content {
        flex-direction: column;
        text-align: center;
    }

    .pca-pickup-banner__text strong {
        font-size: var(--fs-body);
    }

    /* FAQ mobile adjustments */
    .pca-faq-question {
        padding: var(--space-md);
        font-size: var(--fs-body);
    }

    .pca-faq-answer p {
        padding: 0 var(--space-md) var(--space-md);
    }

    .pca-faq-answer ul {
        padding: 0 var(--space-md) 0 calc(var(--space-md) + var(--space-lg));
        margin: var(--space-xs) 0;
    }

    .pca-faq-answer ul li {
        font-size: var(--fs-sm);
        line-height: 1.5;
        margin-bottom: var(--space-xs);
    }
}

/* ================================
   Animation Support
   ================================ */

[data-aos] {
    opacity: 0;
    transition-property: opacity, transform;
}

[data-aos].aos-animate {
    opacity: 1;
}

[data-aos="fade-up"] {
    transform: translateY(20px);
}

[data-aos="fade-up"].aos-animate {
    transform: translateY(0);
}

[data-aos="fade-right"] {
    transform: translateX(-30px);
}

[data-aos="fade-right"].aos-animate {
    transform: translateX(0);
}

/* ================================
   Hero Benefits Chips (small horizontal, centered)
   ================================ */
.pca-hero-benefits {
    margin-top: 1.5rem;
    display: flex;
    justify-content: center;
    width: 100%;
}

.pca-benefits-grid--hero {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
}

.pca-benefits-grid--hero .pca-benefit-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 999px;
    font-size: 13px;
    line-height: 1.2;
    font-weight: 500;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.35);
    backdrop-filter: blur(8px);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    transition: all 0.2s ease;
}

.pca-benefits-grid--hero .pca-benefit-chip:hover {
    background: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.45);
    transform: translateY(-1px);
}

.pca-benefits-grid--hero .pca-benefit-chip i {
    font-size: 15px;
    line-height: 1;
}

@media (max-width: 575.98px) {
    .pca-benefits-grid--hero .pca-benefit-chip {
        font-size: 12px;
        padding: 6px 10px;
    }
    
    .pca-benefits-grid--hero .pca-benefit-chip i {
        font-size: 13px;
    }
}

/* ================================
   Hero Trust Badges - Centered
   ================================ */
.pca-hotel-hero__trust {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.pca-trust-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.95);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    font-weight: 500;
}

.pca-trust-badge i {
    font-size: 16px;
    color: #ffd700;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
}

.pca-trust-badge strong {
    font-weight: 700;
    color: #ffffff;
}

@media (max-width: 768px) {
    .pca-hotel-hero__trust {
        gap: 1rem;
        padding-top: 1.5rem;
        margin-top: 1.5rem;
    }
    
    .pca-trust-badge {
        font-size: 13px;
    }
    
    .pca-trust-badge i {
        font-size: 14px;
    }
}

/* ================================
   Accessibility: Keyboard Focus
   ================================ */

.pca-btn:focus-visible,
.pca-faq-question:focus-visible,
.pca-breadcrumb a:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* ================================
   Accessibility: Contrast Fixes (WCAG AA)
   ================================ */

/* Tour badge pills: opaque background + darker text for 9.3:1 contrast */
.tour-badge,
.tour-badge-trust,
.tour-badge-paylater {
    background-color: #F3F4F6 !important;   /* light gray, opaque */
    color: #1F2937 !important;               /* gray-800 text = 9.3:1 contrast */
    border: 1px solid #D1D5DB !important;    /* subtle edge */
    font-weight: 600;                         /* improves legibility */
    text-shadow: none;
    box-shadow: 0 1px 2px rgba(0,0,0,.05);
}

.tour-badge:hover,
.tour-badge-trust:hover,
.tour-badge-paylater:hover {
    background-color: #E5E7EB !important;    /* stays AA on hover */
}

/* "From" price prefix: darker gray for 10.3:1 contrast */
.tour-price-prefix {
    color: #374151;                           /* gray-700 (≈10.3:1 on white) */
}

/* Card wrapper: darker border for 3:1 contrast vs page background */
.item.pca-card-wrapper.card {
    background-color: #FFFFFF;
    border: 1px solid #6B7280;                /* gray-500, ≥3:1 vs #f8f9fa */
    box-shadow: 0 2px 8px rgba(0,0,0,.06);
    color: #111827;                           /* ensure dark body text */
}

/* Card text contrast */
.pca-card-wrapper .tour-title {
    color: #222222;
}

.pca-card-wrapper .tour-excerpt {
    color: #333333;
}

/* Link distinguishability - underline on interaction */
a:not(.pca-btn):not(.tour-card-link):hover,
a:not(.pca-btn):not(.tour-card-link):focus {
    text-decoration: underline;
}

/* Footer links - always underlined for distinction */
.footer a {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

/* Footer heading hierarchy fix - h3 styled as h5 for visual consistency */
.footer h3.footer-heading {
    font-size: 1rem;
    font-weight: 500;
}

/* ================================
   Legal Disclaimer (Below Footer)
   ================================ */

.pca-legal-notice {
    margin: 24px 0 8px;
    text-align: center;
    padding: 12px 0;
}

.pca-legal-notice small {
    font-size: 0.625rem;      /* 10px: maximally subtle */
    line-height: 1.5;         /* easier to read at small sizes */
    letter-spacing: 0.01em;   /* subtle breathing room */
    color: #6b7280;           /* gray-500: ~4.5:1 contrast (WCAG AA) */
    display: inline-block;
    max-width: 980px;
    padding: 0 12px;
}

/* Dark mode: maintain contrast */
@media (prefers-color-scheme: dark) {
    .pca-legal-notice small {
        color: #9ca3af;       /* gray-400: maintains readability in dark mode */
    }
}

/* Mobile: same size */
@media (max-width: 768px) {
    .pca-legal-notice {
        margin: 16px 0 8px;
        padding: 10px 0;
    }
    
    .pca-legal-notice small {
        font-size: 0.5625rem;  /* 9px on mobile */
    }
}

/* ================================
   Hotel Links Component (SEO Exit Path)
   Muted styling to reduce prominence
   ================================ */

/* Wrapper spacing - push it down, separate visually */
.pca-hotel-links-wrapper {
    margin-top: var(--space-3xl, 4rem);
    padding-top: var(--space-2xl, 3rem);
    border-top: 1px solid var(--color-border, #e5e7eb);
}

/* Eyebrow text - matches intro eyebrow pattern */
.pca-hotel-links-wrapper .pca-hotel-pickup__eyebrow {
    font-size: 11px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    color: var(--color-muted, #9ca3af) !important;
    margin-bottom: var(--space-md, 1rem) !important;
    text-align: center !important;
    display: block !important;
}

@media (max-width: 768px) {
    .pca-hotel-links-wrapper .pca-hotel-pickup__eyebrow {
        font-size: 10px !important;
        letter-spacing: 0.06em !important;
        margin-bottom: var(--space-sm, 0.75rem) !important;
    }
}

/* Override chips - smaller, transparent background, subtle border */
.pca-hotel-links-wrapper .pca-hotel-pickup__chip {
    font-size: var(--fs-xs, 12px) !important;
    padding: var(--space-xs, 6px) var(--space-sm, 10px);
    background: transparent !important;
    border: 1px solid var(--color-border, #e5e7eb) !important;
    color: var(--color-body, #4b5563) !important;
    transition: all 0.15s ease;
}

/* Subtle hover - don't make it too prominent */
.pca-hotel-links-wrapper .pca-hotel-pickup__chip:hover {
    background: var(--color-background-light, #f8f9fa) !important;
    border-color: var(--color-muted, #d1d5db) !important;
    color: var(--color-heading, #111827) !important;
    box-shadow: none !important;
}

/* Grid - reduce gap for tighter layout */
.pca-hotel-links-wrapper .pca-hotel-pickup__list {
    gap: var(--space-xs, 8px) var(--space-sm, 12px);
}

/* "See all hotels" button - make subtle */
.pca-hotel-links-wrapper .pca-hotel-pickup__btn {
    font-size: var(--fs-xs, 12px) !important;
    padding: var(--space-xs, 8px) var(--space-md, 16px);
    background: transparent !important;
    border: 1px solid var(--color-border, #e5e7eb) !important;
    color: var(--color-body, #4b5563) !important;
}

.pca-hotel-links-wrapper .pca-hotel-pickup__btn:hover {
    background: var(--color-background-light, #f8f9fa) !important;
    border-color: var(--color-muted, #d1d5db) !important;
}

/* Mobile: even more compact */
@media (max-width: 768px) {
    .pca-hotel-links-wrapper {
        margin-top: var(--space-2xl, 2rem);
        padding-top: var(--space-lg, 1.5rem);
    }
    
    .pca-hotel-links-wrapper .tour-hotel-pickup-heading {
        font-size: var(--fs-xs, 12px) !important;
    }
    
    .pca-hotel-links-wrapper .pca-hotel-pickup__chip {
        font-size: 11px !important;
        padding: 5px 8px;
    }
    
    .pca-hotel-links-wrapper .pca-hotel-pickup__list {
        gap: 6px;
    }
}

/* Loading state (before lazy load) */
.pca-hotel-links-wrapper[data-lazy-loading="true"] {
    min-height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pca-hotel-links-wrapper[data-lazy-loading="true"]::before {
    content: "Loading related hotels...";
    font-size: var(--fs-sm, 14px);
    color: var(--color-muted, #9ca3af);
}

/* ================================
   Touch Targets - Accessibility (WCAG 2.5.5)
   ================================ */

/* Touch targets: Minimum 44x44px for accessibility (WCAG 2.5.5) */
a.social-icon.pca-social-icon,
.social-icon.pca-social-icon {
    min-width: 44px !important;
    min-height: 44px !important;
    width: 44px !important;
    height: 44px !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
    margin: 4px !important;  /* Spacing between targets */
}

/* Ensure icon inside is properly sized */
a.social-icon.pca-social-icon svg,
a.social-icon.pca-social-icon i,
.social-icon.pca-social-icon svg,
.social-icon.pca-social-icon i {
    width: 20px;
    height: 20px;
    font-size: 20px;
}

/* Mobile touch targets: Header navigation elements (WCAG 2.5.5) */
@media (max-width: 768px) {
    /* Logo/brand link - ensure minimum 44x44px touch target */
    a.navbar-brand.d-inline-flex.align-items-center {
        min-width: 44px !important;
        min-height: 44px !important;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        padding: 6px 8px !important;  /* Add padding to reach 44px */
    }
    
    /* All header navigation links on mobile */
    header a,
    .header-section a,
    nav a,
    .navbar a {
        min-height: 44px !important;
        display: inline-flex !important;
        align-items: center;
        padding: 10px 12px !important;  /* Ensure adequate touch area */
    }
    
    /* Exception: Don't override properly sized buttons */
    header a.btn,
    header a.pca-btn,
    header button {
        padding: 0.75rem 1.5rem !important;  /* Keep button padding */
    }
    
    /* Mobile menu toggle buttons */
    .navbar-toggler,
    .mobile-menu-toggle,
    button[aria-label*="menu"] {
        min-width: 44px !important;
        min-height: 44px !important;
        padding: 8px !important;
    }
}