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

.widget-title {
    font-weight:700;
    font-size:24px;
    margin-bottom:8px;
}

.paging-navigation {
    padding:24px 0;

    .nav-links {
        display:flex;
        flex-flow:row wrap;
        gap:4px;

        .page-numbers {
            width:42px;
            height:42px;
            display:flex;
            align-items:center;
            justify-content:center;
            line-height:1em;
            color:#FFF;
            background:#1E2A4D;
        }

        .page-numbers.current {
            background:var(--accent);
            color:#FFF;
            font-weight:700;
        }

        .page-numbers.dots {
            background:unset;
            color:#000;
        }

        .page-numbers.prev, .page-numbers.next {
            width:fit-content!important;
            background:unset;
            color:#000;
        }

    }
}

@media only screen and (max-width:1024px) {
    .generate-columns-container {flex-direction:column;}
    .generate-columns-container > * {width:100%!important;}

    div#content {flex-direction:column;}
    /*TODO #primary {width:100%!important;margin:0;} */

    .is-right-sidebar {width:100%!important;}
}

@media only screen and (max-width:768px) {
    div#page {padding:0;}
    div#content {padding:0 20px;}

    .nav-below-header .main-navigation .inside-navigation.grid-container, .nav-above-header .main-navigation .inside-navigation.grid-container {
        padding:0 24px;
    }
}

@media only screen and (min-width:1024px) {
	body.archive #left-sidebar,
	body.archive #right-sidebar {padding-top:20px;}
}

@media only screen and (max-width:1024px) {
	body.archive #left-sidebar,
	body.archive #right-sidebar {padding:20px 0;}
	.is-left-sidebar.sidebar, .is-right-sidebar.sidebar {
		width: auto!important;
		order: initial!important;
  	}
  	#content > div {width:auto!important;}
}

/* --------------------------------------------------
HOMEPAGE
-------------------------------------------------- */
body.home #nav-below {display:none;}

.home-section-title {
    font-size:24px;
    font-weight:700;
    color:#FF7900;
    margin-top:24px;
}

body.archive .page-header {
    margin-top:24px;
}
/* --------------------------------------------------
ARCHIVE POST STYLE
-------------------------------------------------- */
article.generate-columns {
    .inside-article {
        position:relative;
        aspect-ratio:1.6;
        display:flex;
        flex-direction:column;
        justify-content:flex-end;
        border:solid 4px #FF7900;
        overflow:hidden;

        .post-image {
            position:absolute;
            top:0;
            left:0;
            width:100%;
            height:100%;
            z-index:0;

            &::before {
                content:"";
                position:absolute;
                top:0;
                left:0;
                width:100%;
                height:100%;
                background:rgb(0, 35, 103, .5);
                background: linear-gradient(0deg, rgba(0,35,103,1) 0%, rgba(0,35,103,0) 100%);
                z-index:1;
                pointer-events: none;
            }

            > a {
                display:flex;
                width:100%;
                height:100%;

                > img {
                    object-fit:cover;
                    width:100%;
                    height:100%;
                }
            }
        }

        .entry-summary {display:none;}

        .entry-header {
            position:relative;
            z-index:2;
            padding:20px;
            display:flex;
            flex-direction:column-reverse;
            gap:8px;

            .entry-title {font-size:16px;}

            .entry-title a,
            .entry-meta a:hover,
            .entry-meta .byline,
            .entry-meta time {
                color:#FFF;
            }

            .entry-meta {
                font-size: 14px;
                font-weight: 500;
                letter-spacing: .5px;
            }

            @media only screen and (min-width:1024px) and (max-width:1150px) {
                .entry-title {font-size:14px;}
                .entry-meta .byline {display:none;}
            }
        }

        @media only screen and (max-width:768px) {
        	.entry-header {padding:10px;}
        }

        footer.entry-meta {
            position:absolute;
            z-index:2;
            top:0;
            right:0;
            padding:20px;
            margin:0;

            .cat-links {
                background:var(--accent);

                a {
                    color:#FFF;
                    padding:6px 8px;
                    text-transform:uppercase;
                    letter-spacing:.5px;
                    font-weight:600;
                    font-size:13px;
                    display:block;
                    line-height:1em;
                    text-decoration:none;
                }

                span.icon-categories {display:none;}
            }
        }
    }

    @media only screen and (min-width:1024px) {
        &.featured-column {
            .inside-article {
                aspect-ratio:1.8;
    
                .entry-header .entry-title {
                    font-size:24px;
                }
            }
        }
    }
}

.generate-list-container {margin-bottom:24px;}

article.generate-list {
    .inside-article {
        border-bottom:solid 1px #DDD;
        display:flex;
        gap:15px;
        padding:12px 0;

        .post-image {
            flex:0 0 150px;
            aspect-ratio:1.3;
            overflow:hidden;
            margin:0;

            > a {
                display:flex;
                width:100%;
                height:100%;

                > img {
                    object-fit:cover;
                    width:100%;
                    height:100%;
                }
            }
        }
        @media only screen and (max-width:768px) {
        	.post-image {flex:0 0 80px;}
        }

        .entry-header {
            flex:1;

            .entry-title {
                font-size:18px;
                line-height:1.5em;
                margin:0;
            }

            .entry-meta {
                display:flex;
                flex-flow:row wrap;
                gap:10px;
                font-size:14px;
                font-weight:500;
                letter-spacing:.5px;
                margin-bottom:8px;
            }
            @media only screen and (max-width:768px) {
            	.entry-meta {display:none;}
            	.entry-title {font-size:14px;}
            }
        }

        .entry-summary {
            display:none;
        }
    }
}

.recent-posts-sidebar {
    padding:40px 0 0 20px!important;

    .recent-posts-sidebar-list article.generate-list {
        .inside-article {
            align-items:center;
            padding:10px 0;

            .post-image {
                flex:0 0 80px;
            }

            .entry-header {
                .entry-title {
                    font-size:14px;
                }
            }

            .entry-meta {display:none;}
        }
    }
}

/* --------------------------------------------------
-------------------------------------------------- */


/* --------------------------------------------------
SPORTITALIA CHANNELS
-------------------------------------------------- */
#channels-wrapper {height:120px;}
.si-channels {
    width:100%;

    .channels-title {
        width:100%;
        max-width:280px;
        background-color: var(--global-color-8);
        font-size: 12px;
        font-weight: bold;
        text-transform: uppercase;
        text-align: center;
        padding: 12px 24px;
        margin-bottom: .5em;
        color: var(--global-color-9);
    }

    ul.si-channels__list {
        list-style:none;
        margin:0;
        padding:0;
        display:flex;
        flex-flow:row;
        align-items:center;
        gap:4px;
        margin-bottom:1em;

        li.si-channels__item {
            width:fit-content;
            height:72px;
            max-width:140px;
            display:flex;
            align-items:center;

            a > img {
                display:block;
                width:100%;
                height:auto;
            }
        }

        li.si-channels__item.large {
            max-width:240px;
        }

        @media only screen and (max-width:1024px) {
            li.si-channels__item.large {
                max-width:180px;
            }
        }

        @media only screen and (max-width:768px) {
            li.si-channels__item {
                max-width:240px;
            }
        }

        @media only screen and (max-width:768px) {
            li.si-channels__item.secondary {display:none;}
        }
    }

    @media only screen and (min-width:768px) {
        ul.si-channels__list {justify-content: space-between;}
    }

    .channels-divider {
        width: 100%;
        height: 42px;
        background-color: var(--global-color-10);
    }
    @media only screen and (max-width:1024px) {
        .channels-divider {display: none;}
    }
    
}

@media only screen and (max-width:768px) {
    .si-channels {
        padding:0 20px;
        ul.si-channels__list {
            gap:8px;
        }
    }
}


footer.site-info {
    background:#19284A;
    padding:24px 0;
    .footer-menu {
        a {
            color:#FFF;
            text-transform:uppercase;
            font-weight:600;
            letter-spacing:.5px;
            font-size:14px;
        }
    }
}

/* --------------------------------------------------
BREADCRUMBS
-------------------------------------------------- */
.breadcrumb-wrapper {
    padding:8px 0;
    font-size:15px;
}

@media only screen and (max-width:768px) {
    .breadcrumb-wrapper {
        font-size:13px;
    }
}


/* --------------------------------------------------
EDITORIALE CALCIO
-------------------------------------------------- */
.si-editoriale-calcio {
    border: 2px solid var(--global-color-8);
    margin-bottom: 20px;

    a {
        text-decoration: none;
        color: inherit;

        .post-header {
            .widget-title {
                font-size: 12px;
                text-transform: uppercase;
                padding: 6px;
                margin-bottom: 0px;
                color: var(--global-color-9);
                background-color: var(--global-color-8);
            }
        }

        .post-content {
            padding:5px;

            .post-title {
                font-size: 14px;
                line-height: 1.3em;
                font-weight: 600;
                text-transform: uppercase;
                margin-bottom:5px;
                color: var(--global-color-9);
            }

            .inner {
                display:flex;
                flex-flow:row wrap;
                gap:5px;

                figure {
                    border-radius: 8px;
                    border: 3px solid var(--global-color-8);
                    width: 80px;
                    height: 80px;
                    overflow:hidden;

                    img {
                        width:100%;
                        height:100%;
                        object-fit: cover;
                        object-position: center;
                    }
                }

                p.post-excerpt {
                    width: calc(100% - 90px);
                    font-size: 12px;
                    line-height: 1.2em;
                    font-weight: normal;
                    margin-bottom: 0px;
                }
            }
        }
    }

    a:hover {text-decoration:none;}
}

@media only screen and (min-width:768px) {
    #mobile-live {display:none;}
}

#mobile-live {
    background-color: var(--global-color-10);

    ul#menu-top-mobile-menu {
        display:flex;
        flex-flow:row wrap;
        height:40px;
        align-items:center;
        justify-content:center;
        gap:8px;
        list-style:none;
        margin:0;
        padding:0;

        li {
            a {
                text-decoration:none;
                color:#FFF;
                text-transform:uppercase;
                font-size:13px;
                font-weight:600;
                padding:2px 4px;
            }
        }

        li.live-animation {
            a {
                color:red;
                border:solid 1px red;
            }
            a::before {
                content:"●";
                margin-right:6px;
                animation:live-blink 1s ease-in-out infinite;
            }
        }
    }
}

@keyframes live-blink {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0; }
}