/* Overrides to make Bootstrap 5 elements match the Quran Seekers Academy visual language */

/* Grid and Containers adjustment */
.row {
  --bs-gutter-x: var(--space-4);
  --bs-gutter-y: var(--space-4);
}

/* Accordion Override (for FAQs) */
.accordion {
  --bs-accordion-bg: var(--color-warm-white);
  --bs-accordion-border-color: var(--color-border);
  --bs-accordion-border-radius: var(--border-radius-md);
  --bs-accordion-inner-border-radius: calc(var(--border-radius-md) - 1px);
  --bs-accordion-btn-padding-x: var(--space-5);
  --bs-accordion-btn-padding-y: var(--space-4);
  --bs-accordion-btn-color: var(--color-deep-green);
  --bs-accordion-btn-bg: var(--color-warm-white);
  --bs-accordion-btn-focus-box-shadow: none;
  --bs-accordion-active-color: var(--color-gold);
  --bs-accordion-active-bg: var(--color-navy);
  --bs-accordion-body-padding-x: var(--space-5);
  --bs-accordion-body-padding-y: var(--space-4);
}

.accordion-item {
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-md);
  margin-bottom: var(--space-3);
  overflow: hidden;
  box-shadow: var(--shadow-subtle);
  transition: var(--transition-smooth);
}

.accordion-item:hover {
  border-color: rgba(197, 146, 63, 0.4);
}

.accordion-button {
  font-family: var(--font-family-serif);
  font-size: var(--font-md);
  font-weight: 600;
}

.accordion-button:not(.collapsed) {
  color: var(--color-ivory);
  background-color: var(--color-deep-green);
}

.accordion-button::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%230A302E'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
}

.accordion-button:not(.collapsed)::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23F8F3E8'%3E%3Cpath fill-rule='evenodd' d='M7.646 4.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1-.708.708L8 5.707l-5.646 5.647a.5.5 0 0 1-.708-.708l6-6z'/%3E%3C/svg%3E");
}

/* Offcanvas Navigation Override */
.offcanvas {
  --bs-offcanvas-bg: var(--color-midnight);
  --bs-offcanvas-color: var(--color-ivory);
  --bs-offcanvas-border-color: rgba(235, 220, 194, 0.1);
  --bs-offcanvas-width: 320px;
}

.offcanvas-header {
  border-bottom: 1px solid rgba(235, 220, 194, 0.1);
  padding: var(--space-4);
}

.offcanvas-body {
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
}

/* Modal Override */
.modal-content {
  background-color: var(--color-warm-white);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-premium);
}

.modal-header {
  border-bottom: 1px solid var(--color-border);
  padding: var(--space-4) var(--space-5);
}

.modal-body {
  padding: var(--space-5);
}

.modal-footer {
  border-top: 1px solid var(--color-border);
  padding: var(--space-4) var(--space-5);
}

/* Form Controls Override */
.form-control, .form-select {
  background-color: var(--color-warm-white);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-md);
  padding: 0.75rem var(--space-4);
  font-family: var(--font-family-sans);
  font-size: var(--font-base);
  color: var(--color-ink);
  transition: var(--transition-fast);
}

.form-control:focus, .form-select:focus {
  background-color: var(--color-warm-white);
  border-color: var(--color-teal);
  box-shadow: 0 0 0 3px rgba(25, 83, 76, 0.15);
  color: var(--color-ink);
  outline: none;
}

.form-label {
  font-weight: 500;
  font-size: var(--font-sm);
  color: var(--color-deep-green);
  margin-bottom: var(--space-2);
}