/* DreamTranny site header (new design). Loaded after main.css. */

:root {
    --accent: #ff00ae;
    --accent-hover: #e31ca3;
    --text: #454545;
    --header-bg: #fff;
    --border: #d8d8d8;
    --overlay: rgba(0, 0, 0, 0.29);
    --placeholder: #b7b7b7;
    --fs-nav: clamp(15px, 1.31vw, 22px);
    --fs-join: clamp(14px, 1.19vw, 19px);
}

body.menu-open {
    overflow: hidden;
}

.header .c-pink {
    color: var(--accent);
}

/* Secondary nav words (Videos, Models, Home) — dark grey per mockup */
.header .c-blue {
    color: var(--text);
}

header.header {
    position: sticky;
    top: 0;
    z-index: 999;
    background: var(--header-bg);
    background-image: none;
    filter: none;
    padding: 0;
    font-family: "Gilroy", sans-serif;
    width: 100%;
}

.header__inner {
    position: relative;
    z-index: 3;
    background: var(--header-bg);
    display: flex;
    align-items: center;
    gap: clamp(16px, 2vw, 40px);
    padding: clamp(10px, 1.2vw, 22px) clamp(16px, 3vw, 64px);
}

.header__logo img {
    height: clamp(34px, 3vw, 54px);
    width: auto;
    max-width: none;
    margin: 0;
}

.nav {
    display: flex;
    align-items: center;
    gap: clamp(14px, 1.6vw, 32px);
    transition: opacity 0.25s ease, visibility 0.25s ease;
}

header.header.search-open .nav {
    opacity: 0;
    visibility: hidden;
}

.nav__list {
    display: flex;
    align-items: center;
    gap: clamp(14px, 1.8vw, 34px);
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav__link {
    font-weight: 200;
    font-size: var(--fs-nav);
    line-height: 1;
    letter-spacing: -0.03em;
    white-space: nowrap;
    text-decoration: none;
}

.nav__cat {
    display: flex;
    align-items: center;
    gap: 8px;
}

.nav__search {
    display: inline-flex;
    align-items: center;
    border: none;
    background: none;
    padding: 0 0 0 5px;
    cursor: pointer;
    font-family: inherit;
    appearance: none;
    -webkit-appearance: none;
    line-height: 0;
}

.nav__search img {
    width: clamp(20px, 1.5vw, 28px);
    height: auto;
    filter: brightness(0) saturate(100%) invert(18%) sepia(99%) saturate(7452%) hue-rotate(312deg)
        brightness(103%) contrast(105%);
}

.header__actions {
    display: flex;
    align-items: center;
    gap: clamp(14px, 1.6vw, 32px);
    margin-left: auto;
}

.header__login {
    color: var(--text);
    font-weight: 300;
    font-size: var(--fs-nav);
    line-height: 1;
    letter-spacing: -0.03em;
    text-decoration: none;
}

.header__login:hover,
.header__login:active,
.header__login:focus {
    color: var(--accent);
}

.header__actions .btn-join {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--accent);
    color: #fff;
    font-weight: 500;
    font-size: var(--fs-join);
    line-height: 1;
    letter-spacing: -0.04em;
    border-radius: 5px;
    padding: clamp(10px, 1.1vw, 18px) clamp(18px, 2vw, 36px);
    white-space: nowrap;
    transition: background-color 0.2s ease;
    text-decoration: none;
    box-shadow: 0.314px 2.984px 2px rgba(0, 0, 0, 0.27);
    border: none;
}

.header__actions .btn-join:hover,
.header__actions .btn-join:active,
.header__actions .btn-join:focus {
    background: var(--accent-hover);
    color: #fff;
}

.header__center {
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
    min-width: 0;
}

.header__search {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(12px, 1.2vw, 22px);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
}

header.header.search-open .header__search {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.header__search-form {
    display: flex;
    align-items: center;
    gap: 8px;
    width: min(380px, 100%);
    padding: clamp(8px, 0.7vw, 12px) clamp(12px, 1vw, 16px);
    border: 1px solid var(--accent);
    border-radius: 10px;
    background: #fff;
    transform: scale(0.97);
    opacity: 0;
    transition: transform 0.3s ease 0.05s, opacity 0.3s ease 0.05s;
}

header.header.search-open .header__search-form {
    transform: scale(1);
    opacity: 1;
}

.header__search-submit {
    display: inline-flex;
    flex-shrink: 0;
    line-height: 0;
    border: none;
    background: none;
    padding: 0;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
}

.header__search-submit img {
    width: clamp(18px, 1.4vw, 22px);
    height: auto;
    filter: brightness(0) saturate(100%) invert(18%) sepia(99%) saturate(7452%) hue-rotate(312deg)
        brightness(103%) contrast(105%);
}

.header__search-input {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    background: none;
    font-family: inherit;
    font-weight: 300;
    font-size: var(--fs-nav);
    line-height: 1;
    letter-spacing: -0.03em;
    color: #333;
}

.header__search-input::placeholder {
    color: var(--placeholder);
}

.header__search-close {
    display: inline-flex;
    flex-shrink: 0;
    line-height: 0;
    color: var(--accent);
    opacity: 0.85;
    transition: opacity 0.2s ease;
    border: none;
    background: none;
    padding: 0;
    cursor: pointer;
}

.header__search-close:hover {
    opacity: 1;
}

.header__search-close svg {
    width: clamp(20px, 1.6vw, 26px);
    height: auto;
}

.header__burger {
    display: none;
    border: none;
    background: none;
    padding: 0;
    cursor: pointer;
    font-family: inherit;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
}

.header__burger img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.menu,
.menu-overlay {
    display: none;
}

.menu-overlay {
    position: fixed;
    inset: 0;
    z-index: 1;
    background: var(--overlay);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.menu-overlay.is-open {
    opacity: 1;
    visibility: visible;
}

.menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 2;
    width: min(82vw, 440px);
    background: #fff;
    padding-bottom: 8px;
    border-bottom-right-radius: 28px;
    box-shadow: 0 16px 28px rgba(0, 0, 0, 0.12);
    transform: translateY(-100%);
    visibility: hidden;
    transition: transform 0.3s ease, visibility 0.3s ease;
}

.menu.is-open {
    transform: translateY(0);
    visibility: visible;
}

.menu__list {
    padding: 8px 0;
    list-style: none;
    margin: 0;
}

.menu__link {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 13px 22px;
    color: var(--text);
    font-weight: 300;
    font-size: clamp(18px, 4.8vw, 22px);
    line-height: 1;
    letter-spacing: -0.02em;
    text-decoration: none;
}

.menu__icon {
    width: 20px;
    height: auto;
    flex-shrink: 0;
    filter: brightness(0) saturate(100%) invert(18%) sepia(99%) saturate(7452%) hue-rotate(312deg)
        brightness(103%) contrast(105%);
}

.menu__search {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 12px 22px 18px;
    padding: 12px 16px;
    border: 1px solid var(--border);
    border-radius: 10px;
}

.menu__search-input {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    background: none;
    font-family: inherit;
    font-weight: 300;
    font-size: clamp(16px, 4.2vw, 20px);
    line-height: 1;
    letter-spacing: -0.03em;
    color: #333;
}

.menu__search-input::placeholder {
    color: var(--placeholder);
}

.menu__search-btn {
    display: inline-flex;
    align-items: center;
    border: none;
    background: none;
    padding: 0;
    cursor: pointer;
    line-height: 0;
    appearance: none;
    -webkit-appearance: none;
}

.menu__search-btn img {
    width: 22px;
    height: auto;
    filter: brightness(0) saturate(100%) invert(28%) sepia(0%) saturate(0%) hue-rotate(0deg)
        brightness(95%) contrast(90%);
}

@media (max-width: 992px) {
    header.header .nav,
    header.header .header__login {
        display: none;
    }

    header.header .header__burger {
        display: inline-flex;
        width: clamp(22px, 6vw, 26px);
        height: clamp(22px, 6vw, 26px);
    }

    header.header .header__logo img {
        height: 30px;
        width: auto;
    }

    header.header .menu,
    header.header .menu-overlay {
        display: block;
    }

    header.header .header__actions {
        display: flex;
        width: auto;
        margin-top: 0;
        margin-left: auto;
        text-align: inherit;
        padding-left: 0;
    }

    header.header .header__actions .btn-join {
        padding: clamp(8px, 2vw, 12px) clamp(12px, 3vw, 18px);
        font-size: clamp(12px, 3.5vw, 16px);
    }
}