.elementor-3965 .elementor-element.elementor-element-d8b7096{padding:0px 0px 0px 0px;text-align:center;}.elementor-3965 .elementor-element.elementor-element-d8b7096.elementor-element{--flex-grow:1;--flex-shrink:0;}.elementor-3965 .elementor-element.elementor-element-d8b7096 img{width:100%;}.elementor-3965 .elementor-element.elementor-element-f75e9aa{--display:flex;}.elementor-3965 .elementor-element.elementor-element-a7bd082{--display:flex;}.elementor-3965 .elementor-element.elementor-element-00e9a97{--display:flex;}.elementor-3965 .elementor-element.elementor-element-824532a{--display:flex;}.elementor-3965 .elementor-element.elementor-element-40e642b{--display:flex;}.elementor-3965 .elementor-element.elementor-element-4280ac1{--n-menu-dropdown-content-max-width:initial;--n-menu-heading-justify-content:space-between;--n-menu-title-flex-grow:1;--n-menu-title-justify-content:center;--n-menu-title-justify-content-mobile:center;--n-menu-heading-wrap:wrap;--n-menu-heading-overflow-x:initial;--n-menu-title-distance-from-content:0px;background-color:#FCFBF8;--n-menu-open-animation-duration:400ms;--n-menu-toggle-icon-wrapper-animation-duration:500ms;--n-menu-title-space-between:20px;--n-menu-title-font-size:26px;--n-menu-title-transition:700ms;--n-menu-icon-size:16px;--n-menu-toggle-icon-size:20px;--n-menu-toggle-icon-hover-duration:500ms;--n-menu-toggle-icon-distance-from-dropdown:0px;}.elementor-3965 .elementor-element.elementor-element-4280ac1 > .e-n-menu > .e-n-menu-wrapper > .e-n-menu-heading > .e-n-menu-item > .e-n-menu-title:not( .e-current ):not( :hover ){background-color:#FCFBF8;}.elementor-3965 .elementor-element.elementor-element-4280ac1 > .e-n-menu > .e-n-menu-wrapper > .e-n-menu-heading > .e-n-menu-item > .e-n-menu-title:hover:not( .e-current ){background-color:#F0F0F0;border-style:none;box-shadow:0px 4px 0px 0px #C8A03A;}.elementor-3965 .elementor-element.elementor-element-c87ee38{--grid-template-columns:repeat(0, auto);text-align:center;--icon-size:38px;--grid-column-gap:0px;--grid-row-gap:0px;}.elementor-3965 .elementor-element.elementor-element-c87ee38 .elementor-social-icon{background-color:#FCFBF8;}.elementor-3965:not(.elementor-motion-effects-element-type-background), .elementor-3965 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:transparent;background-image:linear-gradient(180deg, #FCFBF8 90%, #FCFBF8 100%);}.elementor-theme-builder-content-area{height:400px;}.elementor-location-header:before, .elementor-location-footer:before{content:"";display:table;clear:both;}@media(max-width:1600px){.elementor-3965 .elementor-element.elementor-element-d8b7096 img{width:275px;}.elementor-3965 .elementor-element.elementor-element-4280ac1{--n-menu-title-space-between:0px;--n-menu-title-font-size:30px;--n-menu-icon-size:55px;--n-menu-toggle-icon-size:49px;}.elementor-3965 .elementor-element.elementor-element-c87ee38{--icon-size:33px;}}@media(max-width:600px){.elementor-3965 .elementor-element.elementor-element-d8b7096 img{width:190px;}.elementor-3965 .elementor-element.elementor-element-4280ac1{--n-menu-title-space-between:0px;}}/* Start custom CSS *//* ========================================================================== 
   ProMusica Custom CSS
   Last verified: September 1, 2026

   Maintainability standard:
   Use Elementor native controls whenever they provide the required behavior.
   Retain custom CSS only for behavior Elementor cannot provide or cannot
   apply to the required Theme Builder wrapper or injected markup.
   ========================================================================== */

/* ========================================================================== 
   CSS-001 — Scroll-Triggered Header Shrink

   Purpose:
   Smoothly compacts the completed header after the companion script adds
   .pm-scrolled to header.elementor-location-header.

   Dependencies:
   - Elementor Theme Builder header
   - Companion scroll script that adds/removes .pm-scrolled
   - Elementor element IDs 1b5290a, f28c60e, and d8b7096

   Elementor alternative:
   Partial only. Elementor controls the normal state but cannot coordinate
   this exact post-scroll state across the containers, logo, and menu text.

   Remove when:
   The scroll-shrink behavior is retired or implemented natively. Recheck all
   three element IDs whenever the header template is rebuilt.
   ========================================================================== */

header.elementor-location-header > [data-id="1b5290a"],
header.elementor-location-header [data-id="f28c60e"] {
    transition: min-height 250ms ease,
                padding-top 250ms ease,
                padding-bottom 250ms ease;
}

header.elementor-location-header [data-id="d8b7096"] img {
    transition: width 250ms ease;
}

header.elementor-location-header .e-n-menu-title-text {
    transition: font-size 250ms ease;
}

header.elementor-location-header.pm-scrolled > [data-id="1b5290a"] {
    min-height: 68px;
    padding-top: 4px;
    padding-bottom: 4px;
}

header.elementor-location-header.pm-scrolled [data-id="f28c60e"] {
    min-height: 56px !important;
    padding-top: 2px !important;
    padding-bottom: 2px !important;
}

header.elementor-location-header.pm-scrolled [data-id="d8b7096"] img {
    width: 62% !important;
}

header.elementor-location-header.pm-scrolled .e-n-menu-title-text {
    font-size: 24px !important;
}

/* ========================================================================== 
   CSS-002 — Mobile Menu Social Icon Row

   Purpose:
   Hides the injected social row by default and formats it as a centered,
   full-width row on phone layouts.

   Dependencies:
   - Elementor Menu widget
   - Companion script or custom markup that injects .mobile-menu-social
   - Elementor Social Icons markup inside the injected row

   Elementor alternative:
   None while the row remains injected menu markup. If the social icons move
   into a normal Elementor container/widget, recreate this layout with native
   responsive and style controls, then remove this block.

   Remove when:
   The injected social row is retired or replaced by an Elementor-managed row.
   ========================================================================== */

.mobile-menu-social {
    display: none !important;
}

@media (max-width: 600px) {
    header.elementor-location-header .mobile-menu-social {
        display: flex !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 20px 0 !important;
        box-sizing: border-box;
        justify-content: center !important;
        list-style: none;
        background: #fcfbf8;
    }

    header.elementor-location-header
    .mobile-menu-social
    .elementor-social-icons-wrapper {
        display: flex !important;
        width: 100%;
        align-items: center;
        justify-content: center !important;
        gap: 28px;
    }

    header.elementor-location-header
    .mobile-menu-social
    .elementor-grid-item {
        margin: 0 !important;
    }

    header.elementor-location-header
    .mobile-menu-social
    .elementor-social-icon {
        background: transparent !important;
    }
}

/* ========================================================================== 
   CSS-003 — Theme Builder Header Wrapper Sticky Position

   Purpose:
   Keeps the complete Theme Builder header at the top of the viewport.

   Dependencies:
   - Elementor Theme Builder output using .elementor-location-header
   - No ancestor with overflow or transform settings that defeat sticky

   Elementor alternative:
   None for this completed structure. Elementor's Sticky control targets the
   inner container, which cannot remain sticky beyond its parent wrapper.

   Remove when:
   Elementor can target the outer wrapper, or the header architecture changes
   so an Elementor-managed container can provide the same verified behavior.
   ========================================================================== */

.elementor-location-header {
    position: sticky;
    top: 0;
    z-index: 100;
}

/* ========================================================================== 
   CSS-004 — Fluid Desktop Menu Typography

   Purpose:
   Interpolates menu text from about 24.6px just above the 1600px hamburger
   breakpoint to the Elementor desktop target of 28px on wider screens.

   Dependencies:
   - Elementor Menu widget using .e-n-menu-title-text
   - Completed hamburger breakpoint at 1600px
   - Elementor remains the source of all other typography settings

   Elementor alternative:
   Partial only. Elementor supports fixed breakpoint values but does not
   continuously interpolate this font size across the desktop range.

   Remove when:
   A fixed Elementor font size fits throughout the desktop range, Elementor
   adds fluid typography for this widget, or the menu architecture changes.
   ========================================================================== */

@media (min-width: 1601px) {
    header.elementor-location-header .e-n-menu-title-text {
        font-size: clamp(22px, calc(1.1vw + 7px), 28px) !important;
    }
}

/* ========================================================================== 
   CSS-005 — Enfold Responsive Width Compatibility

   Purpose:
   Releases Enfold's 910px minimum root width throughout the completed tablet
   and mobile range, preventing horizontal page scrolling.

   Dependencies:
   - Enfold continues to apply min-width: 910px to the html element
   - Completed Elementor tablet/hamburger breakpoint remains 1600px

   Elementor alternative:
   None. The constraint originates in the theme's root-element CSS, outside
   Elementor's layout controls.

   Remove when:
   Enfold no longer applies the 910px minimum, the theme is replaced, or a
   verified theme-level setting removes the constraint. Retest after changing
   the 1600px breakpoint.
   ========================================================================== */

@media (max-width: 1600px) {
    html {
        min-width: 0 !important;
    }
}/* End custom CSS */