/* Motion enhances the PHP pages. All content remains visible without JavaScript. */
:root  {
  --motion-press: 140ms;
  --motion-control: 180ms;
  --motion-reveal: 400ms;
  --motion-intro: 500ms;
}
.button, .filters a  {
  transition: transform var(--motion-press) var(--ease),
    background-color var(--motion-control) ease, color var(--motion-control) ease;
}
.text-link svg, .path-card > svg:last-child, .center-links a > svg  {
  transition: transform var(--motion-control) var(--ease);
}
.path-card  {
  transition: transform var(--motion-control) var(--ease), background-color var(--motion-control) ease;
}
.doctor-image, .director-portrait, .director-hero-photo  {
  transition: border-color var(--motion-control) ease, background-color var(--motion-control) ease;
}
.header-actions summary  {
  transition: background-color var(--motion-control) ease, transform var(--motion-press) var(--ease);
}
.mobile-menu nav  {
  max-height: calc(100dvh - 112px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
/* Native details keeps its keyboard and no-script behavior. Unsupported browsers
   retain the existing instant disclosure. The pseudo-element is never clipped
   or transformed, so the absolutely positioned mobile menu keeps its full width. */
@supports selector(details::details-content) and (transition-behavior: allow-discrete)  {
  .header-actions details::details-content  {
    opacity: 0;
    transition: opacity 140ms var(--ease), content-visibility 140ms allow-discrete;
  }
  .header-actions details[open]::details-content  {
    opacity: 1;
    transition-duration: var(--motion-control);
  }
  .language-options, .mobile-menu nav  {
    transform-origin: top right;
    transform: translateY(-6px) scale(.98);
    transition: transform 140ms var(--ease);
  }
  .language-menu[open] .language-options, .mobile-menu[open] nav  {
    transform: none;
    transition-duration: var(--motion-control);
  }
  @starting-style  {
    .header-actions details[open]::details-content  {
      opacity: 0;
    }
    .language-menu[open] .language-options, .mobile-menu[open] nav  {
      transform: translateY(-6px) scale(.98);
    }
  }
}
@media (prefers-reduced-motion: no-preference)  {
  html:not([data-input="keyboard"]) .button:active,
  html:not([data-input="keyboard"]) .filters a:active  {
    transform: scale(.98);
  }
  html:not([data-input="keyboard"]) .header-actions summary:active  {
    transform: scale(.97);
  }
}
/* Touch devices receive press feedback, never a hover that sticks after tapping. */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference)  {
  html:not([data-input="keyboard"]) .button:hover  {
    transform: translateY(-2px);
  }
  html:not([data-input="keyboard"]) .button:active  {
    transform: scale(.98);
  }
  html:not([data-input="keyboard"]) .path-card:hover  {
    transform: translateY(-3px);
  }
  html:not([data-input="keyboard"]) .text-link:hover svg,
  html:not([data-input="keyboard"]) .path-card:hover > svg:last-child,
  html:not([data-input="keyboard"]) .center-links a:hover > svg  {
    transform: translateX(3px);
  }
  html:not([data-input="keyboard"]) .doctor:hover .doctor-image  {
    border-color: #a2b4d1;
  }

  .desktop-nav a:not(.nav-appointment):not([aria-current])::before  {
    content: '';
    position: absolute;
    inset: auto 0 18px;
    height: 2px;
    background: var(--navy);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--motion-control) var(--ease);
  }
  html:not([data-input="keyboard"]) .desktop-nav a:hover::before  {
    transform: scaleX(1);
  }
}
/* Keyboard actions are immediate; focus rings and selected states stay intact. */
html[data-input="keyboard"] .button,
html[data-input="keyboard"] .filters a,
html[data-input="keyboard"] .header-actions summary,
html[data-input="keyboard"] .text-link svg,
html[data-input="keyboard"] .path-card,
html[data-input="keyboard"] .path-card > svg,
html[data-input="keyboard"] .center-links a > svg,
html[data-input="keyboard"] .doctor-image img,
html[data-input="keyboard"] .director-portrait img,
html[data-input="keyboard"] .director-hero-photo > img,
html[data-input="keyboard"] .language-options,
html[data-input="keyboard"] .mobile-menu nav  {
  transform: none !important;
  transition: none !important;
}
html[data-input="keyboard"] .header-actions details::details-content,
html[data-input="keyboard"] .language-menu summary svg  {
  transition: none !important;
}
@media (prefers-reduced-motion: reduce)  {
  .photo-slider-track  {
    scroll-behavior: auto;
  }
  .button:active, .filters a:active, .header-actions summary:active,
  .language-options, .mobile-menu nav, .doctor-image img,
  .director-portrait img, .director-hero-photo > img  {
    transform: none !important;
  }
  .header-actions details::details-content  {
    transition: none !important;
  }
}
@media print  {
  [data-motion-running]  {
    opacity: 1 !important;
    transform: none !important;
  }
}
