/* ── Category pill / tag ─────────────────────────────────────────────────────── */

.category-pill {
    display:        inline-flex;
    align-items:    center;
    padding:        3px 10px;
    border-radius:  999px;
    background:     var(--color-primary);
    color:          var(--color-dark);
    font-family:    var(--font-family);
    font-size:      12px;
    font-weight:    var(--fw-semibold);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space:    nowrap;
}


/* ── Buttons ─────────────────────────────────────────────────────────────────── */

.btn {
    display:        inline-flex;
    align-items:    center;
    font-family:    var(--font-family);
    font-size:      var(--fs-body);
    font-weight:    var(--fw-light);
    letter-spacing: var(--letter-spacing);
    color:          var(--color-primary);
    opacity:        var(--opacity-ui);
    transition:     opacity 0.2s ease;
}

.btn:hover {
    opacity: 1;
}


/* ── Site header ─────────────────────────────────────────────────────────────── */

.site-header {
    position:    fixed;
    top:         0;
    left:        0;
    right:       0;
    z-index:     100;
    height:      var(--header-height);
    padding-top: var(--header-pad-top);
}

/* Very subtle dark veil — helps readability on bright sections without looking like a navbar */
.site-header::before {
    content:        '';
    position:       absolute;
    inset:          0;
    background:     linear-gradient(to bottom, rgba(0,0,0,0.14) 0%, transparent 100%);
    pointer-events: none;
}

/* Push header below the WP admin bar when logged in */
.admin-bar .site-header {
    top: 32px;
}

@media screen and ( max-width: 782px ) {
    .admin-bar .site-header {
        top: 46px;
    }
}

.site-header__inner {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
}

/* Logo */
.site-header__logo {
    display:         flex;
    align-items:     baseline;
    gap:             6px;
    color:           #fff;
    text-decoration: none;
    transition:      opacity 0.2s ease;
}

.site-header__logo:hover {
    opacity: var(--opacity-ui);
}

.site-header__logo-mark {
    font-weight:    var(--fw-bold);
    font-size:      18px;
    letter-spacing: var(--letter-spacing);
}

.site-header__section-name {
    font-weight:    400;
    font-size:      14px;
    letter-spacing: var(--letter-spacing);
    opacity:        var(--opacity-ui);
}

/* Right-side group: nav + lang switcher + hamburger */
.site-header__right {
    display:     flex;
    align-items: center;
    gap:         var(--spacing-md);
}

/* Desktop nav */
.site-header__nav {
    display:     flex;
    align-items: center;
    gap:         var(--spacing-md);
}

.site-header__nav-link,
.site-header__about-trigger {
    font-size:      var(--fs-nav);
    font-weight:    400;
    letter-spacing: var(--letter-spacing);
    color:          #fff;
    opacity:        var(--opacity-ui);
    transition:     opacity 0.2s ease;
}

.site-header__nav-link:hover,
.site-header__about-trigger:hover,
.site-header__nav-link.is-active,
.site-header__about-trigger.is-active {
    opacity: 1;
}

/* Language switcher */
.site-header__lang-switcher {
    display:        flex;
    align-items:    center;
    font-size:      var(--fs-nav);
    font-style:     italic;
    letter-spacing: var(--letter-spacing);
    color:          #fff;
}

.lang-switcher__dot {
    margin-right: 6px;
    font-style:   normal;
    opacity:      1;
}

.lang-switcher__sep {
    margin:     0 4px;
    font-style: normal;
    opacity:    var(--opacity-ui);
}

.lang-switcher__item {
    font-style:  italic;
    font-weight: 400;
    opacity:     var(--opacity-ui);
    color:       #fff;
    transition:  opacity 0.2s ease;
}

.lang-switcher__item.is-active,
.lang-switcher__item:hover {
    opacity: 1;
}

/* Hamburger button — hidden on desktop, shown on mobile */
.site-header__hamburger {
    display:         none;
    flex-direction:  column;
    justify-content: center;
    gap:             5px;
    width:           24px;
    height:          24px;
    padding:         0;
    flex-shrink:     0;
}

.site-header__hamburger span {
    display:          block;
    width:            100%;
    height:           1.5px;
    background:       #fff;
    opacity:          var(--opacity-ui);
    transition:       opacity 0.2s ease, transform 0.2s ease;
    transform-origin: center;
}

.site-header__hamburger:hover span {
    opacity: 1;
}

.site-header--open .site-header__hamburger span:first-child {
    transform: translateY(3.25px) rotate(45deg);
    opacity:   1;
}

.site-header--open .site-header__hamburger span:last-child {
    transform: translateY(-3.25px) rotate(-45deg);
    opacity:   1;
}

/* Mobile menu panel — position: fixed so it is outside any blend-mode stacking context.
   top: 0 lets the glass extend behind the logo/close row; the header (z-index 100)
   floats on top of the panel (z-index 99), so logo and × render inside the glass. */
.site-header__mobile-menu {
    display:                  none;
    position:                 fixed;
    top:                      0;
    left:                     0;
    right:                    0;
    z-index:                  99;
    padding:                  calc(var(--header-height) + var(--spacing-md)) var(--container-pad) var(--spacing-md);
    background:               rgba(0, 0, 0, 0.55);
    -webkit-backdrop-filter:  blur(24px) saturate(1.2);
    backdrop-filter:          blur(24px) saturate(1.2);
    border-bottom:            1px solid rgba(255, 255, 255, 0.06);
}

/* Panel is visible during both open and closing states */
.site-header__mobile-menu.is-open,
.site-header__mobile-menu.is-closing {
    display: block;
}

.site-header__mobile-menu.is-open {
    animation: nk-menu-in 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.site-header__mobile-menu.is-closing {
    animation: nk-menu-out 0.35s cubic-bezier(0.4, 0, 0.6, 1) both;
}

@keyframes nk-menu-in {
    from { opacity: 0; transform: translateY(-20px); }
    to   { opacity: 1; transform: translateY(0);     }
}

@keyframes nk-menu-out {
    from { opacity: 1; transform: translateY(0);     }
    to   { opacity: 0; transform: translateY(-20px); }
}

/* Skip movement for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
    .site-header__mobile-menu.is-open,
    .site-header__mobile-menu.is-closing {
        animation: none;
    }
}

.site-header__mobile-nav {
    display:        flex;
    flex-direction: column;
    gap:            var(--spacing-sm);
    margin-bottom:  var(--spacing-md);
}

.site-header__mobile-lang {
    display:     flex;
    align-items: center;
}

/* Mobile menu always uses light text (dark background is always applied) */
.site-header__mobile-menu .site-header__nav-link,
.site-header__mobile-menu .site-header__about-trigger,
.site-header__mobile-menu .lang-switcher__item {
    color: var(--color-primary);
}


/* ── Site footer ─────────────────────────────────────────────────────────────── */

.site-footer {
    padding: var(--spacing-md) 0;
}

/* 3-column grid: left · center · right — center is always centered */
.site-footer__inner {
    display:               grid;
    grid-template-columns: 1fr auto 1fr;
    align-items:           center;
    gap:                   var(--spacing-md);
}

/* Left: copyright */
.site-footer__left {
    display:        flex;
    align-items:    center;
    gap:            var(--spacing-md);
    font-size:      var(--fs-footer);
    font-weight:    400;
    letter-spacing: var(--letter-spacing);
    text-transform: uppercase;
    opacity:        var(--opacity-ui);
    white-space:    nowrap;
    justify-self:   start;
}

/* Center: social icons + logo mark */
.site-footer__center {
    display:     flex;
    align-items: center;
    gap:         var(--spacing-md);
    justify-self: center;
}

.site-footer__social {
    display:     flex;
    align-items: center;
    color:       var(--color-primary);
    opacity:     var(--opacity-ui);
    transition:  opacity 0.2s ease;
}

.site-footer__social:hover {
    opacity: 1;
}

.site-footer__mark {
    color:      var(--color-primary);
    opacity:    var(--opacity-ui);
    transition: opacity 0.2s ease;
}

.site-footer__mark:hover {
    opacity: 1;
}

.site-footer__mark-text {
    font-weight:    var(--fw-bold);
    font-size:      14px;
    letter-spacing: var(--letter-spacing);
}

/* Right: legal links */
.site-footer__right {
    display:        flex;
    align-items:    center;
    gap:            var(--spacing-md);
    justify-self:   end;
}

.site-footer__legal {
    font-size:      var(--fs-footer);
    font-weight:    400;
    letter-spacing: var(--letter-spacing);
    text-transform: uppercase;
    color:          var(--color-primary);
    opacity:        var(--opacity-ui);
    transition:     opacity 0.2s ease;
    white-space:    nowrap;
}

.site-footer__legal:hover {
    opacity: 1;
}