/* Site motion layer (see site-motion.js): fluid, non-invasive transitions. */

/* ---------- Rails: grab cursor, no text selection while dragging ---------- */
@media (hover: hover) and (pointer: fine) {
  .tf-motion-rail { cursor: grab; }
  .tf-motion-rail.is-dragging { cursor: grabbing; user-select: none; }
  .tf-motion-rail.is-dragging a,
  .tf-motion-rail.is-dragging img { pointer-events: none; }
}

/* ---------- Visible prev/next arrows (desktop, on hover/focus) ----------
   The buttons already exist for keyboard/screen readers (__sr-only); on a fine
   pointer they become round arrows on the rail edges. */
@media (hover: hover) and (pointer: fine) {
  .tf-home-series__controls > .tf-home-series__sr-only,
  .tf-home-latest__controls > .tf-home-latest__sr-only {
    position: absolute;
    top: 50%;
    z-index: 4;
    width: 44px;
    height: 44px;
    margin: 0;
    padding: 0;
    clip: auto;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, .12);
    border-radius: 50%;
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 4px 14px rgba(0, 0, 0, .14);
    color: transparent;
    font-size: 0;
    white-space: nowrap;
    cursor: pointer;
    opacity: 0;
    transform: translateY(-50%) scale(.9);
    transition: opacity .25s ease, transform .25s ease, background-color .2s ease;
  }
  .tf-home-series__prev.tf-home-series__sr-only,
  .tf-home-latest__prev.tf-home-latest__sr-only { left: 12px; }
  .tf-home-series__next.tf-home-series__sr-only,
  .tf-home-latest__next.tf-home-latest__sr-only { right: 12px; }

  /* Chevron drawn in CSS: keeps the accessible name of the button intact. */
  .tf-home-series__controls > .tf-home-series__sr-only::before,
  .tf-home-latest__controls > .tf-home-latest__sr-only::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10px;
    height: 10px;
    border-top: 2px solid #111;
    border-right: 2px solid #111;
    transform: translate(-65%, -50%) rotate(45deg);
  }
  .tf-home-series__prev.tf-home-series__sr-only::before,
  .tf-home-latest__prev.tf-home-latest__sr-only::before {
    transform: translate(-35%, -50%) rotate(-135deg);
  }

  /* Always shown (quietly) when the rail really scrolls; full on hover. */
  .tf-motion-scrollable > .tf-home-series__sr-only:not(:disabled),
  .tf-motion-scrollable > .tf-home-latest__sr-only:not(:disabled) {
    opacity: .82;
    transform: translateY(-50%) scale(1);
  }
  .tf-home-series__controls:hover > .tf-home-series__sr-only:not(:disabled),
  .tf-home-latest__controls:hover > .tf-home-latest__sr-only:not(:disabled),
  .tf-home-series__controls > .tf-home-series__sr-only:focus-visible,
  .tf-home-latest__controls > .tf-home-latest__sr-only:focus-visible {
    opacity: 1;
    transform: translateY(-50%) scale(1);
  }
  .tf-home-series__controls > .tf-home-series__sr-only:hover,
  .tf-home-latest__controls > .tf-home-latest__sr-only:hover { background: #fff; }
  .tf-home-series__controls > .tf-home-series__sr-only:focus-visible,
  .tf-home-latest__controls > .tf-home-latest__sr-only:focus-visible {
    outline: 3px solid #000;
    outline-offset: 3px;
    padding: 0;
  }
  .tf-home-series__controls > .tf-home-series__sr-only:disabled,
  .tf-home-latest__controls > .tf-home-latest__sr-only:disabled {
    opacity: 0;
    pointer-events: none;
  }
}

/* Snap feels smoother with proximity on large screens (mandatory jumps). */
@media (min-width: 768px) {
  .tf-home-series__scroller,
  .tf-home-latest__scroller,
  .tf-home-news__scroller { scroll-snap-type: x proximity; }
}

/* ---------- Product / firearm hero: cross-fade between photos ----------
   The gallery script still toggles [hidden]; hidden slides stay laid out but
   invisible, so the change fades instead of jumping. */
.tf-product-hero__slides { position: relative; }
.tf-product-hero .tf-product-hero__slide {
  opacity: 1;
  transition: opacity .5s cubic-bezier(.4, 0, .2, 1);
}
.tf-product-hero .tf-product-hero__slide[hidden] {
  display: block;
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .5s cubic-bezier(.4, 0, .2, 1), visibility 0s linear .5s;
}

/* ---------- Mega-menu: gentle drop-in ---------- */
@media (min-width: 1001px) {
  .tf-header__mega[open] > .tf-mega { animation: tf-motion-drop .24s cubic-bezier(.2, .7, .2, 1) both; }
}

/* ---------- Accordions (filter groups, mobile panels): animated height ----------
   Progressive: browsers without ::details-content simply open instantly. */
:root { interpolate-size: allow-keywords; }
.tf-catalog__group::details-content,
.tf-catalog__filter-panel::details-content {
  height: 0;
  overflow: clip;
  transition: height .25s ease, content-visibility .25s allow-discrete;
}
.tf-catalog__group[open]::details-content,
.tf-catalog__filter-panel[open]::details-content { height: auto; }
.tf-catalog__group > summary::after { transition: transform .25s ease; }

@keyframes tf-motion-drop {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .tf-product-hero .tf-product-hero__slide,
  .tf-product-hero .tf-product-hero__slide[hidden],
  .tf-catalog__group::details-content,
  .tf-catalog__filter-panel::details-content { transition: none; }
  .tf-header__mega[open] > .tf-mega { animation: none; }
  .tf-home-series__controls > .tf-home-series__sr-only,
  .tf-home-latest__controls > .tf-home-latest__sr-only { transition: none; }
}

/* ---------- Focus: rings for keyboard users only ----------
   Several components style `:focus`, so a mouse click left black/white/blue
   outlines on summaries, buttons, checkboxes and gallery controls. Mouse focus
   now shows nothing; keyboard focus keeps a clear, consistent ring. */
:where(a, button, summary, [tabindex], input[type="checkbox"], input[type="radio"], input[type="range"], select):focus:not(:focus-visible) {
  outline: none !important;
}
:where(a, button, summary, [tabindex]):focus-visible {
  outline: 2px solid #111;
  outline-offset: 3px;
  border-radius: 2px;
}
.tf-header :where(a, button, summary):focus-visible,
.tf-site-footer :where(a, button):focus-visible { outline-color: #fff; }
.tf-mega :where(a, button):focus-visible { outline-color: #111; }

/* Text fields: dark border + soft halo instead of the browser's blue ring. */
:where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="submit"]):not([type="button"]), select, textarea):focus {
  outline: none;
  border-color: #111;
  box-shadow: 0 0 0 3px rgba(0, 0, 0, .12);
  transition: border-color .15s ease, box-shadow .15s ease;
}

/* ---------- Polish: hover feedback that the home lacked entirely ---------- */
html { scroll-behavior: smooth; }

/* Outline CTAs fill on hover (black on white backgrounds). */
:where(.tf-home-latest__cta, .tf-home-xtreme__cta, .tf-home-videos__cta, .tf-home-catalog__cta, .tf-compatibility__submit:not(:disabled), .tf-home-apparel__buy) {
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
:where(a.tf-home-latest__cta, a.tf-home-xtreme__cta, a.tf-home-videos__cta, a.tf-home-catalog__cta, .tf-compatibility__submit:not(:disabled)):hover,
:where(a.tf-home-latest__cta, a.tf-home-xtreme__cta, a.tf-home-videos__cta, a.tf-home-catalog__cta, .tf-compatibility__submit:not(:disabled)):focus-visible {
  background-color: #111;
  border-color: #111;
  color: #fff;
}
a:hover > .tf-home-apparel__buy,
.tf-home-apparel__card:hover .tf-home-apparel__buy { background-color: #111; color: #fff; border-color: #111; }

/* Cards: gentle lift + image zoom. `scale` composes with the Figma crop transforms. */
:where(.tf-home-series__card, .tf-home-latest__card, .tf-home-videos__card, .tf-home-tradition__card, .tf-firearm-card a) {
  transition: transform .35s cubic-bezier(.2, .7, .2, 1), box-shadow .35s ease;
}
:where(.tf-home-series__card, .tf-home-latest__card, .tf-home-videos__card, .tf-home-tradition__card, .tf-firearm-card a) img {
  transition: scale .6s cubic-bezier(.2, .7, .2, 1), filter .3s ease;
}
@media (hover: hover) {
  /* Rail cards live in overflow-y:hidden scrollers: zoom only, no lift (it would be clipped). */
  :where(.tf-home-videos__card, .tf-home-tradition__card, .tf-firearm-card a):hover { transform: translateY(-4px); }
  :where(.tf-home-series__card, .tf-home-latest__card, .tf-home-videos__card, .tf-home-tradition__card, .tf-firearm-card a):hover img { scale: 1.04; }
  :where(.tf-home-videos__card, .tf-home-tradition__card):hover img { filter: brightness(1.06); }
  .tf-firearm-card a:hover .tf-firearm-card__media { box-shadow: 0 10px 24px rgba(0, 0, 0, .10); border-color: #cfcfcf; }
}
.tf-firearm-card__media { transition: box-shadow .35s ease, border-color .35s ease; }

/* Header navigation: underline that slides in (top-level items only). */
@media (min-width: 1001px) {
  .tf-header__navigation > a,
  .tf-header__navigation > details > summary {
    background-image: linear-gradient(currentColor, currentColor);
    background-repeat: no-repeat;
    background-position: 0 100%;
    background-size: 0 1px;
    transition: background-size .25s ease;
  }
  .tf-header__navigation > a:hover,
  .tf-header__navigation > details:not([open]) > summary:hover { background-size: 100% 1px; }
}

/* Sections fade up once when they scroll into view (set by site-motion.js). */
.tf-reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1); }
.tf-reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .tf-reveal { opacity: 1; transform: none; transition: none; }
  :where(.tf-home-series__card, .tf-home-latest__card, .tf-home-videos__card, .tf-home-tradition__card, .tf-firearm-card a),
  :where(.tf-home-series__card, .tf-home-latest__card, .tf-home-videos__card, .tf-home-tradition__card, .tf-firearm-card a) img { transition: none; }
  :where(.tf-home-videos__card, .tf-home-tradition__card, .tf-firearm-card a):hover { transform: none; }
  :where(.tf-home-series__card, .tf-home-latest__card, .tf-home-videos__card, .tf-home-tradition__card, .tf-firearm-card a):hover img { scale: none; }
}

@media print { .tf-reveal { opacity: 1 !important; transform: none !important; } }

/* Touch: text links reach the 24px minimum target (WCAG 2.2) without changing the look. */
@media (pointer: coarse) {
  .tf-site-footer a,
  .woocommerce-breadcrumb a,
  .tf-firearms-section__all,
  .tf-catalog__reset,
  .tf-fx-chips__reset,
  .tf-firearm-single__row dd a {
    display: inline-block;
    padding-block: 5px;
  }
  .tf-firearm-single__chip { padding-block: 6px; }
}

/* ---------- Square controls: the Figma uses sharp corners on every button and
   field (round shapes are only the slider dots and the series/size pills).
   Specificity kept above the component rules (e.g. .tf-catalog__filters input). ---------- */
.tf-catalog__filters .tf-fx-search input[type="search"],
.tf-catalog__filters .tf-fx-price__field input[type="text"],
.tf-catalog__filters .tf-fx-sort select,
.tf-catalog__filters input[type="text"],
.tf-catalog__filters select,
.tf-catalog__filters button,
.tf-catalog__filter-panel,
.tf-catalog__group fieldset,
.tf-catalog__filter-toggle .tf-fx-sort select,
.tf-fx-sortbar select,
.tf-compatibility input,
.tf-compatibility select,
.tf-product-single__data .tf-firearm-single__chip {
  border-radius: 0 !important;
}
body.woocommerce div.product form.cart .qty,
body.tanfoglio-local-product-route div.product .single_add_to_cart_button,
body.tanfoglio-local-product-route div.product div.summary,
.tf-contact-form__field input:not([type="checkbox"]),
.tf-contact-form__field textarea,
.tf-satisfaction-form input,
.tf-satisfaction-form select,
.tf-satisfaction-form textarea,
.tf-distributors select,
.email-contacts input {
  border-radius: 0 !important;
}

/* ---------- Consistent text-link behaviour across the site (WCAG 2.4.4). ---------- */
main :is(.wp-block-paragraph, .wp-block-list, .tf-catalog__group, .tf-catalog__count, .tf-product-technical, .tf-part-compat, .tf-firearm-single__row, .tf-fx-status) a {
  text-decoration: underline;
  text-underline-offset: 3px;
}
main :is(.wp-block-paragraph, .wp-block-list, .tf-catalog__group) a:hover,
main :is(.wp-block-paragraph, .wp-block-list, .tf-catalog__group) a:focus-visible {
  text-decoration-thickness: 2px;
}
main :is(.wp-block-paragraph, .wp-block-list) a { text-underline-offset: 3px; }

/* ---------- One breadcrumb style everywhere. ---------- */
.tf-breadcrumb, .woocommerce-breadcrumb {
  max-width: 1440px;
  margin: 0 auto;
  padding: 16px 16px 0;
  font: 400 13px/1.4 Inter, Arial, sans-serif;
  color: #666;
}
.tf-breadcrumb a, .woocommerce-breadcrumb a { color: inherit; text-decoration: none; }
.tf-breadcrumb a:hover, .tf-breadcrumb a:focus-visible,
.woocommerce-breadcrumb a:hover, .woocommerce-breadcrumb a:focus-visible { color: #000; text-decoration: underline; }
.tf-breadcrumb__sep { margin: 0 8px; color: #999; }