/*
Theme Name: A23 Hotel (Hello-Elementor child)
Theme URI: https://a23hotel.com
Description: Child theme of Hello-Elementor for A23 Hotel branding overrides.
Author: A23 Hotel
Author URI: https://a23hotel.com
Template: hello-elementor
Version: 0.7.0
Text Domain: hello-elementor-a23
*/

/* A23 brand overrides — kept minimal; most styling lives in Elementor Site Settings. */

:root {
    --a23-color-bg: #ffffff;
    --a23-color-fg: #111111;
    --a23-color-accent: #000000;
}

/* Hero overlay caption animation */
.a23-hero-caption {
    opacity: 0;
    transform: translateY(20px);
    animation: a23-hero-fade-in 1200ms ease-out 200ms forwards;
}

@keyframes a23-hero-fade-in {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* RTL: Hebrew default body should use a Hebrew-friendly stack if Elementor doesn't already cover it */
html[dir="rtl"] body {
    font-feature-settings: "ss01", "kern";
}

/* -----------------------------------------------------------------------
   Header clearance (v0.6 — single CSS rule, applies to both languages)

   The header template (post 71 / 463) renders as a sticky/fixed bar at
   the top of the viewport. With no top offset on the page's first
   section, the hero slides under the header and visible content is
   obscured. Originally HE pages had `margin_mobile.top: 83` inline in
   _elementor_data and EN pages had nothing — so HE had a gap and EN
   didn't. Inconsistent.

   v0.5 cleared the inline 83 from HE pages so the data was uniform —
   but that left BOTH languages with no offset, and content sat under
   the header.

   v0.6 puts the offset back as a single CSS rule that applies to every
   page in both languages. Selector targets the first direct-child
   top-section under the Elementor wrapper (page content does NOT have
   the .elementor-section-wrap intermediary that the header has, so we
   match without it).
   ----------------------------------------------------------------------- */
.site-main .elementor > .elementor-section.elementor-top-section:first-child,
.site-main .elementor > .e-con:first-child {
    margin-top: 83px;
}

/* -----------------------------------------------------------------------
   Header logo swap on scroll (v0.7)

   The header section (posts 71/463) has Elementor sticky:top enabled.
   Once the user scrolls past sticky_effects_offset (8px on HE, 0 on EN),
   Elementor adds .elementor-sticky--effects to the section element.

   Two image widgets live in the logo column (id: 4304b60):
     - #a23-header-logo--full     — full A23 logo (798×725, black-logo-a23.jpg)
     - #a23-header-logo--monogram — "A" monogram only (a23-monogram-a.svg)

   At rest: full logo visible, monogram hidden.
   On scroll: full logo hidden, monogram visible.

   We target both the Elementor _element_id CSS id AND the data-id
   attribute to be resilient to either markup pattern Elementor emits.
   ----------------------------------------------------------------------- */

/* Default state — full logo visible, monogram hidden */
#a23-header-logo--full,
[data-id="a23-header-logo--full"] {
    display: block;
}

#a23-header-logo--monogram,
[data-id="a23-header-logo--monogram"] {
    display: none;
}

/* Scrolled state — swap */
.elementor-sticky--effects #a23-header-logo--full,
.elementor-sticky--effects [data-id="a23-header-logo--full"] {
    display: none;
}

.elementor-sticky--effects #a23-header-logo--monogram,
.elementor-sticky--effects [data-id="a23-header-logo--monogram"] {
    display: block;
}