/* ==========================================================================
   SITE CHROME — header & footer built with UAE widgets
   Only the parts Elementor's own controls cannot express live here: the
   transparent-to-solid sticky transition, the hairline rhythm and the footer
   column proportions. Everything else stays editable in the Elementor panel.
   ========================================================================== */

/* --------------------------------------------------------------------------
   HEADER
   -------------------------------------------------------------------------- */
.is-site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;
    border-bottom: 1px solid transparent;
    transition: border-color var(--is-normal, 320ms) var(--is-ease, ease),
        padding var(--is-normal, 320ms) var(--is-ease, ease);
}

/* backdrop-filter creates a containing block for position:fixed children,
   which traps the flyout panel inside the header bar. The blur and solid
   background live on a ::before layer so the header itself stays transparent
   to fixed-positioned descendants. */
.is-site-header::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background-color: transparent;
    transition: background-color var(--is-normal, 320ms) var(--is-ease, ease),
        backdrop-filter var(--is-normal, 320ms) var(--is-ease, ease);
}

/* Elementor adds this class once its sticky effects offset is passed. */
.is-site-header.elementor-sticky--effects::before,
.is-site-header.is-stuck::before {
    background-color: rgba(17, 17, 17, 0.94);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.is-site-header.elementor-sticky--effects,
.is-site-header.is-stuck {
    border-bottom-color: rgba(200, 167, 106, 0.18);
}

/* Inside the Elementor editor the header must not float over the canvas. */
.elementor-editor-active .is-site-header,
body.elementor-editor-preview .is-site-header {
    position: relative;
}

/* The logo, nav and CTA are the three flex children of the bar. */
.is-site-header > .e-con-inner,
.is-site-header > .elementor-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    width: 100%;
    max-width: 1280px;
    margin-inline: auto;
}

.is-site-footer > .e-con-inner {
    width: 100%;
    max-width: 1280px;
    margin-inline: auto;
}

.is-site-header__logo {
    flex: 0 0 auto;
    width: auto !important;
}

/* The supplied brand asset is black on transparent, so it is inverted to read on
   the dark header. Replace the Site Logo in Customizer > Site Identity with a
   white version and delete this filter. */
.is-site-header__logo img,
.is-site-footer__brand .elementor-widget-site-logo img {
    display: block;
    width: auto;
    max-height: 42px;
    object-fit: contain;
    filter: brightness(0) invert(1);
}

.is-site-footer__brand .elementor-widget-site-logo img {
    max-height: 52px;
}

.is-site-header__nav {
    flex: 1 1 auto;
    min-width: 0;
    width: auto !important;
    display: flex;
    justify-content: center;
}

/* Long menu labels must never wrap the bar onto a second line. */
.is-site-header__nav .hfe-nav-menu,
.is-site-header__nav .hfe-nav-menu__layout-horizontal .hfe-nav-menu {
    flex-wrap: nowrap;
}

.is-site-header__nav .hfe-nav-menu__layout-horizontal .menu-item a.hfe-menu-item {
    white-space: nowrap;
}

.is-site-header__cta {
    flex: 0 0 auto;
    width: auto !important;
}

.is-site-header__cta .elementor-button {
    border-radius: 0;
}

/* UAE renders its own wrapper; keep it from stretching the flex row. */
.is-site-header__nav .hfe-nav-menu__layout-horizontal .hfe-nav-menu {
    display: flex;
    align-items: center;
}

.is-site-header__nav .hfe-nav-menu__toggle {
    color: #f5f2ec;
}

/* --------------------------------------------------------------------------
   FOOTER
   -------------------------------------------------------------------------- */
.is-site-footer {
    color: #cfcac2;
}

.is-site-footer__main > .e-con-inner,
.is-site-footer__main {
    align-items: flex-start;
}

/* Brand column is wider than the link columns, matching the design. Elementor
   gives nested containers `width: 100%`, so the basis is set explicitly here
   rather than fought with a width override. */
.is-site-footer__brand {
    flex: 0 1 250px;
    width: auto !important;
    max-width: 280px;
}

.is-site-footer__col {
    flex: 1 1 120px;
    width: auto !important;
    min-width: 110px;
}

/* UAE's Copyright widget colours itself from the Elementor global text colour,
   which is black on this kit. */
.is-site-footer__copyright .hfe-copyright-wrapper,
.is-site-footer__copyright .hfe-copyright-wrapper a {
    color: #cfcac2;
}

.is-site-footer__copyright .hfe-copyright-wrapper a:hover {
    color: #c8a76a;
}

.is-site-footer__about p {
    margin: 20px 0 0;
}

.is-site-footer__social {
    margin-top: 22px;
}

.is-site-footer__social .elementor-social-icon {
    border-radius: 0;
}

.is-site-footer__col-title {
    margin-bottom: 18px;
}

.is-site-footer__links .elementor-icon-list-item a,
.is-site-footer__links .elementor-icon-list-item {
    transition: color 180ms ease;
}

.is-site-footer__contact p {
    margin: 0 0 14px;
}

.is-site-footer__contact p:last-child {
    margin-bottom: 0;
}

.is-site-footer__contact a {
    color: inherit;
    transition: color 180ms ease;
}

.is-site-footer__contact a:hover,
.is-site-footer__legal a:hover {
    color: #c8a76a;
}

.is-site-footer__legal a {
    color: inherit;
    transition: color 180ms ease;
}

/* --------------------------------------------------------------------------
   RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
    .is-site-header__nav {
        flex: 0 0 auto;
        justify-content: flex-end;
    }

    /* The CTA duplicates the mobile menu's own action; hide it so the bar keeps
       breathing room next to the hamburger. */
    .is-site-header__cta {
        display: none;
    }

    .is-site-footer__brand {
        flex: 1 1 100%;
        max-width: 420px;
    }

    .is-site-footer__col {
        flex: 1 1 40%;
    }
}

@media (max-width: 600px) {
    .is-site-header__logo img {
        max-height: 34px;
    }

    .is-site-footer__col {
        flex: 1 1 100%;
    }

    .is-site-footer__bottom > .e-con-inner,
    .is-site-footer__bottom {
        justify-content: flex-start !important;
        text-align: left;
    }

    .is-site-footer__legal .elementor-widget-container,
    .is-site-footer__legal p {
        text-align: left !important;
    }
}