/* 
Theme Name:		 Toocheke Child
Theme URI:		 https://www.toocheke.com/
Description:	 Toocheke Child is a child theme of Toocheke
Author:			 LeeToo
Author URI:		 https://leetoo.net/
Template:		 toocheke
Version:		 1.0.21
Text Domain:	 toocheke-child
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
*/


/* Write here your own personal stylesheet */
/* =======================
   Calibri Webfont Family
   ======================= */

/* Regular */
@font-face {
    font-family: 'Calibri';
    src: url('dist/fonts/Calibri/Calibri.woff2') format('woff2'),
        url('dist/fonts/Calibri/Calibri.woff') format('woff'),
        url('dist/fonts/Calibri/Calibri.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* Italic */
@font-face {
    font-family: 'Calibri';
    src: url('dist/fonts/Calibri/Calibri-Italic.woff2') format('woff2'),
        url('dist/fonts/Calibri/Calibri-Italic.woff') format('woff'),
        url('dist/fonts/Calibri/Calibri-Italic.ttf') format('truetype');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

/* Bold */
@font-face {
    font-family: 'Calibri';
    src: url('dist/fonts/Calibri/Calibri-Bold.woff2') format('woff2'),
        url('dist/fonts/Calibri/Calibri-Bold.woff') format('woff'),
        url('dist/fonts/Calibri/Calibri-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* Bold Italic */
@font-face {
    font-family: 'Calibri';
    src: url('dist/fonts/Calibri/Calibri-BoldItalic.woff2') format('woff2'),
        url('dist/fonts/Calibri/Calibri-BoldItalic.woff') format('woff'),
        url('dist/fonts/Calibri/Calibri-BoldItalic.ttf') format('truetype');
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}

body {
    font-family: 'Calibri', -apple-system, BlinkMacSystemFont, sans-serif !important;
    text-rendering: optimizeLegibility;
    text-size-adjust: 100%;
    background: linear-gradient(180deg, #000000 1200px, rgba(23, 21, 21, 0) 100%);
}

body#tinymce {
    background: #fff !important;
}

body.page {
    margin-bottom: 0px !important;
}
body.page:not(.page-template-comic-characters) {
    padding-bottom: 30px;
}
h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: bold;
}


.navbar-light .navbar-nav .nav-link,
a.dropdown-item,
#archive-menu li a {
    font-weight: 700;
}

.section-wrapper {
    background-color: #f2eadc;
    padding: 40px 60px;
    margin-top: 30px;


}

article.page,
.page article.post,
.page-template-comic-collections #left-content,
.page-template-top-ten-comics #left-content,
.page-template-series-genres #left-content,
.page-template-comic-characters #left-content,
.page-template-comic-chapters #left-content,
.error404 #left-content,
.archive #left-content  {
    /*padding: 40px 60px !important;*/
    padding: 30px !important;
}

#comic {
    padding: 15px 30px;
}
#comic p{
    text-align: left;
}
/*
#left-col,
#left-content,
#comic,
.section-wrapper {
    box-shadow:
        0 0 1rem rgba(0, 0, 0, 0.2),
        inset 0 0 60px rgba(101, 67, 33, 0.3),
        inset 0 0 30px rgba(101, 67, 33, 0.2) !important;

}
        */


.page #left-content, .archive #left-content, .error404 #left-content {
 background-color: transparent !important;
 border: none !important;

}



.page-template-comic-characters .section-wrapper:nth-child(1),
.tax-comic_characters .section-wrapper:nth-child(1) {
    margin-top: 0px;
}

.comic-title {
    margin-bottom: 15px;
}

#latest-comic {
    margin-bottom: 0 !important;
}

.comic-meta {
    border-top: dotted 1px #000;
}

.single-comic-navigation {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0px;
    background-color: transparent !important;

}


.single-comic-navigation span {
    display: inline-block;
}

.single-comic-navigation img {
    width: auto;
}

.single-comic-navigation.above {
    margin-top: 30px;
    margin-bottom: 15px;
    height: 45px;
    line-height: 45px;
}

.single-comic-navigation.below {
    margin-top: 30px;
    margin-bottom: 30px;
    height: 90px;
    line-height: 90px;
}

.single-comic-navigation.above a:nth-child(3) {
    height: 45px;
    line-height: 45px;


}

.single-comic-navigation.below a:nth-child(3) {
    height: 90px;
    line-height: 90px;
}

.single-comic-navigation.above img,
.single-comic-navigation.above svg {
    max-height: 45px;
    width: auto;
}

.single-comic-navigation.below img,
.single-comic-navigation.below svg {
    margin: 0 auto !important;
    height: auto;
    max-height: 90px;
    width: auto;
}

.single-comic-navigation .comic-image-nav,
.single-comic-navigation svg {
    color: #181b1f;
    fill: #181b1f;
}

.single-comic-navigation a:hover .comic-image-nav,
.single-comic-navigation a:hover svg {
    color: #EE1477;
    fill: #EE1477;
}

.single-comic-navigation a.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
    /* prevents clicking the image */
}

.comment-respond {
    background-color: #E7E6FF;
    border-radius: 1em;
}

.img-rounded {
    border-radius: 0.3em;
}

/* ============================================
   Comic Characters Taxonomy Styles
   ============================================ */

/* Section Wrapper */

.character-section-title {
    margin-bottom: 1.5rem;
    font-weight: bold;
}

/* Character Grid - Base Styles */
.character-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    justify-content: flex-start;
}

/* Two Column Grid (Protagonists & Antagonists) */
.character-grid-two-col {
    /* Mobile: 1 column */
}

.character-grid-two-col .character-card {
    flex: 0 0 100%;
}

/* Supporting Characters Grid */
.character-grid-supporting .character-card {
    flex: 0 0 100%;
}

/* Character Card */
.character-card {
    margin-bottom: 1rem;
}

.character-card-inner {
    display: flex;
    gap: 1rem;
    align-items: center;
}

.section-wrapper:nth-child(1) .character-card-inner,
.section-wrapper:nth-child(2) .character-card-inner {
    align-items: start;
}

.section-wrapper:nth-child(3) .character-card-inner {
    align-items: center;
}

/* Character Image */
.character-image {
    flex: 0 0 30%;
}

.character-grid-supporting .character-image {
    flex: 0 0 25%;
}

.character-image img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 0.3em;
    transition: opacity 0.3s ease;
}

.character-image a:hover img {
    opacity: 0.7;
}

/* Character Info */
.character-info {
    flex: 0 0 70%;
}

.character-grid-supporting .character-info {
    flex: 0 0 75%;
}

.character-name {
    margin-top: 0;
    margin-bottom: 0.5rem;
}

.character-name a {
    text-decoration: none;
    color: #EE1477;
}

.character-name a:hover {
    text-decoration: underline;
}

.character-description {
    margin: 0;
    line-height: 1.6;
}



.page-template-comic-characters main {
    padding-bottom: 45px;
}

.tax-comic_characters .header-below-jumbotron+main #content {
    margin-top: 30px !important;
}

/* ============================================
   Comic Grid Styles
   ============================================ */

.comic-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 2rem;
}

.comic-grid-item {
    flex: 0 0 calc(50% - 0.5rem);
}

.comic-grid-item a {
    display: block;
}

.comic-grid-item img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 0.3em;
    transition: opacity 0.3s ease;
}

.comic-grid-item a:hover img {
    opacity: 0.7;
}

/* ============================================
   Chapter Archive Styles
   ============================================ */

.chapter-archive-wrapper {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    margin-bottom: 2rem;
}

.chapter-archive-row {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

/* Chapter Image */
.chapter-archive-image {
    width: 100%;
}

.chapter-archive-image img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 0.3em;
}

/* Chapter Content */
.chapter-archive-content {
    width: 100%;
}

.chapter-title {
    margin-top: 0;
    margin-bottom: 1rem;
    font-weight: bold;
}

.chapter-comics-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.comic-archive-item {
    padding: 0.5rem 0;
    border-bottom: 1px dotted #000;
}

.comic-archive-item:last-child {
    border-bottom: none;
}

.comic-archive-item a {
    text-decoration: none;
    color: inherit;
    display: block;
    transition: color 0.2s ease;
}

.comic-archive-item a:hover {
    color: #EE1477;
    text-decoration: underline;
}

#one-comic-option {
    display: flow-root;
}



/* ========================================================================
   RESPONSIVE QUERIES
   ======================================================================== */
@media screen and (min-width: 768px) {
    .chapter-archive-row {
        flex-direction: row;
        gap: 1.5rem;
    }

    .chapter-archive-image {
        flex: 0 0 25%;
    }

    .chapter-archive-content {
        flex: 0 0 75%;
    }

    .comic-grid-item {
        flex: 0 0 calc(25% - 0.75rem);
    }

    #comic img.alignleft {
        max-width: 45%;
        height: auto;
        float: left;
        margin-right: 15px !important;
        margin-bottom: 10px !important;
    }

}

@media screen and (min-width: 1024px) {

    #left-col,
    #left-content,
    #comic,
    .section-wrapper {
        border-radius: 1em;

    }

    .single-comic-navigation.above a:nth-child(3) {
        margin: 0 calc((100% - 600px) / 2);

    }

    /* Two column layout for Protagonists & Antagonists */
    .character-grid-two-col .character-card {
        flex: 0 0 calc(50% - 0.75rem);
    }

    /* Two column layout for Supporting */
    .character-grid-supporting .character-card {
        flex: 0 0 calc(50% - 0.75rem);
    }

    .comic-grid-item {
        flex: 0 0 calc(25% - 0.75rem);

    }

}

@media (min-width: 1200px) {

    /* Keep two columns for Protagonists & Antagonists */
    .character-grid-two-col .character-card {
        flex: 0 0 calc(50% - 0.75rem);
    }

    /* Three columns for Supporting */
    .character-grid-supporting .character-card {
        flex: 0 0 calc(33.333% - 1rem);
    }


}

@media screen and (max-width: 1023px) {

    #traditional-single-comic,
    .single-comic-wrapper,
    .section-wrapper,
    .page-content {
        margin-top: 0 !important;
    }

    .home .header-fixed+main #content,
    .single-comic .header-fixed+main #content,
    .page .header-fixed+main #content,
    .archive .header-below-jumbotron+main {
        padding-top: 0px !important;
    }

    .archive .header-below-jumbotron+main #content {
        margin-top: 0px !important;
    }


    .page-template-comic-characters .section-wrapper,
    .tax-comic_characters .section-wrapper {
        border-bottom: solid 1px rgba(0, 0, 0, 0.1);

    }

    .character-card-inner {
        flex-direction: row;
        /* Keep horizontal layout on mobile */
    }

    .character-image {
        flex: 0 0 30%;
    }

    .character-grid-supporting .character-image {
        flex: 0 0 25%;
    }

    .character-info {
        flex: 0 0 70%;
    }

    .character-grid-supporting .character-info {
        flex: 0 0 75%;
    }
}

@media screen and (max-width: 599px) {
    .single-comic-navigation span {
        display: none;
    }

    .single-comic-navigation.below img,
    .single-comic-navigation.below svg {
        max-height: 45px;

    }

    .character-card-inner {
        flex-direction: column;
    }

    .character-image,
    .character-info {
        flex: 0 0 100% !important;
    }

    .section-wrapper,
    article.page,
    .page article.post,
    .page-template-comic-collections #left-content,
    .page-template-top-ten-comics #left-content,
    .page-template-series-genres #left-content,
    .page-template-comic-characters #left-content,
    .page-template-comic-chapters #left-content,
    .error404 #left-content,
    .archive #left-content {
        padding: 15px !important;
    }

    #comic {
        padding: 15px;
    }

}