/* ============================================================
   Christie Coaching Co. — site styles
   ============================================================ */

body { background: #FBF8F3; }

/* ---- Button (design-system Button component) ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  height: 44px;
  padding: 0 var(--space-5);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--fw-bold);
  letter-spacing: 0.005em;
  line-height: 1;
  border-radius: var(--radius-pill);
  border: 1.5px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}
.btn:hover { transform: translateY(-1px); color: inherit; }
.btn:active { transform: translateY(0); }
.btn--full { display: flex; width: 100%; }

.btn--sm { height: 36px; padding: 0 var(--space-4); font-size: var(--text-sm); gap: 7px; }
.btn--lg { height: 54px; padding: 0 var(--space-6); font-size: var(--text-md); gap: 10px; }

.btn--primary {
  background: var(--primary);
  color: var(--primary-fg);
  box-shadow: var(--shadow-sm);
}
.btn--primary:hover { background: var(--primary-hover); color: var(--primary-fg); box-shadow: var(--shadow-md); }
.btn--primary:active { background: var(--primary-active); }

.btn--accent {
  background: var(--accent);
  color: var(--accent-fg);
  box-shadow: var(--shadow-sm);
}
.btn--accent:hover { background: var(--accent-hover); color: var(--accent-fg); box-shadow: var(--shadow-md); }
.btn--accent:active { background: var(--amber-600); }

.btn--ghost {
  background: transparent;
  color: var(--primary);
  border-color: transparent;
}
.btn--ghost:hover { background: var(--primary-soft); color: var(--primary); }
.btn--ghost:active { background: var(--teal-100); }

/* ---- Badge ---- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 11px;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.02em;
  line-height: 1.4;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}
.badge--teal-solid { background: var(--teal-500); color: #fff; }

/* ---- Shared layout ---- */
.ccc-nav a { position: relative; }
.ccc-nav a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 0;
  height: 2px;
  background: #2C6A6B;
  transition: width .22s cubic-bezier(.22,.61,.36,1);
}
.ccc-nav a:hover::after { width: 100%; }

.ccc-nav-desktop { display: flex; align-items: center; gap: 30px; }
.ccc-hamburger { display: none; }
.ccc-mobile-menu { display: none; }
.ccc-mobile-menu.is-open { display: flex; }

.ccc-hamburger svg { display: block; flex: none; }
.ccc-hamburger .icon-close { display: none; }
.ccc-hamburger.is-open .icon-menu { display: none; }
.ccc-hamburger.is-open .icon-close { display: block; }

@media (max-width: 880px) {
  .ccc-nav-desktop { display: none !important; }
  .ccc-hamburger { display: inline-flex !important; }
  .ccc-mobile-menu.is-open { display: flex !important; }
  .ccc-headbar { padding: 12px 18px !important; }
  .ccc-sect { padding-left: 20px !important; padding-right: 20px !important; padding-top: 58px !important; padding-bottom: 58px !important; }
  .ccc-hero-grid, .ccc-2col { grid-template-columns: 1fr !important; gap: 40px !important; }
  .ccc-3col { grid-template-columns: 1fr !important; }
  .ccc-journey-row { grid-template-columns: 1fr !important; gap: 12px !important; padding: 22px 0 !important; }
  .ccc-callout { grid-template-columns: 1fr !important; gap: 20px !important; padding: 30px 26px !important; }
  .ccc-hero-h1 { font-size: 33px !important; }
  .ccc-h2 { font-size: 28px !important; }
  .ccc-hero-img, .ccc-about-img { width: 76vw !important; max-width: 300px !important; height: auto !important; aspect-ratio: 5 / 6 !important; }
  .ccc-cta-inner { padding: 42px 22px !important; }
  .ccc-cta-h2 { font-size: 27px !important; }
  .ccc-footer { padding-left: 22px !important; padding-right: 22px !important; }

  /* contact page */
  .ccc-contact-hero { padding-top: 48px !important; }
  .ccc-h1 { font-size: 33px !important; }
  .ccc-form-iframe { height: 1850px !important; }
}
@media (max-width: 480px) {
  .ccc-hero-h1 { font-size: 29px !important; }
  .ccc-h2 { font-size: 25px !important; }
  .ccc-h1 { font-size: 28px !important; }
}