/**
 * Premium Responsive Mobile Header & Collapsible Drawer Override
 * Canada Needs Our Lady - Client Site
 *
 * Implements a high-end, responsive header and menu drawer on mobile viewports (< 768px).
 * Encapsulated in the tfp-actions plugin for clean Git versioning and page builder stability.
 */

/* Globally hide the cloned mobile actions panel and custom toggle on desktop viewports (>= 768px) */
.mobile-menu-extra-actions,
.breakdance-menu-toggle-custom {
  display: none !important;
}

/* Add balanced space around the "French" link on desktop viewports (>= 768px) to enhance visual breathing room */
@media (min-width: 768px) {
  .breakdance .bde-text-link-15-144 {
    padding: 6px 12px !important;
    margin-left: 8px !important;
    margin-right: 4px !important;
    display: inline-block !important;
    font-size: 18px !important;
    font-weight: 700 !important;
  }
}

@media (max-width: 767px) {
  /* ----------------------------------------------------
     1. TOP HEADER BRANDING OVERRIDES
     ---------------------------------------------------- */
  
  /* Hide the cluttered search/social/email sign-up bar on mobile */
  .breakdance .bde-column-15-119 {
    display: none !important;
  }

  /* Remove section and container padding on mobile to allow absolute edge-to-edge logo */
  .breakdance .bde-section-15-100 {
    padding: 0 !important;
  }
  .breakdance .bde-section-15-100 .section-container {
    padding: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
  }
  .breakdance .bde-columns-15-117 {
    padding: 0 !important;
    margin: 0 !important;
    gap: 0 !important;
  }

  /* Center the logo section and clear padding for edge-to-edge display */
  .breakdance .bde-column-15-118 {
    width: 100% !important;
    max-width: 100% !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 0 !important; /* Zero padding to allow full edge-to-edge visual bleed */
    box-sizing: border-box !important;
    display: flex !important;
    gap: 0 !important;
  }

  /* Scale the main branding logo to occupy the absolute maximum width and height space */
  .breakdance .bde-image2-15-120 {
    max-width: 100% !important; /* Take up 100% of the screen width */
    width: 100% !important;
    height: auto !important;
    max-height: none !important; /* Remove height restrictions so it scales proportionally */
    object-fit: contain !important;
    display: block !important;
    margin: 0 auto !important;
  }


  /* ----------------------------------------------------
     2. STICKY HEADER NAVIGATION BAR
     ---------------------------------------------------- */
  
  /* Ensure the sticky header section sits on top of all page content (such as sliders) on mobile */
  .breakdance .bde-section-15-121 {
    z-index: 999999 !important;
  }

  /* Force the navigation section container to be a compact, single-row flexbar */
  .breakdance .bde-section-15-121 .section-container {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 8px 16px !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 0 !important;
  }

  /* Hide the large desktop 'GIVE MONTHLY' button from the sticky row */
  .breakdance .bde-section-15-121 .bde-button-15-143 {
    display: none !important;
  }

  /* Position the WP Menu Wrapper */
  .breakdance .bde-wp-menu-15-141 {
    margin: 0 !important;
    padding: 0 !important;
    flex-grow: 1 !important;
    display: flex !important;
    align-items: center !important;
  }

  /* Make the Donate Button compact, premium and high-contrast (Signature Red) */
  .breakdance #donatebutton.bde-button-15-142 {
    margin-right: 12px !important;
    display: block !important;
  }

  .breakdance #donatebutton.bde-button-15-142 .bde-button__button {
    font-size: 13px !important;
    letter-spacing: 0.5px !important;
    padding: 8px 14px !important;
    border-radius: 4px !important;
    background-color: #b12029 !important; /* Signature brand red */
    color: #ffffff !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2) !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    border: none !important;
    transition: all 0.2s ease-in-out !important;
  }

  .breakdance #donatebutton.bde-button-15-142 .bde-button__button:hover {
    background-color: #d82b35 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.25) !important;
  }

  /* French link switcher styling in the sticky bar */
  .breakdance .bde-text-link-15-144 {
    font-size: 0 !important; /* Hide 'French' text on mobile */
    font-weight: 700 !important;
    padding: 8px 6px !important;
    color: #ffffff !important;
    text-decoration: none !important;
    margin: 0 !important;
    display: inline-block !important;
    transition: color 0.2s ease !important;
  }

  .breakdance .bde-text-link-15-144::after {
    content: "FR" !important; /* Display 'FR' on mobile instead */
    font-size: 15px !important;
  }

  .breakdance .bde-text-link-15-144:hover {
    color: #F5CD89 !important; /* Premium brand gold */
  }

  /* ----------------------------------------------------
     3. ANIMATED BURGER BUN ICON (HAMBURGER TO X)
     ---------------------------------------------------- */
  
  /* Reset and base hamburger wrapper */
  .breakdance-menu-toggle,
  .breakdance-menu-toggle-custom {
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
    padding: 6px !important; /* Balanced padding for vertical centering */
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    align-self: center !important; /* Perfect vertical centering inside flexbar */
    outline: none !important;
    box-shadow: none !important;
  }

  .breakdance-menu-toggle-icon {
    width: 22px !important;
    height: 18px !important; /* Symmetric bounding height */
    position: relative !important;
    display: block !important;
  }

  /* Hamburger lines - identical 3px thickness & specificity boost */
  .breakdance .breakdance-menu-toggle-custom .breakdance-menu-toggle-lines,
  .breakdance .breakdance-menu-toggle-custom .breakdance-menu-toggle-lines::before,
  .breakdance .breakdance-menu-toggle-custom .breakdance-menu-toggle-lines::after,
  .breakdance-menu-toggle-lines,
  .breakdance-menu-toggle-lines::before,
  .breakdance-menu-toggle-lines::after {
    width: 22px !important;
    height: 3px !important; /* Matching thickness across all lines */
    background-color: #ffffff !important;
    display: block !important;
    position: absolute !important;
    transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1) !important;
    border-radius: 2px !important;
  }

  .breakdance-menu-toggle-lines {
    top: 50% !important;
    transform: translateY(-50%) !important;
  }

  .breakdance-menu-toggle-lines::before {
    content: "" !important;
    top: -7px !important; /* Perfectly symmetric vertical gaps */
  }

  .breakdance-menu-toggle-lines::after {
    content: "" !important;
    bottom: -7px !important; /* Perfectly symmetric vertical gaps */
  }

  /* Active Open State: Morph into 'X' and prevent Breakdance core overrides from hiding pseudo-elements */
  html.is-breakdance-menu-open .breakdance-menu-toggle-lines {
    background-color: transparent !important;
  }

  html.is-breakdance-menu-open .breakdance-menu-toggle-lines::before,
  html.is-breakdance-menu-open .breakdance-menu-toggle-custom .breakdance-menu-toggle-lines::before {
    transform: rotate(45deg) !important;
    top: 0 !important;
    background-color: #ffffff !important;
    opacity: 1 !important;
    display: block !important;
    visibility: visible !important;
  }

  html.is-breakdance-menu-open .breakdance-menu-toggle-lines::after,
  html.is-breakdance-menu-open .breakdance-menu-toggle-custom .breakdance-menu-toggle-lines::after {
    transform: rotate(-45deg) !important;
    bottom: 0 !important;
    background-color: #ffffff !important;
    opacity: 1 !important;
    display: block !important;
    visibility: visible !important;
  }

  /* Prevent slider pagination dots from rendering on top of the menu when expanded */
  html.is-breakdance-menu-open .swiper-pagination,
  html.is-breakdance-menu-open .splide__pagination,
  html.is-breakdance-menu-open .slick-dots,
  html.is-breakdance-menu-open .flex-control-nav,
  html.is-breakdance-menu-open .owl-dots {
    z-index: 1 !important;
  }

  /* Keep the toggle button floating above everything else when the menu opens */
  .breakdance-menu-toggle,
  .breakdance-menu-toggle-custom {
    position: relative !important;
    z-index: 100000 !important;
  }

  /* ----------------------------------------------------
     4. COLLAPSIBLE VERTICAL DRAWER OVERLAY
     ---------------------------------------------------- */
  
  /* Reset and convert default menu list into full-screen glassmorphism drawer */
  .breakdance .bde-wp-menu-15-141 .breakdance-menu-list {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background-color: rgba(0, 37, 84, 0.98) !important; /* Deep Royal Navy */
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    z-index: 99999 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: center !important;
    padding: 70px 24px 40px 24px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    overflow-y: auto !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: opacity 0.35s ease, visibility 0.35s ease !important;
    border: none !important;
    box-shadow: none !important;
  }

  /* Toggle drawer display */
  .breakdance .bde-wp-menu-15-141 .breakdance-menu.breakdance-responsive-menu--open .breakdance-menu-list {
    opacity: 1 !important;
    visibility: visible !important;
    display: flex !important;
  }

  /* Prevent page scrolling when drawer is open (using native Breakdance open states) */
  html.is-breakdance-menu-open,
  html.is-breakdance-menu-open body {
    overflow: hidden !important;
  }

  /* Mobile vertical menu link items */
  .breakdance .bde-wp-menu-15-141 .breakdance-menu-list li {
    width: 100% !important;
    max-width: 320px !important;
    text-align: center !important;
    margin: 4px 0 !important;
    padding: 0 !important;
    background: transparent !important;
    display: block !important;
    border: none !important;
  }

  .breakdance .bde-wp-menu-15-141 .breakdance-menu-list li .breakdance-menu-link {
    font-family: "Montserrat", sans-serif !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    color: #ffffff !important;
    text-decoration: none !important;
    padding: 10px 16px !important;
    display: inline-block !important;
    width: auto !important;
    box-sizing: border-box !important;
    border: none !important;
    background: transparent !important;
    transition: color 0.25s ease, transform 0.25s ease !important;
  }

  /* Active & hover highlight states */
  .breakdance .bde-wp-menu-15-141 .breakdance-menu-list li .breakdance-menu-link:hover,
  .breakdance .bde-wp-menu-15-141 .breakdance-menu-list li.breakdance-menu-item--active .breakdance-menu-link {
    color: #F5CD89 !important; /* Premium brand gold/yellow */
    transform: scale(1.04) !important;
    background: transparent !important;
  }

  /* Remove default borders and backgrounds from breakdance defaults */
  .breakdance .bde-wp-menu-15-141 .breakdance-menu-list li:hover {
    background: transparent !important;
  }
  .breakdance .bde-wp-menu-15-141 .breakdance-menu-list > :last-child {
    border-bottom: none !important;
  }

  /* ----------------------------------------------------
     5. MOBILE DRAWER EXTRA ACTIONS (DYNAMIC CONTAINER)
     ---------------------------------------------------- */
  
  .mobile-menu-extra-actions {
    width: 100% !important;
    max-width: 320px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 20px !important;
    margin-top: 24px !important;
    padding-top: 24px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.15) !important;
    box-sizing: border-box !important;
  }

  /* "GIVE MONTHLY" Large CTA Button */
  .mobile-menu-extra-actions .mobile-give-monthly-btn {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .mobile-menu-extra-actions .mobile-give-monthly-btn .bde-button__button {
    width: 100% !important;
    background-color: #F5CD89 !important; /* Brand Gold/Yellow */
    color: #002554 !important; /* Brand Dark Navy */
    padding: 12px 20px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    border-radius: 4px !important;
    text-decoration: none !important;
    text-align: center !important;
    display: block !important;
    box-sizing: border-box !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25) !important;
    transition: all 0.25s ease !important;
    border: none !important;
  }

  .mobile-menu-extra-actions .mobile-give-monthly-btn .bde-button__button:hover {
    background-color: #ffffff !important;
    color: #002554 !important;
    transform: translateY(-1.5px) !important;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35) !important;
  }

  /* Elegant Custom Search Form */
  .mobile-menu-extra-actions .mobile-search-form {
    width: 100% !important;
    margin: 0 !important;
  }

  .mobile-menu-extra-actions .mobile-search-form form {
    display: flex !important;
    border-radius: 4px !important;
    overflow: hidden !important;
    width: 100% !important;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.2) !important;
  }

  .mobile-menu-extra-actions .mobile-search-form input[type="text"] {
    flex-grow: 1 !important;
    padding: 10px 14px !important;
    border: none !important;
    font-size: 14px !important;
    font-family: "Montserrat", sans-serif !important;
    color: #333333 !important;
    background-color: #ffffff !important;
    outline: none !important;
    box-sizing: border-box !important;
  }

  .mobile-menu-extra-actions .mobile-search-form button[type="submit"] {
    background-color: #F5CD89 !important;
    border: none !important;
    padding: 10px 14px !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: background-color 0.2s ease !important;
  }

  .mobile-menu-extra-actions .mobile-search-form button[type="submit"]:hover {
    background-color: #ffffff !important;
  }

  .mobile-menu-extra-actions .mobile-search-form button svg {
    width: 16px !important;
    height: 16px !important;
    fill: #002554 !important;
  }

  /* Email updates newsletter link */
  .mobile-menu-extra-actions .mobile-signup-btn {
    width: auto !important;
    margin: 0 !important;
  }

  .mobile-menu-extra-actions .mobile-signup-btn .bde-button__button {
    color: #ffffff !important;
    font-family: "Montserrat", sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    text-decoration: underline !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
  }

  .mobile-menu-extra-actions .mobile-signup-btn .bde-button__button:hover {
    color: #F5CD89 !important;
  }

  /* Gabriel News link + icon horizontal inline */
  .mobile-menu-extra-actions .mobile-gabriel-news {
    width: 100% !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 8px !important;
  }

  .mobile-menu-extra-actions .mobile-gabriel-news .bde-column-15-128 {
    width: auto !important;
    display: inline-block !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .mobile-menu-extra-actions .mobile-gabriel-news .bde-button-15-131 {
    margin: 0 !important;
  }

  .mobile-menu-extra-actions .mobile-gabriel-news .bde-button-15-131 .bde-button__button {
    color: #ffffff !important;
    font-family: "Montserrat", sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    text-decoration: underline !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
  }

  .mobile-menu-extra-actions .mobile-gabriel-news .bde-button-15-131 .bde-button__button:hover {
    color: #F5CD89 !important;
  }

  .mobile-menu-extra-actions .mobile-gabriel-news .bde-column-15-129 {
    width: auto !important;
    display: inline-block !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .mobile-menu-extra-actions .mobile-gabriel-news img {
    width: 22px !important;
    height: 22px !important;
    object-fit: contain !important;
    vertical-align: middle !important;
  }

  /* Center social icons horizontally */
  .mobile-menu-extra-actions .mobile-social-icons {
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 16px !important;
    margin: 4px 0 0 0 !important;
    padding: 0 !important;
    width: auto !important;
  }

  .mobile-menu-extra-actions .mobile-social-icons a {
    width: 38px !important;
    height: 38px !important;
    border-radius: 50% !important;
    background-color: rgba(255, 255, 255, 0.08) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.25s ease !important;
    box-sizing: border-box !important;
    padding: 8px !important;
  }

  .mobile-menu-extra-actions .mobile-social-icons a:hover {
    background-color: #F5CD89 !important;
    transform: translateY(-2px) !important;
  }

  .mobile-menu-extra-actions .mobile-social-icons a svg {
    width: 18px !important;
    height: 18px !important;
    fill: #ffffff !important;
    transition: fill 0.25s ease !important;
  }

  .mobile-menu-extra-actions .mobile-social-icons a:hover svg {
    fill: #002554 !important;
  }
}

/* ----------------------------------------------------
   INTERMEDIATE VIEWPORT POLISH (768px - 1199px)
   ---------------------------------------------------- */
@media (min-width: 768px) and (max-width: 1249px) {
  /* Clear top header section padding to allow logo to fill height absolute */
  .breakdance .bde-section-15-100 {
    padding: 0 !important;
  }
  .breakdance .bde-section-15-100 .section-container {
    padding: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    display: flex !important;
    align-items: stretch !important;
    height: 100% !important;
    overflow: hidden !important; /* Prevent logo from bleeding outside container */
  }

  /* --- FULL-WIDTH LAYERED LOGO ---
     The logo column is taken out of flex flow and spans 100% width
     at z-index 2. The red widgets column floats on top at z-index 3.
     The container's own red background fills any area not covered by
     the logo image, so there are never white gaps. */
  .breakdance .bde-columns-15-117 {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: flex-end !important; /* Push in-flow red column to far right */
    align-items: stretch !important;
    gap: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    position: relative !important;
    height: auto !important;
    min-height: calc(9.35vw + 38px) !important; /* Keep logo at least 155px tall at 1250px, scaling down smoothly to 110px at 768px */
    background-color: #b12029 !important; /* Fallback red fills behind logo */
  }

  /* Logo column: absolute, full-width, sits on top of parent red bg but below widgets */
  .breakdance .bde-column-15-118 {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    flex: none !important;
    z-index: 2 !important;
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
    background-color: transparent !important;
  }

  /* Right column: transparent, floats on top of logo at z-index 3 */
  .breakdance .bde-column-15-119 {
    width: 42% !important;
    max-width: 42% !important;
    flex: 0 0 42% !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: flex-end !important;
    align-content: center !important;
    align-items: center !important;
    align-self: stretch !important;
    gap: 8px 16px !important;
    padding: 8px 16px !important;
    margin: 0 !important;
    margin-left: auto !important; /* Push to far right since logo column is out of flow */
    background-color: transparent !important; /* Transparent so logo shows through */
    box-sizing: border-box !important;
    position: relative !important;
    z-index: 3 !important; /* Sits on top of the logo */
  }

  /* Reset default margins for all children of right-hand widget area */
  .breakdance .bde-column-15-119 > * {
    margin: 0 !important;
  }

  /* Logo image: contain shows full logo without cropping; left-anchored so logo text never crops */
  .breakdance .bde-image2-15-120 {
    max-width: 100% !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: left center !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
  }

  /* Make search form compact */
  .breakdance .bde-search-form-15-124 {
    width: auto !important;
    max-width: 160px !important;
  }
  .breakdance .bde-search-form-15-124 input.search-form__field {
    padding: 6px 10px !important;
    font-size: 13px !important;
  }
  .breakdance .bde-search-form-15-124 button.search-form__button {
    padding: 6px 10px !important;
  }

  /* Make social media text and icons fit beautifully on a single line next to search */
  .breakdance .bde-columns-15-154 {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 8px !important;
    width: auto !important;
  }
  .breakdance .bde-column-15-155,
  .breakdance .bde-column-15-156 {
    width: auto !important;
    max-width: none !important;
    flex: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  .breakdance .bde-text-15-157 {
    font-size: 12px !important;
    color: #ffffff !important;
    white-space: nowrap !important;
  }

  /* Sign up for email updates button size compact */
  .breakdance .bde-button-15-122 .bde-button__button {
    font-size: 13px !important;
    padding: 6px 12px !important;
    white-space: nowrap !important;
  }

  /* Gabriel News link and icon on a single horizontal line */
  .breakdance .bde-columns-15-127 {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 6px !important;
    width: auto !important;
  }
  .breakdance .bde-column-15-128,
  .breakdance .bde-column-15-129 {
    width: auto !important;
    max-width: none !important;
    flex: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  .breakdance .bde-button-15-131 .bde-button__button {
    font-size: 13px !important;
    white-space: nowrap !important;
  }
  .breakdance .bde-image2-15-130 {
    width: 20px !important;
    height: 20px !important;
    object-fit: contain !important;
    display: block !important;
  }

  /* ----------------------------------------------------
     STILL STICKY BAR MENU LAYOUT POLISH
     ---------------------------------------------------- */
  
  /* Container pushes menu to stretch and aligns buttons neatly to the right */
  .breakdance .bde-section-15-121 .section-container {
    display: flex !important;
    flex-direction: row !important;
    justify-content: flex-start !important;
    align-items: center !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    gap: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Let WP Menu take all available space to distribute its links beautifully */
  .breakdance .bde-wp-menu-15-141 {
    flex-grow: 1 !important;
    width: auto !important;
    max-width: none !important;
    margin-right: 16px !important; /* Reduced to balance the layout and decrease gap to buttons */
    display: flex !important;
    align-items: center !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  .breakdance .bde-wp-menu-15-141 nav.breakdance-menu {
    width: 100% !important;
    max-width: none !important;
  }

  /* Evenly space the menu items across the entire menu block with space-between */
  .breakdance .bde-wp-menu-15-141 .breakdance-menu-list {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important; /* Spreads items evenly to distribute visual gaps perfectly */
    width: 100% !important;
    max-width: none !important;
    gap: clamp(8px, 1.2vw, 20px) !important; /* Prevent items from touching at smaller viewport bounds */
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
  }

  /* Reset margin on list items and allow them to size exactly to content */
  .breakdance .bde-wp-menu-15-141 .breakdance-menu-list li {
    margin: 0 !important;
    padding: 0 !important;
    flex: 0 0 auto !important; /* Allow exact text-width sizing for perfect gap distribution */
    text-align: center !important;
  }

  /* Larger, beautifully spaced main menu links (no bunching) */
  .breakdance .bde-wp-menu-15-141 .breakdance-menu-link {
    display: inline-block !important;
    text-align: center !important;
    font-size: clamp(13px, 1.4vw, 16px) !important; /* Cap at 16px to match desktop Breakdance default */
    padding: 10px clamp(6px, 1.1vw, 16px) !important;
    font-weight: 600 !important; /* Match desktop Breakdance weight */
    white-space: nowrap !important;
    transition: all 0.2s ease-in-out !important;
  }

  /* Group buttons on the right cleanly with neat spacing and flex-shrink protection */
  .breakdance .bde-section-15-121 #donatebutton.bde-button-15-142,
  .breakdance .bde-section-15-121 .bde-button-15-143 {
    margin-left: 12px !important;
    margin-right: 0 !important;
    padding: 0 !important;
    flex-shrink: 0 !important;
    display: block !important;
  }

  .breakdance .bde-section-15-121 .bde-button-15-143 .bde-button__button,
  .breakdance .bde-section-15-121 #donatebutton.bde-button-15-142 .bde-button__button {
    font-size: 14px !important; /* Larger CTA button text size */
    padding: 10px 16px !important; /* Larger CTA button padding matching menu links */
    font-weight: 700 !important;
  }

  /* Compress spacing around French language switcher snuggly on the far right */
  .breakdance .bde-text-link-15-144 {
    padding: 8px 12px !important; /* Larger padding for better hit target and alignment */
    margin-left: 12px !important; /* Clean, tight margin gap */
    margin-right: 0 !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    flex-shrink: 0 !important;
    display: inline-block !important;
  }
}

/* ----------------------------------------------------
   NARROW INTERMEDIATE VIEWPORT (768px - 1050px)
   Full-width logo behind the red column.
   At this width the 58% column is too small for a tall logo,
   so we make the logo span 100% and layer the red column on top.
   Height = 19.7vw (= 100vw / 5.07 aspect ratio) so cover never
   letterboxes at any viewport width in this range.
   ---------------------------------------------------- */
@media (min-width: 768px) and (max-width: 1050px) {
  /* Tighten the sticky bar side padding so nothing gets clipped */
  .breakdance .bde-section-15-121 .section-container {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  /* Smaller menu link text and tighter padding at narrow intermediate widths */
  .breakdance .bde-wp-menu-15-141 .breakdance-menu-link {
    font-size: clamp(12px, 1.4vw, 15px) !important;
    padding: 8px clamp(4px, 0.6vw, 8px) !important;
    font-weight: 600 !important;
  }

  /* Tighter menu gap at narrow widths */
  .breakdance .bde-wp-menu-15-141 .breakdance-menu-list {
    gap: clamp(2px, 0.5vw, 8px) !important;
  }

  /* Compress CTA button padding so they don't get clipped */
  .breakdance .bde-section-15-121 .bde-button-15-143 .bde-button__button,
  .breakdance .bde-section-15-121 #donatebutton.bde-button-15-142 .bde-button__button {
    font-size: 12px !important;
    padding: 8px 10px !important;
  }

  /* Compress the margin between menu and buttons */
  .breakdance .bde-wp-menu-15-141 {
    margin-right: 8px !important;
  }

  /* Tighten margin between CTA buttons */
  .breakdance .bde-section-15-121 #donatebutton.bde-button-15-142,
  .breakdance .bde-section-15-121 .bde-button-15-143 {
    margin-left: 6px !important;
  }

  /* Collapse "French" to "FR" at narrow widths so it always fits in the bar */
  .breakdance .bde-text-link-15-144 {
    font-size: 0 !important;
    padding: 6px 4px !important;
    margin-left: 6px !important;
    flex-shrink: 0 !important;
    display: inline-block !important;
  }
  .breakdance .bde-text-link-15-144::after {
    content: "FR" !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #ffffff !important;
  }

  /* Tighter padding and gap at narrow widths to keep header compact */
  .breakdance .bde-column-15-119 {
    padding: 6px 12px !important;
    gap: 6px 12px !important;
  }
}

/* ----------------------------------------------------
   FRENCH "FR" ABBREVIATION (1051px - 1200px)
   At these widths the full word "French" overflows the sticky bar.
   Show "FR" instead, same as the narrow block above.
   ---------------------------------------------------- */
@media (min-width: 1051px) and (max-width: 1200px) {
  .breakdance .bde-text-link-15-144 {
    font-size: 0 !important;
    padding: 8px 6px !important;
    margin-left: 8px !important;
    flex-shrink: 0 !important;
    display: inline-block !important;
  }
  .breakdance .bde-text-link-15-144::after {
    content: "FR" !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #ffffff !important;
  }
}