/*

Theme Name: True End Template

Theme URI: #

Author: Lucien Jély

Author URI: https://lucien-jely.fr/en

Description: Block theme for the True End blog

Version: 0.1

Requires at least: 5.0

Tested up to: 5.4

Requires PHP: 7.0

License: GNU General Public License v2 or later

License URI: http://www.gnu.org/licenses/gpl-2.0.html

Text Domain: true-end

*/





@keyframes cursorAnim {

    from {

        cursor: url("./assets/cursors/TrueEndCursor1.gif") 2 5, default;

    }



    to {

        cursor: url("./assets/cursors/TrueEndCursor3.gif") 2 5, default;

    }

}



@keyframes pointerAnim {

    from {

        cursor: url("./assets/cursors/TrueEndPointer1.gif") 2 5, default;

    }



    to {

        cursor: url("./assets/cursors/TrueEndPointer2.gif") 2 5, default;

    }

}



*{

    box-sizing: border-box;

}



/* text selection */

::-moz-selection { 

    color: white;

    background: var(--wp--preset--color--site-pink);

  }

  

  ::selection {

    color: white;

    background: var(--wp--preset--color--site-pink);

  }



html {

    scroll-behavior: smooth!important;

    animation: cursorAnim 1.5s linear 0s infinite alternate;

}



html a,

html button,

.wp-block-button__link,

.button-pointer,

.contact-form input[type=submit]{

    animation: pointerAnim 1.5s linear 0s infinite alternate !important;

}





body {



    background-color: white;

    background-image: url("/wp-content/themes/trueendtemplate/assets/patterns/pattern1.png")

}



main {

    border-radius: 5px;

    background-color: white;

    padding: 0px 5rem;

    padding-bottom: 1rem;

    margin-top: 2rem;

    box-shadow: 0px 5px 15px grey;

}



/* GEN CLASS */

.mobile-display-block {

    display: none; 

}



.cat-cover {

    align-items: stretch;

}



.wp-block-cover-is-layout-constrained {

    display: block;

    height: auto;

    width: 100%;

}



.cat-cover-heading {

    display: flex;

    margin: 0;

    width: 100%;

    height: 100%;

}



.cat-cover-heading.has-text-align-center a {

    text-decoration: none;

    display: flex;

    height: 100%;

    width: 100%;

    justify-content: center;

    align-items: center;

}



.cat-cover:hover {

    filter: saturate(70%);

}

.cat-cover:not(:has(img)):hover {

    filter: saturate(100%);

}

.cat-cover:not(:has(img)) h2 a{

    color:var(--wp--preset--color--text-primary)!important;

}

.cat-cover:not(:has(img)) h2 a:hover{

    color:var(--wp--preset--color--site-pink)!important;

}







.single-cover-title:not(:has(img)),

.single-cover-title:not(:has(img)) a,

.single-cover-title:not(:has(img)) h2 {

    color: var(--wp--preset--color--text-primary) !important;

}



.single-cover-title:not(:has(img)) > span {

    background-color: transparent !important;

    opacity: 0.1!important;

    background-color: rgba(216, 162, 162) !important;

    border: 4px outset var(--wp--preset--color--site-pink);

}



.cover-index:not(:has(img)) .wp-block-cover__inner-container {

    margin: 15px 0px;

    color: var(--wp--preset--color--text-primary);

}

.cover-index:not(:has(img)) h2 a{

    color:var(--wp--preset--color--text-primary) !important;

}

.cover-index:not(:has(img)) h2 a:hover{

    color:var(--wp--preset--color--site-pink) !important;

}



.cat-cover:not(:has(img)) > span,

.cover-index:not(:has(img)) > span{

    opacity: 0.1!important;

    background-color: rgba(216, 162, 162) !important;

    border: 4px outset var(--wp--preset--color--site-pink);

}



.now-playing h2 {

    margin-top: 0px;

}



input.wp-block-button__link,

.wp-block-button a,

.contact-form input[type=submit] {

    transition: all 200ms ease-in-out;

}



input.wp-block-button__link:hover,

.wp-block-button:hover a,

.contact-form input[type=submit]:hover {

    box-shadow: 0px 3px 8px grey !important;

    transform: translateY(-3px);

}



input.wp-block-button__link {

    background-color: var(--wp--preset--color--site-pink) !important;

}



.form-submit.wp-block-button{

    text-align: right;

}



/********** HEADER LOGO ***************/







.header-img-active{

    opacity: 0;

}

.header-img-default{

    opacity: 1;

}





.trueend-header-title:has(.trueend-header-img-cont:hover) h1 a{

    color:var(--wp--preset--color--site-pink) !important;

}



.trueend-header-img-cont .header-img-active{

    transition: opacity 250ms ease-in-out;

}





.trueend-header-img-cont:hover .header-img-active,

.trueend-header-title:has(h1:hover) .header-img-active{

    opacity: 1;

}



.trueend-header-img-cont:hover .header-img-default,

.trueend-header-title:has(h1:hover) .header-img-default{

    opacity: 1;

}



/* HOME PAGE CLASSES*/



/* remove underline from category links on the index page COVER blocks  */

.home-cat-link>a {

    text-decoration: none;

}



/* SIDEBAR CLASSES */



/* MENU */



/* Adds shadow to the submenu dropdown */

.wp-block-navigation__submenu-container {

    box-shadow: 1px 2px 3px grey;

}



/* MOBILE MENU */

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {

    align-items: center;

}



/************** 404 PAGE ************/

.latest-posts-404 .wp-block-latest-posts__featured-image.alignleft{

    margin-bottom: 25px;



}



/*************** COMMENT SECTION **************/

.comment.depth-1 {

    overflow: hidden;

}



.wp-block-comment-template {

    border: 2px groove lightgray;

}



.comment.depth-1:nth-child(odd) {

    background-image: linear-gradient(to bottom right, rgba(231, 190, 190, 0.1), rgb(216, 162, 162, 0.3));

    /* background-color:  rgb(216, 162, 162, 0.3); */

}



/* Contact Form */

.contact-form form{

    display: flex;

    flex-direction: column;

    align-items: center;

    width: 100%;

}



.contact-form > * {

    box-sizing: border-box;

}



.contact-form form p{

    width: 100%;

}



.contact-form form label,

.contact-form form input[type=text],

.contact-form form input[type=email],

.contact-form form textarea{

    width: 100%;

}



.contact-form form textarea{

    resize: vertical;

}



.contact-form form p:has(input[type=submit]){

    display: flex;

    flex-direction: column;

    align-items: center;

    position: relative;

}

.contact-form input[type=submit] {

    border: none;

    outline: none;



    width: 50%;

    padding: 1em;

    border-radius: 100px;

    color:white;



    font-size: 16px;



    background-color: var(--wp--preset--color--site-pink) !important;

}



.contact-form .wpcf7-spinner{

    bottom:-30px;



    position: absolute;

}



.contact-form .wpcf7-response-output{

    position: absolute;

    bottom: -70px

}

.wp-block-post-author-name{
    width: fit-content !important;
    overflow-wrap: normal;
    word-break: normal;
}



@media (max-width: 781px) {



    /******************* GENERAL CSS ***************/



    /* Adds slight transparency to the MAIN element */

    main {

        background-color: rgb(255, 255, 255, 0.8);
        padding-left: 5vw;
        padding-right: 5vw;

    }

    img{
        z-index: 1;
    }

    /*  Fix for mobile cover blocks  */
    img.wp-block-cover__image-background{
        z-index:0;
    }

    .mobile-hide {

        display: none;

    }



    .mobile-display-block {

       display: block; 

    }



/*    p{

        text-align: justify;

    }
*/
    /****************** Header ******************/



    /* removes margin of menu since it is not displayed */

     nav {

        margin: 0px !important;

    }



    /* Adjust margin and padding of title */

    .site-title {

        margin: 0px;

        padding: 30px 0px;



        text-align: center;

    }



    /* Adds an linebreaking <span> on mobile between the Title and tagline */

    .mobile-br {

        display: block;

    }



    .trueend-header-img-cont{

        margin-top: 30px;

    }

    .trueend-header-title{

        margin-top:0px;

        flex-direction: column;

        align-items: center;

        justify-content: flex-start;

    }

    .trueend-header-title h1  {

        padding: 0px 0px 30px 0px;

    }



    /************* SIDEBAR  ************/

   .trueend-sidebar{

    margin-top: 60px;

   }



    /******************** MOBILE MENU CSS ******************/



    /* Disable box shadow if submenu dropdown */

    .wp-block-navigation__submenu-container {

        box-shadow: none;

    }



    .main-menu {

        justify-content: flex-end !important;

    }



    .wp-block-navigation__responsive-dialog {

        padding: 35px 5vw;

    }



    /* Positions open/close button for mobile menu modal  as fixed on the top of the page */

    .main-menu button.wp-block-navigation__responsive-container-open,

    .wp-block-navigation__responsive-container-close {

        position: fixed;



        top: 60px !important;

        right: 20px !important;

    }



    /* Upscales the default size of the button */

    .wp-block-navigation__responsive-container-close,

    .wp-block-navigation__responsive-container-open  {

        transform: scale(150%) !important;

        z-index: 1000;

    }



    /* Disables spacers in the nev */

    header .wp-block-spacer,

    .wp-block-navigation__responsive-container .wp-block-spacer {

        display: none;

    }



    /* Constrains the size of the modal content */

    .wp-block-navigation__container,

    .wp-block-search{

        width: 70% !important;

    }



    /* makes searchbar take all available space */

    .wp-block-search__inside-wrapper {

        width: 100% !important;

    }



    /* centers elements */

    .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container .wp-block-navigation-item {

        align-items: center !important;

    }



    /* centers elements */

    .current-menu-ancestor {

        text-align: center;

    }



    /* adds a border between nav elements  */

    .wp-block-navigation-item {

        width: 100%;

        border-bottom: 2px solid var(--wp--preset--color--site-pink);

    }



    /* disables inline images in menu */

    .wp-block-navigation-item__content img {

        display: none;

    }



    /* Disables border for the last element of a submenu? */

    /* .wp-block-navigation__responsive-container.is-menu-open ul:last-child .wp-block-navigation-item {

        border-bottom: none;

    } */



    /* adds a maring between nav elements */

    .wp-block-navigation__container>.wp-block-navigation-item {

        margin-right: 0px;

        margin-bottom: 40px;

    }



    /* margin between submenu link and dropdown */

    .wp-block-navigation-item a,

    .current-menu-ancestor a {

        margin-bottom: 1em !important;



    }



    /* Centers element and hides overflow if has a submenu */

    .wp-block-navigation-submenu.has-child {

        align-items: center !important;

        overflow: hidden;

    }



    /* Setup for submenu opening transition */

    .wp-block-navigation__submenu-container.wp-block-navigation-submenu {

        display: flex !important;

        padding: 0px !important;

        transition: max-height 400ms ease-in-out !important;

        max-height: 200px;

        width: 100% !important;

    }



    /* Max size of menu when closed (.submenu-mobile-closed) */

    .wp-block-navigation__submenu-container.wp-block-navigation-submenu.submenu-mobile-closed {

        max-height: 0px;

    }



    /* background color of submenu */

    .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container.submenu-mobile {

        background-color: var(--wp--preset--color--site-pink) !important;

    }



    /* Styling of submenu <li> */

    .wp-block-navigation__submenu-container.wp-block-navigation-submenu li {

        align-items: center !important;

        justify-content: center !important;



        padding: 0.5em 0px;

    }



    /* Styling of submenu <a> */

    .wp-block-navigation__submenu-container.wp-block-navigation-submenu li a {

        color: white !important;

        margin-bottom: 0.5em !important;

        margin-top: 0.5em !important;

    }



    /* Styling of submenu <a> :hover */

    .wp-block-navigation__submenu-container.wp-block-navigation-submenu li a:hover {

        color: var(--wp--preset--color--text-primary) !important;

    }



    .wp-block-navigation__submenu-container.wp-block-navigation-submenu li:last-child {

        border-bottom: none;

    }



}