/* ============================================================
   Tri-State Mailing Equipment — custom CSS overrides
   ============================================================
   Tailwind utilities cover ~99% of the design. This file is for
   anything Tailwind can't easily express in a class.

   Keep this file SMALL. If you find yourself adding a lot here,
   prefer adding to the inline tailwind.config script in index.html
   instead.
   ============================================================ */

/* Hide focus outline only when user is using a mouse;
   keep it visible for keyboard navigation (a11y) */
:focus:not(:focus-visible) {
  outline: none;
}

/* Smooth scroll for in-page anchors (#products, #contact, #manufacturers) */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 10rem; /* offset for sticky header (~148px = utility bar + navy nav) */
}

/* Native <details> / <summary> in mobile nav — remove default disclosure triangle, replace with chevron */
details > summary {
  list-style: none;
}
details > summary::-webkit-details-marker {
  display: none;
}
details > summary::after {
  content: "▾";
  float: right;
  margin-right: 0.5rem;
  transition: transform 0.15s ease;
}
details[open] > summary::after {
  transform: rotate(180deg);
}

/* Print styles — keep contact info visible, hide nav and CTAs */
@media print {
  nav, .sticky, button {
    display: none !important;
  }
  body {
    color: #000;
  }
}

/* Respect users who've opted out of motion — show poster (or solid bg) instead of the looping hero video */
@media (prefers-reduced-motion: reduce) {
  .hero-video {
    display: none;
  }
}

/* ============================================================
   Manufacturers marquee — auto-scrolling infinite logo strip
   ============================================================
   The track contains the 18 logos twice (visible set + duplicate
   with aria-hidden). translateX(-50%) shifts the track exactly
   one set's width, returning to a visually-identical start position
   so the loop is invisible.
   ============================================================ */
.marquee-track {
  width: max-content;
}

@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.animate-marquee {
  animation: marquee 60s linear infinite;
}

.marquee-viewport:hover .animate-marquee,
.marquee-viewport:focus-within .animate-marquee {
  animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
  .animate-marquee {
    animation: none;
  }
}

/* ============================================================
   Video lightbox — native <dialog> with semi-opaque backdrop
   ============================================================ */
dialog#video-lightbox {
  position: fixed;
  inset: 0;
  margin: auto;
  border: 0;
  padding: 0;
  background: transparent;
  /* fit-content — dialog shrink-wraps to the video's actual rendered size (handles portrait + landscape) */
  width: fit-content;
  max-width: 90vw;
  max-height: 90vh;
  overflow: visible; /* keep close button visible above the dialog */
}

dialog#video-lightbox::backdrop {
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(4px);
}

dialog#video-lightbox video {
  display: block;
  /* respect natural aspect; cap at viewport so portrait + landscape both fit */
  width: auto;
  height: auto;
  max-width: 90vw;
  max-height: 90vh;
  background: #000;
}

.lightbox-close {
  position: absolute;
  top: -2.5rem;
  right: 0;
  background: transparent;
  color: #ffffff;
  font-size: 2rem;
  line-height: 1;
  border: 0;
  cursor: pointer;
  padding: 0.25rem 0.5rem;
}

.lightbox-close:hover,
.lightbox-close:focus-visible {
  color: #3c83f6; /* brand-navy-light */
}

/* ============================================================
   Image lightbox — click product gallery photos to zoom
   Same dialog pattern as the video lightbox above
   ============================================================ */
dialog#image-lightbox {
  position: fixed;
  inset: 0;
  margin: auto;
  border: 0;
  padding: 0;
  background: transparent;
  width: fit-content;
  max-width: 90vw;
  max-height: 90vh;
  overflow: visible;
}

dialog#image-lightbox::backdrop {
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(4px);
}

dialog#image-lightbox img {
  display: block;
  width: auto;
  height: auto;
  max-width: 90vw;
  max-height: 90vh;
  background: #fff;
}

.lightbox-prev,
.lightbox-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.55);
  color: #ffffff;
  font-size: 2.25rem;
  line-height: 1;
  border: 0;
  cursor: pointer;
  padding: 0.5rem 1rem;
  z-index: 10;
}

.lightbox-prev { left: 0.5rem; }
.lightbox-next { right: 0.5rem; }

.lightbox-prev:hover,
.lightbox-next:hover,
.lightbox-prev:focus-visible,
.lightbox-next:focus-visible {
  background: #3c83f6; /* brand-navy-light */
}

.lightbox-counter {
  position: absolute;
  top: -2.5rem;
  left: 0;
  color: #ffffff;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.05em;
}

.lightbox-prev[hidden],
.lightbox-next[hidden],
.lightbox-counter[hidden] {
  display: none;
}