/* Header Designer Frontend Styles */

.jotun-custom-header {
    position: relative;
    width: 100%;
    z-index: 999;
    display: flex;
    align-items: center;
}

.jotun-header-container {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 30px;
}

/* Layout Types */
.jotun-custom-header[data-layout="free"] {
    display: block;
}
.jotun-custom-header[data-layout="free"] .jotun-header-container {
    position: relative;
    display: block;
    height: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
}

.jotun-custom-header[data-layout="split"] .jotun-header-container {
    justify-content: space-between;
}

.jotun-custom-header[data-layout="centered"] .jotun-header-container {
    justify-content: center;
    flex-direction: column;
    gap: 15px;
}

.jotun-custom-header[data-layout="stacked"] .jotun-header-container {
    flex-direction: column;
    gap: 15px;
}

/* Logo */
.jotun-header-logo {
    flex-shrink: 0;
}

.logo-link {
    display: block;
    line-height: 0;
}

.logo-image {
    display: block;
    max-width: 100%;
    height: auto;
}

/* Title */
.jotun-header-title .site-title {
    margin: 0;
    line-height: 1.2;
}

/* Navigation */
.jotun-header-nav {
    flex: 1;
    position: relative;
}

.nav-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 10px;
    position: relative;
    width: 40px;
    height: 40px;
}

.nav-toggle-icon {
    display: block;
    width: 25px;
    height: 2px;
    background: currentColor;
    position: relative;
    transition: all 0.3s ease;
}

.nav-toggle-icon::before,
.nav-toggle-icon::after {
    content: '';
    display: block;
    width: 25px;
    height: 2px;
    background: currentColor;
    position: absolute;
    transition: all 0.3s ease;
}

.nav-toggle-icon::before {
    top: -8px;
}

.nav-toggle-icon::after {
    bottom: -8px;
}

.nav-toggle[aria-expanded="true"] .nav-toggle-icon {
    background: transparent;
}

.nav-toggle[aria-expanded="true"] .nav-toggle-icon::before {
    top: 0;
    transform: rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle-icon::after {
    bottom: 0;
    transform: rotate(-45deg);
}

.nav-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 5px;
    align-items: center;
}

.nav-item {
    position: relative;
}

.nav-link,
.nav-label {
    display: block;
    padding: 10px 15px;
    text-decoration: none;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.nav-link:hover {
    opacity: 0.8;
}

/* Caret indicator for items with a submenu */
.nav-caret {
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 8px;
    vertical-align: middle;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid currentColor;
    opacity: 0.85;
    transition: transform 0.25s ease;
    font-size: 0;
    line-height: 0;
}
.nav-caret::before { content: ''; }
.nav-item.has-children:hover > .nav-link .nav-caret,
.nav-item.has-children:hover > .nav-label .nav-caret {
    transform: rotate(180deg);
}

/* Submenus */
.nav-submenu {
    list-style: none;
    margin: 0;
    padding: 6px 0;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 220px;
    background: var(--bg-card, #ffffff);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
    border-radius: 6px;
    border: 1px solid var(--border-card, rgba(0, 0, 0, 0.06));
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
    z-index: 1000;
}

.nav-item:hover > .nav-submenu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.nav-submenu .nav-item {
    display: block;
}

.nav-submenu .nav-link,
.nav-submenu .nav-label {
    display: block;
    padding: 10px 18px;
    color: var(--text-primary, #1f1f2e);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    border-bottom: none;
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.nav-submenu .nav-link:hover {
    background: var(--bg-page, #f4f5f9);
    color: var(--accent-from, #0073aa);
    opacity: 1;
}

/* Nested submenus */
.nav-submenu .nav-submenu {
    top: 0;
    left: 100%;
}

/* Login Button */
.jotun-header-login {
    flex-shrink: 0;
}

.jotun-header-login .discord-login-button {
    display: inline-flex;
    align-items: center;
    background-color: #7289DA;
    color: #fff;
    padding: 8px 16px;
    border-radius: 4px;
    font-family: 'Norse', 'Cinzel Decorative', sans-serif;
    font-size: 14px;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.2s ease, opacity 0.2s ease;
    cursor: pointer;
    /* Override legacy header-banner.css absolute positioning */
    position: relative;
    right: auto;
    bottom: auto;
    opacity: 1;
    visibility: visible;
}

.jotun-header-login .discord-login-button:hover {
    background-color: #5b6eae;
    color: #fff;
}

/* Mobile Styles */
@media (max-width: 768px) {
    .nav-toggle {
        display: block;
    }
    
    .nav-mobile-hidden {
        display: none !important;
    }
    
    .nav-menu.nav-mobile-visible {
        display: flex;
        flex-direction: column;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--bg-card, white);
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        padding: 20px;
        gap: 0;
    }

    .nav-menu.nav-mobile-visible .nav-item {
        width: 100%;
        border-bottom: 1px solid var(--border-card, #f0f0f0);
    }
    
    .nav-menu.nav-mobile-visible .nav-link {
        padding: 15px 10px;
    }
    
    .nav-menu.nav-mobile-visible .nav-submenu {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        padding-left: 20px;
    }
}

/* Color Variables — inherit from Style Studio tokens when not overridden by
   the Header Designer's custom palette (style_mode === 'custom' path in PHP).
   Hardcoded color values are preserved as last-resort fallbacks so the header
   still renders safely before Style Studio CSS loads. */
:root {
    --jotun-primary-color:   var(--accent-from,  #0073aa);
    --jotun-secondary-color: var(--accent-to,    #005a87);
    --jotun-accent-color:    var(--accent-from,  #00a0d2);
    --jotun-text-color:      var(--header-text,  #ffffff);
}

/* ================================================
   Scroll Banner Style
   ================================================ */

.jotun-sb-wrapper {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    z-index: 99990;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    background-size: cover;
    background-repeat: no-repeat;
    transition: top 0.2s ease-out;
    /* background-position set via inline styles from PHP config */
}

/* Dark overlay — colour and opacity set dynamically via PHP inline style */
.jotun-sb-wrapper::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    pointer-events: none;
    z-index: 0;
}

/* Nav bar and content must sit above the overlay */
.jotun-sb-nav-bar {
    position: relative;
    z-index: 1;
}

.jotun-sb-placeholder {
    display: block;
    width: 100%;
}

/* Nav bar pinned inside the banner — bottom offset controlled via inline styles from sb_nav_vertical_offset config */
.jotun-sb-nav-bar {
    position: relative;
    bottom: 15px; /* fallback; overridden by inline style from PHP */
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 0 20px;
    width: 100%;
    box-sizing: border-box;
    z-index: 1;
}

/* In compact/scrolled state, fill the visible height so vertical alignment works */
.jotun-sb-wrapper.header-scrolled .jotun-sb-nav-bar,
.jotun-sb-wrapper.jotun-mini-banner .jotun-sb-nav-bar {
    position: absolute;
    left: 0;
    right: 0;
    height: var(--sb-visible-height, 90px);
    /* bottom offset applied via inline styles from sb_nav_vertical_offset config */
}

/* Nav fills remaining space; justify-content set via inline styles from sb_nav_horiz_align config */
.jotun-sb-nav-bar .jotun-header-nav {
    flex: 1;
    display: flex;
}

/* When nav is centered, the wrapper needs to center all children */
.jotun-sb-nav-bar.nav-centered {
    justify-content: center;
}
.jotun-sb-nav-bar.nav-centered .jotun-header-nav {
    flex: none;
}
/* Pin logo and login to edges so nav links are truly page-centered */
.jotun-sb-nav-bar.nav-centered .jotun-sb-small-logo-link {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
}
.jotun-sb-nav-bar.nav-centered .jotun-header-login {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
}

/* Logo link wrapper — hidden/shown with the logo, remains clickable */
.jotun-sb-small-logo-link {
    display: none;
    flex-shrink: 0;
    line-height: 0;
    opacity: 0;
    transition: opacity 0.3s ease;
}
.jotun-sb-wrapper.header-scrolled .jotun-sb-small-logo-link {
    display: block;
    opacity: 1;
}

/* Small logo — hidden by default, fades in on scroll */
.jotun-sb-small-logo {
    display: block;
    flex-shrink: 0;
    height: 40px; /* fallback; overridden by inline style from config */
    width: auto;
    filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.5));
}

.jotun-sb-wrapper.header-scrolled .jotun-sb-small-logo {
    max-height: calc(100% - 10px);
}

/* Centred site title — positioned relative to the wrapper, independent of nav bar */
.jotun-sb-site-title {
    position: absolute;
    left: 50%;
    bottom: 15px;  /* fallback; overridden by inline style from PHP */
    transform: translateX(-50%);
    z-index: 2;
    font-family: 'Norse', 'Cinzel Decorative', 'Times New Roman', serif;
    font-size: 25px;
    font-weight: 700;
    color: var(--text-muted, #9e9e9e);
    letter-spacing: 5px;
    text-transform: uppercase;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease, top 0.3s ease, bottom 0.3s ease;
    pointer-events: none;
}

/* Full banner: title visible if PHP inline style sets opacity/visibility */

/* Compact / scrolled: always visible */
.jotun-sb-wrapper.header-scrolled .jotun-sb-site-title {
    opacity: 1;
    visibility: visible;
}

/* Force white nav text inside the scroll banner — overrides any theme colour.
   Uses CSS variables so the Colors & Styling tab (custom palette) can override. */
.jotun-sb-nav-bar .nav-link,
.jotun-sb-nav-bar .nav-label {
    color: var(--jotun-nav-text, #ffffff) !important;
    text-shadow: var(--jotun-nav-text-shadow, 0 1px 3px rgba(0, 0, 0, 0.6));
}

/* Submenu items live inside the nav-bar but on a white panel — restore dark legible text. */
.jotun-sb-nav-bar .nav-submenu .nav-link,
.jotun-sb-nav-bar .nav-submenu .nav-label,
.jotun-header-nav .nav-submenu .nav-link,
.jotun-header-nav .nav-submenu .nav-label {
    color: var(--jotun-submenu-text, #1f1f2e) !important;
    text-shadow: none !important;
}
.jotun-sb-nav-bar .nav-submenu .nav-link:hover,
.jotun-header-nav .nav-submenu .nav-link:hover {
    color: var(--jotun-primary-color, #0073aa) !important;
}

.jotun-sb-nav-bar .nav-link:hover,
.jotun-sb-nav-bar .nav-label:hover {
    color: var(--jotun-nav-hover, rgba(255, 255, 255, 0.75)) !important;
    opacity: 1;
}

/* Disc login/profile button sizing inside scroll banner */
.jotun-sb-nav-bar .discord-login-button {
    font-size: 14px;
    /* Override legacy header-banner.css absolute positioning */
    position: relative;
    right: auto;
    bottom: auto;
    opacity: 1;
    visibility: visible;
}