/*
Theme Name: RumahPremium
Theme URI: https://rumahpremium.com
Author: RumahPremium Team
Author URI: https://rumahpremium.com
Description: Modern and elegant real estate theme with navy blue and silver design. Perfect for property listings, real estate agencies, and housing developers. Features advanced search, property listings, WhatsApp integration, and responsive design.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.4
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: rumahpremium
Tags: real-estate, property, modern, elegant, responsive, navy-blue, silver, mobile-first, custom-colors, custom-menu, featured-images, full-width-template, translation-ready
*/

/* ===== CSS Variables / Design System ===== */
:root {
  --primary: 222 47% 20%;
  --primary-foreground: 210 40% 98%;
  --secondary: 210 40% 96.1%;
  --secondary-foreground: 222.2 47.4% 11.2%;
  --accent: 210 40% 90%;
  --accent-foreground: 222.2 47.4% 11.2%;
  --muted: 210 40% 96.1%;
  --muted-foreground: 215.4 16.3% 46.9%;
  --card: 0 0% 100%;
  --card-foreground: 222.2 84% 4.9%;
  --border: 214.3 31.8% 91.4%;
  --input: 214.3 31.8% 91.4%;
  --ring: 222.2 84% 4.9%;
  --radius: 0.5rem;
  
  /* Premium colors */
  --navy: 222 47% 20%;
  --silver: 210 40% 90%;
  --premium-gradient: linear-gradient(135deg, hsl(222 47% 20%) 0%, hsl(222 47% 30%) 100%);
}

/* ===== Reset & Base Styles ===== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  line-height: 1.6;
  color: hsl(var(--card-foreground));
  background-color: hsl(var(--secondary));
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
}

/* ===== Typography ===== */
h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  line-height: 1.2;
  color: hsl(var(--primary));
}

h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.75rem; }
h4 { font-size: 1.5rem; }
h5 { font-size: 1.25rem; }
h6 { font-size: 1rem; }

/* ===== Buttons ===== */
.btn {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-primary {
  background: var(--premium-gradient);
  color: hsl(var(--primary-foreground));
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px -10px hsla(var(--primary), 0.5);
}

/* ===== Header ===== */
.site-header {
  background: hsl(var(--card));
  border-bottom: 1px solid hsl(var(--border));
  position: sticky;
  top: 0;
  z-index: 1000;
}

.site-navigation {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
}

/* ===== Property Cards ===== */
.property-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 2rem;
  margin: 2rem 0;
}

.property-card {
  background: hsl(var(--card));
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}

.property-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

/* ===== Footer ===== */
.site-footer {
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  padding: 3rem 0 1rem;
  margin-top: 4rem;
}

/* ===== Responsive ===== */
@media (max-width: 768px) {
  h1 { font-size: 2rem; }
  h2 { font-size: 1.75rem; }
  
  .property-grid {
    grid-template-columns: 1fr;
  }
}