/*
 * 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 {
    /* 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;
}

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;
}