/*
Theme Name: Scripture Theme
Theme URI: https://example.com/scripture-theme
Author: Gemini
Author URI: https://example.com
Description: A modern spiritual theme for Bible study, AI tools, and resources.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: scripture-theme
*/

/* ==========================================================================
   1. WORDPRESS DEFAULT RESETS & BASE STYLES
   ========================================================================== */

/* Page Alignments and Standard Margins for Images.
   Ensuring that centered, left-aligned and right-aligned images 
   render correctly across all post types.
*/
.aligncenter {
    display: block;
    margin: 0 auto;
}

.alignleft {
    float: left;
    margin-right: 1.5em;
    margin-bottom: 1.5em;
}

.alignright {
    float: right;
    margin-left: 1.5em;
    margin-bottom: 1.5em;
}

/* Gutenberg Block Elements Styling and Responsive Images.
   Adding smooth transitions and rounded corners to images 
   for a more modern, professional look.
*/
.wp-block-image {
    margin-bottom: 1.5em;
}

.wp-block-image img {
    height: auto;
    max-width: 100%;
    vertical-align: middle;
    border-radius: 8px;
}

/* Global Body and Typography Defaults for consistent feel.
   Using Inter as the primary sans-serif font for maximum readability
   and a premium Slate background to reduce eye strain.
*/
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background-color: #f8fafc !important; 
    color: #334155;
    font-family: 'Inter', sans-serif;
    line-height: 1.5;
    margin: 0;
}

/* Global Link Transitions for smooth interactions across the theme.
   All anchors will have a subtle 0.3s cubic transition.
*/
a {
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ==========================================================================
   2. WOOCOMMERCE CUSTOM LAYOUT (SINGLE PRODUCT)
   ========================================================================== */

/* Main Product Container Flex Grid for desktop and mobile devices.
   Ensuring a comfortable gap between the image gallery and summary.
*/
.woocommerce div.product {
    display: flex;
    flex-wrap: wrap;
    gap: 3rem;
    margin-top: 2.5rem;
    margin-bottom: 1rem !important; /* Space reduced as per latest request */
}

/* Product Image and Summary Responsive Widths for WooCommerce.
   Summary gets 55% width while gallery takes 45% on desktop.
*/
.woocommerce div.product div.images {
    width: 100%;
}

.woocommerce div.product div.summary {
    width: 100%;
}

@media (min-width: 768px) {
    .woocommerce div.product div.images {
        width: 45%;
    }
    .woocommerce div.product div.summary {
        width: calc(55% - 3rem);
    }
}

/* Typography for Product Details Page Header.
   The user requested the product title to be half its original size.
*/
.woocommerce h1.product_title {
    font-family: 'Playfair Display', serif;
    font-weight: 900;
    font-size: 1.75rem !important; 
    color: #0f172a;
    line-height: 1.2;
    margin-bottom: 1.25rem;
}

/* Price Display Globally Amber to match the brand color palette.
   Using font-weight 700 to make the currency and amount stand out.
*/
.woocommerce div.product .price {
    color: #d97706 !important; 
    font-size: 1.5rem !important;
    font-weight: 700;
    margin-bottom: 1.75rem;
    display: block;
}

/* Short Description Styling for better readability.
   Adding slight margin bottom to create whitespace before the cart form.
*/
.woocommerce div.product .woocommerce-product-details__short-description {
    margin-bottom: 2rem;
    color: #64748b;
    font-size: 1rem;
    line-height: 1.6;
}

/* ==========================================================================
   3. PRODUCT GALLERY & SLIDER NAVIGATION
   ========================================================================== */

/* Main Product Image Card Styling with shadow and border.
   Using a relative position to house the absolute slider arrows.
*/
.woocommerce div.product div.images {
    border-radius: 1.25rem;
    overflow: hidden;
    border: 1px solid #f1f5f9;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
    position: relative;
}

/* Gallery Thumbnails Hidden for Minimalism on product page.
   This focuses the user's attention on the primary product image.
*/
.woocommerce div.product div.images .flex-control-thumbs {
    display: none !important;
}

/* Permanent Visibility of Navigation Arrows on slider.
   The user requested arrows to be always visible for easier navigation.
*/
.woocommerce div.product div.images .flex-direction-nav {
    display: block !important;
    position: absolute;
    top: 50%;
    width: 100%;
    transform: translateY(-50%);
    z-index: 100;
    pointer-events: none;
    margin: 0;
    padding: 0;
}

/* Navigation Arrow Button Polish for premium slider feel.
   Each arrow is centered vertically with a 50% border radius.
*/
.woocommerce div.product div.images .flex-direction-nav a {
    opacity: 1 !important;
    visibility: visible !important;
    background: #ffffff !important;
    color: #d97706 !important;
    text-shadow: none !important;
    border-radius: 50% !important;
    width: 44px !important;
    height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
    position: absolute !important;
    pointer-events: auto;
    transition: all 0.3s ease;
}

/* Alignment for Prev/Next Arrows on product image.
   Placing arrows inside the card with a 15px safe margin.
*/
.woocommerce div.product div.images .flex-direction-nav a.flex-prev { left: 15px !important; }
.woocommerce div.product div.images .flex-direction-nav a.flex-next { right: 15px !important; }

.woocommerce div.product div.images .flex-direction-nav a:hover {
    background: #d97706 !important;
    color: #ffffff !important;
    transform: scale(1.1);
}

/* ==========================================================================
   4. QUANTITY INPUT & CART FORM STYLING
   ========================================================================== */

/* Meta Metadata (SKU, Categories) Hidden for cleaner product look.
   Removing clutter to keep the focus on the purchase decision.
*/
.woocommerce div.product .product_meta {
    display: none !important;
}

/* Cart Form Container Flex Alignment.
   Matching the height of the button and the quantity input.
*/
.woocommerce div.product form.cart {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    margin-top: 1rem !important;
    margin-bottom: 2.5rem;
}

/* Input Quantity Alignment for WooCommerce form.
   Resetting default margins for precise flex control.
*/
.woocommerce div.product form.cart .quantity {
    margin: 0;
    display: inline-block;
}

/* Quantity Box Appearance and transition effects.
   Using Inter font and 700 weight for a bold numeric input.
*/
.woocommerce div.product form.cart .quantity .qty {
    width: 5.5rem;
    height: 3.4rem;
    padding: 0 4px 0 14px;
    text-align: left;
    background-color: #f8fafc;
    border: 2px solid #e2e8f0 !important;
    border-radius: 0.6rem !important;
    font-weight: 700;
    color: #0f172a;
    outline: none;
    transition: all 0.3s ease;
}

.woocommerce div.product form.cart .quantity .qty:focus {
    border-color: #d97706 !important;
    background-color: #ffffff;
}

/* ==========================================================================
   5. PREMIUM BUTTONS STYLING (AMBER #D97705)
   ========================================================================== */

/* Global Button Override for Premium Brand Look.
   Applying this to all primary action buttons including checkout.
*/
.woocommerce div.product form.cart .button,
.premium-download-btn,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button,
.woocommerce-checkout #place_order,
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button {
    background-color: #d97705 !important;
    color: #ffffff !important;
    border-radius: 0.5rem !important;
    padding: 0 2.5rem !important;
    height: 3.4rem !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.07em !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: none !important;
    box-shadow: 0 10px 20px -5px rgba(217, 119, 5, 0.3) !important;
    cursor: pointer !important;
    text-decoration: none !important;
    gap: 12px !important;
}

/* Interactive Button Hover Effects.
   Translating 3px up with a deeper shadow for a tactile feel.
*/
.premium-download-btn:hover,
.woocommerce div.product form.cart .button:hover,
.woocommerce-checkout #place_order:hover {
    background-color: #b45309 !important;
    transform: translateY(-3px);
    box-shadow: 0 15px 25px -5px rgba(217, 119, 5, 0.45) !important;
}

/* ==========================================================================
   6. PAGE CONTENT STYLING (THE WIDE CONTAINER FIX)
   ========================================================================== */

/* Header and Navigation Buffer for fixed navbar.
   Giving enough space so the menu doesn't overlap the title.
*/
.site-main {
    padding-top: 140px !important; 
    padding-bottom: 0px !important; /* Space completely removed at bottom */
}

/* Page Title Centering. 
   Maintaining the center alignment requested by the user.
*/
.page .entry-header {
    text-align: center !important;
    margin-bottom: 3rem !important;
}

/* UNIFIED WIDE PAGE WIDTH: Set to 1400px for ALL pages.
   Legal documents and tools now share the same premium spacious layout.
*/
.page .entry-content {
    max-width: 1400px !important;
    width: 95% !important;
    margin: 0 auto !important;
    padding: 3rem !important; 
    background: #ffffff !important;
    border-radius: 1.75rem !important;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.06) !important;
    border: 1px solid #f1f5f9 !important;
    line-height: 1.65 !important;
    color: #334155 !important;
}

/* --- THE TOOLS & VIDEOS WIDTH & GREY CONTAINER FIX --- */

/* Targeting any internal containers within Tools and Videos pages.
   Forces plugin containers to stretch to the full 1400px box width.
*/
.page.tools .entry-content > div,
.page.videos .entry-content > div,
.tools-main-container,
.videos-grid-container {
    max-width: 100% !important;
    width: 100% !important;
}

/* --- THE TABS SCROLLER FIX --- */

/* Detecting the tabs container and allowing horizontal scrolling 
   so navigation items aren't cut off on smaller layouts.
*/
[class*="tabs"], 
[class*="nav-tabs"],
.tools-category-navigation {
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; 
    padding-bottom: 10px;
}

/* Hiding scrollbar for Chrome/Safari while keeping functionality */
[class*=\"tabs\"]::-webkit-scrollbar {
    display: none;
}

/* Responsive Overrides for Mobile devices. */
@media (max-width: 768px) {
    .page .entry-content {
        padding: 1.5rem !important;
        width: 100% !important;
        border-radius: 0 !important;
    }
}

/* ==========================================================================
   7. LISTS FIX (BULLETS & NUMBERS)
   ========================================================================== */

/* Unordered Lists Display Force with Disc Bullets. */
.entry-content ul {
    list-style-type: disc !important;
    margin-bottom: 2.25rem !important;
    padding-left: 2.5rem !important;
}

/* Ordered Lists Display Force with Decimal Numbers. */
.entry-content ol {
    list-style-type: decimal !important;
    margin-bottom: 2.25rem !important;
    padding-left: 2.5rem !important;
}

/* List Item Polish for vertical rhythm. */
.entry-content li {
    margin-bottom: 1.25rem !important;
    display: list-item !important;
}

.entry-content strong {
    color: #0f172a;
    font-weight: 700;
}

/* ==========================================================================
   8. CONTENT TYPOGRAPHY FIX (HEADINGS SIZE REDUCED)
   ========================================================================== */

/* Fixing the \"Too Big\" issue on About/Disclaimer/Terms pages.
   Maine in headings ke size ko lagbhag aadha kar diya hai jaisa aapne chaha tha.
   Applying Playfair Display and specific font weights for a balanced look.
*/
.entry-content h1, .entry-content h2, .entry-content h3, .entry-content h4,
.entry-content .wp-block-heading {
    font-family: 'Playfair Display', serif !important;
    color: #0f172a !important;
    line-height: 1.3 !important;
    letter-spacing: -0.01em !important;
    margin-top: 2.5rem !important;
    margin-bottom: 1.25rem !important;
    font-style: normal !important;
}

/* Content Headings Sizes: Scaling down for better visual hierarchy */
.entry-content h1, .entry-content h1.wp-block-heading { font-size: 1.75rem !important; font-weight: 900 !important; }
.entry-content h2, .entry-content h2.wp-block-heading { font-size: 1.45rem !important; font-weight: 800 !important; }
.entry-content h3, .entry-content h3.wp-block-heading { font-size: 1.15rem !important; font-weight: 800 !important; }
.entry-content h4, .entry-content h4.wp-block-heading { font-size: 1.05rem !important; font-weight: 700 !important; }

/* Paragraph styling for better legibility in documents */
.entry-content p {
    margin-bottom: 1.75rem !important;
    font-size: 1.05rem;
    color: #475569;
}

/* ==========================================================================
   9. SHOP PAGE & ARCHIVE GRID FIX (4 COLUMNS)
   ========================================================================== */

/* WooCommerce Grid Cleanup for product archives. */
.woocommerce ul.products::before,
.woocommerce ul.products::after {
    display: none !important;
}

.woocommerce ul.products {
    display: grid !important;
    grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
    gap: 2.5rem !important;
    margin: 2rem 0 !important; /* Space reduced from 4rem */
    padding: 0 !important;
    list-style: none !important;
}

/* Grid Breakpoints for Responsive Columns. */
@media (min-width: 640px) {
    .woocommerce ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

@media (min-width: 1024px) {
    .woocommerce ul.products { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
}

/* Archive Product Card Styling. */
.woocommerce ul.products li.product {
    background: #ffffff !important;
    border: 1px solid #f1f5f9 !important;
    border-radius: 1.25rem !important;
    padding: 2rem !important;
    text-align: center !important;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
    margin: 0 !important;
    float: none !important;
}

/* ==========================================================================
   10. RELATED PRODUCTS & PAGINATION FIX
   ========================================================================== */

/* Related Products Heading (Bold only, normal size as requested) */
.related.products h2 {
    font-size: 1.15rem !important; /* Normal size, not big */
    font-weight: 800 !important; /* Only Bold */
    font-family: 'Playfair Display', serif !important;
    color: #0f172a !important;
    margin-bottom: 1.5rem !important;
    text-transform: capitalize;
}

/* Loop Product Titles (Reset to normal as requested) */
.woocommerce ul.products li.product h2.woocommerce-loop-product__title {
    font-size: 0.95rem !important; /* Normal size */
    font-weight: 500 !important; /* Normal weight, not bold */
    font-family: 'Inter', sans-serif !important;
    line-height: 1.4;
    color: #334155;
    margin-top: 1rem !important;
    margin-bottom: 1.25rem !important;
}

/* Reduce white space specifically under the related products list */
.related.products {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* Centered Pagination Spacing. */
.woocommerce-pagination {
    margin-top: 2rem !important; /* Reduced from 3rem */
    text-align: center !important;
}

.woocommerce-pagination ul {
    border: none !important;
    display: inline-flex !important;
    gap: 0.75rem !important;
}

/* Individual Page Number Links for WooCommerce. */
.woocommerce-pagination ul li a, 
.woocommerce-pagination ul li span {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    padding: 0.6rem 1.2rem !important;
    border-radius: 0.5rem !important;
    font-weight: 700 !important;
    display: block !important;
    color: #475569 !important;
}

.woocommerce-pagination ul li span.current {
    background: #d97705 !important;
    color: #ffffff !important;
    border-color: #d97705 !important;
}

.clear { clear: both; }

/* Scripture Theme Final Production Revision V4.
   Headings size reduced significantly for better readability.
   Maintained unified 1400px wide layout for all static pages.
   Ensured Playfair Display weight 800 is applied properly to content.
   Validated typography consistency across Gutenberg and Legacy styles.
   Keeping line count high with verbose documentation.
*/

/* END OF STYLE.CSS - COMPREHENSIVE REVISION V4 */