/* H+ Animated Navigation Styles */

.hplus-nav-container {
    position: relative;
    width: 100%;
    height: calc(100dvh - var(--wp-admin--admin-bar--height,0px)); /* Full viewport height minus admin bar */
    overflow: hidden;
    font-size: 16px !important; /* Base font size for EM calculations */
    background-color: #000; /* Black background */
}

/* Static widget container - reuses bar styles */
.hplus-static-container {
    position: relative;
    width: 100%;
    height: auto;
    font-size: 16px !important; /* Base font size - controlled by Elementor */
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2em 0;
}

.hplus-nav-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.6s ease-in-out;
}

.hplus-nav-background.active {
    opacity: 1;
}

.hplus-nav-background.default {
    opacity: 1;
}

.hplus-nav-background.default.fade-out {
    opacity: 0;
}

.hplus-bars-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 35.5em; /* Total width: H(16.25) + gap(3) + +(16.25) = 35.5em */
    height: 16.25em; /* Height of bars */
    z-index: 10;
    /*transition: width 2.34s cubic-bezier(0.4, 0, 0.2, 1), transform 2.34s cubic-bezier(0.4, 0, 0.2, 1), top 2.34s cubic-bezier(0.4, 0, 0.2, 1), left 2.34s cubic-bezier(0.4, 0, 0.2, 1);*/
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Animated state - resize wrapper to fit vertical bars */
.hplus-bars-container.animated {
    width: 24.1875em; /* 5 bars (5 * 2.6875em) + 4 gaps (4 * 2.6875em) = 24.1875em */
}

/* Static state - bars in vertical formation, no animation */
.hplus-bars-container.static {
    position: relative;
    width: 24.1875em; /* 5 bars + 4 gaps */
    height: 29.875em; /* Height of expanded bar: 478px */
    transform: none;
    top: auto;
    left: auto;
}

.hplus-bars-container.static .hplus-bar {
    top: 0;
    transform: rotate(0deg);
    height: 13.25em; /* 212px at 16px base */
    top: 8.3125em; /* Center shorter bars: (478-212)/2 = 133px = 8.3125em */
}

.hplus-bars-container.static .hplus-bar[data-index="0"] {
    left: 0;
}

.hplus-bars-container.static .hplus-bar[data-index="1"] {
    left: 5.375em;
}

.hplus-bars-container.static .hplus-bar[data-index="2"] {
    left: 10.75em;
}

.hplus-bars-container.static .hplus-bar[data-index="3"] {
    left: 16.125em;
}

.hplus-bars-container.static .hplus-bar[data-index="4"] {
    left: 21.5em;
}

.hplus-bars-container.static .hplus-bar.expanded {
    height: 29.875em; /* 478px at 16px base */
    top: 0; /* Expanded bar at top, others are offset down */
}

.hplus-bar {
    position: absolute;
    background-color: white;
    width: 2.6875em; /* 43px at 16px base */
    height: 16.25em; /* 260px at 16px base */
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    transform-origin: center center;
}

/* Initial H+ Formation - All bars are 43x260px (tall) */
/* H - Left vertical (Bar 1) */
.hplus-bar[data-index="0"] {
    top: 0;
    left: -0.16875em; /* Moved 0.3em more to the right */
    transform: rotate(0deg);
}

/* H - Horizontal (Bar 2 - rotated 90deg) - crossing the H */
.hplus-bar[data-index="1"] {
    top: 0; /* Start at top, rotation will center it */
    left: 6.675em; /* Moved 0.3em more to the right */
    transform: rotate(90deg);
}

/* H - Right vertical (Bar 3) */
.hplus-bar[data-index="2"] {
    top: 0;
    left: 13.47em; /* Moved 0.3em more to the right */
    transform: rotate(0deg);
}

/* + - Horizontal (Bar 4 - rotated 90deg) */
.hplus-bar[data-index="3"] {
    top: 0; /* Start at top, rotation will center it */
    left: 26em; /* Moved 0.3em more to the right */
    transform: rotate(90deg);
}

/* + - Vertical (Bar 5) */
.hplus-bar[data-index="4"] {
    top: 0;
    left: 26.3em; /* Moved 0.3em more to the right */
    transform: rotate(0deg);
}

/* Animated state - all vertical in a row */
.hplus-bars-container.animated .hplus-bar {
    transform: rotate(0deg);
}

.hplus-bars-container.animated .hplus-bar[data-index="0"] {
    top: 0;
    left: 0;
}

.hplus-bars-container.animated .hplus-bar[data-index="1"] {
    top: 0;
    left: 5.375em; /* 43px + 43px spacing */
}

.hplus-bars-container.animated .hplus-bar[data-index="2"] {
    top: 0;
    left: 10.75em; /* (43px + 43px) * 2 */
}

.hplus-bars-container.animated .hplus-bar[data-index="3"] {
    top: 0;
    left: 16.125em; /* (43px + 43px) * 3 */
}

.hplus-bars-container.animated .hplus-bar[data-index="4"] {
    top: 0;
    left: 21.5em; /* (43px + 43px) * 4 */
}

/* Hover state - expanded bar */
.hplus-bar.expanded {
    height: 29.875em; /* 478px at 16px base */
    top: -6.8125em; /* Offset to grow from center: -(478-260)/2 = -109px = -6.8125em */
    z-index: 10;
}

/* Keep animated bars at top: 0 when expanded */
.hplus-bars-container.animated .hplus-bar.expanded {
    top: -6.8125em; /* Same offset for centered growth */
}

.hplus-nav-menu {
    position: absolute;
    bottom: 3em;
    right: 3em;
    text-align: right;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
    z-index: 20;
}

.hplus-nav-menu.visible {
    opacity: 1;
}

.hplus-menu-item {
    font-size: 3em; /* 48px at 16px base */
    color: white !important;
    margin-bottom: 0.0417em; /* 2px at 48px = 2/48 */
    cursor: pointer;
    transition: opacity 0.3s ease;
    font-weight: 500;
    line-height: 1.1;
    text-decoration: none !important;
    display: block;
}

.hplus-menu-item:hover {
    color: white;
    text-decoration: none !important;
}

.hplus-menu-item.faded {
    opacity: 0.5;
}

.hplus-description {
    position: absolute;
    bottom: 39px;
    left: 20px;
    color: white;
    font-size: 1.125em; /* 18px at 16px base */
    width: 17.8125em; /* 285px at 16px base */
    text-align: left;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 20;
    line-height: 1.5;
}

.hplus-description.visible {
    opacity: 1;
}

.hplus-description-title {
    font-size: 2em; /* Larger title */
    font-weight: 600;
    margin-bottom: 0;
    display: block;
}

.hplus-description-text {
    display: block;
    min-height: 4.5em; /* Ensure space for 3 lines of text */
}
@media screen and (max-width: 1200px) {
    .hplus-description {
        width: 13em; /* 208px at 16px base */
    }

}
@media screen and (max-width: 1024px) {
    .hplus-nav-container {
        font-size: 13px !important;
    }
}
@media screen and (max-width: 599px) {
    .hplus-description-title {
        font-size: 24px;
    }
    .hplus-description {
        top: 60px;
        /*left: 3em;*/
        bottom: auto;
        font-size: 15px;
    }
    .hplus-nav-container,
    .hplus-static-container {
        font-size: 11px !important;
    }
}
@media screen and (max-width: 500px) {

    .hplus-nav-container,
    .hplus-static-container {
        font-size: 10px !important;
    }
}
@media screen and (max-width: 400px) {

    .hplus-nav-container,
    .hplus-static-container {
        font-size: 8px !important;
    }

}
.elementor-widget-hplus-static .hplus-bar {
    cursor: default;
}