/*
 Theme Name: Divi Child
 Theme URI: https://www.elegantthemes.com/gallery/divi/
 Description: Divi Child Theme
 Author: Elegant Themes
 Author URI: https://www.elegantthemes.com
 Template: Divi
 Version: 1.0.0
*/
/* =Theme customization starts here
------------------------------------------------------- */

/* Center [artist_hero] images only inside Divi Code Modules with the 'artist-hero-block' class */
.artist-hero-block .fluid-artist-hero-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin: 0 auto !important;
    padding: 0 !important;
    text-align: center !important;
}
.artist-hero-block .fluid-artist-hero {
    display: block;
    max-width: 100%;
}
.artist-hero-block .artist-hero-img {
    display: block;
    margin: 0 auto;
    max-width: 100%;
    height: auto;
    object-fit: contain;
}

/* ===============================================================
   Fluid Product Feature Grid - Global Styles (flexbox version)
   Compatible with older CSS linters - no CSS variables, no grid
   Applies to all Image models
   =============================================================== */

/* Base wrapper */
.fluid-pfg {
  margin: 16px 0 16px;
}

/* Row: flex container */
.fluid-pfg .pfg-inner {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -12px;
}

/* Card: default desktop size = 3 per row */
.fluid-pfg .pfg-card {
  background: #ffffff;
  color: #333333;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
  padding: 18px 18px 16px;
  margin: 0 12px 20px 12px;
  width: calc(33.333% - 24px);
  box-sizing: border-box;
}

/* Unified heading style for all titles and highlight blocks */
.fluid-pfg .pfg-title,
.fluid-pfg .pfg-tech-title {
  margin: 0 0 6px 0;
  font-size: 18px;
  line-height: 1.3;
  font-weight: 800;
  color: #111111;
}

/* Card body text */
.fluid-pfg .pfg-text {
  margin: 0;
  line-height: 1.5;
  color: #333333;
}

/* Separator line */
.fluid-pfg .pfg-sep {
  border: 0;
  height: 1px;
  background: rgba(0,0,0,0.08);
  margin: 22px 0 10px;
}

/* Spec list */
.fluid-pfg .pfg-spec-list {
  margin: 6px 0 0 0;
  padding-left: 18px;
  list-style: disc;
  -webkit-column-gap: 24px;
  column-gap: 24px;
  -webkit-column-fill: balance;
  column-fill: balance;
  -webkit-column-count: 3;
  column-count: 3;
}
.fluid-pfg .pfg-spec-list li {
  -webkit-column-break-inside: avoid;
  break-inside: avoid;
  margin: 6px 0;
  font-weight: 700;
  line-height: 1.45;
  color: #222222;
  font-size: 15px;  /* Desktop default */
}

/* Tablet: 24px */
@media (min-width: 768px) and (max-width: 980px) {
  .fluid-pfg .pfg-spec-list li { font-size: 14px; }
}

/* Mobile: 13px */
@media (max-width: 767px) {
  .fluid-pfg .pfg-spec-list li { font-size: 13px; }
}


/* Tablet 768–980px: 2 columns */
@media (min-width: 768px) and (max-width: 980px) {
  .fluid-pfg .pfg-card { width: calc(50% - 24px); }
  .fluid-pfg .pfg-spec-list { -webkit-column-count: 2; column-count: 2; }
}

/* Mobile 0–767px: 1 column */
@media (max-width: 767px) {
  .fluid-pfg { margin-top: 8px; margin-bottom: 36px; }
  .fluid-pfg .pfg-card {
    width: calc(100% - 24px);
    padding: 16px 14px 14px;
  }
  .fluid-pfg .pfg-title,
  .fluid-pfg .pfg-tech-title { font-size: 15px; line-height: 1.3; }
  .fluid-pfg .pfg-text { font-size: 14px; }
  .fluid-pfg .pfg-spec-list { -webkit-column-count: 1; column-count: 1; }
  /* DELETED: .fluid-pfg .pfg-spec-list li { font-size: 13px; } */
}

/* Desktop 981px and up */
/* DELETED: @media (min-width: 981px) { .fluid-pfg .pfg-spec-list li { font-size: 24px; } } */

/* Font lock */
.fluid-pfg,
.fluid-pfg .pfg-title,
.fluid-pfg .pfg-text {
  font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

/* Spacing after grid */
.fluid-pfg + * { margin-top: 12px; }


/* ===============================================================
   Add-on styles for info panels and technology highlight blocks
   =============================================================== */

/* Two-up info panels (e.g., feature comparisons, tech callouts) */
.pfg-two-up {
  display: flex;
  flex-wrap: wrap;
  margin: 16px -12px 24px -12px;
}
.pfg-two-up .pfg-panel {
  background: #ffffff;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
  padding: 18px 18px 14px 18px;
  margin: 0 12px 16px 12px;
  width: calc(50% - 24px);
  box-sizing: border-box;
}
.pfg-two-up .pfg-bullets {
  margin: 10px 0 0 18px;
  padding: 0;
  list-style: disc;
  color: #333333;
  font-size: 15px;
  line-height: 1.5;
}

/* Highlight band (full-width tech or design section) */
.pfg-techband {
  background: #ffffff;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
  margin: 20px 0 18px 0;
}
.pfg-techband-inner { padding: 18px; }
.pfg-tech-text {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: #333333;
}

/* Stack panels on tablet/mobile */
@media (max-width: 980px) {
  .pfg-two-up .pfg-panel { width: calc(100% - 24px); }
}

/* ===============================================================
   Feature cards 2-up on desktop (used on Image 2)
   =============================================================== */
@media (min-width: 981px) {
  .fluid-pfg .pfg-inner.pfg-inner-pro .pfg-card { width: calc(50% - 24px); }
}

/* ===============================================================
   Force-unify all tech/card headings inside fluid blocks
   (overrides Divi/global h3 rules)
   =============================================================== */
.fluid-pfg h3.pfg-title,
.fluid-pfg h3.pfg-tech-title,
.pfg-two-up .pfg-panel h3.pfg-title,
.pfg-techband h3.pfg-tech-title {
  font-size: 18px !important;
  line-height: 1.3 !important;
  font-weight: 800 !important;
  margin: 0 0 6px 0 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

/* Mobile: keep them a touch smaller */
@media (max-width: 767px) {
  .fluid-pfg h3.pfg-title,
  .fluid-pfg h3.pfg-tech-title,
  .pfg-two-up .pfg-panel h3.pfg-title,
  .pfg-techband h3.pfg-tech-title {
    font-size: 15px !important;
    line-height: 1.3 !important;
  }
}

/* ===============================================================
   Force card headings to match tech headings (18px desktop)
   =============================================================== */
.fluid-pfg .pfg-card h1.pfg-title,
.fluid-pfg .pfg-card h2.pfg-title,
.fluid-pfg .pfg-card h3.pfg-title,
.fluid-pfg .pfg-card .pfg-title {
  font-size: 18px !important;
  line-height: 1.3 !important;
  font-weight: 800 !important;
  margin: 0 0 6px 0 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

/* Mobile */
@media (max-width: 767px) {
  .fluid-pfg .pfg-card h1.pfg-title,
  .fluid-pfg .pfg-card h2.pfg-title,
  .fluid-pfg .pfg-card h3.pfg-title,
  .fluid-pfg .pfg-card .pfg-title {
    font-size: 15px !important;
    line-height: 1.3 !important;
  }
}

/* Unclip card shadows around the feature grid */
.feature-grid-module,
.feature-grid-module .et_pb_code_inner,
.feature-grid-module .fluid-pfg,
.feature-grid-module .fluid-pfg .pfg-inner {
  overflow: visible !important;
}

/* Make the cards clearly look like cards on mobile */
@media (max-width: 767px) {
  .feature-grid-module .fluid-pfg .pfg-card {
    display: block;
    width: calc(100% - 24px);
    margin: 12px 12px 20px 12px;

    background: #ffffff !important;
    border: 1px solid rgba(0,0,0,0.15) !important;
    box-shadow: 0 10px 24px rgba(0,0,0,0.12) !important;
    border-radius: 14px !important;

    padding: 16px 14px 14px;
  }
}

/* Image placeholders */
.ph { /* …existing rules… */ }

/* ⬇️ Paste here */
.soundid-media{
  position:relative; border-radius:14px; overflow:hidden;
  aspect-ratio:4/3; background:transparent;
}
.soundid-media img{
  width:100%; height:100%; object-fit:cover; object-position:center 45%; display:block;
}
@media (max-width:980px){
  .soundid-media{ aspect-ratio:16/9; border-radius:12px; }
  .soundid-media img{ object-position:center 50%; }
}
/* ⬆️ End paste */

/* Horizontal product rows */
.fl-products-horizontal { /* … */ }

/* === Unified media card style (use on hero, SoundID, studio/product images) === */
.fl-media {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  background: #f2f2f2; /* safe default behind transparent assets */
}
.fl-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
@media (max-width: 980px) {
  .fl-media { border-radius: 12px; }
}

/* Aspect ratio helpers */
.ar-21x9 { aspect-ratio: 21 / 9; }
.ar-16x9 { aspect-ratio: 16 / 9; }
.ar-4x3  { aspect-ratio: 4 / 3; }
.ar-1x1  { aspect-ratio: 1 / 1; }

/* Optional: consistent soft shadow (matches your cards) */
.fl-media.shadow { box-shadow: 0 6px 18px rgba(0,0,0,0.08); }

/* Optional: top/bottom fades for highlight control (use both if needed) */
.media-topfade::before,
.media-bottomfade::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
}
.media-topfade::before {
  background: linear-gradient(to bottom,
    rgba(0,0,0,0.28) 0%,
    rgba(0,0,0,0.18) 10%,
    rgba(0,0,0,0.08) 22%,
    rgba(0,0,0,0.00) 38%
  );
}
.media-bottomfade::after {
  background: linear-gradient(to top,
    rgba(0,0,0,0.10) 0%,
    rgba(0,0,0,0.00) 35%
  );
}

/* Make hero switch to 16:9 on mobile while keeping the same class */
@media (max-width: 980px) {
  .fl-hero .fl-media.ar-21x9 { aspect-ratio: 16 / 9; }
}

/* ✅ Pauses hero animation while waiting for LCP to settle */
html.fa-no-auto .hero-slider,
html.fa-no-auto .hero-slider * {
  animation-play-state: paused !important;
}


/* ✅ Prevent CLS: make button animations compositor-friendly */
.et_pb_promo_button,
.et_pb_button {
  will-change: transform, opacity;
  transition: transform 0.2s ease, opacity 0.2s ease, box-shadow 0.2s ease;
}

/* Use transform for hover instead of padding/border/font-size */
.et_pb_promo_button:hover,
.et_pb_button:hover {
  transform: translateY(-2px);
  opacity: 0.96;
}

/* Disable layout-changing transition properties globally */
.et_pb_promo_button,
.et_pb_button {
  transition-property: transform, opacity, box-shadow !important;
}

/* Force swap for Divi ETmodules icon font (prevents FOIT) */
@font-face{
  font-family: 'ETmodules';
  src: url('/wp-content/themes/Divi/core/admin/fonts/modules/all/modules.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Submenu arrows: point right instead of down (override Divi default) */
#top-menu .sub-menu li.menu-item-has-children > a:first-child:after,
.et-menu-nav .sub-menu li.menu-item-has-children > a:first-child:after {
    font-family: "ETmodules" !important;
    content: "\35" !important;   /* arrow_carrot-right icon */
    transform: none !important;
}


/* Desktop only: BLOG dropdown gets a wider cap so long titles use the available space better
   Location: Child theme -> style.css
   Purpose:
   - Leaves all other menus unchanged
   - Gives BLOG more usable width
   - Still allows wrapping (no forced single-line)
   - Does not affect mobile
*/
@media (min-width: 981px) {

  /* BLOG top-level menu item */
  #menu-item-249555 > ul.sub-menu {
    min-width: 600px !important;
    max-width: 870px !important;
  }

  /* Ensure BLOG submenu links can wrap naturally inside the wider box */
  #menu-item-249555 > ul.sub-menu > li > a {
    white-space: normal !important;
  }
}

/* Desktop only: submenu arrow alignment (stable, no ul padding changes, no mobile changes) */
@media (min-width: 981px) {

  /* A) Force submenu rows full width */
  #top-menu .sub-menu > li,
  .et-menu-nav .sub-menu > li,
  header.et-l--header #top-menu .sub-menu > li {
    display: block !important;
    float: none !important;
    clear: both !important;
    width: 100% !important;
  }

  /* B) Hard override Divi's fixed 200px submenu link width */
  #top-menu .sub-menu li > a,
  .et-menu-nav .sub-menu li > a,
  header.et-l--header #top-menu .sub-menu li > a,
  header.et-l--header .et-menu-nav .sub-menu li > a {
    width: 100% !important;
    max-width: none !important;
    display: block !important;
    box-sizing: border-box !important;
    position: relative !important;
    padding-right: 84px !important;
  }

  /* C) Arrow aligned to submenu row edge */
  #top-menu .sub-menu li.menu-item-has-children > a:first-child:after,
  .et-menu-nav .sub-menu li.menu-item-has-children > a:first-child:after,
  header.et-l--header #top-menu .sub-menu li.menu-item-has-children > a:first-child:after,
  header.et-l--header .et-menu-nav .sub-menu li.menu-item-has-children > a:first-child:after {
    position: absolute !important;
    left: auto !important;
    right: 10px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
  }

  /* D) One-line labels */
  #menu-item-249534 > a,
  #menu-item-249542 > a {
    white-space: nowrap !important;
  }
}

/* Desktop only: fix PRODUCTS dropdown narrow width + prevent breaking inside words
   Location: Child theme -> style.css
   Purpose:
   - PRODUCTS menu (ID 249533) gets a sane dropdown width
   - Labels like SUBWOOFERS/HEADPHONES/MICROPHONES do not break mid-word
   - Does not affect BLOG wrapping or mobile
*/
@media (min-width: 981px) {

  /* PRODUCTS dropdown box width */
  #menu-item-249533 > ul.sub-menu {
    min-width: 360px !important;
    max-width: 520px !important;
  }

  /* PRODUCTS dropdown labels: do NOT break inside words */
  #menu-item-249533 > ul.sub-menu > li > a {
    white-space: nowrap !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    hyphens: none !important;
  }
}

/* Desktop only: keep STRUM BUDDY submenu items on one line
   Location: Child theme -> style.css
   Purpose:
   - Fix 3rd-level submenu wrapping (Strum Buddy Pro / Strum Buddy / Strum Buddy Heavy Metal)
   - Only affects the STRUM BUDDY submenu (menu-item-249545)
   - Does not affect Blog, other menus, or mobile
*/
@media (min-width: 981px) {

  /* STRUM BUDDY submenu box: give it enough width */
  #menu-item-249545 > ul.sub-menu {
    min-width: 320px !important;
    max-width: 520px !important;
  }

  /* STRUM BUDDY submenu labels: do NOT wrap or break mid-word */
  #menu-item-249545 > ul.sub-menu > li > a {
    white-space: nowrap !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    hyphens: none !important;
  }
}

/* Desktop only: keep ACCESSORIES submenu items on one line
   Location: Child theme -> style.css
   Purpose:
   - Prevent "WMB 10 bracket" from wrapping in the Accessories submenu
   - Only affects the ACCESSORIES submenu (menu-item-249548)
   - Does not affect Blog or mobile
*/
@media (min-width: 981px) {

  /* Accessories submenu: do not wrap labels */
  #menu-item-249548 > ul.sub-menu > li > a {
    white-space: nowrap !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    hyphens: none !important;
  }

  /* Optional: ensure the Accessories submenu box has enough width */
  #menu-item-249548 > ul.sub-menu {
    min-width: 260px !important;
    max-width: 520px !important;
  }
}

/* Desktop only: keep SUPPORT submenu items on one line
   Location: Child theme -> style.css
   Purpose:
   - Prevent mid-word breaks like "DOWNLOAD S" / "DOCUMENT ATION"
   - Keep SUPPORT dropdown labels on one line
   - Only affects SUPPORT menu (menu-item-249563)
   - Does not affect Blog or mobile
*/
@media (min-width: 981px) {

  /* SUPPORT dropdown box width */
  #menu-item-249563 > ul.sub-menu {
    min-width: 340px !important;
    max-width: 520px !important;
  }

  /* SUPPORT dropdown labels: no wrapping or mid-word breaking */
  #menu-item-249563 > ul.sub-menu > li > a {
    white-space: nowrap !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    hyphens: none !important;
  }
}

/* Desktop only: keep BUY + ABOUT US dropdown items on one line
   Location: Child theme -> style.css
   Purpose:
   - Fix "STORE POLICIES" wrapping
   - Fix "U.S. REPRESENTATIVES" wrapping
   - Only affects BUY (249571) and ABOUT US (249572)
   - Does not affect Blog or mobile
*/
@media (min-width: 981px) {

  /* BUY HOMER dropdown */
  #menu-item-252661 > ul.sub-menu {
    min-width: 400px !important;
    max-width: 460px !important;
  }
  #menu-item-249571 > ul.sub-menu > li > a {
    white-space: nowrap !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    hyphens: none !important;
  }

  /* COMPANY HOMER dropdown */
  #menu-item-252662 > ul.sub-menu {
    min-width: 360px !important;
    max-width: 460px !important;
  }
  #menu-item-249572 > ul.sub-menu > li > a {
    white-space: nowrap !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    hyphens: none !important;
  }
}

/* ✅ Desktop only: Pro Audio dropdown - keep items on one line and widen menus
   Purpose: Fix wrapping like "STUDIO / MONITORS" on desktop dropdowns without affecting the mobile menu.
*/
@media (min-width: 981px) {
  #menu-pro-audio .sub-menu a {
    white-space: nowrap;
    word-break: normal;
    overflow-wrap: normal;
  }

  #menu-pro-audio > li > .sub-menu {
    min-width: 240px;
    width: auto;
  }

  #menu-pro-audio .sub-menu .sub-menu {
    min-width: 240px;
    width: auto;
  }
}

/* Desktop only: prevent dropdown closing when moving from top link into submenu
   Location: Child theme -> style.css
   Purpose:
   - Adds invisible hover "bridges" that keep the parent <a> hovered
   - Fixes the "must move fast or menu closes" behavior
   - Works for PRODUCTS and for flyout items like STUDIO MONITORS
   - Desktop only (no mobile changes)
*/
@media (min-width: 981px) {

  /* Make top-level menu links a positioning context */
  .et-db #et-boc .et-l .et-menu-nav ul.et-menu > li.menu-item-has-children > a:first-child,
  header.et-l--header .et-menu-nav ul.et-menu > li.menu-item-has-children > a:first-child {
    position: relative !important;
  }

  /* Bridge BELOW the top-level link (covers the gap between "PRODUCTS" and its dropdown) */
  .et-db #et-boc .et-l .et-menu-nav ul.et-menu > li.menu-item-has-children > a:first-child:after,
  header.et-l--header .et-menu-nav ul.et-menu > li.menu-item-has-children > a:first-child:after {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    top: 100% !important;
    width: 100% !important;
    height: 44px !important;              /* increase to 44px if needed */
    background: transparent !important;
  }

  /* Make submenu links (that have children) a positioning context */
  .et-db #et-boc .et-l .et-menu-nav .sub-menu li.menu-item-has-children > a:first-child,
  header.et-l--header .et-menu-nav .sub-menu li.menu-item-has-children > a:first-child {
    position: relative !important;
  }

  /* Bridge to the RIGHT of submenu links (covers the gap into the flyout submenu) */
  .et-db #et-boc .et-l .et-menu-nav .sub-menu li.menu-item-has-children > a:first-child:before,
  header.et-l--header .et-menu-nav .sub-menu li.menu-item-has-children > a:first-child:before {
    content: "" !important;
    position: absolute !important;
    left: 100% !important;
    top: -10px !important;
    width: 40px !important;               /* increase to 56px if needed */
    height: calc(100% + 20px) !important;
    background: transparent !important;
  }
}