/*
Theme Name:   FasterCool Child
Theme URI:    https://fastercoolaircon.com.sg
Description:  FasterCool Aircon Services child theme. Parent: Hello Elementor.
Author:       FasterCool Aircon Services
Author URI:   https://fastercoolaircon.com.sg
Template:     hello-elementor
Version:      1.1.0
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  fastercool-child
*/

/* =====================================================
   DESIGN TOKENS
   ===================================================== */
:root {
  --fc-sky:        #0ea5e9;
  --fc-sky-dark:   #0284c7;
  --fc-sky-deeper: #075985;
  --fc-sky-light:  #e0f2fe;
  --fc-sky-pale:   #bae6fd;
  --fc-sky-mid:    #38bdf8;
  --fc-navy:       #0c4a6e;
  --fc-navy-deep:  #082f49;
  --fc-gray-50:    #f8fafc;
  --fc-gray-100:   #f1f5f9;
  --fc-gray-200:   #e2e8f0;
  --fc-gray-600:   #475569;
  --fc-text:       #0f172a;
  --fc-text-muted: #475569;
  --fc-r-sm:  8px;
  --fc-r-md:  12px;
  --fc-r-lg:  16px;
  --fc-r-xl:  20px;
}

/* =====================================================
   GLOBAL
   ===================================================== */
body {
  font-family: 'DM Sans', sans-serif;
  color: var(--fc-text);
  background: var(--fc-gray-50);
  line-height: 1.6;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Syne', sans-serif;
  font-weight: 800;
}

/* =====================================================
   HERO SECTION
   ===================================================== */
.fc-hero-section {
  background: linear-gradient(135deg, #082f49 0%, #0c4a6e 45%, #075985 100%) !important;
  min-height: 520px;
  position: relative;
  overflow: hidden;
}

.fc-hero-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
  z-index: 0;
}

.fc-hero-section::after {
  content: '';
  position: absolute;
  width: 420px; height: 420px;
  border-radius: 50%;
  background: rgba(14,165,233,0.08);
  top: -140px; right: -80px;
  pointer-events: none;
  z-index: 0;
}

.fc-hero-section > .elementor-container {
  position: relative;
  z-index: 1;
}

/* Hero badge */
.fc-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(14,165,233,0.2);
  border: 1px solid rgba(14,165,233,0.4);
  color: #bae6fd;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  padding: 5px 14px;
  border-radius: 20px;
  margin-bottom: 1rem;
}

/* Hero heading */
.fc-hero-heading,
.fc-hero-section h1 {
  font-family: 'Syne', sans-serif !important;
  font-size: 52px !important;
  font-weight: 800 !important;
  line-height: 1.05 !important;
  letter-spacing: -2px !important;
  color: #ffffff !important;
}

.fc-hero-heading em,
.fc-hero-heading span.fc-accent {
  font-style: normal;
  color: #38bdf8;
}

/* Hero subtext */
.fc-hero-sub p,
.fc-hero-sub {
  color: #bae6fd !important;
  font-size: 16px !important;
  line-height: 1.75 !important;
  max-width: 420px;
}

/* Star line */
.fc-trust-line {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #bae6fd;
  font-size: 13px;
  margin-top: 1.5rem;
}
.fc-stars { color: #fbbf24; font-size: 16px; letter-spacing: 1px; }

/* =====================================================
   BUTTONS
   ===================================================== */
.fc-btn-primary,
.elementor-button.fc-btn-primary {
  background: var(--fc-sky) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--fc-r-md) !important;
  padding: 14px 28px !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  transition: background 0.2s !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}
.fc-btn-primary:hover,
.elementor-button.fc-btn-primary:hover {
  background: var(--fc-sky-dark) !important;
}

.fc-btn-ghost,
.elementor-button.fc-btn-ghost {
  background: rgba(255,255,255,0.1) !important;
  border: 1px solid rgba(255,255,255,0.3) !important;
  color: #fff !important;
  border-radius: var(--fc-r-md) !important;
  padding: 14px 28px !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  transition: background 0.2s !important;
}
.fc-btn-ghost:hover,
.elementor-button.fc-btn-ghost:hover {
  background: rgba(255,255,255,0.2) !important;
}

.fc-btn-sky,
.elementor-button.fc-btn-sky {
  background: var(--fc-sky) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--fc-r-md) !important;
  padding: 14px 28px !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  transition: background 0.2s !important;
}
.fc-btn-sky:hover { background: var(--fc-sky-dark) !important; }

.fc-btn-wa,
.elementor-button.fc-btn-wa {
  background: rgba(255,255,255,0.12) !important;
  border: 1px solid rgba(255,255,255,0.3) !important;
  color: #fff !important;
  border-radius: var(--fc-r-md) !important;
  padding: 14px 28px !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  transition: background 0.2s !important;
}
.fc-btn-wa:hover { background: rgba(255,255,255,0.22) !important; }

/* =====================================================
   TRUST STRIP
   ===================================================== */
.fc-trust-strip {
  background: var(--fc-sky) !important;
  padding: 16px 2rem !important;
}

.fc-trust-strip .elementor-icon-list-items {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 8px 32px !important;
}

.fc-trust-strip .elementor-icon-list-text {
  color: #fff !important;
  font-size: 13px !important;
  font-weight: 500 !important;
}

.fc-trust-strip .elementor-icon-list-icon i,
.fc-trust-strip .elementor-icon-list-icon svg {
  color: #fff !important;
  fill: none !important;
}

/* =====================================================
   SECTION LABELS / TITLES
   ===================================================== */
.fc-section-label,
.fc-section-label.elementor-heading-title {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  color: var(--fc-sky) !important;
  margin-bottom: 4px !important;
}

.fc-section-title,
.fc-section-title.elementor-heading-title {
  font-family: 'Syne', sans-serif !important;
  font-size: 32px !important;
  font-weight: 800 !important;
  letter-spacing: -0.8px !important;
  color: var(--fc-text) !important;
  margin-bottom: 8px !important;
}

.fc-section-sub,
.fc-section-sub p {
  font-size: 15px !important;
  color: var(--fc-text-muted) !important;
  line-height: 1.7 !important;
  max-width: 520px;
  margin-bottom: 2rem !important;
}

/* =====================================================
   SERVICE CARDS
   ===================================================== */
.fc-services-section,
.fc-services-section.elementor-section {
  background: #ffffff !important;
}

.fc-service-card {
  background: var(--fc-gray-50) !important;
  border: 1px solid var(--fc-gray-200) !important;
  border-radius: var(--fc-r-lg) !important;
  padding: 1.75rem !important;
  transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s !important;
  height: 100%;
}

.fc-service-card:hover {
  border-color: var(--fc-sky) !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 8px 24px rgba(14,165,233,0.12) !important;
}

/* Icon box overrides inside service cards */
.fc-service-card .elementor-icon-box-wrapper {
  text-align: left !important;
}

.fc-service-card .elementor-icon-box-icon {
  margin-bottom: 1.25rem !important;
}

.fc-service-card .elementor-icon-box-icon .elementor-icon {
  width: 48px !important;
  height: 48px !important;
  background: var(--fc-sky-light) !important;
  border-radius: 12px !important;
  color: var(--fc-sky) !important;
  font-size: 24px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.fc-service-card .elementor-icon-box-title,
.fc-service-card .elementor-icon-box-title a {
  font-family: 'Syne', sans-serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--fc-text) !important;
  margin-bottom: 6px !important;
}

.fc-service-card .elementor-icon-box-description {
  font-size: 14px !important;
  color: var(--fc-text-muted) !important;
  line-height: 1.65 !important;
}

/* =====================================================
   BRAND PILLS
   ===================================================== */
.fc-brands-section,
.fc-brands-section.elementor-section {
  background: var(--fc-gray-50) !important;
}

.fc-brand-pill {
  display: inline-block;
  background: #fff;
  border: 1px solid var(--fc-gray-200);
  border-radius: var(--fc-r-sm);
  padding: 10px 22px;
  font-size: 14px;
  font-weight: 600;
  color: var(--fc-gray-600);
  transition: border-color 0.2s, color 0.2s;
  cursor: default;
}
.fc-brand-pill:hover {
  border-color: var(--fc-sky);
  color: var(--fc-sky-dark);
}

/* =====================================================
   PROCESS STEPS
   ===================================================== */
.fc-process-section,
.fc-process-section.elementor-section {
  background: var(--fc-gray-100) !important;
}

.fc-step-circle {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--fc-sky);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Syne', sans-serif;
  font-size: 20px;
  font-weight: 800;
  margin: 0 auto 1rem;
  border: 3px solid var(--fc-gray-100);
  box-shadow: 0 0 0 4px var(--fc-sky-light);
}

.fc-step-title {
  font-weight: 600;
  font-size: 15px;
  text-align: center;
  margin-bottom: 6px;
  color: var(--fc-text);
}

.fc-step-desc {
  font-size: 13px;
  color: var(--fc-text-muted);
  line-height: 1.6;
  text-align: center;
}

/* =====================================================
   WHY US CARDS
   ===================================================== */
.fc-why-section,
.fc-why-section.elementor-section {
  background: #ffffff !important;
}

.fc-why-card {
  background: var(--fc-gray-50);
  border: 1px solid var(--fc-gray-200);
  border-radius: var(--fc-r-lg);
  padding: 2rem;
  height: 100%;
}

.fc-why-num {
  font-family: 'Syne', sans-serif;
  font-size: 48px;
  font-weight: 800;
  color: var(--fc-sky-light);
  line-height: 1;
  margin-bottom: 0.75rem;
}

.fc-why-title {
  font-weight: 600;
  font-size: 16px;
  color: var(--fc-text);
  margin-bottom: 8px;
}

.fc-why-desc {
  font-size: 14px;
  color: var(--fc-text-muted);
  line-height: 1.65;
}

/* =====================================================
   CTA BANNER SECTION
   ===================================================== */
.fc-cta-section,
.fc-cta-section.elementor-section {
  background: linear-gradient(135deg, #082f49 0%, #0c4a6e 60%, #075985 100%) !important;
  position: relative;
  overflow: hidden;
}

.fc-cta-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 32px 32px;
  pointer-events: none;
}

.fc-cta-section > .elementor-container {
  position: relative;
  z-index: 1;
}

.fc-cta-heading,
.fc-cta-heading.elementor-heading-title {
  font-family: 'Syne', sans-serif !important;
  font-size: 32px !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  margin-bottom: 8px !important;
}

.fc-cta-sub,
.fc-cta-sub p {
  color: #bae6fd !important;
  font-size: 15px !important;
  line-height: 1.6 !important;
}

/* =====================================================
   FOOTER
   ===================================================== */
.fc-footer-section,
.fc-footer-section.elementor-section {
  background: #082f49 !important;
}

.fc-footer-section .elementor-widget-container,
.fc-footer-section p,
.fc-footer-section span,
.fc-footer-section a {
  color: #bae6fd !important;
}

.fc-footer-section a:hover {
  color: #ffffff !important;
  text-decoration: none;
}

.fc-footer-logo-text {
  font-family: 'Syne', sans-serif !important;
  font-size: 20px !important;
  font-weight: 800 !important;
  color: #ffffff !important;
}

/* =====================================================
   RESPONSIVE
   ===================================================== */
@media (max-width: 1024px) {
  .fc-hero-heading,
  .fc-hero-section h1 {
    font-size: 40px !important;
  }
}

@media (max-width: 768px) {
  .fc-hero-heading,
  .fc-hero-section h1 {
    font-size: 32px !important;
    letter-spacing: -1px !important;
  }
  .fc-section-title { font-size: 26px !important; }
  .fc-cta-heading { font-size: 24px !important; }
  .fc-trust-strip .elementor-icon-list-items { gap: 8px 16px !important; }
  .fc-service-card { padding: 1.25rem !important; }
}