/* Bootstrap theme palette overrides. Adjust these values to change the site's colors. */

:root {
  /* Palette inspired by agriturismovignola.it */
  --bs-primary: #dfb57a; /* Warm gold */
  --bs-primary-rgb: 223, 181, 122;

  --bs-secondary: #2a2826; /* Deep espresso */
  --bs-secondary-rgb: 42, 40, 38;

  --bs-success: #788f65;
  --bs-success-rgb: 120, 143, 101;

  --bs-info: #8f8c8a; /* Muted text gray */
  --bs-info-rgb: 143, 140, 138;

  --bs-warning: #dfb57a;
  --bs-warning-rgb: 223, 181, 122;

  --bs-danger: #b68745;
  --bs-danger-rgb: 182, 135, 69;

  --bs-light: #f6f3f3;
  --bs-light-rgb: 246, 243, 243;

  --bs-dark: #2a2826;
  --bs-dark-rgb: 42, 40, 38;

  --bs-body-color: #2a2826;
  --bs-body-bg: #f6f3f3;
  --bs-link-color: #2a2826;
  --bs-link-hover-color: #b68745;
  --bs-border-color: #e3dcd2;
  --bs-heading-color: #2a2826;
  --bs-heading-color-light: #f6f3f3;

  /* App-level surfaces (used by custom components). */
  --uc-surface: #ffffff;
  --uc-surface-2: #f5f1ec;
  --uc-surface-muted: #ebe3da;
}

html[data-theme="dark"] {
  color-scheme: dark;

  --bs-body-bg: #0f0f0f;
  --bs-body-color: #f1ede6;
  --bs-heading-color: #f6f3f3;
  --bs-border-color: #3a332e;

  --bs-link-color: #dfb57a;
  --bs-link-hover-color: #f0c791;

  --uc-surface: #171310;
  --uc-surface-2: #14100e;
  --uc-surface-muted: #1f1915;
}

/* Make common Bootstrap utility classes theme-aware in dark mode. */
html[data-theme="dark"] .bg-light {
  background-color: var(--uc-surface-2) !important;
}

html[data-theme="dark"] .bg-white {
  background-color: var(--uc-surface) !important;
}

html[data-theme="dark"] .text-dark {
  color: var(--bs-body-color) !important;
}

html[data-theme="dark"] .text-muted {
  color: color-mix(in srgb, var(--bs-body-color) 75%, transparent) !important;
}

html[data-theme="dark"] .border,
html[data-theme="dark"] .border-top,
html[data-theme="dark"] .border-end,
html[data-theme="dark"] .border-bottom,
html[data-theme="dark"] .border-start {
  border-color: var(--bs-border-color) !important;
}

html[data-theme="dark"] .card,
html[data-theme="dark"] .modal-content,
html[data-theme="dark"] .offcanvas,
html[data-theme="dark"] .dropdown-menu {
  background-color: var(--uc-surface) !important;
  color: var(--bs-body-color);
}

html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select {
  background-color: var(--uc-surface) !important;
  color: var(--bs-body-color) !important;
  border-color: var(--bs-border-color) !important;
}

html[data-theme="dark"] .form-control::placeholder {
  color: color-mix(in srgb, var(--bs-body-color) 60%, transparent);
}

html[data-theme="dark"] .form-control:focus,
html[data-theme="dark"] .form-select:focus {
  border-color: color-mix(in srgb, var(--bs-primary) 60%, var(--bs-border-color)) !important;
  box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--bs-primary) 25%, transparent) !important;
}

html[data-theme="dark"] .shadow,
html[data-theme="dark"] .shadow-sm,
html[data-theme="dark"] .shadow-lg {
  box-shadow: 0 1rem 2.25rem rgba(0, 0, 0, 0.55) !important;
}

/* Ensure custom section backgrounds are theme-aware (applies across pages). */
html[data-theme="dark"] body {
  background-color: var(--bs-body-bg);
  color: var(--bs-body-color);
}

html[data-theme="dark"] .tile-section,
html[data-theme="dark"] .suite-detail-section,
html[data-theme="dark"] .pricing-section,
html[data-theme="dark"] .amenities-section,
html[data-theme="dark"] .gallery-section,
html[data-theme="dark"] .odyssey-intro-section,
html[data-theme="dark"] .hero-availability,
html[data-theme="dark"] .amendolara-section,
html[data-theme="dark"] .evidence-section,
html[data-theme="dark"] .leucothea-section,
html[data-theme="dark"] .departure-section,
html[data-theme="dark"] .locations-grid-section,
html[data-theme="dark"] .contact-info-section,
html[data-theme="dark"] .how-to-reach-section {
  background-color: var(--uc-surface-2);
  color: var(--bs-body-color);
}

html[data-theme="dark"] .availability-section,
html[data-theme="dark"] .cta-agri-section,
html[data-theme="dark"] .cta-section-myth,

/* Tables in dark mode */
html[data-theme="dark"] .table-light {
  background-color: color-mix(in srgb, var(--uc-surface) 85%, transparent) !important;
  color: var(--bs-body-color) !important;
}

html[data-theme="dark"] .table-light > th,
html[data-theme="dark"] .table-light > td,
html[data-theme="dark"] .table-light th,
html[data-theme="dark"] .table-light td {
  background-color: color-mix(in srgb, var(--uc-surface) 85%, transparent) !important;
  color: var(--bs-body-color) !important;
}

html[data-theme="dark"] .table thead th,
html[data-theme="dark"] .table tbody td {
  border-color: var(--bs-border-color) !important;
}

/* Availability alert + badges */
html[data-theme="dark"] .alert-info {
  background-color: color-mix(in srgb, var(--bs-primary) 10%, var(--uc-surface));
  color: var(--bs-body-color);
  border-color: var(--bs-border-color);
}

html[data-theme="dark"] .alert-info .badge {
  background-color: color-mix(in srgb, var(--bs-primary) 25%, var(--uc-surface));
  color: var(--bs-heading-color);
  border: 1px solid var(--bs-border-color);
}

html[data-theme="dark"] .alert-info .badge.bg-warning {
  background-color: color-mix(in srgb, var(--bs-warning) 55%, var(--uc-surface));
  color: var(--bs-heading-color);
}

html[data-theme="dark"] .alert-info .badge.bg-success {
  background-color: color-mix(in srgb, var(--bs-success) 55%, var(--uc-surface));
  color: var(--bs-heading-color);
}
html[data-theme="dark"] .suites-cta-section,
html[data-theme="dark"] .cta-section,
html[data-theme="dark"] .suites-reviews-section,
html[data-theme="dark"] .hero,
html[data-theme="dark"] .hero-agriturismo,
html[data-theme="dark"] .hero-myth,
html[data-theme="dark"] .hero-suites,
html[data-theme="dark"] .hero-contact {
  color: var(--bs-heading-color);
}

/* CTA sections (including gallery footer) in dark mode */
html[data-theme="dark"] .suites-cta-section,
html[data-theme="dark"] .cta-section,
html[data-theme="dark"] .cta-agri-section,
html[data-theme="dark"] .cta-section-myth,
html[data-theme="dark"] .suites-reviews-section {
  background-color: var(--uc-surface-2);
  color: var(--bs-body-color);
}

html[data-theme="dark"] .suites-cta-section h2,
html[data-theme="dark"] .suites-cta-section p,
html[data-theme="dark"] .cta-section h2,
html[data-theme="dark"] .cta-section p {
  color: var(--bs-body-color);
}

html[data-theme="dark"] .suites-cta-section .btn-outline-dark,
html[data-theme="dark"] .cta-section .btn-outline-dark {
  color: var(--bs-body-color);
  border-color: var(--bs-border-color);
  background-color: transparent;
}

html[data-theme="dark"] .suites-cta-section .btn-outline-dark:hover,
html[data-theme="dark"] .cta-section .btn-outline-dark:hover {
  color: var(--bs-heading-color);
  background-color: color-mix(in srgb, var(--bs-primary) 18%, transparent);
  border-color: color-mix(in srgb, var(--bs-primary) 60%, var(--bs-border-color));
}

/* Cards inside light sections */
html[data-theme="dark"] .area-card,
html[data-theme="dark"] .contact-card,
html[data-theme="dark"] .fact-box,
html[data-theme="dark"] .feature-card,
html[data-theme="dark"] .location-card,
html[data-theme="dark"] .route-details,
html[data-theme="dark"] .pricing-table,
html[data-theme="dark"] .gallery-card-agri,
html[data-theme="dark"] .gallery-item {
  background-color: var(--uc-surface);
  color: var(--bs-body-color);
}

/* Gallery hero text contrast */
html[data-theme="dark"] .hero-gallery .overlay {
  color: var(--bs-heading-color);
}

/* Lightbox buttons in dark mode */
html[data-theme="dark"] .lightbox-nav {
  background: rgba(0, 0, 0, 0.75);
  border-color: color-mix(in srgb, var(--bs-primary) 70%, #fff);
}

/* Reviews cards */
html[data-theme="dark"] .review-card {
  background: color-mix(in srgb, var(--uc-surface) 90%, transparent);
  color: var(--bs-body-color);
  border-color: var(--bs-border-color);
  box-shadow: 0 16px 44px -28px rgba(0, 0, 0, 0.7);
}

/* Pills (e.g., gallery "Tap to open") */
html[data-theme="dark"] .pill {
  background: color-mix(in srgb, var(--bs-primary) 18%, var(--uc-surface));
  color: var(--bs-heading-color);
  border-color: var(--bs-border-color);
}

/* Activity cards (home) */
html[data-theme="dark"] .activity-card {
  background-color: var(--uc-surface);
  color: var(--bs-body-color);
  border-color: var(--bs-border-color);
}

/* Agriturismo gallery section */
html[data-theme="dark"] .gallery-section {
  background-color: var(--uc-surface-2);
  color: var(--bs-body-color);
}

/* Myth page tweaks */
html[data-theme="dark"] .quote-box {
  background: linear-gradient(135deg, color-mix(in srgb, var(--uc-surface) 92%, transparent), var(--uc-surface));
  border-left-color: color-mix(in srgb, var(--bs-primary) 75%, #000);
}
html[data-theme="dark"] .map-legend,
html[data-theme="dark"] .route-details,
html[data-theme="dark"] .legend-item,
html[data-theme="dark"] .legend-line {
  background-color: var(--uc-surface);
  color: var(--bs-body-color);
}

/* Suites page tweaks */
html[data-theme="dark"] .amenities-section,
html[data-theme="dark"] .suite-detail-section,
html[data-theme="dark"] .pricing-section {
  background-color: var(--uc-surface-2);
  color: var(--bs-body-color);
}
html[data-theme="dark"] .amenity-item i,
html[data-theme="dark"] .suite-number {
  color: var(--bs-body-color);
}

/* Contact page tweaks */
html[data-theme="dark"] .contact-info-section,
html[data-theme="dark"] .how-to-reach-section {
  background-color: var(--uc-surface-2);
  color: var(--bs-body-color);
}
html[data-theme="dark"] .contact-card h5,
html[data-theme="dark"] .contact-card a {
  color: var(--bs-body-color);
}