/* 
Theme Name:		 Toocheke Premium Child
Theme URI:		 https://www.store.toocheke.com/
Description:	 Toocheke Child is a child theme of Toocheke
Author:			 LeeToo
Author URI:		 https://leetoo.net/
Template:		 toocheke-premium
Version:		 1.0.0
Text Domain:	 toocheke-premium-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 */
/* 
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.0
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 */

/* The box around the comic was much wider than the comic page, this helps to shrink it down*/
#latest-comic {
	margin-bottom: 30px;
	margin-right: auto;
	margin-left: auto;
	text-align: center;
	max-width: 1100px;
}

#comic {
	margin-bottom: 30px;
	margin-right: auto;
	margin-left: auto;
	text-align: center;
	max-width: 1100px;
}

.navbar {
	padding: 0 1rem;
	min-height: 45px;
	box-shadow: 0 5px 11px 0 rgba(50, 50, 50, .08);
	z-index: 500;
	text-align: center;
}

.navbar-expand-md .navbar-nav .dropdown-menu {
	background-color: #ffffff;
	text-align: center;
}

/* --- THE 830PX CENTER STICK (TIGHTENED) --- */

/* 1. Force the main container to 830px and center it */
.site-content .container {
    max-width: 1100px !important;
    width: 100% !important;
    margin-right: auto !important;
    margin-left: auto !important;
    float: none !important;
}

/* 2. Clamp the Row down to 830px so it can't get too wide */
#main-content-row {
    display: block !important;
    width: 100% !important;
    max-width: 1100px !important; /* Added this to fix the 'too wide' issue */
    margin-right: auto !important;
    margin-left: auto !important;
    float: none !important;
}

/* 3. Force the Primary content area to fill that 830px box */
#primary.content-area, 
.col-lg-8,
article.post {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 1100px !important;
    margin-right: auto !important;
    margin-left: auto !important;
    float: none !important;
}

/* 4. Hide Sidebar */
#secondary {
    display: none !important;
}




/* --- THE NAV ALIGNMENT FIX --- */

/* 1. Force the container to be a single row */
.single-comic-navigation {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important; /* Prevents them from jumping to the next line */
    justify-content: center !important; /* Centers the whole group */
    align-items: center !important;     /* Aligns them vertically */
    gap: 10px !important;               /* Space between items */
    width: 100% !important;
    margin: 20px auto !important;
}

/* 2. Make sure the dropdown box doesn't push others away */
#chapter-navigation {
    display: inline-flex !important;
    margin: 0 !important;
    padding: 0 !important;
    vertical-align: middle !important;
}

/* 3. Keep the dropdown menu width sensible */
#chapter-navigation select {
    max-width: 200px !important;
    margin: 0 !important;
}

/* 4. Ensure buttons don't shrink too small */
.single-comic-navigation a {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
}

/* Color the actual dropdown box */
#chapter-navigation select {
    background-color: #20242b !important;
    color: #46ffd8 !important; /* Makes the text readable on dark green */
    border: 0px solid #20242b !important;
    padding: 5px !important;
    border-radius: 0px !important;
}

/* Color the list of chapters inside the dropdown */
#chapter-navigation select option {
    background-color: #20242b !important; /* Keeps the list easy to read */
    color: #46ffd8 !important;
}

/* Change the box color when you move your mouse over it */
#chapter-navigation select:hover {
    background-color: #46ffd8 !important; /* A slightly different green */
    color: #20242b !important;   /* A bright green border */
    cursor: pointer;
}




/* Target the article wrapper that is wider than the comic */
article.post.type-post, 
article.post-type-post {
    max-width: 740px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100% !important;
    float: none !important;
}

/* Force the content inside that article to stay within the 830px */
article.type-post .entry-content,
article.type-post .post-content {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Ensure that long URL doesn't force the article to expand */
article.type-post default-lang {
    max-width: 740px !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    display: block !important;
}

article.type-post p {
    max-width: 740px !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    display: block !important;
}



/* Styling for both Tower Ads */
.tower-ad {
    position: fixed;
    top: 150px; /* Adjust this to line up with the top of your comic */
    width: 160px;
    height: 600px;
    z-index: 100;
}

/* Position Left Ad relative to the center */
.tower-left {
    left: 50%;
    margin-left: -700px; /* Adjust this number to move it closer or further */
}

/* Position Right Ad relative to the center */
.tower-right {
    right: 50%;
    margin-right: -700px; /* Adjust this number to move it closer or further */
}

/* Hide on smaller screens where they would overlap the comic */
@media (max-width: 1350px) {
    .tower-ad {
        display: none !important;
    }
}



.navbar-collapse {
    flex-grow: 0 !important;
}

/* Force the Nav to center its children */
#site-navigation {
    display: flex !important;
    justify-content: center !important;
}

/* Remove any remaining margins that might push the menu */
.navbar-nav {
    margin: 0 !important;
}

/* Center the logo specifically */
.custom-logo-link {
    display: block;
    margin: 0;
		margin-right: 30px !important;
}