/**
 * Archihub Black Header Style
 * Layout: Logo | Menu (left) | Empty Center | Search Bar | User Menu (right)
 * Based on Workreap header style 3 layout with black background theme
 */

/* ===================================
   BASE HEADER STYLES
   =================================== */
.wr-header.wr-header-style-archihub-black {
    background: #000000;
    border: none;
}

.wr-header-style-archihub-black .wr-themenav_wrapper {
    background: #000000;
}

/* ===================================
   NAVIGATION WRAPPER (FLEXBOX LAYOUT)
   =================================== */
.wr-header-style-archihub-black .wr-themenavwrap {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: flex-start;
    padding: 15px 0;
    gap: 30px;
}

/* Logo stays on left */
.wr-header-style-archihub-black .wr-logo {
    flex: 0 0 auto;
    max-width: 150px;
    margin-right: 0;
}

.wr-header-style-archihub-black .wr-logo img,
.wr-header-style-archihub-black .wr-logo svg {
    max-width: 100%;
    display: block;
}

/* Menu on left (pushed to the left, not centered) */
.wr-header-style-archihub-black .wr-themenavwrap .wr-themenav {
    flex: 0 1 auto;
    margin: 0 auto 0 0;
}

/* User menu on far right */
.wr-header-style-archihub-black .wr-themenavwrap .wr-user-menu-wrapper {
    margin-left: auto;
}

/* ===================================
   MENU STRUCTURE
   =================================== */
.wr-header-style-archihub-black .wr-themenav ul.menu {
    margin: 0;
    padding: 0;
    display: flex;
    list-style: none;
    gap: 0;
}

.wr-header-style-archihub-black .wr-themenav ul.menu li {
    margin: 0;
    position: relative;
    line-height: inherit;
    list-style-type: none;
}

/* ===================================
   MENU LINKS STYLING
   =================================== */
.wr-header-style-archihub-black .wr-themenav ul.menu > li > a {
    color: #ffffff;
    font-size: 15px;
    padding: 25px 15px;
    font-weight: 500;
    line-height: 25px;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 5px;
    transition: all 0.3s ease-in-out;
}

.wr-header-style-archihub-black .wr-themenav ul.menu > li > a:hover {
    color: #80fefe;
}

/* Prevent white background on parent when submenu is hovered */
.wr-header-style-archihub-black .wr-themenav ul.menu > li.menu-item-has-children:hover > a,
.wr-header-style-archihub-black .wr-themenav ul.menu > li.page_item_has_children:hover > a {
    background-color: transparent !important;
    color: #80fefe;
}

/* ===================================
   DROPDOWN ARROWS
   =================================== */
.wr-header-style-archihub-black .wr-themenav ul.menu .wr-megamenu-holder > a:after,
.wr-header-style-archihub-black .wr-themenav ul.menu .page_item_has_children > a:after,
.wr-header-style-archihub-black .wr-themenav ul.menu .menu-item-has-children > a:after {
    right: auto;
    width: auto;
    font-size: 15px;
    content: "\e92e";
    font-weight: 600;
    position: relative;
    color: #ffffff;
    font-family: 'workreap-icons';
}

.wr-header-style-archihub-black .wr-themenav ul.menu .page_item_has_children .page_item_has_children > a:after,
.wr-header-style-archihub-black .wr-themenav ul.menu .menu-item-has-children .menu-item-has-children > a:after {
    content: "\e930";
}

/* ===================================
   SUBMENU STYLES
   =================================== */
.wr-header-style-archihub-black .wr-themenav .page_item_has_children,
.wr-header-style-archihub-black .wr-themenav .menu-item-has-children {
    position: relative;
}

@media (min-width: 1200px) {
    .wr-header-style-archihub-black .wr-themenav .page_item_has_children .children,
    .wr-header-style-archihub-black .wr-themenav .menu-item-has-children .sub-menu {
        left: 0;
        top: 80px;
        margin: 0;
        opacity: 0;
        padding: 5px;
        width: 220px;
        z-index: 1051;
        border-radius: 10px;
        position: absolute;
        background-color: #1a1a1a;
        visibility: hidden;
        transition: all 0.3s ease-in-out;
        box-shadow: 0px 2px 4px rgb(0 0 0 / 4%), 0px 0px 16px rgb(0 0 0 / 8%);
    }
    
    .wr-header-style-archihub-black .wr-themenav .page_item_has_children:hover > .children,
    .wr-header-style-archihub-black .wr-themenav .menu-item-has-children:hover > .sub-menu {
        top: 100%;
        opacity: 1;
        visibility: visible;
    }
}

.wr-header-style-archihub-black .wr-themenav ul.menu .children li,
.wr-header-style-archihub-black .wr-themenav ul.menu .sub-menu li {
    margin: 0;
    position: relative;
}

.wr-header-style-archihub-black .wr-themenav ul.menu .children li > a,
.wr-header-style-archihub-black .wr-themenav ul.menu .sub-menu li > a {
    border-radius: 10px;
    color: #ffffff;
    padding: 10px 14px;
    font-size: 14px;
    transition: all 0.3s ease-in-out;
}

.wr-header-style-archihub-black .wr-themenav ul.menu .children li > a:hover,
.wr-header-style-archihub-black .wr-themenav ul.menu .sub-menu li > a:hover {
    background-color: #80fefe !important;
    color: #000000;
}

/* Override Workreap's default submenu hover that adds white/gray background */
.wr-header-style-archihub-black .wr-themenav ul.menu .children > li:hover > a,
.wr-header-style-archihub-black .wr-themenav ul.menu .sub-menu > li:hover > a {
    background-color: #80fefe !important;
    color: #000000 !important;
}

.wr-header-style-archihub-black .wr-themenav ul.menu .children .children,
.wr-header-style-archihub-black .wr-themenav ul.menu .sub-menu .sub-menu {
    left: 102%;
}

.wr-header-style-archihub-black .wr-themenav ul.menu .sub-menu .sub-menu.wr-edge {
    left: auto;
    right: 102%;
}

.wr-header-style-archihub-black .wr-themenav ul.menu .children .page_item_has_children:hover > .children,
.wr-header-style-archihub-black .wr-themenav ul.menu .sub-menu .menu-item-has-children:hover > .sub-menu {
    top: -5px;
}

/* ===================================
   CURRENT MENU ITEM INDICATOR
   =================================== */
.wr-header-style-archihub-black .wr-themenav ul.menu > li.current-menu-item::before,
.wr-header-style-archihub-black .wr-themenav ul.menu > li.current-menu-ancestor::before {
    bottom: 15px;
    left: 50%;
    content: "";
    height: 2px;
    width: 30px;
    opacity: 1;
    display: block;
    position: absolute;
    background: #80fefe;
    transform: translateX(-50%);
}

/* ===================================
   HEADER ACTIONS (SEARCH BAR)
   =================================== */
.wr-header-style-archihub-black .wr-header-actions-wrapper {
    display: flex !important;
    align-items: center;
    gap: 38px;
    margin-left: auto;
    visibility: visible !important;
    opacity: 1 !important;
}

.wr-header-style-archihub-black .wr-header-search-wrapper {
    flex: 0 1 auto;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.wr-header-style-archihub-black .wr-header-search-wrapper form {
    margin: 0;
    display: flex;
    align-items: center;
}

/* Copy exact styling from Workreap main.css */
.wr-header-style-archihub-black .wr-header-search-wrapper .wt-formbanner,
.wr-header-style-archihub-black .wr-header-search-wrapper .wt-formbanner label {
    margin-bottom: 0;
}

.wr-header-style-archihub-black .wr-header-search-wrapper .wt-formbanner label {
    position: relative;
}

.wr-header-style-archihub-black .wr-header-search-wrapper .wt-formbanner label::after {
    top: 50%;
    left: 14px;
    width: 8px;
    display: flex;
    line-height: 0;
    font-weight: 900;
    color: #ffffff;
    position: absolute;
    align-items: center;
    justify-content: center;
    transform: translateY(-50%);
    content: url('data:image/svg+xml,<svg width="10" height="14" viewBox="0 0 10 14" fill="none" xmlns="http://www.w3.org/2000/svg"><path opacity="0.5" d="M2.5 3C1.9375 3 1.46875 2.71875 1.1875 2.25C0.90625 1.8125 0.90625 1.21875 1.1875 0.75C1.46875 0.3125 1.9375 0 2.5 0C3.03125 0 3.5 0.3125 3.78125 0.75C4.0625 1.21875 4.0625 1.8125 3.78125 2.25C3.5 2.71875 3.03125 3 2.5 3ZM2.5 8C1.9375 8 1.46875 7.71875 1.1875 7.25C0.90625 6.8125 0.90625 6.21875 1.1875 5.75C1.46875 5.3125 1.9375 5 2.5 5C3.03125 5 3.5 5.3125 3.78125 5.75C4.0625 6.21875 4.0625 6.8125 3.78125 7.25C3.5 7.71875 3.03125 8 2.5 8ZM4 11.5C4 12.0625 3.6875 12.5312 3.25 12.8125C2.78125 13.0938 2.1875 13.0938 1.75 12.8125C1.28125 12.5312 1 12.0625 1 11.5C1 10.9688 1.28125 10.5 1.75 10.2188C2.1875 9.9375 2.78125 9.9375 3.25 10.2188C3.6875 10.5 4 10.9688 4 11.5ZM7.5 3C6.9375 3 6.46875 2.71875 6.1875 2.25C5.90625 1.8125 5.90625 1.21875 6.1875 0.75C6.46875 0.3125 6.9375 0 7.5 0C8.03125 0 8.5 0.3125 8.78125 0.75C9.0625 1.21875 9.0625 1.8125 8.78125 2.25C8.5 2.71875 8.03125 3 7.5 3ZM9 6.5C9 7.0625 8.6875 7.53125 8.25 7.8125C7.78125 8.09375 7.1875 8.09375 6.75 7.8125C6.28125 7.53125 6 7.0625 6 6.5C6 5.96875 6.28125 5.5 6.75 5.21875C7.1875 4.9375 7.78125 4.9375 8.25 5.21875C8.6875 5.5 9 5.96875 9 6.5ZM7.5 13C6.9375 13 6.46875 12.7188 6.1875 12.25C5.90625 11.8125 5.90625 11.2188 6.1875 10.75C6.46875 10.3125 6.9375 10 7.5 10C8.03125 10 8.5 10.3125 8.78125 10.75C9.0625 11.2188 9.0625 11.8125 8.78125 12.25C8.5 12.7188 8.03125 13 7.5 13Z" fill="white"/></svg>');
}

.wr-header-style-archihub-black .wr-header-search-wrapper .wt-searchbtn {
    display: none;
}

.wr-header-style-archihub-black .wr-header-search-wrapper .wt-formbanner fieldset .form-group {
    box-shadow: none;
}

.wr-header-style-archihub-black .wr-header-search-wrapper .wt-formbanner fieldset .form-group .form-control {
    width: 360px;
    height: 48px;
    box-shadow: none;
    background: rgba(255, 255, 255, 0.1);
    padding: 10px 140px 10px 32px;
    font: 400 15px/18px var(--bodyfont);
    color: #ffffff;
    border: 1px solid #80fefe;
}

.wr-header-style-archihub-black .wr-header-search-wrapper .wt-formbanner fieldset .form-group .form-control::placeholder {
    color: rgba(255, 255, 255, 0.6);
}

.wr-header-style-archihub-black .wr-header-search-wrapper .wt-formoptions {
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
}

.wr-header-style-archihub-black .wr-header-search-wrapper .wt-dropdown {
    width: 100px;
    border-left: 0;
}

.wr-header-style-archihub-black .wr-header-search-wrapper .wt-dropdown > span {
    gap: 8px;
    width: auto;
    padding: 7px 10px;
    border-radius: 6px;
    display: inline-flex;
    background-color: rgba(18, 205, 212, 0.2);
    color: #80fefe;
}

.wr-header-style-archihub-black .wr-header-search-wrapper .wt-dropdown > span > em {
    padding: 0;
    height: 18px;
    width: auto;
    display: flex;
    color: #80fefe;
    align-items: center;
    font: 400 15px/25px var(--bodyfont);
}

.wr-header-style-archihub-black .wr-header-search-wrapper .wt-dropdown > span > i {
    display: flex;
    font-size: 15px;
    color: #80fefe;
    align-items: center;
}

.wr-header-style-archihub-black .wr-header-search-wrapper .wt-radioholder {
    top: 40px;
    left: auto;
    right: -8px;
    width: 180px;
    padding: 8px;
    overflow: unset;
    border-radius: 10px;
    background: #1a1a1a;
    z-index: 1051;
    position: absolute;
    /* CRITICAL: Do NOT force display - let JavaScript control visibility */
}

.wr-header-style-archihub-black .wr-header-search-wrapper .wt-radioholder::after {
    top: -5px;
    z-index: 1;
    right: 12px;
    width: 21px;
    content: "";
    height: 9.5px;
    position: absolute;
    border-radius: 10px;
    background-color: #1a1a1a;
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

.wr-header-style-archihub-black .wr-header-search-wrapper .wt-radio input[type=radio] + label {
    color: #ffffff;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    border-radius: 10px;
    padding: 10px 8px 10px 35px;
    transition: all .3s ease-in-out;
    cursor: pointer;
    position: relative;
    display: block;
}

.wr-header-style-archihub-black .wr-header-search-wrapper .wt-radio + .wt-radio {
    margin-top: 5px;
}

.wr-header-style-archihub-black .wr-header-search-wrapper .wr-project_search_page label::before,
.wr-header-style-archihub-black .wr-header-search-wrapper .wr-freelancers_search_page label::before,
.wr-header-style-archihub-black .wr-header-search-wrapper .wr-service_search_page label::before {
    left: 8px;
    top: 50%;
    width: 18px;
    height: 18px;
    display: flex;
    font-size: 18px;
    color: #ffffff;
    position: absolute;
    justify-content: center;
    transform: translateY(-50%);
    content: "\ea08";
    font-family: 'workreap-icons' !important;
}

.wr-header-style-archihub-black .wr-header-search-wrapper .wr-project_search_page label::before {
    content: "\e938";
}

.wr-header-style-archihub-black .wr-header-search-wrapper .wr-service_search_page label::before {
    content: "\e927";
}

.wr-header-style-archihub-black .wr-header-search-wrapper .wt-radio input[type=radio] + label::after {
    display: none;
}

.wr-header-style-archihub-black .wr-header-search-wrapper .wt-radioholder label:hover {
    background: #80fefe;
    color: #000000;
}

/* Selected/checked radio option */
.wr-header-style-archihub-black .wr-header-search-wrapper .wt-radio input[type=radio]:checked + label {
    background: #80fefe;
    color: #000000;
}

/* Ensure icon color changes on selected state */
.wr-header-style-archihub-black .wr-header-search-wrapper .wt-radio input[type=radio]:checked + label::before {
    color: #000000;
}

/* ===================================
   USER MENU WRAPPER (Avatar/Login/Register)
   =================================== */
.wr-header-style-archihub-black .wr-header-actions-wrapper .wr-user-menu-wrapper {
    margin-left: auto;
    display: flex;
    align-items: center;
}

/* Sign In/Register buttons styling */
.wr-header-style-archihub-black .wr-navbarbtn {
    display: flex;
    gap: 15px;
    align-items: center;
}

.wr-header-style-archihub-black .wr-navbarbtn .wr-btn {
    color: #ffffff;
    padding: 10px 20px;
    border: 1px solid #80fefe;
    background: transparent;
    border-radius: 5px;
    transition: all 0.3s ease-in-out;
    text-decoration: none;
    display: inline-block;
}

.wr-header-style-archihub-black .wr-navbarbtn .wr-btn:hover {
    background: #80fefe;
    color: #000000;
}

/* Avatar menu styling when logged in */
.wr-header-style-archihub-black .wr-main-notiwrap {
    display: flex;
    align-items: center;
    gap: 15px;
}
}

.wr-header-style-archihub-black .wr-notidropdowns {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.wr-header-style-archihub-black .wr-notidropdowns {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 15px;
}

.wr-header-style-archihub-black .wr-notidropdowns li {
    margin: 0;
    padding: 0;
}

.wr-header-style-archihub-black .wr-notidropdowns > a,
.wr-header-style-archihub-black .wr-notidropdowns .wr-headerchatbtn a {
    color: #ffffff;
    transition: all 0.3s ease-in-out;
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 14px;
    text-decoration: none;
}

.wr-header-style-archihub-black .wr-notidropdowns > a:hover,
.wr-header-style-archihub-black .wr-notidropdowns .wr-headerchatbtn a:hover {
    color: #80fefe;
}

.wr-header-style-archihub-black .wr-notidropdowns .wr-noti-count,
.wr-header-style-archihub-black .wr-remaining-notification {
    background: #80fefe;
    color: #000000;
    border-radius: 50%;
    min-width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
}

/* Avatar dropdown */
.wr-header-style-archihub-black .wr-navbarbtn.sub-menu-holder {
    position: relative;
    margin-left: 0;
}

.wr-header-style-archihub-black .wr-navbarbtn.sub-menu-holder > a {
    color: #ffffff;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 50%;
    transition: all 0.3s ease-in-out;
    text-decoration: none;
}

.wr-header-style-archihub-black .wr-navbarbtn.sub-menu-holder > a:hover {
    background: rgba(18, 205, 212, 0.2);
    color: #80fefe;
}

.wr-header-style-archihub-black .wr-navbarbtn.sub-menu-holder > a img {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    object-fit: cover;
}

.wr-header-style-archihub-black .wr-navbarbtn.sub-menu-holder .sub-menu {
    left: 0;
    top: 100%;
    margin: 10px 0 0 0;
    padding: 0;
    width: 200px;
    z-index: 1051;
    border-radius: 10px;
    position: absolute;
    background-color: #1a1a1a;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease-in-out;
    box-shadow: 0px 2px 4px rgb(0 0 0 / 4%), 0px 0px 16px rgb(0 0 0 / 8%);
    list-style: none;
}

.wr-header-style-archihub-black .wr-navbarbtn.sub-menu-holder:hover .sub-menu {
    top: 100%;
    opacity: 1;
    visibility: visible;
}

.wr-header-style-archihub-black .wr-navbarbtn.sub-menu-holder .sub-menu li {
    margin: 0;
    padding: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.wr-header-style-archihub-black .wr-navbarbtn.sub-menu-holder .sub-menu li:last-child {
    border-bottom: none;
}

.wr-header-style-archihub-black .wr-navbarbtn.sub-menu-holder .sub-menu li a {
    display: block;
    color: #ffffff;
    padding: 12px 15px;
    text-decoration: none;
    font-size: 14px;
    transition: all 0.3s ease-in-out;
}

.wr-header-style-archihub-black .wr-navbarbtn.sub-menu-holder .sub-menu li a:hover {
    background-color: #80fefe;
    color: #000000;
}

/* ===================================
   BUTTONS (LOGIN/REGISTER/ACTION)
   =================================== */
.wr-header-style-archihub-black .wr-navbarbtn {
    gap: 0 15px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.wr-header-style-archihub-black .wr-navbarbtn .wr-btn-solid-lg {
    height: auto;
    padding: 11px 21px;
    border-radius: 10px;
    color: #000000;
    background: #80fefe;
    border: 1px solid #80fefe;
    font: 500 16px/24px var(--headingfont);
    transition: all 0.3s ease-in-out;
}

.wr-header-style-archihub-black .wr-navbarbtn .wr-btn-solid-lg:hover {
    background: transparent;
    color: #80fefe;
    border-color: #80fefe;
}

.wr-header-style-archihub-black .wr-navbarbtn .wr-btn-solid-lg i {
    color: #000000;
    margin-right: -2px;
    transition: all 0.3s ease-in-out;
}

.wr-header-style-archihub-black .wr-navbarbtn .wr-btn-solid-lg:hover i {
    color: #80fefe;
}

.wr-header-style-archihub-black .wr-navbarbtn .wr-btn {
    padding: 0;
    color: #ffffff;
    font: 500 16px/24px var(--headingfont);
    text-decoration: none;
}

.wr-header-style-archihub-black .wr-navbarbtn .wr-login {
    height: 40px;
    border-radius: 10px;
    background-color: transparent;
    border: 1px solid #80fefe;
    color: #80fefe;
    transition: all 300ms ease-in-out;
    padding: 8px 16px;
}

.wr-header-style-archihub-black .wr-navbarbtn .wr-login:hover {
    background-color: #80fefe;
    color: #000000;
}

.wr-header-style-archihub-black .wr-navbarbtn .wr-register {
    height: 40px;
    border-radius: 10px;
    background-color: #80fefe;
    border: 1px solid #80fefe;
    color: #000000;
    transition: all 300ms ease-in-out;
    padding: 8px 16px;
}

.wr-header-style-archihub-black .wr-navbarbtn .wr-register:hover {
    background-color: transparent;
    color: #80fefe;
    border-color: #80fefe;
}

/* ===================================
   TRANSPARENT VARIANT
   =================================== */
.wr-header-style-archihub-black.wr-header-transparent {
    width: 100%;
    background-color: transparent;
    position: absolute;
    top: 0;
}

.wr-header-style-archihub-black.wr-header-transparent .wr-themenav_wrapper {
    background: transparent;
}

.wr-header-style-archihub-black.wr-header-transparent .container-fluid {
    padding: 0 clamp(16px, 4vw, 32px);
}

.wr-header-style-archihub-black.wr-header-transparent .wr-themenav ul.menu > li.current-menu-item::before,
.wr-header-style-archihub-black.wr-header-transparent .wr-themenav ul.menu > li.current-menu-ancestor::before {
    content: none;
}

/* ===================================
   WHITE TEXT VARIANT (for dark backgrounds)
   =================================== */
.wr-header-style-archihub-black.wr-header-menu-white .wr-themenav ul.menu > li > a {
    color: #ffffff;
}

.wr-header-style-archihub-black.wr-header-menu-white .wr-themenav ul.menu > li > a:hover {
    color: #80fefe;
}

.wr-header-style-archihub-black.wr-header-menu-white .wr-themenav ul.menu .wr-megamenu-holder > a:after,
.wr-header-style-archihub-black.wr-header-menu-white .wr-themenav ul.menu .page_item_has_children > a:after,
.wr-header-style-archihub-black.wr-header-menu-white .wr-themenav ul.menu .menu-item-has-children > a:after {
    color: #ffffff;
}

.wr-header-style-archihub-black.wr-header-menu-white .wr-navbarbtn .wr-btn {
    color: #ffffff;
}

.wr-header-style-archihub-black.wr-header-menu-white .wr-navbarbtn .wr-register {
    color: #000000;
}

.wr-header-style-archihub-black.wr-header-menu-white .wr-navbarbtn .wr-register:hover {
    color: #ffffff;
}

.wr-header-style-archihub-black.wr-header-menu-white .wr-navbarbtn .wr-login:hover {
    color: #000000;
}

.wr-header-style-archihub-black.wr-header-menu-white .wr-notidropdowns > a,
.wr-header-style-archihub-black.wr-header-menu-white .wr-notidropdowns .wr-headerchatbtn a {
    color: #ffffff;
}

/* ===================================
   TOPBAR
   =================================== */
.wr-header-style-archihub-black .wr-header-topbar {
    gap: 8px;
    display: flex;
    padding: 12px;
    align-items: center;
    justify-content: center;
    background: #1E1E1E;
}

.wr-header-style-archihub-black .wr-header-topbar-text {
    margin: 0;
    text-align: center;
    display: inline-block;
    color: rgba(255, 255, 255, 1);
    font: 400 13px/16px var(--bodyfont);
}

.wr-header-style-archihub-black .wr-header-topbar-text > .wr-header-topbar-btn {
    color: #fff;
    margin-left: 4px;
    animation-duration: 200ms;
    text-decoration: underline;
    transition: all .2s ease-in-out;
}

.wr-header-style-archihub-black .wr-header-topbar-text > .wr-header-topbar-btn:hover {
    color: #80fefe;
}

/* ===================================
   CONTAINER STYLES
   =================================== */
.wr-header-style-archihub-black .container-fluid,
.wr-header-style-archihub-black .container {
    background: #000000;
}

.wr-header-style-archihub-black .wr-themenav_wrapper > .container,
.wr-header-style-archihub-black .wr-themenav_wrapper > .container-fluid {
    padding-left: clamp(16px, 4vw, 32px);
    padding-right: clamp(16px, 4vw, 32px);
}

/* ===================================
   MOBILE RESPONSIVE
   =================================== */

/* Tablet breakpoint (max-width: 1199px) */
@media (max-width: 1199px) {
    /* Nav wrapper - relative positioning for absolute dropdown */
    .wr-header-style-archihub-black .wr-themenavwrap {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: space-between;
        padding: 12px 0;
        position: relative;
        margin: 0;
    }

    /* Ensure header has no bottom padding/margin that creates gap */
    .wr-header-style-archihub-black .wr-themenav_wrapper {
        padding-bottom: 0;
        margin-bottom: 0;
    }

    /* Logo wrapper - left side */
    .wr-header-style-archihub-black .wr-themenavwrap > .wr-logo-wrapper,
    .wr-header-style-archihub-black .wr-themenavwrap > strong.wr-logo-wrapper {
        flex: 0 0 auto;
    }

    .wr-header-style-archihub-black .wr-logo {
        flex: 0 0 auto;
        max-width: 140px;
    }

    /* Burger menu button - right side, same row as logo */
    .wr-header-style-archihub-black .navbar-toggler {
        flex: 0 0 auto;
        margin-left: auto;
        color: #ffffff;
        padding: 8px 12px;
        font-size: 24px;
        border: none;
        background: transparent;
        z-index: 10;
    }

    .wr-header-style-archihub-black .navbar-toggler:focus {
        box-shadow: none;
        outline: none;
    }

    .wr-header-style-archihub-black .navbar-toggler .wr-icon-menu {
        color: #ffffff;
    }

    /* =====================================================
       COLLAPSIBLE MENU CONTAINER (#navbarNav)
       Uses absolute positioning to appear as dropdown below header
       Contains: navigation menu + wr-header-actions-wrapper
       ===================================================== */
    .wr-header-style-archihub-black .wr-themenav,
    .wr-header-style-archihub-black #navbarNav {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        width: 100%;
        margin-top: 0;
        padding-top: 0;
        background: #000000;
        border-radius: 0 0 10px 10px;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
        z-index: 1000;
    }

    /* Remove any gap/margin from inner containers */
    .wr-header-style-archihub-black #navbarNav > .menu-header-menu-container,
    .wr-header-style-archihub-black .wr-themenav > .menu-header-menu-container {
        margin: 0;
        padding: 0;
    }

    /* Menu items with children need relative positioning for arrows */
    .wr-header-style-archihub-black .wr-themenav ul.menu > li,
    .wr-header-style-archihub-black #navbarNav ul.menu > li,
    .wr-header-style-archihub-black .wr-themenav ul.menu .menu-item-has-children,
    .wr-header-style-archihub-black .wr-themenav ul.menu .page_item_has_children,
    .wr-header-style-archihub-black #navbarNav ul.menu .menu-item-has-children,
    .wr-header-style-archihub-black #navbarNav ul.menu .page_item_has_children {
        position: relative;
    }

    /* Dropdown toggle arrow button - proper positioning */
    .wr-header-style-archihub-black .wr-dropdowarrow,
    .wr-header-style-archihub-black .at-dropdowarrow {
        top: 50%;
        right: 15px;
        transform: translateY(-50%);
        width: 26px;
        height: 26px;
        color: #ffffff;
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        border-radius: 5px;
        text-align: center;
        background: #80fefe;
        z-index: 10;
    }

    .wr-header-style-archihub-black .wr-dropdowarrow i,
    .wr-header-style-archihub-black .at-dropdowarrow i {
        display: block;
        line-height: 1;
        font-size: 14px;
        color: #000000;
    }

    /* Submenu arrow indicators (::after pseudo) - hide on mobile, use dropdown buttons instead */
    .wr-header-style-archihub-black .wr-themenav ul.menu .menu-item-has-children > a::after,
    .wr-header-style-archihub-black .wr-themenav ul.menu .page_item_has_children > a::after,
    .wr-header-style-archihub-black #navbarNav ul.menu .menu-item-has-children > a::after,
    .wr-header-style-archihub-black #navbarNav ul.menu .page_item_has_children > a::after {
        display: none;
    }

    /* Menu list styling inside collapse */
    .wr-header-style-archihub-black .wr-themenav ul.menu,
    .wr-header-style-archihub-black #navbarNav ul.menu {
        flex-direction: column;
        width: 100%;
        padding: 10px 0;
        margin: 0;
    }

    .wr-header-style-archihub-black .wr-themenav ul.menu > li,
    .wr-header-style-archihub-black #navbarNav ul.menu > li {
        margin-bottom: 0;
        width: 100%;
    }

    .wr-header-style-archihub-black .wr-themenav ul.menu > li > a,
    .wr-header-style-archihub-black #navbarNav ul.menu > li > a {
        padding: 12px 15px;
        padding-right: 50px; /* Space for dropdown arrow button */
        font-size: 14px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        display: block;
        color: #ffffff;
    }

    .wr-header-style-archihub-black .wr-themenav ul.menu > li > a:hover,
    .wr-header-style-archihub-black #navbarNav ul.menu > li > a:hover {
        background-color: rgba(18, 205, 212, 0.1);
    }

    /* Mobile submenu - dark background */
    .wr-header-style-archihub-black .wr-themenav .sub-menu,
    .wr-header-style-archihub-black .wr-themenav .children,
    .wr-header-style-archihub-black #navbarNav .sub-menu,
    .wr-header-style-archihub-black #navbarNav .children {
        background-color: #0a0a0a;
        padding: 5px 0;
        margin: 0;
        position: static !important;
        opacity: 1 !important;
        visibility: visible !important;
        width: 100%;
        box-shadow: none;
        border-radius: 0;
        display: block;
    }

    .wr-header-style-archihub-black .wr-themenav .sub-menu li a,
    .wr-header-style-archihub-black .wr-themenav .children li a,
    .wr-header-style-archihub-black #navbarNav .sub-menu li a,
    .wr-header-style-archihub-black #navbarNav .children li a {
        padding: 10px 30px;
        font-size: 13px;
        color: #ffffff;
        border: none;
    }

    .wr-header-style-archihub-black .wr-themenav .sub-menu li a:hover,
    .wr-header-style-archihub-black .wr-themenav .children li a:hover,
    .wr-header-style-archihub-black #navbarNav .sub-menu li a:hover,
    .wr-header-style-archihub-black #navbarNav .children li a:hover {
        background-color: #80fefe;
        color: #000000;
    }

    /* =====================================================
       HEADER ACTIONS WRAPPER (Sign In / Register)
       JS moves this inside #navbarNav on mobile.
       Hidden by default outside collapse, shown when inside.
       ===================================================== */

    /* Hide when outside collapse (before JS moves it, or as direct child of nav wrapper) */
    .wr-header-style-archihub-black .wr-themenavwrap > .wr-header-actions-wrapper,
    .wr-header-style-archihub-black nav > .wr-header-actions-wrapper {
        display: none !important;
    }

    /* Show and style when inside collapse container */
    .wr-header-style-archihub-black #navbarNav .wr-header-actions-wrapper,
    .wr-header-style-archihub-black .collapse .wr-header-actions-wrapper {
        display: flex !important;
        flex-direction: column;
        width: 100%;
        margin: 0;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        padding: 15px;
        background: #000000;
    }

    /* SEARCH BAR - Hidden on mobile portrait */
    .wr-header-style-archihub-black .wr-header-search-wrapper {
        display: none !important;
    }

    .wr-header-style-archihub-black .wr-header-actions-wrapper .wr-user-menu-wrapper {
        width: 100%;
        display: flex;
        flex-direction: column;
    }

    .wr-header-style-archihub-black .wr-main-notiwrap {
        flex-direction: column;
        width: 100%;
    }

    .wr-header-style-archihub-black .wr-notidropdowns {
        width: 100%;
        flex-direction: row;
    }

    /* Sign In / Register buttons - full width in collapsed menu */
    .wr-header-style-archihub-black .wr-header-actions-wrapper .wr-navbarbtn {
        width: 100%;
        display: flex;
        justify-content: flex-start;
        flex-wrap: wrap;
        gap: 10px;
    }

    .wr-header-style-archihub-black .wr-header-actions-wrapper .wr-navbarbtn a {
        flex: 0 1 calc(50% - 5px);
        text-align: center;
    }

    .wr-header-style-archihub-black .wr-navbarbtn.sub-menu-holder {
        width: 100%;
    }

    .wr-header-style-archihub-black .wr-navbarbtn.sub-menu-holder > a {
        width: 100%;
        justify-content: flex-start;
    }

    .wr-header-style-archihub-black .wr-navbarbtn.sub-menu-holder .sub-menu {
        position: static;
        background-color: #0a0a0a;
        opacity: 1;
        visibility: visible;
        width: 100%;
        margin-top: 5px;
    }
}

/* Show search bar on landscape orientation (tablet/large phone landscape) */
@media (max-width: 1199px) and (orientation: landscape) and (min-width: 568px) {
    .wr-header-style-archihub-black .wr-header-search-wrapper {
        display: block !important;
        width: 100%;
        padding: 10px 15px;
    }

    .wr-header-style-archihub-black .wr-header-search-wrapper form {
        width: 100%;
    }

    .wr-header-style-archihub-black .wr-header-search-wrapper .form-control {
        width: 100%;
    }
}

/* Mobile phone breakpoint (max-width: 767px) */
@media (max-width: 767px) {
    .wr-header-style-archihub-black .wr-themenavwrap {
        padding: 10px 0;
    }

    .wr-header-style-archihub-black .wr-logo {
        max-width: 120px;
    }

    .wr-header-style-archihub-black .navbar-toggler {
        padding: 6px 10px;
        font-size: 22px;
    }

    .wr-header-style-archihub-black .wr-themenav ul.menu > li > a {
        padding: 10px 15px;
        font-size: 13px;
    }

    .wr-header-style-archihub-black .wr-navbarbtn .wr-btn-solid-lg {
        padding: 9px 15px;
        font-size: 14px;
    }

    /* Full width buttons on small phones */
    .wr-header-style-archihub-black .wr-header-actions-wrapper .wr-navbarbtn a {
        flex: 0 1 100%;
    }
}

/* Extra small phones (max-width: 375px) */
@media (max-width: 375px) {
    .wr-header-style-archihub-black .wr-logo {
        max-width: 100px;
    }

    .wr-header-style-archihub-black .navbar-toggler {
        padding: 5px 8px;
        font-size: 20px;
    }
}

/* ===================================
   PROFILE DROPDOWN — EXPANDED WIDTH
   The avatar sub-menu auto-sizes to content by default, making it
   too narrow when menu items have moderate-length labels.
   Setting a min-width ensures comfortable reading and click targets.
   =================================== */
.wr-header-style-archihub-black .wr-navbarbtn.sub-menu-holder > .sub-menu,
.wr-navbarbtn.sub-menu-holder > .sub-menu {
    min-width: 200px;
}