/*
Theme Name: Carsten Child
Theme URI: https://carsten.qodeinteractive.com
Description: A child theme of Carsten
Author: Elated Themes
Author URI: https://qodeinteractive.com
Version: 1.0
Text Domain: carsten
Template: carsten
*/

/* Fix 1 — Nested sub-menus clipped by overflow:hidden
   .qodef-drop-down-second has overflow:hidden for its height animation.
   In the --default variant the JS never adds qodef-drop-down--animation-finished
   (which would restore overflow:visible), so the nested ul (left:100%) is always
   clipped. Set overflow:visible as soon as the dropdown is open. */
.qodef-header-navigation ul li.qodef-menu-item--narrow .qodef-drop-down-second.qodef-drop-down--start {
    overflow: visible;
}

/* Fix 2 — Nested sub-menu hover visibility */
.qodef-header-navigation ul li.qodef-menu-item--narrow .qodef-drop-down-second-inner ul li.menu-item-has-children:hover > ul {
    opacity: 1 !important;
    visibility: visible !important;
}

/* Fix 3 — Left spacing before first nav item
   Parent theme sets margin-left:0 on :first-child; restore 21px. */
.qodef-header-navigation > ul > li:first-child {
    margin-left: 21px;
}

/* Hide the right sidebar column on single room pages (mirrors the existing
   archive-page rule already in the parent theme) */
.single-room .qodef-grid.qodef-layout--template > .qodef-grid-inner > .qodef-grid-item.qodef-col--sidebar {
    display: none;
}
.single-room .qodef-grid.qodef-layout--template.qodef-grid-template--8-4 > .qodef-grid-inner {
    grid-template-columns: minmax(0, 1fr);
    --qode-columns: 1;
    gap: 0;
}

/* Fix room card images inside WPBakery containers */
.wpb_wrapper .qodef-e-media,
.vc_column-inner .qodef-e-media,
.qodef-e-media {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    overflow: visible !important;
}

.wpb_wrapper .qodef-e-media img,
.vc_column-inner .qodef-e-media img,
.qodef-e-media img {
    width: 100% !important;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Room slider: complete the height chain so image fills the panel.
   The plugin CSS already sets flex-direction:row on .qodef-e-inner
   and width:50% on media/content, plus height:100% on .qodef-e-media-image.
   Only the <a> and <img> height rules are missing. */
.qodef-room-slider.qodef-room-slider-layout--standard .qodef-e-media-image a {
    display: block;
    height: 100%;
}

.qodef-room-slider.qodef-room-slider-layout--standard .qodef-e-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Center single-image shortcode inside WPBakery columns
   .qodef-single-image is display:flex from the plugin CSS,
   so we need justify-content, not text-align. Scoped to the
   centered WPBakery column (vc_custom_1700000014). */
.vc_custom_1700000014 .qodef-single-image {
    justify-content: center;
}

/* Center vertical separator lines in WPBakery columns */
.vc_custom_1700000004 .qodef-separator,
.vc_custom_1700000022 .qodef-separator {
    text-align: center;
}

/* Center "view more" button in comfort priority section */
.vc_custom_1700000004 > .wpb_wrapper > .qodef-button {
    display: block;
    text-align: center;
}

/* Instagram feed gallery */
.crobidou-instagram-feed {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
}

.crobidou-ig-item {
    position: relative;
    display: block;
    overflow: hidden;
    line-height: 0;
}

.crobidou-ig-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    aspect-ratio: 1 / 1;
    transition: transform 0.4s ease;
}

.crobidou-ig-item:hover img {
    transform: scale(1.05);
}

.crobidou-ig-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.4);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.crobidou-ig-item:hover .crobidou-ig-overlay {
    opacity: 1;
}

@media (max-width: 767px) {
    .crobidou-instagram-feed {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Currency: position € after the price */
.qodef-e-price-info {
    display: inline-flex;
    flex-direction: row-reverse;
    gap: 4px;
}
.qodef-m-price-currency {
    order: 2;
    margin-left: 4px;
}
.qodef-m-price-value {
    order: 1;
}
.qodef-m-price-description {
    order: 3;
}

/* Reduce price font-size in room-gallery-list standard-extended layout.
   Plugin default (56px) is too large — the currency symbol overlaps the number. */
.qodef-room-gallery-list.qodef-item-layout--standard-extended
    .qodef-room-gallery-list-item
    .qodef-e-price {
    font-size: 36px;
}
@media only screen and (max-width: 1368px) {
    .qodef-room-gallery-list.qodef-item-layout--standard-extended
        .qodef-room-gallery-list-item
        .qodef-e-price {
        font-size: 32px;
    }
}
@media only screen and (max-width: 1200px) {
    .qodef-room-gallery-list.qodef-item-layout--standard-extended
        .qodef-room-gallery-list-item
        .qodef-e-price {
        font-size: 28px;
    }
}

/* City Hotel page — offer cards: center button below banner */
.page-template-default .vc_custom_1700100008 .qodef-button {
    display: block;
    text-align: center;
}

/* City Hotel page — hero overlay for text readability */
.vc_custom_1700100001::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    z-index: 0;
}
.vc_custom_1700100001 > .vc_column_container {
    position: relative;
    z-index: 1;
}

/* ───────────────────────────────────────────────────────────
   Vertical tabs (simple layout) — hover, active & content fx
   ─────────────────────────────────────────────────────────── */

/* Remove the right border/line on the tabs navigation */
.qodef-tabs.qodef-layout--simple.qodef-orientation--vertical .qodef-tabs-navigation {
    border-right: none !important;
}

/* Base state (already declared by user — extend with transition) */
.qodef-tabs.qodef-layout--simple.qodef-orientation--vertical .qodef-tabs-navigation li a {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
    border-left: 3px solid transparent;
    padding-left: 20px;
}

/* Hover */
.qodef-tabs.qodef-layout--simple.qodef-orientation--vertical .qodef-tabs-navigation li a:hover {
    background-color: #f5f5f5 !important;
    color: #800000 !important;
    border-left-color: #800000;
}

/* Active / selected tab */
.qodef-tabs.qodef-layout--simple.qodef-orientation--vertical .qodef-tabs-navigation li.ui-state-active a {
    background-color: #f9f3f3 !important;
    color: #800000 !important;
    border-left: 3px solid #800000;
    font-weight: 600;
}

/* Tab content slide-up + scale on switch (triggered by JS class toggle) */
.qodef-tabs.qodef-layout--simple .qodef-tabs-content.qodef-tab-animating {
    animation: qodefTabSlideUpScale 0.5s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}

@keyframes qodefTabSlideUpScale {
    from {
        opacity: 0;
        transform: translateY(25px) scale(0.97);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* ───────────────────────────────────────────────────────────
   Horizontal tabs (simple layout) — hover, active & content fx
   ─────────────────────────────────────────────────────────── */

/* Center the tab links */
.qodef-tabs.qodef-layout--simple.qodef-orientation--horizontal .qodef-tabs-navigation {
    justify-content: center;
}

/* Base state */
.qodef-tabs.qodef-layout--simple.qodef-orientation--horizontal .qodef-tabs-navigation li a {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
    border-bottom: 3px solid transparent;
    padding-bottom: 10px;
}

/* Hover */
.qodef-tabs.qodef-layout--simple.qodef-orientation--horizontal .qodef-tabs-navigation li a:hover {
    background-color: #f5f5f5 !important;
    color: #800000 !important;
    border-bottom-color: #800000;
}

/* Active / selected tab */
.qodef-tabs.qodef-layout--simple.qodef-orientation--horizontal .qodef-tabs-navigation li.ui-state-active a {
    background-color: #f9f3f3 !important;
    color: #800000 !important;
    border-bottom: 3px solid #800000;
    font-weight: 600;
}

/* ───────────────────────────────────────────────────────────
   "Notre Histoire" — Timeline layout
   ─────────────────────────────────────────────────────────── */

/* Wrapper that holds the central vertical line */
.crobidou-timeline-wrap {
    position: relative;
}
/* Ensure overflow visible so the line and dots are not clipped */
.crobidou-timeline-wrap,
.crobidou-timeline-wrap .vc_column-inner,
.crobidou-timeline-wrap .vc_column_container,
.crobidou-timeline-wrap .wpb_wrapper {
    overflow: visible !important;
}
/* Vertical line — placed on the inner column (not the full-width row) so
   it stays aligned with the content regardless of WPBakery stretch. */
.crobidou-timeline-wrap > .vc_column_container > .vc_column-inner {
    position: relative;
}
.crobidou-timeline-wrap > .vc_column_container > .vc_column-inner::before {
    content: "" !important;
    display: block !important;
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 2px;
    background: #c4a882;
    transform: translateX(-50%);
    z-index: 1;
}

/* Each timeline row */
.crobidou-timeline-row {
    position: relative;
}

/* Year badge — centred on the line */
.crobidou-tl-year {
    display: inline-block;
    background: #800000;
    color: #fff;
    font-family: 'Forum', serif;
    font-size: 18px;
    font-weight: 400;
    letter-spacing: 0.05em;
    padding: 8px 22px;
    border-radius: 30px;
    margin-bottom: 18px;
}
/* Remove wpautop <p> margin so right-side badges align with the dot */
.crobidou-timeline-row .wpb_text_column .wpb_wrapper > p:first-child {
    margin-top: 0;
}

/* Override inline color on timeline texts so they inherit the global color */
.page-id-13043 p[style*="color"],
.crobidou-tl-text p[style*="color"] {
    color: inherit !important;
}

/* Text column styling */
.crobidou-tl-text {
    font-family: 'Jost', sans-serif;
    font-size: 16px;
    line-height: 28px;
}
.crobidou-tl-text h3 {
    font-family: 'Forum', serif;
    font-size: 28px;
    color: #800000;
    margin-bottom: 12px;
    text-transform: none;
}

/* Dot on the timeline line for each row */
.crobidou-timeline-row::before {
    content: "" !important;
    display: block !important;
    position: absolute;
    left: 50%;
    top: 40px;
    width: 14px;
    height: 14px;
    background: #800000;
    border: 3px solid #fff;
    border-radius: 50%;
    transform: translateX(-50%);
    z-index: 2;
    box-shadow: 0 0 0 3px #c4a882;
}

/* Image styling inside timeline */
.crobidou-timeline-row .qodef-single-image img {
    border-radius: 6px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
}

/* Fade-in on scroll */
.crobidou-timeline-row .vc_column_container {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}
.crobidou-timeline-row .vc_column_container.crobidou-tl-visible {
    opacity: 1;
    transform: translateY(0);
}
/* Stagger the second column */
.crobidou-timeline-row .vc_column_container:nth-child(2) {
    transition-delay: 0.15s;
}

/* ── Responsive: stack on mobile ── */
@media only screen and (max-width: 768px) {
    /* Timeline line */
    .crobidou-timeline-wrap > .vc_column_container > .vc_column-inner::before {
        left: 18px;
    }
    /* Dot — sits on the line, vertically aligned with first content */
    .crobidou-timeline-row::before {
        left: 18px;
        top: 12px;
    }
    /* Disable fade-in animation */
    .crobidou-timeline-row .vc_column_container {
        opacity: 1;
        transform: none;
    }
    /* Push content just past the dot (dot right edge ≈ 31px) */
    .crobidou-timeline-row {
        padding-left: 36px !important;
        padding-bottom: 40px !important;
    }
    /* Reset desktop paddings on column inners for mobile */
    .crobidou-timeline-row .vc_column-inner {
        padding-left: 0 !important;
        padding-right: 0 !important;
        padding-top: 0 !important;
    }
    /* Restore spacing between stacked columns (image → badge/text) */
    .crobidou-timeline-row .vc_column_container:last-child .vc_column-inner {
        padding-top: 20px !important;
    }
    /* Force left-align — match inline styles with or without spaces */
    .crobidou-timeline-row [style*="text-align"],
    .crobidou-timeline-row .crobidou-tl-text,
    .crobidou-timeline-row .crobidou-tl-text h3 {
        text-align: left !important;
    }
    /* Smaller heading on mobile */
    .crobidou-tl-text h3 {
        font-size: 22px;
    }
}