/**
 * global-base.css — rules that are GENUINELY global, made explicit.
 *
 * Every rule below is currently live on johnproulx.com, but is being supplied
 * by a page-specific stylesheet (calendar.css / confirmation.css /
 * privacy-policy.css) via an unscoped selector. The site now depends on them.
 *
 * This file exists so that scoping those three files does NOT silently change
 * the site. Enqueue it sitewide, before the page-specific stylesheets.
 *
 * Each block records where it came from. Blocks marked [DECISION] preserve
 * current behaviour but are worth a deliberate call — see notes.
 */

/* ------------------------------------------------------------------
   1. box-sizing — from calendar.css `* { ... box-sizing: border-box }`
   The margin/padding half of that reset is now scoped to the calendar
   component. box-sizing stays global because the whole site is laid out
   under it and Kadence assumes it too.
   ------------------------------------------------------------------ */
   *,
   *::before,
   *::after {
     box-sizing: border-box;
   }
   
   /* ------------------------------------------------------------------
      2. [DECISION] Body background — from calendar.css `body { ... }`
      style.css declares `body { background: var(--jp-bg) }` with
      --jp-bg: #FAF9F5 (warm off-white), but calendar.css loads later and
      overrides it sitewide with #F7F8FA (cool grey). #F7F8FA is what the
      site renders today, so it is preserved here to keep the refactor
      visually neutral.
   
      -> Delete this block to fall back to the theme's intended #FAF9F5.
      The font-family from that same rule is NOT carried over: Kadence's own
      global font stack already wins, so it was inert.
      ------------------------------------------------------------------ */
   body {
     background-color: #F7F8FA;
     letter-spacing: 0.01em;
   }
   
   /* ------------------------------------------------------------------
      3. Page hero — from confirmation.css
         `#inner-wrap .entry-hero.page-hero-section { background-color: #151a25 }`
      Written to style the order-confirmation hero, but #inner-wrap exists on
      every page, so this is what gives /cart/, /refund_returns/, /my-account/
      etc. their dark hero band. Genuinely global — keep it here.
      ------------------------------------------------------------------ */
   .entry-hero.page-hero-section {
     background-color: #151a25;
   }
   
   /* ------------------------------------------------------------------
      4. Hero title typography — from privacy-policy.css
         `#inner-wrap .entry-hero .entry-title, #post-638 .entry-hero .entry-title`
      This is the site-wide hero title look (HaboroContrast, letterspaced).
      NOTE: the `#post-638` half of that selector was a copy-paste from
      confirmation.css — 638 is the CHECKOUT page. Privacy Policy is #post-3,
      so that half never matched its own page. Dropped here.
   
      `color` is deliberately NOT set globally — see block 5.
      ------------------------------------------------------------------ */
   .entry-hero .entry-title {
     font-family: "HaboroContrast", sans-serif;
     font-size: clamp(1.75rem, 3vw, 2.25rem);
     font-weight: 400;
     letter-spacing: 0.3rem;
     margin: 0;
     flex-shrink: 0;
   }
   
   /* ------------------------------------------------------------------
      5. Hero title colour — ACCESSIBILITY FIX
      privacy-policy.css hard-coded `color: #fff` globally. That is correct on
      the dark hero band (block 3), but /my-account/ paints a light
      .entry-hero-container-inner (Kadence --global-palette7, #f2f2f0) over it,
      so the title rendered white-on-near-white at 1.12:1 — invisible.
   
      Default stays white for the dark heroes; light-hero pages opt out.
      ------------------------------------------------------------------ */
   .entry-hero .entry-title {
     color: #fff;
   }
   
   /* /my-account/ and its sub-pages render a light hero inner. 16.75:1. */
   body.woocommerce-account .entry-hero .entry-title {
     color: var(--global-palette3);
   }
   
   /* Once that title is visible, a second problem shows: it collides with the
      fixed 100px #masthead (title top was 73px desktop / 79px mobile, so the top
      half sat under the header). The account hero simply is not offset for the
      fixed header — other pages escape it because their heroes carry their own
      padding (privacy-policy sets .entry-header padding explicitly).
   
      Measured live: this is NOT caused by the `*` reset — removing that reset
      moves nothing on this page, so this padding is still required after the
      refactor. Gives 21px clearance desktop, 27px mobile. */
   body.woocommerce-account .entry-hero-container-inner {
     padding-top: 48px;
     padding-bottom: 16px;
   }
   
   /* ------------------------------------------------------------------
      5b. Shared section headings — rescued from calendar.css
      .secondary-title / .secondary-subtitle look calendar-specific but are the
      site's shared section-heading pair. On /music/ alone they style three
      separate blocks:
          "Live" / "Upcoming Performances"        (inside the calendar)
          "Videos" / "Watch on YouTube"           (jp-videos__header)
          "Discography" / "Available on major..." (jp-discography__header)
      Scoping these to .calendar-container would have stripped the Videos and
      Discography headings. Verified against the live DOM. Keep global.
      ------------------------------------------------------------------ */
   .secondary-title {
     font-family: "HaboroContrast";
     letter-spacing: 0.2rem;
     font-size: 32px;
     width: 100%;
   }
   
   .secondary-subtitle {
     padding-bottom: 3rem;
     letter-spacing: 0.1rem;
     margin-bottom: 0 !important;
   }
   
   @media (max-width: 768px) {
     .secondary-title {
       font-size: 2rem;
       letter-spacing: 0.08em;
     }
   
     .secondary-subtitle {
       padding-bottom: 1.5rem;
       padding-right: 1rem;
       font-size: 0.95rem;
       letter-spacing: 0.06em;
     }
   }
   
   /* ------------------------------------------------------------------
      6b. Shop category rule rescued from confirmation.css
      This gold divider styles product-category archives and was sitting at the
      bottom of confirmation.css, unrelated to that page. It is already scoped by
      .tax-product_cat so it was never a leak — but once confirmation.css loads
      only on the order-received page, this rule would have silently stopped
      applying to /product-category/* pages. Re-homed here.
      ------------------------------------------------------------------ */
   .tax-product_cat .jp-shop-category-menu-wrap {
     height: 2px;
     margin-top: -32px !important;
     background: linear-gradient(
       90deg,
       rgba(198, 168, 83, 0) 0%,
       rgba(198, 168, 83, 0) 30%,
       rgba(198, 168, 83, 0.25) 50%,
       rgba(198, 168, 83, 0.7) 75%,
       #c6a853 100%
     );
   }
   
   /* ------------------------------------------------------------------
      6. [DECISION] Content wrap padding — from confirmation.css
         `#inner-wrap .content-area .entry-content-wrap { padding: 0 }`
      Also unscoped, also sitewide today. Preserved for visual neutrality.
      Once calendar.css's `*` reset is scoped, re-check whether this is still
      wanted — together they are why some content sits flush to its container.
      ------------------------------------------------------------------ */
   .content-area .entry-content-wrap {
     padding: 0;
   }