/* ==============================================================
 * Top Bar — Hemikra
 * ============================================================== */

.site-topbar {
    position: sticky;
    z-index: calc(var(--hemik-z-header) + 2);
    top: var(--hemik-admin-bar-offset, 0px);
    width: 100%;
    border-block-end: 1px solid rgb(255 255 255 / 0.08);
    background: var(--hemik-color-brand-deep);
    color: rgb(255 255 255 / 0.82);
    box-shadow: 0 1px 0 rgb(30 27 75 / 0.08);
}

.site-topbar__inner {
    display: flex;
    min-height: 2.35rem;
    align-items: center;
    justify-content: center;
    gap: var(--hemik-space-4);
}

.site-topbar__message {
    margin: 0;
    font-size: 0.72rem;
    font-weight: var(--hemik-font-weight-medium);
    letter-spacing: 0.055em;
}

.site-topbar__channels {
    display: none;
    align-items: center;
    gap: var(--hemik-space-4);
}

.site-topbar__channels a {
    position: relative;
    color: rgb(255 255 255 / 0.76);
    font-size: 0.72rem;
    font-weight: var(--hemik-font-weight-medium);
    text-decoration: none;
}

.site-topbar__channels a + a::before {
    position: absolute;
    top: 50%;
    left: calc(var(--hemik-space-2) * -1);
    width: 2px;
    height: 2px;
    border-radius: 50%;
    background: rgb(255 255 255 / 0.38);
    content: "";
    transform: translateY(-50%);
}

.site-topbar__channels a:hover,
.site-topbar__channels a:focus-visible {
    color: #fff;
}

.site-topbar__channels a:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
    border-radius: 2px;
}

@media (min-width: 48rem) {
    .site-topbar__inner {
        justify-content: space-between;
    }

    .site-topbar__channels {
        display: flex;
    }
}

@media (prefers-contrast: more) {
    .site-topbar {
        background: #24153D;
        color: #fff;
    }

    .site-topbar__channels a {
        color: #fff;
    }
}

@media (forced-colors: active) {
    .site-topbar {
        border-color: CanvasText;
        background: Canvas;
        color: CanvasText;
    }

    .site-topbar__channels a {
        color: LinkText;
    }
}

/**
 * Header layout — Hemikra refined visual system
 */

.site-header {
    position: sticky;
    z-index: calc(var(--hemik-z-header) + 1);
    top: calc(
        var(--hemik-admin-bar-offset, 0px) +
        var(--hemik-topbar-height, 2.35rem)
    );
    width: 100%;
    border-block-end: 1px solid rgb(109 40 217 / 0.08);
    background: var(--hemik-color-header);
    box-shadow: 0 1px 0 rgb(255 255 255 / 0.48);
    backdrop-filter: blur(18px) saturate(112%);
    -webkit-backdrop-filter: blur(18px) saturate(112%);
    will-change: transform;
    transition:
        transform 260ms var(--hemik-ease-standard),
        box-shadow var(--hemik-duration-normal) var(--hemik-ease-standard),
        background-color var(--hemik-duration-normal) var(--hemik-ease-standard);
}

.site-header.is-hidden {
    transform: translateY(calc(-100% - 2px));
    pointer-events: none;
}

.site-header[data-scroll-state="visible"] {
    transform: translateY(0);
}

.site-header.is-scrolled {
    background: rgb(250 249 252 / 0.97);
    box-shadow: var(--hemik-shadow-header);
}

.site-header__inner {
    display: flex;
    min-height: 5.25rem;
    align-items: center;
    justify-content: space-between;
    gap: var(--hemik-space-6);
}

.site-header__desktop {
    display: none;
    min-width: 0;
    flex: 1 1 auto;
    align-items: center;
    justify-content: flex-end;
    gap: clamp(var(--hemik-space-4), 2vw, var(--hemik-space-8));
}

/* Branding */
.site-branding {
    display: flex;
    min-width: 0;
    flex: 0 1 auto;
    align-items: center;
    gap: var(--hemik-space-4);
}

.site-branding__logo,
.site-branding__logo .custom-logo-link {
    display: inline-flex;
    align-items: center;
}

.site-branding__logo .custom-logo {
    width: auto;
    max-width: min(13.5rem, 46vw);
    max-height: 3.25rem;
    border-radius: 0;
}

.site-branding__name {
    color: var(--hemik-color-text);
    font-size: var(--hemik-font-size-xl);
    font-weight: var(--hemik-font-weight-semibold);
    letter-spacing: -0.02em;
    line-height: 1;
    text-decoration: none;
}

.site-branding__name:hover {
    color: var(--hemik-color-brand);
}

.site-branding__description {
    display: none;
    max-width: 16rem;
    padding-inline-start: var(--hemik-space-4);
    border-inline-start: 1px solid var(--hemik-color-border-soft);
    color: var(--hemik-color-text-muted);
    font-size: var(--hemik-font-size-xs);
    line-height: 1.45;
}

/* Strategic actions */
.header-actions {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: var(--hemik-space-3);
}

.header-actions__button {
    display: inline-flex;
    min-height: 2.75rem;
    align-items: center;
    justify-content: center;
    gap: var(--hemik-space-2);
    padding-inline: var(--hemik-space-5);
    border: 1px solid transparent;
    border-radius: var(--hemik-radius-pill);
    font-size: var(--hemik-font-size-sm);
    font-weight: var(--hemik-font-weight-semibold);
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    transition:
        background-color var(--hemik-duration-fast) var(--hemik-ease-standard),
        border-color var(--hemik-duration-fast) var(--hemik-ease-standard),
        color var(--hemik-duration-fast) var(--hemik-ease-standard),
        box-shadow var(--hemik-duration-fast) var(--hemik-ease-standard),
        transform var(--hemik-duration-fast) var(--hemik-ease-standard);
}

.header-actions__dot {
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.7;
}

.header-actions__button--facebook {
    border-color: var(--hemik-color-brand);
    background: var(--hemik-color-brand);
    color: var(--hemik-color-surface);
    box-shadow: 0 6px 18px rgb(109 40 217 / 0.16);
}

.header-actions__button--facebook:hover {
    border-color: var(--hemik-color-action-hover);
    background: var(--hemik-color-action-hover);
    color: var(--hemik-color-surface);
    box-shadow: 0 8px 22px rgb(91 33 182 / 0.18);
    transform: translateY(-1px);
}

.header-actions__button--whatsapp {
    border-color: rgb(109 40 217 / 0.28);
    background: rgb(255 255 255 / 0.34);
    color: var(--hemik-color-brand);
}

.header-actions__button--whatsapp:hover {
    border-color: var(--hemik-color-action);
    background: var(--hemik-color-brand-subtle);
    color: var(--hemik-color-action-hover);
}

.header-actions__button:focus-visible {
    outline: 3px solid transparent;
    box-shadow: var(--hemik-shadow-focus);
}

@media (min-width: 48rem) {
    .site-branding__description {
        display: block;
    }
}

@media (min-width: 64rem) {
    .site-header__desktop {
        display: flex;
    }
}

@media (min-width: 64rem) and (max-width: 74.999rem) {
    .site-header__inner {
        gap: var(--hemik-space-4);
    }

    .site-header__desktop {
        gap: var(--hemik-space-4);
    }

    .header-actions {
        gap: var(--hemik-space-2);
    }

    .header-actions__button {
        padding-inline: var(--hemik-space-4);
    }

    .site-branding__description {
        display: none;
    }
}

/*
 * WordPress Admin Bar offsets both persistent header layers.
 */
.admin-bar {
    --hemik-admin-bar-offset: 32px;
}

@media screen and (max-width: 782px) {
    .admin-bar {
        --hemik-admin-bar-offset: 46px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .site-header,
    .header-actions__button {
        transition: none;
    }

    .site-header.is-hidden {
        transform: none;
        pointer-events: auto;
    }

    .header-actions__button--facebook:hover {
        transform: none;
    }
}

@media (prefers-reduced-transparency: reduce) {
    .site-header,
    .site-header.is-scrolled {
        background: var(--hemik-color-surface-soft);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
}

@media (forced-colors: active) {
    .header-actions__button--facebook,
    .header-actions__button--whatsapp {
        border-color: ButtonText;
        box-shadow: none;
    }

    .header-actions__button--facebook {
        background: ButtonFace;
        color: ButtonText;
    }
}