/*
 Theme Name: Icon Child
 Theme URI: https://iconbusinessadvisors.com
 Description: Icon Business Advisors child theme for Kadence
 Author: Icon Business Advisors
 Template: kadence
 Version: 1.0.0
*/

/* ==========================================================================
   1. CSS CUSTOM PROPERTIES
   ========================================================================== */

:root {
  /* Brand Colors */
  --icon-navy: #1B365D;
  --icon-dark-navy: #0F1F35;
  --icon-gold: #D4AF37;
  --icon-gold-hover: #C4A030;

  /* Neutrals */
  --icon-charcoal: #2C2C2C;
  --icon-white: #FFFFFF;
  --icon-light-gray: #F5F5F5;
  --icon-mid-gray: #E0E0E0;
  --icon-dark-gray: #6B7280;

  /* Spacing (8px grid) */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 40px;
  --space-6: 48px;
  --space-8: 64px;
  --space-10: 80px;
  --space-12: 96px;

  /* Transitions */
  --transition-fast: 0.15s ease;
  --transition-default: 0.2s ease;
  --transition-slow: 0.3s ease;

  /* Shadows */
  --shadow-card: 0 2px 8px rgba(15, 31, 53, 0.08);
  --shadow-card-hover: 0 4px 16px rgba(15, 31, 53, 0.12);
  --shadow-elevated: 0 8px 32px rgba(15, 31, 53, 0.16);
}

/* ==========================================================================
   2. BASE & TYPOGRAPHY
   ========================================================================== */

body.icon-theme {
  font-family: 'Source Sans 3', 'Source Sans Pro', sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: var(--icon-charcoal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* NEVER use pure black */
body.icon-theme * {
  /* This is a safety net - specific rules below handle it properly */
}

h1, h2, h3,
.wp-block-heading:where(:not(.has-font-family)) {
  font-family: 'DM Serif Display', serif;
  font-weight: 400;
  color: var(--icon-navy);
  line-height: 1.2;
}

h1 { font-size: 3.5rem; letter-spacing: -0.5px; line-height: 1.15; }
h2 { font-size: 2.5rem; letter-spacing: -0.3px; }
h3 { font-size: 1.75rem; }

h4, h5, h6 {
  font-family: 'DM Sans', sans-serif;
  color: var(--icon-navy);
}

h4 { font-size: 1.375rem; font-weight: 600; }
h5 { font-size: 1rem; font-weight: 700; }

/* Eyebrow / Overline */
.icon-eyebrow,
.is-style-icon-eyebrow {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--icon-gold);
  margin-bottom: var(--space-2);
}

/* Body text sizes */
.has-large-font-size { font-size: 1.125rem; line-height: 1.7; }
.has-small-font-size { font-size: 0.875rem; line-height: 1.5; }

/* Links */
a { color: var(--icon-navy); transition: color var(--transition-default); }
a:hover { color: var(--icon-gold); }

/* Dark section link overrides */
.has-icon-navy-background-color a,
.has-icon-dark-navy-background-color a,
.icon-dark-section a {
  color: var(--icon-gold);
}
.has-icon-navy-background-color a:hover,
.has-icon-dark-navy-background-color a:hover {
  color: var(--icon-white);
}

/* ==========================================================================
   3. BUTTONS
   ========================================================================== */

/* Primary - Gold */
.wp-block-button.is-style-icon-primary .wp-block-button__link,
.btn-primary,
.icon-theme .wp-block-button:not(.is-style-outline):not(.is-style-icon-secondary) .wp-block-button__link {
  background-color: var(--icon-gold);
  color: var(--icon-dark-navy);
  font-family: 'DM Sans', sans-serif;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 14px 32px;
  border: none;
  border-radius: 4px;
  transition: background-color var(--transition-default), transform 0.1s ease;
}
.wp-block-button.is-style-icon-primary .wp-block-button__link:hover,
.btn-primary:hover {
  background-color: var(--icon-gold-hover);
  transform: translateY(-1px);
  color: var(--icon-dark-navy);
}

/* Secondary - Navy outline */
.wp-block-button.is-style-icon-secondary .wp-block-button__link,
.wp-block-button.is-style-outline .wp-block-button__link,
.btn-secondary {
  background-color: transparent;
  color: var(--icon-navy);
  border: 2px solid var(--icon-navy);
  font-family: 'DM Sans', sans-serif;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 12px 30px;
  border-radius: 4px;
  transition: all var(--transition-default);
}
.wp-block-button.is-style-icon-secondary .wp-block-button__link:hover,
.btn-secondary:hover {
  background-color: var(--icon-navy);
  color: var(--icon-white);
}

/* Ghost - White outline (dark backgrounds) */
.btn-ghost,
.icon-dark-section .wp-block-button.is-style-outline .wp-block-button__link {
  background-color: transparent;
  color: var(--icon-white);
  border: 2px solid var(--icon-white);
  font-family: 'DM Sans', sans-serif;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 12px 30px;
  border-radius: 4px;
  transition: all var(--transition-default);
}
.btn-ghost:hover {
  background-color: var(--icon-white);
  color: var(--icon-dark-navy);
}

/* ==========================================================================
   4. COMPONENT: HERO
   ========================================================================== */

.icon-hero.wp-block-cover {
  min-height: 520px;
  display: flex;
  align-items: center;
}

.icon-hero .wp-block-cover__inner-container {
  max-width: 780px;
  margin: 0 auto;
  text-align: center;
  padding: var(--space-6) var(--space-3);
}

.icon-hero h1 {
  color: var(--icon-white);
  margin-bottom: var(--space-3);
}

.icon-hero p:not(.icon-eyebrow) {
  color: rgba(255, 255, 255, 0.9);
  font-size: 1.125rem;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

/* Homepage hero - taller */
.home .icon-hero.wp-block-cover {
  min-height: 640px;
}

/* ==========================================================================
   5. COMPONENT: STAT ROW
   ========================================================================== */

.icon-stat-row {
  background-color: var(--icon-navy);
  padding: var(--space-8) 0;
}

.icon-stat-row .wp-block-column {
  text-align: center;
  padding: var(--space-3);
}

.icon-stat-row h2,
.icon-stat-row .icon-stat-number {
  font-family: 'DM Serif Display', serif;
  color: var(--icon-gold);
  font-size: 3rem;
  margin-bottom: var(--space-1);
}

.icon-stat-row p {
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-family: 'DM Sans', sans-serif;
}

/* ==========================================================================
   6. COMPONENT: SERVICE CARD
   ========================================================================== */

.icon-service-card {
  background: var(--icon-white);
  border-radius: 8px;
  padding: var(--space-4);
  box-shadow: var(--shadow-card);
  transition: box-shadow var(--transition-default), transform var(--transition-default);
}

.icon-service-card:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-2px);
}

.icon-service-card h3 {
  color: var(--icon-navy);
  margin-bottom: var(--space-2);
}

.icon-service-card p {
  color: var(--icon-charcoal);
  margin-bottom: var(--space-3);
}

/* Gold top border variant */
.icon-service-card--accent {
  border-top: 4px solid var(--icon-gold);
}

/* Dark variant */
.icon-service-card--dark {
  background: var(--icon-navy);
}
.icon-service-card--dark h3 { color: var(--icon-white); }
.icon-service-card--dark p { color: rgba(255, 255, 255, 0.8); }

/* ==========================================================================
   7. COMPONENT: TESTIMONIAL
   ========================================================================== */

.icon-testimonial {
  text-align: center;
  padding: var(--space-8) var(--space-4);
  max-width: 780px;
  margin: 0 auto;
}

.icon-testimonial .icon-quote-mark {
  font-family: 'DM Serif Display', serif;
  font-size: 4rem;
  color: var(--icon-gold);
  line-height: 1;
  margin-bottom: var(--space-2);
}

.icon-testimonial blockquote,
.icon-testimonial .icon-quote-text {
  font-family: 'Source Sans 3', sans-serif;
  font-size: 1.25rem;
  font-style: italic;
  line-height: 1.7;
  color: var(--icon-charcoal);
  margin-bottom: var(--space-3);
}

.icon-testimonial .icon-attribution {
  font-family: 'DM Sans', sans-serif;
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--icon-navy);
}

.icon-testimonial .icon-attribution-title {
  font-family: 'DM Sans', sans-serif;
  font-weight: 400;
  font-size: 0.75rem;
  color: var(--icon-dark-gray);
}

/* On dark backgrounds */
.has-icon-navy-background-color .icon-testimonial .icon-quote-text,
.icon-dark-section .icon-testimonial blockquote {
  color: rgba(255, 255, 255, 0.9);
}
.has-icon-navy-background-color .icon-testimonial .icon-attribution {
  color: var(--icon-white);
}

/* ==========================================================================
   8. COMPONENT: FAQ ACCORDION (Kadence Block overrides)
   ========================================================================== */

.icon-faq .kt-accordion-header-wrap {
  background-color: var(--icon-navy);
  border: none;
  border-radius: 4px;
  margin-bottom: var(--space-1);
  padding: var(--space-2) var(--space-3);
}

.icon-faq .kt-accordion-header-wrap:hover {
  background-color: #1a3259;
}

.icon-faq .kt-blocks-accordion-title {
  font-family: 'DM Sans', sans-serif;
  font-weight: 600;
  font-size: 1rem;
  color: var(--icon-white);
}

.icon-faq .kt-accordion-panel {
  padding: var(--space-3);
  font-family: 'Source Sans 3', sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--icon-charcoal);
  border: 1px solid var(--icon-mid-gray);
  border-top: none;
}

.icon-faq .kt-accordion-icon-trigger svg {
  color: var(--icon-gold);
}

/* ==========================================================================
   9. COMPONENT: CTA BAND
   ========================================================================== */

.icon-cta-band {
  padding: var(--space-10) var(--space-4);
  text-align: center;
}

.icon-cta-band h2 {
  color: var(--icon-white);
  margin-bottom: var(--space-3);
}

.icon-cta-band p {
  color: rgba(255, 255, 255, 0.8);
  max-width: 600px;
  margin: 0 auto var(--space-4);
  font-size: 1.125rem;
}

/* ==========================================================================
   10. COMPONENT: PROCESS STEPS
   ========================================================================== */

.icon-process-steps .wp-block-column {
  text-align: center;
  padding: var(--space-3);
}

.icon-process-steps .icon-step-number {
  font-family: 'DM Serif Display', serif;
  font-size: 2.5rem;
  color: var(--icon-gold);
  margin-bottom: var(--space-2);
}

.icon-process-steps h4 {
  font-family: 'DM Sans', sans-serif;
  font-size: 1.125rem;
  font-weight: 600;
  margin-bottom: var(--space-1);
}

.icon-process-steps p {
  font-size: 0.875rem;
  color: var(--icon-dark-gray);
}

/* ==========================================================================
   11. COMPONENT: TEAM BIO
   ========================================================================== */

.icon-team-bio img {
  border-radius: 8px;
  object-fit: cover;
}

.icon-team-bio h3 {
  margin-bottom: var(--space-1);
}

.icon-team-bio .icon-eyebrow {
  margin-bottom: var(--space-2);
}

/* ==========================================================================
   12. COMPONENT: CASE STUDY CARD
   ========================================================================== */

.icon-case-study {
  background-color: var(--icon-navy);
  padding: var(--space-4);
  border-left: 4px solid var(--icon-gold);
  border-radius: 4px;
  margin-bottom: var(--space-3);
}

.icon-case-study .icon-eyebrow {
  color: var(--icon-gold);
  margin-bottom: var(--space-1);
}

.icon-case-study h4 {
  color: var(--icon-white);
  margin-bottom: var(--space-2);
}

.icon-case-study p {
  color: rgba(255, 255, 255, 0.8);
}

/* ==========================================================================
   13. COMPONENT: FORM SECTION (Fluent Forms overrides)
   ========================================================================== */

.icon-form-section {
  padding: var(--space-8) var(--space-4);
}

.icon-form-section h2 {
  text-align: center;
  margin-bottom: var(--space-2);
}

.icon-form-section > p {
  text-align: center;
  max-width: 600px;
  margin: 0 auto var(--space-4);
}

/* Fluent Forms field styling */
.icon-theme .fluentform .ff-el-input--label label {
  font-family: 'DM Sans', sans-serif;
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--icon-navy);
}

.icon-theme .fluentform input[type="text"],
.icon-theme .fluentform input[type="email"],
.icon-theme .fluentform input[type="tel"],
.icon-theme .fluentform input[type="url"],
.icon-theme .fluentform input[type="number"],
.icon-theme .fluentform select,
.icon-theme .fluentform textarea {
  font-family: 'Source Sans 3', sans-serif;
  font-size: 1rem;
  padding: 12px 16px;
  border: 1px solid var(--icon-mid-gray);
  border-radius: 4px;
  transition: border-color var(--transition-default);
}

.icon-theme .fluentform input:focus,
.icon-theme .fluentform select:focus,
.icon-theme .fluentform textarea:focus {
  border-color: var(--icon-navy);
  outline: none;
  box-shadow: 0 0 0 2px rgba(27, 54, 93, 0.15);
}

/* Fluent Forms submit button */
.icon-theme .fluentform .ff_submit_btn_wrapper button,
.icon-theme .fluentform button[type="submit"] {
  background-color: var(--icon-gold);
  color: var(--icon-dark-navy);
  font-family: 'DM Sans', sans-serif;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 14px 32px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color var(--transition-default);
}

.icon-theme .fluentform button[type="submit"]:hover {
  background-color: var(--icon-gold-hover);
}

/* ==========================================================================
   14. SECTION UTILITY CLASSES
   ========================================================================== */

/* Dark section wrapper */
.icon-dark-section {
  background-color: var(--icon-navy);
  color: var(--icon-white);
}
.icon-dark-section h1,
.icon-dark-section h2,
.icon-dark-section h3 {
  color: var(--icon-white);
}

/* Light gray section */
.icon-light-section {
  background-color: var(--icon-light-gray);
}

/* Max width constraint for text-heavy sections */
.icon-narrow-content {
  max-width: 780px;
  margin-left: auto;
  margin-right: auto;
}

/* Gold divider */
.icon-divider {
  width: 60px;
  height: 3px;
  background-color: var(--icon-gold);
  margin: var(--space-3) auto;
}

/* ==========================================================================
   15. HEADER / NAV OVERRIDES (Kadence Header Builder)
   ========================================================================== */

/* Nav link styling */
.icon-theme .header-navigation .menu-item > a {
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
}

/* GET STARTED nav CTA button */
.icon-theme .header-navigation .menu-item.menu-item-btn > a,
.icon-theme .header-button .kb-button {
  background-color: var(--icon-gold);
  color: var(--icon-dark-navy);
  padding: 10px 24px;
  border-radius: 4px;
  font-family: 'DM Sans', sans-serif;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 1px;
  text-transform: uppercase;
  transition: background-color var(--transition-default);
}

.icon-theme .header-button .kb-button:hover {
  background-color: var(--icon-gold-hover);
}

/* ==========================================================================
   16. FOOTER OVERRIDES
   ========================================================================== */

.icon-theme .site-footer {
  background-color: var(--icon-navy);
}

.icon-theme .footer-widget-area {
  color: rgba(255, 255, 255, 0.8);
}

.icon-theme .footer-widget-area h3,
.icon-theme .footer-widget-area .widget-title {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--icon-gold);
  margin-bottom: var(--space-3);
}

.icon-theme .footer-widget-area a {
  color: rgba(255, 255, 255, 0.7);
  transition: color var(--transition-default);
}

.icon-theme .footer-widget-area a:hover {
  color: var(--icon-gold);
}

.icon-theme .site-footer .site-footer-bottom-wrap {
  background-color: var(--icon-dark-navy);
}

/* ==========================================================================
   17. RESPONSIVE
   ========================================================================== */

@media (max-width: 1024px) {
  h1 { font-size: 2.75rem; }
  h2 { font-size: 2rem; }
  h3 { font-size: 1.5rem; }

  .icon-hero.wp-block-cover { min-height: 420px; }
  .home .icon-hero.wp-block-cover { min-height: 500px; }
}

@media (max-width: 768px) {
  h1 { font-size: 2.25rem; }
  h2 { font-size: 1.75rem; }
  h3 { font-size: 1.375rem; }

  .icon-hero.wp-block-cover { min-height: 360px; }
  .home .icon-hero.wp-block-cover { min-height: 420px; }

  .icon-stat-row h2,
  .icon-stat-row .icon-stat-number { font-size: 2.25rem; }

  .icon-cta-band { padding: var(--space-6) var(--space-3); }

  .icon-process-steps .wp-block-columns {
    flex-direction: column;
  }
}

@media (max-width: 480px) {
  h1 { font-size: 1.875rem; }
  h2 { font-size: 1.5rem; }

  .wp-block-button.is-style-icon-primary .wp-block-button__link,
  .btn-primary {
    padding: 12px 24px;
    font-size: 13px;
    width: 100%;
    text-align: center;
  }
}

/* ==========================================================================
   18. LEGACY MIGRATION NOTES
   ========================================================================== */

/*
 * POST 707 MIGRATION STATUS:
 * The legacy CSS from Post 707 needs to be reviewed and any still-relevant
 * styles migrated into the appropriate sections above.
 *
 * Daniel: Export Post 707 content manually from WP Admin and provide it
 * to Cursor so remaining styles can be merged here.
 *
 * Once migrated, Post 707 can be safely archived (not deleted).
 */