/* =========================================
   FIRE HUB — "THE FORGE" (Shop by Category)
   Page-specific overrides for page-jynn-shop-by-category.php.
   Shared component styles live in style.css.

   Layout is IDENTICAL across the three hub
   pages (fire / water / ice) — only the theme
   accent colour differs. The animated fire
   background is rendered in WebGL in fire.js.
   Content is intentionally empty for now.
   ========================================= */

.jynn-layer {
    position: relative;
    z-index: 10;
}

#webgl-canvas {
    opacity: 0;
}

/* --- Hero (shared layout: anchored bottom-left) --- */
.forge-hero {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    align-items: flex-end;
    padding: 0 0 14vh;
    position: relative;
}

body.page-template-page-jynn-shop-by-category::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        linear-gradient(180deg, rgba(3,4,7,0) 40%, rgba(3,4,7,0.45) 76%, rgba(3,4,7,0.82) 100%),
        radial-gradient(85% 60% at 16% 92%, rgba(3,4,7,0.78) 0%, rgba(3,4,7,0) 62%);
}

.forge-hero .hero-content {
    position: relative;
    z-index: 2;
}

.forge-hero .hero-badge {
    border-left-color: #FF7A33;
    color: #E8A06A;
}

.forge-hero .hero-title {
    font-size: clamp(3.5rem, 9vw, 9rem);
}

/* Theme accent on the second title row */
.forge-hero .accent-line {
    background: linear-gradient(180deg, #FFD9A0 0%, #FF7A33 70%, #E0521A 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    /* Extend the gradient's paint box down so descenders (g, y) get filled;
       the equal negative margin keeps the margin box height unchanged so
       nothing below shifts. Pairs with overflow:clip on the row. */
    padding-bottom: 0.3em;
    margin-bottom: -0.3em;
}

.forge-hero .hero-subtext {
    color: #C99A78;
}

.reveal-target {
    opacity: 0;
    transform: translateY(20px);
}

/* --- Product grid section styling lives in woocommerce-shop.css
   (.jynn-editorial-showcase), loaded on these pages. --- */

@media (max-width: 768px) {
    .forge-hero .hero-title { font-size: clamp(2.4rem, 11vw, 3.5rem); }

    /* .editorial-header .section-title has no override on this page at
       all previously — it fell back to style.css's plain .section-title
       (clamp(2.5rem, 4vw, 4rem), 40px floor), which reads oversized here.
       Matches the mobile size category archives already use
       (pendants-v2.css) for consistency across both page types that
       share this exact heading markup. */
    .editorial-header .section-title {
        font-size: clamp(2rem, 9vw, 2.75rem);
    }
}