@import "tailwindcss";

/* Self-hosted fonts - eliminates Google Fonts dependency */
@import "@fontsource-variable/dm-sans";
@import "@fontsource-variable/outfit";

/* Bologna Mediterranean Theme */
@theme {
  /* Terra (Terracotta) palette */
  --color-terra-50: #fdf8f6;
  --color-terra-100: #f9ece6;
  --color-terra-200: #f2d5c9;
  --color-terra-300: #e7b5a0;
  --color-terra-400: #d98e6e;
  --color-terra-500: #c45d3e;
  --color-terra-600: #b14a2e;
  --color-terra-700: #943c26;
  --color-terra-800: #793324;
  --color-terra-900: #642d22;

  /* Olive palette */
  --color-olive-50: #f6f7f4;
  --color-olive-100: #e8ebe3;
  --color-olive-200: #d3d9c9;
  --color-olive-300: #b4bfa4;
  --color-olive-400: #95a37f;
  --color-olive-500: #5c6b4d;
  --color-olive-600: #4a5640;
  --color-olive-700: #3c4535;
  --color-olive-800: #32392d;
  --color-olive-900: #2b3028;

  /* Sand palette */
  --color-sand-50: #fdfcfa;
  --color-sand-100: #f9f6f0;
  --color-sand-200: #f2ebde;
  --color-sand-300: #e8dbc5;
  --color-sand-400: #d4a574;
  --color-sand-500: #c4915a;
  --color-sand-600: #a97648;
  --color-sand-700: #8c5f3c;
  --color-sand-800: #734e35;
  --color-sand-900: #5f422e;

  /* Warm Gray palette */
  --color-warm-gray-50: #faf9f7;
  --color-warm-gray-100: #f5f3f0;
  --color-warm-gray-200: #e8e5e0;
  --color-warm-gray-300: #d5d0c8;
  --color-warm-gray-400: #b8b0a4;
  --color-warm-gray-500: #9c9285;
  --color-warm-gray-600: #817669;
  --color-warm-gray-700: #6a6156;
  --color-warm-gray-800: #584f47;
  --color-warm-gray-900: #3d3d3d;

  /* Primary colors */
  --color-primary: var(--pwb-primary-color);
  --color-secondary: var(--pwb-secondary-color);
  --color-accent: var(--pwb-accent-color);

  /* Font families */
  --font-family-sans: 'DM Sans', system-ui, sans-serif;
  --font-family-display: 'Outfit', system-ui, sans-serif;

  /* Border radius */
  --radius-soft: 16px;
  --radius-softer: 20px;
  --radius-pill: 9999px;

  /* 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);

  /* Spacing */
  --spacing-18: 4.5rem;
  --spacing-22: 5.5rem;

  /* Animations */
  --animate-fade-up: fadeUp 0.6s ease-out forwards;
  --animate-scale-in: scaleIn 0.5s ease-out forwards;
  --animate-slide-in: slideIn 0.4s ease-out forwards;
}

/* ==========================================================================
   Dynamic Palette Color Overrides
   These override the static Tailwind colors with CSS variables set by the
   palette system at runtime. This enables palette switching without rebuilding.
   ========================================================================== */
:root {
  /* Terra palette - uses dynamic primary color from palette system */
  /* The --bologna-terra variable is set by _bologna.css.erb from style_variables["primary_color"] */
  --color-terra-500: var(--bologna-terra, #c45d3e);
  --color-terra-50: color-mix(in srgb, var(--bologna-terra, #c45d3e) 10%, white);
  --color-terra-100: color-mix(in srgb, var(--bologna-terra, #c45d3e) 20%, white);
  --color-terra-200: color-mix(in srgb, var(--bologna-terra, #c45d3e) 35%, white);
  --color-terra-300: color-mix(in srgb, var(--bologna-terra, #c45d3e) 50%, white);
  --color-terra-400: color-mix(in srgb, var(--bologna-terra, #c45d3e) 70%, white);
  --color-terra-600: color-mix(in srgb, var(--bologna-terra, #c45d3e) 85%, black);
  --color-terra-700: color-mix(in srgb, var(--bologna-terra, #c45d3e) 70%, black);
  --color-terra-800: color-mix(in srgb, var(--bologna-terra, #c45d3e) 55%, black);
  --color-terra-900: color-mix(in srgb, var(--bologna-terra, #c45d3e) 40%, black);

  /* Olive palette - uses dynamic secondary color from palette system */
  --color-olive-500: var(--bologna-olive, #5c6b4d);
  --color-olive-50: color-mix(in srgb, var(--bologna-olive, #5c6b4d) 10%, white);
  --color-olive-100: color-mix(in srgb, var(--bologna-olive, #5c6b4d) 20%, white);
  --color-olive-200: color-mix(in srgb, var(--bologna-olive, #5c6b4d) 35%, white);
  --color-olive-300: color-mix(in srgb, var(--bologna-olive, #5c6b4d) 50%, white);
  --color-olive-400: color-mix(in srgb, var(--bologna-olive, #5c6b4d) 70%, white);
  --color-olive-600: color-mix(in srgb, var(--bologna-olive, #5c6b4d) 85%, black);
  --color-olive-700: color-mix(in srgb, var(--bologna-olive, #5c6b4d) 70%, black);
  --color-olive-800: color-mix(in srgb, var(--bologna-olive, #5c6b4d) 55%, black);
  --color-olive-900: color-mix(in srgb, var(--bologna-olive, #5c6b4d) 40%, black);

  /* Sand/Accent palette - uses dynamic accent color from palette system */
  --color-sand-400: var(--bologna-sand, #d4a574);
  --color-sand-500: color-mix(in srgb, var(--bologna-sand, #d4a574) 90%, black);
  --color-sand-50: color-mix(in srgb, var(--bologna-sand, #d4a574) 10%, white);
  --color-sand-100: color-mix(in srgb, var(--bologna-sand, #d4a574) 20%, white);
  --color-sand-200: color-mix(in srgb, var(--bologna-sand, #d4a574) 35%, white);
  --color-sand-300: color-mix(in srgb, var(--bologna-sand, #d4a574) 50%, white);
  --color-sand-600: color-mix(in srgb, var(--bologna-sand, #d4a574) 75%, black);
  --color-sand-700: color-mix(in srgb, var(--bologna-sand, #d4a574) 60%, black);
  --color-sand-800: color-mix(in srgb, var(--bologna-sand, #d4a574) 45%, black);
  --color-sand-900: color-mix(in srgb, var(--bologna-sand, #d4a574) 30%, black);

  /* Primary/secondary/accent shortcuts */
  --color-primary: var(--bologna-terra, #c45d3e);
  --color-secondary: var(--bologna-olive, #5c6b4d);
  --color-accent: var(--bologna-sand, #d4a574);
}

/* Keyframes */
@keyframes fadeUp {
  0% { opacity: 0; transform: translateY(20px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes scaleIn {
  0% { opacity: 0; transform: scale(0.95); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes slideIn {
  0% { opacity: 0; transform: translateX(-10px); }
  100% { opacity: 1; transform: translateX(0); }
}

/* ==========================================================================
   Search Layout - Explicit non-nested responsive rules
   These override Tailwind's nested @media syntax for better browser support
   ========================================================================== */
@media (min-width: 1024px) {
  /* Sidebar filters: 1/4 width on large screens (LEFT side) */
  .search-layout .search-sidebar {
    width: 25%;
    /* No order property - sidebar stays LEFT per HTML source order */
  }

  /* Search results: 3/4 width on large screens (RIGHT side) */
  .search-layout .search-results,
  .search-layout .search-results-main {
    width: 75%;
  }

  /* Show filters on large screens */
  .search-layout .search-sidebar .filter-toggle {
    display: none;
  }

  .search-layout .search-sidebar .filter-content {
    display: block !important;
  }
}

/* ==========================================================================
   Team Grid - Explicit non-nested responsive rules
   ========================================================================== */
@media (min-width: 640px) {
  .team-grid-members {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (min-width: 1024px) {
  .team-grid-members {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

/* ==========================================================================
   Contact Page Grid - Explicit non-nested responsive rules
   ========================================================================== */
@media (min-width: 1024px) {
  .contact-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* ==========================================================================
   Services/Features Grid - Explicit non-nested responsive rules
   ========================================================================== */
@media (min-width: 768px) {
  .services-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

/* ==========================================================================
   Search Results View Modes
   Controls layout for grid and list views of property cards
   ========================================================================== */

/* Base property card inner - default to column layout */
.property-item .property-card-inner {
  flex-direction: column;
}

.property-item .property-image {
  width: 100%;
}

.property-item .property-image img {
  height: 12rem;
}

/* List view container */
.search-results-grid.results-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* List view: horizontal card layout */
.results-list .property-item .property-card-inner {
  flex-direction: row;
}

.results-list .property-item .property-image {
  width: 33.333333%;
  flex-shrink: 0;
}

.results-list .property-item .property-image img {
  height: 100%;
  min-height: 200px;
}

.results-list .property-item .property-details {
  width: 66.666667%;
}

/* Stack list items vertically on mobile */
@media (max-width: 767px) {
  .results-list .property-item .property-card-inner {
    flex-direction: column;
  }

  .results-list .property-item .property-image {
    width: 100%;
  }

  .results-list .property-item .property-image img {
    height: 12rem;
  }

  .results-list .property-item .property-details {
    width: 100%;
  }
}

/* ==========================================================================
   Property Detail Page Layout
   Controls layout for property detail pages on desktop vs mobile
   ========================================================================== */

/* Property detail page wrapper - constrain max width on desktop */
.property-detail-page {
  width: 100%;
}

/* Property detail container - max width constraint */
.property-detail-container {
  width: 100%;
  max-width: 80rem; /* 1280px - matches max-w-7xl */
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}

@media (min-width: 640px) {
  .property-detail-container {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

/* Property detail two-column layout */
.property-detail-layout {
  display: flex;
  flex-wrap: wrap;
  margin-left: -1rem;
  margin-right: -1rem;
}

/* Main content column - full width on mobile, 2/3 on desktop */
.property-detail-main {
  width: 100%;
  padding-left: 1rem;
  padding-right: 1rem;
}

/* Sidebar column - full width on mobile, 1/3 on desktop */
.property-detail-sidebar {
  width: 100%;
  padding-left: 1rem;
  padding-right: 1rem;
  margin-top: 2rem;
}

@media (min-width: 1024px) {
  .property-detail-main {
    width: 66.666667%; /* 2/3 */
  }

  .property-detail-sidebar {
    width: 33.333333%; /* 1/3 */
    margin-top: 0;
  }
}

/* Map section - full width but constrained container */
.property-detail-map {
  width: 100%;
}

.property-detail-map-inner {
  width: 100%;
  max-width: 80rem;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}

@media (min-width: 640px) {
  .property-detail-map-inner {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}
