/* ===============================
   ACHAT-FANS CUSTOM STYLES
   Kadence Blocks Complete Skill
   =============================== */

/* Root Variables */
:root {
  --color-navy: #0B162C;
  --color-gold: #C5A059;
  --color-gold-light: #D4B06A;
  --color-cream: #F8F5EF;
  --color-white: #FDFCFA;
  --color-text-navy: #1A2340;
  --color-bg-dark: #07101F;
  --font-serif: 'Cormorant Garamond', serif;
  --font-sans: 'DM Sans', sans-serif;
}

/* ===============================
   SECTION STYLES
   =============================== */

.section-hero,
.wp-block-kadence-section.hero-section {
  background-color: var(--color-navy) !important;
  color: white !important;
  padding: 4rem 0 !important;
}

.section-stats,
.wp-block-kadence-section.stats-section {
  background-color: var(--color-white) !important;
  padding: 3rem 0 !important;
}

.section-services,
.wp-block-kadence-section.services-section {
  background-color: var(--color-cream) !important;
  padding: 3rem 0 !important;
}

.section-cta,
.wp-block-kadence-section.cta-section {
  background-color: var(--color-gold) !important;
  color: var(--color-navy) !important;
  padding: 4rem 0 !important;
}

/* ===============================
   TYPOGRAPHY
   =============================== */

h1, .wp-block-heading h1 {
  font-family: var(--font-serif) !important;
  font-size: 3rem !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  color: var(--color-navy) !important;
}

h2, .wp-block-heading h2 {
  font-family: var(--font-serif) !important;
  font-size: 2.25rem !important;
  font-weight: 500 !important;
  line-height: 1.3 !important;
  color: var(--color-navy) !important;
}

h3, .wp-block-heading h3 {
  font-family: var(--font-serif) !important;
  font-size: 1.75rem !important;
  font-weight: 500 !important;
  color: var(--color-navy) !important;
}

h4, .wp-block-heading h4 {
  font-family: var(--font-serif) !important;
  font-size: 1.25rem !important;
  font-weight: 500 !important;
  color: var(--color-navy) !important;
}

body, p, .wp-block-paragraph {
  font-family: var(--font-sans) !important;
  font-size: 1rem !important;
  line-height: 1.6 !important;
  color: var(--color-text-navy) !important;
}

.section-hero h1,
.section-hero h2,
.section-hero h3,
.section-hero p,
.hero-section h1,
.hero-section h2,
.hero-section h3,
.hero-section p {
  color: white !important;
}

.section-cta h1,
.section-cta h2,
.section-cta h3,
.section-cta p,
.cta-section h1,
.cta-section h2,
.cta-section h3,
.cta-section p {
  color: var(--color-navy) !important;
}

/* ===============================
   BUTTONS
   =============================== */

.wp-block-button__link,
.kadence-button,
button.wp-block-button__link {
  background-color: var(--color-gold) !important;
  color: var(--color-navy) !important;
  padding: 0.875rem 1.75rem !important;
  border-radius: 50px !important;
  font-family: var(--font-sans) !important;
  font-weight: 600 !important;
  font-size: 1rem !important;
  border: none !important;
  transition: all 0.3s ease !important;
  display: inline-block !important;
  text-decoration: none !important;
  cursor: pointer !important;
}

.wp-block-button__link:hover,
.kadence-button:hover,
button.wp-block-button__link:hover {
  background-color: var(--color-gold-light) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 16px rgba(197, 160, 89, 0.2) !important;
}

.button-inverse,
.section-cta .wp-block-button__link,
.cta-section .wp-block-button__link {
  background-color: var(--color-navy) !important;
  color: var(--color-gold) !important;
}

.button-inverse:hover,
.section-cta .wp-block-button__link:hover,
.cta-section .wp-block-button__link:hover {
  background-color: #05101F !important;
  color: var(--color-gold-light) !important;
}

/* ===============================
   INFO BOX / CARDS
   =============================== */

.wp-block-kadence-infobox,
.kadence-info-box {
  background-color: var(--color-white) !important;
  border: 2px solid var(--color-gold) !important;
  border-radius: 8px !important;
  padding: 2rem !important;
  transition: all 0.3s ease !important;
  box-sizing: border-box !important;
}

.wp-block-kadence-infobox:hover,
.kadence-info-box:hover {
  transform: translateY(-8px) !important;
  box-shadow: 0 16px 32px rgba(197, 160, 89, 0.15) !important;
}

.wp-block-kadence-infobox h3,
.kadence-info-box h3 {
  color: var(--color-navy) !important;
  margin-top: 0 !important;
  font-family: var(--font-serif) !important;
  font-size: 1.5rem !important;
}

.wp-block-kadence-infobox p,
.kadence-info-box p {
  color: var(--color-text-navy) !important;
  margin: 1rem 0 0 0 !important;
}

.wp-block-kadence-infobox ul,
.kadence-info-box ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 1rem 0 0 0 !important;
}

.wp-block-kadence-infobox ul li,
.kadence-info-box ul li {
  color: var(--color-text-navy) !important;
  margin: 0.5rem 0 !important;
  padding-left: 1.5rem !important;
  position: relative !important;
}

.wp-block-kadence-infobox ul li:before,
.kadence-info-box ul li:before {
  content: "✓" !important;
  position: absolute !important;
  left: 0 !important;
  color: var(--color-gold) !important;
  font-weight: bold !important;
}

/* ===============================
   COUNT UP / STATS
   =============================== */

.wp-block-kadence-countup,
.kadence-count-up {
  text-align: center !important;
  padding: 2rem !important;
}

.kadence-countup-number,
.count-up-number {
  color: var(--color-gold) !important;
  font-family: var(--font-serif) !important;
  font-weight: 700 !important;
  font-size: 3rem !important;
  line-height: 1 !important;
  display: block !important;
  margin: 0 !important;
}

.kadence-countup-label,
.count-up-label {
  color: var(--color-navy) !important;
  font-family: var(--font-sans) !important;
  font-weight: 400 !important;
  font-size: 1rem !important;
  margin-top: 0.5rem !important;
  display: block !important;
}

/* ===============================
   LINKS
   =============================== */

a {
  color: var(--color-gold) !important;
  text-decoration: none !important;
  transition: color 0.3s ease !important;
}

a:hover {
  color: var(--color-gold-light) !important;
  text-decoration: underline !important;
}

.section-hero a,
.section-cta a,
.hero-section a,
.cta-section a {
  color: inherit !important;
}

.section-hero a:hover,
.section-cta a:hover,
.hero-section a:hover,
.cta-section a:hover {
  color: inherit !important;
  text-decoration: underline !important;
}

/* ===============================
   ROW LAYOUT
   =============================== */

.wp-block-kadence-row {
  margin-bottom: 0 !important;
}

.wp-block-kadence-column {
  box-sizing: border-box !important;
}

/* ===============================
   RESPONSIVE DESIGN
   =============================== */

@media (max-width: 768px) {
  h1, .wp-block-heading h1 {
    font-size: 2rem !important;
  }

  h2, .wp-block-heading h2 {
    font-size: 1.5rem !important;
  }

  h3, .wp-block-heading h3 {
    font-size: 1.25rem !important;
  }

  .wp-block-kadence-row {
    flex-direction: column !important;
  }

  .wp-block-kadence-section {
    padding: 2rem 0 !important;
  }

  .kadence-countup-number,
  .count-up-number {
    font-size: 2rem !important;
  }

  .wp-block-button__link,
  .kadence-button {
    width: 100% !important;
    text-align: center !important;
  }
}

@media (max-width: 480px) {
  h1, .wp-block-heading h1 {
    font-size: 1.5rem !important;
  }

  h2, .wp-block-heading h2 {
    font-size: 1.25rem !important;
  }

  body, p {
    font-size: 0.95rem !important;
  }

  .wp-block-button__link,
  .kadence-button {
    padding: 0.75rem 1.5rem !important;
    font-size: 0.9rem !important;
  }

  .kadence-countup-number,
  .count-up-number {
    font-size: 1.75rem !important;
  }

  .section-hero,
  .section-cta,
  .hero-section,
  .cta-section {
    padding: 2rem 0 !important;
  }

  .wp-block-kadence-infobox,
  .kadence-info-box {
    padding: 1.5rem !important;
  }
}

/* ===============================
   UTILITY CLASSES
   =============================== */

.text-center {
  text-align: center !important;
}

.text-navy {
  color: var(--color-navy) !important;
}

.text-gold {
  color: var(--color-gold) !important;
}

.text-white {
  color: white !important;
}

.bg-navy {
  background-color: var(--color-navy) !important;
}

.bg-gold {
  background-color: var(--color-gold) !important;
}

.bg-cream {
  background-color: var(--color-cream) !important;
}

.bg-white {
  background-color: var(--color-white) !important;
}

.mt-4 {
  margin-top: 2rem !important;
}

.mb-4 {
  margin-bottom: 2rem !important;
}

.p-4 {
  padding: 2rem !important;
}