/**
 * Royal Kids - Template Styles
 * 
 * Estilos para el template full-width de Royal Kids.
 * Diseñado para páginas de entradas y cumpleaños.
 * 
 * IMPORTANTE: Solo afecta al contenido principal (#rk-main-content),
 * NO al header ni footer del tema.
 */

/* ===========================================
   CONTENEDOR PRINCIPAL DE ROYAL KIDS
   Solo afecta al área de contenido, no header/footer
   =========================================== */

   #rk-main-content,
   .rk-main-content {
       width: 100%;
       min-height: 50vh;
       background: linear-gradient(180deg, #fef7f7 0%, #fff 100%);
       padding: 80px 0 0;
   }
   
   .rk-page-container {
       width: 100%;
       max-width: 100%;
       margin: 0 auto;
       padding: 30px 20px 50px;
   }
   
   .rk-page-article {
       background: transparent;
       box-shadow: none;
       border: none;
       margin: 0;
       padding: 0;
   }
   
   /* ===========================================
      HEADER DE PÁGINA (título del contenido)
      =========================================== */
   
   .rk-page-header {
       text-align: center;
       margin-bottom: 30px;
       padding: 0 15px;
   }
   
   .rk-page-title {
       font-size: 32px;
       font-weight: 700;
       color: #E31E24;
       margin: 0;
       line-height: 1.3;
   }
   
   /* ===========================================
      CONTENIDO
      =========================================== */
   
   .rk-page-content {
       width: 100%;
       max-width: 100%;
   }
   
   /* Centrar los calendarios de Royal Kids */
   .rk-page-content .rk-entries-container,
   .rk-page-content .rk-birthday-container {
       margin: 0 auto;
   }
   
   /* ===========================================
      OVERRIDES ESPECÍFICOS PARA EL ÁREA DE CONTENIDO
      Solo dentro de #rk-main-content
      =========================================== */
   
   /* Ocultar sidebar SOLO dentro del contenido principal */
   #rk-main-content ~ #secondary,
   #rk-main-content ~ .sidebar,
   #rk-main-content ~ aside.widget-area,
   .rk-fullwidth-page #primary ~ #secondary,
   .rk-fullwidth-page .content-area ~ .sidebar {
       display: none !important;
   }
   
   /* Ajustar contenedores del tema SOLO para el área de contenido */
   .rk-fullwidth-page #primary,
   .rk-fullwidth-page .content-area,
   .rk-fullwidth-page .site-main {
       width: 100% !important;
       max-width: 100% !important;
       float: none !important;
       margin: 0 !important;
   }
   
   /* Reset padding del contenedor de contenido */
   .rk-fullwidth-page .site-content > .container,
   .rk-fullwidth-page .site-content > .wrapper,
   .rk-fullwidth-page #content > .container {
       max-width: 100%;
       padding-left: 0;
       padding-right: 0;
   }
   
   /* ===========================================
      ESTILOS ESPECÍFICOS POR TIPO DE PÁGINA
      =========================================== */
   
   /* Página de Entradas */
   .rk-page-entries #rk-main-content,
   .rk-page-entries .rk-main-content {
       background: linear-gradient(180deg, #f0fff4 0%, #fff 100%);
   }
   
   /* Página de Cumpleaños */
   .rk-page-birthday #rk-main-content,
   .rk-page-birthday .rk-main-content {
       background: linear-gradient(180deg, #fff0f0 0%, #fff 100%);
   }
   
   /* ===========================================
      RESPONSIVE - MÓVIL BASE (< 576px)
      =========================================== */
   
   @media (max-width: 575px) {
       .rk-page-container {
           padding: 20px 15px 35px;
       }
       
       .rk-page-header {
           margin-bottom: 20px;
       }
       
       .rk-page-title {
           font-size: 24px;
       }
   }
   
   /* ===========================================
      RESPONSIVE - TABLET (>= 576px)
      =========================================== */
   
   @media (min-width: 576px) {
       .rk-page-container {
           padding: 30px 25px 50px;
       }
       
       .rk-page-title {
           font-size: 30px;
       }
   }
   
   /* ===========================================
      RESPONSIVE - DESKTOP (>= 768px)
      =========================================== */
   
   @media (min-width: 768px) {
       .rk-page-container {
           padding: 40px 30px 60px;
       }
       
       .rk-page-title {
           font-size: 34px;
       }
   }
   
   /* ===========================================
      RESPONSIVE - DESKTOP GRANDE (>= 992px)
      =========================================== */
   
   @media (min-width: 992px) {
       .rk-page-container {
           padding: 50px 40px 80px;
       }
       
       .rk-page-title {
           font-size: 38px;
       }
   }
   
   /* ===========================================
      MEJORAS DE ACCESIBILIDAD
      =========================================== */
   
   #rk-main-content:focus,
   .rk-main-content:focus {
       outline: none;
   }
   
   .rk-page-content a:focus,
   .rk-page-content button:focus,
   .rk-page-content input:focus {
       outline: 2px solid #E31E24;
       outline-offset: 2px;
   }
   
   /* ===========================================
      ANIMACIONES SUAVES
      =========================================== */
   
   .rk-page-article {
       animation: rkFadeIn 0.4s ease-out;
   }
   
   @keyframes rkFadeIn {
       from {
           opacity: 0;
           transform: translateY(10px);
       }
       to {
           opacity: 1;
           transform: translateY(0);
       }
   }
   
   @media (prefers-reduced-motion: reduce) {
       .rk-page-article {
           animation: none;
       }
   }
   
   /* ===========================================
      COMPATIBILIDAD CON TEMAS POPULARES
      Solo afecta al área de contenido principal
      =========================================== */
   
   /* Astra - solo contenido */
   .rk-fullwidth-page.ast-separate-container #primary {
       margin: 0;
       padding: 0;
   }
   
   .rk-fullwidth-page .ast-container {
       max-width: 100%;
   }
   
   /* GeneratePress - solo contenido */
   .rk-fullwidth-page .inside-article {
       padding: 0;
   }
   
   /* Storefront (WooCommerce) - solo contenido */
   .rk-fullwidth-page .site-main {
       padding: 0;
   }
   
   /* OceanWP - solo contenido */
   .rk-fullwidth-page #content-wrap .container {
       max-width: 100%;
       padding: 0;
   }
   
   /* Kadence - solo contenido */
   .rk-fullwidth-page .content-container.site-container {
       max-width: 100%;
   }
   
   /* Flavor Theme - basado en tu web actual */
   .rk-fullwidth-page .flavor-content-area,
   .rk-fullwidth-page .flavor-main-content {
       max-width: 100%;
       padding: 0;
   }
   
   /* Theme específico de Royal Kids (si usa Bootstrap) */
   .rk-fullwidth-page .site-content > .container {
       max-width: 100%;
       padding: 0;
   }
   
   /* Twenty Twenty-One/Two/Three/Four - solo contenido */
   .rk-fullwidth-page .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
       max-width: 100%;
   }
   
   /* ===========================================
      CALENDARIOS - ANCHO MÁXIMO
      =========================================== */
   
   .rk-fullwidth-page .rk-entries-container {
       max-width: 650px;
   }
   
   .rk-fullwidth-page .rk-birthday-container {
       max-width: 750px;
   }
   
   @media (min-width: 768px) {
       .rk-fullwidth-page .rk-entries-container {
           max-width: 700px;
       }
       
       .rk-fullwidth-page .rk-birthday-container {
           max-width: 850px;
       }
   }
   
   @media (min-width: 992px) {
       .rk-fullwidth-page .rk-entries-container {
           max-width: 750px;
       }
       
       .rk-fullwidth-page .rk-birthday-container {
           max-width: 950px;
       }
   }