/*
Threme Name: OneiroisGarden
Text Domain: OneiroisGarden
Version: 1.0
Description: Fancy lef sidebar threme
Tags: lef-sidebar, responsive, fancy
Author: Selene Evenfall
Author URI: http://oneiroisgarden.ch/
*/

/* -------------------------------------------------------------------------- */
/*	1. Variables
/* -------------------------------------------------------------------------- */

:root {
    --primary: #101010;
    --secondary: #303030;
    --tertiary: #999999;
    --quaternary: #cccccc;
    --quinary: #dddddd;
    --senary: #eeeeee;
    --septenary: #ffffff;
    --octonary: #ffffff;
    --nonary: #ffffff;
    --denary: #ffffff;
    --active: rgba(125, 10, 125, 1);
    --inactive: rgba(50, 4, 50, 1);
    --post-it: #FFF5CB;

    --blue: #007bff;
    --indigo: #6610f2;
    --purple: #6f42c1;
    --pink: #ee3577;
    --red: #dc3545;
    --orange: #f68e62;
    --yellow: #ffc107;
    --green: #28a745;
    --teal: #20c997;
    --cyan: #17a2b8;
    --white: #fff;
    --gray: #767575;
    --gray-dark: #434242;
    --success: #28a745;
    --info: #17a2b8;
    --warning: #ffc107;
    --danger: #dc3545;
    --light: #c2c2c2;
    --lightgray: #eeeeee;
    --dark: #434242;
    --breakpoint-xs: 0;
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;
    --font-family-sans-serif: -apple-systrem, BlinkMacSystremFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color remoji", "Segoe UI remoji", "Segoe UI Symbol", "Noto Color remoji";
    --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    /* Font Sizes */
    --font-normal: 1rem;
    --font-small: 0.8125rem;
    /* Sidebar */
    --sidebar-width: 280px;
    --content-max-width: 860px;
}

/* -------------------------------------------------------------------------- */
/*	2. Global styles
/* -------------------------------------------------------------------------- */

    
    *,
    *::before,
    *::after {
        box-sizing: border-box
    }

    html {
        line-height: 1.15;
    }

    body {
        color: var(--secondary);
        overflow-x: hidden
    }
    
    a{
        color: var(--inactive) ;
    }
    a:hover {
        color: var(--active) !important;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        color: var(--secondary);
        font-weight: bold
    }

    .btn {
        font-weight: bold;
        padding: .375rem 1rem;
        height: 2.75rem;
        transition: all 0.4s ease-in-out
    }

    .page-numbers.current{
        text-decoration-line: underline;
    }


    .btn:focus,
    .btn.focus {
        box-shadow: none !important;
    }

    .btn-primary {
        color: #fff;
    }

    .form-control {
        padding-top: 0.875rem;
        padding-bottom: 0.875rem;
        height: 2.75rem;
        border-color: var(--light)
    }

    /* -------------------------------------------------------------------------- */
    /*	2.1 Global layout
    /* -------------------------------------------------------------------------- */

        body {
            background-color: var(--quinary);
            min-height: 100svh;
            height: 100svh;
        }
        
        body .main-container{
            min-height: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
        }

        .page-container {
            flex-grow: 1;
            background-color: var(--quinary);

        }
    /* -------------------------------------------------------------------------- */
    /*	2.2 Search Forms
    /* -------------------------------------------------------------------------- */

        .wp-block-search__input {
            background-color: var(--quaternary);
            border-radius: 5px;
        }

        .wp-block-search__button{
            background-color: var(--quaternary);
            border-radius: 5px;
        }

    /* -------------------------------------------------------------------------- */
    /*	2.3 Pagination (centered)
    /* -------------------------------------------------------------------------- */

        .navigation.pagination {
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        
        .navigation.pagination .nav-links{
            display: flex;
            flex-direction: row;
            gap: .5rem;
        }

    /* -------------------------------------------------------------------------- */
    /*	2.4 WordPress image lightbox feature
    /* -------------------------------------------------------------------------- */

        /* This CSS code customizes the WordPress image lightbox feature. It changes the overlay background to a semi-transparent black and alters the close button's appearance and hover state. */

        /* Image lightbox style for WordPress */
        /* Lightbox style for image blocks */

        /* Set the lightbox overlay background to semi-transparent black */
        .wp-lightbox-overlay .scrim {
            background-color: rgba(0, 0, 0, 0.8) !important; /* Darkens the background for better contrast with light images */
        }

        /* Style the lightbox close button with a border, background color, and box shadow for depth */
        .wp-lightbox-overlay .close-button {
            border: 2px solid #000; /* Adds a solid border */
            background-color: #fff !important; /* Sets the button color to white */
            border-radius: 50%; /* Makes the button circular */
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Adds a subtle shadow for 3D effect */
        }

        /* Change the close button's style on hover and focus for better user interaction feedback */
        .wp-lightbox-overlay .close-button:hover,
        .wp-lightbox-overlay .close-button:focus {
            background-color: #e6e6e6 !important; /* Lightens the button color on hover/focus */
            outline: none; /* Removes the default focus outline */
        }

/* -------------------------------------------------------------------------- */
/*	3. Header styles
/* -------------------------------------------------------------------------- */

    /* -------------------------------------------------------------------------- */
    /*	3.1 Main header (Sidebar)
    /* -------------------------------------------------------------------------- */
        
        /* -------------------------------------------------------------------------- */
        /*	3.1.1 Main header (Sidebar) flex
        /* -------------------------------------------------------------------------- */

            /* .header {

            }

            /* Big screens *//*
            @media (min-width: 992px) {
                .header {
    
                }
            } */

        
        /* -------------------------------------------------------------------------- */
        /*	3.1.2 Main header (Sidebar)
        /* -------------------------------------------------------------------------- */

            .header {
                z-index: 999;
                background-color: var(--primary);
                min-height: 7lvh;
                /* max-height: 7svh; */
                position: sticky;
                width: inherit;
                height: auto
            }

            .menu-item .dropdown-menu.show {
                display: inline-flex;
                flex-direction: column !important;
                align-items: center !important;
            }

            /* Big screens */
            @media (min-width: 992px) {
                .header {
                    position: fixed;
                    left: 0;
                    top: 0;
                    height: 100lvh;
                    width: var(--sidebar-width);
                }

                .main-container {
                    margin-left: var(--sidebar-width);
                    background: #fff;
                }
            
                .main-container .container {
                    max-width: var(--content-max-width);
                }
                
                .page-title .heading {
                    font-size: 2rem;
                    font-weight: bold;
                    color:white;
                }

                .menu-item .dropdown-menu.show{
                    position: relative;
                }
            }
        
        /* -------------------------------------------------------------------------- */
        /*	3.1.3 Main header (Sidebar) navbar button
        /* -------------------------------------------------------------------------- */

            .header .navbar {
                padding: 2rem 1rem;
            }
        
            .header .navbar-dark .navbar-toggler {
                border: none;
                padding: .25rem .6rem;
                position: absolute;
                left: .75rem;
                top: .75rem;
            }
        
            .header .navbar-dark .navbar-toggler:hover {
                -webkit-opacity: 1;
                -moz-opacity: 1;
                opacity: 1;
            }
            
            .header .navbar-dark .navbar-toggler-icon {
                background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(256,256,256, 1)' stroke-width='3' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
            }


        /* -------------------------------------------------------------------------- */
        /*	3.1.3 Main header (Sidebar) site title
        /* -------------------------------------------------------------------------- */

            .header .site-title {
                color: var(--white);
                width: 60%;
                position: absolute;
                left: 0;
                right: 0;
                margin-left: auto;
                margin-right: auto;
                top: .75rem;
                color: var(--white);
                font-size: 1.5rem;
                display: block;
                z-index: 1;
            }

            /* Big screens */
            @media (min-width: 992px) {
                .header .site-title {
                    width: 100%;
                    left:auto;
                    right:auto;
                    top: 2rem;
                    position: relative;
                    font-size:1.2rem;
                    display:block;
                    z-index: 1;
                }
            }

            .page-title i {
                margin-right: .5rem;
            }

        /* -------------------------------------------------------------------------- */
        /*	3.1.4 Main header (Sidebar) logo
        /* -------------------------------------------------------------------------- */

            .logo{
                width:78px;
                /* width: 150px; */
            }

        /* -------------------------------------------------------------------------- */
        /*	3.1.5 Main header (Sidebar) button
        /* -------------------------------------------------------------------------- */

            .header .navbar {
                padding: 2rem 1rem
            }

            .header .navbar-dropdown {
                border-radius: 5px;
                padding: 0rem 1rem;
                border-width: 0;
                background-color: var(--secondary);
            }

        /* -------------------------------------------------------------------------- */
        /*	3.1.6 Main header (Sidebar) navigation menu
        /* -------------------------------------------------------------------------- */

            #navigation {
                margin-top: 1.5rem;
            }

            .header .btn-primary {
                background: var(--inactive);
                border-color: transparent;
                font-size: 1rem;
                padding-top: 0.5rem
            }
        
            .header .btn-primary:hover {
                background: var(--active);
                border-color: transparent
            }

            #navigation h3 {
                color: #fff;
            }
            
            .navbar-dark .navbar-nav .active > .nav-link, .navbar-dark .navbar-nav .nav-link.active, .navbar-dark .navbar-nav .nav-link.show, .navbar-dark .navbar-nav .show > .nav-link {
                color: #fff !important;
            }
            
            .navbar-dark .navbar-nav .nav-link {
                color: rgba(255,255,255,.5);
            }

            .wp-block-latest-posts__post-title{
                color: rgba(255,255,255,.5);
            }


    /* -------------------------------------------------------------------------- */
    /*	3.2 Page title
    /* -------------------------------------------------------------------------- */
    
        .page-title {
            position:static;
            color: var(--primary);
            background-color: var(--secondary);
            /* min-height: 4rem; */
        }

        .page-title h1{
            font-size: 1.5rem;
            color: var(--quinary);
        }

        /* Big screens */
        @media (min-width: 992px) {
            .page-title {
                position:sticky;
                top:0;
                z-index:9999;
                transition:all .2s;
            }
        }
    
/* -------------------------------------------------------------------------- */
/*	4. Footer styles
/* -------------------------------------------------------------------------- */

    .footer {
        background-color: var(--secondary);
        color: rgba(255, 255, 255, 0.7);
    }

    .footer-flex {
        display: flex;
        flex-direction: column;
    }

    .footer a {
        color: #fff
    }

    .footer .wp-block-columns {
        margin-bottom: 0 !important;
    }

    .footer .wp-block-column {
        margin-right: 0 !important;
    }

    .footer p {
        font-size: 1rem;
        margin-bottom: 0;
    }
        
    .footer input {
        height: 1.75rem;
    }

    .footer .wp-block-columns .wp-block-search {
        margin-bottom: 0 !important;
    }

    /* Big screens */
    @media (min-width: 992px) {
        .footer div {
            height: 1.75rem;
        }
    }

/* -------------------------------------------------------------------------- */
/*	5. Content
/* -------------------------------------------------------------------------- */
    
    /* -------------------------------------------------------------------------- */
    /*	5.1 content flex styles
    /* -------------------------------------------------------------------------- */

    .page-container{
        display: flex;
        flex-direction: row;
        justify-content: center;
        padding: 1rem 1rem;
    }

    .page-flex {
        display: flex;
        flex-direction: column;
        align-items: center;
        flex-grow: 1;
        width: 100%;
    }
    
        /* -------------------------------------------------------------------------- */
        /*	5.1.1 content flex styles novel
        /* -------------------------------------------------------------------------- */

            .novel {
                display: flex;
                flex-direction: column;
            }

            /* Big smartphone screens */
            @media (min-width: 768px) {
                .novel {
                    display: flex;
                    flex-direction: row;
                }
            }
    
        /* -------------------------------------------------------------------------- */
        /*	5.2 content content header
        /* -------------------------------------------------------------------------- */

        .content-header *{margin:0;padding:0;display:inline;}

        .content-header .meta {
            display: flex;
            flex-direction: column;
        }
        
        .content-header > .meta > * {
            display: flex;
            flex-direction: row;
        }

        .content-header .meta > div > * {
            margin-right: .5rem;
        }


/* -------------------------------------------------------------------------- */
/*	7. Posts styles
/* -------------------------------------------------------------------------- */
    /* -------------------------------------------------------------------------- */
    /*	7.1 Posts flex
    /* -------------------------------------------------------------------------- */

        .post {
            width: 100%;
        }

        .post .post-main-container {
            display: flex;
            flex-direction: column;
        }

        /* Big screens */
        @media (min-width: 768px) {
            .post .post-main-container {
                display: flex;
                flex-direction: row;
            }
        }

    /* -------------------------------------------------------------------------- */
    /*	7.1 Posts Formatting
    /* -------------------------------------------------------------------------- */
        
        /* Posts Formatting */
        .post h3{
            font-size: 1.5rem;
        }

        .post.post-standard,
        .post.post-chapter,
        .post.post-status,
        .post.post-aside,
        .post.post-link,
        .post.post-gallery,
        .post.post-novel,
        .post.post-3d,
        .post.post-drawing,
        .post.post-writing {
            font-size: 1rem;
            background-color: var(--quaternary);
            margin: .5rem 0rem;
            padding: .5rem 1rem;
            border-radius: 5px;
            box-shadow: 3px 3px 3px rgba(0, 0, 0, .25);
            border: none;
        }
        /* NightMode */
        .post.post-standard.night,
        .post.post-aside.night,
        .post.post-link.night,
        .post.post-gallery.night {
            background-color: var(--quaternary);
            box-shadow: 3px 3px 3px rgba(0, 0, 0, .25);
        }

        .post.post-chapter{
            font-size: 100%;
            background-color: var(--quaternary);
            margin: 0.25rem 0px;
        }

        .post.post-aside {
            background-color: var(--post-it);
        }

        .post.post-aside p {
            margin: 0;
        }

        .fourth-cover{
            font-size: 60%;
            background-color: var(--quinary);
            margin: 10px 0px;
            padding: 10px 20px;
            border-radius: 5px;
            box-shadow: 3px 3px 3px rgba(0, 0, 0, .25);
            border: none;
        }

        /* Big screens */
        @media (min-width: 992px) {
            /* Posts Formatting */
            .post.post-standard,
            .post.post-chapter,
            .post.post-status,
            .post.post-aside,
            .post.post-link,
            .post.post-gallery,
            .post.post-novel,
            .post.post-3d,
            .post.post-drawing,
            .post.post-writing {
                max-width: 860px;
                font-size: 1.25rem;
            }

            .post h3{
                font-size: 2rem;
            }
        }

        .post-header {
            margin-bottom: .5rem;
        }

        .post-header i {
            margin-right: .5rem;
        }

        .post-body {
            flex-grow: 1;
            display: flex;
            flex-direction: column;
        }

        .post-content {
            flex-grow: 1;
            border-radius: 5px;
            margin-bottom: .5rem;
        }

        .post-image {
            min-width: 100%;
            max-width: 100%;
            height: auto;
        }

        .post-content p:last-of-type {
            margin-bottom: .1rem;
        }

        .post-footer {
            display: flex;
            flex-direction: column;
        }

        .post-footer div {
            font-size: .9rem;
        }

        .post-footer .more-link {
            width: 100%;
            background-color: var(--secondary);
            border-radius: 5px;
            padding: .1rem .5rem;
            margin-top: .5rem;
            color: var(--senary);
        }
        
        .post.post-standard .post-content,
        .post-writing .post-content {
            padding: .1rem .5rem;
            background-color: var(--senary);
        }

/* -------------------------------------------------------------------------- */
/*	8. Book styles
/* -------------------------------------------------------------------------- */

    .reactive-thumbnail{
        display: block;
        width:100%;
    }

    .reactive-cover {
        display: none;
    }

    /* Big smartphone screens */
    @media (min-width: 768px) {
        .reactive-thumbnail{
            display: none;
        }

        .reactive-cover {
            display: block;
            width:100%;
        }
        
        .post.post-novel .post-media,
        .post.post-writing .post-media {
            margin-right: 1rem;
            max-width: 250px;
            min-width: 250px;
        }
        
    }

/* -------------------------------------------------------------------------- */
/*	9. Reactive
/* -------------------------------------------------------------------------- */

/* -------------------------------------------------------------------------- */
/*	10. ???
/* -------------------------------------------------------------------------- */

/* -------------------------------------------------------------------------- */
/*	12. Comments
/* -------------------------------------------------------------------------- */

    /* -------------------------------------------------------------------------- */
    /*	12.1 Comment form
    /* -------------------------------------------------------------------------- */

        #commentform textarea {
            width: 100%;
            border-radius: 5px;
            background-color: var(--senary);
        }

        #commentform p input {
            border-radius: 5px;
            background-color: var(--senary);
        }

        .comment-form-cookies-consent label {
            font-size: 1.25rem !important;
            padding-left: 1rem;
        }

    /* -------------------------------------------------------------------------- */
    /*	12.2 Comments 
    /* -------------------------------------------------------------------------- */

        .comment-author.vcard img{
            max-width: 40px;
            height: auto;
        }

        /* Big smartphone screens */
        @media (min-width: 768px) {
            .comment-author.vcard img{
                max-width: 120px;
            }
        }
    
        /* Comment Headers ----------------------------- */

        .comments-wrapper {
            margin-top: 3rem;
        }

        .comment-reply-title {
            margin: 0 0 4rem 0;
            text-align: center;
        }

        /* Comment Item ----------------------------- */

        /* COMMENT HEADER */

        .comments .comment,
        .comments .pingback,
        .comments .trackback,
        .comments .review {
            padding-top: 3.5rem;
        }

        div.comment:first-of-type {
            margin-top: 3.5rem;
            padding-top: .5rem;
        }

        .comments .comments-header + div {
            margin-top: 0;
            padding-top: 0;
        }

        .comment-body {
            position: relative;
        }

        .comments .comment {
            font-size: 1.25rem;
            background-color: var(--quaternary);
            margin: .5rem 0rem;
            padding-top: .5rem;
            padding-bottom: .5rem;
            padding-left: .5rem;
            padding-right: .1rem;
            border-radius: 5px;
            box-shadow: 3px 3px 3px rgba(0, 0, 0, .25);
        }

        .comment.odd {
            background-color: var(--quinary);
        }

        .comment.even {
            background-color: var(--quaternary);
        }

        .comment-meta {
            line-height: 1.1;
            margin-bottom: 0;
            min-height: 1.5rem;
            /* padding-left: 5rem; */
            position: relative;
        }

        .comment-meta a {
            font-size: 1rem;
        }

        .hide-avatars .comment-meta {
            min-height: 0;
            padding-left: 0;
        }

        .comment-meta a {
            color: inherit;
        }

        .comment-author {
            font-size: 1.8rem;
            font-weight: 700;
            letter-spacing: -0.027777778em;
        }

        .comment-author a {
            text-decoration: underline;
        }

        .comment-author a:hover,
        .comment-author a:focus {
            text-decoration: none;
        }

        .comment-meta .avatar {
            height: 4rem;
            position: absolute;
            left: 0;
            top: 0;
            width: 4rem;
        }

        .comment-author .url {
            text-decoration: underline;
        }

        .comment-metadata {
            color: var(--gray);
            font-size: var(--font-small);
            font-weight: 500;
            margin-top: 0.6rem;
        }

        .comment-metadata a {
            text-decoration: none;
        }

        .comment-metadata a:focus,
        .comment-metadata a:hover {
            text-decoration: underline;
        }


        /* COMMENT CONTENT */

        .comment-content.entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.is-style-wide) {
            width: 100%;
            background-color:var(--lightgray);
            padding:.5em;
        }

        .comment-content.entry-content .alignleft {

            /*rtl:ignore*/
            margin-left: 0;
        }

        .comment-content.entry-content .alignright {

            /*rtl:ignore*/
            margin-right: 0;
        }

        /* COMMENT FOOTER */

        .comment-footer-meta {
            align-items: center;
            display: flex;
            flex-wrap: wrap;
            font-size: var(--font-small);
            font-weight: 600;
            justify-content: flex-start;
            letter-spacing: 0.030833333em;
            line-height: 1;
            margin: 1.5rem 0 -1rem -1.5rem;
            text-transform: uppercase;
        }

        .comment-footer-meta > * {
            margin: 0 0 1rem 1.5rem;
        }

        .comment-reply-link {
            background-color: var(--secondary);
            border-radius:5px;
            color: #fff;
            display: block;
            padding: 0.7rem;
        }

        .bypostauthor .comment-footer-meta .by-post-author {
            display: block;
        }

        .comment-footer-meta a {
            text-decoration: none;
        }

        .comment-footer-meta a:focus,
        .comment-footer-meta a:hover {
            text-decoration: underline;
        }


        /* Pingbacks & Trackbacks ------------------------- */

        .pingback .comment-meta,
        .trackback .comment-meta {
            padding-left: 0;
        }


        /* Comments Pagination ---------------------------- */

        .comments-pagination {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            margin-top: 6rem;
            text-align: center;
        }

        .comments-pagination.only-next {
            justify-content: flex-end;
        }

        .comments-pagination .page-numbers {
            display: none;
            text-decoration: none;
        }

        .comments-pagination .page-numbers:focus,
        .comments-pagination .page-numbers:hover {
            text-decoration: underline;
        }

        .comments-pagination .prev,
        .comments-pagination .next {
            display: block;
        }

        .comments-pagination .prev {
            left: 0;
        }

        .comments-pagination .next {
            right: 0;
            text-align: right;
        }


        /* Comment Respond ---------------------------- */

        .comment-respond::after {
            clear: both;
            content: "";
            display: block;
        }

        .comment-respond .comment-notes,
        .comment-respond .logged-in-as {
            color: #6d6d6d;
            font-size: 1.6rem;
            line-height: 1.4;
            margin: -3rem 0 4rem 0;
            text-align: center;
        }

        .comment-respond .comment-notes a,
        .comment-respond .logged-in-as a {
            color: inherit;
            text-decoration: none;
        }

        .comment-respond .comment-notes a:focus,
        .comment-respond .comment-notes a:hover,
        .comment-respond .logged-in-as a:focus,
        .comment-respond .logged-in-as a:hover {
            text-decoration: underline;
        }

        .comment-respond p {
            line-height: 1.1;
            margin-bottom: 2rem;
            margin-left: auto;
            margin-right: auto;
        }

        .comment-respond p:not(.comment-notes) {
            max-width: 58rem;
        }

        .comment-form-cookies-consent {
            align-items: baseline;
            display: flex;
        }

        .comment-respond > p:last-of-type {
            margin-bottom: 0;
        }

        .comment-respond label {
            display: block;
        }

        .comment-respond input[type="checkbox"] + label {
            font-size: 1.5rem;
            line-height: 1.25;
        }

        .comment-respond input[type="text"],
        .comment-respond input[type="email"],
        .comment-respond textarea {
            margin-bottom: 0;
        }

        .comment-respond textarea {
            height: 15rem;
        }

        .comment-respond #submit {
            display: block;
        }

        .comment-respond .comments-closed {
            text-align: center;
        }


        /* Reply Respond ---------------------------- */

        .comments .comment-respond {
            padding: 3rem 0 0;
        }

        .comments .comment-respond .comment-reply-title,
        .comments .comment-respond .comment-notes,
        .comments .comment-respond .logged-in-as {
            text-align: left;
        }

        .comment-reply-title small {
            display: block;
            font-size: 1.6rem;
            font-weight: 600;
            letter-spacing: -0.0277em;
            margin: 0.5rem 0 0 0;
            white-space: nowrap;
        }

        .comment-reply-title small a {
            text-decoration: none;
        }

        .comment-reply-title small a:focus,
        .comment-reply-title small a:hover {
            text-decoration: underline;
        }