/*
Theme Name:readingwithjimmy
Theme URI:https://www.readingwithjimmy.com
Author:Vlatko Zdrale
Author URI:https://www.readingwithjimmy.com
Description:Minimal Bootstrap 5.3 theme for Reading With Jimmy - each post is a book with chapters/segments and embedded YouTube videos.
Version:1.0.0
License:GNU General Public License v2 or later
License URI:https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:readingwithjimmy
Requires at least:6.0
Tested up to:6.7
Requires PHP:7.4
*/

/* Intentionally left mostly empty – using plain Bootstrap only */
:root {--color-primary:#18181A;
 --color-secondary:#75757C;
 --color-dark:#364C62;
 --color-light:#F5F5F5;
 --font-family-primary:"Roboto Mono", monospace;
 --font-family-secondary:"Rubik Mono One", sans-serif;
 --td:150ms;
 --te:cubic-bezier(0.215, 0.61, 0.355, 1);
}
nav {background:#fff }
body {background-color:#7a5c4418; background-repeat:no-repeat; background-size:cover; min-height:100vh; height:100% }
#main {background:#ffffffaa }
h1 {background-color:#7a5c44 !important; color:#fff !important; text-shadow:0 2px 4px rgba(0, 0, 0, 0.8); padding-left:.5rem; font-size:2.5rem}
.video-btn {border-radius:0; text-align:left; padding:.5rem 1rem; width:100%; border-bottom:1px solid #ccc; color:#212529; text-decoration:none; display:flex; align-items:center; justify-content:space-between }
.video-btn small {border-radius:.25rem; background:#f8f9fa; color:#212529bf; display:inline-block; line-height:1; text-align:center; white-space:nowrap; vertical-align:baseline; padding:.25rem .25rem; font-size:.75rem; font-weight:bold }
.video-btn:hover {background:#eee; cursor:pointer }
.video-btn i {margin-right:.5rem; font-family:FontAwesome; font-style:normal }
.video-btn i::before {content:"\f04b"; /* FA 4.7 play icon */ display:inline-block; transition:transform 0.3s ease, color 0.3s ease }
.video-btn:hover i::before {transform:rotate(360deg) scale(1.2); color:#000 }
.video-btn.active-video {background-color:#f6eedf; font-weight:bold; color:#0d6efd; border-left:10px solid #0d6efd }
.video-btn.active-video i {color:#0d6efd }
.quicktake .video-btn i {color:#0dcaf0!important }
.reading .video-btn i {color:#198754 }
.analysis .video-btn i {color:#dc3545 }
.quicktake, .reading, .analysis, .prologue {border-bottom:1px solid #000!important }
button.accordion-button {font-weight:bold }
.navbar .navbar-brand {display:block; width:100%}
.page-container {display:flex; flex-direction:column; min-height:100vh; justify-content:center; margin:0 auto; max-width:45rem; padding:1rem}
.page-container > * + * {margin-top:1.5rem}
.nav-main {align-items:center; display:flex; height:100%; justify-content:center; left:-100%; position:fixed; transition:left 0s calc(var(--td) * 2), transform 0s calc(var(--td) * 2);
width:100%; z-index:99 }
.nav-main::before, .nav-main::after {content:""; background-color:var(--color-primary); height:50%; left:0; position:absolute; transform:translateX(-110%); transform-origin:0 50%; transition:transform calc(var(--td) * 2) var(--td) var(--te);
width:100%; z-index:-100}
.nav-main::before {top:0}
.nav-main::after {bottom:0}
.nav-main .menu__item {opacity:0; transform:translateX(-1rem); transition:opacity var(--td) var(--te), transform var(--td) var(--te)}
[id=main-navigation-toggle] {opacity:0; position:fixed; top:-100%}
[id=main-navigation-toggle] ~ label {cursor:pointer; position:fixed; right:1rem; top:1rem; z-index:100}
[id=main-navigation-toggle] ~ label span {display:block; height:2rem; padding:0.5rem; position:relative; transition:transform calc(var(--td) * 3) var(--te);
width:2rem}
[id=main-navigation-toggle] ~ label span::before, [id=main-navigation-toggle] ~ label span::after {background-color:var(--color-dark); bottom:0; content:""; height:4px; left:0; margin:auto; position:absolute; right:0; transition:transform calc(var(--td) * 3) var(--te);
top:0; width:calc(100% - 1rem)}
[id=main-navigation-toggle] ~ label span::before {transform:rotate(0) translateY(-100%)}
[id=main-navigation-toggle] ~ label span::after {transform:rotate(0) translateY(100%)}
[id=main-navigation-toggle]:checked ~ label span {transform:rotate(1turn)}
[id=main-navigation-toggle]:checked ~ label span::before {transform:rotate(45deg)}
[id=main-navigation-toggle]:checked ~ label span::after {transform:rotate(-45deg)}
[id=main-navigation-toggle]:checked ~ .nav-main {left:0; transition:transform 0s}
[id=main-navigation-toggle]:checked ~ .nav-main::before, [id=main-navigation-toggle]:checked ~ .nav-main::after {transform:translateX(0); transition-delay:0s}
[id=main-navigation-toggle]:checked ~ .nav-main::after {transition-delay:calc(var(--td) / 2)}
[id=main-navigation-toggle]:checked ~ .nav-main .menu__item {opacity:1; transform:translateX(0); transition:opacity calc(var(--td) * 2) var(--te), transform calc(var(--td) * 2) var(--te);
}
[id=main-navigation-toggle]:checked ~ .nav-main .menu__item:nth-child(1) {
 transition-delay:calc(var(--td) * 2 * (1 * 0.25)); z-index:-1}
[id=main-navigation-toggle]:checked ~ .nav-main .menu__item:nth-child(2) {
 transition-delay:calc(var(--td) * 2 * (2 * 0.25)); z-index:-2}
[id=main-navigation-toggle]:checked ~ .nav-main .menu__item:nth-child(3) {
 transition-delay:calc(var(--td) * 2 * (3 * 0.25)); z-index:-3}
[id=main-navigation-toggle]:checked ~ .nav-main .menu__item:nth-child(4) {
 transition-delay:calc(var(--td) * 2 * (4 * 0.25)); z-index:-4}
[id=main-navigation-toggle]:checked ~ .nav-main .menu__item:nth-child(5) {
 transition-delay:calc(var(--td) * 2 * (5 * 0.25)); z-index:-5}
.menu {position:relative; text-align:center; z-index:1}
.menu > .menu__item {font-family:var(--font-family-secondary); font-size:10vmin}
.submenu {left:0; opacity:0; position:absolute; transform:translateY(-10%); top:100%; width:100%; visibility:hidden; z-index:2}
.submenu .menu__item {font-family:var(--font-family-primary); font-size:3.5vmin; width:100%}
.submenu .menu__link {color:var(--color-secondary); text-shadow:1px 1px 0 var(--color-primary), 2px 2px 0 var(--color-primary)}
.submenu .menu__link::before, .submenu .menu__link::after {display:none}
.menu__item {display:block; position:relative}
.menu__item:hover .menu__link::before, .menu__item:hover .menu__link::after {animation:blink 1s var(--td) steps(1, end) forwards infinite; transform:translateX(calc(100% - 0.5rem)); transition-duration:calc(var(--td) * 3);
}
.menu__item:hover .menu__link::after {transition-delay:calc(var(--td) / 2)}
.menu__item:hover .submenu {opacity:1; transform:translateY(0); transition:transform calc(var(--td) * 2) calc(var(--td) * 3) var(--te), opacity calc(var(--td) * 2) calc(var(--td) * 3) var(--te), visibility 0s calc(var(--td) * 3);
visibility:visible}
.menu__link {color:var(--color-dark); display:inline-block; font-weight:normal; overflow:hidden; padding:0.5rem 1rem 0.125rem; position:relative; text-decoration:none; transition:color var(--td) var(--te), opacity var(--td) var(--te), transform var(--td) var(--te); z-index:1}
.menu__link::before, .menu__link::after {content:""; background-color:var(--color-light); height:50%; left:0; position:absolute; transform:translateX(-110%); transform-origin:0 50%; transition:transform 0s var(--te); width:100%; z-index:-1}
.menu__link::before {top:0}
.menu__link::after {bottom:0}
.menu:not(:focus-within):not(:hover) .menu__item .menu__link {opacity:1; transform:translate(0, 0)}
.menu__item {--pull:30%;
}
.menu__item .menu__link {opacity:0.25; transition-duration:calc(var(--td) * 3);
 transform:translate(0, calc(var(--pull) * -1));
}
.menu__item .submenu .menu__link {opacity:1}
.menu__item:hover > .menu__link {color:var(--color-secondary); opacity:1; transform:translate(0, 0)}
.menu__item:hover > .menu__link:hover {color:var(--color-light); transition-delay:0s}
.menu__item:hover ~ .menu__item > .menu__link {
 transition-duration:calc(var(--td) * 3); transform:translate(0, var(--pull))}
 @keyframes blink {
 50%, 100% {
 opacity:0;
}
}

@media (min-width:768px) {
.h-md-275 {height:275px}
.h-md-305 {height:305px}
}
.blog-header-logo {font-family:"Playfair Display", Georgia, "Times New Roman", serif/*rtl:Amiri, Georgia, "Times New Roman", serif*/; font-size:2.25rem}
.blog-header-logo:hover {text-decoration:none}
h1, h2, h3, h4, h5, h6 {font-family:"Playfair Display", Georgia, "Times New Roman", serif/*rtl:Amiri, Georgia, "Times New Roman", serif*/}
.flex-auto {flex:0 0 auto}
.h-275 {height:275px}
.h-305 {height:305px}
.h-md-305 {box-shadow:rgba(100, 100, 111, 0.2) 0px 7px 29px 0px!important; transition-duration:.25s; transform:scale(1) }
.h-md-305:hover {box-shadow:rgb(38, 57, 77) 0px 20px 30px -10px!important; transform:scale(1.05)!important }
.blog-pagination {margin-bottom:4rem}
.blog-post {margin-bottom:4rem}
.blog-post-meta {margin-bottom:1.25rem; color:#727272}
.pagination-wrapper .pagination .page-link {padding:0.5rem 0.9rem; border-radius:0; /* nice pill look */ font-size:0.95rem}
.pagination-wrapper .pagination .page-item.active .page-link {font-weight:600}
aside .list-unstyled li a {font-weight:bold; text-decoration:none }
/* Latest from the Blog – sidebar cards */
.blog-sidebar-thumb {background-size:cover; background-position:center; background-repeat:no-repeat}
.blog-sidebar-overlay {background:linear-gradient(to top, rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0))}
.blog-sidebar-title {color:#fff; text-shadow:0 2px 4px rgba(0, 0, 0, 0.8); font-size:1.1rem}
/* Blog single hero */
.blog-hero-overlay {background:linear-gradient(to top, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0))}
.blog-hero-title {color:#fff; text-shadow:0 2px 4px rgba(0, 0, 0, 0.8); font-size:2.25rem}

@media (min-width:768px) {
.blog-hero-title {font-size:2.75rem}
}
/* featured carousel */
.bg-cover {background-size:cover; background-repeat:no-repeat; background-position:center center}
.featured-carousel-wrap .text, .featured-carousel-wrap .img {width:50%}
.featured-carousel-wrap .img {height:450px}
.featured-carousel-wrap .text {background:white}
.featured-carousel-wrap .text p.h3 {font-family:"Playfair Display", serif; font-size:39px; font-weight:700}
.featured-carousel-wrap .text .name {color:#dbcc8f; font-size:20px; font-weight:500}

@media (max-width:767.98px) {
.featured-carousel-wrap .text, .featured-carousel-wrap .img {width:100%}
.featured-carousel-wrap .img {height:450px}
}
.carousel-indicators [data-bs-target] {width:12px; height:12px; border-radius:50%; background-color:#ccc; opacity:1}
.carousel-indicators .active {background-color:#ff6e00 }
/* Vertical carousel movement */
.carousel-item {transition:transform 0.6s ease-in-out}
.carousel-item-next, .carousel-item-prev, .carousel-item.active {display:block}
.carousel-item-next.carousel-item-start, .carousel-item-prev.carousel-item-end {transform:translateY(0)}
.carousel-item-next, .carousel-item-start {transform:translateY(100%)}
.carousel-item-prev, .carousel-item-end {transform:translateY(-100%)}
/* ================================
   BOOKS BY GENRE PAGE STYLING
   ================================ */

/* Genre Headings */
.books-genre-title, section h2.h5 {font-size:1.35rem; font-weight:700; padding-bottom:.35rem; border-bottom:2px solid #ccb8a2; margin-bottom:.75rem}
/* Earth Link Color Override */
a, .link-body-emphasis {color:#7a5c44}
a:hover, a:focus, .link-body-emphasis:hover {color:#b38b7d}
/* Pagination – earthy theme */
.pagination .page-link {color:#7a5c44; border-color:#ccb8a2}
.pagination .page-link:hover {color:white; background-color:#7a5c44; border-color:#7a5c44}
.pagination .page-item.active .page-link {background-color:#453427; border-color:#453427; color:#fff}
.navbar-nav .nav-link {font-size:1.1rem; /* Larger nav items */ margin-left:1rem;  /* Left margin between items */ }
.btn-outline-secondary { --bs-btn-color:#7a5c44;
 --bs-btn-border-color:#7a5c44;
 --bs-btn-hover-color:#fff;
 --bs-btn-hover-bg:#7a5c44;
 --bs-btn-hover-border-color:#7a5c44;
 --bs-btn-active-color:#fff;
 --bs-btn-active-bg:#7a5c44;
 --bs-btn-active-border-color:#7a5c44;
 --bs-btn-disabled-color:#7a5c44;
 --bs-btn-disabled-border-color:#7a5c44;
}
.btn-outline-secondary:hover { --bs-btn-hover-bg:#6a4f39;
 --bs-btn-hover-border-color:#6a4f39;
}
/* Masonry-style grouped lists (Genres, Authors) */
.books-by-genre-masonry, .books-by-author-masonry {column-count:1; column-gap:1.5rem}
.books-by-genre-section, .books-by-author-section {break-inside:avoid; -webkit-column-break-inside:avoid; -moz-column-break-inside:avoid; margin-bottom:1.5rem}

/* More columns on wider screens */
@media (min-width:768px) {
.books-by-genre-masonry,  .books-by-author-masonry {column-count:2}
}

@media (min-width:992px) {
.books-by-genre-masonry,  .books-by-author-masonry {column-count:3}
}

@media (min-width:1400px) {
.books-by-genre-masonry,  .books-by-author-masonry {column-count:4}
}

@media (min-width:992px) {
.navbar-align-bottom {align-items:end !important; /* Bottom align on large screens */ }
}

@media (min-width:992px) {
.navbar-nav .dropdown:hover .dropdown-menu {display:block; margin-top:0}
/* Rotate caret only on hover */
.navbar-nav .dropdown:hover .dropdown-toggle::after {transform:rotate(180deg)}
}
.navbar-nav .dropdown-toggle::after {transition:transform 0.3s ease}