/* Sticky header.
   The theme's header scrolls away with the page, so the menu is unreachable
   once you're down the page. On scroll we pin it to the top, keeping the
   theme's own rounded white pill look, and drop a spacer into the flow so the
   content underneath doesn't jump when the header leaves it. */

/* !important is needed: the header carries Bootstrap's .position-relative and
   .w-100 utilities, which are themselves !important and would win otherwise. */
.header-con.is-sticky {
    position: fixed !important;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    width: min(1533px, calc(100% - 56px)) !important;
    margin-top: 0;
    float: none !important;
    z-index: 999;
    box-shadow: 0 12px 34px rgba(7, 41, 92, .18);
    animation: haniel-header-down .45s ease both;
}

@keyframes haniel-header-down {
    from { opacity: 0; transform: translate(-50%, -100%); }
    to   { opacity: 1; transform: translate(-50%, 0); }
}

@media (max-width: 991px) {
    .header-con.is-sticky {
        top: 8px;
        width: calc(100% - 24px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .header-con.is-sticky { animation: none; }
}

/* The wrapper holding the header is lifted while the header is pinned. Without
   this, a wrapper that forms its own stacking context (the home page's does)
   traps the header's z-index and page content paints over the menu. */
.has-sticky-header {
    position: relative;
    z-index: 999 !important;
}

/* --- header spacing -------------------------------------------------------
   The theme sets the navbar brand to margin:0, which leaves the logo almost
   touching the first menu item (more noticeable now the logo is larger).
   !important is required because the header also carries .main-box, which
   responsive.css overrides with "padding: 1% !important" at some widths. */
.header-con {
    padding: 18px 22px 18px 30px !important;
}

/* The header pill is capped at 1533px by .wrapper1533, so it never grows on
   wide screens while the theme widens the nav gap to 56-63px. The content then
   bursts out of the fixed-width pill, pushing the CTA outside it. Keep the
   brand gap and nav gap constant at every desktop width instead. */
.header-con .navbar-light .navbar-brand {
    margin-right: 30px;
}

.header-con .navbar-expand-lg .navbar-nav {
    gap: 32px !important;
}

.header-con .navbar-brand img {
    max-height: 62px;
    width: auto;
}

@media (max-width: 1450px) {
    .header-con .navbar-light .navbar-brand { margin-right: 22px; }
    .header-con .navbar-expand-lg .navbar-nav { gap: 22px !important; }
    .header-con { padding: 16px 16px 16px 22px !important; }
}

@media (max-width: 1199px) {
    .header-con {
        padding: 12px 16px !important;
    }
    .header-con .navbar-light .navbar-brand {
        margin-right: 18px;
    }
    .header-con .navbar-brand img {
        max-height: 46px;
    }
}

/* --- footer copyright -----------------------------------------------------
   The theme sets this line to 12px/12px, which is too small to read
   comfortably. Also styles the design credit link. */
.footer-con .copyright-con p {
    font-size: 15px;
    line-height: 1.7;
}

.footer-con .copyright-con a {
    color: var(--primary--color, #fccf3a);
    font-weight: 600;
    text-decoration: none;
    transition: opacity .25s ease;
}

.footer-con .copyright-con a:hover,
.footer-con .copyright-con a:focus-visible {
    opacity: .85;
    text-decoration: underline;
}

.footer-con .copyright-con .credit-sep {
    opacity: .4;
    margin: 0 10px;
}

/* --- header at 992-1199px -------------------------------------------------
   Between the burger breakpoint (991px) and 1200px the full desktop header
   (logo + six menu items + 234px phone pill + 187px Enquire button) is wider
   than the header itself, so it pushed every page ~110-170px sideways. The
   phone number is also in the footer and on Contact, so it is dropped here
   and the Enquire button is allowed to size to its label. */
@media (min-width: 992px) and (max-width: 1199px) {
    /* !important: the li carries Bootstrap's .d-flex, which is itself
       display:flex !important and would otherwise win. */
    .header-con .header-contact ul li:first-child {
        display: none !important;
    }
    /* A little extra headroom at the narrow end of this range (~992px). */
    .header-con .navbar-expand-lg .navbar-nav {
        gap: 18px !important;
    }
    .header-con .header-contact .contact-btn {
        min-width: 0;
        padding: 0 20px;
    }
}

/* Narrow end of the range above: at ~992px the Enquire button still poked
   ~19px outside the header pill, so tighten the gaps a little further. */
@media (min-width: 992px) and (max-width: 1060px) {
    .header-con .navbar-expand-lg .navbar-nav {
        gap: 12px !important;
    }
    .header-con .navbar-light .navbar-brand {
        margin-right: 12px;
    }
    .header-con .header-contact .contact-btn {
        padding: 0 16px;
    }
}

/* --- no sideways scroll ----------------------------------------------------
   The theme's fadeInRight entrance animation starts elements 20px to the
   right, and nothing clips horizontal overflow, so pages briefly scrolled
   sideways (a visible wobble on phones) while content slid in. `clip` rather
   than `hidden`: it doesn't turn body into a scroll container, so window
   scroll events (used by the sticky header) keep working. */
body {
    overflow-x: clip;
}