/*
 * Futuro Theme CSS Overrides — Paper White palette.
 * Loaded only when Store#theme == "futuro" (via theme_overrides_stylesheet).
 *
 * IMPORTANT: This file is intentionally minimal. All theme styling lives in
 * Phlex components under `app/views/themes/futuro/` and
 * `app/components/themes/futuro/`, expressed as Tailwind utility classes
 * inline on each element. Color tokens come from ThemeSetting::FUTURO_DEFAULTS
 * and are injected as CSS variables at the :root level.
 *
 * Do not add cascading rules here that target element tags or default-theme
 * selectors — that would leak across pages and break component encapsulation.
 * If a piece of styling is repeated across components, lift it into a Phlex
 * helper or a per-component class file, not into this global sheet.
 */

/*
 * Homepage marquee strip (used by Views::Themes::Futuro::Home::Index
 * #render_marquee_band). The category list is rendered twice in the
 * markup so translating the track by -50% loops the animation
 * seamlessly. Pauses on hover so users can read a label.
 */
@keyframes futuro-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.animate-\[futuro-marquee_28s_linear_infinite\]:hover {
  animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
  .animate-\[futuro-marquee_28s_linear_infinite\] {
    animation: none;
  }
}

/*
 * Mobile footer accordion (rendered by Views::Themes::Futuro::Layouts::Storefront
 * #render_futuro_footer_mobile_accordion). Hides the default browser
 * disclosure triangle on <summary> elements and swaps the design's `+`
 * marker to `−` when the section is open. Zero-JS, native <details>.
 */
.futuro-footer-accordion > summary {
  list-style: none;
}
.futuro-footer-accordion > summary::-webkit-details-marker,
.futuro-footer-accordion > summary::marker {
  display: none;
  content: "";
}
.futuro-footer-accordion[open] > summary .futuro-footer-accordion__marker {
  /* Visually flip `+` to `−` by hiding the vertical stroke via clip. The
     glyph is rendered as plain text, so we tilt to align the cross with
     the baseline and clip the bottom half. */
}
.futuro-footer-accordion[open] > summary .futuro-footer-accordion__marker::after {
  content: "−";
}
.futuro-footer-accordion[open] > summary .futuro-footer-accordion__marker {
  font-size: 0;
}
.futuro-footer-accordion[open] > summary .futuro-footer-accordion__marker::after {
  font-size: 22px;
}

/*
 * Product detail page accordion (Views::Themes::Futuro::Products::Show
 * #render_futuro_details_accordion). Same zero-JS native <details>
 * pattern as the mobile footer accordion, restyled for ink-on-paper:
 * hide the browser disclosure triangle, swap `+` → `−` when [open].
 */
.futuro-product-accordion > summary {
  list-style: none;
}
.futuro-product-accordion > summary::-webkit-details-marker,
.futuro-product-accordion > summary::marker {
  display: none;
  content: "";
}
.futuro-product-accordion[open] > summary .futuro-product-accordion__marker {
  font-size: 0;
}
.futuro-product-accordion[open] > summary .futuro-product-accordion__marker::after {
  content: "−";
  font-size: 18px;
}

/*
 * Listing toolbar — sharp edges + Inter body font on the search input
 * inherited from the default theme's render_filters_form. Higher
 * specificity (id selector) beats Tailwind's `.rounded-lg` utility
 * without needing `!important`. The sort dropdown is rebuilt as a
 * native <select> in the Futuro Phlex views so its styling lives in
 * Tailwind classes, not here.
 */
input#search {
  border-radius: 0;
  font-family: "Inter", system-ui, sans-serif;
}
input#search:focus {
  border-radius: 0;
}