/**
 * Custom Bootstrap 5 Theme Variables
 * Extracted from previous Bootstrap 4 theme.css
 * Custom color scheme and Montserrat font
 */

/* Import Montserrat font from Google Fonts */
@import url(https://fonts.googleapis.com/css?family=Montserrat:200,300,400,700);

:root {
  /* Custom brand colors */
  --bs-primary: #d8a5ab;
  --bs-primary-rgb: 216, 165, 171;
  --bs-secondary: #f7dad7;
  --bs-secondary-rgb: 247, 218, 215;
  --bs-success: #28a745;
  --bs-success-rgb: 40, 167, 69;
  --bs-info: #a9aeb2;
  --bs-info-rgb: 169, 174, 178;
  --bs-warning: #e0a800;
  --bs-warning-rgb: 224, 168, 0;
  --bs-danger: #dc3545;
  --bs-danger-rgb: 220, 53, 69;
  --bs-light: #fdf7f5;
  --bs-light-rgb: 253, 247, 245;
  --bs-dark: #222;
  --bs-dark-rgb: 34, 34, 34;

  /* Custom font family - Montserrat */
  --bs-body-font-family: Montserrat, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --bs-font-sans-serif: Montserrat, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
}

/* Apply Montserrat font to body */
body {
  font-family: Montserrat, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
}

/* Apply Montserrat to headings */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: Montserrat, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
}

/* Override Bootstrap 5 utility classes with custom colors */
.bg-primary {
  background-color: #d8a5ab !important;
}

.bg-secondary {
  background-color: #f7dad7 !important;
}

.bg-light {
  background-color: #fdf7f5 !important;
}

.bg-dark {
  background-color: #222 !important;
}

.text-primary {
  color: #d8a5ab !important;
}

.text-secondary {
  color: #f7dad7 !important;
}

.text-light {
  color: #fdf7f5 !important;
}

.text-dark {
  color: #222 !important;
}

.btn-primary {
  background-color: #d8a5ab;
  border-color: #d8a5ab;
  color: #fff;
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: #cf939a;
  border-color: #cf939a;
  color: #fff;
}

.btn-secondary {
  background-color: #f7dad7;
  border-color: #f7dad7;
  color: #222;
}

.btn-secondary:hover,
.btn-secondary:focus {
  background-color: #f4cac6;
  border-color: #f4cac6;
  color: #222;
}

.alert-primary {
  background-color: rgba(216, 165, 171, 0.1);
  border-color: #d8a5ab;
  color: #6d525a;
}

.alert-secondary {
  background-color: rgba(247, 218, 215, 0.1);
  border-color: #f7dad7;
  color: #7c6e6b;
}

.alert-warning {
  background-color: #f9eecc;
  border-color: #f6e7b8;
  color: #745700;
}

.alert-info {
  background-color: rgba(169, 174, 178, 0.1);
  border-color: #a9aeb2;
  color: #555759;
}

/* Card colors */
.card {
  --bs-card-border-color: rgba(0, 0, 0, 0.125);
}

/* Badge colors */
.badge.bg-primary {
  background-color: #d8a5ab !important;
}

.badge.bg-secondary {
  background-color: #f7dad7 !important;
}

/* Border colors */
.border-primary {
  border-color: #d8a5ab !important;
}

.border-secondary {
  border-color: #f7dad7 !important;
}

/* Link colors */
a {
  color: #d8a5ab;
  text-decoration: none;
}

a:hover,
a:focus {
  color: #cf939a;
  text-decoration: underline;
}

/* Nav link colors */
.nav-link {
  color: #222 !important;
}

.nav-link:hover,
.nav-link:focus {
  color: #d8a5ab !important;
}

.nav-link.active {
  color: #d8a5ab !important;
}

.navbar .nav-item.active .nav-link {
  color: #d8a5ab !important;
  font-weight: 500;
}

/* Navbar brand margin fix for minimized menu */
.navbar-brand {
  margin-left: 1rem;
}

@media (min-width: 768px) {
  .navbar-brand {
    margin-left: 2rem;
  }
}

/* Dropdown colors */
.dropdown-item:hover,
.dropdown-item:focus {
  background-color: #f7dad7;
  color: #222;
}

/* Card z-index fix for tarifs page */
.position-relative .card {
  position: relative;
  z-index: 10;
}

.position-relative .bg-secondary {
  position: relative;
  z-index: 10;
}

.position-relative .alert {
  position: relative;
  z-index: 10;
}

.position-relative .rounded-circle.bg-primary.position-absolute {
  z-index: 1;
}

/* Fix spacing for mutualité section after the decorated circle on tarifs page */
#mutualite-section {
  margin-top: 6rem !important;
}

@media (max-width: 767px) {
  #mutualite-section {
    margin-top: 2rem !important;
  }
}