/**
 * Layout utility classes for Lackadaisical Security Website
 * Updated for dark theme
 */

/* Container */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.container-sm {
  max-width: 900px;
}

.container-lg {
  max-width: 1400px;
}

/* Section spacing */
.section {
  padding: 80px 0;
}

.section-sm {
  padding: 40px 0;
}

.section-lg {
  padding: 120px 0;
}

/* Background utilities */
.bg-primary {
  background-color: var(--primary-color);
  color: var(--light-text);
}

.bg-dark {
  background-color: var(--dark-bg);
  color: var(--light-text);
}

.bg-darker {
  background-color: var(--darker-bg);
  color: var(--light-text);
}

.bg-medium {
  background-color: var(--medium-bg);
  color: var(--light-text);
}

.bg-card {
  background-color: var(--card-bg);
  color: var(--light-text);
}

/* Gradient backgrounds */
.bg-gradient-primary {
  background-image: var(--gradient-primary);
  color: var(--light-text);
}

.bg-gradient-accent {
  background-image: var(--gradient-accent);
  color: var(--light-text);
}

.bg-gradient-card {
  background-image: var(--gradient-card);
  color: var(--light-text);
}

/* Text colors */
.text-primary {
  color: var(--primary-color);
}

.text-accent {
  color: var(--accent-color);
}

.text-light {
  color: var(--light-text);
}

.text-white {
  color: var(--highlight-text);
}

.text-medium {
  color: var(--medium-text);
}

.text-muted {
  color: var(--muted-text);
}

/* Text alignment */
.text-center {
  text-align: center;
}

.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}

/* Flex utilities */
.d-flex {
  display: flex;
}

.flex-column {
  flex-direction: column;
}

.justify-content-between {
  justify-content: space-between;
}

.justify-content-center {
  justify-content: center;
}

.align-items-center {
  align-items: center;
}

.flex-wrap {
  flex-wrap: wrap;
}

/* Margin utilities */
.mb-1 { margin-bottom: 0.25rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-3 { margin-bottom: 1rem; }
.mb-4 { margin-bottom: 1.5rem; }
.mb-5 { margin-bottom: 3rem; }

.mt-1 { margin-top: 0.25rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-3 { margin-top: 1rem; }
.mt-4 { margin-top: 1.5rem; }
.mt-5 { margin-top: 3rem; }

/* Padding utilities */
.p-1 { padding: 0.25rem; }
.p-2 { padding: 0.5rem; }
.p-3 { padding: 1rem; }
.p-4 { padding: 1.5rem; }
.p-5 { padding: 3rem; }

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

.col {
  flex: 1 0 0%;
  padding-right: 15px;
  padding-left: 15px;
}

.col-auto {
  flex: 0 0 auto;
  padding-right: 15px;
  padding-left: 15px;
}

/* Responsive columns */
.col-12 { flex: 0 0 100%; max-width: 100%; }
.col-6 { flex: 0 0 50%; max-width: 50%; }
.col-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
.col-3 { flex: 0 0 25%; max-width: 25%; }

@media (max-width: 992px) {
  .col-lg-12 { flex: 0 0 100%; max-width: 100%; }
  .col-lg-6 { flex: 0 0 50%; max-width: 50%; }
}

@media (max-width: 768px) {
  .col-md-12 { flex: 0 0 100%; max-width: 100%; }
  .col-md-6 { flex: 0 0 50%; max-width: 50%; }
}

@media (max-width: 576px) {
  .col-sm-12 { flex: 0 0 100%; max-width: 100%; }
}

/* Responsive visibility */
@media (max-width: 768px) {
  .d-md-none { display: none !important; }
  .d-md-block { display: block !important; }
  .d-md-flex { display: flex !important; }
}

@media (max-width: 576px) {
  .d-sm-none { display: none !important; }
  .d-sm-block { display: block !important; }
  .d-sm-flex { display: flex !important; }
}