/*
 * ==========================================================================
 * JAVASCRIPT-STATE RULES - kept out of LiteSpeed UCSS
 * ==========================================================================
 *
 * LiteSpeed's UCSS (unique CSS) keeps only selectors it finds in the page
 * HTML as served. A class or attribute that JavaScript adds later (.scrolled
 * on scroll, .open on click, aria-expanded="true", <details open>) is not in
 * that HTML, so UCSS deletes the rule and the state has no styling.
 *
 * This file is enqueued as `hypestudio-states` straight after custom.css and
 * gets data-no-optimize="1" from hypestudio_exclude_form_styles_from_litespeed()
 * in inc/enqueue.php, so LiteSpeed leaves it whole.
 *
 * Put every rule here whose selector depends on a state only JavaScript adds.
 * Already handled elsewhere, do not duplicate: the mobile menu .show and
 * .collapsing rules (inline block in inc/enqueue.php) and
 * .portfolio-card.is-hidden plus the JS-built pagination (partial-runtime-css.php).
 */

/* --- Moved from css/custom.css (original order) ------------------------ */

/* Header shadow once the page is scrolled (js/theme-toggle.js) */
.site-navigation.scrolled {
    box-shadow: var(--shadow-nav);
}

/* Let's Talk FAQ: rotate the + marker on the open <details> */
.letstalk-faq-item[open] .letstalk-faq-q::after {
    transform: rotate(45deg);
}

/* Listing pages: filter panel opened by the Filter button */
.portfolio-filter-panel.open {
    display: block;
}

/* Service page FAQ: open question */
.service-faq-q[aria-expanded="true"] .service-faq-chevron {
    transform: rotate(180deg);
}
.service-faq-q[aria-expanded="true"] {
    background: var(--bg-section);
}

/* --- Copied from css/custom.css (original stays: grouped with :focus and :active) --- */

.navbar-toggler[aria-expanded="true"] {
    border-color: var(--border);
    outline: none;
    box-shadow: none;
}

/* --- Copied from css/5d-framework.css (originals stay there; KEEP IN SYNC) --- */
/* States toggled by js/5d-framework.js: .expanded, .open, .fd-back-top--visible */

.fd-wrap .card.expanded {
  border-color: var(--fd-accent) !important;
  background: var(--fd-accent-bg) !important;
  box-shadow: var(--fd-shadow-m) !important;
}
.fd-wrap .card.expanded::before {
  opacity: 1;
}
.fd-wrap .concept-row:has(.card.expanded) {
  grid-template-columns: 1fr;
}
.fd-wrap .card.expanded .expand-hint {
  display: none;
}
.fd-wrap .card.expanded .detail {
  display: block;
}
.fd-wrap .cross-card.expanded {
  border-color: var(--fd-accent);
  background: var(--fd-accent-bg);
  box-shadow: var(--fd-shadow-m);
}
.fd-wrap .cross-card.expanded .desc {
  display: block;
}
.fd-wrap .cross-card.expanded .hint {
  display: none;
}
.fd-wrap .faq-item.open .faq-toggle {
  transform: rotate(45deg);
}
.fd-wrap .faq-item.open .faq-a {
  display: block;
}
.fd-back-top.fd-back-top--visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}