/* ===================================
   Theme-specific overrides for Homepage
   =================================== */

/* Navbar Sticky - Force for all themes in homepage */
#navbar {
  position: sticky !important;
  top: 0 !important;
  z-index: 1030 !important;
  /* Ensure no overflow interferes with sticky positioning */
  overflow: visible !important;
}

/* Navbar Sticky - Dark Theme (consistent with light mode)
   Use `sticky` to preserve document flow and avoid overlaying content */
:root[data-theme="dark"] #navbar {
  position: sticky !important;
  top: 0 !important;
  z-index: 1030 !important;
}

/* Add padding to hero section only in dark mode to account for sticky navbar */
:root[data-theme="dark"] .hero-section {
  padding-top: 70px !important;
  /* Keep a dark gradient fallback if the image cannot be loaded */
  background: linear-gradient(135deg, #0f172a 0%, #071022 100%) !important;
}

/* Hero Overlay in dark theme: show the background photo but darken it for legibility */
:root[data-theme="dark"] .hero-section .hero-overlay {
  /* Use same treatment as light mode: transparent overlay showing the hero photo
       but keep a subtle dark fallback for legibility if needed. */
  background: url("../images/Campo.png") center/cover no-repeat;
  background-size: cover;
  opacity: 0.12 !important; /* keep photo visible but subdued in dark mode */
  z-index: 1;
}

/* News Cards - Dark Theme */
:root[data-theme="dark"] .news-card {
  background: var(--card-bg) !important;
  border-color: var(--card-border) !important;
  box-shadow: var(--card-shadow);
}

:root[data-theme="dark"] .news-card:hover {
  padding-top: 0 !important;
}

:root[data-theme="dark"] .card-img-container {
  background: var(--bg-tertiary);
}

:root[data-theme="dark"] .card-img-container img {
  opacity: 1 !important;
  filter: none !important;
}

:root[data-theme="dark"] .card-body {
  background: var(--card-bg) !important;
}

:root[data-theme="dark"] .card-title {
  color: var(--text-primary) !important;
}

:root[data-theme="dark"] .card-text {
  color: var(--text-secondary) !important;
}

:root[data-theme="dark"] .card-button {
  background: linear-gradient(
    135deg,
    var(--primary-color),
    var(--primary-variant)
  );
  color: var(--text-on-primary);
}

/* Review Cards - Dark Theme */
:root[data-theme="dark"] .review-card {
  background: var(--card-bg) !important;
  border-color: var(--card-border) !important;
}

:root[data-theme="dark"] .review-content {
  color: var(--text-primary);
}

:root[data-theme="dark"] .review-text {
  color: var(--text-secondary) !important;
}

:root[data-theme="dark"] .reviewer-name {
  color: var(--text-primary) !important;
}

:root[data-theme="dark"] .reviewer-icon {
  background-color: var(--primary-color) !important;
}

/* Sections backgrounds */
:root[data-theme="dark"] .bg-light,
:root[data-theme="dark"] #notizie-section,
:root[data-theme="dark"] #recensioni-section {
  background-color: var(--bg-secondary) !important;
}

:root[data-theme="dark"] .bg-white,
:root[data-theme="dark"] #eventi-section {
  background-color: var(--bg-primary) !important;
}

/* Section titles */
:root[data-theme="dark"] .section-title {
  color: var(--text-primary) !important;
}

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

/* Buttons in homepage */
:root[data-theme="dark"] .btn-outline-primary {
  color: var(--primary-color) !important;
  border-color: var(--primary-color) !important;
}

:root[data-theme="dark"] .btn-outline-primary:hover {
  background-color: var(--primary-color) !important;
  color: var(--text-on-primary) !important;
}

/* Stars in reviews */
:root[data-theme="dark"] .review-stars .fa-star {
  color: #fbbf24 !important;
}

/* Reviewer avatar / icon styling - keep consistent in dark and light */
/* Reviewer avatar / icon styling - improved for light & dark modes */
.reviewer-image {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: 50%;
  display: block;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

/* Dark theme: rounded gradient circle with soft shadow */
:root[data-theme="dark"] .reviewer-icon {
  background: linear-gradient(
    135deg,
    rgba(45, 64, 160, 1),
    rgba(58, 81, 199, 1)
  ) !important;
  color: #ffffff !important;
  width: 56px !important;
  height: 56px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  box-shadow: 0 6px 18px rgba(8, 12, 30, 0.6) !important;
  border: 2px solid rgba(255, 255, 255, 0.08) !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}

:root[data-theme="dark"] .reviewer-icon svg {
  width: 28px !important;
  height: 28px !important;
  display: block !important;
  color: #ffffff !important;
}

:root[data-theme="dark"] .reviewer-icon:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 10px 26px rgba(8, 12, 30, 0.72) !important;
}

/* Light theme: softer blue gradient with subtle border/shadow */
:root[data-theme="light"] .reviewer-icon {
  background: linear-gradient(135deg, #0d6efd 0%, #2563eb 100%) !important;
  color: #ffffff !important;
  width: 56px !important;
  height: 56px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  box-shadow: 0 6px 18px rgba(13, 110, 253, 0.12) !important;
  border: 2px solid rgba(0, 0, 0, 0.06) !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}

:root[data-theme="light"] .reviewer-icon svg {
  width: 28px !important;
  height: 28px !important;
  display: block !important;
  color: #ffffff !important;
}

:root[data-theme="light"] .reviewer-icon:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 20px rgba(37, 99, 235, 0.18) !important;
}

/* Image borders / shadows tuned per theme */
:root[data-theme="dark"] .reviewer-image {
  border: 2px solid rgba(255, 255, 255, 0.06) !important;
  box-shadow: 0 6px 18px rgba(8, 12, 30, 0.5) !important;
}

:root[data-theme="light"] .reviewer-image {
  border: 2px solid rgba(0, 0, 0, 0.06) !important;
  box-shadow: 0 6px 18px rgba(13, 110, 253, 0.06) !important;
}

/* Ensure alignment when image is used instead of icon */
.reviewer-image,
.reviewer-icon {
  flex-shrink: 0;
}

/* High-specificity reset to avoid legacy/backup CSS creating an oval */
/* Targets the reviewer controls inside review cards and reviewer-info containers */
.review-card .reviewer-info .reviewer-icon,
.review-card .reviewer-info .reviewer-image,
#recensioni-section .reviewer-info .reviewer-icon,
#recensioni-section .reviewer-info .reviewer-image {
  /* enforce exact square and remove any extra padding that created ellipses */
  width: 56px !important;
  height: 56px !important;
  padding: 0 !important;
  margin-right: 0.75rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

/* Make sure icon background is a clean circle (no text-gradient, no large horizontal padding) */
.review-card .reviewer-info .reviewer-icon {
  background: linear-gradient(
    135deg,
    rgba(13, 110, 253, 1),
    rgba(37, 99, 235, 1)
  ) !important;
  color: #ffffff !important;
  text-shadow: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
}

/* Ensure inline SVGs scale correctly inside the fixed square */
.review-card .reviewer-info .reviewer-icon svg,
.review-card .reviewer-info .reviewer-image svg {
  width: 28px !important;
  height: 28px !important;
  display: block !important;
}

/* Force images to fill the circle and keep aspect ratio */
.review-card .reviewer-info .reviewer-image {
  width: 56px !important;
  height: 56px !important;
  object-fit: cover !important;
  border-radius: 50% !important;
  border: 2px solid rgba(255, 255, 255, 0.06) !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35) !important;
  background-color: transparent !important;
}

/* Defensive: if any rule sets font-size huge on the icon container, neutralize it */
.review-card .reviewer-info .reviewer-icon {
  font-size: 0 !important;
}

/* Keep reviewer name aligned with avatar */
.review-card .reviewer-info > div {
  display: flex;
  align-items: center;
}