/*
Theme Name:   FUREBURG (2025 Child)
Template:     twentytwentyfive
Version:      1.0.0
Description:  FUREBURG Mall 子主題 — 基於 Twenty Twenty-Five，疊加中國紅電商風格。
               Smart Home Appliances E-commerce for Hong Kong & Singapore.
Author:       FUREBURG
Text Domain:   fureburg-twentyfive
License:       GNU General Public License v2 or later
*/

/* ============================================
   FUREBURG Design System Override for Twenty Twenty-Five
   
   Strategy: Override 2025's theme.json CSS custom properties
   with FUREBURG brand tokens (China Red accent).
   
   2025 uses these variable paths:
   - --wp--preset--color--* (colors)
   - --wp--preset--font-family--* (fonts)  
   - --wp--preset--font-size--* (font sizes)
   - --wp--preset--spacing--* (spacing)
   - --wp--preset--shadow--* (shadows)
   ============================================ */

/* --- 1. COLOR OVERRIDES: China Red Accent Palette --- */
:root,
body {
  /* Brand: Replace 2025's default palette with FUREBURG red */
  --wp--preset--color--primary: #dc2626;           /* CTA buttons, prices */
  --wp--preset--color--secondary: #1a1a2e;        /* Headings, nav text */
  --wp--preset--color--foreground: #1a1a2e;       /* Body text - deep navy */
  --wp--preset--color--background: #ffffff;
  --wp--preset--color--background-alt: #f8fafc;    /* Section alternation */

  /* Accent variants */
  --wp--preset--color--accent-1: #dc2626;         /* Main red */
  --wp--preset--color--accent-2: #b91c1c;         /* Dark red / active */
  --wp--preset--color--accent-3: #ef4444;         /* Light red / hover */
  --wp--preset--color--accent-4: #fecaca;         /* Subtle red bg */
  --wp--preset--color--accent-5: rgba(220,38,38,.06); /* Tinted background */

  /* Functional colors */
  --wp--preset--color--success: #10b981;
  --wp--preset--color--warning: #f59e0b;
  --wp--preset--color--error: #ef4444;

  /* Text hierarchy */
  --wp--preset--color--contrast: #1a1a2e;
  --wp--preset--color--contrast-2: #374151;
  --wp--preset--color--contrast-3: #64748b;
  --wp--preset--color--contrast-4: #94a3b8;

  /* Border & divider */
  --wp--custom--color--border: #e2e8f0;
  --wp--custom--color--divider: #f1f5f9;
}

/* --- 2. TYPOGRAPHY: Modern Sans-Serif Stack --- */
:root {
  --wp--preset--font-family--heading:
    'DM Sans', 'Noto Sans TC', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --wp--preset--font-family--body:
    'Geist', 'Noto Sans HK', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* --- 3. BUTTONS: Red CTA Style with Glow Effect --- */
.wp-block-button__link,
button,
input[type="submit"],
.wc-block-components-button,
.woocommerce .button {
  border-radius: var(--radius-md, 12px);
  font-weight: 600;
  letter-spacing: -0.01em;
  transition: all .2s cubic-bezier(.16,1,.3,1);
}

/* Primary / Fill button = Red */
.is-style-fill .wp-block-button__link,
.wp-block-button.is-style-fill .wp-block-button__link {
  background: linear-gradient(135deg, #dc2626, #ef4444);
  color: #fff;
  border: none;
  box-shadow: 0 4px 20px rgba(220,38,38,.25);
}
.is-style-fill .wp-block-button__link:hover,
.wp-block-button.is-style-fill .wp-block-button__link:hover {
  box-shadow: 0 8px 32px rgba(220,38,38,.35);
  transform: translateY(-1px);
  background: linear-gradient(135deg, #b91c1c, #dc2626);
}

/* Outline button */
.is-style-outline .wp-block-button__link,
.wp-block-button.is-style-outline .wp-block-button__link {
  color: #dc2626;
  border: 2px solid #dc2626;
  background: transparent;
}
.is-style-outline .wp-block-button__link:hover,
.wp-block-button.is-style-outline .wp-block-button__link:hover {
  background: rgba(220,38,38,.06);
  transform: translateY(-1px);
}

/* --- 4. HEADINGS: Bold Navy with Tight Tracking --- */
h1, h2, h3, h4, h5, h6,
.wp-block-heading,
.is-style-fureburg-hero {
  color: #1a1a2e;
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.15;
}

.is-style-fureburg-hero {
  font-size: clamp(1.75rem, 4vw, 3rem);
  background: linear-gradient(135deg, #1a1a2e 30%, #dc2626 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* --- 5. CARDS & SECTIONS: Clean Spacious Look --- */
.wp-block-group,
.wp-block-cover,
.wp-block-columns {
  border-radius: var(--radius-lg, 20px);
}

/* Pain points cards */
.pain-points .wp-block-column {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: var(--radius-md, 12px);
  padding: var(--space-4, 32px) !important;
  box-shadow: var(--shadow-sm, 0 1px 3px rgba(0,0,0,.05));
  transition: all .25s ease;
}
.pain-points .wp-block-column:hover {
  box-shadow: var(--shadow-md, 0 4px 12px rgba(0,0,0,.08));
  transform: translateY(-2px);
  border-color: rgba(220,38,38,.2);
}

/* Feature grid items */
.feature-grid {
  padding: var(--space-4, 24px);
  border-left: 3px solid #dc2626;
  margin-bottom: var(--space-4, 16px);
}

/* --- 6. TABLE: Product Spec Table --- */
.spec-table table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  border-radius: var(--radius-md, 12px);
  overflow: hidden;
  box-shadow: var(--shadow-sm, 0 1px 3px rgba(0,0,0,.05));
}
.spec-table thead th {
  background: linear-gradient(135deg, #1a1a2e, #2d2d44);
  color: #fff;
  font-weight: 600;
  padding: 14px 20px;
  letter-spacing: .02em;
  text-transform: uppercase;
  font-size: .75rem;
}
.spec-table tbody td {
  padding: 14px 20px;
  border-bottom: 1px solid #f1f5f9;
  color: #374151;
}
.spec-table tbody tr:last-child td {
  border-bottom: none;
}
.spec-table tbody tr:hover td {
  background: rgba(220,38,38,.03);
}

/* --- 7. FAQ Accordion Style --- */
details.wp-block-details {
  background: #fafafa;
  border: 1px solid #e2e8f0;
  border-radius: var(--radius-md, 12px);
  padding: var(--space-4, 24px);
  margin-bottom: var(--space-3, 16px);
  cursor: pointer;
  transition: all .2s ease;
}
details.wp-block-details[open] {
  background: #fff;
  border-left: 4px solid #dc2626;
  box-shadow: var(--shadow-sm, 0 1px 3px rgba(0,0,0,.05));
}
details.wp-block-details summary,
details.wp-block-details h4 {
  font-weight: 600;
  color: #1a1a2e;
  list-style: none;
}
details.wp-block-details summary::-webkit-details-marker {
  display: none;
}
details.wp-block-details p {
  color: #64748b;
  line-height: 1.7;
  margin-top: var(--space-2, 16px);
}

/* --- 8. SEPARATOR: Wide Red Accent --- */
hr.is-style-wide,
.wp-block-separator.is-style-wide {
  height: 2px;
  background: linear-gradient(to right, transparent, #e2e8f0 20%, #e2e8f0 80%, transparent);
  max-width: 80vw;
  margin: 48px auto;
}

/* --- 9. WOOCOMMERCE OVERRIDES --- */

/* Product archive grid */
ul.products li.product {
  border-radius: var(--radius-lg, 20px);
  overflow: hidden;
  border: 1px solid #e2e8f0;
  transition: all .25s cubic-bezier(.16,1,.3,1);
}
ul.products li.product:hover {
  box-shadow: var(--shadow-lg, 0 12px 32px rgba(0,0,0,.1));
  transform: translateY(-4px);
  border-color: rgba(220,38,38,.25);
}

/* Price display */
.price,
.amount {
  color: #dc2626;
  font-weight: 700;
}

/* Add to cart button */
.add_to_cart_button,
.single_add_to_cart_button {
  background: linear-gradient(135deg, #dc2626, #ef4444) !important;
  color: #fff !important;
  border-radius: var(--radius-md, 12px) !important;
  font-weight: 600 !important;
  padding: 14px 28px !important;
  box-shadow: 0 4px 20px rgba(220,38,38,.25) !important;
  transition: all .2s ease !important;
}
.add_to_cart_button:hover,
.single_add_to_cart_button:hover {
  box-shadow: 0 8px 32px rgba(220,38,38,.35) !important;
  transform: translateY(-2px) !important;
}

/* Sale badge */
span.onsale {
  background: #dc2626;
  color: #fff;
  border-radius: 9999px;
  font-weight: 600;
  font-size: .75rem;
  padding: 4px 12px;
  letter-spacing: .05em;
}

/* Breadcrumb */
.woocommerce-breadcrumb {
  color: #94a3b8;
  font-size: .875rem;
}
.woocommerce-breadcrumb a {
  color: #64748b;
  transition: color .15s ease;
}
.woocommerce-breadcrumb a:hover {
  color: #dc2626;
}

/* --- 10. RESPONSIVE TWEAKS --- */
@media (max-width: 782px) {
  .is-style-fureburg-hero {
    font-size: clamp(1.5rem, 6vw, 2.25rem);
  }
  
  .pain-points .wp-block-column {
    padding: var(--space-3, 24px) !important;
  }
  
  .spec-table {
    overflow-x: auto;
  }
  .spec-table table {
    min-width: 500px;
  }
  
  details.wp-block-details {
    padding: var(--space-3, 16px);
  }
}

/* --- 11. SCROLL ANIMATIONS (subtle entrance) --- */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.wp-block-group,
.wp-block-columns,
.wp-block-cover,
details.wp-block-details {
  animation: fadeUp .5s cubic-bezier(.16,1,.3,1) both;
  animation-delay: calc(var(--stagger, 0) * 80ms);
}

.wp-block-columns > *:nth-child(1) { --stagger: 0; }
.wp-block-columns > *:nth-child(2) { --stagger: 1; }
.wp-block-columns > *:nth-child(3) { --stagger: 2; }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0ms !important;
    transition-duration: 0ms !important;
  }
}