/* =============================================================================
   Website Theme Stylesheet
   Uses CSS custom properties set by ThemeHelper for site-specific theming
   ============================================================================= */

/* =============================================================================
   Base Styles - Applied to the website body
   ============================================================================= */

body {
  background-color: var(--site-bg, #ffffff);
  color: var(--site-text, #1d1d1f);
  font-family: var(--site-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* =============================================================================
   Typography
   ============================================================================= */

h1, h2, h3, h4, h5, h6 {
  color: var(--site-text, #1d1d1f);
}

p {
  color: var(--site-text-secondary, #6e6e73);
}

a {
  color: var(--site-primary, #0071e3);
  transition: color 0.2s ease;
}

a:hover {
  color: var(--site-primary-hover, #0077ed);
}

/* =============================================================================
   Site Header / Navigation
   ============================================================================= */

.site-header {
  background: var(--site-bg, #ffffff);
  border-bottom-color: var(--site-border-strong, rgba(0, 0, 0, 0.16));
}

.site-name-link {
  color: var(--site-text, #1d1d1f);
}

.site-name-link:hover {
  color: var(--site-primary, #0071e3);
}

.nav-link {
  color: var(--site-text, #1d1d1f);
}

.nav-link:hover,
.nav-link.active {
  color: var(--site-primary, #0071e3);
}

/* Contact button in navigation */
.contact-link {
  background: var(--site-primary, #0071e3);
  color: var(--site-bg, #ffffff) !important;
}

.contact-link:hover {
  background: var(--site-primary-hover, #0077ed);
  color: var(--site-bg, #ffffff) !important;
}

/* Mobile menu button */
.menu-button {
  color: var(--site-text, #1d1d1f);
}

/* =============================================================================
   Navigation Overlay (Mobile)
   ============================================================================= */

.navigation-overlay {
  background: var(--site-bg, #ffffff);
}

.navigation-overlay .nav-link {
  color: var(--site-text, #1d1d1f);
  border-bottom-color: var(--site-border, rgba(0, 0, 0, 0.1));
}

.navigation-overlay .nav-link:hover,
.navigation-overlay .nav-link.active {
  color: var(--site-primary, #0071e3);
}

.navigation-overlay .close-button {
  color: var(--site-text, #1d1d1f);
}

/* =============================================================================
   Buttons - Primary
   ============================================================================= */

.btn-primary,
.website-btn-primary {
  background-color: var(--site-primary, #0071e3);
  border-color: var(--site-primary, #0071e3);
  color: #ffffff;
}

.btn-primary:hover,
.website-btn-primary:hover {
  background-color: var(--site-primary-hover, #0077ed);
  border-color: var(--site-primary-hover, #0077ed);
}

.btn-primary:focus,
.website-btn-primary:focus {
  box-shadow: 0 0 0 3px var(--site-primary-light, rgba(0, 113, 227, 0.1));
}

/* Buttons - Secondary/Outline */
.btn-outline-primary,
.website-btn-outline {
  color: var(--site-primary, #0071e3);
  border-color: var(--site-primary, #0071e3);
  background-color: transparent;
}

.btn-outline-primary:hover,
.website-btn-outline:hover {
  background-color: var(--site-primary, #0071e3);
  color: #ffffff;
}

/* =============================================================================
   Cards and Containers
   ============================================================================= */

.website-card {
  background: var(--site-bg, #ffffff);
  border-color: var(--site-border, rgba(0, 0, 0, 0.1));
  box-shadow: 0 2px 8px var(--site-shadow, rgba(0, 0, 0, 0.08));
}

.website-section {
  background: var(--site-bg, #ffffff);
}

.website-section-alt {
  background: var(--site-bg-secondary, #f5f5f7);
}

/* =============================================================================
   Footer
   ============================================================================= */

.site-footer {
  background: var(--site-bg-secondary, #f5f5f7);
  border-top-color: var(--site-border, rgba(0, 0, 0, 0.1));
  color: var(--site-text-secondary, #6e6e73);
}

.site-footer a {
  color: var(--site-text-secondary, #6e6e73);
}

.site-footer a:hover {
  color: var(--site-primary, #0071e3);
}

/* =============================================================================
   Contact Overlay / Modal
   ============================================================================= */

.contact-overlay-backdrop {
  background: var(--site-overlay, rgba(0, 0, 0, 0.5));
}

.contact-overlay-content {
  background: var(--site-bg, #ffffff);
  color: var(--site-text, #1d1d1f);
}

.contact-overlay-header {
  border-bottom-color: var(--site-border, rgba(0, 0, 0, 0.1));
}

.contact-overlay-close {
  color: var(--site-text-secondary, #6e6e73);
}

.contact-overlay-close:hover {
  color: var(--site-text, #1d1d1f);
}

/* =============================================================================
   Forms
   ============================================================================= */

.website-input,
.website-textarea,
.website-select {
  background: var(--site-bg, #ffffff);
  border-color: var(--site-border-strong, rgba(0, 0, 0, 0.16));
  color: var(--site-text, #1d1d1f);
}

.website-input:focus,
.website-textarea:focus,
.website-select:focus {
  border-color: var(--site-primary, #0071e3);
  box-shadow: 0 0 0 3px var(--site-primary-light, rgba(0, 113, 227, 0.1));
}

.website-input::placeholder,
.website-textarea::placeholder {
  color: var(--site-text-muted, #86868b);
}

.website-label {
  color: var(--site-text, #1d1d1f);
}

/* =============================================================================
   Content Blocks - Gallery
   ============================================================================= */

.gallery-section {
  background: var(--site-bg, #ffffff);
}

.gallery-overlay {
  background: linear-gradient(to top, rgba(var(--site-secondary-rgb, 29, 29, 31), 0.8), transparent);
}

.gallery-title {
  color: #ffffff;
}

.gallery-nav-button {
  background: var(--site-bg, #ffffff);
  color: var(--site-text, #1d1d1f);
}

.gallery-nav-button:hover {
  background: var(--site-primary, #0071e3);
  color: #ffffff;
}

.gallery-dot {
  background: var(--site-bg, #ffffff);
  opacity: 0.5;
}

.gallery-dot.active {
  background: var(--site-primary, #0071e3);
  opacity: 1;
}

/* =============================================================================
   Content Blocks - Availability
   ============================================================================= */

.availability-section {
  background: var(--site-bg-secondary, #f5f5f7);
}

.unit-card {
  background: var(--site-bg, #ffffff);
  border-color: var(--site-border, rgba(0, 0, 0, 0.1));
}

.unit-card:hover {
  border-color: var(--site-primary, #0071e3);
}

.unit-price {
  color: var(--site-primary, #0071e3);
}

.unit-details {
  color: var(--site-text-secondary, #6e6e73);
}

/* =============================================================================
   Content Blocks - Amenities
   ============================================================================= */

.amenities-section {
  background: var(--site-bg, #ffffff);
}

.amenity-item {
  background: var(--site-bg-secondary, #f5f5f7);
  color: var(--site-text, #1d1d1f);
}

.amenity-icon {
  color: var(--site-primary, #0071e3);
}

/* =============================================================================
   Content Blocks - Neighborhood
   ============================================================================= */

.neighborhood-section {
  background: var(--site-bg-secondary, #f5f5f7);
}

.place-card {
  background: var(--site-bg, #ffffff);
  border-color: var(--site-border, rgba(0, 0, 0, 0.1));
}

.place-category {
  color: var(--site-primary, #0071e3);
}

.place-name {
  color: var(--site-text, #1d1d1f);
}

.place-distance {
  color: var(--site-text-muted, #86868b);
}

/* =============================================================================
   Section Headers
   ============================================================================= */

.section-title {
  color: var(--site-text, #1d1d1f);
}

.section-description {
  color: var(--site-text-secondary, #6e6e73);
}

/* =============================================================================
   Badges and Tags
   ============================================================================= */

.website-badge {
  background: var(--site-primary-light, rgba(0, 113, 227, 0.1));
  color: var(--site-primary, #0071e3);
}

.website-badge-secondary {
  background: var(--site-bg-tertiary, #e8e8ed);
  color: var(--site-text-secondary, #6e6e73);
}

/* =============================================================================
   Dark Mode Specific Adjustments
   ============================================================================= */

[data-color-mode="dark"] body {
  background-color: var(--site-bg, #000000);
  color: var(--site-text, #f5f5f7);
}

/* Ensure white text on primary buttons in dark mode */
[data-color-mode="dark"] .btn-primary,
[data-color-mode="dark"] .website-btn-primary,
[data-color-mode="dark"] .contact-link {
  color: #ffffff !important;
}

/* Adjust shadows for dark mode */
[data-color-mode="dark"] .website-card,
[data-color-mode="dark"] .unit-card,
[data-color-mode="dark"] .place-card {
  box-shadow: 0 2px 8px var(--site-shadow, rgba(0, 0, 0, 0.3));
}

/* Dark mode input styling */
[data-color-mode="dark"] .website-input,
[data-color-mode="dark"] .website-textarea,
[data-color-mode="dark"] .website-select {
  background: var(--site-bg-secondary, #1d1d1f);
}

/* =============================================================================
   Utility Classes
   ============================================================================= */

.text-primary {
  color: var(--site-primary, #0071e3) !important;
}

.bg-primary {
  background-color: var(--site-primary, #0071e3) !important;
}

.border-primary {
  border-color: var(--site-primary, #0071e3) !important;
}

.text-site {
  color: var(--site-text, #1d1d1f);
}

.text-site-secondary {
  color: var(--site-text-secondary, #6e6e73);
}

.text-site-muted {
  color: var(--site-text-muted, #86868b);
}

.bg-site {
  background-color: var(--site-bg, #ffffff);
}

.bg-site-secondary {
  background-color: var(--site-bg-secondary, #f5f5f7);
}