/* ═══════════════════════════════════════════════════════════
   RCAD PRO — layout.css v2
   Sistema unificado de anchos para el sitio.
   Lee --site-width del CSS inline inyectado por functions.php,
   que a su vez lee los settings "Ancho de contenedor" y
   "Relación Contenido-Barra Lateral" del Customizer de Orbital.
   Así el slider de Orbital sigue funcionando para TODO el sitio.
   Fallback: si algo falla, 1200px.
   --content-width se mantiene fijo (es una decisión de UX de
   lectura, no algo que el usuario deba tocar desde el Customizer). */

:root {
    /* Fallback si PHP no inyecta la variable */
    --site-width: 1200px;

    /* ANCHO DE LECTURA (.entry-content > p, h2, ul…).
       740px = 70-80 caracteres por línea = óptimo AdSense. */
    --content-width: 740px;

    /* Padding lateral del contenedor (evita que el contenido
       toque los bordes del viewport en resoluciones justas). */
    --site-padding: 20px;
}

/* ═══════════════════════════════════════════════════════════
   1. CONTENEDORES GENÉRICOS DEL PADRE ORBITAL
   ═══════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════
   1. CONTENEDORES GENÉRICOS DEL PADRE ORBITAL
   ───────────────────────────────────────────────────────────
   Orbital aplica width:Xrem dinámico a .container desde el
   Customizer ("Ancho de contenedor"). NO tocamos width ni
   padding — solo aseguramos box-sizing y centrado.
   ═══════════════════════════════════════════════════════════ */
body .container,
body .container-fluid,
body #content-wrapper,
body .site-content,
body .content-area {
    box-sizing: border-box;
    margin-left: auto;
    margin-right: auto;
}

/* Site main: solo centrado, sin max-width (para que elementos
   hijos full-width como el mega-menú puedan extenderse). */
body .site-main,
body #content {
    width: 100%;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}

/* ═══════════════════════════════════════════════════════════
   2. HEADER DEL TEMA PADRE
   ───────────────────────────────────────────────────────────
   Orbital gestiona el header con `.site-header .container`
   que respeta el slider "Ancho de contenedor". NO lo pisamos.
   Solo aseguramos que el header nunca desborde el viewport.
   ═══════════════════════════════════════════════════════════ */
body .site-header,
body #masthead {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* ═══════════════════════════════════════════════════════════
   3. TOPBAR RCAD
   ═══════════════════════════════════════════════════════════ */
.rcad-topbar {
    width: 100%;
    box-sizing: border-box;
}
.rcad-topbar__inner,
.rcad-topbar .container,
.rcad-topbar > div:first-child {
    max-width: var(--site-width);
    margin: 0 auto;
    padding-left: var(--site-padding);
    padding-right: var(--site-padding);
    box-sizing: border-box;
}

/* ═══════════════════════════════════════════════════════════
   4. NAVEGACIÓN PRINCIPAL + MEGA MENÚ
   ───────────────────────────────────────────────────────────
   El mega-menú v7 usa el primary-menu nativo de Orbital
   y se gestiona desde mega-menu-v7.css. No hay reglas aquí.
   ═══════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════
   5. HOME — HERO + SECCIONES
   ═══════════════════════════════════════════════════════════ */
.rcad-home-outer {
    max-width: var(--site-width) !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
}
.rcad-hero__inner {
    max-width: var(--site-width);
    margin: 0 auto;
}

/* ═══════════════════════════════════════════════════════════
   6. FOOTER
   ═══════════════════════════════════════════════════════════ */
.rcad-footer,
.site-footer {
    width: 100%;
    box-sizing: border-box;
}
.rcad-footer__inner,
.rcad-footer .container,
.site-footer > .container,
.site-footer .footer-wrap {
    max-width: var(--site-width);
    margin: 0 auto;
    padding-left: var(--site-padding);
    padding-right: var(--site-padding);
    box-sizing: border-box;
}

/* ═══════════════════════════════════════════════════════════
   7. ENTRY-CONTENT — ancho de lectura
   ───────────────────────────────────────────────────────────
   Los wrappers single/page usan .container del padre
   (ej. <div id="content-wrapper" class="container flex">),
   así que ya heredan el ancho dinámico del Customizer.
   Aquí solo aseguramos que el entry-content ocupe el 100%
   de su columna para que los banners AdSense aprovechen
   todo el espacio (el ancho de lectura 740px se aplica
   solo a hijos de texto desde global.css).
   ═══════════════════════════════════════════════════════════ */
.single .entry-content,
.page .entry-content {
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}

/* ═══════════════════════════════════════════════════════════
   8. MOBILE — sin overflow, sin padding excesivo
   ═══════════════════════════════════════════════════════════ */

/* Prevenir scroll horizontal en todo el sitio */
html, body {
    max-width: 100vw;
    overflow-x: hidden;
}

/* En tablet y móvil: el ancho del sitio es 100%, el padding
   lateral se reduce para aprovechar espacio. */
@media (max-width: 1260px) {
    :root {
        --site-padding: 16px;
    }
}

@media (max-width: 991px) {
    :root {
        --site-padding: 14px;
    }

    /* Forzar 100% en todos los contenedores en tablet/móvil */
    body .container,
    body #content-wrapper,
    body .site-content,
    body .content-area,
    body .site-header > .container,
    body .site-header .header-inner,
    body #masthead > .container,
    body .header-wrap,
    .rcad-topbar__inner,
    .rcad-footer__inner,
    .rcad-home-outer,
    .rcad-hero__inner,
    .single #content-wrapper,
    .page #content-wrapper {
        max-width: 100% !important;
        width: 100% !important;
    }
}

@media (max-width: 600px) {
    :root {
        --site-padding: 12px;
    }
}

@media (max-width: 480px) {
    :root {
        --site-padding: 10px;
    }
}

/* ═══════════════════════════════════════════════════════════
   9. SAFETY NETS — elementos frecuentemente rotos
   ═══════════════════════════════════════════════════════════ */

/* Imágenes y vídeos nunca desbordan */
img, video, iframe, embed, object {
    max-width: 100%;
    height: auto;
}

/* Tablas con scroll horizontal en móvil en lugar de romper layout */
@media (max-width: 768px) {
    .entry-content table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }
}

/* Elementos con transform 100vw (mega-menú, hero fullbleed)
   nunca deben generar scrollbar horizontal. Forzamos clip. */
body > *,
.site-main > *,
#content > * {
    max-width: 100vw;
}