/*
 * Social & Co. Realty Group -- Brand CSS
 * Loaded by functions.php after Divi parent styles.
 */

/* ============================================================================
   1. CSS CUSTOM PROPERTIES
   ============================================================================ */
:root {
    --sc-dark:    #1A1A18;
    --sc-dark-2:  #2C2C2A;
    --sc-gold:    #C9A84C;
    --sc-gold-dk: #b8963e;
    --sc-cream:   #F5F0E8;
    --sc-muted:   #777772;
    --sc-border:  rgba(201, 168, 76, 0.25);
    --sc-font-display: 'Playfair Display', Georgia, serif;
    --sc-font-body:    'Lato', system-ui, sans-serif;
    --sc-radius:  4px;
    --sc-transition: 0.25s ease;
}

/* ============================================================================
   2. TYPOGRAPHY
   ============================================================================ */
body, .et_pb_text, .et_pb_blurb_description, .et_pb_column p {
    font-family: var(--sc-font-body);
    color: var(--sc-muted);
    font-size: 16px;
    line-height: 1.75;
}
h1, h2, h3, .et_pb_slide_title, .et_pb_module_header, .et_pb_blurb_title {
    font-family: var(--sc-font-display);
    font-weight: 400;
    color: var(--sc-dark);
    line-height: 1.2;
}
.sc-eyebrow {
    font-family: var(--sc-font-body);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--sc-gold);
    display: block;
    margin-bottom: 8px;
}

/* ============================================================================
   3. NAVIGATION
   ============================================================================ */
#main-header, #main-header.et-fixed-header {
    background-color: var(--sc-dark) !important;
    border-bottom: 1px solid var(--sc-border) !important;
}
#main-header .nav-links > li > a, #main-header ul.nav li a {
    font-family: var(--sc-font-body) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
    color: rgba(245, 240, 232, 0.75) !important;
    transition: color var(--sc-transition) !important;
}
#main-header .nav-links > li > a:hover, #main-header ul.nav li a:hover {
    color: var(--sc-gold) !important;
}
#mobile_menu_bar span, #mobile_menu_bar::before, #mobile_menu_bar::after {
    background-color: var(--sc-gold) !important;
}
#mobile_nav .mobile_nav.opened { background: var(--sc-dark) !important; }

/* ============================================================================
   4. BUTTONS
   ============================================================================ */
.et_pb_button, a.et_pb_button, .et_pb_more_button, button[type="submit"] {
    font-family: var(--sc-font-body) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    border-radius: 0 !important;
    padding: 14px 28px !important;
    transition: all var(--sc-transition) !important;
}
.et_pb_button.sc-btn-gold, .et_pb_promo_button, .et_pb_more_button {
    background-color: var(--sc-gold) !important;
    color: var(--sc-dark) !important;
    border-color: var(--sc-gold) !important;
}
.et_pb_button.sc-btn-gold:hover, .et_pb_promo_button:hover, .et_pb_more_button:hover {
    background-color: var(--sc-gold-dk) !important;
    border-color: var(--sc-gold-dk) !important;
}
.et_pb_button.sc-btn-outline {
    background-color: transparent !important;
    color: var(--sc-gold) !important;
    border: 1px solid var(--sc-gold) !important;
}
.et_pb_button.sc-btn-outline:hover {
    background-color: var(--sc-gold) !important;
    color: var(--sc-dark) !important;
}

/* ============================================================================
   5. UTILITY CLASSES
   ============================================================================ */
.sc-bg-dark   { background-color: var(--sc-dark)   !important; }
.sc-bg-dark-2 { background-color: var(--sc-dark-2) !important; }
.sc-bg-cream  { background-color: var(--sc-cream)  !important; }
.sc-text-gold  { color: var(--sc-gold)  !important; }
.sc-text-cream { color: var(--sc-cream) !important; }
.sc-text-dark  { color: var(--sc-dark)  !important; }
.sc-text-muted { color: var(--sc-muted) !important; }

/* ============================================================================
   6. AGENT CARDS
   ============================================================================ */
.sc-agents-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 32px;
}
.sc-agent-card { display: flex; flex-direction: column; text-align: center; }
.sc-agent-card__photo-link { display: block; overflow: hidden; border-radius: var(--sc-radius); }
.sc-agent-card__photo {
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    object-position: top center;
    filter: grayscale(100%);
    transition: filter 0.4s ease, transform 0.4s ease;
    display: block;
}
.sc-agent-card:hover .sc-agent-card__photo { filter: grayscale(0%); transform: scale(1.03); }
.sc-agent-card__photo-placeholder {
    width: 100%;
    aspect-ratio: 3 / 4;
    background-color: var(--sc-dark-2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--sc-font-display);
    font-size: 64px;
    color: var(--sc-gold);
    border-radius: var(--sc-radius);
}
.sc-agent-card__body { padding: 16px 8px 8px; }
.sc-agent-card__name, .sc-agent-card__name a {
    font-family: var(--sc-font-display);
    font-size: 18px;
    font-weight: 400;
    color: var(--sc-dark);
    margin: 0 0 4px;
    text-decoration: none;
    transition: color var(--sc-transition);
}
.sc-agent-card__name a:hover { color: var(--sc-gold); }
.sc-agent-card__role {
    font-family: var(--sc-font-body);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--sc-gold);
    margin: 0 0 10px;
}
.sc-agent-card__bio { font-size: 14px; color: var(--sc-muted); line-height: 1.6; margin-bottom: 14px; }
.sc-agent-card__contact { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.sc-agent-card__phone, .sc-agent-card__email {
    font-family: var(--sc-font-body);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--sc-dark);
    text-decoration: none;
    border-bottom: 1px solid var(--sc-gold);
    padding-bottom: 2px;
    transition: color var(--sc-transition);
}
.sc-agent-card__phone:hover, .sc-agent-card__email:hover { color: var(--sc-gold); }
/* Dark variant */
.sc-agent-card--dark .sc-agent-card__name,
.sc-agent-card--dark .sc-agent-card__name a { color: var(--sc-cream); }
.sc-agent-card--dark .sc-agent-card__bio { color: rgba(245, 240, 232, 0.6); }
.sc-agent-card--dark .sc-agent-card__phone,
.sc-agent-card--dark .sc-agent-card__email { color: rgba(245, 240, 232, 0.75); }
.sc-agent-card--dark .sc-agent-card__phone:hover,
.sc-agent-card--dark .sc-agent-card__email:hover { color: var(--sc-gold); }

/* ============================================================================
   7. TESTIMONIAL CARDS
   ============================================================================ */
.sc-testimonials-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 28px;
}
.sc-testimonial-card {
    background: #ffffff;
    border: 0.5px solid rgba(26, 26, 24, 0.1);
    border-top: 3px solid var(--sc-gold);
    border-radius: var(--sc-radius);
    padding: 28px 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.sc-testimonial-card__stars { display: flex; gap: 3px; }
.sc-star { font-size: 16px; line-height: 1; }
.sc-star--filled { color: var(--sc-gold); }
.sc-star--empty  { color: #DDD; }
.sc-testimonial-card__quote {
    font-family: var(--sc-font-display);
    font-style: italic;
    font-size: 16px;
    line-height: 1.65;
    color: var(--sc-dark);
    margin: 0;
    padding: 0;
    border: none;
}
.sc-testimonial-card__client {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px solid rgba(26, 26, 24, 0.08);
}
.sc-testimonial-card__photo {
    width: 44px; height: 44px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.sc-testimonial-card__initials {
    width: 44px; height: 44px;
    border-radius: 50%;
    background: var(--sc-dark);
    color: var(--sc-gold);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--sc-font-display);
    font-size: 18px;
    flex-shrink: 0;
}
.sc-testimonial-card__client-info { display: flex; flex-direction: column; gap: 2px; }
.sc-testimonial-card__name { font-family: var(--sc-font-body); font-size: 14px; font-weight: 700; color: var(--sc-dark); }
.sc-testimonial-card__type, .sc-testimonial-card__agent { font-size: 12px; color: var(--sc-muted); font-family: var(--sc-font-body); }

/* ============================================================================
   8. IHOMEFINDER SEARCH WIDGET
   ============================================================================ */
.sc-search-wrapper {
    background: rgba(26, 26, 24, 0.92);
    border: 1px solid var(--sc-border);
    border-radius: 6px;
    overflow: hidden;
    max-width: 680px;
    margin: 0 auto;
}
.ihf-search-tabs, .ihf-tabs {
    display: flex;
    border-bottom: 1px solid var(--sc-border) !important;
    background: transparent !important;
}
.ihf-search-tab, .ihf-tabs .nav-link {
    font-family: var(--sc-font-body) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
    color: rgba(245, 240, 232, 0.55) !important;
    padding: 14px 20px !important;
    border: none !important;
    border-bottom: 2px solid transparent !important;
    background: transparent !important;
    transition: all var(--sc-transition);
}
.ihf-search-tab.active, .ihf-tabs .nav-link.active, .ihf-tabs .nav-link:hover {
    color: var(--sc-gold) !important;
    border-bottom-color: var(--sc-gold) !important;
}
.ihf-search-label, .ihf-quick-search label {
    font-family: var(--sc-font-body) !important;
    font-size: 9px !important;
    font-weight: 700 !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    color: rgba(201, 168, 76, 0.8) !important;
    margin-bottom: 4px !important;
}
.ihf-search-form input[type="text"],
.ihf-search-form input[type="search"],
.ihf-search-form select,
.ihf-quick-search input,
.ihf-quick-search select {
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid rgba(201, 168, 76, 0.2) !important;
    color: var(--sc-cream) !important;
    font-family: var(--sc-font-body) !important;
    font-size: 14px !important;
    padding: 6px 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}
.ihf-search-submit, .ihf-quick-search [type="submit"], .ihf-btn-search {
    background-color: var(--sc-gold) !important;
    color: var(--sc-dark) !important;
    font-family: var(--sc-font-body) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 14px 28px !important;
    transition: background-color var(--sc-transition);
}
.ihf-search-submit:hover, .ihf-quick-search [type="submit"]:hover {
    background-color: var(--sc-gold-dk) !important;
}

/* ============================================================================
   9. IHOMEFINDER LISTING CARDS
   ============================================================================ */
.ihf-results-grid, .ihf-listing-results {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) !important;
    gap: 24px !important;
}
.ihf-listing-card, .ihf-result-item {
    border-radius: var(--sc-radius) !important;
    overflow: hidden !important;
    border: 0.5px solid rgba(26, 26, 24, 0.1) !important;
    background: #ffffff !important;
    transition: transform var(--sc-transition), box-shadow var(--sc-transition) !important;
    box-shadow: none !important;
}
.ihf-listing-card:hover, .ihf-result-item:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 16px 40px rgba(26, 26, 24, 0.1) !important;
}
.ihf-listing-price, .ihf-price {
    font-family: var(--sc-font-display) !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    color: var(--sc-dark) !important;
}
.ihf-listing-address, .ihf-address {
    font-family: var(--sc-font-body) !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: var(--sc-dark) !important;
}
.ihf-listing-badge, .ihf-status-badge {
    font-family: var(--sc-font-body) !important;
    font-size: 9px !important;
    font-weight: 700 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    background-color: var(--sc-gold) !important;
    color: var(--sc-dark) !important;
    padding: 4px 10px !important;
    border-radius: 0 !important;
}
.ihf-pagination .page-link {
    font-family: var(--sc-font-body) !important;
    font-size: 12px !important;
    color: var(--sc-dark) !important;
    border-color: rgba(26,26,24,0.2) !important;
    border-radius: 0 !important;
}
.ihf-pagination .page-item.active .page-link {
    background-color: var(--sc-gold) !important;
    border-color: var(--sc-gold) !important;
    color: var(--sc-dark) !important;
}
.ihf-idx-disclaimer, .ihf-disclaimer {
    font-family: var(--sc-font-body) !important;
    font-size: 11px !important;
    color: #AAAAAA !important;
    border-top: 1px solid rgba(26, 26, 24, 0.1) !important;
    padding-top: 20px !important;
    margin-top: 48px !important;
}

/* ============================================================================
   10. SOCIAL LINKS
   ============================================================================ */
.sc-social-links { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.sc-social-link {
    font-family: var(--sc-font-body);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: rgba(245, 240, 232, 0.55);
    text-decoration: none;
    transition: color var(--sc-transition);
}
.sc-social-link:hover { color: var(--sc-gold); }

/* ============================================================================
   11. FOOTER
   ============================================================================ */
#footer-bottom, .et_pb_section.sc-footer { background-color: var(--sc-dark) !important; border-top: 1px solid var(--sc-border) !important; }
#footer-bottom .et_pb_footer_pageline_left, #footer-bottom .et_pb_footer_pageline_right { font-family: var(--sc-font-body) !important; font-size: 11px !important; color: rgba(245, 240, 232, 0.35) !important; }
.sc-footer-company { font-family: var(--sc-font-body); font-size: 12px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: rgba(201, 168, 76, 0.7); margin-bottom: 12px; }
.sc-footer-info p, .sc-footer-info a { font-family: var(--sc-font-body); font-size: 13px; color: rgba(245, 240, 232, 0.55); line-height: 1.8; text-decoration: none; }
.sc-footer-info a:hover { color: var(--sc-gold); }

/* ============================================================================
   12. RESPONSIVE
   ============================================================================ */
@media (max-width: 980px) {
    .sc-agents-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
    .sc-testimonials-grid { grid-template-columns: 1fr; }
    .ihf-results-grid, .ihf-listing-results { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 640px) {
    .sc-agents-grid { grid-template-columns: 1fr; max-width: 360px; margin: 0 auto; }
    .ihf-results-grid, .ihf-listing-results { grid-template-columns: 1fr !important; }
    .sc-search-wrapper { border-radius: 0; }
}
