/*
 * Global CSS — WeAreInvictus210
 * Inspirado en tftactics.gg — dark navy, superficies azul-gris, Inter
 *
 * REGLA: este archivo NO hardcodea colores.
 * Todos los valores vienen de theme.json → editables en el Editor visual.
 */

/* =============================================================================
   Design tokens
   ============================================================================= */
:root {
    /* Safe area insets — available globally, 0px on non-notched devices */
    --inv-sab: env(safe-area-inset-bottom, 0px);

    /* Colores generales */
    --inv-bg:           var(--wp--preset--color--background);
    --inv-surface:      var(--wp--preset--color--surface);
    --inv-surface-alt:  var(--wp--preset--color--surface-alt);
    --inv-border:       var(--wp--preset--color--border);
    --inv-text:         var(--wp--preset--color--text);
    --inv-text-muted:   var(--wp--preset--color--text-muted);
    --inv-accent:       var(--wp--preset--color--accent-primary);
    --inv-accent2:      var(--wp--preset--color--accent-secondary);

    /* Tipografía */
    --inv-font-body:    var(--wp--preset--font-family--inter);
    --inv-font-display: var(--wp--preset--font-family--rajdhani);

    /* Tamaños */
    --inv-text-xs:  var(--wp--preset--font-size--xs);
    --inv-text-sm:  var(--wp--preset--font-size--sm);
    --inv-text-md:  var(--wp--preset--font-size--md);
    --inv-text-lg:  var(--wp--preset--font-size--lg);
    --inv-text-xl:  var(--wp--preset--font-size--xl);
    --inv-text-2xl: var(--wp--preset--font-size--2xl);
    --inv-text-3xl: var(--wp--preset--font-size--3xl);

    /* Espaciados */
    --inv-space-1:  var(--wp--preset--spacing--1);
    --inv-space-2:  var(--wp--preset--spacing--2);
    --inv-space-3:  var(--wp--preset--spacing--3);
    --inv-space-4:  var(--wp--preset--spacing--4);
    --inv-space-5:  var(--wp--preset--spacing--5);
    --inv-space-6:  var(--wp--preset--spacing--6);
    --inv-space-8:  var(--wp--preset--spacing--8);
    --inv-space-10: var(--wp--preset--spacing--10);
    --inv-space-12: var(--wp--preset--spacing--12);
    /* Utilidades */
    --inv-radius-sm: 4px;
    --inv-radius-md: 6px;
    --inv-radius-lg: 10px;
    --inv-transition: 0.15s ease;
}

/* =============================================================================
   Base
   ============================================================================= */
*,
*::before,
*::after { box-sizing: border-box; }

body {
    background-color: var(--inv-bg);
    color: var(--inv-text);
    font-family: var(--inv-font-body);
    font-size: var(--inv-text-md);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--inv-font-body);
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.2;
    color: var(--inv-text);
    margin-top: 0;
}

a {
    color: var(--inv-accent);
    text-decoration: none;
    transition: color var(--inv-transition);
}

a:hover { color: var(--inv-text); }

img { display: block; max-width: 100%; }

/* =============================================================================
   Site Header
   ============================================================================= */
#invictus-site-header {
    background-color: rgba(8, 13, 26, 0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

/* Logo personalizado: forzar altura coherente */
#invictus-site-header .custom-logo-link img {
    height: 36px;
    width: auto;
}

/* Nav menu */
.invictus-nav { display: none; }

@media (min-width: 640px) {
    .invictus-nav { display: block; }
}

.invictus-nav__list {
    display: flex;
    align-items: center;
    gap: 1.75rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.invictus-nav__list a {
    font-size: 0.7rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #c8cce8;
    text-decoration: none;
    transition: color 0.15s ease;
}

.invictus-nav__list a:hover,
.invictus-nav__list .current-menu-item > a {
    color: #ffffff;
}

/* =============================================================================
   Site Footer
   ============================================================================= */
#invictus-site-footer {
    background-color: #080d1a;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.invictus-footer__copy {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #6b7494;
    margin: 0;
}

/* ── Donation CTAs (global — used on homepage, footer, settings, shortcodes) ── */

.inv-donate-btn-cta {
    display: inline-flex;
    align-items: center;
    height: 40px;
    padding: 0 20px;
    border-radius: 8px;
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    background: #f59e0b;
    color: #000;
    text-decoration: none;
    transition: opacity 0.15s;
}
.inv-donate-btn-cta:hover { opacity: 0.8; color: #000; }

.inv-donate-inline-cta {
    font-family: 'Rajdhani', sans-serif;
    font-size: inherit;
    font-weight: 700;
    color: #f59e0b;
    text-decoration: none;
    transition: color 0.15s;
}
.inv-donate-inline-cta:hover { color: #fbbf24; }

.inv-donate-card-cta {
    background: rgba(245, 158, 11, 0.06);
    border: 1px solid rgba(245, 158, 11, 0.15);
    border-radius: 12px;
    padding: 1rem 1.25rem;
    text-align: center;
}
.inv-donate-card-cta__text { font-size: 0.8rem; color: #c8cce8; margin: 0 0 0.5rem; }
.inv-donate-card-cta__coins { display: block; font-family: 'Rajdhani', sans-serif; font-size: 0.85rem; font-weight: 700; color: #f59e0b; margin-bottom: 0.75rem; }
.inv-donate-card-cta__btn {
    display: inline-flex;
    align-items: center;
    height: 36px;
    padding: 0 20px;
    border-radius: 8px;
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    background: #f59e0b;
    color: #000;
    text-decoration: none;
    transition: opacity 0.15s;
}
.inv-donate-card-cta__btn:hover { opacity: 0.8; color: #000; }

.inv-donate-banner-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.5rem;
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.08), rgba(245, 158, 11, 0.02));
    border-radius: 12px;
}
.inv-donate-banner-cta__text { font-size: 0.82rem; color: #c8cce8; }
.inv-donate-banner-cta__btn {
    flex-shrink: 0;
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #f59e0b;
    text-decoration: none;
    transition: color 0.15s;
}
.inv-donate-banner-cta__btn:hover { color: #fbbf24; }

/* =============================================================================
   Mobile scroll-hide: when body has .inv-navs-hidden, all sticky sub-nav bars
   that sit at top: var(--inv-header-h) should slide up to top: 0 so they don't
   float in the middle after the header hides.
   ============================================================================= */
@media (max-width: 1024px) {
    .inv-heroes-tabs,
    .inv-updates-tabs,
    .inv-merge-tabs,
    .inv-home-tabs,
    .inv-store-tabs,
    .inv-settings-tabs,
    .inv-tavern-tabs,
    .inv-lineup-tabs {
        transition: top 0.3s ease;
    }
    .inv-navs-hidden .inv-heroes-tabs,
    .inv-navs-hidden .inv-updates-tabs,
    .inv-navs-hidden .inv-merge-tabs,
    .inv-navs-hidden .inv-home-tabs,
    .inv-navs-hidden .inv-store-tabs,
    .inv-navs-hidden .inv-settings-tabs,
    .inv-navs-hidden .inv-tavern-tabs,
    .inv-navs-hidden .inv-lineup-tabs {
        top: -60px !important;
    }
}

.inv-coin-icon {
	display: inline-block;
	vertical-align: middle;
	object-fit: contain;
	flex-shrink: 0;
}

/* =============================================================================
   Safe area — bottom (home indicator on iPhone X+, Android gesture bar)
   viewport-fit=cover is set globally so env() values are non-zero on notched
   devices in both browser and standalone/PWA mode.
   ============================================================================= */

/* Sidebar scrollable columns — last nav item must clear home indicator */
.inv-sidebar__nav,
.inv-sidebar__avatars {
    padding-bottom: calc(8px + var(--inv-sab));
}

.inv-home-right {
    padding-bottom: var(--inv-sab);
}

/* Site footer — push above home indicator */
#invictus-site-footer {
    padding-bottom: var(--inv-sab);
}

/* Chat widget fullscreen — input bar clears home indicator */
.inv-chat-widget--fullscreen .inv-chat-widget__input {
    padding-bottom: calc(10px + var(--inv-sab));
}

/* Chat widget fullscreen — header clears notch */
.inv-chat-widget--fullscreen .inv-chat-widget__header {
    padding-top: calc(14px + env(safe-area-inset-top, 0px));
}

/* ── Global elegant scrollbars (Siege Night palette) ────────────────────── */
* {
    scrollbar-width: thin;
    scrollbar-color: rgba(245,158,11,0.35) transparent;
}
*::-webkit-scrollbar {
    width: 4px;
    height: 4px;
}
*::-webkit-scrollbar-track {
    background: transparent;
}
*::-webkit-scrollbar-thumb {
    background: rgba(245,158,11,0.35);
    border-radius: 99px;
}
*::-webkit-scrollbar-thumb:hover {
    background: rgba(245,158,11,0.65);
}
*::-webkit-scrollbar-corner {
    background: transparent;
}