/*
 * Feather icons (MIT) in place of the text arrows, plus their motion.
 * Markup comes from inc/icons.php ("ddh-glyph" wrapper + "ddh-icon" SVG).
 * The wrapper keeps its original element, so existing rules for its size,
 * colour, circle backgrounds and open-state rotation still apply.
 */

.ddh-glyph { align-items: center; display: inline-flex; justify-content: center; line-height: 1; vertical-align: middle; }
.ddh-icon { display: block; flex: none; height: 1em; overflow: visible; width: 1em; }

/* site-overrides.css drew the services disclosure as a CSS chevron
   (font-size:0 plus a rotated border in ::after). The SVG replaces it. */
.services-menu-trigger > .ddh-glyph,
.mobile-services-menu > summary > .ddh-glyph { font-size: 14px; height: auto; line-height: 1; width: auto; }
/* ...and nudged that chevron with margin-top (-5px closed, +5px open), which
   pushes the SVG above the text when closed and below it when open. */
.services-menu-trigger > .ddh-glyph,
.services-menu.is-open .services-menu-trigger > .ddh-glyph { margin-top: 0; }
.services-menu-trigger > .ddh-glyph::after,
.mobile-services-menu > summary > .ddh-glyph::after { content: none; }

/* Core Details blocks and article FAQs: a Feather chevron as the marker. */
.article-content summary,
.wp-block-details summary { align-items: center; display: flex; gap: 16px; justify-content: space-between; list-style: none; }
.article-content summary::-webkit-details-marker,
.wp-block-details summary::-webkit-details-marker { display: none; }
.article-content summary::after,
.wp-block-details summary::after {
  background: currentColor;
  content: "";
  flex: none;
  height: 18px;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") center / contain no-repeat;
  opacity: .7;
  width: 18px;
}
.article-content details[open] > summary::after,
.wp-block-details[open] > summary::after { transform: rotate(180deg); }

@media (prefers-reduced-motion: no-preference) {
  .ddh-icon { transition: transform .32s cubic-bezier(.22, .8, .3, 1); }

  /* Arrows lean in the direction they point while their control is hovered or focused. */
  :is(a, button, summary):is(:hover, :focus-visible) .ddh-icon--arrow-up-right { transform: translate(.16em, -.16em); }
  :is(a, button):is(:hover, :focus-visible) .ddh-icon--arrow-right { transform: translateX(.24em); }
  :is(a, button):is(:hover, :focus-visible) .ddh-icon--arrow-left { transform: translateX(-.24em); }
  .gallery-project-list button.is-selected .ddh-icon--arrow-up-right { transform: translate(.16em, -.16em); }

  /* Chevrons: the wrappers already rotate 180deg when open (site.css);
     ease that turn and give the closed chevron a small hover dip. */
  .services-menu-trigger > .ddh-glyph,
  .mobile-services-menu > summary > .ddh-glyph { transition: transform .32s cubic-bezier(.22, .8, .3, 1); }
  .services-menu:not(.is-open) .services-menu-trigger:is(:hover, :focus-visible) .ddh-icon--chevron-down,
  .mobile-services-menu:not([open]) > summary:hover .ddh-icon--chevron-down { transform: translateY(.12em); }
  .article-content summary::after,
  .wp-block-details summary::after { transition: transform .32s cubic-bezier(.22, .8, .3, 1); }

  /* Accordions open and close smoothly where the browser supports animating
     <details> content (::details-content); elsewhere they open instantly as before. */
  details:not(.mobile-menu) { interpolate-size: allow-keywords; }
  details:not(.mobile-menu)::details-content {
    block-size: 0;
    opacity: 0;
    overflow: clip;
    transition: block-size .36s cubic-bezier(.22, .8, .3, 1), opacity .26s ease, content-visibility .36s allow-discrete;
  }
  details:not(.mobile-menu)[open]::details-content { block-size: auto; opacity: 1; }

  /* Mobile menu: the panel drops in and its links follow in sequence. */
  .mobile-menu[open] > nav { animation: ddh-menu-in .3s cubic-bezier(.22, .8, .3, 1) both; transform-origin: top right; }
  .mobile-menu[open] > nav > * { animation: ddh-item-in .34s cubic-bezier(.22, .8, .3, 1) both; }
  .mobile-menu[open] > nav > :nth-child(2) { animation-delay: .03s; }
  .mobile-menu[open] > nav > :nth-child(3) { animation-delay: .06s; }
  .mobile-menu[open] > nav > :nth-child(4) { animation-delay: .09s; }
  .mobile-menu[open] > nav > :nth-child(5) { animation-delay: .12s; }
  .mobile-menu[open] > nav > :nth-child(6) { animation-delay: .15s; }
  .mobile-menu[open] > nav > :nth-child(n+7) { animation-delay: .18s; }
  .mobile-services-menu[open] > a { animation: ddh-item-in .3s cubic-bezier(.22, .8, .3, 1) both; }

  @keyframes ddh-menu-in { from { opacity: 0; transform: translateY(-10px) scale(.97); } }
  @keyframes ddh-item-in { from { opacity: 0; transform: translateY(6px); } }
}