/*
Theme Name: Journey with AI
Theme URI: https://journeywithai.com
Author: Journey with AI
Author URI: https://journeywithai.com
Description: A publishing label for skill files. Editorial monochrome child theme built on Twenty Twenty-Five (FSE). Anonymous brand register, magazine-spaced typography, no accent colour. Built for WooCommerce commerce, Beehiiv newsletter integration, and a custom audit-ritual changelog.
Version: 1.7.0
Requires at least: 6.5
Tested up to: 6.7
Requires PHP: 7.4
Template: twentytwentyfive
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: journey-with-ai
Tags: block-theme, full-site-editing, woocommerce, editorial, monochrome
*/

/*
The entire visual identity lives in theme.json.
This file exists for WordPress theme metadata and minimal selectors that
theme.json cannot reach. Add CSS here only when theme.json cannot do the job.
*/

/* WooCommerce: small adjustments that need direct CSS */
.woocommerce-store-notice { display: none !important; }

/* Stark register: hide the WooCommerce default cart icon shake animation */
.woocommerce-cart-form .product-thumbnail { transform: none !important; }

/* Magic-link login: hide WP default login styling that conflicts with editorial register */
.login form { box-shadow: none !important; }

/* ----------------------------------------------------------
   Product card featured images — show the WHOLE cover.
   ----------------------------------------------------------
   The wp:post-featured-image block defaults to object-fit: cover,
   which crops the image. Our covers are designed to be read in full
   (number, eyebrow, title, price), so we force object-fit: contain
   and give the container a charcoal fill so contained images blend
   with the dark catalogue background instead of letterboxing white.
*/
.wp-block-query .wp-block-post-featured-image {
    background-color: #0F0F10;
    overflow: hidden;
}
.wp-block-query .wp-block-post-featured-image a,
.wp-block-query .wp-block-post-featured-image {
    display: block;
    width: 100%;
}
.wp-block-query .wp-block-post-featured-image img {
    width: 100%;
    height: 100%;
    object-fit: contain !important;
    display: block;
}

/* WooCommerce single product main image — never crop */
.woocommerce div.product .woocommerce-product-gallery__image img,
.woocommerce-page div.product .woocommerce-product-gallery__image img {
    object-fit: contain !important;
    background-color: #0F0F10;
}

/* ===========================================================
   Knowledge Panel — single post enhancements
   ===========================================================
   Reading progress bar, sticky TOC rail, inline CTA, and the
   typographic refinements that make long-form posts feel like
   editorial copy rather than a generic blog post.
   =========================================================== */

/* ---------- Reading progress bar ---------- */
#jwai-reading-progress {
    position: fixed;
    top: 0;
    left: 0;
    width: 0%;
    height: 3px;
    background: linear-gradient( 90deg, #FAFAF8 0%, #FAFAF8 60%, rgba(250,250,248,0.85) 100% );
    z-index: 9999;
    transition: width 80ms linear;
    pointer-events: none;
    box-shadow: 0 0 12px rgba(250,250,248,0.25);
}

/* ---------- Sticky TOC rail ---------- */
.jwai-toc-rail {
    position: sticky;
    top: 96px;
    align-self: flex-start;
    max-height: calc( 100vh - 120px );
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 8px;
}

.jwai-toc-aside {
    border-left: 0.5px solid rgba( 250, 250, 248, 0.18 );
    padding-left: 24px;
}

.jwai-toc-aside.is-empty {
    display: none;
}

.jwai-toc-eyebrow {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba( 250, 250, 248, 0.45 );
    margin: 0 0 16px 0;
}

.jwai-toc-list {
    list-style: none;
    margin: 0;
    padding: 0;
    border: 0;
    counter-reset: toc-counter;
}

.jwai-toc-item {
    margin: 0;
    padding: 0;
    line-height: 1.4;
    counter-increment: toc-counter;
}

.jwai-toc-item a {
    display: block;
    padding: 8px 0 8px 0;
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1.4;
    color: rgba( 250, 250, 248, 0.65 );
    text-decoration: none;
    border-left: 2px solid transparent;
    margin-left: -16px;
    padding-left: 14px;
    transition: color 120ms ease, border-color 120ms ease;
}

.jwai-toc-item.is-level-h2 a {
    padding-left: 26px;
    font-size: 13px;
    color: rgba( 250, 250, 248, 0.5 );
}

.jwai-toc-item a:hover {
    color: #FAFAF8;
    border-left-color: rgba( 250, 250, 248, 0.4 );
}

.jwai-toc-item.is-active > a {
    color: #FAFAF8;
    border-left-color: #FAFAF8;
    font-weight: 600;
}

/* ---------- TOC inline CTA ---------- */
.jwai-toc-cta {
    margin-top: 32px;
    padding: 20px;
    border: 0.5px solid rgba( 250, 250, 248, 0.18 );
    border-radius: 6px;
    background: rgba( 250, 250, 248, 0.03 );
}

.jwai-toc-cta-eyebrow {
    margin: 0 0 8px 0;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba( 250, 250, 248, 0.45 );
}

.jwai-toc-cta-headline {
    margin: 0 0 10px 0;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.015em;
    color: #FAFAF8;
}

.jwai-toc-cta-sub {
    margin: 0 0 16px 0;
    font-size: 12.5px;
    line-height: 1.5;
    color: rgba( 250, 250, 248, 0.6 );
}

.jwai-toc-cta-btn {
    display: inline-block;
    padding: 9px 14px;
    background: #FAFAF8;
    color: #0F0F10;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: -0.005em;
    text-decoration: none !important;
    border-radius: 4px;
    transition: transform 120ms ease, opacity 120ms ease;
}

.jwai-toc-cta-btn:hover {
    transform: translateY( -1px );
    opacity: 0.92;
}

/* ---------- Post content typography ---------- */
.jwai-post-content,
.wp-block-post-content.jwai-post-content {
    font-size: 18px;
    line-height: 1.75;
    color: rgba( 250, 250, 248, 0.85 );
}

.jwai-post-content p {
    margin: 0 0 1.4em 0;
    max-width: 680px;
}

.jwai-post-content h1 {
    font-size: clamp( 30px, 3vw, 38px );
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin: 2.4em 0 0.6em 0;
    color: #FAFAF8;
    scroll-margin-top: 96px;
}

.jwai-post-content h2 {
    font-size: clamp( 24px, 2.4vw, 30px );
    font-weight: 600;
    letter-spacing: -0.015em;
    line-height: 1.2;
    margin: 2em 0 0.5em 0;
    color: #FAFAF8;
    scroll-margin-top: 96px;
}

.jwai-post-content h3 {
    font-size: 20px;
    font-weight: 600;
    margin: 1.6em 0 0.4em 0;
    color: #FAFAF8;
}

.jwai-post-content blockquote {
    border-left: 2px solid rgba( 250, 250, 248, 0.4 );
    padding: 6px 0 6px 24px;
    margin: 2em 0;
    font-style: italic;
    font-size: 20px;
    line-height: 1.5;
    color: rgba( 250, 250, 248, 0.85 );
}

.jwai-post-content a {
    color: #FAFAF8;
    text-decoration: underline;
    text-decoration-thickness: 0.5px;
    text-underline-offset: 3px;
}

.jwai-post-content code {
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.92em;
    padding: 2px 6px;
    border-radius: 3px;
    background: rgba( 250, 250, 248, 0.08 );
    color: #FAFAF8;
}

.jwai-post-content pre {
    background: rgba( 250, 250, 248, 0.05 );
    border: 0.5px solid rgba( 250, 250, 248, 0.12 );
    border-radius: 6px;
    padding: 18px 22px;
    overflow-x: auto;
    font-size: 14px;
    line-height: 1.6;
    margin: 2em 0;
}

.jwai-post-content img,
.jwai-post-content .wp-block-image img {
    border-radius: 6px;
    margin: 2em 0;
}

.jwai-post-content ul,
.jwai-post-content ol {
    max-width: 680px;
    padding-left: 24px;
    margin: 0 0 1.4em 0;
}

.jwai-post-content li {
    margin: 0.4em 0;
}

.jwai-post-content hr {
    border: 0;
    border-top: 0.5px solid rgba( 250, 250, 248, 0.18 );
    margin: 3em 0;
}

/* ---------- Mobile: stack the TOC rail ABOVE the post body ---------- */
@media ( max-width: 900px ) {
    .jwai-toc-rail {
        position: relative;
        top: 0;
        max-height: none;
        margin-bottom: 32px;
    }

    .jwai-toc-aside {
        border-left: 0;
        padding-left: 0;
        padding: 20px;
        border: 0.5px solid rgba( 250, 250, 248, 0.18 );
        border-radius: 6px;
    }

    #jwai-reading-progress {
        height: 2px;
    }
}