/**
 * iKonyk Solutions — Components
 * Buttons, cards, forms. Depends on tokens.css.
 */

/* ─── Buttons ─── */
.wp-block-button__link,
.gb-button {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1rem;
  border-radius: var(--radius-button) !important;
  padding: 14px 28px;
  transition: background-color 0.15s ease, color 0.15s ease;
  text-decoration: none !important;
}

/* Primary — amber fill (default; also matches is-style-fill) */
.wp-block-button .wp-block-button__link,
.wp-block-button.is-style-fill .wp-block-button__link {
  background-color: var(--color-accent-600) !important;
  color: var(--color-white) !important;
  border: none !important;
}
.wp-block-button .wp-block-button__link:hover,
.wp-block-button.is-style-fill .wp-block-button__link:hover {
  background-color: var(--color-accent-700) !important;
}

/* Secondary — brand outline */
.wp-block-button.is-style-outline .wp-block-button__link {
  background-color: transparent;
  color: var(--color-brand-500) !important;
  border: 2px solid var(--color-brand-500);
}
.wp-block-button.is-style-outline .wp-block-button__link:hover {
  background-color: var(--color-brand-500);
  color: var(--color-white) !important;
}

/* Ghost — white outline for dark backgrounds */
.ik-btn-ghost .wp-block-button__link {
  background-color: transparent !important;
  color: var(--color-white) !important;
  border: 2px solid var(--color-white) !important;
}
.ik-btn-ghost .wp-block-button__link:hover {
  background-color: var(--color-white) !important;
  color: var(--color-primary-900) !important;
}

/* ─── Section Layout (reused by every content section) ─── */
.ik-section {
  background-color: var(--color-neutral-50);
  padding: 80px max(var(--padding-min), 5vw);
}

.ik-section--white {
  background-color: var(--color-white);
}

.ik-section--dark {
  background-color: var(--color-primary-900);
}
.ik-section--dark h2,
.ik-section--dark h3,
.ik-section--dark p { color: var(--color-white); }
.ik-section--dark p  { color: var(--color-neutral-300); }

.ik-section-inner {
  max-width: 800px;
  margin: 0 auto;
}

.ik-section-inner--wide {
  max-width: 1100px;
}

@media (max-width: 600px) {
  .ik-section { padding: 48px var(--padding-min); }
}

/* ─── Section Heading (centred title above a grid or list) ─── */
.ik-section-heading {
  text-align: center;
  margin-bottom: 2.5rem;
  color: var(--color-neutral-950);
}

/* ─── Cards ─── */
.ik-card {
  background-color: var(--color-white);
  border-radius: var(--radius-card);
  padding: var(--padding-min);
  border: 1px solid var(--color-neutral-300);
}