/* DADAIRE / 03 - Mobile header and Blocksy native off-canvas navigation
 * Based on Blocksy's #offcanvas .ct-panel-content and nav.mobile-menu markup.
 * Only appearance is changed: Blocksy owns opening, closing and accessibility.
 */
@media (max-width: 1024px) {
  /* Clean, legible white header, with a subtle divider. */
  #header [data-device="mobile"] [data-row="middle"] {
    background: var(--dc-white);
    border-bottom: 1px solid var(--dc-border);
  }

  /* Brand the native hamburger trigger; preserve its click behavior. */
  #header [data-device="mobile"] .ct-header-trigger {
    color: var(--dc-navy);
    --theme-icon-color: var(--dc-navy);
    --toggle-button-text-color: var(--dc-navy);
    min-width: 44px;
    min-height: 44px;
    border-radius: 10px;
  }
  #header [data-device="mobile"] .ct-header-trigger:hover {
    color: var(--dc-forest);
    --theme-icon-color: var(--dc-forest);
    background: var(--dc-soft);
  }

  /* The menu panel shown in the supplied screenshot was almost black.
     Cover the background at Blocksy's two structural wrapper levels. */
  #offcanvas.ct-header,
  #offcanvas .ct-panel-inner,
  #offcanvas .ct-panel-content,
  #offcanvas .ct-panel-content-inner {
    background-color: var(--dc-soft) !important;
  }
  #offcanvas .ct-panel-inner {
    border-top: 4px solid var(--dc-forest);
    --panel-padding: 28px;
  }
  #offcanvas .ct-panel-actions {
    padding-top: 14px;
    padding-right: 18px;
  }

  /* Clearly visible, generous close control. */
  #offcanvas .ct-toggle-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    background: #E9EFEB;
    border-radius: 12px;
    color: var(--dc-navy);
    --theme-icon-color: var(--dc-navy);
  }
  #offcanvas .ct-toggle-close:hover {
    color: var(--dc-forest);
    background: #DFEAE2;
    --theme-icon-color: var(--dc-forest);
  }
  #offcanvas .ct-toggle-close .ct-icon {
    fill: currentColor;
  }

  /* Off-canvas links only. No desktop menus or other panels are affected. */
  #offcanvas [data-device="mobile"] nav.mobile-menu {
    width: 100%;
  }
  #offcanvas [data-device="mobile"] nav.mobile-menu ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  #offcanvas [data-device="mobile"] nav.mobile-menu > ul > li {
    border-bottom: 1px solid var(--dc-border);
  }
  #offcanvas [data-device="mobile"] nav.mobile-menu > ul > li > a.ct-menu-link {
    display: flex;
    align-items: center;
    min-height: 54px;
    padding: 11px 12px;
    color: var(--dc-navy) !important;
    font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -0.015em;
    line-height: 1.4;
    text-decoration: none;
    text-transform: none !important;
    border-radius: 9px;
    transition: color 160ms ease, background-color 160ms ease;
  }
  #offcanvas [data-device="mobile"] nav.mobile-menu > ul > li > a.ct-menu-link:hover,
  #offcanvas [data-device="mobile"] nav.mobile-menu > ul > li > a.ct-menu-link:focus-visible {
    background: #E4EFE8;
    color: var(--dc-forest) !important;
  }
  #offcanvas [data-device="mobile"] nav.mobile-menu > ul > li.current-menu-item > a.ct-menu-link,
  #offcanvas [data-device="mobile"] nav.mobile-menu > ul > li.current_page_item > a.ct-menu-link,
  #offcanvas [data-device="mobile"] nav.mobile-menu > ul > li.current-menu-ancestor > a.ct-menu-link {
    background: #E4EFE8;
    color: var(--dc-forest) !important;
    box-shadow: inset 3px 0 0 var(--dc-gold);
  }
  /* Menu sublevels, if introduced later. */
  #offcanvas [data-device="mobile"] nav.mobile-menu .sub-menu a {
    color: var(--dc-copy) !important;
    font-size: 15px;
    text-transform: none !important;
  }
  #offcanvas [data-device="mobile"] nav.mobile-menu .sub-menu a:hover {
    color: var(--dc-forest) !important;
  }
  #offcanvas a:focus-visible,
  #offcanvas button:focus-visible {
    outline: 3px solid var(--dc-gold);
    outline-offset: 3px;
  }
}

/* Do not force any mobile menu display state outside Blocksy's own breakpoints. */
@media (prefers-reduced-motion: reduce) {
  #offcanvas nav.mobile-menu a.ct-menu-link { transition: none !important; }
}