/* editor.productions — custom styles (on top of Tailwind CDN) */

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
}

.font-display {
  font-family: 'Anton', ui-sans-serif, system-ui, sans-serif;
}

/* subtle film-grain overlay used on hero + about images */
.grain {
  position: relative;
}
.grain::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.06;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* infinite marquee ticker */
.marquee-track {
  animation: marquee 30s linear infinite;
  width: max-content;
}
@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .marquee-track { animation: none; }
  * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* portfolio video cards */
.archive-grid {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 0.75rem;
}
@media (min-width: 768px) {
  .archive-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-auto-rows: 280px;
    gap: 1rem;
  }
}
.archive-card { min-height: 220px; }

/* global keyboard-focus visibility fallback (belt-and-braces beyond the
   per-element focus-visible classes already in the markup) */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 3px solid #D1FF00 !important;
  outline-offset: 2px !important;
}

/* mobile nav */
#mobile-menu {
  display: none;
}
#mobile-menu.open {
  display: flex;
}

/* ============================= */
/* Accessibility widget & panel   */
/* ============================= */
#a11y-panel {
  display: none;
}
#a11y-panel.open {
  display: flex;
}

.a11y-toggle[aria-pressed="true"] {
  background: #D1FF00;
  color: #080808;
  border-color: #D1FF00;
}

/* accessibility statement modal */
#a11y-statement-overlay.open {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow-y: auto;
}

/* ---- real, functioning accessibility modes ---- */

/* high contrast: strip the site's palette down to a pure black/white/underlined
   theme, which is the pattern most screen-magnifier / low-vision users expect */
body.a11y-high-contrast,
body.a11y-high-contrast * {
  background-color: #000 !important;
  background-image: none !important;
  color: #fff !important;
  border-color: #fff !important;
  box-shadow: none !important;
  text-shadow: none !important;
}
body.a11y-high-contrast a,
body.a11y-high-contrast button {
  text-decoration: underline !important;
  text-underline-offset: 3px;
}
body.a11y-high-contrast img,
body.a11y-high-contrast iframe {
  filter: grayscale(1) contrast(1.2) !important;
}
body.a11y-high-contrast .grain::after {
  display: none !important;
}

/* grayscale mode (independent of high contrast).
   Applied to header/main individually rather than body: a `filter` on an
   ancestor makes it the containing block for any `position: fixed`
   descendants (CSS spec), which would otherwise rip the floating WhatsApp
   button and the accessibility widget itself off the viewport. */
body.a11y-grayscale header,
body.a11y-grayscale main {
  filter: grayscale(1);
}

/* underline every link so they don't rely on color alone */
body.a11y-underline-links a {
  text-decoration: underline !important;
  text-underline-offset: 3px;
}

/* plain, highly legible font in place of the display/stylized fonts */
body.a11y-readable-font,
body.a11y-readable-font * {
  font-family: Arial, Helvetica, sans-serif !important;
  letter-spacing: normal !important;
}

/* fully stop all motion on demand, regardless of OS-level setting */
body.a11y-stop-animations,
body.a11y-stop-animations * {
  animation: none !important;
  transition: none !important;
  scroll-behavior: auto !important;
}

/* enlarged cursor for low-vision / motor-impaired users — applied to every
   element since several already set an explicit `cursor: pointer` of their own */
body.a11y-big-cursor,
body.a11y-big-cursor * {
  cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 24 24"><path d="M3 2l7.07 18 2.51-7.39L20 10.07z" fill="black" stroke="white" stroke-width="1.5" stroke-linejoin="round"/></svg>') 2 2, auto !important;
}