/*
Theme Name: wvupress-wordpress-theme
Theme URI: https://wvupressonline.com
Author: WVU Press
Author URI: https://wvupressonline.com
Description: WVU Press WordPress Block Theme - A custom theme matching the WVU Press brand identity
Requires at least: 6.9
Tested up to: 6.9
Requires PHP: 5.7
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Template: twentytwentyfive
Text Domain: wvupress-wordpress-theme
Tags: custom-colors, custom-logo, custom-menu, featured-images, full-site-editing, rtl-language-support, threaded-comments, translation-ready, wide-blocks
*/


/* :root {
    --site-padding: 0;
  }
  
  @media (max-width: 600px) {
    :root {
      --site-padding: 1rem;
    }
  } */

  /* removes tap highlight on mobile for better UX */
  * {
    -webkit-tap-highlight-color: transparent;
}
 
/* Ensure strong/b tags are always bold */
strong,
b {
    font-weight: 700 !important;
}

/* remove margin-bottom from block columns to prevent extra spacing */
main .wp-block-columns {
    margin-bottom: 0 !important;
}

/* Social Icons Responsive Styles */
.social-icon img {
    height: 31px;
    width: 75%;
    max-width: 31px;
    object-fit: contain;
    display: inline-block;
    vertical-align: middle;
    flex-shrink: 1;
    transition: opacity 0.3s ease;
}

.social-icon img:hover {
    opacity: 0.8;
}

/* Tablet breakpoint */
@media (max-width: 991.98px) {
    .social-icon img {
        height: 38px;
    }
}

/* Mobile breakpoint */
@media (max-width: 480px) {
    footer.wp-block-group>.wp-block-group__inner-container {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    .social-icon img {
        height: 32px;
    }
}

/* Header Layout Adjustments */
.shopping-cart-icon img {
    width: 35px !important;
    transition: all 0.3s ease;
}

.shopping-cart-icon img:hover {
    transform: scale(1.05);
}

/* Navigation styling */
.horizontal-nav {
    font-size: 0.86rem;
}

.horizontal-nav a {
    color: var(--wp--preset--color--text-primary);
    text-decoration: none;
    transition: color 0.2s ease;
}

.horizontal-nav a:hover {
    color: var(--wp--preset--color--accent-gold);
}

/* Footer responsive adjustments */
@media (max-width: 991.98px) {
    footer .wp-block-columns {
        flex-direction: column;
    }

    footer .wp-block-column {
        width: 100% !important;
        flex-basis: 100% !important;
    }

    footer .has-text-align-right {
        text-align: left !important;
    }
}

/* Content area adjustments */
.frontpage-left-column,
.frontpage-right-column {
    /* Empty spacer columns */
}

/* Dotted border utility */
.has-dotted-border-top {
    border-top: 1px dotted #c0c0c0;
}

.has-dotted-border-bottom {
    border-bottom: 1px dotted #c0c0c0;
}

/* Link hover states */
a {
    color: var(--wp--preset--color--text-primary);
    transition: color 0.2s ease;
}

a:hover {
    color: var(--wp--preset--color--accent-gold);
}

/* Footer link styling */
footer a {
    color: #ffffff;
    text-decoration: none;
}

footer a:hover {
    color: #ffffff;
    text-decoration: underline;
}

/* Search input styling */
.wp-block-search__input {
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
}

/* Site title styling with Merriweather */
.wp-block-site-title a {
    font-family: var(--wp--preset--font-family--merriweather, 'Merriweather', serif);
    font-weight: 900;
    letter-spacing: 0.05em;
    line-height: 1.1;
    text-decoration: none;
}

/* View All Button - Front Page (Elegant Tab Style) */
.view-all-btn-wrapper {
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.view-all-btn-wrapper .wp-block-button.view-all-btn .wp-block-button__link.wp-element-button,
.view-all-btn-wrapper .view-all-btn a.wp-block-button__link {
    background: var(--wp--preset--color--content-background, #ffffff);
    background-color: var(--wp--preset--color--content-background, #ffffff);
    color: var(--wp--preset--color--theme-blue, #203E90);
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 0;
    font-size: 1rem;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.3s ease;
    cursor: pointer;
    position: relative;
    display: inline-block;
}

.view-all-btn-wrapper .wp-block-button.view-all-btn .wp-block-button__link.wp-element-button::after,
.view-all-btn-wrapper .view-all-btn a.wp-block-button__link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: -10px;
    right: -10px;
    height: 2px;
    background-color: var(--wp--preset--color--theme-blue, #203E90);
}

.view-all-btn-wrapper .wp-block-button.view-all-btn .wp-block-button__link.wp-element-button:hover,
.view-all-btn-wrapper .view-all-btn a.wp-block-button__link:hover {
    background: #f5f5f5 !important;
    background-color: #f5f5f5 !important;
}

.view-all-btn-wrapper .wp-block-button.view-all-btn .wp-block-button__link.wp-element-button:focus,
.view-all-btn-wrapper .view-all-btn a.wp-block-button__link:focus {
    outline: 2px solid #cc9900;
    outline-offset: 2px;
}

/* Prevent text wrapping on mobile and center the underline */
@media (max-width: 725px) {
    .view-all-btn-wrapper .wp-block-button.view-all-btn .wp-block-button__link.wp-element-button,
    .view-all-btn-wrapper .view-all-btn a.wp-block-button__link {
        white-space: nowrap;
        display: inline-flex;
        flex-direction: column;
        align-items: center;
        position: relative;
    }
    
    .view-all-btn-wrapper .wp-block-button.view-all-btn .wp-block-button__link.wp-element-button::after,
    .view-all-btn-wrapper .view-all-btn a.wp-block-button__link::after {
        position: static;
        width: 140px;
        margin-top: 4px;
    }
    
    .view-all-btn-wrapper .wp-block-button.view-all-btn .wp-block-button__link.wp-element-button:hover,
    .view-all-btn-wrapper .view-all-btn a.wp-block-button__link:hover {
        background: var(--wp--preset--color--content-background, #ffffff);
        background-color: var(--wp--preset--color--content-background, #ffffff);
    }
    
    .view-all-btn-wrapper .wp-block-button.view-all-btn .wp-block-button__link.wp-element-button:focus,
    .view-all-btn-wrapper .view-all-btn a.wp-block-button__link:focus,
    .view-all-btn-wrapper .wp-block-button.view-all-btn .wp-block-button__link.wp-element-button:active,
    .view-all-btn-wrapper .view-all-btn a.wp-block-button__link:active {
        outline: 2px solid #cc9900 !important;
        outline-offset: 2px;
        box-shadow: none !important;
        -webkit-tap-highlight-color: transparent;
    }
}

/* Tablet to desktop transition - mobile-like footer layout (769px - 1140px) */
@media (min-width: 769px) and (max-width: 1140px) {
    /* Apply 1.5rem padding to content areas (same as mobile) */
    .wp-block-post-content,
    main,
    article,
    .entry-content,
    .wp-block-group__inner-container {
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important;
    }
    
    /* Footer padding */
    footer.wp-block-group {
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important;
    }
    
    /* Stack footer columns vertically (mobile layout) */
    footer .wp-block-columns {
        flex-direction: column !important;
    }
    
    footer .wp-block-column {
        flex-basis: 100% !important;
        width: 100% !important;
        margin-left: 0 !important;
    }
    
    /* Left-align footer text (first column) */
    footer .wp-block-column:first-child {
        text-align: left !important;
    }
    
    /* Icons left-aligned and underneath text */
    footer .wp-block-group {
        justify-content: flex-start !important;
    }
    
    /* Hide spacer */
    footer .wp-block-spacer {
        display: none !important;
    }
    
    /* Tablet icon size (38px) */
    footer .social-icon img {
        height: 38px;
    }
    
    /* Exclude slider from padding */
    .metaslider,
    .metaslider *,
    .wp-block-group:has(.metaslider),
    .wp-block-group__inner-container:has(.metaslider) {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

/* Header mobile layout for screens up to 878px */
@media (max-width: 902px) {
    /* Fix horizontal overflow - prevent wiggle */
    html, body {
        overflow-x: hidden;
    }
    
    /* Header row - prevent overflow but keep full size */
    header > .wp-block-group {
        overflow-x: visible !important;
    }
    
    /* Logo - keep full size, prevent shrinking */
    header .wp-block-site-logo {
        max-width: none !important;
        flex-shrink: 0 !important;
    }
    
    header .wp-block-site-logo img {
        width: auto !important;
        height: auto !important;
        max-width: none !important;
    }
    
    /* Stack logo and search vertically, centered */
    header > .wp-block-group {
        flex-direction: column !important;
        align-items: center !important;
    }
    
    /* Search below logo, centered */
    header .wp-block-search {
        margin-top: 1rem;
        width: 280px !important;
        max-width: 280px !important;
    }
    
    /* Social icons row - prevent overflow */
    header .wp-block-group .wp-block-group:nth-child(1) {
        flex-wrap: nowrap !important;
        overflow-x: hidden;
    }
    
    /* Second header row - menu and cart on same line */
    header > .wp-block-group:last-child {
        display: block !important;
        width: 100% !important;
    }
    
    /* Navigation - inline, vertically centered */
    header .wp-block-navigation {
        display: inline !important;
        vertical-align: middle !important;
        margin-left: 1.5rem !important;
    }
    
    /* Cart - inline-block, vertically centered, pushed right */
    header .shopping-cart-icon {
        display: inline-block !important;
        vertical-align: middle !important;
        float: right !important;
        margin-right: 1.5rem !important;
        /* transform: translateY(-3px); */
    }
    
    /* Clearfix for the float */
    header > .wp-block-group:last-child::after {
        content: "";
        display: table;
        clear: both;
    }
    
    /* Drupal-style MENU button - dark gray with white text */
    .wp-block-navigation__responsive-container-open {
        border: 1px solid #696969 !important;
        background-color: #696969 !important;
        padding: 8px 16px !important;
        min-width: 70px !important;
        height: 38px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
    }
    
    /* Hide hamburger SVG icon */
    .wp-block-navigation__responsive-container-open svg {
        display: none !important;
    }
    
    /* Add "MENU" text in white */
    .wp-block-navigation__responsive-container-open::after {
        content: "MENU";
        font-size: 12px;
        font-weight: 600;
        color: #ffffff;
        letter-spacing: 0.5px;
        text-transform: uppercase;
    }
    
    /* MENU button hover state */
    .wp-block-navigation__responsive-container-open:hover {
        background-color: #1a1a1a !important;
        border-color: #1a1a1a !important;
    }
    
    /* Force mobile menu behavior: hide navigation items, show hamburger only */
    .wp-block-navigation__responsive-container:not(.is-menu-open) {
        display: none !important;
    }
    
    /* Ensure hamburger button is visible */
    .wp-block-navigation__responsive-container-open {
        display: inline-flex !important;
    }
    
    /* When menu is open, show it as overlay */
    .wp-block-navigation__responsive-container.is-menu-open {
        display: flex !important;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: var(--wp--preset--color--content-background, #ffffff);
        z-index: 100000;
    }
}

/* ============================================
   MOBILE MENU ACCORDION WITH BLURRED BACKDROP
   ============================================ */

@media (max-width: 902px) {
    /* Blurred backdrop effect - 50% transparency */
    .wp-block-navigation__responsive-container.is-menu-open {
        background-color: rgba(0, 40, 84, 0.3) !important;
        backdrop-filter: blur(8px) !important;
        -webkit-backdrop-filter: blur(8px) !important;
        padding-top: 100px;
        align-items: flex-start;
        justify-content: center;
        /* Prevent horizontal scrolling */
        overflow-x: hidden !important;
        overflow-y: auto !important;
    }
    
    /* Menu panel styling - fixed position to prevent drift */
    .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
        background-color: var(--wp--preset--color--content-background, #ffffff);
        width: 90% !important;
        max-width: 400px !important;
        max-height: 75vh;
        border-radius: 8px;
        padding: 1.5rem;
        overflow-y: auto;
        overflow-x: hidden !important;
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
        margin: 0 auto !important;
        /* Fix position to prevent drift */
        position: relative;
        flex-wrap: nowrap !important;
    }
    
    /* Swipe hint at top */
    .wp-block-navigation__responsive-container.is-menu-open::before {
        content: "Swipe down to close";
        position: absolute;
        top: 20px;
        left: 50%;
        transform: translateX(-50%);
        color: rgba(255, 255, 255, 0.7);
        font-size: 12px;
        text-transform: uppercase;
        letter-spacing: 1px;
    }
    
    /* Close button styling - match MENU button */
    .wp-block-navigation__responsive-container-close {
        background-color: #696969 !important;
        border: 1px solid #696969 !important;
        color: #ffffff !important;
        border-radius: 4px;
        padding: 8px 16px !important;
        min-width: 70px !important;
        height: 38px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        position: absolute;
        top: 20px;
        right: 30px;
        z-index: 100001;
    }
    
    /* Hide close button SVG */
    .wp-block-navigation__responsive-container-close svg {
        display: none !important;
    }
    
    /* CLOSE text styling */
    .wp-block-navigation__responsive-container-close .close-text,
    .wp-block-navigation__responsive-container-close::after {
        content: "CLOSE";
        font-size: 12px;
        font-weight: 600;
        color: #ffffff;
        letter-spacing: 0.5px;
        text-transform: uppercase;
    }
    
    /* Level 1 - Top navigation items */
    .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item {
        border-bottom: 1px solid #e8e8e8;
        padding: 0.75rem 0;
    }
    
    .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:last-child {
        border-bottom: none;
    }
    
    .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
        font-size: 1.125rem;
        font-weight: 600;
        color: var(--wp--preset--color--theme-blue, #203E90);
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.5rem 0;
        text-decoration: none;
    }
    
    /* Parent items with children - add arrow */
    .wp-block-navigation__responsive-container.is-menu-open .has-child > .wp-block-navigation-item__content::after {
        content: "▼";
        font-size: 0.7rem;
        color: var(--wp--preset--color--theme-blue, #203E90);
        margin-left: 0.5rem;
        transition: transform 0.4s ease;
    }
    
    /* Rotated arrow when expanded */
    .wp-block-navigation__responsive-container.is-menu-open .has-child.is-expanded > .wp-block-navigation-item__content::after {
        transform: rotate(180deg);
    }
    
    /* Submenu containers - collapsed by default */
    .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.4s ease-out;
    }
    
    /* Level 2 - First submenu */
    .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .has-child > .wp-block-navigation__submenu-container {
        padding-left: 1.5rem;
        margin-top: 0.5rem;
        border-left: 2px solid #e0e0e0;
    }
    
    .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .has-child > .wp-block-navigation__submenu-container > .wp-block-navigation-item {
        padding: 0.4rem 0;
    }
    
    .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .has-child > .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content {
        font-size: 1rem;
        font-weight: 500;
        color: #333333;
        text-decoration: none;
    }
    
    /* Level 3 - Second submenu */
    .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container {
        padding-left: 1.5rem;
        margin-top: 0.25rem;
        border-left: 1px solid #e0e0e0;
    }
    
    .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content {
        font-size: 0.9375rem;
        font-weight: 400;
        color: #555555;
        text-decoration: none;
    }
    
    /* Level 4 - Third submenu (deepest) */
    .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container {
        padding-left: 1.5rem;
        margin-top: 0.25rem;
    }
    
    .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content {
        font-size: 0.875rem;
        font-weight: 400;
        color: #666666;
        text-decoration: none;
    }
    
    /* Hover states */
    .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover {
        color: #cc9900 !important;
    }
    
    /* Active/Current page indicator */
    .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content {
        color: #cc9900;
        font-weight: 700;
    }
    
    /* Closing animation - Slide Down and Fade */
    .wp-block-navigation__responsive-container.is-closing {
        animation: backdropFadeOut 0.4s ease-out forwards;
    }
    
    .wp-block-navigation__responsive-container.is-closing .wp-block-navigation__responsive-container-content {
        animation: slideDownFade 0.4s ease-out forwards;
    }
    
    @keyframes slideDownFade {
        0% {
            transform: translateY(0);
            opacity: 1;
        }
        100% {
            transform: translateY(100px);
            opacity: 0;
        }
    }
    
    @keyframes backdropFadeOut {
        0% {
            opacity: 1;
        }
        100% {
            opacity: 0;
        }
    }
}

/* Desktop submenu hover delay and animation - matching Drupal Superfish */
.wp-block-navigation .wp-block-navigation-item.has-child > .wp-block-navigation__submenu-container {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.8s ease, visibility 0s linear 1.5s;
}

.wp-block-navigation .wp-block-navigation-item.has-child:hover > .wp-block-navigation__submenu-container,
.wp-block-navigation .wp-block-navigation-item.has-child:focus-within > .wp-block-navigation__submenu-container {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.8s ease, visibility 0s linear 0s;
}

/* Navigation Layout - Space items evenly and prevent wrapping */
.wp-block-navigation {
    flex-wrap: nowrap !important;
    justify-content: space-between !important;
    width: 100%;
}

/* Ensure navigation items don't wrap */
.wp-block-navigation .wp-block-navigation-item {
    white-space: nowrap;
}

/* Cart icon with blue outline (btn-outline-info style) */
.shopping-cart-icon {
    border: 1px solid #17a2b8;
    border-radius: 4px;
    padding: 6px 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    /* Ensure padding doesn't affect overall size */
}

.shopping-cart-icon:hover {
    background-color: rgba(23, 162, 184, 0.1);
}

/* Adjust the navigation container to use full width */
header .wp-block-group .wp-block-navigation {
    flex: 1;
    margin-right: 1rem;
}

/* Search box styling - Bootstrap default gray style, smaller size */
.wp-block-search {
    max-width: 280px;
    /* Smaller overall width */
}

.wp-block-search__inside-wrapper {
    display: flex;
    height: 34px;
    /* Smaller height */
}

.wp-block-search__input {
    flex: 1;
    height: 34px;
    padding: 6px 10px;
    font-size: 14px;
    border: 1px solid #ced4da;
    border-radius: 4px 0 0 4px;
}

/* Hide search button - using JavaScript dynamic search instead */
.wp-block-search__button {
    display: none !important;
}

/* ============================================
   NAVIGATION ACCESSIBILITY & SMART HOVER
   ============================================ */

/* Desktop only (1024px+) */
@media (min-width: 1024px) {
    /* Ensure submenus are visible when open via keyboard */
    .wp-block-navigation-item.is-open > .wp-block-navigation__submenu-container,
    .wp-block-navigation-item:focus-within > .wp-block-navigation__submenu-container {
        visibility: visible !important;
        opacity: 1 !important;
        display: block !important;
    }
    
    /* Smart hover - keep submenu visible during interactions */
    .wp-block-navigation-item.is-open {
        position: relative;
    }
    
    /* Ensure proper z-index stacking */
    .wp-block-navigation__submenu-container {
        z-index: 1000;
    }
    
    /* Focus styles for keyboard navigation */
    .wp-block-navigation-item a:focus {
        outline: 2px solid #cc9900;
        outline-offset: 2px;
    }
    
    /* Smooth transitions for menu visibility */
    .wp-block-navigation__submenu-container {
        transition: opacity 0.15s ease, visibility 0.15s ease;
    }
}

/* Adjust search input to have rounded corners on both sides */
.wp-block-search__input {
    border-radius: 4px !important;
}

/* Supafresso book covers - match Drupal size (150×232px) with 4 columns */
.supapress .book-wrapper .image-wrapper {
    height: 232px !important;
    /* Override inline 351.984px */
    width: 150px !important;
    overflow: hidden;
    margin: 0 auto;
    /* Center the image wrapper */
}

.supapress .book-wrapper .sp__the-cover img.supapress-book-cover {
    width: 150px !important;
    height: 232px !important;
    object-fit: cover;
    max-width: none !important;
    display: block;
}

/* 4-column grid layout */
.supapress .books-wrapper {
    display: flex;
    /* grid-template-columns: repeat(4, 1fr); */
    flex-wrap: wrap;
    gap: 20px;
    justify-items: center;
}

.supapress .book-wrapper {
    /* width: auto;
    text-align: center; */
    flex: 0 0 calc(25% - 15px);
    min-width: 200px;
}

/* Responsive: 2 columns on tablet, 1 on mobile */
@media (max-width: 991px) {
    .supapress .books-wrapper {
        flex: 0 0 calc(50% - 10px);
        /* 2 columns */
    }
}

@media (max-width: 575px) {
    .supapress .books-wrapper {
        flex: 0 0 100%;
        /* 1 column */
    }
}

/* ============================================
   DRUPAL-STYLE BOOK DETAIL PAGE
   ============================================ */

.book-wrapper.drupal-style {
    max-width: 1140px;
    margin: 0 auto;
    padding: 2rem 1rem;
}

.book-layout {
    display: flex;
    gap: 3rem;
    align-items: flex-start;
}

/* Left Column - 25% */
.book-left-col {
    flex: 0 0 25%;
    max-width: 250px;
}

.book-left-col .book-cover {
    margin: 0;
}

.book-left-col .book-cover img {
    width: 100%;
    height: auto;
    display: block;
    border: 1px solid #ddd;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.cart-button {
    margin: 1rem 0;
    text-align: center;
}

.cart-button .btn-cart {
    display: inline-block;
    transition: opacity 0.3s ease;
}

.cart-button .btn-cart:hover {
    opacity: 0.8;
}

.book-metadata {
    font-size: var(--wp--preset--font-size--small, 0.9rem);
    line-height: 1.6;
    color: #333;
}

.book-metadata p {
    margin: 0.5rem 0;
}

.meta-author {
    font-weight: 700;
    font-size: var(--wp--preset--font-size--medium, 1rem);
}

.meta-series {
    color: #666;
    font-style: italic;
}

.meta-date,
.meta-pages,
.meta-format,
.meta-price {
    color: #555;
}

/* Right Column - 75% */
.book-right-col {
    flex: 1 1 75%;
    min-width: 0;
    /* Allows content to shrink */
}

.book-title {
    font-size: var(--wp--preset--font-size--x-large, 2rem);
    margin-bottom: 0.5rem;
    color: var(--wp--preset--color--theme-blue, #203E90);
    font-family: var(--wp--preset--font-family--merriweather, 'Merriweather', serif);
    font-weight: 700;
    line-height: 1.2;
}

.book-subtitle {
    font-size: var(--wp--preset--font-size--large, 1.25rem);
    color: #666;
    margin-bottom: 2rem;
    font-style: italic;
    line-height: 1.4;
}

/* Tabbed Content */
.book-tabs {
    margin-top: 2rem;
}

.tab-nav {
    display: flex;
    border-bottom: 2px solid var(--wp--preset--color--theme-blue, #203E90);
    margin-bottom: 1.5rem;
    gap: 0.5rem;
}

.tab-btn {
    background: none;
    border: none;
    padding: 0.75rem 1.5rem;
    cursor: pointer;
    font-size: var(--wp--preset--font-size--medium, 1rem);
    color: #666;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: all 0.3s ease;
    font-weight: 500;
}

.tab-btn:hover {
    color: var(--wp--preset--color--theme-blue, #203E90);
    background-color: rgba(0, 40, 84, 0.05);
}

.tab-btn.active {
    color: var(--wp--preset--color--theme-blue, #203E90);
    border-bottom-color: var(--wp--preset--color--theme-blue, #203E90);
    font-weight: 600;
}

.tab-btn:focus {
    outline: 2px solid #cc9900;
    outline-offset: 2px;
}

.tab-content-wrapper {
    min-height: 200px;
}

.tab-panel {
    display: none;
    animation: fadeIn 0.3s ease;
}

.tab-panel.active {
    display: block;
}

.tab-panel[hidden] {
    display: none;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Tab Content Styling */
.book-summary,
.book-description,
.author-bio,
.book-reviews {
    font-size: 1rem;
    line-height: 1.6;
    color: #333;
}

.book-summary p,
.book-description p,
.author-bio p,
.book-reviews p {
    margin-bottom: 1rem;
}

.book-reviews blockquote {
    border-left: 3px solid var(--wp--preset--color--theme-blue, #203E90);
    padding-left: 1rem;
    margin: 1.5rem 0;
    font-style: italic;
}

/* Error State */
.book-not-found {
    text-align: center;
    padding: 3rem;
    font-size: 1.2rem;
    color: #666;
}

/* ============================================
   MOBILE RESPONSIVE
   ============================================ */

@media (max-width: 768px) {
    .book-wrapper.drupal-style {
        padding: 1rem;
    }

    .book-layout {
        flex-direction: column;
        gap: 2rem;
    }

    .book-left-col {
        flex: 1 1 100%;
        max-width: 100%;
        text-align: center;
    }

    .book-left-col .book-cover img {
        max-width: 200px;
        margin: 0 auto;
    }

    .book-metadata {
        max-width: 300px;
        margin: 0 auto;
        text-align: left;
    }

    .book-title {
        font-size: 1.5rem;
    }

    .book-subtitle {
        font-size: 1.1rem;
    }

    .tab-nav {
        flex-wrap: wrap;
        gap: 0;
    }

    .tab-btn {
        flex: 1 1 auto;
        padding: 0.5rem 1rem;
        font-size: 0.9rem;
        min-width: 80px;
    }
}

@media (max-width: 480px) {
    .book-title {
        font-size: 1.25rem;
    }

    .tab-btn {
        padding: 0.5rem;
        font-size: 0.85rem;
    }
}

/* Contact Form 7 Styling for Mailing List */
.cf7-flex-row {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    margin-bottom: 0;
    padding: 0 1.25rem 0;
}

.cf7-col-1 {
    flex: 1;
}

.cf7-col-2 {
    flex: 2;
}

.cf7-col-3 {
    flex: 3;
    min-width: 0;
    /* prevents overflow */
    padding: 0 0.5rem;
    /* adds breathing room between columns */
}

.cf7-col-1,
.cf7-col-2,
.cf7-col-3 {
    min-width: 0;
    /* critical for preventing overflow */
    padding: 0 0.7rem;
    /* adds breathing room between columns */
}


.cf7-fieldset {
    border: 1px solid #ddd;
    padding: 0.5rem 1.25rem 1.5rem;
    margin-bottom: 0.75rem;
    gap: 1rem;
    border-radius: 4px;
    box-sizing: border-box;
}

.cf7-fieldset legend {
    font-weight: bold;
    padding: 0 0.5rem;
}

.form-control,
input[type="text"],
input[type="email"],
select {
    width: 100%;
    padding: .5rem .75rem;
    border: 1px solid #ccc;
    border-radius: 4px;
}

@media (max-width: 768px) {
    .cf7-flex-row {
        flex-direction: column;
        gap: 1rem;
        /* optional: slightly smaller gap on mobile */
        padding: 0 1rem;
        /* keeps alignment tidy */
    }

    .cf7-col-1,
    .cf7-col-2,
    .cf7-col-3 {
        padding: 0;
        /* remove side padding so inputs align cleanly */
    }
}

/* required field asterisk */
label.required::after {
    content: " *";
    color: red;
    font-weight: bold;
    margin-left: 2px;
}

/* ============================================
   SUPAPRESS CART BUTTON STYLING
   ============================================ */

/* .books-wrapper {
    text-align: left;
} */

/* Cart button container in book listings */
.sp__the-cart {
    margin: 0.25rem 0 !important;
    text-align: center;
    /* border: 2px solid red;  Test - should show red border if CSS loads */
    line-height: 0; /* Remove extra line height space */
    /* text-align: left; */
}

/* Cart button link styling */
.sp__the-cart .btn-add-cart {
    display: inline-block;
    transition: opacity 0.3s ease;
}

.sp__the-cart .btn-add-cart:hover {
    opacity: 0.8;
}

/* Cart button image styling */
.sp__the-cart .btn-add-cart img {
    display: block;
    max-width: 100%;
    height: auto;
}

/* Mobile responsive cart buttons */
@media (max-width: 768px) {
    .sp__the-cart {
        margin: 0.25rem 0;
        line-height: 0; /* Remove extra line height space */
        /* border: 2px solid red; */
    }
    
    .sp__the-cart .btn-add-cart img {
        max-width: 100px;
        height: auto;
    }
}

/* ============================================
   QUERY LOOP HEADING FIX - MOBILE
   Force smaller font size with high specificity to prevent wrapping
   ============================================ */

@media (max-width: 768px) {
    /* High specificity selector to override WordPress defaults */
    .wp-block-query .wp-block-post-template .wp-block-post-title,
    .wp-block-query .wp-block-post .wp-block-post-title {
        font-size: 1.2rem !important;
        word-break: keep-all !important;
        hyphens: none !important;
        overflow-wrap: normal !important;
        line-height: 1.3 !important;
        white-space: normal;
    }
    
    /* Ensure links inherit the styles */
    .wp-block-query .wp-block-post-template .wp-block-post-title a,
    .wp-block-query .wp-block-post .wp-block-post-title a {
        font-size: inherit !important;
        word-break: keep-all !important;
        hyphens: none !important;
    }
}

/* ============================================
   QUERY LOOP TITLE COLORS
   ============================================ */
.wp-block-query .wp-block-post-title a {
    color: currentColor;  /* Inherits from parent <h2> for UI customization */
    transition: color 0.2s ease;
}

.wp-block-query .wp-block-post-title a:hover {
    color: #F2AB0E;
}

/* ============================================
   READ MORE ARROW - OPT-IN CLASS
   Uniform size and position, circle only on hover
   ============================================ */
/* Only applies when .read-more-right-arrow class is added */
.wp-block-read-more.read-more-right-arrow {
    position: relative;
}
/* Arrow - normal state (invisible circle, keeps position) */
.wp-block-read-more.read-more-right-arrow::after {
    content: "\27A1";           /* Thick arrow: ➡️ */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;                /* Circle size - keeps position uniform */
    height: 22px;               /* Circle size - keeps position uniform */
    margin-left: 10px;
    border-radius: 50%;         /* Circle shape always present */
    background-color: transparent;  /* INVISIBLE normally */
    color: currentColor;        /* Matches UI text color */
    font-size: 20px;            /* Thick arrow size */
    font-weight: 900;
    transition: all 0.3s ease;
}
/* Hover - circle APPEARS, arrow stays same */
.wp-block-read-more.read-more-right-arrow:hover::after {
    background-color: rgba(192, 192, 192, 0.4);  /* Circle becomes visible */
    color: #ffffff;                               /* Arrow turns white */
    /* Arrow stays 20px and in same position! */
}

/* ============================================
   MOBILE RESPONSIVE ENHANCEMENTS
   ============================================ */

/* Mobile: Center search under logo */
@media (max-width: 768px) {
    /* Center header content */
    header .wp-block-group {
        justify-content: center !important;
    }
    
    /* Center search under logo - fixed width */
    header .wp-block-search {
        max-width: 280px !important;
        width: 280px;
        margin: 1rem auto 0;
    }
    
    /* Center the search block container */
    header .wp-block-group > .wp-block-group:nth-child(2) {
        justify-content: center !important;
        width: 100%;
    }
    
    /* Center book covers */
    /* .supapress .book-wrapper,
    .supapress .book-wrapper .image-wrapper {
        text-align: center !important;
    } */
    
    .supapress .book-wrapper .image-wrapper {
        margin: 0 auto !important;
    }
    
    /* Footer left padding and spacing */
    footer.wp-block-group > .wp-block-group__inner-container {
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important;
    }
    
    footer .wp-block-column {
        padding-left: 0.5rem;
    }
    
    footer .wp-block-group .wp-block-group {
        gap: 1rem !important;
        justify-content: flex-start !important;
    }
    
    footer .wp-block-group p {
        margin-bottom: 0.5rem;
    }
    
    /* Ensure all columns stack properly */
    .wp-block-columns {
        flex-direction: column !important;
    }
    
    .wp-block-column {
        flex-basis: 100% !important;
        width: 100% !important;
        margin-left: 0 !important;
    }
    
    /* Hide spacer blocks on mobile */
    .wp-block-spacer {
        display: none !important;
    }
    
    /* Ensure all content is full width */
    .wp-block-group__inner-container > * {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

/* ============================================
   FIX HORIZONTAL OVERFLOW & MENU/CART POSITIONING
   ============================================ */

@media (max-width: 768px) {
    /* Fix horizontal overflow - prevent wiggle */
    html, body {
        overflow-x: hidden;
    }
    
    /* Header row - prevent overflow but keep full size */
    header > .wp-block-group {
        overflow-x: visible !important;
    }
    
    /* Logo - keep full size, prevent shrinking */
    header .wp-block-site-logo {
        max-width: none !important;
        flex-shrink: 0 !important;
    }
    
    header .wp-block-site-logo img {
        width: auto !important;
        height: auto !important;
        max-width: none !important;
    }
    
    /* Stack logo and search vertically, centered */
    header > .wp-block-group {
        flex-direction: column !important;
        align-items: center !important;
    }
    
    /* Search below logo, centered */
    header .wp-block-search {
        margin-top: 1rem;
        width: 280px !important;
        max-width: 280px !important;
    }
    
    /* Social icons row - prevent overflow */
    header .wp-block-group .wp-block-group:nth-child(1) {
        flex-wrap: nowrap !important;
        overflow-x: hidden;
    }
    
    /* Second header row - menu and cart on same line */
    header > .wp-block-group:last-child {
        display: flex !important;
        flex-wrap: nowrap !important;
        justify-content: space-between !important;
        align-items: center !important;
        width: 100% !important;
    }
    
    /* Second header row - use inline-block instead of flex to avoid flexbox issues */
    header > .wp-block-group:last-child {
        display: block !important;
        width: 100% !important;
    }
    
    /* Navigation - inline-block, vertically centered */
    header .wp-block-navigation {
        display: inline !important;
        vertical-align: middle !important;
        margin-left: 1.5rem !important;
    }
    
    /* Cart - inline-block, vertically centered, pushed right */
    header .shopping-cart-icon {
        display: inline-block !important;
        vertical-align: middle !important;
        float: right !important;
        margin-right: 1.5rem !important;
        /* transform: translateY(-3px); /* Fine-tune to vertically align with menu */
    }
    
    /* Clearfix for the float */
    header > .wp-block-group:last-child::after {
        content: "";
        display: table;
        clear: both;
    }
    
    /* Drupal-style MENU button - dark gray with white text */
    .wp-block-navigation__responsive-container-open {
        border: 1px solid #696969 !important;
        background-color: #696969 !important;
        padding: 8px 16px !important;
        min-width: 70px !important;
        height: 38px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
    }
    
    /* Hide hamburger SVG icon */
    .wp-block-navigation__responsive-container-open svg {
        display: none !important;
    }
    
    /* Add "MENU" text in white */
    .wp-block-navigation__responsive-container-open::after {
        content: "MENU";
        font-size: 12px;
        font-weight: 600;
        color: #ffffff;
        letter-spacing: 0.5px;
        text-transform: uppercase;
    }
    
    /* MENU button hover state */
    .wp-block-navigation__responsive-container-open:hover {
        background-color: #1a1a1a !important;
        border-color: #1a1a1a !important;
    }
    
    /* Content area - balanced left and right padding on mobile */
    .wp-block-post-content,
    main,
    article,
    .entry-content,
    .wp-block-group__inner-container {
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important;
    }
    
    /* Footer - left align on mobile */
    footer .wp-block-column:first-child {
        text-align: left !important;
    }
    
    /* Content - remove extra right spacing on mobile */
    .wp-block-group__inner-container > *,
    .wp-block-column > * {
        padding-right: 0 !important;
        margin-right: 0 !important;
    }
    
    /* Book covers - center in viewport */
    .supapress .books-wrapper {
        justify-content: center !important;
    }
    
    .supapress .book-wrapper {
        /* text-align: center !important; */
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }
    
    .supapress .book-wrapper .image-wrapper {
        margin: 0 auto !important;
        display: flex !important;
        justify-content: center !important;
    }
}

/* Make MetaSlider full-width on mobile */
.metaslider,
.wp-block-group:has(.metaslider),
.wp-block-group__inner-container:has(.metaslider) {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Remove gray gap - aggressive approach */
.view-all-btn-wrapper,
.view-all-btn-wrapper.wp-block-buttons,
.wp-block-buttons.view-all-btn-wrapper {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
/* Target the specific gap between main and footer */
main.wp-block-group {
    margin-bottom: 0 !important;
}
/* If the gap is from blockGap being applied */
.wp-block-group > * {
    margin-block-start: 0 !important;
    margin-block-end: 0 !important;
}

/* Logo margin and responsive sizing for small screens to maintain alignment with hamburger and cart */
@media (max-width: 1150px) {
    header .wp-block-site-logo {
        max-width: calc(100% - 3rem) !important;
        margin: 0 auto !important;
    }
    
    header .wp-block-site-logo img {
        max-width: 100% !important;
        height: auto !important;
        display: block !important;
    }

    header .sticky-nav {
        max-width: calc(100% - .50rem) !important;
        margin: 0 auto !important;
    }
    
}