/* ═══════════════════════════════════════════════════════════
   光影織藝 Design System — Unified Spacing & Typography
   ═══════════════════════════════════════════════════════════ */

:root {
  /* ── Spacing Scale (4px base) ── */
  --space-1: 4px;    /* micro */
  --space-2: 8px;    /* tight */
  --space-3: 12px;   /* compact */
  --space-4: 16px;   /* base */
  --space-5: 20px;
  --space-6: 24px;   /* comfortable */
  --space-8: 32px;   /* section-inner */
  --space-10: 40px;
  --space-12: 48px;  /* section-gap-sm */
  --space-16: 64px;  /* section-gap-md */
  --space-20: 80px;  /* section-gap */
  --space-24: 96px;  /* section-gap-lg */
  --space-32: 128px; /* hero-padding */

  /* ── Typography Scale (1.25 ratio) ── */
  --text-xs: 0.75rem;    /* 12px — captions, labels */
  --text-sm: 0.875rem;   /* 14px — small body, meta */
  --text-base: 1rem;     /* 16px — body */
  --text-lg: 1.125rem;   /* 18px — large body */
  --text-xl: 1.25rem;    /* 20px — card titles */
  --text-2xl: 1.5rem;    /* 24px — section subtitles */
  --text-3xl: 1.875rem;  /* 30px — section titles */
  --text-4xl: 2.25rem;   /* 36px — page titles */
  --text-5xl: 3rem;      /* 48px — hero titles */
  --text-6xl: 3.75rem;   /* 60px — display */

  /* ── Line Heights ── */
  --leading-none: 1;
  --leading-tight: 1.15;
  --leading-snug: 1.3;
  --leading-normal: 1.6;
  --leading-relaxed: 1.8;

  /* ── Letter Spacing ── */
  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.02em;
  --tracking-wider: 0.05em;
  --tracking-widest: 0.1em;

  /* ── Stitch Design System Colors (unified) ── */
  --lsa-gold: #785600;
  --lsa-gold-light: #f7bd48;
  --lsa-gold-hover: #5d4200;
  --lsa-charcoal: #1b1c1a;
  --lsa-ivory: #fbf9f5;
  --lsa-surface: #f5f3ef;
  --lsa-surface-high: #efeeea;
  --lsa-text: #1b1c1a;
  --lsa-text-secondary: #5f5e5e;
  --lsa-text-muted: #817563;
  --lsa-border: #d3c4af;

  /* ── Transition ── */
  --ease-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.6, 1);
  --duration-fast: 150ms;
  --duration-normal: 300ms;
  --duration-slow: 500ms;
}

/* ── Global Typography Improvements ── */
body {
  font-family: 'Noto Sans TC', sans-serif;
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  letter-spacing: var(--tracking-wide);
  color: var(--lsa-text);
}

h1, h2, h3 {
  font-family: 'Noto Sans TC', sans-serif;
  font-weight: 500;
  letter-spacing: var(--tracking-tight);
}

h4, h5, h6 {
  font-family: 'Noto Sans TC', sans-serif;
  font-weight: 500;
}

/* ── Button System ── */
.lsa-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--lsa-gold);
  color: #fff;
  padding: var(--space-3) var(--space-6);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: var(--tracking-wider);
  border: none;
  cursor: pointer;
  transition: all var(--duration-normal) var(--ease-out);
  text-decoration: none;
}
.lsa-btn-primary:hover {
  background: var(--lsa-gold-hover);
  transform: translateY(-1px);
  box-shadow: 0 4px 20px rgba(120,86,0,0.2);
}

.lsa-btn-outline {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: transparent;
  color: var(--lsa-text);
  padding: var(--space-3) var(--space-6);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  border: 1px solid var(--lsa-border);
  cursor: pointer;
  transition: all var(--duration-normal) var(--ease-out);
  text-decoration: none;
}
.lsa-btn-outline:hover {
  border-color: var(--lsa-gold);
  color: var(--lsa-gold);
}

/* ── Focus Styles (Accessibility) ── */
*:focus-visible {
  outline: 2px solid var(--lsa-gold);
  outline-offset: 2px;
}

/* ── Reduced Motion ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ===== Nav CTA Button ===== */
.nav-cta-btn {
    display: inline-block;
    background: #785600;
    color: #fff !important;
    padding: 10px 24px;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    border-radius: 2px;
    text-decoration: none !important;
    white-space: nowrap;
    transition: background 0.3s, transform 0.2s;
    margin-left: 16px;
}
.nav-cta-btn:hover {
    background: #5d4200;
    transform: translateY(-1px);
}
@media (max-width: 768px) {
    .nav-cta-btn {
        margin: 16px 0 0;
        text-align: center;
        display: block;
    }
}

/* ═══════════════════════════════════════════════════════════
   Animation Support CSS (GSAP)
   ═══════════════════════════════════════════════════════════ */

/* Smooth scroll for the entire page */
html { scroll-behavior: smooth; }

/* CTA button shine effect on hover */
.lsa-btn-primary,
button[class*="bg-primary"] {
  position: relative;
  overflow: hidden;
}
.lsa-btn-primary::after,
button[class*="bg-primary"]::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
  transition: left 0.6s ease;
}
.lsa-btn-primary:hover::after,
button[class*="bg-primary"]:hover::after {
  left: 100%;
}

/* ===== Service Flow Page — Reduce Whitespace ===== */
.page-template-page-service-flow .section {
    padding: clamp(48px, 6vw, 80px) 0;
}
.page-template-page-service-flow .sf-steps-section {
    padding: 0 0 clamp(48px, 6vw, 80px);
}
.page-template-page-service-flow .sf-step {
    padding: 32px 0 !important;
}
.page-template-page-service-flow .sf-cta-section {
    padding: clamp(48px, 6vw, 80px) 0;
}
.page-template-page-service-flow .page-hero {
    min-height: 280px;
}

/* ═══════════════════════════════════════════════════════════
   Accessibility — Skip Navigation Link
   ═══════════════════════════════════════════════════════════ */
.skip-to-content {
  position: absolute;
  top: -40px;
  left: 0;
  background: #785600;
  color: #fff;
  padding: 8px 16px;
  z-index: 99999;
  transition: top 0.3s;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.875rem;
}
.skip-to-content:focus {
  top: 0;
  outline: 2px solid #785600;
  outline-offset: 2px;
}

/* ═══════════════════════════════════════════════════════════
   Accessibility — Touch Targets (min 44x44px)
   ═══════════════════════════════════════════════════════════ */
a, button, input, select, textarea {
  min-height: 44px;
}
nav a, nav .nav-label {
  padding: 12px 16px;
}
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="search"],
input[type="url"],
input[type="number"],
select,
textarea {
  min-height: 44px;
  padding: 10px 12px;
}

/* ═══════════════════════════════════════════════════════════
   Accessibility — Screen Reader Only Utility
   ═══════════════════════════════════════════════════════════ */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ═══════════════════════════════════════════════════════════
   Accessibility — High Contrast Focus for Buttons
   ═══════════════════════════════════════════════════════════ */
.btn-cta:focus-visible,
.nav-cta-btn:focus-visible,
.lsa-btn-primary:focus-visible,
.lsa-btn-outline:focus-visible,
.line-float:focus-visible {
  outline: 2px solid #785600;
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(120, 86, 0, 0.25);
}

/* ═══════════════════════════════════════════════════════════
   UX Fixes — Product Hero, Animations, Carousel
   ═══════════════════════════════════════════════════════════ */

/* Fix 2: Product page hero — show at natural height */
.stitch-product-detail section:first-child {
  max-height: none !important;
  min-height: 0 !important;
  overflow: visible !important;
}

/* Fix 4: Override old section-fade that conflicts with GSAP system */
.section-fade {
  opacity: 1 !important;
  transform: none !important;
}

/* Fix 6: Carousel clipping — add breathing room for last card */
.stitch-product-detail [class*="overflow-x"] {
  padding-right: 48px;
}

/* Fix: Mobile menu white-on-white text */
@media (max-width: 768px) {
  .main-nav.active {
    background: #1b1c1a !important;
  }
  .main-nav.active a,
  .main-nav.active .nav-label,
  .main-nav.active .nav-cta-btn {
    color: rgba(255,255,255,0.85) !important;
  }
  .main-nav.active .nav-cta-btn {
    background: #785600 !important;
    color: #fff !important;
  }
  .main-nav.active .dropdown-menu a {
    color: rgba(255,255,255,0.7) !important;
  }
}

/* ═══════════════════════════════════════════
   Fix: Product page layout improvements
   ═══════════════════════════════════════════ */

/* Product page hero - no clipping */
.stitch-product-detail section:first-child {
  max-height: none !important;
  min-height: 0 !important;
  overflow: visible !important;
}
.stitch-product-detail section:first-child > div {
  max-height: none !important;
  overflow: visible !important;
}

/* Reduce inter-section padding (Stitch py-32=128px -> 64px) */
.stitch-product-detail section {
  padding-top: 64px !important;
  padding-bottom: 64px !important;
}
.stitch-product-detail section:first-child {
  padding: 0 !important;
}

/* Product overview - reduce top padding */
.stitch-product-detail section:nth-child(2) {
  padding-top: 32px !important;
}

/* Ensure two-column layout works on product overview */
.stitch-product-detail .grid.lg\:grid-cols-2 {
  gap: 32px !important;
}

/* Related products - fix image aspect ratio */
.stitch-product-detail .group .aspect-\[3\/4\] img,
.stitch-product-detail .group .overflow-hidden img {
  object-fit: cover !important;
  width: 100% !important;
  height: 100% !important;
}

/* Fix: Remove theme-level CTA that duplicates Stitch CTA on product pages */
.page-template-page-catalog .pp-cta,
.page-template-page-catalog > .cta-section {
  display: none !important;
}

/* Knowledge base cards - no special first-child override */
.kb-card-img {
  min-height: 200px;
}
.kb-card-img > div {
  min-height: 200px;
}


/* Fix: Knowledge base cards GSAP animation stuck — force visible */
.kb-grid,
.kb-grid .kb-card {
  opacity: 1 !important;
  transform: none !important;
  translate: none !important;
}
/* ═══════════════════════════════════════════
   Fix: Comparison table visibility
   Tailwind text colors match background, force override
   ═══════════════════════════════════════════ */
.lsa-compare-wrap,
.lsa-compare-wrap * {
  color: #1b1c1a !important;
  opacity: 1 !important;
  visibility: visible !important;
}
.lsa-compare-wrap table {
  width: 100% !important;
  border-collapse: collapse !important;
  background: #fff !important;
  font-size: 0.9rem !important;
}
.lsa-compare-wrap th {
  background: #f5f3ef !important;
  color: #785600 !important;
  font-weight: 600 !important;
  padding: 12px 16px !important;
  border-bottom: 2px solid #d3c4af !important;
  text-align: left !important;
  font-family: 'Noto Sans TC', sans-serif !important;
  font-size: 0.8rem !important;
  letter-spacing: 0.05em !important;
}
.lsa-compare-wrap td {
  padding: 10px 16px !important;
  border-bottom: 1px solid rgba(211,196,175,0.3) !important;
  color: #1b1c1a !important;
  background: #fff !important;
}
.lsa-compare-wrap tr:hover td {
  background: #faf8f5 !important;
}
.lsa-compare-wrap a {
  color: #785600 !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}
.lsa-compare-wrap a:hover {
  text-decoration: underline !important;
}

/* Also fix the filter tabs visibility */
.lsa-filter-tabs,
.lsa-filter-tabs * {
  opacity: 1 !important;
  visibility: visible !important;
}

/* Fix the compare section title */
.lsa-compare-section,
.lsa-compare-section * {
  opacity: 1 !important;
  visibility: visible !important;
  color: #1b1c1a !important;
}
.lsa-compare-section h2 {
  color: #1b1c1a !important;
  font-family: 'Noto Sans TC', sans-serif !important;
}

/* ═══════════════════════════════════════════
   NUCLEAR FIX: Force all Stitch content visible
   GSAP+Tailwind CDN combo causes invisible elements
   ═══════════════════════════════════════════ */
.page-template-page-catalog #main-content .stitch-product-detail *,
.page-template-page-catalog #main-content .lsa-catalog *,
.page-template-page-catalog #main-content .kb-wrap *,
.page-template-page-catalog #main-content section *,
.page-template-page-catalog #main-content div,
.page-template-page-catalog #main-content table,
.page-template-page-catalog #main-content th,
.page-template-page-catalog #main-content td,
.page-template-page-catalog #main-content h1,
.page-template-page-catalog #main-content h2,
.page-template-page-catalog #main-content h3,
.page-template-page-catalog #main-content p,
.page-template-page-catalog #main-content a,
.page-template-page-catalog #main-content span,
.page-template-page-catalog #main-content button,
.page-template-page-catalog #main-content img {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}

/* ═══════════════════════════════════════════
   Fix: Dropdown menu text color
   ═══════════════════════════════════════════ */
.dropdown-menu {
  background: #fff !important;
}
.dropdown-menu a {
  color: #1b1c1a !important;
  display: block !important;
  padding: 8px 16px !important;
}
.dropdown-menu a.submenu-parent {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
}
.dropdown-menu a:hover {
  color: #785600 !important;
  background: #f5f3ef !important;
}
.nav-dropdown .dropdown-menu {
  background: #fff !important;
  border: 1px solid rgba(0,0,0,0.08) !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.08) !important;
}

/* ═══════════════════════════════════════════
   Font override: force Noto Sans TC everywhere
   Overrides inline styles from post content
   ═══════════════════════════════════════════ */
.font-headline,
.font-headline *,
.font-serif,
.font-serif *,
[class*="serif"],
body .font-headline,
body .font-serif {
    font-family: "Noto Sans TC", sans-serif !important;
}
body, h1, h2, h3, h4, h5, h6, p, a, span, div, li, td, th, button, input, textarea, select {
    font-family: "Noto Sans TC", sans-serif !important;
}