/* Custom styles for Estate Rise theme, complementing Tailwind CSS */

/* --- CSS Custom Properties (Color Palette extracted from post-6.css) --- */
:root {
    --e-global-color-primary: #000000;
    /* Black */
    --e-global-color-secondary: #E3ECE7;
    /* Light Gray/Greenish */
    --e-global-color-text: #E3ECE7;
    /* Same as secondary, likely for text on dark backgrounds */
    --e-global-color-accent: #175151;
    /* Dark Teal/Green */
    --e-global-color-611b28d: #FACA51;
    /* Bright Yellow/Gold */
    --e-global-color-48aacca: #FFFFFF;
    /* White */
    --e-global-color-414ddad: #E3ECE7;
    /* Same as secondary, likely a background */
    --e-global-color-567d6cb: #175151;
    /* Same as accent */
    --e-global-color-6a717cf: #000000;
    /* Same as primary */
    --e-global-color-19a3c89: #175151C7;
    /* Dark Teal/Green with opacity */

    /* Mapped custom properties for consistent use, derived from Elementor globals */
    --color-brand-black: var(--e-global-color-primary);
    --color-brand-light-gray-green: var(--e-global-color-secondary);
    --color-brand-dark-teal: var(--e-global-color-accent);
    --color-brand-yellow-gold: var(--e-global-color-611b28d);
    --color-brand-white: var(--e-global-color-48aacca);
    --color-brand-dark-teal-alpha: var(--e-global-color-19a3c89);

    /* General use colors from reset.css/header-footer.css */
    --color-body-text: #333;
    /* From reset.css body color */
    --color-link-default: #c36;
    /* From reset.css a color */
    --color-link-hover: #336;
    /* From reset.css a:active, a:hover color */
    --color-form-border: #666;
    /* From reset.css input border */
    --color-form-border-focus: #333;
    /* From reset.css input:focus border */
    --color-border-light: #eee;
    /* From header-footer.css list-item borders */
    --color-border-medium: #ccc;
    /* From theme.css comments border */

    /* Tailwind-like classes for brand colors */
    --tw-bg-brand-black: var(--color-brand-black);
    --tw-text-brand-black: var(--color-brand-black);
    --tw-bg-brand-light-gray-green: var(--color-brand-light-gray-green);
    --tw-text-brand-light-gray-green: var(--color-brand-light-gray-green);
    --tw-bg-brand-dark-teal: var(--color-brand-dark-teal);
    --tw-text-brand-dark-teal: var(--color-brand-dark-teal);
    --tw-bg-brand-yellow-gold: var(--color-brand-yellow-gold);
    --tw-text-brand-yellow-gold: var(--color-brand-yellow-gold);
    --tw-bg-brand-white: var(--color-brand-white);
    --tw-text-brand-white: var(--color-brand-white);
    --tw-bg-darkest-gray: var(--color-darkest-gray);
    --tw-text-text-light: var(--color-text-light);
}

/* --- Base Typography from reset.css and post-6.css --- */
body {
    background-color: var(--color-brand-white);
    /* From reset.css */
    color: var(--color-body-text);
    /* From reset.css */
    font-family: "Inria Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    /* Primary text font */
    font-size: 1rem;
    /* 16px from reset.css */
    font-weight: 400;
    /* from reset.css */
    line-height: 1.5;
    /* from reset.css */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Headings from post-6.css Elementor global typography */
h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--color-brand-black);
    /* Default from Elementor primary global color */
    font-family: "Maven Pro", Sans-serif;
    /* Primary heading font */
    font-weight: 500;
    /* From reset.css default heading font-weight */
    line-height: 1.2;
    /* From reset.css default heading line-height */
    margin-block-start: .5rem;
    /* From reset.css */
    margin-block-end: 1rem;
    /* From reset.css */
}

/* Specific heading styles from post-6.css --e-global-typography-xxxx */
h1 {
    color: var(--color-brand-white);
    /* Overriding default for h1 as per Elementor */
    font-family: "Maven Pro", Sans-serif;
    font-size: var(--e-global-typography-12b9b40-font-size, 65px);
    font-weight: bold;
    text-transform: capitalize;
    line-height: var(--e-global-typography-12b9b40-line-height, 70px);
}

h2 {
    color: var(--color-brand-black);
    font-family: "Maven Pro", Sans-serif;
    font-size: var(--e-global-typography-89223c0-font-size, 35px);
    font-weight: 600;
    text-transform: capitalize;
    line-height: var(--e-global-typography-89223c0-line-height, 41px);
}

h3 {
    color: var(--color-brand-black);
    font-family: "Maven Pro", Sans-serif;
    font-size: var(--e-global-typography-2218863-font-size, 22px);
    font-weight: 600;
    text-transform: capitalize;
    line-height: var(--e-global-typography-2218863-line-height, 28px);
}

h4 {
    color: var(--color-brand-black);
    font-family: "Maven Pro", Sans-serif;
    font-size: var(--e-global-typography-502e136-font-size, 20px);
    font-weight: bold;
    text-transform: capitalize;
    line-height: var(--e-global-typography-502e136-line-height, 26px);
}

h5 {
    color: var(--color-brand-black);
    font-family: "Maven Pro", Sans-serif;
    font-size: var(--e-global-typography-62ebd3d-font-size, 18px);
    font-weight: bold;
    text-transform: capitalize;
    line-height: var(--e-global-typography-62ebd3d-line-height, 24px);
}

h6 {
    color: var(--color-brand-light-gray-green);
    /* Secondary global color for h6 */
    font-family: "Maven Pro", Sans-serif;
    font-size: var(--e-global-typography-297ba00-font-size, 16px);
    font-weight: bold;
    text-transform: capitalize;
    line-height: var(--e-global-typography-297ba00-line-height, 22px);
}

p {
    margin-block-start: 0;
    margin-block-end: .9rem;
    /* From reset.css */
}

a {
    background-color: transparent;
    /* From reset.css */
    color: var(--color-link-default);
    /* #c36 from reset.css */
    text-decoration: none;
    /* From reset.css */
}

a:active,
a:hover {
    color: var(--color-link-hover);
    /* #336 from reset.css */
}

/* General links in body should use original theme accent color if not overridden */
body a {
    color: var(--color-brand-dark-teal);
}

body a:hover {
    color: var(--color-brand-yellow-gold);
}


/* --- Layout & Utilities from header-footer.css and theme.css --- */
.container { /* Overriding Tailwind's default container max-width for exact match */
    width: 100%;
    margin-inline-start: auto;
    margin-inline-end: auto;
}

/* Responsive container max-widths from theme.css and post-6.css */
/* @media(max-width: 575px) { .container { padding-inline-start: 10px; padding-inline-end: 10px; } } */

@media(min-width: 576px) {
    .container {
        max-width: 500px;
    }
}

@media(min-width: 768px) {
    .container {
        max-width: 720px;
    }
}

/* Adjusted from 600px to 720px for common breakpoint */
@media(min-width: 992px) {
    .container {
        max-width: 960px;
    }
}

/* Adjusted from 800px to 960px for common breakpoint */
@media(min-width: 1200px) {
    .container {
        max-width: 1140px;
    }
}

/* Corrected to 1140px */

/* Elementor container specific overrides */
@media(min-width: 1024px) {
    .elementor-section-boxed>.elementor-container {
        max-width: 1024px;
    }
}

@media(max-width: 767px) {
    .elementor-section-boxed>.elementor-container {
        max-width: 767px;
    }
}


/* Section Padding - standardizing */
section {
    padding-top: 60px;
    padding-bottom: 60px;
}

@media (min-width: 768px) {
    section {
        padding-top: 80px;
        padding-bottom: 80px;
    }
}

@media (min-width: 1024px) {
    section {
        padding-top: 100px;
        padding-bottom: 100px;
    }
}


/* --- Header Styling from header-footer.css --- */
.site-header {
    padding-block-start: 1rem;
    /* 16px */
    padding-block-end: 1rem;
    /* 16px */
}

.site-header .site-title {
    /* Estate-Rise Logo text */
    font-family: "Maven Pro", Sans-serif;
    /* Explicitly set as per analysis */
    font-size: 2.5rem;
    /* 40px */
    font-weight: 500;
    line-height: 1.2;
    color: var(--color-brand-black);
    /* Default logo color */
}

.site-header a {
    /* Navigation links */
    color: var(--color-body-text);
}

.site-header a:hover {
    color: var(--color-brand-dark-teal);
}


/* --- Buttons (Mapped from elementor-kit-6 in post-6.css and reset.css) --- */
/* Base button styling from reset.css */
[type=button],
[type=submit],
button {
    background-color: transparent;
    border: 1px solid var(--color-link-default);
    /* #c36 from reset.css */
    border-radius: 3px;
    /* From reset.css */
    color: var(--color-link-default);
    display: inline-block;
    font-size: 1rem;
    font-weight: 400;
    padding: .5rem 1rem;
    text-align: center;
    transition: all .3s;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    white-space: nowrap;
    width: auto;
    /* from reset.css */
}

[type=button]:hover,
[type=submit]:hover,
button:hover {
    background-color: var(--color-link-default);
    color: var(--color-brand-white);
    /* #fff from reset.css */
}

/* Overriding/extending with Elementor specific button styles */
.btn-primary,
.btn-secondary,
.btn-outline,
.btn-white {
    font-family: "Inria Sans", Sans-serif;
    /* Accent font family from elementor-kit-6 button */
    font-size: 16px;
    /* From --e-global-typography-accent-font-size */
    font-weight: 700;
    /* From --e-global-typography-accent-font-weight */
    text-transform: capitalize;
    /* From --e-global-typography-accent-text-transform */
    line-height: 22px;
    /* From --e-global-typography-accent-line-height */
    border-style: solid;
    border-width: 0px;
    /* Default from elementor-kit-6 button */
    border-radius: 0px;
    /* Default from elementor-kit-6 button */
    padding: 14px 28px;
    /* From elementor-kit-6 button */
    transition: all 0.3s ease;
}

.btn-primary {
    background-color: var(--color-brand-dark-teal);
    /* Elementor accent color */
    color: var(--color-brand-white);
    border-color: var(--color-brand-dark-teal);
    border-width: 1px;
}

.btn-primary:hover {
    background-color: var(--color-brand-yellow-gold);
    /* Elementor yellow/gold on hover */
    color: var(--color-brand-dark-teal);
    border-color: var(--color-brand-yellow-gold);
}

.btn-secondary {
    /* Mapped from the "Learn More" button in featured properties */
    background-color: transparent;
    color: var(--color-brand-dark-teal);
    border-color: var(--color-brand-dark-teal);
    border-width: 1px;
}

.btn-secondary:hover {
    background-color: var(--color-brand-dark-teal);
    color: var(--color-brand-white);
}

.btn-outline {
    /* For View Details buttons in property cards */
    background-color: transparent;
    color: var(--color-brand-dark-teal);
    border-color: var(--color-brand-dark-teal);
    border-width: 1px;
}

.btn-outline:hover {
    background-color: var(--color-brand-dark-teal);
    color: var(--color-brand-white);
}

.btn-white {
    /* For the "Explore Properties" button on dark background */
    background-color: var(--color-brand-white);
    color: var(--color-brand-dark-teal);
    border-color: var(--color-brand-white);
    border-width: 1px;
}

.btn-white:hover {
    background-color: var(--color-brand-yellow-gold);
    border-color: var(--color-brand-yellow-gold);
    color: var(--color-brand-dark-teal);
}

/* --- Form Elements from reset.css --- */
input[type=date],
input[type=email],
input[type=number],
input[type=password],
input[type=search],
input[type=tel],
input[type=text],
input[type=url],
select,
textarea {
    border: 1px solid var(--color-form-border);
    /* #666 from reset.css */
    border-radius: 3px;
    /* From reset.css */
    padding: .5rem 1rem;
    /* From reset.css */
    transition: all .3s;
    width: 100%;
    background-color: var(--color-brand-white);
    color: var(--color-body-text);
}

input[type=date]:focus,
input[type=email]:focus,
input[type=number]:focus,
input[type=password]:focus,
input[type=search]:focus,
input[type=tel]:focus,
input[type=text]:focus,
input[type=url]:focus,
select:focus,
textarea:focus {
    border-color: var(--color-form-border-focus);
    /* #333 from reset.css */
    outline: none;
    box-shadow: 0 0 0 0.2rem rgba(23, 81, 81, 0.25);
    /* Custom: Elementor-like focus glow based on accent */
}

.form-select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5L8 11L14 5'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 1rem 1rem;
    padding-right: 2.5rem;
}

/* --- Card Styles (Elevated Card Signature) --- */
.service-card,
.property-item-card,
.testimonial-card,
.blog-card,
.team-member-card {
    
    background-color: var(--color-brand-white);
    border-radius: 8px;
    /* Slightly rounded corners for cards */
    box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.1);
    /* Subtle shadow for elevation */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    overflow: hidden;
    opacity: 1;
    /* Ensure full opacity for card content */
}

.service-card:hover,
.property-item-card:hover,
.testimonial-card:hover,
.blog-card:hover,
.team-member-card:hover {
    transform: translateY(-8px);
    /* More pronounced lift effect */
    box-shadow: 0px 10px 25px rgba(0, 0, 0, 0.2);
    /* Deeper shadow on hover */
}

.testimonial-card {
    padding: 1.5rem;
}

/* --- Hero Section Specifics --- */
/* The section itself holds the background image */
.hero-section {
    position: relative;
    height: 100vh;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
}

.hero-section .overlay {
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.6);
    /* Matching opacity from analysis */
    z-index: 1;
    /* Explicitly place above video */
}

.hero-section-content {
    position: relative;
    z-index: 10;
    color: var(--color-brand-white);
}

.hero-section-heading {
    /* H1 styling */
    color: var(--color-brand-white);
    font-size: var(--e-global-typography-12b9b40-font-size, 65px);
    /* Ensure Elementor h1 size */
    font-weight: bold;
    line-height: var(--e-global-typography-12b9b40-line-height, 70px);
    text-transform: capitalize;
}

.hero-section-heading .highlight {
    /* For "REAL ESTATE" highlight */
    color: var(--color-brand-yellow-gold);
    /* Corrected to Yellow/Gold based on closer inspection */
}

/* Ensure the description paragraph and button below h1 are also white for contrast */
.hero-section-content p {
    color: var(--color-brand-white);
}

/* Hero Search Form styles */
.hero-search-form {
    background-color: var(--color-brand-white);
    padding: 2rem;
    border-radius: 8px;
    box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.1);
}

.hero-search-form h2 {
    color: var(--color-brand-black);
    font-family: "Maven Pro", Sans-serif;
    font-size: var(--e-global-typography-89223c0-font-size, 35px);
    /* h2 size */
}


/* --- Footer Specifics --- */
footer {
    background-color: var(--color-darkest-gray);
    color: var(--color-text-light);
}

footer h4 {
    color: var(--color-brand-white);
}

footer a {
    color: var(--color-text-light);
    /* Lighter text for footer links */
}

footer a:hover {
    color: var(--color-brand-yellow-gold);
    /* Yellow-gold on hover */
}

footer .fa-angle-right {
    color: var(--color-brand-yellow-gold);
    /* Icon color */
}

footer input[type="email"] {
    background-color: #55595c;
    /* Darker background for footer input */
    border-color: #55595c;
    color: var(--color-brand-white);
}

footer input[type="email"]::placeholder {
    color: var(--color-text-light);
}

footer .fa-paper-plane {
    color: var(--color-brand-white);
}

/* --- Mobile Menu --- */
#mobile-menu {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow-y: auto;
    background-color: var(--color-brand-white);
    /* Ensure mobile menu background is white */
}

/* Custom classes for fonts, to map to Tailwind equivalent of `font-poppins` */
.font-inria-sans {
    font-family: "Inria Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

.font-maven-pro {
    font-family: "Maven Pro", Sans-serif;
}

/* Custom utility classes to use brand colors in HTML (if Tailwind config not updated) */
.text-brand-dark-teal {
    color: var(--color-brand-dark-teal);
}

.bg-brand-dark-teal {
    background-color: var(--color-brand-dark-teal);
}

.text-brand-yellow-gold {
    color: var(--color-brand-yellow-gold);
}

.bg-brand-yellow-gold {
    background-color: var(--color-brand-yellow-gold);
}

.text-brand-white {
    color: var(--color-brand-white);
}

.bg-brand-white {
    background-color: var(--color-brand-white);
}

.text-brand-black {
    color: var(--color-brand-black);
}

.bg-brand-black {
    background-color: var(--color-brand-black);
}

.text-brand-light-gray-green {
    color: var(--color-brand-light-gray-green);
}

.bg-brand-light-gray-green {
    background-color: var(--color-brand-light-gray-green);
}

/* Specific styling for property details icons (bed, bath) */
.property-item-card .fa-bed,
.property-item-card .fa-bath,
.property-item-card .fa-map-marker-alt {
    color: var(--color-brand-dark-teal);
    /* Icons use brand accent color */
    font-size: 1.1em;
    /* Slightly larger icons */
}