/*
  Vazirmatn — self-hosted preferred (place the .woff2 files in
  app/static/fonts/, see app/static/fonts/README.txt). Until you've
  added the real files, this falls back to the jsDelivr CDN copy so
  the site still renders correctly.
*/
@font-face {
  font-family: 'Vazirmatn';
  src: url('/static/fonts/Vazirmatn-Regular.woff2') format('woff2'),
       url('https://cdn.jsdelivr.net/gh/rastikerdar/vazirmatn@v33.003/fonts/webfonts/Vazirmatn-Regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Vazirmatn';
  src: url('/static/fonts/Vazirmatn-Medium.woff2') format('woff2'),
       url('https://cdn.jsdelivr.net/gh/rastikerdar/vazirmatn@v33.003/fonts/webfonts/Vazirmatn-Medium.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: 'Vazirmatn';
  src: url('/static/fonts/Vazirmatn-Bold.woff2') format('woff2'),
       url('https://cdn.jsdelivr.net/gh/rastikerdar/vazirmatn@v33.003/fonts/webfonts/Vazirmatn-Bold.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}

/* Alpine.js: hide elements with x-cloak until Alpine has initialized */
[x-cloak] { display: none !important; }

/* ===== Denim theming ===== */

/* Subtle twill-weave texture — a fine diagonal crosshatch reminiscent of
   denim fabric, used as a background overlay on dark (navbar/hero)
   sections. Very low opacity so it reads as texture, not a pattern. */
.denim-texture {
  background-image:
    repeating-linear-gradient(45deg, rgba(255,255,255,0.05) 0, rgba(255,255,255,0.05) 1px, transparent 1px, transparent 6px),
    repeating-linear-gradient(-45deg, rgba(0,0,0,0.12) 0, rgba(0,0,0,0.12) 1px, transparent 1px, transparent 6px);
}

/* Same weave, lighter — for use on light denim-wash surfaces */
.denim-texture-light {
  background-image:
    repeating-linear-gradient(45deg, rgba(37,65,95,0.05) 0, rgba(37,65,95,0.05) 1px, transparent 1px, transparent 6px),
    repeating-linear-gradient(-45deg, rgba(37,65,95,0.08) 0, rgba(37,65,95,0.08) 1px, transparent 1px, transparent 6px);
}

/* Dashed "stitch line" accent — used under headings / around cards to
   evoke contrast-stitching on denim.
   NOTE: hardcoded hex, not theme('colors.stitch') — the Tailwind Play CDN
   only compiles utility classes it finds in the page's HTML; it does not
   process external stylesheets, so theme() calls in here would silently
   resolve to nothing. */
.stitch-line {
  border-bottom: 2px dashed #c07a3e;
}

/* ===== Accessible focus states =====
   Applies everywhere by default (visible only for keyboard/focus-visible
   navigation, not on mouse click) so every link/button/input has a clear,
   consistent focus indicator without needing a utility class on each one. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid #25415f;
  outline-offset: 2px;
  border-radius: 2px;
}

/* ===== Minimal scroll-reveal ===== */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Respect reduced-motion preferences: keep the fade, drop the slide and
   any other motion (hero crossfade, hover scale) down to an instant/short
   fade so nothing moves for people who've asked their system not to. */
@media (prefers-reduced-motion: reduce) {
  .reveal {
    transform: none;
    transition: opacity 0.3s ease;
  }
  * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}