/*!
Theme Name: Beyond Wonderland
Theme URI: https://virtualwindow.com
Author: Virtual Window
Author URI: https://virtualwindow.com
Description: A beautifully-simple yet powerful WordPress theme that integrates perfectly with the block editor and plugin. Start amazing websites with blocks today! Install the plugin to add even more page such as testimonials, sharing icons, notices, call to actions, buttons and more.
Tags: one-column, featured-images, theme-options, custom-background, custom-colors, custom-logo, custom-menu, editor-style, translation-ready, footer-widgets, full-width-template, blog, sticky-post, threaded-comments, wide-blocks
Version: 1.0.1
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: components-default-theme
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

Components Default Theme is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/


/* Blog page */
.block-space {
    padding-top: 75px;
    padding-bottom: 75px;
}

.gradient-banner {
    background: linear-gradient(313.79deg, #AFBCEE -15.11%, #ECEAE5 64.18%);
}

.filter-btn,
.single-post-page .taxonomy-post_tag a {
    border: 2px solid rgba(186, 116, 66, 0.50);
    background: rgba(186, 116, 66, 0.00);
    padding: 14px 25px;
    align-items: center;
    color: rgba(27, 30, 29, 0.61);
    font-weight: 500;
    font-size: 14px;
    border-radius: 30px;
    text-transform: uppercase;
}

.filter-btn.active,
.filter-btn:hover,
.single-post-page .taxonomy-post_tag a:hover {
    background-color: rgba(186, 116, 66);
    color: #fff;
}

.category-filter ul li {
    list-style-type: none;
}

.single-post-page .wp-block-post-terms__separator {
    display: none;
}

.single-post-page .taxonomy-post_tag a {
    padding: 14px 25px 10px;
}

.category-filter ul,
.single-post-page .taxonomy-post_tag {
    display: flex;
    align-items: center;
    column-gap: 20px;
    flex-wrap: wrap;
    row-gap: 15px;
    padding-left: 0px;
    margin-left: 0px;
}

.blog-img {
    aspect-ratio: 16 / 11;
    object-fit: cover;
}

.wp-block-quote {
    border-left: 4px solid #BA7442;
}

.wp-block-quote p {
    color: #BA7442;
    font-size: 24px;
    line-height: 1.5;
}

.blog-media img {
    /* aspect-ratio: 16 / 8; */
    width: 100%;
    height: auto;
    /* object-fit: cover; */
}

.single-post-page figcaption.wp-element-caption {
    background-color: #F5F5F5;
    padding: 10px;
    margin-top: 0px;
}

.post-grid-recent .wp-block-latest-posts__post-title {
    color: #000000;
    font-size: 24px;
    font-weight: 500;
    line-height: 1.2;
}

.post-grid-recent .wp-block-latest-posts__featured-image img {
    padding-bottom: 15px;
    width: 100%;
    max-width: 100% !important;
}

.post-grid-recent .wp-block-latest-posts__featured-image a {
    width: 100%;
}

.post-grid-recent .wp-block-latest-posts__post-date {
    padding-top: 10px;
}

.single-post-page h2 {
    font-size: 2rem !important;
}

.single-post-page h3 {
    font-size: 1.75rem !important;
}

.single-post-page h1 {
    font-size: 2.5rem !important;
}

.single-post-page ul.wp-block-list,
.single-post-page ol.wp-block-list {
    padding-left: 20px;
}

.single-post-page ol.wp-block-list {
    padding-left: 20px;
}

.cat-link,
.cat-link:hover {
    color: #212529;
}

.cat-link:hover {
    text-decoration: underline;
}

.blog-list .card h5 a {
    font-size: 20px;
    color: #212529;
}

.blog-list .card {
    background-color: transparent !important;
    border: 1px solid #ccc !important;
}

/* .blog-list .card:hover{
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
} */
.wp-block-quote {
    border-left: 3px solid #CF3700 !important;
}

.category-filter ul,
.single-post-page .taxonomy-post_tag {
    display: flex;
    align-items: center;
    column-gap: 17px;
    flex-wrap: wrap;
    row-gap: 35px;
    padding-left: 0px;
    margin-left: 0px;
}

.error-content {
    padding-top: 0px;
}

.error-content .link,
.error-content .link a {
    color: #BA7442;
}

.copy-msg {
    display: none;
    margin-left: 10px;
    font-size: 14px;
    color: #28a745;
    position: absolute;
    left: 40px;
    bottom: -30px;
}

.social-icon-footer.single-blog a svg:hover path {
    fill: rgb(15 41 61);
}

.social-icon-footer.single-blog {
    position: relative;
}

.bottom-links .justify-content-center {
    justify-content: flex-start !important;
}

.bottom-links .copy-msg {
    left: -5px;
}

.blog-list .btn-primary {
    background-color: transparent !important;
    border: none !important;
    color: #1B1E1D9C !important;
    font-size: 14px !important;
    text-transform: uppercase;
}

.blog-list .row {
    row-gap: 20px;
}

.single-post-page .taxonomy-post_tag {
    row-gap: 20px;
}

.filter-dropdown {
    border: none;
    background-color: #F3F0EE;
    padding: 12px;
    color: #1B1E1D9C;
    text-transform: uppercase;
    letter-spacing: 2.4px;
}

.filter-dropdown:focus,
.filter-dropdown:focus-visible {
    outline: transparent !important;
    border: transparent;
    box-shadow: none;
}

.filter-dropdown {
    display: none;
}

.pagination-wrap {
    text-align: center;
    font-size: 16px;
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;
    gap: 7px;
}

.pagination-wrap a.page-numbers,
.pagination-wrap .page-numbers.current {
    color: #fff;
    padding: 5px 10px 2px;
    border-radius: 5px;
    background: #0F293DAD;
    transition: all 0.3s ease-in-out;
    line-height: normal;
}

.pagination-wrap .page-numbers.current,
.pagination-wrap a:hover {
    background: #000000;
    color: var(--white);
}

.archive.tag .blog-list .row {
    row-gap: 0px;
}

.media-section .carousel-row,
.media-section .owl-item-inner,
.media-section .owl-item,
.media-section .owl-stage-outer,
.media-section .owl-stage,
.media-section .owl-stage img {
    height: 100%;
}

.speaker-wrappers .social-icons a img {
    width: 24px !important;
}

.column-table {
    margin: 0px 12px;
}

.banner-videobox {
    position: relative;
    overflow: hidden;
}

.banner-videobox iframe {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120vw !important;
    min-height: 100%;
    min-width: 177.78vh;
    transform: translate(-50%, -50%);
}

/* Travel & Lodging / Hero Section Adjustments */
.component-headers.header-top,
.travel-lodging-hero {
    overflow: hidden !important;
}

.component-headers.header-top .container,
.travel-lodging-hero .container {
    max-width: 100% !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
    width: 100% !important;
}

.component-headers.header-top .block-main-header.layout-1,
.travel-lodging-hero .block-main-header.layout-1 {
    margin-right: 0 !important;
    margin-left: 0 !important;
    width: 100% !important;
    align-items: stretch !important;
}

/* Image column covering entire right side */
.header-top .block-main-header.layout-1>.col-lg-6:first-child,
.travel-lodging-hero .block-main-header.layout-1>.col-lg-6:first-child {
    padding-right: 0 !important;
    padding-left: 0 !important;
    display: flex;
}

.header-top .block-main-header.layout-1 .left-side-hero,
.travel-lodging-hero .block-main-header.layout-1 .left-side-hero,
.component-headers.header-top .left-side-hero,
.travel-lodging-hero .left-side-hero {
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    margin-bottom: 0 !important;
}

/* Content column centering and padding */
.component-headers.header-top .block-main-header.layout-1>.col-lg-6:last-child,
.travel-lodging-hero .block-main-header.layout-1>.col-lg-6:last-child {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 40px;
    padding-right: 40px;
}

.component-headers.header-top .heroes-layout-1-left {
    text-align: center !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.component-headers.header-top .heroes-layout-1-left .h-tagline,
.component-headers.header-top .heroes-layout-1-left h1,
.component-headers.header-top .heroes-layout-1-left .h-xxl,
.component-headers.header-top .heroes-layout-1-left .description,
.component-headers.header-top .heroes-layout-1-left .fine-print {
    text-align: center !important;
    margin-left: auto;
    margin-right: auto;
}

.component-headers.header-top .heroes-layout-1-left .buttons-alignment,
.component-headers.header-top .buttons-alignment {
    display: flex !important;
    justify-content: center !important;
    margin-top: 25px;
    margin-bottom: 20px;
}

.component-headers.header-top .heroes-layout-1-left .buttons-alignment .btn-primary {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
}

/* Vector background graphic lower position */
.header-top .block-main-header:before {
    bottom: -9% !important;
}

/* Height and padding adjustments */
@media (min-width: 992px) {

    body .container:has(.layout-1) .travel-lodging-hero .heroes-layout-1-left,
    .travel-lodging-hero .layout-1 .heroes-layout-1-left,
    .component-headers.header-top .layout-1 .heroes-layout-1-left {
        padding-top: 150px !important;
        padding-bottom: 150px !important;
    }
}

@media (max-width: 991px) {

    .header-top .block-main-header.layout-1 .left-side-hero,
    .travel-lodging-hero .block-main-header.layout-1 .left-side-hero {
        min-height: 350px !important;
    }

    body .container:has(.layout-1) .travel-lodging-hero .heroes-layout-1-left,
    .travel-lodging-hero .layout-1 .heroes-layout-1-left,
    .component-headers.header-top .layout-1 .heroes-layout-1-left {
        padding-top: 110px !important;
        padding-bottom: 50px !important;
    }
}

@media (max-width: 767px) {

    body .container:has(.layout-1) .travel-lodging-hero .heroes-layout-1-left,
    .travel-lodging-hero .layout-1 .heroes-layout-1-left,
    .component-headers.header-top .layout-1 .heroes-layout-1-left {
        padding-top: 80px !important;
        padding-bottom: 40px !important;
    }

    .component-headers.header-top .block-main-header.layout-1>.col-lg-6:last-child,
    .travel-lodging-hero .block-main-header.layout-1>.col-lg-6:last-child {
        padding-left: 20px;
        padding-right: 20px;
    }
}

/* Common Section Padding */
.travel-lodging-section {
    padding-top: 80px !important;
    padding-bottom: 80px !important;
}

@media (max-width: 767px) {
    .travel-lodging-section {
        padding-top: 40px !important;
        padding-bottom: 40px !important;
    }
}

/* Resort Info (Grid) */
.resort-info,
.vip-perks {
    background-color: #ffffff;
    color: #1b2c53;
}

.resort-info {
    background-image: none !important;
}

.resort-info:after,
.resort-info .container:before {
    display: none !important;
}

/* 50% width columns (half) for resort info grid items */
.resort-info .icon-content-group-lists>[class*="col-"] {
    flex: 0 0 50% !important;
    max-width: 50% !important;
    width: 50% !important;
}

@media (max-width: 767px) {
    .resort-info .icon-content-group-lists>[class*="col-"] {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
    }
}

.resort-info .grid-content h2,
.resort-info .grid-content p,
.resort-info .grid-item-content,
.vip-perks .grid-content h2,
.vip-perks .grid-content p {
    color: #1b2c53 !important;
}

/* Transit Cards */
.transit-cards {
    background-color: #e5ebff !important;
}

.transit-cards .lift-card {
    background-color: rgb(255, 255, 255) !important;
    color: rgb(27, 44, 83) !important;
}

.transit-cards h2,
.transit-cards h3,
.transit-cards p {
    color: rgb(27, 44, 83) !important;
}

/* Banner Description Alignment */
.setting-banner .banner-content p {
    text-align: center;
}

/* ==========================================================================
   Hero & Lodging Intro Section (Eudemonia Grid Style)
   ========================================================================== */

.travel-lodging-hero-wrapper {
    background: url('https://wonderlandconference.com/wp-content/uploads/2026/05/Passes-background.png') no-repeat bottom center, #ffffff;
    background-size: 100% 70%, auto;
    padding: 6rem 2rem;
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    overflow-x: hidden;
}

.hero-top-grid {
    display: grid !important;
    grid-template-columns: 0.5fr 1fr;
    /* Left smaller, right bigger */
    gap: 4rem;
    align-items: center;
    max-width: 1600px;
    /* Increased width */
    margin: 0 auto 4rem auto;
}

/* Fix Gutenberg native column margins overlapping with our CSS grid */
.hero-top-grid>.wp-block-column,
.hero-bottom-grid>.wp-block-column {
    margin: 0 !important;
    width: 100% !important;
    flex-basis: auto !important;
}

/* Image Wrapper Fallback */
.hero-top-grid .wp-block-image {
    margin: 0;
    background-color: #f0f0f0;
    /* Empty state box */
    border-radius: 24px;
    height: 750px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.hero-top-grid .wp-block-image img {
    width: 100%;
    height: 750px;
    object-fit: cover;
}

.hero-bottom-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    max-width: 1600px;
    /* Increased width */
    margin: 0 auto;
}

/* Image Wrapper Fallback */
.hero-bottom-grid .wp-block-image {
    margin: 0 0 1rem 0;
    background-color: #f0f0f0;
    /* Empty state box */
    border-radius: 24px;
    aspect-ratio: 16 / 9;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.hero-bottom-grid .wp-block-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Adjust H3 and P text colors in bottom grid */
.hero-bottom-grid h3 {
    font-size: 1.5rem !important;
    margin-top: 1rem;
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: #ffffff !important;
}

.hero-bottom-grid p {
    color: #ffffff !important;
}

/* Responsive Headings using Clamp to prevent them from being too large on mobile */
.travel-lodging-hero-wrapper h1 {
    font-size: clamp(2.5rem, 6vw, 4.5rem) !important;
    line-height: 1.1;
    color: #1a1a1a !important;
}

/* Hero Description Text Color */
.travel-lodging-hero-wrapper .wp-block-paragraph {
    color: #1a1a1a !important;
}

/* Hide Mobile Hero Image on Desktop */
.travel-hero-mobile-img {
    display: none !important;
}

@media (max-width: 767px) {
    .travel-hero-mobile-img {
        display: flex !important;
    }
}

/* "3-Way Input" Hack for Headings: Making text Italic (em) in Gutenberg turns it into the Script font */
.travel-lodging-hero-wrapper h1 em,
.travel-lodging-hero-wrapper h2 em,
.travel-lodging-hero-wrapper h3 em,
.script-font {
    font-family: 'Covered By Your Grace', cursive !important;
    font-style: normal !important;
    color: #3b5bdb;
    /* Optional: Sets it to the blue color from your screenshot */
}

/* Button Spacing and Font Weight */
.travel-lodging-hero-wrapper .wp-block-buttons {
    margin-top: 2.5rem;
}

/* Match the Site's Orange Button */
.travel-lodging-hero-wrapper .wp-block-button__link {
    background-color: #d3420f !important;
    color: #ffffff !important;
    border-radius: 4px !important;
    padding: 14px 40px !important;
    font-weight: 500 !important;
    /* Updated to 500 */
    text-align: center;
    display: inline-block;
    transition: background-color 0.3s ease;
}

.travel-lodging-hero-wrapper .wp-block-button__link:hover {
    background-color: #b0360c !important;
}

/* Image Wrapper Fallback */
.hero-bottom-grid .wp-block-image {
    margin: 0 0 1rem 0;
    /* Override default block margins */
    width: 100%;
    aspect-ratio: 16/9;
    /* Force consistent aspect ratio */
    overflow: hidden;
    border-radius: 24px;
}

.hero-bottom-grid .wp-block-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 24px;
}

/* =========================================================================
   NEW SECTION: Travel Content Split Block (Why Stay On Property)
========================================================================== */
.travel-content-split-wrapper {
    max-width: 1600px;
    margin: 0 auto;
    padding: 6rem 2rem;
    background-color: #ffffff;
}

.travel-content-split-wrapper .sub-heading {
    text-transform: uppercase;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 0;
    color: #1a1a1a;
}

.travel-content-split-wrapper h2 {
    font-size: clamp(2.5rem, 6vw, 4.5rem) !important;
    line-height: 1.1;
    color: #1a1a1a !important;
    margin-top: 0;
}

.travel-content-split-wrapper .description-text {
    color: #1a1a1a !important;
}

/* Match the Site's Orange Button */
.travel-content-split-wrapper .wp-block-button__link {
    background-color: #d3420f !important;
    color: #ffffff !important;
    border-radius: 4px !important;
    padding: 14px 40px !important;
    font-weight: 500 !important;
    text-align: center;
    display: inline-block;
    transition: background-color 0.3s ease;
}

.travel-content-split-wrapper .wp-block-button__link:hover {
    background-color: #b0360c !important;
}

.travel-content-split-wrapper h1 em,
.travel-content-split-wrapper h2 em,
.travel-content-split-wrapper h3 em {
    font-family: 'Covered By Your Grace', cursive !important;
    font-style: normal !important;
    color: #3b5bdb;
}

/* =========================================================================
   NEW SECTION: Travel Image Collage Block (The Setting)
========================================================================== */
.travel-image-collage-wrapper {
    max-width: 1600px;
    margin: 0 auto;
    padding: 6rem 2rem 1rem;
    background-color: #ffffff;
}

.travel-image-collage-wrapper .collage-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

.image-collage-wrapper {
    position: relative;
    width: 100%;
    /* Create some padding around the container so overlaps don't overflow the section bounds */
    padding: 2rem 2rem 2rem 0;
}

.collage-base-img {
    position: relative;
    margin: 0;
    z-index: 1;
    width: 75%;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    aspect-ratio: 3/4;
}

.collage-base-img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.collage-overlap-top {
    position: absolute;
    top: -5%;
    right: 5%;
    z-index: 2;
    width: 45%;
    margin: 0;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
    border: 6px solid #ffffff;
}

.collage-overlap-top img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
}

.collage-overlap-bottom {
    position: absolute;
    bottom: -10%;
    right: 5%;
    z-index: 3;
    width: 55%;
    margin: 0;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
    border: 6px solid #ffffff;
    aspect-ratio: 4/5;
}

.collage-overlap-bottom img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.collage-right-col .sub-heading {
    text-transform: uppercase;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 0;
    color: #1a1a1a;
}

.collage-right-col h2 {
    font-size: clamp(2.5rem, 6vw, 4.5rem) !important;
    line-height: 1.1;
    color: #1a1a1a !important;
    margin-top: 0;
}

.collage-right-col .description-text {
    color: #1a1a1a !important;
    font-size: 1.1rem;
    line-height: 1.6;
}

.collage-right-col h2 .script-font {
    font-family: 'Covered By Your Grace', cursive !important;
    color: #3b5bdb;
}

/* Tablet Responsiveness */
@media (max-width: 1023px) {

    .travel-lodging-hero-wrapper,
    .travel-content-split-wrapper,
    .travel-image-collage-wrapper {
        padding: 3rem 1.5rem;
    }

    .hero-top-grid {
        gap: 2rem;
    }

    .hero-bottom-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Mobile Responsiveness */
@media (max-width: 767px) {
    .travel-image-collage-wrapper .collage-grid {
        display: flex;
        flex-direction: column-reverse;
        gap: 2rem;
    }

    .image-collage-wrapper {
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
    }

    /* Unstack the overlapping images on tablet/mobile for a clean vertical stack */
    .collage-base-img,
    .collage-overlap-top,
    .collage-overlap-bottom {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;
        width: 100% !important;
        display: block !important;
        border: none !important;
        box-shadow: none !important;
        aspect-ratio: 16/9 !important;
        /* Force all images to have the same landscape height like Image 2 */
    }

    .collage-base-img img,
    .collage-overlap-top img,
    .collage-overlap-bottom img {
        height: 100% !important;
    }

    .hero-top-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
        margin-bottom: 60px;
    }

    /* Hide desktop image on mobile */
    .travel-hero-desktop-img {
        display: none !important;
    }

    /* Center Button */
    .travel-lodging-hero-wrapper .wp-block-buttons,
    .travel-content-split-wrapper .wp-block-buttons {
        justify-content: center;
    }

    .hero-bottom-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    /* Global mobile image radius override */
    .hero-bottom-grid .wp-block-image,
    .hero-bottom-grid .wp-block-image img,
    .travel-hero-mobile-img,
    .travel-hero-mobile-img img,
    .collage-base-img,
    .collage-base-img img,
    .collage-overlap-top,
    .collage-overlap-top img,
    .collage-overlap-bottom,
    .collage-overlap-bottom img,
    .travel-content-split-wrapper img {
        border-radius: 8px !important;
    }
}