/* =========================================================
   Allianz header — 2026 two-row layout
   Row 1 : About Us  |  centred logo  |  language + Contact Us
   Row 2 : the six product categories, each with its own dropdown

   ADDITIVE FILE. Nothing here targets an existing theme class
   except .rr-header-2__global / .nice-select / .current / .list /
   .option, which translate.js and nice-select.js require *by name*
   to drive the language switcher. Everything else is .az-hdr__*.

   SCOPING RULE — every nav/dropdown selector must start with .az-hdr
   (or .az-hdr__menu). meanmenu copies the innerHTML of #mobile-menu into
   .mean-nav inside .offcanvas__area, which is a *sibling* of <header>, so
   an .az-hdr-prefixed rule cannot reach that copy and the offcanvas keeps
   being styled purely by the theme's own .mean-container .mean-nav rules.
   A bare .az-hdr__sub {} rule does reach it, and because these panels are
   position:absolute + visibility:hidden + pointer-events:none, that made
   the mobile dropdowns dead: meanmenu opens them with an inline
   display:block, which those three properties silently override.
   mega-menu.css carries a comment about the same trap.

   Sizing is fluid: type and spacing are clamp()s that scale
   continuously from 992px to 1920px, so there are no jumps between
   breakpoints. Media queries are reserved for structural changes.
   ========================================================= */

.az-hdr {
    /* --- fixed palette --- */
    --az-hdr-ink: var(--rr-heading-primary, #192929);
    --az-hdr-blue: var(--rr-theme-primary, #0078bf);
    --az-hdr-green: var(--rr-theme-primary-3, #95c12b);
    --az-hdr-white: var(--rr-common-white, #ffffff);

    /* --- resting state: transparent, sitting over the hero ---
       Safe on every page: the home hero and the .heading-bg behind every
       breadcrumb are both --rr-heading-primary, so the bar is always over
       something dark and reads white. These flip in .az-hdr--stuck below. */
    --az-hdr-bg: transparent;
    --az-hdr-fg: var(--az-hdr-white);
    --az-hdr-accent: var(--az-hdr-green);
    --az-hdr-rule: rgba(255, 255, 255, 0.28);
    --az-hdr-hair: rgba(255, 255, 255, 0.28);
    --az-hdr-shadow: none;
    --az-hdr-burger-invert: 1;

    /* Side inset: 60px at 1200px rising to the theme header's own 90px
       at 1920px, collapsing to 15px on small screens. */
    --az-hdr-inset: clamp(15px, 4.167vw + 10px, 90px);

    /* 14px at 992px rising to the theme header's 22px at 1920px. */
    --az-hdr-row1-y: clamp(12px, 0.862vw + 5.45px, 22px);
    --az-hdr-nav-fs: clamp(12px, 0.735vw + 4.7px, 15px);
    --az-hdr-util-fs: clamp(13px, 0.245vw + 10.6px, 15px);
    --az-hdr-logo-w: clamp(150px, 6vw + 90px, 210px);

    /* The theme header is position:absolute (see .rr-header in main.css)
       and the whole site is built around that: every breadcrumb carries
       265px of top padding to clear it, and the home hero is 100svh tall.
       Keeping absolute here means not one existing page moves. */
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 9;
}

/* --- scrolled state ---
   header-2026.js adds .az-hdr--stuck past 90px. Same specificity as
   .az-hdr, so it wins on source order alone — keep it below. Going
   absolute -> fixed shifts nothing, because the header is out of flow
   either way, and the keyframe slides it in rather than snapping. */
.az-hdr--stuck {
    --az-hdr-bg: var(--az-hdr-white);
    --az-hdr-fg: var(--az-hdr-ink);
    --az-hdr-accent: var(--az-hdr-blue);
    --az-hdr-rule: var(--az-hdr-blue);
    --az-hdr-hair: rgba(1, 15, 28, 0.10);
    --az-hdr-shadow: 0 10px 30px rgba(1, 15, 28, 0.10);
    --az-hdr-burger-invert: 0;

    position: fixed;
    animation: az-hdr-drop 0.35s ease-in-out;
}

@keyframes az-hdr-drop {
    from {
        transform: translateY(-100%);
    }

    to {
        transform: translateY(0);
    }
}

/* Someone who asked for less motion gets the colour change without the slide. */
@media (prefers-reduced-motion: reduce) {
    .az-hdr--stuck {
        animation: none;
    }
}

.az-hdr__shell {
    background: var(--az-hdr-bg);
    box-shadow: var(--az-hdr-shadow);
    transition: background-color 0.35s ease-in-out, box-shadow 0.35s ease-in-out;
}

/* ---------------------------------------------------------------------
   Row 1 — utility bar
   --------------------------------------------------------------------- */

.az-hdr__bar {
    border-bottom: 1px solid var(--az-hdr-rule);
}

.az-hdr__bar-grid {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 16px;
    padding: var(--az-hdr-row1-y) var(--az-hdr-inset);
}

.az-hdr__side {
    display: flex;
    align-items: center;
    gap: clamp(10px, 1vw, 20px);
    min-width: 0;
}

.az-hdr__side--start {
    justify-content: flex-start;
}

.az-hdr__side--end {
    justify-content: flex-end;
}

/* --- centred brand --- */
.az-hdr__brand {
    display: flex;
    justify-content: center;
}

.az-hdr__brand img {
    display: block;
    width: var(--az-hdr-logo-w);
    max-width: 100%;
    height: auto;
}

/* Two logo files, swapped with display so only one is ever in the
   accessibility tree: logo-w.png is white for the transparent bar,
   logo.png is the blue mark for the white bar.

   These must keep the .az-hdr__brand ancestor. `.az-hdr__brand img` above
   is (0,1,1) and a bare `.az-hdr__logo--dark` is only (0,1,0), so its
   display:block won and BOTH logos rendered. Two classes = (0,2,0), which
   clears it; the stuck pair is (0,3,0) and clears that in turn. */
.az-hdr__brand .az-hdr__logo--dark {
    display: none;
}

.az-hdr--stuck .az-hdr__brand .az-hdr__logo--light {
    display: none;
}

.az-hdr--stuck .az-hdr__brand .az-hdr__logo--dark {
    display: block;
}

/* --- About Us (with its own dropdown) --- */
.az-hdr__util {
    display: flex;
    align-items: center;
    gap: 24px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.az-hdr__util-item {
    position: relative;
}

.az-hdr__util-item > a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 0;
    font-family: var(--rr-ff-heading2);
    font-size: var(--az-hdr-nav-fs);
    font-weight: 500;
    line-height: 1.25;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--az-hdr-fg);
    white-space: nowrap;
    transition: color 0.3s ease-in-out;
}

.az-hdr__util-item > a i {
    font-size: 0.85em;
    transition: transform 0.3s ease-in-out;
}

.az-hdr__util-item:hover > a,
.az-hdr__util-item:focus-within > a {
    color: var(--az-hdr-accent);
}

.az-hdr__util-item:hover > a i,
.az-hdr__util-item:focus-within > a i {
    transform: rotate(180deg);
}

/* --- language switcher ---
   The .rr-header-2__global > .nice-select > .current / .list / .option
   structure is required by name: nice-select.js delegates the open/close
   click on .nice-select, and translate.js reads
   '.rr-header-2__global .nice-select' to sync and to catch option clicks.
   The theme's own styling for it is scoped under .rr-header-4, which this
   header deliberately does not carry (that variant is tuned for a dark
   bar — it inverts the icons). So it is restyled here for a white bar. */
.az-hdr__lang {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    padding-left: clamp(12px, 1vw, 20px);
    /* border-left: 1px solid var(--az-hdr-hair); */
}

.az-hdr__lang > .icon {
    display: flex;
    line-height: 0;
}

.az-hdr__lang > .icon img {
    width: 16px;
    height: 16px;
    opacity: 0.75;
}

.az-hdr__lang-icon {
    font-size: 16px;
    line-height: 1;
    color: var(--az-hdr-fg);
    opacity: 0.7;
}

.az-hdr__lang .nice-select {
    float: none;
    width: auto;
    height: auto;
    min-height: 0;
    padding: 6px 20px 6px 0;
    margin: 0;
    line-height: 1.2;
    background-color: transparent;
    border: 0;
    border-radius: 0;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.az-hdr__lang .nice-select::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 4px;
    width: 7px;
    height: 7px;
    margin-top: -5px;
    display: block;
    pointer-events: none;
    border-bottom: 1.5px solid var(--az-hdr-fg);
    border-right: 1.5px solid var(--az-hdr-fg);
    transform: rotate(45deg);
    transform-origin: 66% 66%;
    opacity: 0.6;
    transition: transform 0.2s ease-in-out;
}

.az-hdr__lang .nice-select.open::after {
    transform: rotate(-135deg);
}

.az-hdr__lang .nice-select .current {
    font-family: var(--rr-ff-heading2);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.25;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--az-hdr-fg);
    letter-spacing: 0;
}

.az-hdr__lang .nice-select .list {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    left: auto;
    z-index: 99;
    /* Wide enough for the longest of Google's language names
       ("Chinese (Simplified)"), and capped so a ~130-item list scrolls
       inside the panel instead of running off the screen. */
    min-width: 220px;
    max-height: min(60vh, 420px);
    overflow-y: auto;
    overscroll-behavior: contain;
    margin: 0;
    padding: 8px 0;
    list-style: none;
    background-color: var(--az-hdr-white);
    border-radius: 10px;
    box-shadow: 0 20px 40px rgba(1, 15, 28, 0.14);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-6px);
    transition: all 0.25s ease-in-out;
}

.az-hdr__lang .nice-select.open .list {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

.az-hdr__lang .nice-select .option {
    min-height: 0;
    padding: 9px 18px;
    white-space: nowrap;
    font-family: var(--rr-ff-heading, "Poppins", sans-serif);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.2;
    color: var(--rr-text-body, #5b6b6b);
    background: transparent;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}

.az-hdr__lang .nice-select .option:hover,
.az-hdr__lang .nice-select .option.focus,
.az-hdr__lang .nice-select .option.selected.focus {
    background: var(--rr-color-white_smoke-2, #f4f4f5);
    color: var(--az-hdr-blue);
}

.az-hdr__lang .nice-select .option.selected {
    font-weight: 600;
    color: var(--az-hdr-ink);
}

/* --- Contact Us --- */
.az-hdr__contact {
    padding-left: clamp(12px, 1vw, 20px);
    border-left: 1px solid var(--az-hdr-hair);
    font-family: var(--rr-ff-heading2);
    font-size: var(--az-hdr-nav-fs);
    font-weight: 500;
    line-height: 1.25;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--az-hdr-fg);
    white-space: nowrap;
    transition: color 0.3s ease-in-out;
}

.az-hdr__contact:hover,
.az-hdr__contact:focus {
    color: var(--az-hdr-accent);
}

/* ---------------------------------------------------------------------
   Row 1 dropdown (About Us) opens from the left edge
   --------------------------------------------------------------------- */

.az-hdr .az-hdr__util .az-hdr__sub {
    left: 0;
    right: auto;
}

/* ---------------------------------------------------------------------
   Row 2 — product categories
   Scoped under .az-hdr__menu so none of it can reach the meanmenu copy.
   --------------------------------------------------------------------- */

.az-hdr__nav {
    padding: 0 var(--az-hdr-inset);
}

.az-hdr__menu > ul {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: clamp(8px, 1.2vw, 28px);
    margin: 0;
    padding: 0;
    list-style: none;
}

.az-hdr__menu > ul > li {
    position: relative;
    display: flex;
    align-items: center;
}

/* Items that exist only for the mobile offcanvas copy. Hidden here;
   visible in .mean-nav, which this selector cannot reach. */
.az-hdr__menu .az-hdr__m-only {
    display: none;
}

.az-hdr__menu > ul > li > a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: clamp(13px, 0.45vw + 8px, 18px) 0;
    font-family: var(--rr-ff-heading2, "Velocia", serif);
    font-size: var(--az-hdr-nav-fs);
    font-weight: 500;
    line-height: 1.25;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-align: center;
    color: var(--az-hdr-fg);
    position: relative;
    transition: color 0.3s ease-in-out;
}

/* Brand underline on hover / current section */
.az-hdr__menu > ul > li > a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 8px;
    width: 0;
    height: 2px;
    background: var(--az-hdr-accent);
    transition: width 0.3s ease-in-out;
}

.az-hdr__menu > ul > li:hover > a,
.az-hdr__menu > ul > li:focus-within > a,
.az-hdr__menu > ul > li.az-hdr--current > a {
    color: var(--az-hdr-accent);
}

.az-hdr__menu > ul > li:hover > a::after,
.az-hdr__menu > ul > li:focus-within > a::after,
.az-hdr__menu > ul > li.az-hdr--current > a::after {
    width: 100%;
}

.az-hdr__menu > ul > li > a i {
    font-size: 0.8em;
    transition: transform 0.3s ease-in-out;
}

.az-hdr__menu > ul > li:hover > a i,
.az-hdr__menu > ul > li:focus-within > a i {
    transform: rotate(180deg);
}

/* ---------------------------------------------------------------------
   Dropdown panels (both rows)
   --------------------------------------------------------------------- */

.az-hdr .az-hdr__sub {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 99;
    min-width: 264px;
    margin: 0;
    padding: 12px 0;
    list-style: none;
    text-align: left;
    background: var(--az-hdr-white);
    border-radius: 12px;
    border-top: 3px solid var(--az-hdr-blue);
    box-shadow: 0 20px 40px rgba(1, 15, 28, 0.12);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-8px);
    transition: all 0.3s ease-in-out;
}

/* Panels that would run past the right edge open leftwards instead. */
.az-hdr .az-hdr__sub--end {
    left: auto;
    right: 0;
}

.az-hdr .az-hdr__has-sub:hover > .az-hdr__sub,
.az-hdr .az-hdr__has-sub:focus-within > .az-hdr__sub {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

.az-hdr .az-hdr__sub > li {
    display: block;
    margin: 0;
}

.az-hdr .az-hdr__sub > li > a {
    display: block;
    padding: 9px 24px;
    font-family: var(--rr-ff-heading2, "Velocia", serif);
    font-size: 15px;
    font-weight: 500;
    line-height: 1.35;
    letter-spacing: 0.6px;
    color: var(--rr-text-body, #5b6b6b);
    transition: all 0.3s ease-in-out;
}

.az-hdr .az-hdr__sub > li > a:hover,
.az-hdr .az-hdr__sub > li > a:focus,
.az-hdr .az-hdr__sub > li > a.active {
    color: var(--az-hdr-blue);
    padding-left: 30px;
}

/* In the offcanvas copy, meanmenu appends its own .mean-expand arrow to
   every row that has a sub-menu, so the desktop caret would be a second
   arrow on the same line. This is the one selector here that reaches into
   the copy, and it only hides an element this header put there. */
.mean-nav .az-hdr__caret {
    display: none;
}

/* ---------------------------------------------------------------------
   Mobile bar — logo + language + hamburger.
   The hamburger reuses the theme's own .sidebar__toggle markup, so
   main.js opens the existing offcanvas with no new JavaScript.
   --------------------------------------------------------------------- */

.az-hdr__burger {
    display: none;
    line-height: 0;
    cursor: pointer;
}

/* The source SVG is stroked #192929, so it is inverted to white while the
   bar is transparent and returns to its own colour once stuck. */
.az-hdr__burger img {
    width: 50px;
    height: auto;
    filter: invert(var(--az-hdr-burger-invert));
    transition: filter 0.35s ease-in-out;
}

/* ---------------------------------------------------------------------
   Breakpoints — structural only
   --------------------------------------------------------------------- */

/* Laptops: the six labels need every pixel, so drop the side inset. */
@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .az-hdr {
        --az-hdr-inset: 15px;
    }

    .az-hdr__menu > ul > li > a {
        letter-spacing: 0.5px;
    }

    .az-hdr__sub {
        min-width: 234px;
    }
}

/* Below 992px meanmenu takes over: row 2 is hidden (its markup is still
   in the DOM for meanmenu to copy) and row 1 collapses to
   logo | language | hamburger. */
@media only screen and (max-width: 991px) {
    .az-hdr__bar-grid {
        grid-template-columns: auto 1fr;
        gap: 12px;
    }

    .az-hdr__side--start {
        display: none;
    }

    .az-hdr__brand {
        justify-content: flex-start;
    }

    .az-hdr__burger {
        display: block;
    }

    .az-hdr__lang {
        padding-left: 0;
        border-left: 0;
    }
}

/* Phones: the Contact Us link gives up its space to the logo. */
@media only screen and (max-width: 575px) {
    .az-hdr {
        --az-hdr-row1-y: 10px;
    }

    .az-hdr__contact {
        display: none;
    }

    .az-hdr__side--end {
        gap: 12px;
    }
}

/* Very short landscape viewports: keep the bar shallow so the 100svh
   hero underneath still has room for its content. */
@media only screen and (max-height: 500px) and (orientation: landscape) {
    .az-hdr {
        --az-hdr-row1-y: 6px;
        --az-hdr-logo-w: 130px;
    }
}