/* Additions to the compiled Lovable stylesheet (assets/css/site.css) for the static build. */

[hidden] {
  display: none !important;
}

/* Desktop dropdowns open on hover in the original; site.js also opens them from their button. */
[data-nav-group][data-open] > [data-nav-dropdown] {
  visibility: visible;
  opacity: 1;
}

[data-nav-group][data-open] > button svg {
  rotate: 180deg;
}

/* Escape hides a hover-opened menu until the pointer leaves it. */
[data-nav-group][data-dismissed] > [data-nav-dropdown] {
  visibility: hidden;
  opacity: 0;
}

/* Resource rows scroll sideways and take keyboard focus (site.js / build.py). */
[data-resource-track]:focus-visible {
  outline: 2px solid var(--royal);
  outline-offset: 4px;
  border-radius: 1rem;
}

[data-marquee][data-paused] .animate-marquee {
  animation-play-state: paused;
}

/* The marquee doesn't move under reduced motion, so there is nothing to pause. */
@media (prefers-reduced-motion: reduce) {
  [data-marquee-toggle] {
    display: none;
  }
}

/* HubSpot's form sits in an iframe, which clips the focus ring of the fields at its edges. The
   iframe is widened by the 4px of padding hubspot-form.css gives its body, and pulled back by the
   same amount, so the fields still line up with the card around them. */
[data-hubspot-form] iframe {
  width: calc(100% + 8px) !important;
  max-width: none !important;
  margin: -4px !important;
}

/* A long quote on the industry pages gets its own row across every column (tidy_industry_stats in
   tools/build.py). The Tailwind build only has the column-span classes the original page used. */
.stat-quote-wide {
  grid-column: 1 / -1;
}

/* The /resources cards clip their buttons and headings when text is enlarged to 200% on a narrow
   screen (WCAG 1.4.4, 1.4.10): the buttons are `w-fit` with no maximum, and the grid items can't
   shrink below their longest word. Let both shrink and break instead. */
.card-tone a.inline-flex {
  max-width: 100%;
}

.card-tone > * {
  min-width: 0;
}

.card-tone h1,
.card-tone h2,
.card-tone h3,
.card-tone p {
  overflow-wrap: anywhere;
}