/*
 * ============================================================
 * Project: Life Journal Reading Plan API
 * File: assets/css/app.css
 * Purpose: Minimal accessibility helpers / overrides
 * ============================================================
 */
.visually-hidden-focusable:active,
.visually-hidden-focusable:focus {
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
}

/* Calendar grid for month view */
.calendar-grid {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 1rem;
}
@media (min-width: 576px) {
  .calendar-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 992px) {
  .calendar-grid { grid-template-columns: repeat(4, 1fr); } /* 4 wide (nice for space) */
}
@media (min-width: 1200px) {
  .calendar-grid { grid-template-columns: repeat(7, 1fr); } /* full 7-day row */
}
.calendar-card { min-height: 9rem; }

/* --- Nav hover/active polish --- */
.navbar .nav-link {
  border-radius: .375rem;
  padding: .375rem .75rem;              /* give the bg some room */
  transition: background-color .15s ease, color .15s ease;
}

.navbar .nav-link:hover,
.navbar .nav-link:focus {
  background-color: var(--bs-primary);
  color: #fff !important;
  text-decoration: none;
}

.navbar .nav-link:focus-visible {
  outline: 2px solid var(--bs-primary);
  outline-offset: 2px;
}

.navbar .nav-link.active,
.navbar .nav-link[aria-current="page"] {
  background-color: var(--bs-primary);
  color: #fff !important;
}

/* If you later use dropdowns, make them feel consistent */
.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus {
  background-color: var(--bs-primary);
  color: #fff;
}