/* Theme: Brisbane Luxury
 * A sophisticated theme exuding luxury and elegance
 * Color Palette: Deep Navy, Champagne Gold, Warm Cream, Rich Charcoal
 */

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

:root {
  /* Primary Luxury Colors - Mapped to PWB Standard Variables */
  --brisbane-gold: var(--pwb-primary-color);
  --brisbane-navy: var(--pwb-secondary-color);
  --brisbane-accent: var(--pwb-accent-color);
  --brisbane-cream: var(--pwb-background-color);
  --brisbane-charcoal: var(--pwb-text-color);
  --brisbane-pearl: var(--pwb-background-color);

  /* Accent Colors - Mapped to PWB Dynamic Shades */
  --brisbane-gold-light: var(--pwb-primary-200);
  --brisbane-gold-dark: var(--pwb-primary-700);
  --brisbane-navy-light: var(--pwb-secondary-200);
  --brisbane-navy-dark: var(--pwb-secondary-700);

  /* Footer Colors */
  --footer-bg-color: var(--pwb-footer-background-color);
  --footer-text-color: var(--pwb-footer-text-color);
  --footer-link-color: var(--brisbane-gold);
  --footer-link-hover-color: var(--pwb-primary-100);

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

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

  /* Spacing & Sizing */
  --border-radius: <%= @current_website.style_variables["border_radius"] || "0" %>;
  --container-padding: <%= @current_website.style_variables["container_padding"] || "2rem" %>;

  /* Luxury Shadows */
  --shadow-elegant: 0 4px 20px rgba(26, 39, 68, 0.08);
  --shadow-hover: 0 8px 30px rgba(26, 39, 68, 0.12);
  --shadow-card: 0 2px 15px rgba(0, 0, 0, 0.05);
}

/* ============================================
   LUXURY TYPOGRAPHY
   ============================================ */

.brisbane-theme {
  font-family: var(--font-secondary), 'Helvetica Neue', sans-serif;
  color: var(--brisbane-charcoal);
  background-color: var(--brisbane-cream);
  letter-spacing: 0.01em;
}

.brisbane-theme h1,
.brisbane-theme h2,
.brisbane-theme h3,
.brisbane-theme h4,
.brisbane-theme h5,
.brisbane-theme h6 {
  font-family: var(--font-primary), 'Times New Roman', serif;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--brisbane-navy);
}

.brisbane-theme h1 {
  font-size: 3rem;
  line-height: 1.2;
}

.brisbane-theme h2 {
  font-size: 2.25rem;
  line-height: 1.3;
}

.brisbane-theme h3 {
  font-size: 1.75rem;
  line-height: 1.4;
}

/* Elegant uppercase headings */
.brisbane-theme .section-title {
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-size: 0.875rem;
  font-family: var(--font-secondary), sans-serif;
  font-weight: 500;
  color: var(--brisbane-gold);
  margin-bottom: 0.5rem;
}

/* ============================================
   LUXURY BUTTONS
   ============================================ */

.brisbane-theme .btn-primary,
.brisbane-theme .btn-base {
  background: var(--brisbane-navy);
  color: var(--brisbane-cream);
  border: 1px solid var(--brisbane-navy);
  padding: 0.875rem 2rem;
  font-family: var(--font-secondary), sans-serif;
  font-size: 0.8125rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  border-radius: 0;
}

.brisbane-theme .btn-primary:hover,
.brisbane-theme .btn-base:hover,
.brisbane-theme .btn-base:focus {
  background: var(--brisbane-gold);
  border-color: var(--brisbane-gold);
  color: var(--brisbane-navy);
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
}

.brisbane-theme .btn-secondary,
.brisbane-theme .btn-outline {
  background: transparent;
  color: var(--brisbane-navy);
  border: 1px solid var(--brisbane-navy);
  padding: 0.875rem 2rem;
  font-family: var(--font-secondary), sans-serif;
  font-size: 0.8125rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  border-radius: 0;
}

.brisbane-theme .btn-secondary:hover,
.brisbane-theme .btn-outline:hover {
  background: var(--brisbane-navy);
  color: var(--brisbane-cream);
}

/* Gold accent button */
.brisbane-theme .btn-gold {
  background: var(--brisbane-gold);
  color: var(--brisbane-navy);
  border: 1px solid var(--brisbane-gold);
}

.brisbane-theme .btn-gold:hover {
  background: var(--brisbane-gold-dark);
  border-color: var(--brisbane-gold-dark);
}

/* ============================================
   LUXURY CARDS
   ============================================ */

.brisbane-theme .property-card,
.brisbane-theme .card {
  background: white;
  border: none;
  border-radius: 0;
  box-shadow: var(--shadow-card);
  overflow: hidden;
  transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.brisbane-theme .property-card:hover,
.brisbane-theme .card:hover {
  box-shadow: var(--shadow-hover);
  transform: translateY(-4px);
}

.brisbane-theme .property-card .card-body,
.brisbane-theme .card .card-body {
  padding: 1.75rem;
}

.brisbane-theme .property-card .property-title {
  font-family: var(--font-primary), serif;
  font-size: 1.375rem;
  font-weight: 500;
  color: var(--brisbane-navy);
  margin-bottom: 0.5rem;
}

.brisbane-theme .property-card .property-price {
  font-family: var(--font-secondary), sans-serif;
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--brisbane-gold);
  letter-spacing: 0.02em;
}

.brisbane-theme .property-card .property-location {
  font-size: 0.875rem;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

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

.brisbane-theme .property-card .property-image::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to bottom, transparent 60%, rgba(26, 39, 68, 0.4));
  opacity: 0;
  transition: opacity 0.4s ease;
}

.brisbane-theme .property-card:hover .property-image::after {
  opacity: 1;
}

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

.brisbane-theme .navbar,
.brisbane-theme header {
  background: white;
  border-bottom: 1px solid rgba(26, 39, 68, 0.08);
  padding: 1.25rem 0;
}

.brisbane-theme .navbar.scrolled {
  box-shadow: var(--shadow-elegant);
}

.brisbane-theme .nav-link {
  font-family: var(--font-secondary), sans-serif;
  font-size: 0.8125rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--brisbane-navy);
  padding: 0.5rem 1.25rem;
  transition: color 0.3s ease;
}

.brisbane-theme .nav-link:hover {
  color: var(--brisbane-gold);
}

.brisbane-theme .navbar-brand {
  font-family: var(--font-primary), serif;
  font-size: 1.75rem;
  font-weight: 500;
  color: var(--brisbane-navy);
  letter-spacing: 0.02em;
}

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

.brisbane-theme footer,
.brisbane-theme .fondo_footer {
  background: var(--brisbane-navy);
  color: var(--brisbane-cream);
  padding: 4rem 0 2rem;
}

.brisbane-theme footer h4,
.brisbane-theme footer h5 {
  font-family: var(--font-secondary), sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--brisbane-gold);
  margin-bottom: 1.5rem;
}

.brisbane-theme footer a {
  color: rgba(250, 248, 245, 0.9); /* Improved from 0.8 for WCAG AA compliance */
  transition: color 0.3s ease;
}

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

.brisbane-theme footer .footer-divider {
  border-top: 1px solid rgba(201, 169, 98, 0.2);
  margin: 2rem 0;
}

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

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

.brisbane-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(26, 39, 68, 0.75) 0%,
    rgba(26, 39, 68, 0.55) 50%,
    rgba(26, 39, 68, 0.7) 100%
  );
}

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

.brisbane-theme .hero-title {
  font-family: var(--font-primary), serif;
  font-size: 4rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  margin-bottom: 1rem;
  color: white;
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.2);
}

.brisbane-theme .hero-subtitle {
  font-family: var(--font-secondary), sans-serif;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.25em;
  color: var(--brisbane-gold);
  margin-bottom: 2rem;
}

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

.brisbane-theme .search-container {
  background: white;
  padding: 2rem;
  box-shadow: var(--shadow-elegant);
}

.brisbane-theme .form-control,
.brisbane-theme select,
.brisbane-theme input[type="text"],
.brisbane-theme input[type="number"] {
  border: 1px solid rgba(26, 39, 68, 0.15);
  border-radius: 0;
  padding: 0.875rem 1rem;
  font-family: var(--font-secondary), sans-serif;
  font-size: 0.875rem;
  color: var(--brisbane-charcoal);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.brisbane-theme .form-control:focus,
.brisbane-theme select:focus,
.brisbane-theme input:focus {
  border-color: var(--brisbane-gold);
  box-shadow: 0 0 0 3px rgba(201, 169, 98, 0.1);
  outline: none;
}

.brisbane-theme .form-label {
  font-family: var(--font-secondary), sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--brisbane-navy);
  margin-bottom: 0.5rem;
}

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

.brisbane-theme .property-detail-header {
  background: var(--brisbane-pearl);
  padding: 3rem 0;
  border-bottom: 1px solid rgba(26, 39, 68, 0.08);
}

.brisbane-theme .property-detail-title {
  font-family: var(--font-primary), serif;
  font-size: 2.5rem;
  color: var(--brisbane-navy);
}

.brisbane-theme .property-detail-price {
  font-family: var(--font-secondary), sans-serif;
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--brisbane-gold);
}

.brisbane-theme .property-features {
  display: flex;
  gap: 2rem;
  padding: 1.5rem 0;
  border-top: 1px solid rgba(26, 39, 68, 0.08);
  border-bottom: 1px solid rgba(26, 39, 68, 0.08);
  margin: 2rem 0;
}

.brisbane-theme .property-feature {
  text-align: center;
}

.brisbane-theme .property-feature-value {
  font-family: var(--font-primary), serif;
  font-size: 1.5rem;
  color: var(--brisbane-navy);
}

.brisbane-theme .property-feature-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #6b7280;
}

/* ============================================
   CONTACT FORM
   ============================================ */

.brisbane-theme .contact-section {
  background: var(--brisbane-pearl);
  padding: 4rem 0;
}

.brisbane-theme .contact-form {
  background: white;
  padding: 3rem;
  box-shadow: var(--shadow-card);
}

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

/* Gold accent line */
.brisbane-theme .gold-accent {
  width: 60px;
  height: 2px;
  background: var(--brisbane-gold);
  margin: 1rem 0;
}

.brisbane-theme .gold-accent-center {
  margin: 1rem auto;
}

/* Section divider */
.brisbane-theme .section-divider {
  width: 100%;
  height: 1px;
  background: linear-gradient(
    to right,
    transparent,
    var(--brisbane-gold),
    transparent
  );
  margin: 3rem 0;
}

/* Badge/Tag styling */
.brisbane-theme .property-badge,
.brisbane-theme .badge {
  background: var(--brisbane-gold);
  color: var(--brisbane-navy);
  font-family: var(--font-secondary), sans-serif;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 0.375rem 0.75rem;
  border-radius: 0;
}

.brisbane-theme .badge-featured {
  background: var(--brisbane-navy);
  color: var(--brisbane-gold);
}

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

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

.brisbane-theme .animate-fade-in-up {
  animation: fadeInUp 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

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

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

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

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

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

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

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

.brisbane-theme .bg-luxury-navy {
  background-color: var(--brisbane-navy);
}

.brisbane-theme .bg-luxury-gold {
  background-color: var(--brisbane-gold);
}

.brisbane-theme .bg-luxury-cream {
  background-color: var(--brisbane-cream);
}

.brisbane-theme .text-luxury-navy {
  color: var(--brisbane-navy);
}

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

.brisbane-theme .border-luxury-gold {
  border-color: var(--brisbane-gold);
}

/* Primary/Secondary semantic colors */
.fondo_principal {
  background: var(--brisbane-navy);
  color: var(--brisbane-cream);
}

.fondo_secundario {
  background: var(--brisbane-gold);
  color: var(--brisbane-navy);
}

.color_principal {
  color: var(--brisbane-navy) !important;
}

.color_secundario {
  color: var(--brisbane-gold) !important;
}

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

<%
  # Get dark mode colors from palette (if dark mode is enabled)
  dark_colors = @current_website&.dark_mode_enabled? ? (@current_website.dark_mode_colors || {}) : {}

  # Dark mode Brisbane colors (inverted for readability)
  dark_brisbane_bg = dark_colors["background_color"] || "#121212"
  dark_brisbane_text = dark_colors["text_color"] || "#e8e8e8"
  dark_brisbane_gold = dark_colors["primary_color"] || "#d4b574"
  dark_brisbane_navy = dark_colors["secondary_color"] || "#2a3f5f"
%>

<% if @current_website&.dark_mode_enabled? %>
/* Auto dark mode (respects system preference) */
@media (prefers-color-scheme: dark) {
  .pwb-auto-dark.brisbane-theme,
  .pwb-auto-dark .brisbane-theme {
    --brisbane-cream: <%= dark_brisbane_bg %>;
    --brisbane-charcoal: <%= dark_brisbane_text %>;
    --brisbane-gold: <%= dark_brisbane_gold %>;
    --brisbane-pearl: color-mix(in srgb, <%= dark_brisbane_bg %> 90%, white);
    background-color: var(--brisbane-cream);
    color: var(--brisbane-charcoal);
  }

  .pwb-auto-dark .brisbane-theme .navbar,
  .pwb-auto-dark .brisbane-theme header,
  .pwb-auto-dark .brisbane-theme .property-card,
  .pwb-auto-dark .brisbane-theme .card,
  .pwb-auto-dark .brisbane-theme .search-container,
  .pwb-auto-dark .brisbane-theme .contact-form {
    background: color-mix(in srgb, <%= dark_brisbane_bg %> 85%, white);
  }

  .pwb-auto-dark .brisbane-theme h1,
  .pwb-auto-dark .brisbane-theme h2,
  .pwb-auto-dark .brisbane-theme h3,
  .pwb-auto-dark .brisbane-theme h4,
  .pwb-auto-dark .brisbane-theme h5,
  .pwb-auto-dark .brisbane-theme h6 {
    color: <%= dark_brisbane_text %>;
  }
}

/* Forced dark mode */
.pwb-dark.brisbane-theme,
.pwb-dark .brisbane-theme,
html.pwb-dark .brisbane-theme {
  --brisbane-cream: <%= dark_brisbane_bg %>;
  --brisbane-charcoal: <%= dark_brisbane_text %>;
  --brisbane-gold: <%= dark_brisbane_gold %>;
  --brisbane-pearl: color-mix(in srgb, <%= dark_brisbane_bg %> 90%, white);
  background-color: var(--brisbane-cream);
  color: var(--brisbane-charcoal);
}

.pwb-dark .brisbane-theme .navbar,
.pwb-dark .brisbane-theme header,
html.pwb-dark .brisbane-theme .navbar,
html.pwb-dark .brisbane-theme header {
  background: color-mix(in srgb, <%= dark_brisbane_bg %> 85%, white);
  border-bottom-color: rgba(255, 255, 255, 0.1);
}

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

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

.pwb-dark .brisbane-theme .nav-link,
html.pwb-dark .brisbane-theme .nav-link {
  color: <%= dark_brisbane_text %>;
}

.pwb-dark .brisbane-theme .form-control,
.pwb-dark .brisbane-theme select,
.pwb-dark .brisbane-theme input[type="text"],
.pwb-dark .brisbane-theme input[type="number"],
html.pwb-dark .brisbane-theme .form-control,
html.pwb-dark .brisbane-theme select,
html.pwb-dark .brisbane-theme input[type="text"],
html.pwb-dark .brisbane-theme input[type="number"] {
  background: color-mix(in srgb, <%= dark_brisbane_bg %> 80%, white);
  border-color: rgba(255, 255, 255, 0.2);
  color: <%= dark_brisbane_text %>;
}

/* Override Tailwind utility classes in dark mode */
.pwb-dark .bg-luxury-cream,
html.pwb-dark .bg-luxury-cream {
  background-color: <%= dark_brisbane_bg %> !important;
}

.pwb-dark .text-luxury-charcoal,
html.pwb-dark .text-luxury-charcoal {
  color: <%= dark_brisbane_text %> !important;
}

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

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

.pwb-dark .text-gray-700,
.pwb-dark .text-gray-600,
html.pwb-dark .text-gray-700,
html.pwb-dark .text-gray-600 {
  color: color-mix(in srgb, <%= dark_brisbane_text %> 80%, black) !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: {} %>
