/* Theme: Barcelona Mediterranean
 * A coastal Mediterranean theme with vibrant blues and warm accents
 * Color Palette: Mediterranean Blue, Terracotta, Golden Yellow, 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 */
  --barcelona-med: var(--pwb-primary-color);
  --barcelona-terra: var(--pwb-secondary-color);
  --barcelona-gold: var(--pwb-accent-color);
  --barcelona-warm: var(--pwb-text-color);
  --barcelona-light: var(--pwb-background-color);

  /* Extended Mediterranean Blue Palette - Mapped to PWB Dynamic Shades */
  --barcelona-med-50: var(--pwb-primary-50);
  --barcelona-med-100: var(--pwb-primary-100);
  --barcelona-med-200: var(--pwb-primary-200);
  --barcelona-med-300: var(--pwb-primary-300);
  --barcelona-med-400: var(--pwb-primary-400);
  --barcelona-med-500: var(--pwb-primary-500);
  --barcelona-med-600: var(--pwb-primary-600);
  --barcelona-med-700: var(--pwb-primary-700);
  --barcelona-med-800: var(--pwb-primary-800);
  --barcelona-med-900: var(--pwb-primary-900);

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

  /* Extended Gold Palette - Mapped to PWB Dynamic Shades */
  --barcelona-gold-50: var(--pwb-accent-50);
  --barcelona-gold-100: var(--pwb-accent-100);
  --barcelona-gold-200: var(--pwb-accent-200);
  --barcelona-gold-300: var(--pwb-accent-300);
  --barcelona-gold-400: var(--pwb-accent-400);
  --barcelona-gold-500: var(--pwb-accent-500);

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

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

  /* Typography */
  --font-display: <%= @current_website.style_variables["font_primary"] || "Cormorant Garamond" %>;
  --font-body: <%= @current_website.style_variables["font_secondary"] || "Montserrat" %>;

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

  /* Soft Shadows */
  --shadow-soft: 0 4px 24px -4px color-mix(in srgb, var(--pwb-text-color) 8%, transparent);
  --shadow-medium: 0 8px 32px -8px color-mix(in srgb, var(--pwb-text-color) 12%, transparent);
  --shadow-elevated: 0 16px 48px -12px color-mix(in srgb, var(--pwb-text-color) 16%, transparent);
  --shadow-glow: 0 0 40px color-mix(in srgb, var(--pwb-primary-color) 15%, transparent);
}

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

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

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

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

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

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

/* Section pretitles */
.barcelona-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(--barcelona-med-100);
  color: var(--barcelona-med);
  border-radius: var(--border-radius-pill);
  margin-bottom: 1rem;
}

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

.barcelona-theme .btn-primary,
.barcelona-theme .btn-base {
  background: linear-gradient(135deg, var(--barcelona-med) 0%, var(--barcelona-med-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-soft);
  box-shadow: 0 4px 14px -4px rgba(11, 83, 148, 0.4);
  transition: all 0.3s ease;
}

.barcelona-theme .btn-primary:hover,
.barcelona-theme .btn-base:hover,
.barcelona-theme .btn-base:focus {
  background: linear-gradient(135deg, var(--barcelona-med-600) 0%, var(--barcelona-med-700) 100%);
  box-shadow: 0 6px 20px -4px rgba(11, 83, 148, 0.5);
  transform: translateY(-2px);
  color: #ffffff;
}

.barcelona-theme .btn-secondary,
.barcelona-theme .btn-outline {
  background: #ffffff;
  color: var(--barcelona-warm);
  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-soft);
  transition: all 0.3s ease;
}

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

/* Terracotta accent button */
.barcelona-theme .btn-terra {
  background: linear-gradient(135deg, var(--barcelona-terra) 0%, var(--barcelona-terra-600) 100%);
  color: #ffffff;
  border: none;
  box-shadow: 0 4px 14px -4px rgba(184, 80, 62, 0.4);
}

.barcelona-theme .btn-terra:hover {
  background: linear-gradient(135deg, var(--barcelona-terra-600) 0%, #8a3c2f 100%);
  box-shadow: 0 6px 20px -4px rgba(184, 80, 62, 0.5);
}

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

.barcelona-theme .property-card,
.barcelona-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);
}

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

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

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

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

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

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

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

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

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

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

.barcelona-theme .navbar,
.barcelona-theme header {
  background: var(--barcelona-med-800);
  padding: 1rem 0;
  transition: all 0.3s ease;
}

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

.barcelona-theme .nav-link {
  font-family: var(--font-body), sans-serif;
  font-size: 0.875rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.85);
  padding: 0.5rem 1rem;
  border-radius: var(--border-radius-soft);
  transition: all 0.2s ease;
}

.barcelona-theme .nav-link:hover {
  color: var(--barcelona-gold);
  background-color: rgba(255, 255, 255, 0.1);
}

.barcelona-theme .navbar-brand {
  font-family: var(--font-display), serif;
  font-size: 1.5rem;
  font-weight: 600;
  color: #ffffff;
  letter-spacing: -0.02em;
}

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

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

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

.barcelona-theme footer a {
  /* WCAG AA: Improved contrast from 0.8 to 0.95 for 4.5:1+ ratio */
  color: rgba(213, 208, 200, 0.95);
  transition: color 0.3s ease;
}

.barcelona-theme footer a:hover {
  color: var(--barcelona-gold);
}

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

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

.barcelona-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(4, 47, 84, 0.7) 0%,
    rgba(4, 47, 84, 0.5) 50%,
    rgba(45, 52, 54, 0.65) 100%
  );
}

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

.barcelona-theme .hero-title {
  font-family: var(--font-display), 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;
}

.barcelona-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
   ============================================ */

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

.barcelona-theme .form-control,
.barcelona-theme select,
.barcelona-theme input[type="text"],
.barcelona-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(--barcelona-warm);
  transition: all 0.3s ease;
}

.barcelona-theme .form-control:focus,
.barcelona-theme select:focus,
.barcelona-theme input:focus {
  border-color: var(--barcelona-med);
  box-shadow: 0 0 0 4px rgba(11, 83, 148, 0.1);
  outline: none;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

/* Badge/Tag styling */
.barcelona-theme .property-badge,
.barcelona-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-soft);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

.barcelona-theme .bg-med {
  background-color: var(--barcelona-med);
}

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

.barcelona-theme .bg-gold-light {
  background-color: var(--barcelona-med-50);
}

.barcelona-theme .text-med {
  color: var(--barcelona-med);
}

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

.barcelona-theme .text-gold {
  color: var(--barcelona-gold);
}

.barcelona-theme .border-med {
  border-color: var(--barcelona-med);
}

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

.barcelona-theme .fondo_secundario {
  background: var(--barcelona-terra);
  color: #ffffff;
}

.barcelona-theme .color_principal {
  color: var(--barcelona-med) !important;
}

.barcelona-theme .color_secundario {
  color: var(--barcelona-terra) !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_med = dark_colors["primary_color"] || "#3b82f6"
  dark_terra = dark_colors["secondary_color"] || "#d97a5e"
%>

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

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

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

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

.pwb-dark .barcelona-theme .form-control,
.pwb-dark .barcelona-theme select,
.pwb-dark .barcelona-theme input,
html.pwb-dark .barcelona-theme .form-control,
html.pwb-dark .barcelona-theme select,
html.pwb-dark .barcelona-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: {} %>
