/*
  Theme: 2025 Cool Air Repair
  Purpose: 覆蓋前台樣式，保持所有功能與 DOM 結構不變
  Scope: 套用至首頁與相關模板，僅以 CSS 改造視覺
*/

:root {
  --brand-50:  #e6f7ff;
  --brand-100: #bae6fd;
  --brand-200: #7dd3fc;
  --brand-300: #38bdf8;
  --brand-400: #0ea5e9;
  --brand-500: #0284c7;
  --brand-600: #0369a1;
  --brand-700: #075985;
  --ink-100:  #f1f5f9;
  --ink-300:  #cbd5e1;
  --ink-500:  #94a3b8;
  --ink-700:  #475569;
  --ink-900:  #0f172a;
  --surface:  #0b1220;
  --card:     #0f1b2e;
  --success:  #22c55e;
  --warning:  #f59e0b;
}

/* Global tone */
body {
  background: radial-gradient(1200px 600px at 100% -10%, rgba(56,189,248,.15), transparent 60%),
              radial-gradient(900px 500px at -10% 0%, rgba(14,165,233,.18), transparent 55%),
              linear-gradient(180deg, #ffffff, #f6fbff 60%, #f2fbff);
  color: #0f172a;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Header / Navigation */
.header {
  background: linear-gradient(135deg, var(--brand-400), var(--brand-300)) !important;
  box-shadow: 0 8px 30px rgba(2,132,199,.25) !important;
  border-bottom: 1px solid rgba(255,255,255,.08);
  backdrop-filter: saturate(140%) blur(4px);
}

.nav-container { max-width: 1240px !important; }

.logo {
  letter-spacing: .3px;
  text-shadow: 0 2px 10px rgba(255,255,255,.18);
}

.nav-menu a {
  font-weight: 600;
  padding: 8px 14px;
  border-radius: 14px;
  background: transparent;
}

.nav-menu a:hover {
  background: rgba(255,255,255,.18) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.25);
}

/* Hero */
.hero, .hero-section {
  background: radial-gradient(800px 400px at 20% 0%, rgba(255,255,255,.18), transparent 60%),
              linear-gradient(135deg, var(--brand-400), var(--brand-500)) !important;
  position: relative;
  overflow: hidden;
}

.hero::before, .hero-section::before {
  content: "";
  position: absolute; inset: -2px;
  background: repeating-linear-gradient(90deg, rgba(255,255,255,.06) 0 2px, transparent 2px 8px),
              repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 2px, transparent 2px 8px);
  mask: radial-gradient(800px 300px at 50% -10%, black, transparent 70%);
  pointer-events: none;
}

.hero h1, .hero-title { font-weight: 800 !important; letter-spacing: .4px; }
.hero p, .hero-subtitle { opacity: .95 !important; }

.cta-button, .btn {
  background: linear-gradient(180deg, #fff, #eaf6ff) !important;
  color: var(--brand-600) !important;
  border: 1px solid rgba(2,132,199,.25) !important;
  box-shadow: 0 8px 20px rgba(2,132,199,.25) !important;
}

.cta-button:hover, .btn:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 12px 28px rgba(2,132,199,.32) !important;
}

.btn.btn-secondary { background: transparent !important; color: #fff !important; border-color: rgba(255,255,255,.75) !important; }
.btn.btn-secondary:hover { background: #fff !important; color: var(--brand-600) !important; }

/* Banners / Cards */
.banner-section { background: linear-gradient(180deg, #ffffff, #f7fbff) !important; }

.banner-card, .featured-card {
  background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.88)) !important;
  border: 1px solid rgba(2,132,199,.12) !important;
  box-shadow: 0 12px 30px rgba(2,132,199,.10), 0 2px 0 rgba(2,132,199,.06) inset !important;
}

.banner-card:hover, .featured-card:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 18px 40px rgba(2,132,199,.16) !important;
}

.banner-icon { filter: drop-shadow(0 6px 10px rgba(14,165,233,.25)); }
.card-category { background: linear-gradient(135deg, var(--brand-400), var(--brand-300)) !important; }

/* Footer */
.footer {
  background: linear-gradient(180deg, #0b1526, #0a1120) !important;
  color: var(--ink-100) !important;
  border-top: 1px solid rgba(56,189,248,.18);
}

.footer a { color: var(--brand-300) !important; }
.footer a:hover { color: var(--brand-200) !important; text-decoration: none !important; }

.footer-section h3 { color: var(--brand-300) !important; }
.footer-bottom { opacity: .8 !important; }

/* Utilities */
.success-indicator { background: linear-gradient(135deg, #16a34a, #22c55e) !important; }
.clean-indicator, .fix-indicator {
  background: linear-gradient(135deg, var(--brand-500), var(--brand-400)) !important;
  box-shadow: 0 6px 18px rgba(14,165,233,.25);
}

/* Responsive polishes */
@media (max-width: 768px) {
  .nav-menu { display: none !important; }
  .hero h1, .hero-title { font-size: 2.1rem !important; }
  .hero p, .hero-subtitle { font-size: 1rem !important; }
}