/*
Theme Name:        AVN Networks
Theme URI:         https://www.alvarovelasco.net
Author:            AlvaroVelasco.Net SRL
Author URI:        https://www.alvarovelasco.net
Description:       Tema corporativo bilingue (ES/EN) para AVN Networks — ciberseguridad, infraestructura y soporte TI en Costa Rica. Compatible con Polylang, Contact Form 7, Yoast SEO y LiteSpeed Cache.
Version:           1.0.0
Requires at least: 6.0
Tested up to:      6.7
Requires PHP:      8.0
License:           Proprietary
License URI:       https://www.alvarovelasco.net
Text Domain:       avn-networks
Tags:              custom-colors, custom-logo, custom-menu, featured-images, full-width-template, rtl-language-support, two-columns, bilingual

Changelog:
1.0.0 - 2026-09-21 - Scaffold inicial desde avn-pure/avn-pure-child (S19)
*/

/* ============================================================
   VARIABLES CSS GLOBALES
   ============================================================ */
:root {
    /* Colores primarios */
    --avn-bg:           #060d1f;
    --avn-bg-card:      #0a1628;
    --avn-bg-card-2:    #0f1535;
    --avn-accent:       #00d9ff;
    --avn-accent-2:     #a855f7;
    --avn-accent-green: #00c864;
    --avn-text:         rgba(255,255,255,0.88);
    --avn-text-muted:   rgba(255,255,255,0.65);
    --avn-border:       rgba(0,217,255,0.18);

    /* Tipografia */
    --avn-font:         'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --avn-font-mono:    'JetBrains Mono', 'Courier New', monospace;

    /* Espaciado */
    --avn-radius:       12px;
    --avn-radius-sm:    8px;
    --avn-gap:          24px;
    --avn-max-w:        1280px;
    --avn-section-py:   80px;

    /* Sombras */
    --avn-shadow:       0 4px 24px rgba(0,0,0,0.4);
    --avn-glow:         0 0 20px rgba(0,217,255,0.15);

    /* Transiciones */
    --avn-transition:   0.25s ease;
}

/* ============================================================
   RESET Y BASE
   ============================================================ */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--avn-font);
    background-color: var(--avn-bg);
    color: var(--avn-text);
    line-height: 1.7;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
}

/* ============================================================
   TIPOGRAFIA
   ============================================================ */
h1, h2, h3, h4, h5, h6 {
    line-height: 1.25;
    font-weight: 700;
    color: #fff;
}

h1 { font-size: clamp(2rem, 5vw, 3.5rem); }
h2 { font-size: clamp(1.5rem, 3.5vw, 2.5rem); }
h3 { font-size: clamp(1.15rem, 2vw, 1.5rem); }
h4 { font-size: 1.125rem; }
h5 { font-size: 1rem; }
h6 { font-size: 0.875rem; }

p { margin-bottom: 1rem; }
p:last-child { margin-bottom: 0; }

a {
    color: var(--avn-accent);
    text-decoration: none;
    transition: color var(--avn-transition), opacity var(--avn-transition);
}
a:hover { opacity: 0.8; }
a:focus-visible {
    outline: 2px solid var(--avn-accent);
    outline-offset: 3px;
    border-radius: 3px;
}

ul, ol { padding-left: 1.5rem; }
li { margin-bottom: 0.4rem; }

img, svg {
    max-width: 100%;
    height: auto;
    display: block;
}

/* ============================================================
   LAYOUT UTILITARIOS
   ============================================================ */
.container {
    width: 100%;
    max-width: var(--avn-max-w);
    margin: 0 auto;
    padding: 0 24px;
}

.section-pad { padding: var(--avn-section-py) 0; }

.text-center { text-align: center; }
.text-accent  { color: var(--avn-accent); }

.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

/* ============================================================
   BOTONES GLOBALES
   ============================================================ */
.btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 28px;
    background: linear-gradient(135deg, var(--avn-accent), #0099cc);
    color: #000;
    font-weight: 700;
    font-size: 0.95rem;
    border-radius: var(--avn-radius-sm);
    border: none;
    cursor: pointer;
    text-decoration: none;
    transition: transform var(--avn-transition), box-shadow var(--avn-transition);
}
.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,217,255,0.35);
    opacity: 1;
    color: #000;
}

.btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 28px;
    border: 2px solid var(--avn-accent);
    color: var(--avn-accent);
    font-weight: 600;
    font-size: 0.95rem;
    border-radius: var(--avn-radius-sm);
    background: transparent;
    cursor: pointer;
    text-decoration: none;
    transition: background var(--avn-transition), color var(--avn-transition);
}
.btn-secondary:hover {
    background: rgba(0,217,255,0.1);
    opacity: 1;
    color: var(--avn-accent);
}

/* ============================================================
   CARDS GENERICAS
   ============================================================ */
.avn-card {
    background: var(--avn-bg-card);
    border: 1px solid var(--avn-border);
    border-radius: var(--avn-radius);
    padding: 28px 24px;
    transition: border-color var(--avn-transition), box-shadow var(--avn-transition);
}
.avn-card:hover {
    border-color: var(--avn-accent);
    box-shadow: var(--avn-glow);
}

/* ============================================================
   ACCESIBILIDAD — SKIP LINK
   ============================================================ */
.skip-link {
    position: absolute;
    top: -100%;
    left: 0;
    background: var(--avn-accent);
    color: #000;
    padding: 8px 16px;
    font-weight: 700;
    z-index: 9999;
    transition: top 0.2s;
}
.skip-link:focus { top: 0; }

/* ============================================================
   WORDPRESS CORE — CLASES REQUERIDAS
   ============================================================ */
.wp-caption { max-width: 100%; }
.wp-caption-text { font-size: 0.85rem; color: var(--avn-text-muted); text-align: center; }
.sticky { /* posts sticky */ }
.bypostauthor { /* author highlight */ }
.alignleft   { float: left; margin: 0 1.5rem 1rem 0; }
.alignright  { float: right; margin: 0 0 1rem 1.5rem; }
.aligncenter { display: block; margin: 0 auto 1rem; }
.alignwide   { max-width: calc(var(--avn-max-w) + 120px); margin: 0 auto; }
.alignfull   { max-width: 100%; }

/* Gutenberg block spacing */
.wp-block-group { margin-bottom: 1.5rem; }
.has-text-align-center { text-align: center; }
.has-text-align-right  { text-align: right; }

/* Screen reader text */
.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute !important;
    width: 1px;
    word-wrap: normal !important;
}

/* ============================================================
   RESPONSIVE — BREAKPOINTS GLOBALES
   ============================================================ */
@media (max-width: 1024px) {
    :root { --avn-section-py: 60px; }
    .container { padding: 0 20px; }
}

@media (max-width: 768px) {
    :root { --avn-section-py: 48px; }
    .container { padding: 0 16px; }
    .btn-primary, .btn-secondary { width: 100%; justify-content: center; }
}

@media (max-width: 480px) {
    :root { --avn-section-py: 36px; }
}