/*
 Theme Name:   GeneratePress Child
 Theme URI:    https://generatepress.com
 Description:  Default GeneratePress child theme
 Author:       Tom Usborne
 Author URI:   https://tomusborne.com
 Template:     generatepress
 Version:      0.1
*/

/* ================================================================= 
   1. RESET, HTML Y CONFIGURACIÓN GENERAL
   ================================================================ */
html, body {
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: visible !important; /* Importante para anuncios tipo skin */
}

body * {
    box-sizing: border-box;
}

body .site.grid-container {
    max-width: 100%;
}

body {
    margin-bottom: 0 !important;
}

#wpadminbar {
    z-index: 100000;
}

.full-width {
    max-width: 100%;
}

.elementor-page #content.site-content {
    max-width: 100% !important;
}

/* Espaciado general para la página de inicio */
.home #content {
    padding: 20px 0px 0px;
}

/* Evitar hueco blanco bajo el footer en páginas que no son la home */
body:not(.home) .site,
body:not(.home) #page,
body:not(.home) .site-footer {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}


/* ================================================================= 
   2. TIPOGRAFÍA Y LISTAS (CONTENIDO Y POSTS)
   ================================================================ */
.elementor-widget-theme-post-content ul, 
.elementor-widget-theme-post-content li, 
.post-content ul, 
.post-content li {
    -webkit-padding-start: 0;
}

.elementor-widget-theme-post-content ul {
    margin-left: 15px;
}

.post-content ul {
    margin-left: 30px;
}

.elementor-widget-theme-post-content ul li, 
.post-content ul li {
    padding: 4px 0px 4px 0.3em;
}

.wp-caption {
    width: 100% !important;
    margin-bottom: 1.5em !important;
}

#content .wp-caption a img {
    max-width: 99.03225806%;
    height: auto;
}

/* Margen para imágenes y figuras en entradas de blog */
.single-post .wp-block-image, 
.single-post figure {
    margin-top: 15px !important;
    margin-bottom: 25px !important;
}


/* ================================================================= 
   3. ESTRUCTURA DE ENTRADAS (SINGLE POST) Y ARCHIVOS
   ================================================================ */
.inside-article {
    background-color: #ffffff;
    float: left;
    display: block;
}

#post-105 .inside-article, 
#post-103 .inside-article,  
#post-13357 .inside-article, 
#post-13389 .inside-article, 
#post-13390 .inside-article, 
#post-30285 .inside-article {
    padding: 30px;
}

#post-105 .inside-article h1, 
#post-103 .inside-article h1 {
    padding: 10px;
}

h1.entry-title {
    margin-bottom: 20px;
}

.entry-content {
    margin: 0;
    padding: 0px;
    background-color: #fff;
    width: 70%;
    float: left;
}

.post-content {
    max-width: 640px; 
    margin: 20px auto;
    padding: 0;
}

.single .entry-header {
    width: 28.333%;
    float: right;
}

.single .entry-header h1 {
    margin-bottom: 60px;
    color: #fd845a;
    line-height: 1.2em;
    margin: 20px;
    font-size: 50px;
}

.is-right-sidebar {
    float: right;
}

.inside-right-sidebar {
    max-width: 300px;
    margin: 0 auto;
    text-align: center;
}

.widget-area .widget_media_image {
    padding: 0px;
}

.cabecera-categorias {
    color: #82c3d1;
    font-size: 15px;
    text-transform: uppercase;
    margin: 20px 10px;
}

.cabecera-background {
    width: 1680px;
    background-color: #82c3d1;
    position: relative;
    left: -360px;
    min-height: 500px;
}

.new-featured-image {
    width: 100%;
    height: auto;
    margin-top: 0px;
}


/* ================================================================= 
   4. INTEGRACIÓN CON ELEMENTOR (MÁRGENES Y ANCHOS)
   ================================================================ */
.elementor-top-section.elementor-section-boxed > .elementor-container {
    padding: 0 20px;
}

.elementor-top-section .elementor-top-section.elementor-section-boxed > .elementor-container,
body:not(.full-width-content) .entry-content .elementor-top-section.elementor-section-boxed > .elementor-container {
    padding: 0;
}

.elementor-top-section.elementor-section-boxed.nopad > .elementor-container {
    padding: 0;
}

.elementor-section-boxed .elementor-column-gap-default .elementor-row {
    width: calc(100% + 20px);
    margin-left: -10px;
    margin-right: -10px;
}
.elementor-section-boxed .elementor-column-gap-narrow .elementor-row {
    width: calc(100% + 10px);
    margin-left: -5px;
    margin-right: -5px;
}
.elementor-section-boxed .elementor-column-gap-extended .elementor-row {
    width: calc(100% + 30px);
    margin-left: -15px;
    margin-right: -15px;
}


/* ================================================================= 
   5. DISEÑO DE RECETAS Y SHORTCODES PERSONALIZADOS
   ================================================================ */
.receta img {
    margin-top: 0px;
}

.receta .entry-content {        
    padding: 20px;
}

.recipe-post-single-extra {
    padding: 20px;
    margin-top: 20px;
    margin-bottom: 20px;
    clear: both;
    -moz-box-shadow: 0px 0px 17px rgba(0,0,0,.1);
    -webkit-box-shadow: 0px 0px 17px rgba(0,0,0,.1);
    box-shadow: 0px 0px 17px rgba(0,0,0,.1);
}

.recipe-post-single-extra h4 {
    margin: 15px 0;
    padding: 0 0 15px 0;
    color: #fd845a;
    border-bottom: 2px solid #deedf4;
    font-size: 1.5rem;
    font-weight: bold;
    letter-spacing: 2px;
    line-height: 1.36;
    text-transform: uppercase;
}

.receta-post-single-ingredient-container .informacion {
    padding-top: 50px;
}

.receta-post-single-ingredient-container, 
.receta-post-single-instrucciones-container {
    margin-bottom: 30px;
    padding: 0px 20px;
    font-size: 14px;
}

.receta-post-single-instrucciones-container {
    margin-right: 0%;
    padding: 0;
    counter-reset: count;
    font-size: 1em;
}

.receta-post-single-instrucciones-container > ol {
    line-height: normal;
    margin: 0;
    list-style: none;
}

.receta-post-single-instrucciones-container ol > li {
    position: relative;
    line-height: 1.8;
    min-height: 44px;
    padding-left: 40px;
    margin: 0 0 30px;
    list-style: none;
}

.receta-post-single-instrucciones-container ol > li:before {
    counter-increment: count;
    content: counter(count);
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    font-size: 24px;
    font-weight: bold;
    font-family: "Roboto Condensed", sans-serif;
    text-transform: uppercase;
    line-height: 1.4;
    width: 35px;
    vertical-align: middle;
    padding: 0;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    margin-right: 20px;
}

.receta-post-single-ingredient p {
    color: #3f3d3b;
    border-bottom: 1px dashed #cccccc;
    padding: 12px 0px;
    font-size: 17px;
    margin: 0px;
}

.instrucciones-caption {
    display: block;
    font-size: 75%;
    padding-top: 5px;
    padding-bottom: 15px;
    opacity: .8;
}

.instrucciones_pasos {
    display: block;
    font-size: 1rem;
    line-height: 1.5em;
    font-style: italic;
    padding: 5px 20px 0px 0px;
    border-bottom: 1px dotted #82c3d1;
}

/* Shortcodes de ingredientes */
.elementor-element-08f8329 .elementor-widget-container .elementor-shortcode .item-ingrediente {
    font-size: 0.9rem;
    font-style: italic;
    list-style-type: none;
    border-bottom: 1px dotted #ddd;
    display: flex;
}

.elementor-element-08f8329 .elementor-widget-container .elementor-shortcode .item-encabezado {
    font-weight: bold;
    font-size: 1rem;
    padding: 10px 0;
    font-style: italic;
    list-style-type: none;
    display: flex;
}

.elementor-element-08f8329 .elementor-widget-container .elementor-shortcode .icono-ingrediente {
    width: 10px;
    display: block;
}

.elementor-element-08f8329 .elementor-widget-container .elementor-shortcode li.item-ingrediente:last-child {
    border-bottom: 0px;
    list-style-type: none;
}

.elementor-element-08f8329 li i {
    color: #fd845a;
    font-size: 10px;
}

.elementor-element-08f8329 .ingrediente {
    list-style-type: none;
    padding-left: 5px;
    display: block;
}


/* ================================================================= 
   6. TARJETAS, BOTONES Y WIDGETS (BANNERS Y POSTS RELACIONADOS)
   ================================================================ */
.card {
    background: #fafafa !important;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    border-bottom: 10px #fd845a solid;
    margin-bottom: 20px;
    transition-property: background, border, box-shadow, -webkit-box-shadow;
    -webkit-transition-duration: .25s;
    -o-transition-duration: .25s;
    transition-duration: .25s;
}

.card:hover {
    border-bottom: 10px #82c3d1 solid;
}

.card .post-image {
    width: 100%;
    height: 200px;
    overflow: hidden;
    position: relative;
}

.card .post-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block;
}

.card .card-title,
.card .entry-title,
.card .entry-title a {
    text-align: center;
    padding: 18px 15px;
    color: #020101;
    font-family: "Montserrat", Sans-serif !important;
    font-size: 1.1rem;
    font-weight: 500;
    line-height: 1.4;
    text-transform: none !important;
}

.card .entry-title a:hover {
    color: #fd845a !important;
}

.card-wrapper {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-bottom: 40px;
}

.card-wrapper > #nav-below,
.card-wrapper .paging-navigation {
    grid-column: 1 / -1;
    width: 100%;
    text-align: center;
    margin-top: 20px;
    padding: 20px 0;
}

a.read-more {
    background-color: #f6555c;
}

/* Banners Leaderboard */
.leaderboard {
    min-height: 90px;
    height: auto;
    width: 1024px;
    padding: 10px 0;
    margin: 0 auto;
}

.leaderboard-728 {
    display: block;
    min-height: 90px;
    margin: 0px auto 0px;
    padding: 10px 0;
    width: 748px;
}

.leaderboard-inner {
    width: auto;
    text-align: center;
    position: relative;
}

#media_image-3 {
    padding-top: 0;
}

/* Posts Relacionados Inline */
.tm-embedded-post-container {
    text-transform: uppercase;
    position: relative;
    padding: 5px 0;
    margin: 22px 0;
    border-bottom: 3px solid #efefef;
    padding-bottom: 10px;
    height: auto;
    min-height: 300px;
}

.tm-embedded-post-container .tm-embedded-post-header {
    border-bottom: 3px solid #f1f1f1;
    margin-bottom: 10px;
}

.related-title {
    font-family: Helvetica, Verdana, Arial, sans-serif;
    font-size: 1rem;
    text-transform: uppercase;
    background: #fff;
    color: #8f8f8f;
    padding-right: 10px;
    position: relative;
    top: 20px;
}

.inline-related-posts-container {
    padding: 10px;
    display: block;
    height: auto;
    min-height: 225px;
    width: calc(33.333% - 6px);
    float: left;
}

.tm-embedded-post-image {
    float: left;
    height: 100%;
    width: auto;
}

.tm-embedded-post-container a .tm-embedded-post-title {
    font-size: 1.5rem;
    color: #5b5b5c;
    line-height: 1.1;
    letter-spacing: .1rem;
    font-family: Roboto Condensed;
    padding-bottom: 10px;
}


/* ================================================================= 
   7. ICONOS SOCIALES
   ================================================================ */
.social-icons-header {
    margin: 10px;
}

.social-icons-header i {
    margin: 0 3px;
}

.social-icons-header .fab, 
.social-icons-header .fas {
    padding: 6px; 
    font-size: 20px; 
    width: 32px; 
    text-align: center;
    text-decoration: none;
    background: #82c3d1;
    color: white;
    border-radius: 20px;
}

.social-icons-header .fab:hover {
    background: #fd845a;
}

.social-icons-widget {
    margin: 20px 0;
}

.social-icons-widget i {
    margin: 0 5px;
}

.social-icons-widget .fab {
    padding: 8px;
    font-size: 17px;
    width: 2em;
    height: 2em;
    text-align: center;
    text-decoration: none;
    background: #82c3d1;
    color: white;
    border-radius: 50%;
    position: relative;
    display: inline-block;
}

.social-icons-widget .fab:hover {
    background: #fd845a;
}

.social-icons {
    margin: 30px 0px;
    position: -webkit-sticky;
    position: sticky;
    top: 15%;
}

.social-icons a {
    color: #fff;
    display: block;
    height: 40px;
    position: relative;
    text-align: center;
    line-height: 40px;
    width: 40px;
    margin-bottom: 1px;
}

.social-icons a:hover > span {
    color: #fff;
    visibility: visible;
    left: 41px;
    opacity: 1;
} 

.social-icons a span {
    line-height: 40px;
    left: 38px;
    position: absolute;
    text-align: center;
    width: 90px;
    transition-duration: 0.5s;
    opacity: 1;
}

.social-icons .fab {
    padding: 10px; 
    font-size: 20px; 
    width: 36px; 
    text-align: center;
    text-decoration: none;
}

.social-icons .fa-facebook {
    background: #3B5998;
    color: white;
}

.fixed-facebook span {
    background-color: #627AAD;
}

.social-icons .fa-twitter {
    background: #55ACEE;
    color: white;
}

.fixed-twitter span {
    background-color: #8FCEF9;
}

.social-icons .fa-pinterest {
    background: #f6555c;
    color: white;
}


/* ================================================================= 
   8. FOOTER Y ACCESIBILIDAD
   ================================================================ */
.site-footer {
    background-color: #f5865e !important;
    margin: 0 auto !important;
    padding: 0 !important;
}

.site-info {
    background-color: transparent !important;
    color: white !important;
    text-align: center;
    margin: 0 auto !important;
    padding: 20px 10px 10px !important;
}

.home .site-info a {
    color: white !important;
}

.site-footer .site-info a {
    color: #ffffff;
    padding: 0 10px;
}

.site-info ul li {
    list-style-type: none;
    display: inline-block;
    padding: 0 10px;
}

.site-info ul {
    margin: 0;
}

#a11y-speak-assertive,
#a11y-speak-polite {
    position: absolute !important;
    height: 0 !important;
    width: 0 !important;
    overflow: hidden !important;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}

.generate-back-to-top {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 9999;
    max-width: 100vw;
    overflow-x: hidden;
}


/* ================================================================= 
   9. MEDIA QUERIES (ADAPTACIÓN RESPONSIVE)
   ================================================================ */
@media (max-width: 1050px) {
    .main-navigation .menu-toggle,
    .main-navigation .mobile-bar-items,
    .sidebar-nav-mobile:not(#sticky-placeholder) {
        display: block;
    }
    .main-navigation ul,
    .gen-sidebar-nav {
        display: none;
    }
    [class*="nav-float-"] .site-header .inside-header > * {
        float: none;
        clear: both;
    }
}

@media (max-width: 1024px) {
    .cabecera-post {
        margin-top: 0px;
    }
    .cabecera-background {
        display: none;
    }
    .new-featured-image {
        width: 100%;
        height: auto;
        margin-top: 0px;
    }
    .left-sidebar {
        display: none;
    }
}

@media screen and (min-width: 1025px) {
    .cabecera-post {
        margin-top: -400px;
        position: relative;
        min-height: 400px;
        background-color: #fff;
    }
    .new-featured-image {
        width: 100%;
        height: auto;
        max-height: 1200px;
        min-width: 860px;
        margin-top: 0px;
    }
    .new-featured-image img {
        width: 100%;
        height: auto;
        max-height: 1200px;
        min-width: 860px;
        margin-top: 0px;
    }
}

@media screen and (min-width: 1024px) {
    .tag #content.site-content {
        width: 1200px;
        margin: 0 auto;
    }

    .single #content.site-content,
    .page #content.site-content,
    .search #content.site-content {
        max-width: 1200px;
        margin: 0 auto;
    }

    .page-id-41042 #content.site-content {
        max-width: 100%;
    }

    .elementor-section.elementor-top-section > .elementor-container {
        padding-left: 20px;
        padding-right: 20px;
    }

    .tm-embedded-post-container {
        font-size: 18px;
        margin: 22px 0;
        padding: 0 5px 0 5px;
    }

    .tm-embedded-post-header {
        padding: 5px 0px 5px;
    }

    .tm-embedded-post-container a, 
    .tm-embedded-post-title {
        float: left;
    }

    .tm-embedded-post-title {
        font-size: 20px;
        line-height: 26px;
        width: 100%;
        padding: 0px;
    }
}

@media (min-width: 768px) and (max-width: 1024px) {
    .entry-content {
        width: 100%;
    }
    .single .entry-header {
        width: 40%;
    }
    .card-wrapper {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .one-container .site-content {
        padding: 0px;
    }
    .single .entry-header h1 {
        margin: 20px 10px;
        font-size: 40px;
    }
    #right-sidebar {
        display: none;
    }
    .leaderboard,
    .leaderboard-728 {
        width: 100%;
    }
    .footer-widgets {
        text-align: center !important;
    }
}

@media (max-width: 767px) {
    .entry-content {
        width: 100%;
    }
    .single .entry-header {
        width: 100%;
        clear: both;
    }
    .blog .site-content,
    .archive .site-content,
    .category .site-content {
        padding-left: 15px;
        padding-right: 15px;
    }
    .card-wrapper {
        grid-template-columns: 1fr !important;
    }
    .card .post-image {
        height: 220px !important;
    }
}

/* 21.5 inch iMac ----------- */
@media only screen and (min-width : 1900px) {
    .cabecera-background {
        width: 1912px;
        background-color: #82c3d1;
        position: relative;
        left: -360px;
        min-height: 500px;
    }
}

/* 24 inch iMac ----------- */
@media only screen and (min-width : 2200px) {
    .cabecera-background {
        width: 2225px;
        background-color: #82c3d1;
        position: relative;
        left: -520px;
        min-height: 500px;
    }
}

@media screen and (min-width: 2400px) {
    .cabecera-background {
        width: 2560px;
        background-color: #82c3d1;
        position: relative;
        left: -680px;
        min-height: 500px;
    }
}

@media screen and (max-width: 1023px) {
    .elementor-section.elementor-top-section > .elementor-container {
        padding-left: 15px;
        padding-right: 15px;
    }
}

/* ================================================================= 
   CORRECCIÓN: ANCHO Y MARGEN DE ARCHIVOS / ETIQUETAS / TÍTULOS
   ================================================================ */
@media screen and (min-width: 1024px) {
    .tag #content.site-content,
    .archive #content.site-content,
    .category #content.site-content,
    .search #content.site-content {
        max-width: 1200px !important;
        margin: 0 auto !important;
        padding-left: 20px;
        padding-right: 20px;
    }
}

/* Asegurar que el título de la cabecera de archivo guarde espacio arriba y abajo */
.page-header, .archive-title, .entry-header {
    margin-top: 20px;
    margin-bottom: 20px;
}

/* ================================================================= 
   CORRECCIÓN: CENTRADO DE TÍTULOS Y REDES SOCIALES EN ARCHIVOS/ETIQUETAS
   ================================================================ */
.archive .page-header,
.tag .page-header,
.category .page-header,
.search .page-header {
    text-align: center !important;
    margin: 30px auto !important;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Forzar centrado para el título de la entrada o archivo */
.archive .page-header h1,
.tag .page-header h1,
.category .page-header h1,
.search .page-header h1,
h1.page-title {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    float: none !important;
}

/* Centrar los iconos sociales que aparecen debajo o en la cabecera */
.archive .social-icons-widget,
.tag .social-icons-widget,
.category .social-icons-widget,
.page-header .social-icons-widget {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin: 15px auto !important;
    float: none !important;
    clear: both;
}