/* =========================================================
   KnitYY Knitwear — Static Site
   Global custom styles (complements Tailwind CSS v3)
   Brand: low-key B2B factory style, deep navy + slate gray
   ========================================================= */

/* Inter font (外贸 standard sans-serif) */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

:root {
  --yy-navy: #0f2742;     /* primary deep navy */
  --yy-navy-2: #1a3a5c;  /* secondary navy */
  --yy-slate: #1f2937;   /* deep slate gray */
  --yy-slate-2: #374151; /* mid slate gray */
  --yy-muted: #6b7280;   /* muted text */
  --yy-accent: #2563eb;  /* restrained blue accent */
  --yy-bg: #f8fafc;      /* page background */
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  color: var(--yy-slate);
  background-color: var(--yy-bg);
  /* prevent horizontal scroll on mobile */
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
}

/* Headings inherit brand weight */
h1, h2, h3, h4 {
  font-family: 'Inter', system-ui, sans-serif;
  letter-spacing: -0.02em;
}

/* ---------- Image placeholders ----------
   Production: replace .yy-ph blocks with real <img> tags
   (compressed factory / sweater / yarn photos).
   Each placeholder is annotated with its intended use. */
.yy-ph {
  position: relative;
  width: 100%;
  background:
    linear-gradient(135deg, #1a3a5c 0%, #0f2742 60%, #1f2937 100%);
  color: #cbd5e1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.yy-ph::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,.06) 0, transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(255,255,255,.05) 0, transparent 45%);
  pointer-events: none;
}
.yy-ph span {
  position: relative;
  z-index: 1;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: .72rem;
  font-weight: 500;
  text-align: center;
  padding: 0 .75rem;
}

/* Hero (full-bleed factory photo with navy overlay for text legibility) */
.yy-hero {
  min-height: 520px;
  background:
    linear-gradient(180deg, rgba(15,39,66,.45) 0%, rgba(15,39,66,.82) 100%),
    url('../images/hero-factory.jpg?v=20261009') center / cover no-repeat;
}

/* ---------- Buttons ---------- */
.yy-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .8rem 1.6rem;
  font-weight: 600;
  font-size: .95rem;
  border-radius: 2px;
  transition: background-color .2s ease, color .2s ease, transform .2s ease;
}
.yy-btn-primary {
  background-color: var(--yy-navy);
  color: #fff;
}
.yy-btn-primary:hover { background-color: #0a1d33; }
.yy-btn-outline {
  border: 1px solid #cbd5e1;
  color: var(--yy-navy);
  background: transparent;
}
.yy-btn-outline:hover { border-color: var(--yy-navy); background: var(--yy-navy); color:#fff; }

/* Touch-friendly tap targets on mobile */
@media (max-width: 767px) {
  .yy-btn { min-height: 48px; width: 100%; }
}

/* ---------- Cards ---------- */
.yy-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  transition: box-shadow .2s ease, transform .2s ease;
}
.yy-card:hover {
  box-shadow: 0 10px 30px -12px rgba(15,39,66,.25);
  transform: translateY(-2px);
}

/* ---------- Navigation ---------- */
.yy-nav-link {
  position: relative;
  font-weight: 500;
  color: #334155;
  transition: color .2s ease;
}
.yy-nav-link:hover { color: var(--yy-navy); }
.yy-nav-link.is-active {
  color: var(--yy-navy);
}
.yy-nav-link.is-active::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -6px;
  height: 2px;
  background: var(--yy-navy);
}
/* mobile menu: right slide-in drawer, translucent */
.yy-mobile-menu {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: min(260px, 76vw);
  z-index: 45;
  background: rgba(255, 255, 255, .82);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-left: 1px solid rgba(226, 232, 240, .8);
  box-shadow: -12px 0 40px rgba(15, 39, 66, .18);
  transform: translateX(100%);
  visibility: hidden;
  transition: transform .3s ease, visibility 0s linear .3s;
}
.yy-mobile-menu.is-open {
  transform: translateX(0);
  visibility: visible;
  transition: transform .3s ease;
}
.yy-mobile-menu .yy-container { padding-top: 4.5rem; padding-bottom: 1.5rem; }
/* keep the close (X) button above the drawer panel */
header [data-nav-toggle] { position: relative; z-index: 50; }
.yy-nav-overlay {
  position: fixed;
  inset: 0;
  z-index: 39;
  background: rgba(15, 39, 66, .45);
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease, visibility 0s linear .3s;
}
.yy-nav-overlay.is-visible {
  opacity: 1;
  visibility: visible;
  transition: opacity .3s ease;
}

/* ---------- Cookie banner ---------- */
.yy-cookie {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 50;
  background: #0f2742;
  color: #e2e8f0;
  transform: translateY(100%);
  transition: transform .35s ease;
}
.yy-cookie.is-visible { transform: translateY(0); }
@media (max-width: 767px) {
  .yy-cookie { padding: 1rem; }
  .yy-cookie .yy-cookie-actions { width: 100%; }
}

/* ---------- Form ---------- */
.yy-input {
  width: 100%;
  border: 1px solid #cbd5e1;
  background: #fff;
  padding: .7rem .9rem;
  font-size: 1rem;
  border-radius: 2px;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.yy-input:focus {
  outline: none;
  border-color: var(--yy-navy);
  box-shadow: 0 0 0 3px rgba(15,39,66,.12);
}
@media (max-width: 767px) {
  .yy-input { font-size: 16px; /* avoids iOS zoom */ }
}

/* ---------- Utility: max width container ---------- */
.yy-container { max-width: 1200px; margin: 0 auto; padding: 0 1.25rem; }

/* ---------- Fade-in on load (subtle, performance-first) ---------- */
.yy-fade { opacity: 0; transform: translateY(8px); }
.yy-fade.is-in { opacity: 1; transform: none; transition: opacity .5s ease, transform .5s ease; }

/* ---------- Product card: front/back flip ----------
   Desktop: hover shows back view. Touch: tap toggles (.is-back via main.js). */
.yy-flip-imgs { position: relative; display: block; }
.yy-flip .yy-img-front,
.yy-flip .yy-img-back { transition: opacity .25s ease; }
.yy-flip .yy-img-back {
  position: absolute;
  inset: 0;
  opacity: 0;
}
@media (hover: hover) {
  .yy-flip:hover .yy-img-front,
  .yy-flip.is-back .yy-img-front { opacity: 0; }
  .yy-flip:hover .yy-img-back,
  .yy-flip.is-back .yy-img-back { opacity: 1; }
}
@media (hover: none) {
  .yy-flip.is-back .yy-img-front { opacity: 0; }
  .yy-flip.is-back .yy-img-back { opacity: 1; }
}

/* ---------- Works category filter ---------- */
.yy-cats { display: flex; gap: .5rem; overflow-x: auto; padding-bottom: .25rem; }
.yy-cat-btn {
  flex: 0 0 auto;
  padding: .5rem .9rem;
  border: 1px solid #e5e7eb;
  background: #fff;
  border-radius: 2px;
  font-size: .88rem;
  font-weight: 500;
  color: #374151;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color .2s ease, background-color .2s ease, color .2s ease;
}
.yy-cat-btn span { color: #9ca3af; font-weight: 400; }
.yy-cat-btn:hover { border-color: var(--yy-navy); color: var(--yy-navy); }
.yy-cat-btn.is-active { background: var(--yy-navy); border-color: var(--yy-navy); color: #fff; }
.yy-cat-btn.is-active span { color: #cbd5e1; }
@media (min-width: 1024px) {
  .yy-cats { flex-direction: column; overflow: visible; }
  .yy-cat-btn { width: 100%; text-align: left; }
}
[data-grid] { scroll-margin-top: 90px; }

/* works filter bar: sticky under header on mobile */
@media (max-width: 1023px) {
  .yy-filterbar {
    position: sticky;
    top: 64px;
    z-index: 30;
    background: rgba(248, 250, 252, .97);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    margin: 0 -1.25rem;
    padding: .5rem 1.25rem .65rem;
    border-bottom: 1px solid #e5e7eb;
  }
  .yy-filterbar > p { margin: .5rem 0 .4rem; font-size: .68rem; }
  .yy-filterbar > p:first-child { margin-top: 0; }
  .yy-filterbar .yy-cats { gap: .4rem; }
  .yy-filterbar .yy-cat-btn { padding: .4rem .7rem; font-size: .8rem; }
}