/*
Theme Name: Kadence Child
Theme URI: https://example.com/
Description: Child theme for Kadence
Author: Your Name
Template: kadence
Version: 1.0.0
Text Domain: kadence-child
*/

/* =========================================================
   0) TOKENS (colors, sizes)
========================================================= */

:root{
    --prue-blue: #1077BC !important;
    --accent-blue-deep: #265F87 !important;
    --header-h: 68px !important;
    --transparent-black: rgba(255,255,255,0.75) !important;
    --transparent-black-85: rgba(255,255,255,0.85) !important;
    --body-font: #222 !important;
    --off-white: #FAF9F5 !important;
    --white: #fff !important;
    --white-divider-line: linear-gradient(
        90deg, 
        rgba(255, 255, 255, 0) 0%, 
        rgba(255, 255, 255, 0.30) 22%, 
        rgba(255, 255, 255, 0.65) 50%, 
        rgba(255, 255, 255, 0.30) 78%, 
        rgba(255, 255, 255, 0) 100%
    );
    --blue-divider-line: linear-gradient(
        90deg,
        rgba(38, 95, 135, 0) 0%,
        rgba(38, 95, 135, 0.30) 22%,
        rgba(38, 95, 135, 0.65) 50%,
        rgba(38, 95, 135, 0.30) 78%,
        rgba(38, 95, 135, 0) 100%
    );
    --gold-divider-line: linear-gradient(
        90deg,
        rgba(198, 168, 83, 0) 0%,
        rgba(198, 168, 83, 0.30) 22%,
        rgba(198, 168, 83, 0.65) 50%,
        rgba(198, 168, 83, 0.30) 78%,
        rgba(198, 168, 83, 0) 100%
    );
    --jp-bg: #FAF9F5;
    --jp-card: #ffffff;
    --jp-text: #222;
    --jp-muted: rgba(26, 26, 26, 0.68);
    --jp-faint: rgba(26, 26, 26, 0.52);
    --jp-gold: #c6a853;
    --jp-max: 1100px;
    --jp-gap: clamp(1.5rem, 3vw, 2.75rem);
    --jp-pad: clamp(1.25rem, 2.5vw, 2rem);
    --jp-rule: 1px;
    --jp-t-bg: #1a1a1a;

    /* Shared panel height (tweak to match mock) */
    --jp-panel-aspect: 4 / 5;
    --id-section-padding: clamp(3rem, 6vw,5rem) 0 0;

    --jp-anchor-offset: 140px;
}

@font-face {
    font-family: "HaboroContrast";
    src: url("https://johnproulx.com/wp-content/uploads/fonts/HaboroContrast-NorReg.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* Works for native anchor jumps + many JS smooth scroll implementations */
html {
    scroll-padding-top: var(--jp-anchor-offset);
    scroll-behavior: smooth; /* optional */
}

/* Still keep this—helps when the target element is scrolled into view directly */
:target {
    scroll-margin-top: var(--jp-anchor-offset);
}

body,
#page,
#inner-wrap {
    scroll-padding-top: var(--jp-anchor-offset);
}

body {
    background: var(--jp-bg);
    color: var(--jp-text);
    margin: 0;
}

.page-id-637 .wp-block-heading.has-text-align-center,
.page-id-637 .wc-block-grid.wp-block-product-new.wp-block-woocommerce-product-new.wc-block-product-new {
    display: none;
}

.page-id-637 .wp-block-heading.has-text-align-center.with-empty-cart-icon.wc-block-cart__empty-cart__title {
    display: block;
}

/* Apply to sections you link to */
.jp-anchor {
    scroll-margin-top: var(--jp-anchor-offset);
}

.entry-content-wrap {
    background: var(--jp-bg);
    padding: 0;
}

.wp-block-cover .wp-block-cover__image-background {
    margin-top: 60px;
}

@media screen and (max-width: 768px) {
    .wp-block-cover .wp-block-cover__image-background {
        margin-top: 0;
    } 
}

.content-area {
    margin-top: 0;
}

#shop-page {
    margin-top: 7.5rem !important;
}

/* =========================================================
   HEADER OVER HERO (Homepage)
========================================================= */

/* Position header above hero */

#masthead {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 9999;
    background: transparent;
    min-height: 90px;
}

/* True cinematic flat overlay */

#main-header .site-header-inner-wrap,
#mobile-header .site-header-inner-wrap {
    background: #090f1a;
    transition: background 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    border: 0 !important;
    padding: 10px 0;
    width: 100%;
    min-height: 90px;
}

[aria-label="Shop"] {
    margin-top: 5rem;
}

/* On scroll */

#main-header .site-header-inner-wrap.scrolled,
#mobile-header .site-header-inner-wrap.scrolled,
#mobile-drawer {
  background: #090f1a;
}

/* ==========================================
   MASTHEAD DROPDOWNS (exact match of .jp-shop-submenu inside .jp-inline-menu)
========================================== */

#masthead .header-navigation .header-menu-container .menu-item-has-children {
  position: relative;
  flex-shrink: 0;
}

#masthead .header-navigation .header-menu-container .sub-menu,
#masthead .header-navigation .header-menu-container .submenu {
  display: block;
  position: absolute;
  top: 100%;
  left: 0;
  margin: -4px 0 0 0;
  list-style: none;
  padding: 0.5rem 0;
  min-width: 12rem;
  background: #090f1a;
  border: 1px solid rgba(198, 168, 83, 0.45);
  border-top: 2px solid rgba(198, 168, 83, 0.6);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
  z-index: 1000;
  pointer-events: none;
}

#masthead .header-navigation .header-menu-container .menu-item-has-children > .sub-menu::before,
#masthead .header-navigation .header-menu-container .menu-item-has-children > .submenu::before {
  content: "";
  position: absolute;
  top: -12px;
  left: 0;
  right: 0;
  height: 12px;
}

#masthead .header-navigation .header-menu-container .menu-item-has-children:hover > .sub-menu,
#masthead .header-navigation .header-menu-container .menu-item-has-children:hover > .submenu,
#masthead .header-navigation .header-menu-container .menu-item-has-children:focus-within > .sub-menu,
#masthead .header-navigation .header-menu-container .menu-item-has-children:focus-within > .submenu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

#masthead .header-navigation .header-menu-container .sub-menu .menu-item,
#masthead .header-navigation .header-menu-container .submenu .menu-item {
  margin: 0;
  padding: 0;
}

#masthead .header-navigation .header-menu-container .sub-menu .menu-item::before,
#masthead .header-navigation .header-menu-container .sub-menu .menu-item + .menu-item::before,
#masthead .header-navigation .header-menu-container .submenu .menu-item::before,
#masthead .header-navigation .header-menu-container .submenu .menu-item + .menu-item::before {
  display: none !important;
}

#masthead .header-navigation .header-menu-container .sub-menu .menu-item-parent,
#masthead .header-navigation .header-menu-container .submenu .menu-item-parent {
  border-bottom: 1px solid rgba(198, 168, 83, 0.35);
  margin-bottom: 0.25rem;
  padding-bottom: 0.25rem;
}

#masthead .header-navigation .header-menu-container .sub-menu .menu-item > a,
#masthead .header-navigation .header-menu-container .submenu .menu-item > a {
  position: relative;
  display: inline-block;
  padding: 0.5rem 1rem;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.88);
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
}

#masthead .header-navigation .header-menu-container .sub-menu .menu-item > a::after,
#masthead .header-navigation .header-menu-container .submenu .menu-item > a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -0.2rem;
  width: 100%;
  height: 1px;
  background: linear-gradient(
    90deg,
    rgba(198, 168, 83, 0) 0%,
    rgba(198, 168, 83, 0.7) 50%,
    rgba(198, 168, 83, 0) 100%
  );
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 260ms ease;
}

#masthead .header-navigation .header-menu-container .sub-menu .menu-item > a:hover,
#masthead .header-navigation .header-menu-container .sub-menu .menu-item > a:focus-visible,
#masthead .header-navigation .header-menu-container .submenu .menu-item > a:hover,
#masthead .header-navigation .header-menu-container .submenu .menu-item > a:focus-visible {
  background: rgba(198, 168, 83, 0.15);
  color: #fff;
}

#masthead .header-navigation .header-menu-container .sub-menu .menu-item > a:hover::after,
#masthead .header-navigation .header-menu-container .sub-menu .menu-item > a:focus-visible::after,
#masthead .header-navigation .header-menu-container .submenu .menu-item > a:hover::after,
#masthead .header-navigation .header-menu-container .submenu .menu-item > a:focus-visible::after {
  transform: scaleX(1);
}

/* Nested dropdowns (Piano, Vocal, etc.) – open to the left */
#masthead .header-navigation .header-menu-container .sub-menu .menu-item-has-children > .sub-menu,
#masthead .header-navigation .header-menu-container .sub-menu .menu-item-has-children > .submenu,
#masthead .header-navigation .header-menu-container .submenu .menu-item-has-children > .sub-menu,
#masthead .header-navigation .header-menu-container .submenu .menu-item-has-children > .submenu {
  top: 0;
  left: auto;
  right: 100%;
  margin: 0 8px 0 0;
  transform: translateX(10px);
}

#masthead .header-navigation .header-menu-container .sub-menu .menu-item-has-children > .sub-menu::before,
#masthead .header-navigation .header-menu-container .sub-menu .menu-item-has-children > .submenu::before,
#masthead .header-navigation .header-menu-container .submenu .menu-item-has-children > .sub-menu::before,
#masthead .header-navigation .header-menu-container .submenu .menu-item-has-children > .submenu::before {
  top: 0;
  left: auto;
  right: -12px;
  width: 12px;
  height: 100%;
}

#masthead .header-navigation .header-menu-container .sub-menu .menu-item-has-children:hover > .sub-menu,
#masthead .header-navigation .header-menu-container .sub-menu .menu-item-has-children:hover > .submenu,
#masthead .header-navigation .header-menu-container .submenu .menu-item-has-children:hover > .sub-menu,
#masthead .header-navigation .header-menu-container .submenu .menu-item-has-children:hover > .submenu,
#masthead .header-navigation .header-menu-container .sub-menu .menu-item-has-children:focus-within > .sub-menu,
#masthead .header-navigation .header-menu-container .sub-menu .menu-item-has-children:focus-within > .submenu,
#masthead .header-navigation .header-menu-container .submenu .menu-item-has-children:focus-within > .sub-menu,
#masthead .header-navigation .header-menu-container .submenu .menu-item-has-children:focus-within > .submenu {
  transform: translateX(0);
}

.header-navigation .header-menu-container ul ul li.menu-item.current-menu-item > a {
    background: transparent;
}

.site-title-wrap {
    display: none;
}

#masthead .main-navigation .current-menu-item > a,
#masthead .main-navigation .current-menu-ancestor > a {
    color: var(--off-white);
    padding: 1.3rem;
}

.home #hero.hero--desktop {
    height: calc(100vh + var(--header-h));
}

#hero .wp-block-heading {
    font-family: "HaboroContrast", serif !important;
    font-weight: 300;
    font-size: clamp(3.6rem, 6vw, 5rem);
    letter-spacing: 0.08em;
    line-height: 1.0;
    text-transform: uppercase;
    margin: 0;
    white-space: nowrap;
}

.home #hero {
    min-height: 100vh;
    height: 100vh;
    display: flex;
    align-items: center;
    margin-top: 0;
    padding-top: 0;
}

#hero .hero__last { 
    color: var(--accent-blue-deep) !important; 
}

.hero__subtitle {
    font-family: "HaboroContrast", serif !important;
    font-size: clamp(1.05rem, 1.35vw, 1.5rem) !important;
    letter-spacing: 0.5em !important;
    text-transform: uppercase;
    color: var(--transparent-black) !important;
    margin-top: 1.2rem !important;
    margin-bottom: 0;
}

.wp-block-button__link {
    min-width: 190px;
    height: 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0;
    box-shadow: none;
}

.wp-block-button__link:hover {
    border-color: var(--transparent-black-85) !important;
    color: var(--white) !important;
}

.home #hero::before {
    content: "";
    position: absolute;
    inset: 0;
    width: min(55vw, 860px);
    background: linear-gradient(
      90deg,
      rgba(0,0,0,0.72) 0%,
      rgba(0,0,0,0.55) 25%,
      rgba(0,0,0,0.30) 55%,
      rgba(0,0,0,0.00) 100%
    );
    pointer-events: none;
    z-index: 1;
}

.header-navigation .header-menu-container ul ul.sub-menu, .header-navigation .header-menu-container ul ul.submenu {
    background: #090f1a;    
}

/* =========================================================
   1) NAV + HEADER LOCK (stable across sticky/transparent)
========================================================= */

#masthead .main-navigation .current-menu-item > a,
#masthead .main-navigation .current-menu-ancestor > a{
    color: var(--off-white);
}

/* Hover + current */

#masthead .main-navigation a:hover,
#masthead .main-navigation a:focus {
    opacity: 1 !important;
    color: #fff;
}

/* If Kadence wraps text in spans */

#masthead .main-navigation a span{
    color: inherit !important;
}

.header-navigation .header-menu-container ul ul li.menu-item > a {
    font-size: 15px;
}

.site-main-header-inner-wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* =========================================================
   2) HOME: HERO UNDER HEADER (reliable overlay)
========================================================= */

.home #hero{
    margin-top: calc(-1 * var(--header-h)) !important;
    padding-top: var(--header-h) !important;
}

/* =========================================================
   3) HERO TYPOGRAPHY (fluid scale)
========================================================= */

#hero .wp-block-heading{
    font-size: clamp(3.6rem, 6vw, 5rem);
}

.hero__rule{
    width: clamp(260px, 28vw, 360px);
    margin: clamp(14px, 1.6vw, 18px) 0 clamp(18px, 2.2vw, 26px);
    height: 2px;
    margin-top: clamp(1.2rem, 1.8vw, 1.8rem);
    margin-bottom: clamp(1.8rem, 2.5vw, 2.8rem);
    background: linear-gradient(
      90deg,
      rgba(255,255,255,0) 0%,
      rgba(255,255,255,0.30) 22%,
      rgba(255,255,255,0.65) 50%,
      rgba(255,255,255,0.30) 78%,
      rgba(255,255,255,0) 100%
    );
}

/* =========================================================
   HOME HERO — EDITORIAL LOCK
========================================================= */

/* Ensure hero can host overlays */

.home #hero {
    position: relative;
    overflow: hidden;
}

/* Cinematic left wash (this is the missing depth) */

.home #hero::before{
    content:"";
    position:absolute;
    inset:0;
    width:min(55vw, 860px);
    background: linear-gradient(
      90deg,
      rgba(0,0,0,0.74) 0%,
      rgba(0,0,0,0.55) 25%,
      rgba(0,0,0,0.30) 55%,
      rgba(0,0,0,0.00) 100%
    );
    pointer-events:none;
    z-index:1;
}

/* Put text above wash */

.home #hero .wp-block-cover__inner-container{
    position:relative;
    z-index:2;
    width: min(50vw, 640px);
    padding: clamp(4rem, 12vh, 7rem) 2rem 0;
    max-width: 1290px;
    margin: 0 !important;
    left: 0;
    width: 100%;
}

/* Title (force the editorial look) */

.home #hero .hero__title,
.home #hero .wp-block-heading{
    font-family: "HaboroContrast", serif !important;
    font-weight: 300 !important;
    font-size: clamp(3.6rem, 6vw, 5rem) !important;
    line-height: 1.0 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    margin: 0 !important;
    text-shadow: 0 2px 22px rgba(0,0,0,0.55) !important;
}

/* ================================
   HERO BUTTONS — Quiet Luxury
================================ */

.hero__buttons .wp-block-button__link {
    background: transparent !important;
    border: 1px solid rgba(255,255,255,0.28) !important;
    color: var(--white) !important;
    letter-spacing: .18em;
    text-transform: uppercase;
    font-size: 0.75rem;
    padding: 0.9rem 2.6rem;
    transition: 
      background 0.35s ease,
      border-color 0.35s ease,
      transform 0.35s ease,
      box-shadow 0.35s ease;
}

/* sheen layer */

.hero--desktop .hero__buttons .wp-block-button__link::after,
.hero--mobile .hero__buttons .wp-block-button__link::after {
    content:"";
    position:absolute;
    inset:-1px;
    pointer-events:none;
    opacity:0;
    transition: opacity .45s ease;
    background: linear-gradient(
      110deg,
      rgba(255,255,255,0.00) 0%,
      rgba(255,255,255,0.08) 40%,
      rgba(255,255,255,0.00) 70%
    );
}

/* Hover */

.hero__buttons .wp-block-button__link:hover {
    background: rgba(255,255,255,0.06) !important;
    border-color: rgba(255,255,255,0.55) !important;
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(0,0,0,0.45);
}

.hero--desktop .hero__buttons .wp-block-button__link:hover::after,
.hero--mobile .hero__buttons .wp-block-button__link:hover::after {
    opacity:1;
}

/* keyboard focus = same luxury, accessible */

.hero--desktop .hero__buttons .wp-block-button__link:focus-visible, 
.hero--mobile .hero__buttons .wp-block-button__link:focus-visible {
    outline: none;
    box-shadow:
      0 10px 28px rgba(0,0,0,0.38),
      0 0 0 2px rgba(38,95,135,0.55);
}

/* Hide mobile hero on desktop */

.hero--mobile {
    display: none;
}

/* =========================================================
   HEADER – OVERLAY MODE (HOME ONLY)
========================================================= */

/* Remove default spacing below header */

.site-content,
#inner-wrap,
.content-wrap {
    padding-top: 0 !important;
    margin-top: 0 !important;
    background: #151a25 !important;
}

/* =========================
    MAIN HEADER
========================= */

.main-header {
    margin-bottom: 2.5rem;
}

.main-header h2 {
    font-family: "HaboroContrast", serif;
    font-size: clamp(2rem, 3vw, 2.75rem);
    margin: 0 0 1.25rem 0;
    position: relative;
}

.main-header h2::after {
    content: "";
    display: block;
    height: 1px;
    width: 100%;
    margin-top: 1.25rem;
    background-color: #C6A853; /* gold */
    opacity: 0.8;
}

/* =========================
   INFO HEADLINE
========================= */

.info-container-column {
    max-width: 560px;
}

.info-container p {
    margin-top: 0;
    font-size: 1.05rem;
    line-height: 1.75;
    opacity: 0.88;
}

.info-container .info-headline {
    font-size: 1.25rem;
    line-height: 1.6;
    opacity: 0.95;
    margin-bottom: 1.25rem;
}

/* =========================
   BIO: MATCH HEIGHT + SCROLL
========================= */

#bio {
    padding-bottom: 0;
}

/* Make the two columns equal height */

.info-container .kt-row-column-wrap {
    align-items: stretch;
}

/* Ensure the Kadence "Section" containers stretch */

.info-container .kt-inside-inner-col {
    height: 100%;
}

/* Right column becomes the framed scroll box */

.info-container .scroll-container {
    position: relative;
    height: 100%;
    max-height: 100%;
    overflow: auto;
    padding-bottom: 3.25rem; /* space for the pinned footer */
}

/* Pinned “Scroll for More” footer inside the scroll box */

.info-container .scroll-container .scroll-footer {
    position: sticky;
    bottom: 0;
    margin: 0;
    padding: 0.9rem 0;
    text-align: center;
    font-size: 0.7rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    opacity: 0.65;

    /* subtle fade panel so text behind doesn't clash */
    background: linear-gradient(
        to top,
        rgba(250, 249, 246, 1) 0%,
        rgba(250, 249, 246, 0.92) 60%,
        rgba(250, 249, 246, 0) 100%
    );
}

#inner-wrap {
    background: var(--jp-t-bg);
}

.jp-header {
    position: relative;
    top: 2rem;
}

.jp-divider {
    background: linear-gradient(90deg, rgba(198, 168, 83, 0) 0%, rgba(198, 168, 83, 0.9) 50%, rgba(198, 168, 83, 0) 100%);
    height: 2px;
    width: 70vw;
    margin: auto;
}

/* Make the cover a positioning context */
.jp-discography__cover {
    position: relative;
    display: block;
    overflow: hidden;
}

/* Ensure the image behaves */
.jp-discography__cover img {
    display: block;
    width: 100%;
    height: auto;
}

/* Blue-out overlay — only when image was grabbed from PDF (src contains -pdf) */
.jp-discography__cover:has(img[src*="-pdf"])::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 2;

    background: linear-gradient(
        to bottom,
        transparent 0%,
        transparent 35%,
        rgba(245, 243, 238, 0.92) 70%,
        rgba(245, 243, 238, 1) 75%
    );
}

/* Optional watermark text — only for PDF-sourced images */
.jp-discography__cover:has(img[src*="-pdf"])::before {
    content: "PREVIEW";
    position: absolute;
    right: 12px;
    bottom: 10px;
    font-size: 12px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    pointer-events: none;
    z-index: 3;
}

/* Blue-out overlay */
#discography .jp-discography__cover::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: transparent;
}

/* Optional watermark text */
#discography .jp-discography__cover::before {
    content: "";
    opacity: 0;
}

/* Apply preview fog to all products EXCEPT Books */
li.product:not(.product_cat-books).has-post-thumbnail > a.woocommerce-loop-image-link {
    position: relative;
    display: block;
    overflow: hidden;
}

/* Fade mask — only for PDF-sourced images */
li.product:not(.product_cat-books).has-post-thumbnail > a.woocommerce-loop-image-link:has(img[src*="-pdf"])::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;

    /* Adjust to your site background color */
    background: linear-gradient(
        to bottom,
        rgba(245, 243, 238, 0) 0%,
        rgba(245, 243, 238, 0) 35%,
        rgba(245, 243, 238, 0.65) 55%,
        rgba(245, 243, 238, 0.92) 70%,
        rgba(245, 243, 238, 1) 85%,
        rgba(245, 243, 238, 1) 100%
    );
}

/* Watermark — only for PDF-sourced images */
li.product:not(.product_cat-books).has-post-thumbnail > a.woocommerce-loop-image-link:has(img[src*="-pdf"])::before {
    content: "PREVIEW";
    color: #275f87;
    position: absolute;
    right: 12px;
    bottom: 10px;
    z-index: 3;
    pointer-events: none;
    font-size: 12px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

/* SINGLE PRODUCT PAGE — apply to everything except Books */
.single-product .product:not(.product_cat-books) .woocommerce-product-gallery__image {
    position: relative;
    overflow: hidden;
}

/* Fade mask — only for PDF-sourced images */
.single-product .product:not(.product_cat-books) .woocommerce-product-gallery__image:has(img[src*="-pdf"])::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 5;
    pointer-events: none;

    background: linear-gradient(
        to bottom,
        rgba(245, 243, 238, 0) 0%,
        rgba(245, 243, 238, 0) 35%,
        rgba(245, 243, 238, 0.65) 55%,
        rgba(245, 243, 238, 0.92) 72%,
        rgba(245, 243, 238, 1) 88%,
        rgba(245, 243, 238, 1) 100%
    );
}

/* Watermark — only for PDF-sourced images */
.single-product .product:not(.product_cat-books) .woocommerce-product-gallery__image:has(img[src*="-pdf"])::before {
    content: "PREVIEW";
    position: absolute;
    right: 18px;
    bottom: 18px;
    z-index: 6;
    pointer-events: none;

    font-size: 14px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    opacity: 0.75;
}

/* ---- PHOTOSWIPE: overlay ONLY on the image area (PDF-sourced images only) ---- */

/* Ensure the image itself is beneath the overlay */
body.single-product:not(.product_cat-books) .pswp .pswp__zoom-wrap > img.pswp__img {
    position: relative !important;
    z-index: 1 !important;
}

/* Only apply on single product pages EXCEPT books */
.single-product .product:not(.product_cat-books) ~ .pswp .pswp__zoom-wrap,
.single-product .product:not(.product_cat-books) .pswp .pswp__zoom-wrap {
    position: relative !important;
}

/* Force image below overlay */
.single-product .product:not(.product_cat-books) ~ .pswp .pswp__zoom-wrap > img.pswp__img,
.single-product .product:not(.product_cat-books) .pswp .pswp__zoom-wrap > img.pswp__img {
    position: relative !important;
    z-index: 1 !important;
}

/* Fog — only for PDF-sourced images */
.single-product .product:not(.product_cat-books) ~ .pswp .pswp__zoom-wrap:has(img.pswp__img[src*="-pdf"])::after,
.single-product .product:not(.product_cat-books) .pswp .pswp__zoom-wrap:has(img.pswp__img[src*="-pdf"])::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 2 !important;
    pointer-events: none !important;

    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, 0) 35%,
        rgba(0, 0, 0, 0.45) 55%,
        rgba(0, 0, 0, 0.75) 72%,
        rgba(0, 0, 0, 0.92) 88%,
        rgba(0, 0, 0, 1) 100%
    ) !important;
}

/* Watermark — only for PDF-sourced images */
.single-product .product:not(.product_cat-books) ~ .pswp .pswp__zoom-wrap:has(img.pswp__img[src*="-pdf"])::before,
.single-product .product:not(.product_cat-books) .pswp .pswp__zoom-wrap:has(img.pswp__img[src*="-pdf"])::before {
    content: "PREVIEW" !important;
    position: absolute !important;
    right: 20px !important;
    bottom: 18px !important;
    z-index: 3 !important;
    pointer-events: none !important;

    font-size: 14px !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    opacity: 0.85 !important;
}

/* ------------------------------------
   TABLET STYLINGS at 1024px and under
------------------------------------- */

@media (max-width: 1024px) {

  /* Put the tablet image on the cover itself */
    .home .wp-block-cover.hero--desktop{
        background-image: url("https://johnproulx.com/wp-content/uploads/2026/02/bw-2-tablet.png") !important;
        background-size: cover !important;
        background-repeat: no-repeat !important;
        background-position: 70% top !important; /* tweak crop */
  }

  /* Completely remove the built-in cover <img> so it can't show */
    .home .wp-block-cover.hero--desktop > img.wp-block-cover__image-background,
    .home .wp-block-cover.hero--desktop .wp-block-cover__image-background{
        display: none !important;
    }
  
    .home .hero--desktop .wp-block-heading span {
        display: block;
        padding-left: 1.25rem;
    }
    
    .calendar-container {
        padding: 5rem 3rem;
    }
}

/* Force desktop nav until 768px */

@media (min-width: 769px) {

    /* Hide the mobile hamburger trigger */
    #mobile-header,
    #mobile-drawer {
        display: none !important;
    }

    /* Ensure desktop nav is visible */
    #main-header {
       display: block !important;
    }
}

/* ------------------------------------
   MOBILE STYLINGS at 768px and under
------------------------------------- */

@media (max-width: 768px) {
    .hero--desktop {
        display: none;
    }

    .hero--mobile {
        display: block;
        margin-bottom: 0 !important;
    }
    
    /* Put the tablet image on the cover itself */
    .home .wp-block-cover.hero--desktop{
        display: none !important;
    }
    
    .entry-content-wrap {
        padding: 0;
    }
    
    /* =========================
       HERO: "JOHN" (mobile/hero)
       Targets the first <p> inside the hero inner container
    ========================= */

    /* Style "JOHN" */
    .home .hero--mobile .wp-block-cover__inner-container {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
    }
    
    .home .hero .wp-block-cover__inner-container > p.has-large-font-size:first-of-type,
    .hero__last {
        margin: 0 !important;
        padding: 0 !important;

        /* Typography */
        font-family: "HaboroContrast", serif !important; /* swap if needed */
        font-weight: 400;
        text-transform: uppercase;
        letter-spacing: 0.22em;
        line-height: 0.9;
    
        /* Size (scales nicely across devices) */
        font-size: 14vw !important;
    
        /* Override the WP center align class */
        text-align: left !important;
        white-space: nowrap;
    }
    
    .home .hero .wp-block-cover__inner-container > p.has-large-font-size:first-of-type {
        color: rgba(255,255,255,0.92) !important;
        left: clamp(1.25rem, 6vw, 3rem);
        bottom: 3vh;
        position: absolute;
        text-shadow: 0 2px 18px rgba(0,0,0,0.35);
    }
    
    .hero__last {
        color: var(--prue-blue) !important;
        left: clamp(1.25rem, 6vw, 3rem);
        top: 1vh;
        position: relative;
    }
    
    .hero__subtitle.hero__subtitle--mobile {
        color: var(--body-font) !important;
        text-align: center;
        width: 100%;
        padding-top: 8vh;
        font-size: 4vw !important;
    }
    
    .wp-block-cover.hero--mobile.hero__square {
        aspect-ratio: 1 / 1 !important;
        margin-bottom: 0;
    }
    
    .hero--mobile .hero__buttons .wp-block-button__link {
        border: 1px solid rgba(0, 0, 0, 0.28) !important;
        color: var(--body-font) !important;
        width: 70vw;
        margin: 2vw 0;
    }
    
    .hero--mobile .hero__buttons .wp-block-button__link:hover {
        transform: none;
        box-shadow: none;
    }
    
    .wp-block-buttons.hero__buttons.hero__buttons--mobile {
        display: flex;
        flex-direction: column;
        padding: 10vw;
    }
    
    .hero--mobile .hero__rule {
        background: var(--blue-divider-line);
        margin: auto;
    }
    
    /* -------------------------------------------
    Kadence Mobile Toggle: 2-line luxury -> X
    -------------------------------------------- */
    
    /* Target the actual button you showed */
    #mobile-toggle {
        position: relative;
        width: 44px;
        height: 44px;
        padding: 0;
        border: 0;
        background: transparent;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        color: var(--white);
        z-index: 2;
    }
    
    /* Hide Kadence default icon inside the button (SVG, spans, etc.) */
    #mobile-toggle svg,
    #mobile-toggle .kadence-svg-icon,
    #mobile-toggle .kadence-icon,
    #mobile-toggle .menu-toggle-icon,
    #mobile-toggle .hamburger,
    #mobile-toggle .kadence-menu-toggle-icon,
    #mobile-toggle .menu-toggle-open,
    #mobile-toggle .menu-toggle-close {
        display: none !important;
    }
    
    /* Two lines */
    #mobile-toggle::before,
    #mobile-toggle::after {
        content: "";
        position: absolute;
        left: 10px;
        right: 10px;
        height: 2px;
        background: currentColor;
        border-radius: 999px;
        transform-origin: center;
        transition:
            transform 520ms cubic-bezier(0.16, 1, 0.3, 1),
            top 520ms cubic-bezier(0.16, 1, 0.3, 1),
            bottom 520ms cubic-bezier(0.16, 1, 0.3, 1),
            opacity 260ms ease;
    }

    /* Default hamburger positions (2 elegant lines) */
    #mobile-toggle::before {
        top: 16px;
    }
    
    #mobile-toggle::after {
        bottom: 16px;
    }
    
    /* Optional: subtle hover “lift” */
    @media (hover: hover) {
        #mobile-toggle:hover::before {
            transform: translateY(-0.5px);
            z-index: ;
        }
    
        #mobile-toggle:hover::after {
            transform: translateY(0.5px);
        }
    }
    
    /* Open state: animate into an X */
    #mobile-toggle[aria-expanded="true"]::before {
        top: 21px;
        transform: rotate(45deg);
    }
    
    #mobile-toggle[aria-expanded="true"]::after {
        bottom: 21px;
        transform: rotate(-45deg);
    }
    
    /* Focus style (accessible, tasteful) */
    #mobile-toggle:focus-visible {
        outline: 1px solid rgba(255, 255, 255, 0.35);
        outline-offset: 6px;
        border-radius: 10px;
    }
    
    .toggle-close-bar {
        display: none;
        pointer-events: none;
    }
    
    .popup-drawer .drawer-inner {
        background: transparent !important;
        padding-top: 4rem;
    }
    
    .popup-drawer.active .drawer-overlay {
        width: 50vw;
    }
    
    #mobile-drawer {
        z-index: 99 !important;
        width: 50vw;
        height: 100vh;
    }
    
    #mobile-drawer .drawer-header .drawer-toggle {
        pointer-events: none;
    }
    
    .sub-menu.show-drawer {
        opacity: 1;
        transform: none;
    }
    
    /* Example: swap icons based on Kadence state */
    #mobile-toggle.menu-toggle-open .icon-hamburger { 
        display: none; 
    }
    
    #mobile-toggle.menu-toggle-open .icon-close { 
        display: inline-flex; 
    }

    #mobile-toggle.menu-toggle-close .icon-hamburger { 
        display: inline-flex; 
    }
    
    #mobile-toggle.menu-toggle-close .icon-close { 
        display: none; 
    }
    
    .mobile-navigation.drawer-navigation-parent-toggle-true .drawer-nav-drop-wrap .drawer-sub-toggle {
        right: 0;
        left: unset;
        width: 25%;
    }
}

/* Empty cart: Product New block – match shop/category product cards */
body.woocommerce-cart .wp-block-woocommerce-product-new .wc-block-grid__products {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.2rem;
}

body.woocommerce-cart .wc-block-grid__product.woo-archive-action-on-hover:hover .entry-content-wrap,
body.woocommerce-cart .wc-block-grid__product.woo-archive-action-on-hover:focus-within .entry-content-wrap {
  background: #265F87;
  z-index: 2;
}

body.woocommerce-cart .wc-block-grid__product .product-details {
  padding: 0.75rem 1rem 0.9rem !important;
  transition: padding 0.3s ease;
}

body.woocommerce-cart .wc-block-grid__product:hover .product-details {
  padding-top: 1.25rem !important;
  padding-bottom: 1.35rem !important;
}

body.woocommerce-cart .wc-block-grid__product:not(.product_cat-books) .wc-block-grid__product-link {
  position: relative;
  display: block;
  overflow: hidden;
}

body.woocommerce-cart .wc-block-grid__product:not(.product_cat-books) .wc-block-grid__product-link:has(img[src*="-pdf"])::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(245, 243, 238, 0) 0%,
    rgba(245, 243, 238, 0) 35%,
    rgba(245, 243, 238, 0.65) 55%,
    rgba(245, 243, 238, 0.92) 70%,
    rgba(245, 243, 238, 1) 85%,
    rgba(245, 243, 238, 1) 100%
  );
}

body.woocommerce-cart .wc-block-grid__product:not(.product_cat-books) .wc-block-grid__product-link:has(img[src*="-pdf"])::before {
  content: "PREVIEW";
  color: #275f87;
  position: absolute;
  right: 12px;
  bottom: 10px;
  z-index: 3;
  pointer-events: none;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* Books: remove overlay and PREVIEW on cart block products */
body.woocommerce-cart .wc-block-grid__product.product_cat-books .wc-block-grid__product-link::after,
body.woocommerce-cart .wc-block-grid__product.product_cat-books .wc-block-grid__product-link::before {
  display: none !important;
  content: none !important;
}

/* Match product-categoy image dimensions (400×518) */
body.woocommerce-cart .wc-block-grid__product .wc-block-grid__product-link {
  width: min(400px, 100%);
  aspect-ratio: 400 / 518;
  display: block;
  overflow: hidden;
}

body.woocommerce-cart .wc-block-grid__product .wc-block-grid__product-link img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  object-position: center;
  display: block;
}

@media (max-width: 980px) {
  body.woocommerce-cart .wp-block-woocommerce-product-new .wc-block-grid__products {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  body.woocommerce-cart .wp-block-woocommerce-product-new .wc-block-grid__products {
    grid-template-columns: 1fr;
  }
}