/* Theme: Bologna Modern
 * A fresh, contemporary theme with Mediterranean warmth
 * Color Palette: Terracotta, Olive, Sand, Warm Grays
 */

<%# Include base CSS variables with dark mode support %>
<%= render partial: '/pwb/custom_css/base_variables', locals: {} %>

:root {
  /* Primary Colors - Mapped to PWB Standard Variables */
  --bologna-terra: var(--pwb-primary-color);
  --bologna-olive: var(--pwb-secondary-color);
  --bologna-sand: var(--pwb-accent-color);
  --bologna-warm-gray: var(--pwb-text-color);
  --bologna-light: var(--pwb-background-color);

  /* Extended Terra Palette - Mapped to PWB Dynamic Shades */
  --bologna-terra-50: var(--pwb-primary-50);
  --bologna-terra-100: var(--pwb-primary-100);
  --bologna-terra-200: var(--pwb-primary-200);
  --bologna-terra-300: var(--pwb-primary-300);
  --bologna-terra-400: var(--pwb-primary-400);
  --bologna-terra-500: var(--pwb-primary-500);
  --bologna-terra-600: var(--pwb-primary-600);

  /* Extended Olive Palette - Mapped to PWB Dynamic Shades */
  --bologna-olive-50: var(--pwb-secondary-50);
  --bologna-olive-100: var(--pwb-secondary-100);
  --bologna-olive-200: var(--pwb-secondary-200);
  --bologna-olive-300: var(--pwb-secondary-300);
  --bologna-olive-400: var(--pwb-secondary-400);
  --bologna-olive-500: var(--pwb-secondary-500);
  --bologna-olive-600: var(--pwb-secondary-600);

  /* Footer Colors */
  --footer-bg-color: var(--pwb-footer-background-color);
  --footer-text-color: var(--pwb-footer-text-color);
  --footer-link-color: var(--pwb-primary-400);
  --footer-link-hover-color: var(--pwb-primary-300);

  /* Action Colors */
  --action-color: var(--pwb-primary-color);

  /* Typography */
  --font-display: <%= @current_website.style_variables["font_primary"] || "Outfit" %>;
  --font-body: <%= @current_website.style_variables["font_secondary"] || "DM Sans" %>;

  /* Spacing & Sizing */
  --border-radius-soft: <%= @current_website.style_variables["border_radius"] || "16px" %>;
  --border-radius-softer: 20px;
  --border-radius-pill: 9999px;

  /* Soft Shadows */
  --shadow-soft: 0 4px 24px -4px rgba(61, 61, 61, 0.08);
  --shadow-medium: 0 8px 32px -8px rgba(61, 61, 61, 0.12);
  --shadow-elevated: 0 16px 48px -12px rgba(61, 61, 61, 0.16);
  --shadow-glow: 0 0 40px rgba(196, 93, 62, 0.15);
}

/* ============================================
   MODERN TYPOGRAPHY
   ============================================ */

.bologna-theme {
  font-family: var(--font-body), 'Helvetica Neue', system-ui, sans-serif;
  color: var(--bologna-warm-gray);
  background-color: var(--bologna-light);
  letter-spacing: -0.01em;
}

.bologna-theme h1,
.bologna-theme h2,
.bologna-theme h3,
.bologna-theme h4,
.bologna-theme h5,
.bologna-theme h6 {
  font-family: var(--font-display), system-ui, sans-serif;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--bologna-warm-gray);
}

.bologna-theme h1 {
  font-size: 3rem;
  font-weight: 700;
  line-height: 1.1;
}

.bologna-theme h2 {
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 1.2;
}

.bologna-theme h3 {
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.3;
}

/* Section pretitles */
.bologna-theme .section-pretitle {
  display: inline-block;
  padding: 0.5rem 1rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  background-color: var(--bologna-terra-100);
  color: var(--bologna-terra);
  border-radius: var(--border-radius-pill);
  margin-bottom: 1rem;
}

/* ============================================
   PILL BUTTONS
   ============================================ */

.bologna-theme .btn-primary,
.bologna-theme .btn-base {
  background: linear-gradient(135deg, var(--bologna-terra) 0%, var(--bologna-terra-600) 100%);
  color: #ffffff;
  border: none;
  padding: 0.875rem 2rem;
  font-family: var(--font-body), sans-serif;
  font-size: 0.875rem;
  font-weight: 500;
  border-radius: var(--border-radius-pill);
  box-shadow: 0 4px 14px -4px rgba(196, 93, 62, 0.4);
  transition: all 0.3s ease;
}

.bologna-theme .btn-primary:hover,
.bologna-theme .btn-base:hover,
.bologna-theme .btn-base:focus {
  background: linear-gradient(135deg, var(--bologna-terra-600) 0%, #943c26 100%);
  box-shadow: 0 6px 20px -4px rgba(196, 93, 62, 0.5);
  transform: translateY(-2px);
  color: #ffffff;
}

.bologna-theme .btn-secondary,
.bologna-theme .btn-outline {
  background: #ffffff;
  color: var(--bologna-warm-gray);
  border: 2px solid #e8e5e0;
  padding: 0.875rem 2rem;
  font-family: var(--font-body), sans-serif;
  font-size: 0.875rem;
  font-weight: 500;
  border-radius: var(--border-radius-pill);
  transition: all 0.3s ease;
}

.bologna-theme .btn-secondary:hover,
.bologna-theme .btn-outline:hover {
  border-color: var(--bologna-terra);
  color: var(--bologna-terra);
  background-color: var(--bologna-terra-50);
}

/* Olive accent button */
.bologna-theme .btn-olive {
  background: linear-gradient(135deg, var(--bologna-olive) 0%, var(--bologna-olive-600) 100%);
  color: #ffffff;
  border: none;
  box-shadow: 0 4px 14px -4px rgba(92, 107, 77, 0.4);
}

.bologna-theme .btn-olive:hover {
  background: linear-gradient(135deg, var(--bologna-olive-600) 0%, #3c4535 100%);
  box-shadow: 0 6px 20px -4px rgba(92, 107, 77, 0.5);
}

/* ============================================
   MODERN CARDS
   ============================================ */

.bologna-theme .property-card,
.bologna-theme .card {
  background: #ffffff;
  border: none;
  border-radius: var(--border-radius-softer);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.bologna-theme .property-card:hover,
.bologna-theme .card:hover {
  box-shadow: var(--shadow-elevated);
  transform: translateY(-6px);
}

.bologna-theme .property-card .card-body,
.bologna-theme .card .card-body {
  padding: 1.5rem;
}

.bologna-theme .property-card .property-title {
  font-family: var(--font-display), sans-serif;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--bologna-warm-gray);
  margin-bottom: 0.5rem;
}

.bologna-theme .property-card .property-price {
  font-family: var(--font-display), sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--bologna-terra);
  letter-spacing: -0.01em;
}

.bologna-theme .property-card .property-location {
  font-size: 0.875rem;
  color: #9c9285;
  display: flex;
  align-items: center;
}

/* Property image overlay effect */
.bologna-theme .property-card .property-image {
  position: relative;
  overflow: hidden;
}

.bologna-theme .property-card .property-image img {
  transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

.bologna-theme .property-card:hover .property-image img {
  transform: scale(1.1);
}

.bologna-theme .property-card .property-image::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to top, rgba(61, 61, 61, 0.4) 0%, transparent 50%);
}

/* ============================================
   HEADER & NAVIGATION
   ============================================ */

.bologna-theme .navbar,
.bologna-theme header {
  background: #ffffff;
  padding: 1rem 0;
  transition: all 0.3s ease;
  box-shadow: 0 4px 24px -4px rgba(61, 61, 61, 0.08);
}

.bologna-theme .navbar.scrolled,
.bologna-theme header.scrolled {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(12px);
  box-shadow: var(--shadow-soft);
}

.bologna-theme .nav-link {
  font-family: var(--font-body), sans-serif;
  font-size: 0.875rem;
  font-weight: 500;
  color: #6a6156;
  padding: 0.5rem 1rem;
  border-radius: var(--border-radius-pill);
  transition: all 0.2s ease;
}

.bologna-theme .nav-link:hover {
  color: var(--bologna-terra);
  background-color: var(--bologna-terra-50);
}

.bologna-theme .navbar-brand {
  font-family: var(--font-display), sans-serif;
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--bologna-warm-gray);
  letter-spacing: -0.02em;
}

/* ============================================
   FOOTER
   ============================================ */

.bologna-theme footer,
.bologna-theme .fondo_footer {
  background: var(--footer-bg-color);
  color: var(--footer-text-color);
  padding: 4rem 0 2rem;
}

.bologna-theme footer h4,
.bologna-theme footer h5 {
  font-family: var(--font-display), sans-serif;
  font-size: 1rem;
  font-weight: 600;
  color: #ffffff;
  margin-bottom: 1.5rem;
}

.bologna-theme footer a {
  color: rgba(213, 208, 200, 0.95); /* Improved from 0.8 for WCAG AA compliance */
  transition: color 0.3s ease;
}

.bologna-theme footer a:hover {
  color: var(--bologna-terra-400);
}

/* ============================================
   HERO SECTION
   ============================================ */

.bologna-theme .hero-section {
  position: relative;
  min-height: 85vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-size: cover;
  background-position: center;
}

.bologna-theme .hero-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  /* Increased overlay opacity for WCAG AA contrast (minimum 4.5:1 for text) */
  background: linear-gradient(
    135deg,
    rgba(61, 61, 61, 0.55) 0%,
    rgba(61, 61, 61, 0.4) 50%,
    rgba(61, 61, 61, 0.6) 100%
  );
}

.bologna-theme .hero-content {
  position: relative;
  z-index: 1;
  text-align: center;
  color: white;
  max-width: 900px;
  padding: 2rem;
}

.bologna-theme .hero-title {
  font-family: var(--font-display), sans-serif;
  font-size: 3.5rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 1.5rem;
  color: white;
  text-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
  line-height: 1.1;
}

.bologna-theme .hero-subtitle {
  font-family: var(--font-body), sans-serif;
  font-size: 1.125rem;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 2rem;
  line-height: 1.7;
}

/* ============================================
   SEARCH FORM
   ============================================ */

.bologna-theme .search-container {
  background: white;
  padding: 2rem;
  border-radius: var(--border-radius-softer);
  box-shadow: var(--shadow-soft);
}

.bologna-theme .form-control,
.bologna-theme select,
.bologna-theme input[type="text"],
.bologna-theme input[type="number"] {
  border: 2px solid #e8e5e0;
  border-radius: 12px;
  padding: 0.875rem 1.25rem;
  font-family: var(--font-body), sans-serif;
  font-size: 0.9375rem;
  color: var(--bologna-warm-gray);
  transition: all 0.3s ease;
}

.bologna-theme .form-control:focus,
.bologna-theme select:focus,
.bologna-theme input:focus {
  border-color: var(--bologna-terra);
  box-shadow: 0 0 0 4px rgba(196, 93, 62, 0.1);
  outline: none;
}

.bologna-theme .form-label {
  font-family: var(--font-body), sans-serif;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--bologna-warm-gray);
  margin-bottom: 0.5rem;
}

/* ============================================
   PROPERTY DETAILS PAGE
   ============================================ */

.bologna-theme .property-detail-header {
  background: linear-gradient(135deg, var(--bologna-terra-50) 0%, var(--bologna-light) 100%);
  padding: 3rem 0;
}

.bologna-theme .property-detail-title {
  font-family: var(--font-display), sans-serif;
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--bologna-warm-gray);
}

.bologna-theme .property-detail-price {
  font-family: var(--font-display), sans-serif;
  font-size: 2rem;
  font-weight: 700;
  color: var(--bologna-terra);
}

.bologna-theme .property-features {
  display: flex;
  gap: 2rem;
  padding: 1.5rem 0;
  margin: 2rem 0;
}

.bologna-theme .property-feature {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.bologna-theme .property-feature-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bologna-terra-100);
  border-radius: 12px;
  color: var(--bologna-terra);
}

.bologna-theme .property-feature-value {
  font-family: var(--font-display), sans-serif;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--bologna-warm-gray);
}

.bologna-theme .property-feature-label {
  font-size: 0.75rem;
  color: #9c9285;
}

/* ============================================
   DECORATIVE ELEMENTS
   ============================================ */

/* Gradient accent */
.bologna-theme .gradient-accent {
  width: 60px;
  height: 4px;
  background: linear-gradient(90deg, var(--bologna-terra), var(--bologna-sand));
  border-radius: var(--border-radius-pill);
  margin: 1rem 0;
}

.bologna-theme .gradient-accent-center {
  margin: 1rem auto;
}

/* Badge/Tag styling */
.bologna-theme .property-badge,
.bologna-theme .badge {
  font-family: var(--font-body), sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.5rem 1rem;
  border-radius: var(--border-radius-pill);
}

.bologna-theme .badge-sale {
  background: var(--bologna-terra);
  color: #ffffff;
}

.bologna-theme .badge-rent {
  background: var(--bologna-olive);
  color: #ffffff;
}

.bologna-theme .badge-featured {
  background: linear-gradient(135deg, var(--bologna-sand) 0%, #c4915a 100%);
  color: #ffffff;
}

/* ============================================
   ANIMATIONS
   ============================================ */

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.bologna-theme .animate-fade-up {
  animation: fadeUp 0.6s ease forwards;
}

/* ============================================
   RESPONSIVE ADJUSTMENTS
   ============================================ */

@media (max-width: 768px) {
  .bologna-theme h1 {
    font-size: 2.25rem;
  }

  .bologna-theme h2 {
    font-size: 1.75rem;
  }

  .bologna-theme .hero-title {
    font-size: 2.5rem;
  }

  .bologna-theme .hero-section {
    min-height: 70vh;
  }

  .bologna-theme .btn-primary,
  .bologna-theme .btn-base {
    padding: 0.75rem 1.5rem;
    font-size: 0.875rem;
  }
}

/* ============================================
   UTILITY CLASSES
   ============================================ */

.bologna-theme .bg-terra {
  background-color: var(--bologna-terra);
}

.bologna-theme .bg-olive {
  background-color: var(--bologna-olive);
}

.bologna-theme .bg-sand-light {
  background-color: var(--bologna-terra-50);
}

.bologna-theme .text-terra {
  color: var(--bologna-terra);
}

.bologna-theme .text-olive {
  color: var(--bologna-olive);
}

.bologna-theme .text-sand {
  color: var(--bologna-sand);
}

.bologna-theme .border-terra {
  border-color: var(--bologna-terra);
}

/* Primary/Secondary semantic colors */
.bologna-theme .fondo_principal {
  background: var(--bologna-terra);
  color: #ffffff;
}

.bologna-theme .fondo_secundario {
  background: var(--bologna-olive);
  color: #ffffff;
}

.bologna-theme .color_principal {
  color: var(--bologna-terra) !important;
}

.bologna-theme .color_secundario {
  color: var(--bologna-olive) !important;
}

/* ============================================
   DARK MODE SUPPORT
   ============================================ */

<%
  dark_colors = @current_website&.dark_mode_enabled? ? (@current_website.dark_mode_colors || {}) : {}
  dark_bg = dark_colors["background_color"] || "#121212"
  dark_text = dark_colors["text_color"] || "#e8e8e8"
  dark_terra = dark_colors["primary_color"] || "#d97a5e"
  dark_olive = dark_colors["secondary_color"] || "#7a8b6d"
%>

<% if @current_website&.dark_mode_enabled? %>
/* Auto dark mode */
@media (prefers-color-scheme: dark) {
  .pwb-auto-dark.bologna-theme,
  .pwb-auto-dark .bologna-theme {
    --bologna-light: <%= dark_bg %>;
    --bologna-warm-gray: <%= dark_text %>;
    --bologna-terra: <%= dark_terra %>;
    background-color: var(--bologna-light);
    color: var(--bologna-warm-gray);
  }
}

/* Forced dark mode */
.pwb-dark.bologna-theme,
.pwb-dark .bologna-theme,
html.pwb-dark .bologna-theme {
  --bologna-light: <%= dark_bg %>;
  --bologna-warm-gray: <%= dark_text %>;
  --bologna-terra: <%= dark_terra %>;
  background-color: var(--bologna-light);
  color: var(--bologna-warm-gray);
}

.pwb-dark .bologna-theme .navbar,
.pwb-dark .bologna-theme header,
.pwb-dark .bologna-theme .property-card,
.pwb-dark .bologna-theme .card,
.pwb-dark .bologna-theme .search-container,
html.pwb-dark .bologna-theme .navbar,
html.pwb-dark .bologna-theme header,
html.pwb-dark .bologna-theme .property-card,
html.pwb-dark .bologna-theme .card,
html.pwb-dark .bologna-theme .search-container {
  background: color-mix(in srgb, <%= dark_bg %> 85%, white);
}

.pwb-dark .bologna-theme h1,
.pwb-dark .bologna-theme h2,
.pwb-dark .bologna-theme h3,
.pwb-dark .bologna-theme h4,
.pwb-dark .bologna-theme h5,
.pwb-dark .bologna-theme h6,
html.pwb-dark .bologna-theme h1,
html.pwb-dark .bologna-theme h2,
html.pwb-dark .bologna-theme h3,
html.pwb-dark .bologna-theme h4,
html.pwb-dark .bologna-theme h5,
html.pwb-dark .bologna-theme h6 {
  color: <%= dark_text %>;
}

.pwb-dark .bologna-theme .form-control,
.pwb-dark .bologna-theme select,
.pwb-dark .bologna-theme input,
html.pwb-dark .bologna-theme .form-control,
html.pwb-dark .bologna-theme select,
html.pwb-dark .bologna-theme input {
  background: color-mix(in srgb, <%= dark_bg %> 80%, white);
  border-color: rgba(255, 255, 255, 0.2);
  color: <%= dark_text %>;
}

.pwb-dark .bg-white,
html.pwb-dark .bg-white {
  background-color: color-mix(in srgb, <%= dark_bg %> 85%, white) !important;
}

.pwb-dark .text-gray-900,
.pwb-dark .text-gray-800,
.pwb-dark .text-gray-700,
html.pwb-dark .text-gray-900,
html.pwb-dark .text-gray-800,
html.pwb-dark .text-gray-700 {
  color: <%= dark_text %> !important;
}

.pwb-dark .border-gray-200,
.pwb-dark .border-gray-300,
html.pwb-dark .border-gray-200,
html.pwb-dark .border-gray-300 {
  border-color: rgba(255, 255, 255, 0.15) !important;
}
<% end %>

<%= render partial: '/pwb/custom_css/shared', locals: {} %>
