/**
 * OX House — site-wide UI fixes (global).
 * Loaded on every front-end request via ox_house_enqueue_fixes() in functions.php.
 */

/* ---------------------------------------------------------------------------
 * Contact form: show CF7 validation tips ABOVE the input field (not below).
 * The tip span is a sibling after the input inside .wpcf7-form-control-wrap,
 * so column-reverse lifts it above the input.
 * ------------------------------------------------------------------------- */
.ar-contact-form-content-2 .wpcf7-form-control-wrap {
    display: flex;
    flex-direction: column-reverse;
}
.ar-contact-form-content-2 .wpcf7-not-valid-tip {
    display: block;
    margin: 0 0 6px 0;
}
.ar-contact-form-content-2 .ox-gdpr-field .wpcf7-form-control-wrap {
    display: block;
}

/* ---------------------------------------------------------------------------
 * Floating „Beratung anfordern“ button — bottom-left, mirrors the Go-to-top
 * button (.scrollup): same 55px lime circle, jumps to the contact form.
 * Markup is created by ox-fixes.js.
 * ------------------------------------------------------------------------- */
.ox-beratung-fab {
    position: fixed;
    bottom: 20px;
    left: 20px;
    width: 55px;
    height: 55px;
    border-radius: 50%;
    background: var(--e-global-color-primary, #C0E259);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
    text-decoration: none;
    transition: transform 0.25s ease, background 0.25s ease;
}
.ox-beratung-fab svg {
    width: 26px;
    height: 26px;
    fill: #ffffff;
}
.ox-beratung-fab:hover {
    transform: translateY(-2px);
}

/* ---------------------------------------------------------------------------
 * Fix 1: Object hero text blends into the background photo.
 * Add a soft shadow/scrim behind the kicker, title and lead so they stay
 * readable over bright images (QVILLAGE & similar object/portfolio pages).
 * ------------------------------------------------------------------------- */
.ox-object-kicker,
.ox-object-title,
.ox-object-lead,
.ox-object-lead p {
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.45), 0 1px 3px rgba(0, 0, 0, 0.35);
}

/* Object hero lead/description always white (was a low-contrast grey that
   blended into the background photo). Applies on every object page. */
.ox-object-lead,
.ox-object-lead p,
.ox-object-lead span {
    color: #ffffff !important;
}

/* ---------------------------------------------------------------------------
 * Fix 8: Remove the non-functional site search from the off-canvas / mobile
 * menu (the „Suchbegriff eingeben …“ field shown inside the slide-out menu).
 * ------------------------------------------------------------------------- */
.mobile-search-bar {
    display: none !important;
}

/* ---------------------------------------------------------------------------
 * Fix 9: „Lieferung und Installation“ is longer than the theme's 180px menu-item
 * cap, so it wraps to two lines. The second line was left-aligned, leaving a big
 * empty gap before „BLOG“. Center the wrapped item and tighten item spacing so
 * the gap on the right is removed and the menu reads evenly. (One line is not
 * possible — all six items don't fit the available nav width at this label length.)
 * ------------------------------------------------------------------------- */
.ar-header-section .main-navigation > ul > li {
    margin: 0 11px !important;
}
.ar-header-section .main-navigation > ul > li > a {
    text-align: center !important;
}
/* Pull the gap after "Lieferung und Installation" tighter (this item only).
   4948 = EN "Delivery and Installation", 4908 = RU "Доставка и установка". */
#menu-item-3385,
#menu-item-4948,
#menu-item-4908 {
    margin-right: -40px !important;
}

/* ---------------------------------------------------------------------------
 * Off-canvas menu: hide the leftover demo image gallery. It rendered no useful
 * content in the menu — only a stray thin white vertical line on the right.
 * ------------------------------------------------------------------------- */
.mobile_menu_img {
    display: none !important;
}

/* ---------------------------------------------------------------------------
 * Safeguard: when the off-canvas menu is open, always slide the panel fully in
 * and reveal the navigation at EVERY viewport width. Prevents the „empty
 * overlay, no menu“ state seen around ~1300px.
 * ------------------------------------------------------------------------- */
.mobile_menu_wrap.mobile_menu_on .mobile_menu_content {
    right: 0 !important;
}
.mobile_menu_wrap.mobile_menu_on .mobile-main-navigation {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
}
.mobile_menu_wrap.mobile_menu_on .mobile_menu_nav {
    width: 100% !important;
}

/* ---------------------------------------------------------------------------
 * Scroll-text marquee (archid-scroll-text): the oversized scrolling heading
 * was not clipped to its wrapper, so it stretched the document wider than the
 * viewport and produced a horizontal page scrollbar (which made the whole
 * layout — including the header/menu — shift sideways). Clip it to its track.
 * ------------------------------------------------------------------------- */
.ard-text-slide-9-wrap,
.ard-text-slide-9-area {
    overflow: hidden !important;
}

/* ---------------------------------------------------------------------------
 * Phone number must never wrap onto a second line (header „Anrufen“ button,
 * footer phone). The label and number can still stack on separate lines.
 * ------------------------------------------------------------------------- */
.cta-btn-grp a strong,
.ox-foot-tel {
    white-space: nowrap !important;
}

/* ---------------------------------------------------------------------------
 * Fix 4 (styling): footer address rendered as 3 lines + Google-Maps link.
 * The markup itself is built by ox-fixes.js (the theme escapes the field).
 * ------------------------------------------------------------------------- */
.ar-footer-bottom-copyright .ox-footer-address {
    display: inline-block;
    text-decoration: none;
    line-height: 1.5;
}
.ar-footer-bottom-copyright .ox-footer-address .ox-addr-name {
    display: block;
    color: #ffffff !important; /* beats Elementor's per-element location color */
}
.ar-footer-bottom-copyright .ox-footer-address .ox-addr-line {
    display: block;
    color: #868686 !important; /* beats Elementor's per-element location color */
    font-weight: 500 !important;
    font-style: normal !important;
    font-size: 14px !important;
}
.ar-footer-bottom-copyright .ox-footer-address:hover .ox-addr-name,
.ar-footer-bottom-copyright .ox-footer-address:hover .ox-addr-line {
    color: #C0E259 !important; /* green link colour on hover */
    text-decoration: none !important; /* no underline */
}

/* ---------------------------------------------------------------------------
 * Mobile: footer legal links (Datenschutzerklärung / Impressum / Sitemap)
 * stacked one under another and centered (instead of wrapping in a row).
 * ------------------------------------------------------------------------- */
@media (max-width: 991px) {
    .ar-footer-bottom-copyright > ul {
        width: 100%;
        text-align: center;
    }
    .ar-footer-bottom-copyright > ul li {
        display: block;
        margin: 6px 0;
    }
}

/* ---------------------------------------------------------------------------
 * Footer bottom bar: phone (left) | social icons (center) | Created-by (right).
 * Sits on the phone row, aligned under the address / Datenschutz / © row above.
 * ------------------------------------------------------------------------- */
.ox-foot-bottombar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}
@media (min-width: 992px) {
    /* Pull the whole bottom row up so it sits close to the copyright row
       (removes the big gap; keeps the three columns aligned). */
    .ox-foot-bottombar { margin-top: -34px; }
}
.ox-foot-social {
    display: flex;
    align-items: center;
    gap: 10px;
}
/* Social icons reuse the WhatsApp/Telegram circle look (the theme's .ox-app
   styling is scoped to .ox-foot-apps, so replicate it here). */
.ox-foot-social .ox-app {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease;
}
.ox-foot-social .ox-app svg {
    width: 15px;
    height: 15px;
}
/* All messenger + social icons share ONE colour (white) on the dark footer. */
.ox-foot-apps .ox-app svg,
.ox-foot-social .ox-app svg {
    fill: #ffffff !important;
}
/* Keep the phone block on the same level as the social icons / Created-by:
   the standalone -34px lift (Customizer) pushed it up inside the flex bar. */
.ox-foot-bottombar .ox-foot-call {
    margin-top: 0 !important;
}
/* All footer icon buttons (messengers + social) share ONE hover background
 * (Elementor global primary) and the Telegram lift animation. */
.ox-foot-apps .ox-app,
.ox-foot-social .ox-app {
    transition: transform 0.25s ease, background 0.25s ease !important;
}
.ox-foot-apps .ox-app:hover,
.ox-foot-social .ox-app:hover {
    background: var(--e-global-color-primary) !important;
    transform: translateY(-2px) !important;
}
.ox-foot-apps .ox-app:hover svg,
.ox-foot-social .ox-app:hover svg {
    fill: #000000 !important; /* icon turns black on the lime hover background */
}
.ox-foot-credit a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #ffffff;
    text-decoration: none;
    white-space: nowrap;
}
.ox-foot-credit img {
    height: 24px;
    width: auto;
    display: inline-block;
    vertical-align: middle;
}
@media (max-width: 991px) {
    /* Stack the bottom bar: social icons on top, „Created by Neo“ underneath. */
    .ox-foot-bottombar {
        flex-direction: column;
        justify-content: center;
        gap: 14px;
    }
}


/* ---------------------------------------------------------------------------
 * Modulhaus Preispolitik — pricing table adapted to the dark theme (lime accents).
 * ------------------------------------------------------------------------- */
.ox-preis-table{ overflow-x:auto; }
.ox-preis-table table{ width:100%; border-collapse:collapse; background:#0d0e0d; border-radius:14px; overflow:hidden; color:#fff; font-size:16px; }
.ox-preis-table thead th{ background:#16181a; padding:22px 24px; text-align:center; font-weight:700; vertical-align:top; border-bottom:1px solid rgba(255,255,255,.1); }
.ox-preis-table thead th.ox-preis-wf{ text-align:left; }
.ox-preis-table .ox-preis-tier{ display:block; font-size:18px; letter-spacing:1px; color:#fff; }
.ox-preis-table .ox-preis-sub{ display:block; font-size:13px; font-weight:400; color:#C0E259; margin-top:4px; }
.ox-preis-table tbody td{ padding:22px 24px; text-align:center; border-bottom:1px solid rgba(255,255,255,.06); font-weight:700; }
.ox-preis-table tbody td:first-child{ text-align:left; }
.ox-preis-table tbody tr:last-child td{ border-bottom:none; }
.ox-preis-table tbody tr:hover td{ background:rgba(192,226,89,.06); }
@media (max-width:767px){ .ox-preis-table thead th, .ox-preis-table tbody td{ padding:14px 12px; font-size:14px; } .ox-preis-table .ox-preis-tier{ font-size:15px; } }


/* ---------------------------------------------------------------------------
 * WPML language switcher (DE/EN/RU) in the off-canvas menu, after the nav.
 * Injected by sandbox/ox-mobile-lang-switcher.php.
 * ------------------------------------------------------------------------- */
.mobile_menu_content .ox-lang-switcher{ width:100%; flex:0 0 100%; display:flex; gap:16px; align-items:center; margin-top:26px; padding-top:20px; border-top:1px solid rgba(255,255,255,.12); }
.mobile_menu_content .ox-lang-switcher .ox-lang{ color:#fff; font-weight:600; font-size:18px; letter-spacing:1px; text-decoration:none; opacity:.55; transition:opacity .2s ease, color .2s ease; }
.mobile_menu_content .ox-lang-switcher .ox-lang:hover, .mobile_menu_content .ox-lang-switcher .ox-lang.active{ opacity:1; color:#C0E259; }

/* Header language switcher (DE/EN/RU) - vertical, between Anrufen and off-canvas btn */
.header-cta-ofcanvas .ox-hdr-lang{ display:flex; flex-direction:row; align-items:center; gap:12px; margin:0 22px; position:relative; }
.header-cta-ofcanvas .ox-hdr-lang + .ofcanvas_btn, .ar-header-section.header_style_two .ox-hdr-lang + .ofcanvas_btn{ margin-left:0 !important; }
.header-cta-ofcanvas .ox-hdr-lang .ox-hl-item{ display:block; position:static; color:#fff; font-size:14px; font-weight:600; letter-spacing:.5px; line-height:1.25 !important; height:auto; text-decoration:none; opacity:.5; transition:opacity .2s ease, color .2s ease; }
.header-cta-ofcanvas .ox-hdr-lang .ox-hl-item:hover, .header-cta-ofcanvas .ox-hdr-lang .ox-hl-item.active{ opacity:1; color:#C0E259; }
@media (max-width:991px){ .header-cta-ofcanvas .ox-hdr-lang{ margin:0 14px; gap:9px; } }

/* ---------------------------------------------------------------------------
 * Footer text marquee (archid-scroll-text / .ard-text-slide-9-wrap): the theme
 * animates translateX(0 -> -100%), so the whole track leaves the viewport and
 * the loop shows a cut word + emptiness. ox-fixes.js duplicates the items so
 * the first half equals the second half; -50% then loops seamlessly.
 * gap -> margin-right so the -50% shift is pixel-perfect.
 * ------------------------------------------------------------------------- */
.ard-text-slide-9-wrap{ gap:0 !important; width:max-content; }
.ard-text-slide-9-wrap .slide-text{ margin-right:30px; }
.ard-text-slide-9-wrap[data-ox-marquee]{ animation: ox-b9-marquee 40s linear infinite !important; }
@keyframes ox-b9-marquee { from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* Post pages (all languages): hide the Twitter share button (per client request). */
a.tw[href*="twitter.com"]{ display:none !important; }

/* Single post featured image: span the full article column width. */
.ar-blog-details-img img{ width:100%; height:auto; display:block; }

/* Single post prev/next circles: the theme's ::before hover overlay and ::after
 * arrow sit on top of the <a> and swallow clicks. Let clicks pass through. */
.ar-blog-next-prev-item .inner-img::before,
.ar-blog-next-prev-item .inner-img::after{ pointer-events:none; }