/**
 * header.css — top bar, main header bar, sticky header, hamburger.
 *
 * Single responsibility: header chrome only. Dropdown/submenu styling
 * lives in navigation.css. Mobile offcanvas panel styling lives in
 * navigation.css.
 *
 * @package ICE_GeneratePress_Child
 * @since   1.0.0
 */

/* ======================================================================
   Top Bar
   ====================================================================== */

.ice-topbar {
        background: var(--ice-topbar-bg);
        color: var(--ice-topbar-color);
        font-size: var(--ice-topbar-fs);
        height: var(--ice-topbar-height);
        display: flex;
        align-items: center;
}

.ice-topbar__inner {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--ice-spacing-md);
        width: 100%;
        max-width: var(--ice-container);
        margin: 0 auto;
        padding: 0 var(--ice-spacing-sm);
}

.ice-topbar__left,
.ice-topbar__right {
        display: flex;
        align-items: center;
        gap: var(--ice-spacing-md);
}

.ice-topbar__item {
        display: inline-flex;
        align-items: center;
        gap: var(--ice-spacing-2xs);
        color: var(--ice-topbar-color);
}

.ice-topbar__item svg {
        flex-shrink: 0;
        opacity: 0.95;
        width: 12px;
        height: 12px;
        color: var(--ice-topbar-icon-color);
        /* DO NOT set `fill` here — most icons are stroke-based (fill="none"
         * stroke="currentColor"). Setting fill would override the fill="none"
         * attribute and turn the icon into a solid gold block. Only `color`
         * is needed: stroke-based icons pick it up via stroke="currentColor",
         * fill-based icons (whatsapp, twitter) pick it up via fill="currentColor".
         */
}

.ice-topbar__label {
        font-weight: var(--ice-fw-semibold);
        opacity: 0.85;
}

.ice-topbar__link {
        color: var(--ice-topbar-color);
        text-decoration: none;
        transition: color var(--ice-t-fast);
}

.ice-topbar__link:hover {
        color: var(--ice-accent);
        text-decoration: none;
}

.ice-topbar__right .ice-socials__link {
        color: var(--ice-topbar-icon-color);
        width: 26px;
        height: 26px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        transition: all var(--ice-t-fast);
}

.ice-topbar__right .ice-socials__link svg {
        color: var(--ice-topbar-icon-color);
        /* Only `color`, NOT `fill` — see comment above for why. */
}

.ice-topbar__right .ice-socials__link:hover {
        background: var(--ice-topbar-icon-color);
        color: var(--ice-topbar-bg);
        text-decoration: none;
}

.ice-topbar__right .ice-socials__link:hover svg {
        color: var(--ice-topbar-bg);
}

.ice-topbar__right .ice-socials {
        display: flex;
        gap: var(--ice-spacing-xs);
}

/* ----- Language Switcher (Polylang) ----- */

.ice-topbar__right .ice-topbar__item--lang {
        display: flex;
        align-items: center;
        gap: 0.35rem;
        padding-right: 0.6rem;
        margin-right: 0.3rem;
        border-right: 1px solid rgba(255, 255, 255, 0.2);
        font-size: var(--ice-topbar-fs);
        line-height: 1;
}

.ice-topbar__lang-icon {
        display: inline-flex;
        align-items: center;
        color: var(--ice-topbar-icon-color);
}

.ice-topbar__lang-icon svg {
        width: 14px;
        height: 14px;
        display: block;
}

.ice-topbar__lang-list {
        display: inline-flex;
        align-items: center;
        gap: 0.35rem;
}

.ice-topbar__lang-link {
        text-decoration: none;
        color: var(--ice-topbar-color);
        opacity: 0.65;
        transition: opacity var(--ice-t-fast), color var(--ice-t-fast);
        font-size: var(--ice-topbar-fs);
        font-weight: var(--ice-fw-medium);
}

.ice-topbar__lang-link:hover {
        opacity: 1;
        color: var(--ice-topbar-icon-color);
        text-decoration: none;
}

.ice-topbar__lang-link.is-current {
        opacity: 1;
        font-weight: var(--ice-fw-bold);
        color: var(--ice-topbar-icon-color);
}

.ice-topbar__lang-sep {
        opacity: 0.4;
        color: var(--ice-topbar-color);
}

/* ======================================================================
   Main Header
   ====================================================================== */

.ice-header {
        position: relative;
        z-index: var(--ice-z-header);
        background: var(--ice-header-bg);
        color: var(--ice-header-color);
        display: flex;
        flex-direction: column;
}

.ice-topbar {
        order: 1;
}

.ice-header__main {
        order: 2;
        position: relative;
        z-index: var(--ice-z-base);
        background: var(--ice-header-bg);
        transition: box-shadow var(--ice-t-base), backdrop-filter var(--ice-t-base), background var(--ice-t-base);
}

.ice-header__bar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--ice-spacing-md);
        height: var(--ice-header-height);
        width: 100%;
        max-width: var(--ice-container);
        margin: 0 auto;
        padding: 0 var(--ice-spacing-sm);
        transition: height var(--ice-t-base);
}

/* ----- Logo ----- */

.ice-header__logo {
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        transition: transform var(--ice-t-base);
}

.ice-logo {
        display: inline-flex;
        align-items: center;
        gap: var(--ice-spacing-xs);
        text-decoration: none;
        color: var(--ice-title);
        font-family: var(--ice-font-heading);
        font-weight: var(--ice-fw-extrabold);
        line-height: 1;
}

.ice-logo:hover {
        color: var(--ice-title);
        text-decoration: none;
}

.ice-logo img,
.custom-logo {
        max-height: 56px;
        width: auto;
        height: auto;
        display: block;
}

.ice-logo__mark {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        background: var(--ice-primary);
        color: var(--ice-accent);
        font-weight: var(--ice-fw-black);
        font-size: var(--ice-fs-sm);
        letter-spacing: var(--ice-ls-tight);
        border-radius: var(--ice-btn-radius-sm);
}

.ice-logo__text {
        font-size: var(--ice-fs-lg);
        letter-spacing: var(--ice-ls-tight);
}

/* ----- Header actions (search + CTA + hamburger) ----- */

.ice-header__actions {
        display: flex;
        align-items: center;
        gap: var(--ice-spacing-sm);
        flex: 0 0 auto;
}

.ice-header__action {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        color: var(--ice-title);
        border-radius: 50%;
        transition: background var(--ice-t-fast), color var(--ice-t-fast);
}

.ice-header__action:hover {
        background: var(--ice-light);
        color: var(--ice-accent);
}

/* ----- Hamburger (visible only on mobile / tablet) -----
 * v1.1.2: replaced the 3-bar CSS animation with a dual-SVG cross-fade.
 *   - Closed state: grid icon (4-quadrant pattern) visible
 *   - Open state: X icon visible
 *   - Cross-fade between the two via opacity + slight scale
 * The grid icon was provided by the user as a branded alternative
 * to the universal 3-line hamburger.
 */

.ice-hamburger {
        display: none;
        width: 48px;
        height: 48px;
        align-items: center;
        justify-content: center;
        background: transparent;
        border: 0;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
        padding: 0;
        position: relative;
}

/* Hover/focus: subtle transparent grey tint (NOT a solid light-gray circle).
 * The icon itself is already large (44x44) and visually prominent, so the
 * hover state just needs a faint wash — not a blocking background. */
.ice-hamburger:hover,
.ice-hamburger:focus-visible {
        background: rgba(21, 21, 21, 0.06);
        border-radius: var(--ice-btn-radius-sm);
}

/* Icon container — both icons stacked, absolutely positioned. */
.ice-hamburger__icon {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) scale(1);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        transition: opacity var(--ice-t-base), transform var(--ice-t-base), color var(--ice-t-fast);
        color: var(--ice-primary);
}

/* Icon full 44x44 (fills the 48x48 button with 2px breathing room). */
.ice-hamburger__icon svg {
        width: 44px;
        height: 44px;
        display: block;
}

/* Grid icon: visible when closed, hidden when open. */
.ice-hamburger__icon--grid {
        opacity: 1;
}

.ice-hamburger[aria-expanded="true"] .ice-hamburger__icon--grid {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.7);
}

/* X icon: hidden when closed, visible when open. */
.ice-hamburger__icon--close {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.7);
}

.ice-hamburger[aria-expanded="true"] .ice-hamburger__icon--close {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
        color: var(--ice-primary);
}

/* Hover: both icons turn gold. */
.ice-hamburger:hover .ice-hamburger__icon {
        color: var(--ice-accent);
}

.ice-hamburger[aria-expanded="true"]:hover .ice-hamburger__icon--close {
        color: var(--ice-accent);
}

/* ======================================================================
   Sticky Header (active state)
   ====================================================================== */

.ice-header.is-sticky .ice-header__main {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: var(--ice-z-sticky);
        box-shadow: var(--ice-shadow-sticky);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        background: rgba(255, 255, 255, 0.92);
        animation: ice-header-slide-down 320ms cubic-bezier(0.4, 0, 0.2, 1);
}

.ice-header.is-sticky .ice-header__bar {
        height: var(--ice-header-height-sticky);
}

.ice-header.is-sticky .ice-header__logo {
        transform: scale(0.92);
        transform-origin: left center;
}

.ice-header.is-sticky .custom-logo,
.ice-header.is-sticky .ice-logo__mark {
        max-height: 48px;
}

.ice-header.is-sticky .ice-logo__mark {
        width: 34px;
        height: 34px;
        font-size: var(--ice-fs-xs);
}

/* Reserve space so content does NOT jump up when the main bar becomes fixed.
 * The spacer takes the main bar's natural height; placed AFTER the topbar
 * so visual order is preserved: [topbar] [spacer] (main bar floats). */
.ice-header.is-sticky::after {
        content: "";
        display: block;
        height: var(--ice-header-height);
}

/* When sticky is active, the topbar has already scrolled off-screen
 * (offset defaults to 40px > topbar's 34px height), so we don't need to
 * hide it explicitly. The spacer above reserves the main bar's layout
 * slot, keeping the page below stable. */

/* ======================================================================
   Skip link (a11y)
   ====================================================================== */

.ice-skip-link {
        position: absolute;
        top: -100px;
        left: 0;
        background: var(--ice-primary);
        color: var(--ice-white) !important;
        padding: var(--ice-spacing-xs) var(--ice-spacing-md);
        font-weight: var(--ice-fw-semibold);
        z-index: var(--ice-z-modal);
        text-decoration: none;
        transition: top var(--ice-t-fast);
}

.ice-skip-link:focus {
        top: 0;
        color: var(--ice-white);
}

@keyframes ice-header-slide-down {
        from {
                transform: translateY(-100%);
                opacity: 0;
        }
        to {
                transform: translateY(0);
                opacity: 1;
        }
}