/* ═══════════════════════════════════════════════════════════
   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: 760px;
    --main-column-width: 820px;
    --sidebar-width: 320px;
    --layout-gap: 32px;

    /* 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 sin crear un nuevo containing block.
   overflow-x:clip (a diferencia de hidden) NO convierte html/body
   en containing block para position:absolute, por lo que el
   mega-menu puede usar left:0;right:0 sin problemas. */
html {
    overflow-x: clip;
}
body {
    max-width: 100vw;
    overflow-x: clip;
}

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

/* RCAD stable layout: final override for articles, widgets and AdSense. */
:root {
    --site-width: 1200px;
    --site-width-rem: 75rem;
    --content-width: 760px;
    --main-column-width: 820px;
    --sidebar-width: 320px;
    --layout-gap: 32px;
}

body .container,
body #content-wrapper {
    width: min(var(--site-width), calc(100vw - (var(--site-padding) * 2))) !important;
    max-width: var(--site-width) !important;
}

body.single #content-wrapper,
body.archive #content-wrapper,
body.search #content-wrapper {
    gap: var(--layout-gap) !important;
}

.rcad-home-outer {
    gap: var(--layout-gap) !important;
}

.rcad-home-sidebar {
    width: var(--sidebar-width) !important;
    max-width: var(--sidebar-width) !important;
    flex: 0 0 var(--sidebar-width) !important;
}

body.single #content-wrapper.flex,
body.archive #content-wrapper.flex,
body.search #content-wrapper.flex,
body.single .site-content,
body.archive .site-content,
body.search .site-content {
    display: flex;
    align-items: flex-start;
}

body.single main,
body.single .site-main,
body.single #primary,
body.single .content-area,
body.archive main,
body.archive .site-main,
body.archive #primary,
body.archive .content-area,
body.search main,
body.search .site-main,
body.search #primary,
body.search .content-area {
    min-width: 0;
    flex: 1 1 var(--main-column-width);
}

body.single aside,
body.single .sidebar,
body.single #secondary,
body.single .widget-area,
body.archive aside,
body.archive .sidebar,
body.archive #secondary,
body.archive .widget-area,
body.search aside,
body.search .sidebar,
body.search #secondary,
body.search .widget-area {
    width: var(--sidebar-width) !important;
    max-width: var(--sidebar-width) !important;
    flex: 0 0 var(--sidebar-width) !important;
    min-width: 0;
}

body.single .entry-content > p,
body.single .entry-content > h1,
body.single .entry-content > h2,
body.single .entry-content > h3,
body.single .entry-content > h4,
body.single .entry-content > h5,
body.single .entry-content > h6,
body.single .entry-content > ul,
body.single .entry-content > ol,
body.single .entry-content > blockquote,
body.single .entry-content > dl,
body.single .entry-content > figure:not(.wp-block-image),
body.single .entry-content > .wp-block-separator,
body.single .entry-content > .wp-block-quote,
body.single .entry-content > .wp-block-list,
body.single .entry-content > .wp-block-paragraph {
    max-width: var(--content-width) !important;
}

body.single .entry-content > .rcad-ad-inline,
body.single .entry-content > .rcad-ad-article,
body.single .entry-content > .rcad-download-block,
body.single .entry-content > .wp-block-buttons,
body.single .entry-content > .wp-block-group,
body.single .entry-content > .wp-block-table,
body.single .entry-content > .wp-block-image,
body.single .entry-content > .sep-detalles-archivo,
body.single .entry-content > .rcad-file-specs,
body.single .entry-content > .banner,
body.single .entry-content > ins.adsbygoogle {
    width: 100%;
    max-width: 100% !important;
}

body.single .entry-content iframe,
body.single .entry-content img,
body.single .entry-content video,
body.single aside iframe,
body.single aside img,
body.single .widget-area iframe,
body.single .widget-area img,
body.archive aside iframe,
body.archive aside img,
body.search aside iframe,
body.search aside img {
    max-width: 100% !important;
}

@media (max-width: 991px) {
    .rcad-home-sidebar {
        width: 100% !important;
        max-width: 100% !important;
        flex-basis: auto !important;
    }

    body.single #content-wrapper.flex,
    body.archive #content-wrapper.flex,
    body.search #content-wrapper.flex,
    body.single .site-content,
    body.archive .site-content,
    body.search .site-content {
        display: block !important;
    }

    body.single aside,
    body.single .sidebar,
    body.single #secondary,
    body.single .widget-area,
    body.archive aside,
    body.archive .sidebar,
    body.archive #secondary,
    body.archive .widget-area,
    body.search aside,
    body.search .sidebar,
    body.search #secondary,
    body.search .widget-area {
        width: 100% !important;
        max-width: 100% !important;
        flex-basis: auto !important;
        margin-top: 24px;
    }
}