@charset "utf-8";
/* CSS Document */

@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');

/* Grid width is * 1500 */

:root {
    --grid-width:           clamp(1023px,99.929vw,1399px); /* Base Width is Set Here */
    --grid-gutter:          clamp(22px,2.143vw,30px); /* Gutter Width is set here.  Just put half the gutter width here. */
    --grid-gap:             calc( var(--grid-gutter) / 2 );
    --header-height:        clamp(48px,4.643vw,65px);
    --footer-height:        clamp(59px,5.714vw,80px);
    --legal-height:         clamp(15px,1.429vw,20px);
    --logo-width:           clamp(205px,20.000vw,280px);
    --logo-height:          clamp(48px,4.643vw,65px);
    --spinny-height:        clamp(256px,25.000vw,350px);
    --banner-height:        clamp(219px,21.429vw,300px);
    --block-padding:        clamp(18px,1.786vw,25px);
    --nav-size:             clamp(29px,2.857vw,40px);
    
    --primary-color:        #f9d55f;
    --secondary-color:      #d5aa1f;
    --tertiary-color:       #000000;
    --primary-font:         "Open Sans", sans-serif;
    --secondary-font:       "Nunito", sans-serif;
    --toggle-color:         #000;
    --standard-font-size:   18px;
    --line-height:          1.5; 
}

/* Base Template Settings */


.cta { 
    background: var(--primary-color); 
    height: calc( var(--standard-font-size) * 2.5 ); 
    & *:not(svg) {
        color: var(--tertiary-color)!important; 
        padding-left: var(--standard-font-size); 
        padding-right: var(--standard-font-size);     
        margin-bottom: 0px;
        font-weight: 600;
        text-decoration: none!important;
    }
        
}

:is(article, .text-container){
    font-family: var(--primary-font);
    & * {
        margin-bottom: var(--standard-font-size); 
        line-height: var(--line-height);
    }
    & :is(ul,ol) li, & p {
        font-family: var(--primary-font); 
        font-size: var(--standard-font-size); 
    }
    & :is(h1,.h1) {
        font-family: var(--secondary-font); 
        font-weight: 700;
        font-size: clamp(29px,2.857vw,40px);
        color: var(--secondary-color);
        
    }
    & :is(h2,.h2) {
        font-family: var(--secondary-font); 
        font-weight: 700;
        font-size: clamp(23px,2.286vw,32px);
        color: var(--secondary-color);
        
    }
    & :is(h3,.h3) {
        font-family: var(--secondary-font); 
        font-weight: 700;
        font-size: clamp(20px,2.000vw,28px);
        color: var(--secondary-color);
        
    }
    & :is(h4,.h4) {
        font-family: var(--secondary-font); 
    }
    & :is(h5,.h5) {
        font-family: var(--secondary-font); 
    }
    & blockquote {
       font-family: var(--secondary-font); 
        & cite {
            font-family: var(--primary-font);
        }
    }
    & :not(.cta) > a {
        /* Standard Link Stylings */
        color: var(--secondary-color);
    }
}
 
body {
    background: url(../images/bgrepeat.png) #000;
}

.white-bg {
    background: #FFF;
}

/* Header Settings */

#page-head {
    position: relative;
    height: auto;
    transition: none!important;
    figure.spinny {
        position: absolute;
        bottom: 0px;
        left: 0px;
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        justify-content: flex-end;
        align-content: stretch;
        align-items: flex-start;
        width: var(--logo-width);
        clip-path: polygon(0 0, 100% 0, 100% calc( 100% - var(--header-height) ), 0 calc( 100% - var(--header-height) ) );
        z-index: 2;
        img {
            max-width: 100%;
            width: auto!important;
            max-height: var(--spinny-height);
            margin-inline: auto;
            transition: all .5s;
        }
    }    
    figure.bg {
        width: 100%;
        height: var(--banner-height);
        pointer-events: none;
        picture {
            transition: all .5s;
        }
    }
    & .container {
        height: var(--header-height);
        background-color: var(--primary-color);
        max-width: 100vw;
        padding-inline: var(--grid-gutter);
        a.logo {
            svg {
                
            }
        }
        & #nav {
            width: 100%;
            max-width: calc( 100% - var(--logo-width) );
            text-align: right;
            & > ul#main {
                
                & > li {
                    margin: 0px;
                    & a {
                        color: var(--tertiary-color); 
                        text-decoration: none; 
                        margin: 0px var(--grid-gutter); 
                        font-family: var(--primary-font); 
                        font-weight: 700;
                        font-size: clamp(18px,1.714vw,24px);
                    }
                    &.current-menu-item, &:hover {
                        /* This is the Hover/Active state for the menu item */
                        opacity: .5;
                    }
                }  
            }

        }
    }
    &.fixed {
        position: fixed!important;
        top: 0!important;
        bottom: auto!important;
        transition: all .25s;
        figure.bg {
            height: 0px;
        }
        figure.spinny {
            transform: rotate(180deg) translateY(calc(1 * var(--header-height)));
            transform-origin: bottom;       
            img {
                margin-bottom: -50%;
                animation: slinky .5s linear 1;
            }
        }

    }    
}

@keyframes slinky {
    0% {
        margin-bottom: -150%;
    }
    100% {
        margin-bottom: -50%;
    }
}


/* Admin Bar */

.admin-bar{
    & main { 
        min-height: calc( 100vh - var(--footer-height) - 32px ) 
    }
    & #page-head {
        &.fixed {
            position: fixed!important;
            top: 32px!important;
            figure.bg {
                height: 0px;
            }
            figure.spinny {
                transform: rotate(180deg) translateY(calc(1 * var(--header-height)));
                transform-origin: bottom;
            }
        }
    }
} 




/* Content Settings */ 

main                                            { min-height: calc( 100vh - var(--footer-height) );  }
main :is(:not(.cta)) a                          { color: var(--primary-color); text-decoration: underline; } /* Main Link Style */

section.comic-main {
    .container {
        position: relative;
        z-index: 2;
        padding-block: var(--block-padding);
        .comic-holder {
            text-align: center;
        }  
        nav.comic-nav {
            margin: auto;
            padding-block: var(--grid-gutter);
            .titlebar {
                width: calc( 100% - clamp(132px,12.857vw,180px) );
                display: flex;
                flex-direction: row;
                flex-wrap: wrap;
                justify-content: flex-start;
                align-content: stretch;
                align-items: center;
                padding-left: var(--grid-gutter);
                h1 {
                    color: var(--primary-color);
                    font-weight: 600;
                    font-family: var(--primary-font);
                }
            }
            a {
                margin-inline: var(--grid-gutter);
                font-size: 0;
                text-decoration: none;
                &:before {
                    font-family: var(--icon-font);
                    font-weight: 900;
                    font-size: var(--nav-size);
                }
                &.first:before {
                    content: '\f100';
                }
                &.prev:before {
                    content: '\f104';
                }
                &.next:before {
                    content: '\f105';
                }
                &.last:before {
                    content: '\f101';
                }
                &:first-child{
                    margin-left: 0px;
                }
                &:last-child{
                    margin-right: 0px;
                }
                &.mag-glass{
                    transform: scale(.5);
                    transform-origin: center;                    
                    &:before {
                        content: '\f002';
                    } 
                }
                &.disabled {
                    opacity: .5;
                    pointer-events: none;
                }
            }
        }
    }

}

/* Header */

section.page-title {
    padding-bottom: 0px!important;
    & + section {
        padding-top: 0px;
    }
}

/* Blog */

section.content {
    padding-block: calc( var(--grid-gutter) * 1 );
    .container {
        .blog-divider {
            border: none;
            margin-block: var(--grid-gutter);
            border-top: 2px solid var(--secondary-color);
        }
        nav.paginate {
            * {
                text-decoration: none;
                font-family: var(--primary-font);
                font-size: var(--standard-font-size);
                margin-right: var(--standard-font-size);
            }
        }
    }
}

/* Archive */

section.comics-archive{
    h2 {
        margin-bottom: 0px;
    }
    .comic-archive {
        min-width: calc( 100% + calc( var(--grid-gutter) * 4 ) );
        margin-left: calc( -2 * var(--grid-gutter) );
        padding-top: 0px;
        .box-1-6 {
            padding-bottom: 0px;
            margin-bottom: 0px;
            a {
                margin-bottom: 0px;
            }
            figure {
                margin-bottom: 5px;
                overflow: hidden;
                width: 100%;
                aspect-ratio: 212 / 300;
                transition: all .25s;
                transform-origin: bottom left;
                &:hover {
                    transform: rotate(5deg);
                    
                }
                img {
                    min-width: 100%;
                    height: auto!important;
                }
            }            
        }

    }

}

/* Form Settings */



/* Footer Settings */
#page-foot { 
    margin-top: 30px;
    background: var(--primary-color);
    .container {
        height: var(--footer-height);
        max-width: calc( 100vw - var(--grid-gutter) - var(--grid-gutter) );
    }
    * {
        color: var(--tertiary-color)!important;
    }
    ul.social {
        li {
            a:before {
                font-size: 22px;
            }
        }
    }
    .right-foot {
        font-family: var(--primary-font);
        font-size: 18px;
        ul#legal {
            display: inline-block; 
            li:before {
                content: ' | ';
                margin-inline: 18px;
            }
        }
    }
}


@media handheld, only screen and (max-width: 1023px) and (min-width: 768px) { /* Under the grid width to iPad Landscape */
    :root {
        --banner-height:    clamp(165px,21.505vw,220px);
        --spinny-height:    clamp(192px,25.024vw,256px);
    }
    #page-head.t-toggle {
        .container {
            nav#nav  {
                width: 320px!important;
                background: var(--secondary-color)!important;
                ul#main {
                    padding: var(--grid-gutter);
                    li {
                        margin-bottom: var(--grid-gutter);
                    }
                }
            }            
        }
        &.fixed {
            .spinny {
                display: none;
            }
        }
        &:after {
            display: none;
        }
    }
    /*
    body.home, body.single-comic {
        header#page-head:not(.unfixed) {
            .container {
                #toggle:checked, 
                #toggle:not(:checked){
                    & ~ nav#nav {
                        transform: translateY( calc( -1 * clamp(14px,1.857vw,19px) ) );
                        top: auto;
                        bottom: var(--nav-size); 
                        display: flex!important;
                        flex-direction: column;
                        flex-wrap: nowrap;
                        justify-content: flex-end;
                        align-content: stretch;
                        align-items: flex-end;                    
                    }  
                }

            }
        }
    }
    */
}

@media handheld, only screen and (max-width: 767px) { /* Mobile - All Mobile */
    
    :root {
        --banner-height:    clamp(111px,34.722vw,266px);
        --spinny-height:    clamp(122px,38.194vw,293px);
        --footer-height:    clamp(204px,63.657vw,488px);
    }
    #page-head.t-toggle {
        .container {
            nav#nav  {
                min-width: 100vw!important;
                background: var(--secondary-color)!important;
                
                ul#main {
                    padding: var(--grid-gutter);
                    li {
                        margin-bottom: var(--grid-gutter);
                    }
                }
            }            
        }
        &.fixed {
            .spinny {
                display: none;
            }
        }
        
        &:after {
            display: none;
        }
    }
    /*
    body.home, body.single-comic {
        header#page-head:not(.unfixed) {
            .container {
                #toggle:checked, 
                #toggle:not(:checked){
                    & ~ nav#nav {
                        transform: translateY( calc( -1 * clamp(14px,1.857vw,19px) ) );
                        top: auto;
                        bottom: var(--nav-size); 
                        display: flex!important;
                        flex-direction: column;
                        flex-wrap: nowrap;
                        justify-content: flex-end;
                        align-content: stretch;
                        align-items: flex-end;                    
                    }  
                }

            }
        }
    }
    */
    #page-foot {
        & .right-foot {
            * {
                font-size: 16px!important;
            }
            & ul#legal {
                li:before {
                    content: ' ';
                }
            }
        }
    }


}