/* IGAdB — Il Grande Almanacco delle Bands */

/* ─── 1. Design Tokens ──────────────────────────────────────────────────── */

:root {
  --igadb-bg:           oklch(97.5% 0.008 55);
  --igadb-surface:      oklch(99%   0.005 55);
  --igadb-surface-alt:  oklch(94%   0.012 55);
  --igadb-text:         oklch(22%   0.018 50);
  --igadb-text-muted:   oklch(52%   0.015 50);
  --igadb-accent:       oklch(50%   0.175 25);
  --igadb-accent-dark:  oklch(42%   0.155 25);
  --igadb-accent-light: oklch(93%   0.05  25);
  --igadb-header-bg:    oklch(24%   0.022 50);
  --igadb-border:       oklch(88%   0.010 55);
}

/* ─── 2. Bootstrap Variable Overrides ───────────────────────────────────── */

:root {
  --bs-body-bg:                    var(--igadb-bg);
  --bs-body-color:                 var(--igadb-text);
  --bs-link-color:                 var(--igadb-accent);
  --bs-link-hover-color:           var(--igadb-accent-dark);
  --bs-border-color:               var(--igadb-border);
  --bs-card-bg:                    var(--igadb-surface);
  --bs-card-border-color:          var(--igadb-border);
  --bs-primary:                    var(--igadb-accent);
  --bs-primary-rgb:                148, 74, 54;
  --bs-pagination-active-bg:       var(--igadb-accent);
  --bs-pagination-active-border-color: var(--igadb-accent);
  --bs-list-group-bg:              var(--igadb-surface);
  --bs-list-group-border-color:    var(--igadb-border);
  --bs-table-bg:                   transparent;
  --bs-table-striped-bg:           var(--igadb-surface-alt);
}

/* ─── 3. Base & Typography ──────────────────────────────────────────────── */

body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background-color: var(--igadb-bg);
  color: var(--igadb-text);
  line-height: 1.6;
}

h1, h2, h3, .font-editorial {
  font-family: 'Playfair Display', Georgia, serif;
  color: var(--igadb-text);
}

h1 { line-height: 1.1; }
h2 { line-height: 1.2; }
h3 { line-height: 1.25; }

.prose,
.band-bio,
.card-text-long {
  max-width: 68ch;
}

/* ─── 4. Navbar (solo la navbar principale del sito) ────────────────────── */

.igadb-main-nav {
  background-color: var(--igadb-header-bg) !important;
  border-bottom: 1px solid oklch(32% 0.020 50);
}

.igadb-main-nav .navbar-brand {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.1rem;
  letter-spacing: 0.02em;
  color: oklch(96% 0.008 55) !important;
}

.igadb-main-nav .nav-link {
  color: oklch(82% 0.010 55) !important;
  font-size: 0.9rem;
  transition: color 0.15s ease-out;
}

.igadb-main-nav .nav-link:hover,
.igadb-main-nav .nav-link:focus {
  color: var(--igadb-accent) !important;
}

.igadb-main-nav .dropdown-menu {
  background-color: oklch(28% 0.020 50);
  border-color: oklch(36% 0.018 50);
}

.igadb-main-nav .dropdown-item {
  color: oklch(82% 0.010 55);
  font-size: 0.9rem;
}

.igadb-main-nav .dropdown-item:hover {
  background-color: oklch(34% 0.018 50);
  color: oklch(96% 0.008 55);
}

.igadb-main-nav .dropdown-divider {
  border-color: oklch(36% 0.018 50);
}

.igadb-main-nav .form-control {
  background-color: oklch(30% 0.018 50);
  border-color: oklch(38% 0.018 50);
  color: oklch(90% 0.008 55);
  font-size: 0.875rem;
}

.igadb-main-nav .form-control::placeholder {
  color: oklch(60% 0.010 50);
}

.igadb-main-nav .form-control:focus {
  background-color: oklch(32% 0.018 50);
  border-color: var(--igadb-accent);
  color: oklch(95% 0.006 55);
  box-shadow: 0 0 0 0.2rem oklch(50% 0.175 25 / 0.25);
}

.igadb-main-nav .btn-outline-light {
  border-color: oklch(50% 0.015 50);
  color: oklch(82% 0.010 55);
}

.igadb-main-nav .btn-outline-light:hover {
  background-color: oklch(34% 0.018 50);
  border-color: oklch(50% 0.015 50);
  color: oklch(96% 0.008 55);
}

.igadb-main-nav .navbar-toggler {
  border-color: oklch(45% 0.015 50);
}

.igadb-main-nav .navbar-toggler-icon {
  filter: invert(0.7);
}

/* ─── 4b. Wiki article-menu (nav interna della wiki) ────────────────────── */

#article-menu {
  background-color: var(--igadb-surface-alt) !important;
  border-bottom: 1px solid var(--igadb-border);
  border-radius: 0.25rem;
  margin-bottom: 1rem;
  padding: 0.375rem 0.75rem;
}

#article-menu .nav-link {
  color: var(--igadb-text-muted) !important;
  font-size: 0.875rem;
  padding: 0.25rem 0.75rem;
  border-radius: 0.2rem;
  transition: color 0.15s ease-out, background-color 0.15s ease-out;
}

#article-menu .nav-link:hover,
#article-menu .nav-link.active {
  color: var(--igadb-accent) !important;
  background-color: var(--igadb-accent-light);
}

#article-menu h1 {
  font-size: 1.1rem;
  margin: 0;
  font-family: 'Playfair Display', Georgia, serif;
}

#article-title {
  font-size: 1.5rem;
  font-family: 'Playfair Display', Georgia, serif;
  margin-bottom: 0.75rem;
}

/* Breadcrumbs e pulsanti wiki */
#article-breadcrumbs .btn-info {
  background-color: var(--igadb-surface-alt);
  border-color: var(--igadb-border);
  color: var(--igadb-text-muted);
  font-size: 0.8rem;
  padding: 0.3rem 0.6rem;
}

#article-breadcrumbs .btn-info:hover {
  background-color: var(--igadb-accent-light);
  border-color: var(--igadb-accent);
  color: var(--igadb-accent);
}

#article-breadcrumbs .dropdown-menu {
  background-color: var(--igadb-surface);
  border-color: var(--igadb-border);
}

#article-breadcrumbs .dropdown-item {
  color: var(--igadb-text);
  font-size: 0.875rem;
}

#article-breadcrumbs .dropdown-item:hover {
  background-color: var(--igadb-surface-alt);
  color: var(--igadb-accent);
}

/* Contenuto articolo wiki */
.wiki-article {
  line-height: 1.7;
}

.wiki-article h1,
.wiki-article h2,
.wiki-article h3 {
  font-family: 'Playfair Display', Georgia, serif;
  margin-top: 1.5rem;
  padding-bottom: 0.3rem;
  border-bottom: 1px solid var(--igadb-border);
}

.wiki-article a {
  color: var(--igadb-accent);
}

.wiki-article a:hover {
  color: var(--igadb-accent-dark);
}

/* Wiki notification banners */
.wiki-alert {
  background-color: var(--igadb-accent-light);
  border-color: oklch(82% 0.08 25);
  color: var(--igadb-text);
  border-radius: 0.25rem;
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
}

/* ─── 5. Buttons ────────────────────────────────────────────────────────── */

.btn-primary {
  --bs-btn-bg:           var(--igadb-accent);
  --bs-btn-border-color: var(--igadb-accent);
  --bs-btn-color:        oklch(98% 0.005 55);
  --bs-btn-hover-bg:     var(--igadb-accent-dark);
  --bs-btn-hover-border-color: var(--igadb-accent-dark);
  --bs-btn-hover-color:  oklch(98% 0.005 55);
  --bs-btn-active-bg:    var(--igadb-accent-dark);
  --bs-btn-focus-shadow-rgb: 148, 74, 54;
}

.btn-outline-primary {
  --bs-btn-color:           var(--igadb-accent);
  --bs-btn-border-color:    var(--igadb-accent);
  --bs-btn-hover-bg:        var(--igadb-accent);
  --bs-btn-hover-border-color: var(--igadb-accent);
  --bs-btn-hover-color:     oklch(98% 0.005 55);
  --bs-btn-active-bg:       var(--igadb-accent-dark);
}

.btn-outline-secondary {
  --bs-btn-color:        var(--igadb-text-muted);
  --bs-btn-border-color: var(--igadb-border);
  --bs-btn-hover-bg:     var(--igadb-surface-alt);
  --bs-btn-hover-color:  var(--igadb-text);
}

.btn-outline-danger {
  --bs-btn-color:        oklch(52% 0.18 22);
  --bs-btn-border-color: oklch(78% 0.08 22);
}

/* ─── 6. Cards ──────────────────────────────────────────────────────────── */

.card {
  background-color: var(--igadb-surface);
  border: 1px solid var(--igadb-border);
  border-radius: 0.25rem;
  transition: box-shadow 0.15s ease-out;
}

.card:hover {
  box-shadow: 0 2px 8px oklch(22% 0.018 50 / 0.08);
}

.card-footer.bg-transparent {
  border-top: 1px solid var(--igadb-border);
  background-color: var(--igadb-surface-alt) !important;
}

.card-header {
  background-color: var(--igadb-surface-alt);
  border-bottom: 1px solid var(--igadb-border);
}

/* ─── 7. Badge Overrides ────────────────────────────────────────────────── */

.badge.bg-info {
  background-color: var(--igadb-accent-light) !important;
  color: var(--igadb-accent-dark) !important;
  border: 1px solid oklch(85% 0.07 25);
  font-weight: 500;
}

.badge.bg-primary {
  background-color: var(--igadb-accent) !important;
  color: oklch(98% 0.005 55) !important;
}

.badge.bg-secondary {
  background-color: var(--igadb-surface-alt) !important;
  color: var(--igadb-text-muted) !important;
  border: 1px solid var(--igadb-border);
}

/* ─── 8. Band Roster ─────────────────────────────────────────────────────── */

.band-roster {
  border-top: 1px solid var(--igadb-border);
}

.band-roster__item {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 0.875rem 0.5rem;
  border-bottom: 1px solid var(--igadb-border);
  border-radius: 0.125rem;
  transition: background-color 0.1s ease-out;
}

.band-roster__item:hover {
  background-color: var(--igadb-surface-alt);
}

.band-roster__thumb {
  width: 52px;
  height: 52px;
  flex-shrink: 0;
  border-radius: 0.2rem;
  overflow: hidden;
  background-color: var(--igadb-surface-alt);
  border: 1px solid var(--igadb-border);
  display: flex;
  align-items: center;
  justify-content: center;
}

.band-roster__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.band-roster__thumb--empty {
  color: var(--igadb-text-muted);
  font-size: 1.25rem;
}

.band-roster__info {
  flex: 1;
  min-width: 0;
}

.band-roster__name {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.1rem;
  font-weight: 400;
  margin-bottom: 0.15rem;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.band-roster__name a {
  color: var(--igadb-text);
  text-decoration: none;
}

.band-roster__name a:hover {
  color: var(--igadb-accent);
}

.band-roster__meta {
  font-size: 0.8rem;
  color: var(--igadb-text-muted);
  margin-bottom: 0;
  display: flex;
  gap: 0.875rem;
  flex-wrap: wrap;
}

.band-roster__meta .bi {
  font-size: 0.75rem;
  margin-right: 0.15rem;
}

.band-roster__genres {
  flex-shrink: 0;
  display: flex;
  gap: 0.375rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* ─── 9. Event Timeline ─────────────────────────────────────────────────── */

.event-timeline {
  position: relative;
}

.event-timeline::before {
  content: '';
  position: absolute;
  left: 23px;
  top: 0;
  bottom: 0;
  width: 1px;
  background-color: var(--igadb-border);
}

.event-timeline__item {
  display: flex;
  gap: 1.5rem;
  padding: 0.875rem 0;
  position: relative;
}

.event-timeline__date {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 48px;
  flex-shrink: 0;
  background-color: var(--igadb-bg);
  z-index: 1;
  padding: 0.125rem 0;
}

.event-timeline__day {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  color: var(--igadb-accent);
}

.event-timeline__month {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--igadb-text-muted);
}

.event-timeline__body {
  flex: 1;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--igadb-border);
  min-width: 0;
}

.event-timeline__item:last-child .event-timeline__body {
  border-bottom: none;
}

.event-timeline__body h5 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.05rem;
  font-weight: 400;
  margin-bottom: 0.25rem;
}

.event-timeline__body h5 a {
  color: var(--igadb-text);
  text-decoration: none;
}

.event-timeline__body h5 a:hover {
  color: var(--igadb-accent);
}

.event-timeline__time {
  flex-shrink: 0;
  white-space: nowrap;
  font-size: 0.78rem;
  color: var(--igadb-text-muted);
  align-self: center;
}

/* ─── 10. Hero & Page Utilities ─────────────────────────────────────────── */

.igadb-hero {
  text-align: center;
  padding: 3.5rem 0 2rem;
}

.igadb-hero__rule {
  width: 48px;
  height: 2px;
  background-color: var(--igadb-accent);
  margin: 0 auto 1.25rem;
}

.igadb-hero__title {
  font-size: clamp(2rem, 5vw, 3.25rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-bottom: 0.875rem;
}

.igadb-hero__sub {
  font-size: 1.05rem;
  color: var(--igadb-text-muted);
  max-width: 52ch;
  margin: 0 auto 1.25rem;
}

.igadb-stats {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  padding: 1.5rem 0;
}

.igadb-stats__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.125rem;
}

.igadb-stats__value {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
  color: var(--igadb-accent);
}

.igadb-stats__label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--igadb-text-muted);
}

.igadb-stats__sep {
  width: 1px;
  height: 2.5rem;
  background-color: var(--igadb-border);
}

.igadb-section-heading {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.3rem;
  font-weight: 400;
  letter-spacing: 0.01em;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--igadb-border);
  margin-bottom: 1rem;
}

/* ─── 11. Footer ────────────────────────────────────────────────────────── */

.igadb-footer {
  background-color: var(--igadb-header-bg);
  color: oklch(75% 0.010 55);
  border-top: 1px solid oklch(32% 0.020 50);
  padding: 2.5rem 0;
  margin-top: auto;
}

.igadb-footer h6 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 0.85rem;
  color: oklch(88% 0.008 55);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 0.75rem;
}

.igadb-footer a {
  color: oklch(65% 0.010 55);
  text-decoration: none;
  transition: color 0.15s ease-out;
}

.igadb-footer a:hover {
  color: var(--igadb-accent);
}

.igadb-footer .small {
  color: oklch(60% 0.008 55);
}

/* ─── 12. Metadata Card ─────────────────────────────────────────────────── */

.metadata-card .card-header {
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--igadb-text-muted);
}

.metadata-card .card-header strong {
  color: var(--igadb-text);
  font-weight: 600;
}

/* ─── 13. Breadcrumb & Pagination ───────────────────────────────────────── */

.breadcrumb {
  --bs-breadcrumb-bg: transparent;
  font-size: 0.85rem;
  color: var(--igadb-text-muted);
}

.breadcrumb-item a {
  color: var(--igadb-text-muted);
  text-decoration: none;
}

.breadcrumb-item a:hover {
  color: var(--igadb-accent);
}

.page-link {
  color: var(--igadb-accent);
  background-color: var(--igadb-surface);
  border-color: var(--igadb-border);
}

.page-link:hover {
  color: var(--igadb-accent-dark);
  background-color: var(--igadb-surface-alt);
  border-color: var(--igadb-border);
}

/* ─── 14. Forms ─────────────────────────────────────────────────────────── */

.form-control,
.form-select {
  background-color: var(--igadb-surface);
  border-color: var(--igadb-border);
  color: var(--igadb-text);
}

.form-control:focus,
.form-select:focus {
  background-color: var(--igadb-surface);
  border-color: var(--igadb-accent);
  color: var(--igadb-text);
  box-shadow: 0 0 0 0.2rem oklch(50% 0.175 25 / 0.2);
}

.form-label {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--igadb-text);
}

/* ─── 15. Alerts ────────────────────────────────────────────────────────── */

.alert-success {
  background-color: oklch(94% 0.06 145);
  border-color: oklch(82% 0.10 145);
  color: oklch(32% 0.10 145);
}

.alert-danger {
  background-color: oklch(94% 0.06 22);
  border-color: oklch(82% 0.10 22);
  color: oklch(32% 0.12 22);
}

.alert-info {
  background-color: var(--igadb-accent-light);
  border-color: oklch(82% 0.08 25);
  color: var(--igadb-accent-dark);
}

/* ─── 16. Print ─────────────────────────────────────────────────────────── */

@media print {
  .navbar, footer, .btn, .dropdown, .pagination,
  form, .alert, #map { display: none !important; }
  body { font-size: 12pt; background: #fff; color: #111; }
  h1, h2, h3 { font-family: Georgia, serif; }
  .card { border: 1px solid #ccc; box-shadow: none; page-break-inside: avoid; }
  a { text-decoration: none; color: inherit; }
  a[href]::after { content: " (" attr(href) ")"; font-size: 0.8em; color: #666; }
  .container { max-width: 100%; }
  .band-roster__item { border-bottom: 0.5pt solid #ccc; }
  .event-timeline::before { display: none; }
}