/*
 * Minimal global overrides layered on top of Bootstrap for Casa de Luna.
 * Custom color palette centered on the brand lavender-gray (#787391).
 * Uses Bootstrap 5.3 CSS variables so components style automatically.
 */

:root {
  /* Brand primary: muted lavender-gray from logo background */
  --bs-primary: #787391;
  --bs-primary-rgb: 120, 115, 145;
  --bs-primary-text-emphasis: #3d3952; /* darkened for readable emphasized text */
  --bs-primary-bg-subtle: #efedf6;      /* very light tint for subtle backgrounds */
  --bs-primary-border-subtle: #d6d2e6;  /* soft border for cards/alerts */

  /* Secondary: cool blue-gray for neutral elements */
  --bs-secondary: #5f6b7a;
  --bs-secondary-rgb: 95, 107, 122;
  --bs-secondary-text-emphasis: #2f3640;
  --bs-secondary-bg-subtle: #eef1f4;
  --bs-secondary-border-subtle: #d6dde4;

  /* Body and links: professional, high-contrast text on soft backgrounds */
  --bs-body-bg: #f7f7fb; /* base background */
  --bs-body-secondary-bg: #f2f2f8; /* cards/sections */
  --bs-body-tertiary-bg: #eceef6;  /* page chrome (used by bg-body-tertiary) */
  --bs-body-color: #212529; /* default readable body text */
  --bs-border-color: #dee2e6; /* default light border */
  --bs-link-color: #6d6790;     /* slightly lighter than primary for links */
  --bs-link-hover-color: #5f5980; /* darker on hover for contrast */

  /* Headings/readable emphasis */
  --bs-heading-color: #2b2d3a;

  /* Brand scales for interactive states (approximate steps) */
  --brand-primary-500: #787391; /* base */
  --brand-primary-600: #6e6987; /* hover */
  --brand-primary-700: #625d7b; /* active */
}

/* Ensure Bootstrap buttons use the brand palette */
.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--brand-primary-500);
  --bs-btn-border-color: var(--brand-primary-500);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--brand-primary-600);
  --bs-btn-hover-border-color: var(--brand-primary-600);
  --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--brand-primary-700);
  --bs-btn-active-border-color: var(--brand-primary-700);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--brand-primary-500);
  --bs-btn-disabled-border-color: var(--brand-primary-500);
}

.btn-outline-primary {
  --bs-btn-color: var(--brand-primary-600);
  --bs-btn-border-color: var(--brand-primary-500);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--brand-primary-500);
  --bs-btn-hover-border-color: var(--brand-primary-500);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--brand-primary-700);
  --bs-btn-active-border-color: var(--brand-primary-700);
  --bs-btn-disabled-color: var(--brand-primary-500);
  --bs-btn-disabled-border-color: var(--brand-primary-500);
}

form label {
  font-weight: 500;
}

form input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]):not([type=hidden]),
form select,
form textarea {
  width: 100%;
  max-width: 100%;
  padding: 0.5rem 0.75rem;
  border-radius: var(--bs-border-radius);
  border: 1px solid var(--bs-border-color, rgba(0, 0, 0, 0.15));
  background-color: var(--bs-body-bg);
}

form textarea {
  min-height: 8rem;
}

form ul.errorlist {
  list-style: none;
  margin: 0 0 0.75rem;
  padding: 0.75rem 1rem;
  border-radius: var(--bs-border-radius);
  background-color: var(--bs-danger-bg-subtle, rgba(220, 53, 69, 0.15));
  color: var(--bs-danger-text, #842029);
  border: 1px solid var(--bs-danger-border-subtle, rgba(220, 53, 69, 0.3));
}

form button:not(.btn),
form input[type=submit]:not(.btn),
form input[type=button]:not(.btn),
form input[type=reset]:not(.btn) {
  padding: 0.5rem 1rem;
  border-radius: var(--bs-border-radius);
  border: 1px solid var(--bs-primary);
  background-color: var(--bs-primary);
  color: #fff;
  font-weight: 500;
  transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

form button:not(.btn):hover,
form input[type=submit]:not(.btn):hover,
form input[type=button]:not(.btn):hover,
form input[type=reset]:not(.btn):hover {
  background-color: #0b5ed7;
  border-color: #0a58ca;
}

form button:not(.btn):focus-visible,
form input[type=submit]:not(.btn):focus-visible,
form input[type=button]:not(.btn):focus-visible,
form input[type=reset]:not(.btn):focus-visible {
  outline: 0;
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

.alert:last-child {
  margin-bottom: 0;
}