/*
 * Site header (partials/header.php). Blocks, order and style come from admin → Templates → Menu
 * (Support/HeaderLayout.php): the colours, fonts and sizes are the custom properties --hdr-* in the
 * header's style attribute; the values below are only the fallbacks. Loaded last in <head> and
 * scoped to #site-header, so page CSS (legacy globals.css, album, …) cannot change it.
 *
 * Desktop: one row — every block is a flex item of .header__inner in the admin order (the nav is
 * display: contents); the free space (.header__spacer) takes the room that is left. Phones: logo in
 * the middle, the burger opens the nav as a panel with the other blocks.
 */
@font-face { font-family: "Lazurski"; src: url("/demo52/fonts/LazurskiRegular.woff2") format("woff2"), url("/demo52/fonts/LazurskiRegular.woff") format("woff"); font-weight: 400; font-display: swap; }

#site-header {
    position: sticky; top: 0; z-index: 40; height: var(--hdr-h, 70px); margin: 0; padding: 0; border: 0;
    background: var(--hdr-bg, #18171a); color: #fff; font: 400 16px/1.2 "Lato", "Source Sans 3", sans-serif;
}
#site-header .header__inner { display: flex; align-items: center; gap: var(--hdr-icon-gap, 30px); height: 100%; max-width: none; margin: 0; padding: 0 15px; }
#site-header .header__nav { display: contents; }
#site-header .header__block { flex: none; }
/* Gap between the blocks: the icon gap (flex gap, so it follows the admin order); the menu keeps
   its own gap between links; the logo keeps 58px to the next block, as on the reference design. */

#site-header .header__brand { display: flex; flex: none; align-items: center; margin-right: max(0px, calc(58px - var(--hdr-icon-gap, 30px))); }
#site-header .header__brand img { display: block; max-width: 400px; max-height: calc(var(--hdr-h, 70px) - 4px); object-fit: contain; }

#site-header .header__links { display: flex; align-items: center; gap: var(--hdr-menu-gap, 30px); min-width: 0; }
#site-header .header__link {
    display: inline-flex; align-items: center; gap: 8px; padding: 0; border-radius: 0; background: none;
    color: var(--hdr-menu, rgb(255 255 255 / 0.5)); font-family: var(--hdr-menu-font); font-weight: var(--hdr-menu-font-weight, 400);
    font-size: var(--hdr-menu-size, 16px); line-height: 1.2; white-space: nowrap; transition: color 0.2s ease;
}
#site-header .header__link .icon { display: none; }
#site-header .header__link:hover,
#site-header .header__link:focus-visible { color: var(--hdr-menu-hover, #fff); }
#site-header .header__link.is-active { color: var(--hdr-menu-active, #fff); }
#site-header .header__link.is-accent { color: var(--hdr-menu-accent, #469a58); }
#site-header .header__link.is-accent:hover,
#site-header .header__link.is-accent.is-active { color: var(--hdr-menu-accent, #469a58); filter: brightness(1.25); }

/* free space: all the room that is left; a text, an image / SVG or nothing */
#site-header .header__spacer { display: flex; flex: 1 1 0; align-items: center; justify-content: center; min-width: 0; height: 100%; }
#site-header .header__spacer--left { justify-content: flex-start; }
#site-header .header__spacer--right { justify-content: flex-end; }
#site-header .header__spacer-link { display: flex; align-items: center; height: 100%; }
#site-header .header__spacer-img { display: block; width: auto; max-width: 100%; max-height: calc(var(--hdr-h, 70px) - 16px); }
#site-header .header__beta {
    padding: 0 18px; overflow: hidden; color: var(--hdr-spacer, #ffb500);
    font-family: var(--hdr-spacer-font); font-weight: var(--hdr-spacer-font-weight, 400); font-size: var(--hdr-spacer-size, 14px);
    line-height: 34px; letter-spacing: 0; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap;
}

/* "Choose magazine", "Join" */
#site-header .header__pill {
    display: inline-flex; align-items: center; justify-content: center; height: 34px; padding: 0 18px;
    border: 1px solid var(--hdr-pill, #469a58); border-radius: 50px; background: transparent; color: var(--hdr-pill, #469a58); cursor: pointer;
    font-family: var(--hdr-pill-font); font-weight: var(--hdr-pill-font-weight, 400); font-size: 14px; line-height: 1;
    text-transform: uppercase; white-space: nowrap; transition: background 0.2s ease, color 0.2s ease, filter 0.2s ease;
}
#site-header .header__pill:hover,
#site-header .header__pill:focus-visible { background: color-mix(in srgb, var(--hdr-pill, #469a58) 15%, transparent); }
#site-header .header__pill--solid { background: var(--hdr-pill, #469a58); color: #fff; }
#site-header .header__pill--solid:hover,
#site-header .header__pill--solid:focus-visible { background: var(--hdr-pill, #469a58); filter: brightness(0.88); }
#site-header .header__text-btn {
    display: inline-flex; align-items: center; gap: 8px; color: var(--hdr-menu, rgb(255 255 255 / 0.5));
    font-family: var(--hdr-menu-font); font-size: var(--hdr-menu-size, 16px); line-height: 1.2; white-space: nowrap; transition: color 0.2s ease;
}
#site-header .header__text-btn:hover,
#site-header .header__text-btn:focus-visible { color: var(--hdr-menu-hover, #fff); }
#site-header .header__text-btn .icon { width: 18px; height: 18px; }

/* icons: built-in glyphs (fill), site sprite icons (stroke) or an image / SVG file (mask) — all in the icon colours */
#site-header .header__icon {
    position: relative; display: inline-flex; align-items: center; justify-content: center; flex: none;
    width: var(--hdr-icon-size, 28px); height: var(--hdr-icon-size, 28px); padding: 0; border: 0; border-radius: 0; background: none;
    color: var(--hdr-icon, rgb(255 255 255 / 0.2)); cursor: pointer; transition: color 0.2s ease;
}
#site-header .header__icon:hover,
#site-header .header__icon:focus-visible { color: var(--hdr-icon-hover, #fff); background: none; }
#site-header .header__icon.is-active,
#site-header .header__icon[aria-expanded="true"] { color: var(--hdr-icon-active, #fff); background: none; }
#site-header .header__glyph { display: block; width: 100%; height: 100%; fill: currentColor; }
#site-header .header__sprite { display: block; width: 86%; height: 86%; fill: none; stroke: currentColor; }
#site-header .header__mask {
    display: block; width: 100%; height: 100%; background: currentColor;
    -webkit-mask: var(--hdr-mask) center / contain no-repeat; mask: var(--hdr-mask) center / contain no-repeat;
}
#site-header [data-sound-toggle][aria-pressed="true"] .header__glyph--sound-off,
#site-header [data-sound-toggle][aria-pressed="false"] .header__glyph--sound-on { display: none; }
/* own sound icon: muted = struck through */
#site-header .header__icon--custom[aria-pressed="false"]::after {
    content: ""; position: absolute; left: 8%; right: 8%; top: 50%; height: 2px; border-radius: 1px;
    background: currentColor; transform: rotate(-45deg);
}
#site-header .header__count {
    position: absolute; top: -6px; right: -9px; min-width: 18px; height: 18px; padding: 0 5px;
    border-radius: 999px; background: var(--hdr-badge-bg, #ffb500); color: var(--hdr-badge, #18171a);
    font: 700 11px/18px "Poppins", "Lato", sans-serif; text-align: center;
}
#site-header .header__count[hidden] { display: none; }
#site-header .header__count.is-bump { animation: count-bump 600ms ease; }
@keyframes count-bump { 30% { transform: scale(1.35); } }

/* search: the magnifier opens into a field over the free space before it (header-menus.js sets
   --search-width up to the start of that free space), slowly and smoothly */
#site-header .header-search { position: relative; flex: none; width: var(--hdr-icon-size, 28px); height: var(--hdr-icon-size, 28px); }
#site-header .header-search__pill {
    position: absolute; top: 50%; right: -6px; z-index: 5; display: flex; align-items: center; justify-content: flex-end;
    width: calc(var(--hdr-icon-size, 28px) + 12px); height: 40px; box-sizing: border-box; overflow: hidden; translate: 0 -50%;
    border: 1px solid transparent; border-radius: 20px; background: transparent;
    transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.45s ease, box-shadow 0.45s ease, background-color 0.45s ease;
}
#site-header .header-search[data-grow="right"] .header-search__pill { right: auto; left: -6px; flex-direction: row-reverse; }
#site-header .header-search.is-active .header-search__pill {
    width: var(--search-width, 280px); border-color: color-mix(in srgb, var(--hdr-pill, #469a58) 70%, transparent); background: var(--hdr-bg, #18171a);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--hdr-pill, #469a58) 15%, transparent), 0 8px 24px rgb(0 0 0 / 0.35);
}
#site-header .header-search__input {
    flex: 1 1 auto; width: 0; min-width: 0; height: 100%; padding: 0; border: 0; outline: none; background: transparent;
    color: #fff; font: 15px/1 "Lato", sans-serif; opacity: 0;
    transition: padding 0.6s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.25s ease;
}
#site-header .header-search.is-active .header-search__input { padding: 0 4px 0 16px; opacity: 1; transition-delay: 0s, 0.18s; }
#site-header .header-search[data-grow="right"].is-active .header-search__input { padding: 0 16px 0 4px; }
#site-header .header-search__input::placeholder { color: rgb(255 255 255 / 0.45); }
#site-header .header-search__input::-webkit-search-cancel-button { display: none; }
#site-header .header-search__btn { flex: none; width: 38px; height: 38px; }
#site-header .header-search__btn .header__sprite { width: calc(var(--hdr-icon-size, 28px) * 0.78); height: calc(var(--hdr-icon-size, 28px) * 0.78); }
#site-header .header-search__btn .header__mask { width: var(--hdr-icon-size, 28px); height: var(--hdr-icon-size, 28px); flex: none; }
#site-header .header-search.is-active .header-search__btn { color: var(--hdr-pill, #469a58); }

#site-header .header__user {
    display: flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 50%;
    background: none; cursor: pointer;
}

#site-header .header__burger { display: none; width: 40px; height: 40px; margin: 0; padding: 10px; border: 0; background: none; cursor: pointer; }
#site-header .header__burger span { display: block; height: 2px; margin: 4px 0; border-radius: 2px; background: #fff; transition: transform 0.2s ease, opacity 0.2s ease; }

/* Narrower desktops: the free-space text goes before it would be cut, then the gaps shrink; the
   phone layout (burger) starts at 1199px, where the member header no longer fits in one row. */
@media (max-width: 1600px) {
    #site-header .header__spacer .header__beta { display: none; }
}
@media (max-width: 1500px) {
    #site-header .header__links { gap: min(var(--hdr-menu-gap, 30px), 20px); }
    #site-header .header__inner { gap: min(var(--hdr-icon-gap, 30px), 20px); }
}
@media (max-width: 1366px) {
    #site-header .header__brand { margin-right: 0; }
    #site-header .header__links { gap: min(var(--hdr-menu-gap, 30px), 14px); }
    #site-header .header__inner { gap: min(var(--hdr-icon-gap, 30px), 14px); }
    #site-header .header__link { font-size: min(var(--hdr-menu-size, 16px), 15px); }
    #site-header .header__pill { padding: 0 12px; }
}
@media (max-width: 1199px) {
    :root { --header-h: 50px; }
    #site-header { height: 50px; }
    #site-header .header__inner { justify-content: space-between; }
    #site-header .header__brand { position: absolute; left: 50%; translate: -50% 0; margin: 0; }
    #site-header .header__brand img { max-height: 40px; max-width: 57px; }
    #site-header .header__burger { display: block; margin-left: -10px; }
    #site-header .header__nav:not([data-menu]) { display: flex; align-items: center; margin-left: auto; }
    #site-header .header__nav:not([data-menu]) .header__spacer { display: none; }
    #site-header .header__nav[data-menu] {
        position: fixed; inset: 50px 0 auto 0; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 16px;
        margin: 0; padding: 16px; background: var(--hdr-bg, #18171a); border-bottom: 1px solid rgb(255 255 255 / 0.1);
        transform: translateY(-8px); opacity: 0; visibility: hidden;
        transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
    }
    #site-header.is-open .header__nav[data-menu] {
        opacity: 1; transform: none; visibility: visible;
        max-height: calc(100vh - 50px); max-height: calc(100dvh - 50px); overflow-y: auto; overscroll-behavior: contain;
    }
    #site-header.is-open .header__burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
    #site-header.is-open .header__burger span:nth-child(2) { opacity: 0; }
    #site-header.is-open .header__burger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
    #site-header .header__nav[data-menu] .header__links { flex-direction: column; align-items: stretch; align-self: stretch; gap: 0; }
    #site-header .header__nav[data-menu] .header__link { padding: 10px 0; }
    #site-header .header__nav[data-menu] .header__link .icon { display: inline-block; width: 20px; height: 20px; }
    #site-header .header__nav[data-menu] .header__spacer { flex: none; height: auto; justify-content: flex-start; }
    #site-header .header__nav[data-menu] .header__spacer .header__beta { display: block; padding: 0; }
    #site-header .header__nav[data-menu] .header__spacer:empty { display: none; }
    /* the icons share one row in the panel */
    #site-header .header__nav[data-menu] { flex-flow: row wrap; align-items: center; column-gap: 22px; }
    #site-header .header__nav[data-menu] .header__links,
    #site-header .header__nav[data-menu] .header__spacer { flex-basis: 100%; }
}
@media (prefers-reduced-motion: reduce) {
    #site-header .header-search__pill, #site-header .header-search__input { transition: none; }
}

/* Installed web app (docs/front/pwa.md): room for the iPhone notch / home indicator. */
@media (display-mode: standalone) {
    #site-header { padding-top: env(safe-area-inset-top); height: calc(var(--hdr-h, 70px) + env(safe-area-inset-top)); }
}