/*
Theme Name: Arj C. Masters
Author: Arj C. Masters
Author URI: https://www.arjcmasters.com
Text Domain: Arj C. Master Theme
Version: 01.2026.19
*/

/* Suppress visual flash of the auto-injected Cloudflare Turnstile widget
   while turnstileRelocate.js moves it into position. Default state =
   hidden (widget is at the top of form, where the plugin injects it).
   Once moved into the .row by JS, the second selector matches and the
   widget becomes visible. Result: no flicker on page load. */
.wpcf7-form .wpcf7-turnstile {
  visibility: hidden !important;
}
.wpcf7-form .row .wpcf7-turnstile {
  visibility: visible !important;
}

/* Hide reCaptcha Badge */

.grecaptcha-badge { 
visibility: hidden; 
}

/* =========================================================================
   ARJCMASTERS.COM — RESPONSIVE & SPAM FIX OVERRIDES (Devonic Web, 2026-05)
   Loaded via wp_enqueue_style('style', get_stylesheet_uri()) AFTER
   main.min.css. Selectors use body.home + !important to win over inline
   <style id="arj-design-fixes-css"> block in <head>.

   Scope summary:
     1. Tablet LANDSCAPE only (768–1199px, orientation:landscape):
        - Shrink decorative gold SVG line holders + grey body_tl.webp bg
        - Resize hero signature + headline so they don't overlap the photo
        - Widen the 3 highlight boxes by tightening their interior padding
        - Force "Mixing & Mastering" tile label to one line; align icon
        - Center footer signature logo horizontally + add vertical breathing
     2. iPhone (<=767px):
        - Shrink #arj-fixed-bg grey lines (body_tl.webp) to match green
          marker in client reference screenshot
        - Add a soft layered drop-shadow glow back onto hero h1
   ========================================================================= */


/* -------------------------------------------------------------------------
   1. iPad / tablet LANDSCAPE fixes
   Range covers iPad Mini, iPad regular, iPad Pro 11" AND iPad Pro 12.9"
   in landscape. Upper bound 1366px = iPad Pro 12.9 landscape width.

   ROUND-4 NOTE on gold lines: scaled the SVG ELEMENTS (not the holder
   divs) with transform-origin matching each SVG's anchor edge. Holder
   positioning stays intact, only the visible artwork shrinks toward
   its anchored corner. .bottom-right-lines-holder uses bottom-right
   origin; .bottom-left uses bottom-left; .hero-lines centers.
   ------------------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 1366px) and (orientation: landscape) {

  /* 1a. Shrink the body_tl.webp background that paints the visible
        diagonal pattern at top-left ("the curve overlapping content").

        IMPORTANT: an inline <style> block on the home page overrides
        body to load ONLY body_tl.webp (not the 3 layered images in
        main.min.css). Round-4 used a 3-value background-size which only
        sized the FIRST layer (body_tl) as `auto` because there's only
        one image. Round-5 uses a single-value rule which actually sizes
        body_tl to the intended pixel width.

        Round-5c: changed position from `top -10px left -30px` to
        `top left` so the gold curve sits flush against the screen
        corner (client wanted edges aligned, not inset). */
  body.home {
    background-size: 500px auto !important;
    background-position: top left !important;
  }
  /* The JS-injected #arj-fixed-bg layer (only created on ≤1024px tablets)
     keeps the 3-image layout. Apply the multi-value rule there. */
  body.home #arj-fixed-bg {
    background-size: auto, 500px auto, 450px auto !important;
    background-position:
      bottom -200px left -250px,
      top left,
      right -250px center !important;
  }

  /* 1a-2. ROUND-13 GOLD LINE FIXES — verified geometry pass.
          Each holder is position:absolute width/height:100%. SVGs inside
          carry their own negative px offsets that anchor them to their
          respective corners (e.g. bottom-left SVGs at left:-184px
          bottom:-108px; bottom-right SVGs at right:-58px).

          The existing mobile rule (max-width:780px) uses
          scale(.5) translate(-50%,50%) etc — those translate percentages
          are calibrated for a 430px viewport. On a 1133px iPad mini
          viewport the same percentages shift 2.6× more absolute pixels
          and push the bottom-right curve completely off the screen
          (round-10 regression).

          Fix: scale only, NO translate. transform-origin matches the
          anchor corner of each holder so the artwork shrinks toward
          its anchor (predictable visible result, no off-screen drift). */
  body.home .top-right-lines-holder {
    display: none !important;
  }
  body.home .bottom-left-lines-holder {
    -webkit-transform: scale(0.5) !important;
            transform: scale(0.5) !important;
    -webkit-transform-origin: 0 100% !important;
            transform-origin: 0 100% !important;
  }
  body.home .bottom-right-lines-holder {
    -webkit-transform: scale(0.5) !important;
            transform: scale(0.5) !important;
    -webkit-transform-origin: 100% 100% !important;
            transform-origin: 100% 100% !important;
  }
  /* hero-lines is anchored top-left of the hero section. Same approach. */
  body.home .hero-lines {
    -webkit-transform: scale(0.7) !important;
            transform: scale(0.7) !important;
    -webkit-transform-origin: 0 0 !important;
            transform-origin: 0 0 !important;
  }

  /* 1b. Hero signature image + headline shrink so they don't bleed onto photo */
  body.home .main-hero-image img {
    max-width: 70% !important;
  }
  body.home .page-hero h1,
  body.home .page-hero h1.gold-heading {
    font-size: 22px !important;
    letter-spacing: 4px !important;
    line-height: 1.25 !important;
  }
  body.home .page-hero p.gold-heading,
  body.home .page-hero p.fade_in_2.gold-heading {
    font-size: 13px !important;
  }

  /* 1c. Three highlight boxes — properly widen the parent column from ~50%
        to 65%, push the "From artist records" text column to 35%, AND
        tighten interior box padding. This is the round-3 fix; round-2
        only adjusted padding which wasn't enough. */
  body.home .wp-block-columns:has(> .wp-block-column.is-vertically-aligned-center .wp-hip-block-content.content-box) {
    -webkit-box-align: center !important;
        -ms-flex-align: center !important;
            align-items: center !important;
    gap: 1rem !important;
  }
  body.home .wp-block-columns:has(> .wp-block-column.is-vertically-aligned-center .wp-hip-block-content.content-box) > .wp-block-column:first-child {
    -ms-flex-preferred-size: 35% !important;
            flex-basis: 35% !important;
    -webkit-box-flex: 0 !important;
        -ms-flex-positive: 0 !important;
            flex-grow: 0 !important;
  }
  body.home .wp-block-column.is-vertically-aligned-center:has(.wp-hip-block-content.content-box) {
    -ms-flex-preferred-size: 65% !important;
            flex-basis: 65% !important;
    -webkit-box-flex: 1 !important;
        -ms-flex-positive: 1 !important;
            flex-grow: 1 !important;
  }
  /* Inner 3-box row — tighter gap so each box gets more width */
  body.home .wp-block-column.is-vertically-aligned-center .wp-block-columns {
    gap: 0.5rem !important;
  }
  /* Tighten interior padding of each box so text breathes */
  body.home .wp-hip-block-content.content-box {
    padding: 1rem 0.875rem !important;
  }
  body.home .wp-hip-block-content.content-box p.has-small-font-size {
    font-size: 0.85rem !important;
    line-height: 1.25 !important;
  }
  /* Scope to .gold-shadow so this only hits the 3 stat highlight boxes
     ("15+ Years…", "Global Productions…", "Artists, Brands…") which carry
     `.wp-hip-block-content.content-box.gold-shadow`. The Signature
     Projects tile boxes (Sydney Opera, T20, NBC, WB, Fever, Six Flags)
     also use `.content-box` but WITHOUT .gold-shadow, so excluding them
     here lets their 210×139 client logos render at natural size. */
  body.home .wp-hip-block-content.content-box.gold-shadow .wp-block-image img {
    max-width: 28px !important;
  }

  /* 1d. Services tiles — labels nowrap so "MIXING & MASTERING" stays on
        one line. NO flex-layout override on the tile this round — the
        natural centering produced by the existing CSS handles icon
        position correctly once the label is single-line. */
  body.home .wp-hip-block-content.flip-card p.gold-heading.has-semi-regular-font-size,
  body.home .wp-hip-block-content.card-front p.gold-heading.has-semi-regular-font-size {
    letter-spacing: 2px !important;
    white-space: nowrap !important;
    font-size: 0.95rem !important;
  }

  /* 1e. Footer signature logo — ROUND-5c FIX:
        The footer row contains TWO Bootstrap columns:
          .col-md.footer-logo-holder  → ~17% width (logo)
          .col-md-10.mx-auto          → ~83% width (hr separator)
        With the logo squeezed into 17% on the left, no amount of
        internal flex-centring can put the signature in page-centre.

        Force BOTH columns to 100% width on tablet landscape so they
        stack vertically (logo row above, hr row below). Then centre
        the lottie within the full-width logo row. */
  body.home .footer .row > .col-md.footer-logo-holder {
    -webkit-box-flex: 0 !important;
        -ms-flex: 0 0 100% !important;
            flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
  }
  body.home .footer .row > .col-md-10 {
    -webkit-box-flex: 0 !important;
        -ms-flex: 0 0 100% !important;
            flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  body.home .footer .footer-logo-holder {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
    -webkit-box-pack: center !important;
        -ms-flex-pack: center !important;
            justify-content: center !important;
    -webkit-box-align: center !important;
        -ms-flex-align: center !important;
            align-items: center !important;
    text-align: center !important;
    padding-top: 0.75rem !important;
    padding-bottom: 0.75rem !important;
  }
  body.home .footer .footer-logo-holder #lottie-container-footer,
  body.home .footer .footer-logo-holder a {
    display: block !important;
    max-width: 280px !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
  }
  body.home .footer .footer-logo-holder #lottie-container-footer svg,
  body.home .footer .footer-logo-holder img {
    display: block !important;
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}


/* -------------------------------------------------------------------------
   2. iPhone (mobile portrait) fixes
   ------------------------------------------------------------------------- */
@media (max-width: 767px) {

  /* 2a. #arj-fixed-bg layered backgrounds + line-holder transforms.
        Round-7 (2026-05-12): mirror the iPad portrait calibration that
        Arj approved. The previous iPhone config (footer_bg at
        bottom -180 left -220, body_tl scaled to 400×400 at top -10
        left -30, bg-3 at right -200 center) was painting one of the
        layers into the visible bottom-left as a faint extra curl that
        Arj wanted removed.

        Match iPad portrait exactly:
        - footer_bg.webp pushed to bottom -350 left -400 (well off-screen)
        - body_tl.webp at top left, natural-aspect (500px wide) — main curve
        - bg-3.webp scaled to 450px wide at right -300 center

        Also apply the same line-holder transforms (scale-only with
        corner-anchored origin) — drops the SCSS mobile rule's
        `translate(-50%, 50%)` that pulled the bottom-left SVG into
        the visible viewport area. */
  body.home #arj-fixed-bg {
    background-size: auto, 500px auto, 450px auto !important;
    background-position:
      bottom -350px left -400px,
      top left,
      right -300px center !important;
  }
  body.home .bottom-left-lines-holder {
    -webkit-transform: scale(0.5) !important;
            transform: scale(0.5) !important;
    -webkit-transform-origin: 0 100% !important;
            transform-origin: 0 100% !important;
  }
  body.home .bottom-right-lines-holder {
    -webkit-transform: scale(0.5) !important;
            transform: scale(0.5) !important;
    -webkit-transform-origin: 100% 100% !important;
            transform-origin: 100% 100% !important;
  }
  /* .hero-lines override REMOVED on iPhone (round-9 2026-05-12).
     Client request: restore the top-left GOLD lines on Home iPhone to
     match the About Me page. About Me has no body.home-scoped
     overrides, so .hero-lines renders with the SCSS default mobile
     rule `transform: scale(.7) translate(-30%, -30%)`. By NOT
     overriding it here, Home iPhone inherits the same default and
     matches About Me. body_tl.webp ("grey lines") sizing stays
     unchanged per client's "grey lines are good on the home page".
     iPad portrait .hero-lines transform is unaffected (separate
     media query block below). */

  /* 2b. Slight glow boost on the hero "PROFESSIONAL MUSIC PRODUCER /
        MIX & MASTERING ENGINEER" headline. The site-wide rule
        `body.home .gold-text-shadow { filter: drop-shadow(0 0 0 #000) }`
        nukes the glow; we re-add a soft, layered glow only on this
        specific heading on mobile.  Specificity 0,4,1 beats the
        inline arj-design-fixes-css rule at 0,2,1. */
  body.home .page-hero h1.gold-heading,
  body.home .page-hero h1.gold-heading .line,
  body.home .page-hero h1.gold-text-shadow,
  body.home .page-hero h1.gold-text-shadow .line {
    -webkit-filter:
      drop-shadow(0 0 4px rgba(252, 246, 186, 0.55))
      drop-shadow(0 0 12px rgba(191, 149, 63, 0.35)) !important;
            filter:
      drop-shadow(0 0 4px rgba(252, 246, 186, 0.55))
      drop-shadow(0 0 12px rgba(191, 149, 63, 0.35)) !important;
  }

  /* 2c. iPhone-only horizontal-scroll lock on Services + Contact sections.
        Round-3 (2026-05-12): round-2 applied touch-action:pan-y on the
        section CONTAINER only, but iOS Safari resolves touch-action at
        the touched element. Touches landing on flip-cards or form inputs
        (which had default touch-action:auto) bypassed the parent's
        pan-y, so horizontal panning continued. Three-layer lock:

        (a) overflow-x: clip on html + body + page-holder. `clip` is
            stronger than `hidden` — it disables ALL scrolling (including
            programmatic and rubber-band pan), no scroll container is
            created. iOS Safari 16+ (iPhone 17 Pro is on 17+). Width
            forced to 100vw so the document can't establish a wider
            layout viewport.

        (b) touch-action: pan-y on every DESCENDANT of services +
            contact, not just the container — so flip-card and form
            input touches honour the vertical-only constraint.

        (c) overflow-x: clip + max-width: 100vw on the two section
            wrappers themselves as belt-and-braces.

        Scope is :has(.flip-card) for services (flip-card only exists in
        that section) and #contact for the form. Other swipers on the
        page (Creative Portfolio logo row, Signature Projects videos) are
        in separate basic-containers and unaffected. */
  html {
    overflow-x: clip !important;
    overflow-y: auto !important;
    width: 100vw !important;
    max-width: 100vw !important;
  }
  /* Round-8 (2026-05-12): changed body.home + .page-holder from
     `overflow-x: clip` to `overflow: clip` (both axes). Per CSS spec,
     overflow-x: clip auto-promotes overflow-y from `visible` to `auto`,
     which makes body a vertical scroll container ON TOP of html being
     one. iOS Safari with nested scroll containers can micro-jitter from
     momentum/rubber-band recalculation — Arj reported the contact form
     visibly shaking up and down with no scroll input. `overflow: clip`
     on both axes prevents the scroll-container promotion entirely;
     html remains the only scroll container. */
  body.home,
  body.home .page-holder {
    overflow: clip !important;
    width: 100vw !important;
    max-width: 100vw !important;
  }
  body.home .wp-hip-block-basic-container:has(.flip-card),
  body.home .wp-hip-block-basic-container:has(.flip-card) *,
  body.home #contact,
  body.home #contact * {
    -ms-touch-action: pan-y !important;
        touch-action: pan-y !important;
  }

  /* Round-4 (2026-05-12): removed `overflow-x: clip` from these section
     containers — when overflow-x is `clip` the CSS spec auto-promotes
     overflow-y from `visible` to `auto`, creating a vertical scroll
     container that clips the flip-cards' .gold-shadow box-shadow glow
     at the section's top edge. Client reported Music Composition and
     Mixing & Mastering top gold borders cut off. Document-level
     overflow-x: clip on html / body.home / .page-holder above is
     sufficient to block horizontal pan; the per-section clip was
     redundant and was the cause of the shadow clipping. Keep only
     max-width: 100vw on the sections. */
  body.home .wp-hip-block-basic-container:has(.flip-card),
  body.home #contact {
    max-width: 100vw !important;
  }

  /* (Round-6's .hero-lines display:none was reverted in round-7 — the
     .hero-lines transform is now defined in section 2a together with
     the other holder transforms, matching iPad portrait calibration.) */
}


/* -------------------------------------------------------------------------
   3. iPad PORTRAIT fixes  (744–1024px, orientation: portrait)
   Round-1 client feedback (2026-05-12): on iPad mini 6 portrait Arj
   sees a faint small gold curve bottom-left (behind the hero) plus a
   small gold artefact at the bottom-left corner of the Jimmy Fallon
   video tile. Both are the SAME bottom-left SVG decoration.

   Root cause: the inline <style id="arj-safari-urlbar-fix"> block forces
   .bottom-left-lines-holder to `position: fixed; width:100vw;
   height:100svh` on ≤1024px. The SCSS mobile rule then applies
   `transform: scale(.5) translate(-50%, 50%)` — those translate
   percentages are calibrated for a ~430px iPhone viewport. On a
   744×1133 iPad mini 6 portrait the same percentages shift 2× more
   absolute pixels and place the bottom-left SVG inside the visible
   bottom-left of the viewport, where it shows as the faint curl behind
   the hero AND through the Jimmy Fallon tile.

   Fix: drop the translate. Scale only, with transform-origin matching
   each holder's anchor corner so artwork shrinks toward its anchor
   (predictable, no off-screen drift). Mirrors the landscape calibration.
   ------------------------------------------------------------------------- */
@media (min-width: 700px) and (max-width: 1024px) and (orientation: portrait) {
  body.home .bottom-left-lines-holder {
    -webkit-transform: scale(0.5) !important;
            transform: scale(0.5) !important;
    -webkit-transform-origin: 0 100% !important;
            transform-origin: 0 100% !important;
  }
  body.home .bottom-right-lines-holder {
    -webkit-transform: scale(0.5) !important;
            transform: scale(0.5) !important;
    -webkit-transform-origin: 100% 100% !important;
            transform-origin: 100% 100% !important;
  }
  body.home .hero-lines {
    -webkit-transform: scale(0.7) !important;
            transform: scale(0.7) !important;
    -webkit-transform-origin: 0 0 !important;
            transform-origin: 0 0 !important;
  }

  /* Re-tune #arj-fixed-bg (the JS-injected fixed background layer).
     The ≤767px mobile rule was being inherited at 744px iPad mini 6
     portrait, painting footer_bg.webp too close to the visible
     bottom-left. Push it well off-screen so only the two intended
     regular gold curves remain. */
  body.home #arj-fixed-bg {
    background-size: auto, 500px auto, 450px auto !important;
    background-position:
      bottom -350px left -400px,
      top left,
      right -300px center !important;
  }

  /* Round-2 client feedback (2026-05-12): the Signature Projects swiper
     (Cirque Stratosphere / Jimmy Fallon etc.) uses data-creative-type
     ="type_4". The SCSS only applies the prev/next opacity:0 rule to
     `type_1` and `fade` effects — so on iPad portrait the adjacent
     slides bleed in along the active slide's left edge, appearing as a
     thin navy band. Hide everything that isn't the active slide.

     Round-2b: original fix used `.swiper-slide-prev/-next` only. With
     `loop` mode, Swiper inserts duplicate clones at the boundaries
     (`.swiper-slide-duplicate-prev/-next`) which the prev/next selector
     misses — so the bleed reappeared on the 2 boundary-adjacent slides.
     `:not(.swiper-slide-active)` covers prev, next, duplicates, and any
     non-active slide that the creative transform leaves visible. */
  body.home .swiper-content-slider[data-creative-type="type_4"] .swiper-slide:not(.swiper-slide-active) {
    opacity: 0 !important;
  }
}
