/* DADAIRE / 04 - Blocksy Pro Shortcuts Bar presentation
 * Required GUI setup: Home, Custom Donate (/donate/), Custom Get Involved
 * (/get-involved/); icon + label; mobile only; default fixed full-width style.
 * Blocksy owns position, behavior, device display, and markup.
 */
@media (max-width: 1024px) {
  .ct-shortcuts-container,
  .ct-shortcuts-bar {
    background-color: var(--dc-white);
    border-top: 1px solid var(--dc-border);
    box-shadow: 0 -6px 26px rgb(23 50 77 / 10%);
    --theme-icon-color: var(--dc-navy);
    --icon-color: var(--dc-navy);
    --theme-link-initial-color: var(--dc-navy);
  }

  /* Link label and icon styles adapt to the shortcut items Blocksy generates. */
  :is(.ct-shortcuts-container, .ct-shortcuts-bar) a {
    min-height: 48px;
    color: var(--dc-navy);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.3;
    --icon-color: var(--dc-navy);
    --theme-icon-color: var(--dc-navy);
  }
  :is(.ct-shortcuts-container, .ct-shortcuts-bar) .ct-label {
    color: inherit;
    font-size: 12px;
    font-weight: 600;
  }
  :is(.ct-shortcuts-container, .ct-shortcuts-bar) a:hover,
  :is(.ct-shortcuts-container, .ct-shortcuts-bar) a:focus-visible {
    color: var(--dc-forest);
    --icon-color: var(--dc-forest);
    --theme-icon-color: var(--dc-forest);
  }

  /* Make the Donate destination the visual priority, even when its URL
     changes from local to production. Use /donate/ as the Custom URL. */
  :is(.ct-shortcuts-container, .ct-shortcuts-bar) a[href*="/donate/"] {
    background-color: var(--dc-gold);
    color: var(--dc-navy) !important;
    border-radius: 12px;
    margin-block: 5px;
    padding-inline: 12px;
    --icon-color: var(--dc-navy);
    --theme-icon-color: var(--dc-navy);
  }
  :is(.ct-shortcuts-container, .ct-shortcuts-bar) a[href*="/donate/"]:hover {
    background-color: var(--dc-gold-hover);
    color: var(--dc-navy) !important;
  }
  :is(.ct-shortcuts-container, .ct-shortcuts-bar) a:focus-visible {
    outline: 3px solid var(--dc-forest);
    outline-offset: 2px;
  }
}

@media (prefers-reduced-motion: reduce) {
  :is(.ct-shortcuts-container, .ct-shortcuts-bar) a { transition: none !important; }
}