/**
 * Main Stylesheet for Finest City Dream Homes Theme
 *
 * == Design Tokens ==
 * This :root block is the Single Source of Truth for all custom CSS.
 * It must be manually synchronized with the tailwind.config object
 * in header.php.
 */
 
:root {
  /* Colors */
  --color-orange: #FF8200;
  --color-light-orange: #FF9900;
  --color-dark-orange: #E67500;  
  --color-light-blue: #4396B2;
  --color-dark-blue: #002C3B;
  --color-white: #FFFFFF;
  --color-red: #EF4444;

  /* Grayscale Palette */
  --color-gray-100: #F7FAFC; /* Lightest Background */
  --color-gray-200: #e5e7eb; /* Borders / Dividers */
  --color-gray-300: #e2e8f0; /* Borders */
  --color-gray-400: #d1d5db; /* Input Borders */
  --color-gray-500: #a0aec0; /* Lighter Text / Footer */
  --color-gray-600: #9ca3af; /* Placeholder Text */
  --color-gray-700: #718096; /* Main Body Text */
  --color-gray-800: #4A5568; /* Darker Body Text */
  --color-gray-900: #374151; /* Subheadings */
  --color-gray-950: #1e293b; /* Darkest Text */

  /* Fonts */
  --font-sans: 'Poppins', sans-serif;
  --font-body: 'Inter', sans-serif;

  /* Transitions, Shadows, Radius (from custom-idx.css) */
  --transition-fast: 0.2s ease;
  --transition-normal: 0.3s ease;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 6px 15px rgba(0, 0, 0, 0.15);
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
}

/* --- Navigation Link Hover Effect --- */
.primary-nav-link {
    position: relative;
    text-decoration: none;
    transition: color 0.3s ease;
}
.primary-nav-link::after {
    content: '';
    position: absolute;
    width: 100%;
    transform: scaleX(0);
    height: 2px;
    bottom: -6px;
    left: 0;
    background-color: var(--color-orange);
    transform-origin: bottom right;
    transition: transform 0.3s ease-out;
}
.primary-nav-link:hover::after {
    transform: scaleX(1);
    transform-origin: bottom left;
}

/* --- Remove Bullets from WP Menus --- */
li.menu-item {
    list-style: none !important;
}

/* --- Sticky Header Styles --- */
#site-header {
    position: sticky;
    top: 0;
    transition: all 0.3s ease-in-out;
}
#site-header.scrolled {
    background-color: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
#site-header.scrolled img {
    height: 40px; /* Make logo slightly smaller on scroll */
}

/* --- Active Menu Item Style --- */
.current-menu-item .primary-nav-link {
    color: var(--color-orange); 
    font-weight: 700;
}
.current-menu-item .primary-nav-link::after {
    transform: scaleX(1);
    transform-origin: bottom left;
}

/*
==========================================================================
  Typography & Content Styling (.prose)
==========================================================================
*/
.prose h1, .prose h2, .prose h3, .prose h4 {
    color: var(--color-dark-blue); 
    font-family: var(--font-sans);
    font-weight: 700;
}

/* Main Page Titles */
.prose h1 {
    font-size: 2.25rem; /* 36px */
    margin-bottom: 1rem;
}

/* Main Section Headings */
.prose h2 {
    font-size: 1.875rem; /* 30px */
    margin-top: 2.5rem;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--color-gray-300);
}

/* Subsection Headings */
.prose h3 {
    font-size: 1.5rem; /* 24px */
    margin-top: 2rem;
    margin-bottom: 0.75rem;
}

.prose p {
    font-size: 1.125rem;
    line-height: 1.7;
    margin-bottom: 1.5rem;
}
.prose a {
    color: var(--color-orange); 
    font-weight: 600;
    text-decoration: none;
    transition: color 0.2s ease;
}
.prose a:hover {
    color: var(--color-dark-blue);
    text-decoration: underline;
}
.prose ul li {
    list-style-type: none !important;
    padding-left: 2rem;
    position: relative;
    font-size: 1.125rem;
    margin-bottom: 0.75rem;
}
.prose ul li::before {
    content: '✓';
    position: absolute;
    left: 0;
    top: 0.125rem; /* Adjusts vertical alignment if needed */
    
    /* Colors */
    color: #ffffff; /* White checkmark */
    background-color: var(--color-orange); /* Orange circle background */
    
    /* Making it a circle */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    
    /* Typography */
    font-weight: 900;
    font-size: 0.875rem; /* Slightly smaller font so it fits nicely inside the circle */
}

/*
==========================================================================
  Single Neighborhood - Custom Content Styling
==========================================================================
*/
.community-page header {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 4rem auto;
    border-bottom: 2px solid var(--color-orange); 
    padding-bottom: 2rem;
}

.community-page header h1 {
    font-size: 2.5rem; /* 40px */
    margin-top: 0;
}

.community-page header p,
.community-page section p {
    font-size: 1.125rem;
    color: var(--color-gray-800);
    line-height: 1.8;
}

.community-page section {
    margin-bottom: 3.5rem;
}

.community-page h2 {
    font-size: 2rem; /* 32px */
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--color-gray-300);
    padding-bottom: 1rem;
}

.community-page ul {
    list-style: none;
    padding-left: 0;
}

.community-page ul li {
    position: relative;
    padding-left: 2rem;
    font-size: 1.125rem;
    margin-bottom: 1rem;
}

.community-page ul li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--color-orange);     
	font-weight: 900;
    font-size: 1.25rem;
    top: 2px;
}

/*
==========================================================================
  Post Content CTA (Final Working Version)
==========================================================================
*/
.post-cta {
  background-color: var(--color-gray-100);
  border-top: 4px solid var(--color-orange);
  border-radius: 8px;
  padding: 2.5rem;
  margin-top: 3rem;
  text-align: center;
  box-shadow: 0 4px 20px rgba(0, 44, 59, 0.07);
}
.post-cta p {
  font-size: 1.25rem !important;
  color: var(--color-dark-blue);
  line-height: 1.7;
  margin-bottom: 0;
}

.post-cta p em {
  display: block;
  font-size: 1.5rem;
  font-family: var(--font-sans);
  font-weight: 700;
  font-style: normal;
  margin-bottom: 0.3rem;
}

.post-cta p a { 
  background-color: var(--color-orange);
  color: var(--color-white) !important;
  font-family: var(--font-sans);
  font-weight: 600;
  text-decoration: none;
  padding: 0.75rem 1.5rem;
  border-radius: 6px;
  margin: 0.5rem 0.25rem 0 0.25rem;
  display: inline-block;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  transition: all 0.3s ease;
}

.post-cta p a:hover {
  background-color: var(--color-dark-blue);
  text-decoration: none !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 15px rgba(0,0,0,0.15);
}

/*
==========================================================================
  New Footer Styles
==========================================================================
*/

/* Make the SVG logo white in the dark footer */
.footer-logo {
    filter: brightness(0) invert(1);
}

/* Style for all footer navigation links */
.footer-link-text {
    position: relative;
    color: var(--color-gray-300); /* Lighter */
    text-decoration: none;
    transition: color 0.3s ease;
    font-weight: 500;
    font-size: 1rem; /* Increased font size */
    padding-bottom: 4px; /* Space for the underline effect */
}
.footer-link-text::after {
    content: '';
    position: absolute;
    width: 100%;
    transform: scaleX(0);
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: var(--color-orange);
	transform-origin: bottom right;
    transition: transform 0.3s ease-out;
}
.menu-item a:hover .footer-link-text {
    color: var(--color-orange); /* Orange on hover */
}
.menu-item a:hover .footer-link-text::after {
    transform: scaleX(1);
    transform-origin: bottom left;
}

/* --- "Get in Touch" Section Links --- */
#site-footer a[href^="tel:"],
#site-footer a[href^="mailto:"] {
    font-size: 1rem; /* Increased font size */
    font-weight: 500;
    color: var(--color-gray-300); /* Lighter */
    transition: color 0.2s ease-in-out;
}
#site-footer a[href^="tel:"]:hover,
#site-footer a[href^="mailto:"]:hover {
    color: var(--color-orange);
}


/* Style for social media icons in the bottom bar */
.footer-social-link {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--color-gray-800);
    border-radius: 50%;
    color: var(--color-gray-300); /* Lighter */
    font-size: 1rem; /* Adjusted icon size */
    transition: all 0.3s ease;
}
.footer-social-link:hover {
    background-color: var(--color-orange);
	border-color: var(--color-orange);
    color: var(--color-white);
    transform: translateY(-2px);
}

/*
==========================================================================
  Footer Readability Enhancements
==========================================================================
*/

/* General text in the footer columns (Mission, DRE, Address) */
#site-footer p,
#site-footer .grid ul li span {
    color: var(--color-gray-500);
    font-size: 0.95rem;
}

/* Specifically target the brokerage name to make it stand out */
#site-footer .font-bold.text-white {
    color: var(--color-white) !important;
}

/* Copyright text in the bottom bar */
.border-t.border-gray-700 p {
    color: var(--color-gray-700);
}

/*
 * Custom CSS for Finest City Dream Homes WPForms
 * Matches the theme's fonts and hover styles.
*/

/* Apply Poppins font to field labels */
.wpforms-form .wpforms-field-label {
    font-family: var(--font-sans);
    font-weight: 600;
}

/* Apply Inter font to the text inside input fields */
.wpforms-form .wpforms-field-container input,
.wpforms-form .wpforms-field-container textarea,
.wpforms-form .wpforms-field-container select {
    font-family: var(--font-body);
}

/* Add orange focus ring to fields, matching your IDX omnibar */
.wpforms-form .wpforms-field-container input:focus,
.wpforms-form .wpforms-field-container textarea:focus,
.wpforms-form .wpforms-field-container select:focus {
    border-color: var(--color-orange) !important;
    box-shadow: 0 0 0 3px rgba(255, 130, 0, 0.25) !important;
}

/* Apply Poppins font to the submit button and add transitions */
.wpforms-form .wpforms-submit-container .wpforms-submit {
    font-family: var(--font-sans);
    font-weight: 600;
    transition: all 0.3s ease;
}

/* Add hover effect: turn button dark blue and lift it slightly */
.wpforms-form .wpforms-submit-container .wpforms-submit:hover {
    background-color: var(--color-dark-blue) !important; 
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(0,0,0,0.15);
}

/*
==========================================================================
  Swiper Pagination Fix (Neighborhood Slider)
==========================================================================
*/

/* Ensure the main slider container can contain the pagination */
.fcdh-neighborhood-slider.swiper {
    position: relative;
    padding-bottom: 10px;
}

/* Override Swiper's default absolute positioning */
.neighborhood-pagination.swiper-pagination {
    position: relative;
    bottom: auto;
    left: auto;
    width: 100%;
    margin-top: 1.5rem;
    text-align: center;
}

/* Optional: Style the bullets to match your theme */
.neighborhood-pagination .swiper-pagination-bullet {
    background-color: var(--color-light-blue);
    opacity: 0.8;
}

.neighborhood-pagination .swiper-pagination-bullet-active {
    background-color: var(--color-dark-blue); 
    opacity: 1;
}

/* Add padding to testimonial slider to prevent shadow clipping */
.fcdh-testimonial-slider.swiper {
    position: relative;
    padding-bottom: 10px;
}