/* =========================================================
   HiPark Components CSS
   WordPress / Flatsome / UX Builder

   Load order:
   1. hipark-design-tokens.css
   2. hipark-components.css
   3. hipark-blocks.css

   Purpose:
   - Shared, HiPark-prefixed reusable component classes.
   - Safe for new blocks and gradual refactors.
   - Do not remove unique block wrapper classes.
   ========================================================= */

/* =========================================================
   Layout
   ========================================================= */

.hipark-container {
  max-width: var(--hipark-container);
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

.hipark-container--narrow {
  max-width: var(--hipark-container-narrow);
}

.hipark-container--footer {
  max-width: var(--hipark-container-footer);
}
/* =========================================================
   Buttons
   ========================================================= */

.hipark-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 14px 24px;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  border: 0;
  cursor: pointer;
  transition: all 0.2s ease;
}

.hipark-button:hover,
.hipark-button:focus {
  text-decoration: none;
}

.hipark-button:hover {
  transform: translateY(-1px);
}

/* Prevent WordPress / Flatsome auto <br> from breaking button height */
.hipark-button br {
  display: none;
}

/* Primary button */

.hipark-button--primary {
  background: #002b7d;
  color: #ffffff;
  box-shadow: 0 12px 24px rgba(0, 43, 125, 0.22);
}

.hipark-button--primary:hover,
.hipark-button--primary:focus {
  background: #001f5c;
  color: #ffffff;
}

/* Secondary button */

.hipark-button--secondary {
  background: #ffffff;
  color: #002b7d;
  border: 1px solid rgba(0, 43, 125, 0.28);
  box-shadow: none;
}

.hipark-button--secondary:hover,
.hipark-button--secondary:focus {
  background: #f1f6ff;
  color: #002b7d;
  border-color: rgba(0, 43, 125, 0.28);
}

/* Dark section primary button */

.hipark-button--dark-primary {
  background: #ffffff;
  color: #002b7d;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.16);
}

.hipark-button--dark-primary:hover,
.hipark-button--dark-primary:focus {
  background: #f1f6ff;
  color: #002b7d;
}

/* Dark section secondary button */

.hipark-button--dark-secondary {
  background: transparent;
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.34);
  box-shadow: none;
}

.hipark-button--dark-secondary:hover,
.hipark-button--dark-secondary:focus {
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.52);
}

/* Compact button */

.hipark-button--compact {
  min-width: 118px;
  min-height: 44px;
  padding: 11px 20px;
  border-radius: 9px;
  font-size: 14px;
  font-weight: 700;
}

.hipark-button--compact.hipark-button--primary {
  box-shadow: 0 10px 20px rgba(0, 43, 125, 0.2);
}

/* Full width button */

.hipark-button--full {
  width: 100%;
}
/* =========================================================
   Eyebrows / small labels
   ========================================================= */

.hipark-eyebrow {
  display: inline-flex;
  align-items: center;
  border-radius: var(--hipark-radius-pill);
  padding: 8px 14px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
}

.hipark-eyebrow--light {
  color: var(--hipark-blue);
  background: rgba(0, 43, 125, 0.07);
  border: 1px solid rgba(0, 43, 125, 0.12);
}

.hipark-eyebrow--accent {
  color: var(--hipark-blue);
  background: rgba(32, 149, 184, 0.08);
  border: 1px solid rgba(32, 149, 184, 0.18);
}

.hipark-eyebrow--dark {
  color: var(--hipark-white);
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.18);
}

.hipark-eyebrow--text {
  padding: 0;
  border-radius: 0;
  color: var(--hipark-blue);
  background: transparent;
  border: 0;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* =========================================================
   Text helpers for new blocks
   ========================================================= */

.hipark-section-title {
  color: var(--hipark-ink);
  font-size: clamp(32px, 3.2vw, 48px);
  line-height: 1.12;
  font-weight: 800;
  letter-spacing: -0.035em;
  margin: 0 0 18px;
}

.hipark-section-lead {
  color: var(--hipark-text);
  font-size: 18px;
  line-height: 1.65;
  margin: 0;
}

.hipark-section-title--light,
.hipark-section-lead--light {
  color: var(--hipark-white);
}

.hipark-section-lead--light {
  opacity: 0.84;
}

/* =========================================================
   Cards for new blocks
   ========================================================= */

.hipark-card {
  border-radius: var(--hipark-radius-card);
  padding: 26px 24px;
  box-shadow: var(--hipark-shadow-card-soft);
  transition: var(--hipark-transition-card);
}

.hipark-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--hipark-shadow-card-hover);
}

.hipark-card--soft {
  background: var(--hipark-bg-soft);
  border: 1px solid rgba(0, 43, 125, 0.08);
}

.hipark-card--white {
  background: var(--hipark-white);
  border: 1px solid rgba(0, 43, 125, 0.1);
}

.hipark-card--dark {
  background: var(--hipark-ink);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: var(--hipark-white);
  box-shadow: var(--hipark-shadow-panel-dark);
}

.hipark-card--accent {
  background: linear-gradient(135deg, var(--hipark-blue) 0%, #0647b5 100%);
  border: 1px solid rgba(0, 43, 125, 0.16);
  color: var(--hipark-white);
}

/* =========================================================
   Mobile helpers
   ========================================================= */

@media (max-width: 640px) {
  .hipark-button--mobile-full {
    width: 100%;
  }

  .hipark-eyebrow {
    font-size: 12px;
    padding: 7px 12px;
  }

  .hipark-section-title {
    font-size: 31px;
  }

  .hipark-section-lead {
    font-size: 16.5px;
  }

  .hipark-card {
    padding: 24px 22px;
    border-radius: var(--hipark-radius-lg);
  }
}