/**
 * Custom Styles
 * Add your project-specific styles here
 *
 * This file is loaded after all Domma CSS files, so you can:
 * - Override Domma styles
 * - Add your own component styles
 * - Customize the theme
 *
 * Available CSS variables from Domma:
 * - Colors: --dm-primary, --dm-secondary, --dm-success, --dm-danger, etc.
 * - Spacing: --dm-space-1 through --dm-space-16
 * - Typography: --dm-font-sans, --dm-font-mono, --dm-font-size-*
 * - Borders: --dm-radius-*, --dm-border, --dm-shadow-*
 */

/* Example: Custom button style */
.btn-custom {
    background: var(--dm-primary);
    color: white;
    padding: var(--dm-space-3) var(--dm-space-5);
    border-radius: var(--dm-radius-md);
    transition: all 0.2s ease;
}

.btn-custom:hover {
    background: var(--dm-primary-hover);
    transform: translateY(-2px);
}

/* Example: Custom card variant */
.card-highlight {
    border-left: 4px solid var(--dm-primary);
    background: var(--dm-surface-raised);
}

/* Add your custom styles below */

/* Bootstrap Grid Classes for Large Screens */
@media (min-width: 992px) {
  .col-lg-1 {
    flex: 0 0 8.333333% !important;
    max-width: 8.333333% !important;
  }
  .col-lg-2 {
    flex: 0 0 16.666667% !important;
    max-width: 16.666667% !important;
  }
  .col-lg-3 {
    flex: 0 0 25% !important;
    max-width: 25% !important;
  }
  .col-lg-4 {
    flex: 0 0 33.333333% !important;
    max-width: 33.333333% !important;
  }
  .col-lg-5 {
    flex: 0 0 41.666667% !important;
    max-width: 41.666667% !important;
  }
  .col-lg-6 {
    flex: 0 0 50% !important;
    max-width: 50% !important;
  }
  .col-lg-7 {
    flex: 0 0 58.333333% !important;
    max-width: 58.333333% !important;
  }
  .col-lg-8 {
    flex: 0 0 66.666667% !important;
    max-width: 66.666667% !important;
  }
  .col-lg-9 {
    flex: 0 0 75% !important;
    max-width: 75% !important;
  }
  .col-lg-10 {
    flex: 0 0 83.333333% !important;
    max-width: 83.333333% !important;
  }
  .col-lg-11 {
    flex: 0 0 91.666667% !important;
    max-width: 91.666667% !important;
  }
  .col-lg-12 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
}

/* Bootstrap Grid Classes for Medium Screens */
@media (min-width: 768px) {
  .col-md-1 {
    flex: 0 0 8.333333%;
    max-width: 8.333333%;
  }
  .col-md-2 {
    flex: 0 0 16.666667%;
    max-width: 16.666667%;
  }
  .col-md-3 {
    flex: 0 0 25%;
    max-width: 25%;
  }
  .col-md-4 {
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
  }
  .col-md-5 {
    flex: 0 0 41.666667%;
    max-width: 41.666667%;
  }
  .col-md-6 {
    flex: 0 0 50%;
    max-width: 50%;
  }
  .col-md-7 {
    flex: 0 0 58.333333%;
    max-width: 58.333333%;
  }
  .col-md-8 {
    flex: 0 0 66.666667%;
    max-width: 66.666667%;
  }
  .col-md-9 {
    flex: 0 0 75%;
    max-width: 75%;
  }
  .col-md-10 {
    flex: 0 0 83.333333%;
    max-width: 83.333333%;
  }
  .col-md-11 {
    flex: 0 0 91.666667%;
    max-width: 91.666667%;
  }
  .col-md-12 {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

/* Ensure proper padding for grid columns */
[class*="col-"] {
  position: relative;
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
}

/* Row adjustments */
.row {
  display: flex;
  flex-wrap: wrap;
  margin-right: -15px;
  margin-left: -15px;
}

/* Honeypot field - hide from humans but keep in DOM for bots */
.hp-field {
  position: absolute;
  left: -9999px;
  opacity: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
}