/* =============================================================================
   UTILITY / HELPER CLASSES
   Add these directly in Drupal:
     - Block "CSS class" field
     - CKEditor "Source" or "Styles" dropdown
     - Views row/wrapper CSS classes
     - Paragraph CSS field
     - Layout Builder section/block CSS classes
   ============================================================================= */


/* =============================================================================
   1. HEADING UTILITIES — spacing & style overrides
   ============================================================================= */

/* Size overrides */
.h1 { font-size: var(--text-4xl); font-family: var(--font-serif); font-weight: var(--font-extrabold); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); }
.h2 { font-size: var(--text-3xl); font-family: var(--font-serif); font-weight: var(--font-bold);      line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); }
.h3 { font-size: var(--text-2xl); font-family: var(--font-serif); font-weight: var(--font-bold);      line-height: var(--leading-snug); }
.h4 { font-size: var(--text-xl);  font-family: var(--font-sans);  font-weight: var(--font-semibold);  line-height: var(--leading-snug); }
.h5 { font-size: var(--text-lg);  font-family: var(--font-sans);  font-weight: var(--font-semibold);  line-height: var(--leading-normal); }
.h6 { font-size: var(--text-base);font-family: var(--font-sans);  font-weight: var(--font-semibold);  line-height: var(--leading-normal); letter-spacing: var(--tracking-wide); text-transform: uppercase; }

/* Margin-top helpers for headings */
.heading-mt-sm  { margin-top: var(--space-4);  }
.heading-mt-md  { margin-top: var(--space-8);  }
.heading-mt-lg  { margin-top: var(--space-12); }
.heading-mt-xl  { margin-top: var(--space-16); }

/* Margin-bottom helpers */
.heading-mb-sm  { margin-bottom: var(--space-3);  }
.heading-mb-md  { margin-bottom: var(--space-6);  }
.heading-mb-lg  { margin-bottom: var(--space-10); }

/* Decorative heading — gradient text */
.heading-gradient {
  background: var(--gradient-text);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Centered heading with underline accent */
.heading-center {
  text-align: center;
}

.heading-underline {
  position: relative;
  display: inline-block;
  padding-bottom: var(--space-3);
}

.heading-underline::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 60px;
  height: 3px;
  background: var(--gradient-brand);
  border-radius: var(--radius-full);
}

.heading-center.heading-underline::after {
  left: 50%;
  transform: translateX(-50%);
}

/* Section title pattern — label + heading */
.section-label {
  display: block;
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-brand-text);
  margin-bottom: var(--space-3);
}


/* =============================================================================
   2. BUTTON CLASSES — drop onto any <a>, <button>, or <input type="submit">
   ============================================================================= */

/* ── Base ── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-full);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  line-height: 1.2;
  letter-spacing: var(--tracking-wide);
  text-decoration: none;
  border: 2px solid transparent;
  cursor: pointer;
  transition:
    transform       var(--transition-fast),
    box-shadow      var(--transition-fast),
    background      var(--transition-fast),
    color           var(--transition-fast),
    border-color    var(--transition-fast);
  white-space: nowrap;
  position: relative;
  overflow: hidden;
  -webkit-appearance: none;
  appearance: none;
}

.btn:active {
  transform: translateY(1px);
}

/* ── Primary — gradient brand ── */
.btn-primary,
.btn--primary {
  background: var(--gradient-brand);
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(99, 102, 241, 0.35);
}

.btn-primary:hover,
.btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(99, 102, 241, 0.5);
  color: #ffffff !important;
}

/* ── Secondary — outline brand ── */
.btn-secondary,
.btn--secondary {
  background: transparent;
  color: var(--color-brand-text);
  border-color: var(--color-border-brand);
}

.btn-secondary:hover,
.btn--secondary:hover {
  background: var(--color-brand-subtle);
  border-color: var(--color-brand);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

/* ── Outline (ghost) ── */
.btn-outline,
.btn--outline {
  background: transparent;
  color: var(--color-text-secondary);
  border-color: var(--color-border-strong);
}

.btn-outline:hover,
.btn--outline:hover {
  background: var(--color-bg-secondary);
  border-color: var(--color-text-muted);
  color: var(--color-text);
}

/* ── Accent — Cyan ── */
.btn-accent,
.btn--accent {
  background: linear-gradient(135deg, var(--color-accent-500), var(--color-primary-500));
  color: #ffffff !important;
  box-shadow: var(--shadow-accent);
}

.btn-accent:hover,
.btn--accent:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(6, 182, 212, 0.4);
  color: #ffffff !important;
}

/* ── Dark ── */
.btn-dark,
.btn--dark {
  background: #0F172A;
  color: #F1F5F9 !important;
  border-color: #0F172A;
}

.btn-dark:hover,
.btn--dark:hover {
  background: #1E293B;
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
  color: #ffffff !important;
}

/* ── White ── */
.btn-white,
.btn--white {
  background: #ffffff;
  color: var(--color-primary-600) !important;
  border-color: transparent;
  box-shadow: var(--shadow-md);
}

.btn-white:hover,
.btn--white:hover {
  background: var(--color-primary-50);
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

/* ── Sizes ── */
.btn-xs,
.btn--xs {
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-xs);
  border-radius: var(--radius-full);
}

.btn-sm,
.btn--sm {
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-xs);
}

.btn-lg,
.btn--lg {
  padding: var(--space-4) var(--space-8);
  font-size: var(--text-base);
}

.btn-xl,
.btn--xl {
  padding: var(--space-5) var(--space-10);
  font-size: var(--text-lg);
  border-radius: var(--radius-full);
}

/* ── Full width ── */
.btn-block,
.btn--block {
  width: 100%;
  justify-content: center;
}

/* ── Rounded (square) ── */
.btn-rounded,
.btn--rounded {
  border-radius: var(--radius-lg);
}

/* ── Disabled state ── */
.btn[disabled],
.btn.disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}


/* =============================================================================
   3. TEXT UTILITIES
   ============================================================================= */

.text-xs        { font-size: var(--text-xs) !important; }
.text-sm        { font-size: var(--text-sm) !important; }
.text-base      { font-size: var(--text-base) !important; }
.text-lg        { font-size: var(--text-lg) !important; }
.text-xl        { font-size: var(--text-xl) !important; }
.text-2xl       { font-size: var(--text-2xl) !important; }
.text-3xl       { font-size: var(--text-3xl) !important; }
.text-4xl       { font-size: var(--text-4xl) !important; }

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

.text-normal    { font-weight: var(--font-normal) !important; }
.text-medium    { font-weight: var(--font-medium) !important; }
.text-semibold  { font-weight: var(--font-semibold) !important; }
.text-bold      { font-weight: var(--font-bold) !important; }

.text-primary   { color: var(--color-brand-text) !important; }
.text-muted     { color: var(--color-text-muted) !important; }
.text-white     { color: #ffffff !important; }
.text-dark      { color: var(--color-text) !important; }
.text-success   { color: var(--color-emerald-600) !important; }
.text-warning   { color: var(--color-amber-500) !important; }
.text-danger    { color: var(--color-rose-500) !important; }

.text-uppercase { text-transform: uppercase !important; letter-spacing: var(--tracking-wider) !important; }
.text-italic    { font-style: italic !important; }
.text-truncate  { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.lead {
  font-size: var(--text-lg);
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
}


/* =============================================================================
   4. SPACING UTILITIES — margin & padding
   ============================================================================= */

/* Margin top */
.mt-0  { margin-top: 0 !important; }
.mt-1  { margin-top: var(--space-1) !important; }
.mt-2  { margin-top: var(--space-2) !important; }
.mt-3  { margin-top: var(--space-3) !important; }
.mt-4  { margin-top: var(--space-4) !important; }
.mt-6  { margin-top: var(--space-6) !important; }
.mt-8  { margin-top: var(--space-8) !important; }
.mt-10 { margin-top: var(--space-10) !important; }
.mt-12 { margin-top: var(--space-12) !important; }
.mt-16 { margin-top: var(--space-16) !important; }

/* Margin bottom */
.mb-0  { margin-bottom: 0 !important; }
.mb-1  { margin-bottom: var(--space-1) !important; }
.mb-2  { margin-bottom: var(--space-2) !important; }
.mb-3  { margin-bottom: var(--space-3) !important; }
.mb-4  { margin-bottom: var(--space-4) !important; }
.mb-6  { margin-bottom: var(--space-6) !important; }
.mb-8  { margin-bottom: var(--space-8) !important; }
.mb-10 { margin-bottom: var(--space-10) !important; }
.mb-12 { margin-bottom: var(--space-12) !important; }
.mb-16 { margin-bottom: var(--space-16) !important; }

/* Margin inline (left + right) */
.mx-auto { margin-inline: auto !important; }
.mx-0    { margin-inline: 0 !important; }
.mx-4    { margin-inline: var(--space-4) !important; }
.mx-8    { margin-inline: var(--space-8) !important; }

/* Padding */
.p-0  { padding: 0 !important; }
.p-2  { padding: var(--space-2) !important; }
.p-4  { padding: var(--space-4) !important; }
.p-6  { padding: var(--space-6) !important; }
.p-8  { padding: var(--space-8) !important; }

.pt-0  { padding-top: 0 !important; }
.pt-4  { padding-top: var(--space-4) !important; }
.pt-8  { padding-top: var(--space-8) !important; }
.pt-12 { padding-top: var(--space-12) !important; }
.pt-16 { padding-top: var(--space-16) !important; }

.pb-0  { padding-bottom: 0 !important; }
.pb-4  { padding-bottom: var(--space-4) !important; }
.pb-8  { padding-bottom: var(--space-8) !important; }
.pb-12 { padding-bottom: var(--space-12) !important; }
.pb-16 { padding-bottom: var(--space-16) !important; }

.px-4  { padding-inline: var(--space-4) !important; }
.px-6  { padding-inline: var(--space-6) !important; }
.px-8  { padding-inline: var(--space-8) !important; }

.py-4  { padding-block: var(--space-4) !important; }
.py-6  { padding-block: var(--space-6) !important; }
.py-8  { padding-block: var(--space-8) !important; }
.py-12 { padding-block: var(--space-12) !important; }
.py-16 { padding-block: var(--space-16) !important; }


/* =============================================================================
   5. BACKGROUND & SURFACE UTILITIES
   ============================================================================= */

.bg-white     { background-color: #ffffff !important; }
.bg-light     { background-color: var(--color-bg) !important; }
.bg-muted     { background-color: var(--color-bg-secondary) !important; }
.bg-surface   { background-color: var(--color-surface) !important; }
.bg-primary   { background: var(--gradient-brand) !important; color: #ffffff !important; }
.bg-dark      { background-color: #0F172A !important; color: #F1F5F9 !important; }
.bg-accent    { background: linear-gradient(135deg, var(--color-accent-500), var(--color-primary-500)) !important; color: #ffffff !important; }


/* =============================================================================
   6. BORDER UTILITIES
   ============================================================================= */

.border        { border: 1px solid var(--color-border) !important; }
.border-top    { border-top: 1px solid var(--color-border) !important; }
.border-bottom { border-bottom: 1px solid var(--color-border) !important; }
.border-brand  { border-color: var(--color-border-brand) !important; }
.border-none   { border: none !important; }

.rounded-sm  { border-radius: var(--radius-sm) !important; }
.rounded-md  { border-radius: var(--radius-md) !important; }
.rounded-lg  { border-radius: var(--radius-lg) !important; }
.rounded-xl  { border-radius: var(--radius-xl) !important; }
.rounded-2xl { border-radius: var(--radius-2xl) !important; }
.rounded-full{ border-radius: var(--radius-full) !important; }


/* =============================================================================
   7. SHADOW UTILITIES
   ============================================================================= */

.shadow-none  { box-shadow: none !important; }
.shadow-sm    { box-shadow: var(--shadow-sm) !important; }
.shadow-md    { box-shadow: var(--shadow-md) !important; }
.shadow-lg    { box-shadow: var(--shadow-lg) !important; }
.shadow-xl    { box-shadow: var(--shadow-xl) !important; }
.shadow-brand { box-shadow: var(--shadow-brand) !important; }


/* =============================================================================
   8. DISPLAY & LAYOUT UTILITIES
   ============================================================================= */

.d-none    { display: none !important; }
.d-block   { display: block !important; }
.d-flex    { display: flex !important; }
.d-grid    { display: grid !important; }
.d-inline  { display: inline !important; }
.d-inline-flex { display: inline-flex !important; }

.flex-row    { flex-direction: row !important; }
.flex-col    { flex-direction: column !important; }
.flex-wrap   { flex-wrap: wrap !important; }
.flex-nowrap { flex-wrap: nowrap !important; }

.items-center  { align-items: center !important; }
.items-start   { align-items: flex-start !important; }
.items-end     { align-items: flex-end !important; }

.justify-start   { justify-content: flex-start !important; }
.justify-center  { justify-content: center !important; }
.justify-end     { justify-content: flex-end !important; }
.justify-between { justify-content: space-between !important; }

.gap-2  { gap: var(--space-2) !important; }
.gap-3  { gap: var(--space-3) !important; }
.gap-4  { gap: var(--space-4) !important; }
.gap-6  { gap: var(--space-6) !important; }
.gap-8  { gap: var(--space-8) !important; }

.w-full  { width: 100% !important; }
.w-auto  { width: auto !important; }
.h-full  { height: 100% !important; }

.overflow-hidden { overflow: hidden !important; }
.position-relative { position: relative !important; }


/* =============================================================================
   9. CARD / BOX COMPONENT CLASSES
   ============================================================================= */

/* Generic content box */
.box {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
}

.box--brand {
  background: var(--color-brand-subtle);
  border-color: var(--color-border-brand);
}

.box--dark {
  background: #0F172A;
  border-color: #1E293B;
  color: #F1F5F9;
}

.box--shadow {
  box-shadow: var(--shadow-lg);
  border: none;
}

/* Callout / notice box */
.callout {
  padding: var(--space-5) var(--space-6);
  border-left: 4px solid var(--color-brand);
  background: var(--color-brand-subtle);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  margin-block: var(--space-8);
}

.callout--success {
  border-left-color: var(--color-emerald-500);
  background: rgba(16, 185, 129, 0.08);
}

.callout--warning {
  border-left-color: var(--color-amber-500);
  background: rgba(245, 158, 11, 0.08);
}

.callout--danger {
  border-left-color: var(--color-rose-500);
  background: rgba(244, 63, 94, 0.08);
}


/* =============================================================================
   10. BADGE / CHIP / TAG UTILITIES
   ============================================================================= */

.badge {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--space-2);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  letter-spacing: var(--tracking-wide);
  line-height: 1.6;
}

.badge-primary { background: var(--gradient-brand); color: #ffffff; }
.badge-muted   { background: var(--color-bg-secondary); color: var(--color-text-muted); border: 1px solid var(--color-border); }
.badge-success { background: rgba(16,185,129,0.1); color: var(--color-emerald-600); border: 1px solid var(--color-emerald-400); }
.badge-warning { background: rgba(245,158,11,0.1); color: #92400E; border: 1px solid var(--color-amber-400); }
.badge-danger  { background: rgba(244,63,94,0.1); color: var(--color-rose-500); border: 1px solid var(--color-rose-400); }


/* =============================================================================
   11. DIVIDER UTILITIES
   ============================================================================= */

.divider {
  border: none;
  height: 1px;
  background: var(--color-border);
  margin-block: var(--space-8);
}

.divider-gradient {
  border: none;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--color-border-brand), transparent);
  margin-block: var(--space-10);
}


/* =============================================================================
   12. VISIBILITY UTILITIES
   ============================================================================= */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

.hidden-mobile  { display: none !important; }
@media (min-width: 768px) {
  .hidden-mobile  { display: revert !important; }
  .hidden-desktop { display: none !important; }
}