/*
Theme Name: BuildersDirectory Theme
Theme URI: https://example.com/buildersdirectory-theme/
Author: Your Name or Company
Author URI: https://example.com/
Description: Custom theme for the BuildersDirectory project, based on mockups.
Version: 0.1.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: buildersdirectory-theme
Requires at least: 5.8
Tested up to: 6.5
Requires PHP: 7.4
Tags: custom-background, custom-logo, custom-menu, featured-images, block-styles, wide-blocks, translation-ready

BuildersDirectory Theme, Copyright (C) 2025 Your Name or Company
BuildersDirectory Theme is distributed under the terms of the GNU GPL
*/ 

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Variables & Base
# Typography
# Buttons
# Navigation
# Forms
# General Components
# Header Specific
# Footer Specific (if needed)
# Page Specific (Homepage, Listings, etc.)
# Utilities
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Variables & Base
--------------------------------------------------------------*/
:root {
    --accent-gold: #ffc107; /* Amber/Gold for ratings & premium */
    --accent-teal: #20c997; /* Teal for secondary CTAs */
    --bs-primary-darker: #0b5ed7; /* Slightly darker blue for gradients */
    --accent-teal-darker: #1a9f7f; /* Slightly darker teal for gradients */
    /* Add other common variables from mockups if needed */
}

body {
    /* font-family defined in Typography section */
    background-color: #f8f9fa; /* Default light background from mockups */
    overflow-x: hidden; /* Prevent horizontal scrollbar from AOS/Parallax */
}

/* Ensure content area respects sticky header */
.site-content {
    padding-top: 1rem; /* Adjust if needed based on final header height */
}

/*--------------------------------------------------------------
# Typography
--------------------------------------------------------------*/
body {
    font-family: 'Inter', sans-serif;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6,
.navbar-brand /* Ensure brand uses Poppins if desired */
{
    font-family: 'Poppins', sans-serif;
}

/*--------------------------------------------------------------
# Buttons
--------------------------------------------------------------*/
.btn {
    transition: transform 0.2s ease-in-out, filter 0.2s ease-in-out, background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, background-image 0.2s ease-in-out;
    background-image: none;
}

.btn-primary {
    /* Use WP Admin primary color as default or define explicitly */
    /* --bs-primary: #0d6efd; */
    /* --bs-primary-darker: #0b5ed7; */
    background-image: linear-gradient(to bottom, var(--bs-primary), var(--bs-primary-darker));
}

.btn-primary:hover {
    background-color: var(--bs-primary-darker);
    border-color: var(--bs-primary-darker);
    filter: brightness(1.1);
    background-image: linear-gradient(to bottom, #1A6EEE, var(--bs-primary-darker)); /* Slightly adjusted hover start color */
}

.btn-teal {
    background-color: var(--accent-teal);
    border-color: var(--accent-teal-darker);
    background-image: linear-gradient(to bottom, var(--accent-teal), var(--accent-teal-darker));
    color: #fff;
}

.btn-teal:hover {
    background-color: var(--accent-teal-darker);
    border-color: var(--accent-teal-darker);
    filter: brightness(1.1);
    background-image: linear-gradient(to bottom, #2DD4AA, var(--accent-teal-darker)); /* Slightly adjusted hover start color */
    color: #fff;
}

.btn:hover {
    transform: scale(1.03);
}

.btn:hover .bi { /* Icon animation on button hover */
    transform: rotate(10deg) scale(1.1);
}

/*--------------------------------------------------------------
# Navigation
--------------------------------------------------------------*/
/* Underline effect for nav links */
.navbar-nav .nav-link {
    position: relative;
    padding-bottom: 0.5rem;
    text-decoration: none;
    overflow: hidden;
}

.navbar-nav .nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: var(--bs-primary);
    transform: scaleX(0);
    transform-origin: bottom left;
    transition: transform 0.3s ease-in-out;
}

/* Apply underline on hover or if it's the current page item */
.navbar-nav .nav-link:hover::after,
.navbar-nav .current-menu-item > .nav-link::after,
.navbar-nav .current-page-ancestor > .nav-link::after,
.navbar-nav .current_page_item > .nav-link::after /* For non-menu assigned active links */
{
    transform: scaleX(1);
}

/* Make active link slightly bolder */
.navbar-nav .current-menu-item > .nav-link,
.navbar-nav .current-page-ancestor > .nav-link,
.navbar-nav .current_page_item > .nav-link 
{
    font-weight: 600;
}

/*--------------------------------------------------------------
# Forms
--------------------------------------------------------------*/
.form-control:focus {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.35);
}

/*--------------------------------------------------------------
# General Components
--------------------------------------------------------------*/
.bi {
    vertical-align: -0.125em;
    transition: transform 0.2s ease-in-out;
}

.rating-stars .bi-star-fill {
    color: var(--accent-gold);
}

.rating-stars .bi-star {
    color: #e4e5e9;
}

/* General Card Styles & Hover Effects (from home.html) */
.card {
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    overflow: hidden; /* Ensure image zoom doesn't overflow */
    /* Optional: Remove default border if using shadows primarily */
    /* border: none; */ 
}

.card:hover {
    transform: translateY(-5px) scale(1.01);
    box-shadow: var(--bs-box-shadow-lg) !important; /* Use Bootstrap's large shadow variable */
}

.card .card-img-top {
    /* Height/object-fit might be set per section (e.g., #featured-listings) */
    transition: transform 0.3s ease-in-out;
}

.card:hover .card-img-top {
    transform: scale(1.05);
}

/* Add other common component styles from mockups here */


/*--------------------------------------------------------------
# Header Specific
--------------------------------------------------------------*/
.site-header {
    /* Ensure styles like sticky-top, shadow-sm, bg-white are applied in header.php */
}

.navbar-brand,
.navbar-brand a {
    /* Font family handled in Typography */
}

/* Adjust logo size if needed */
.custom-logo {
    max-height: 40px; /* Example size, adjust as needed */
    width: auto;
}

/*--------------------------------------------------------------
# Utilities
--------------------------------------------------------------*/
/* Screen reader text */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important; /* Many screen reader and browser combinations announce broken words as they would appear visually. */
}

/*--------------------------------------------------------------
# Page Specific
--------------------------------------------------------------*/
/* Homepage - Featured Listings Cards */
#featured-listings .card-img-top {
    height: 200px; 
    object-fit: cover; 
    object-position: center; /* Default position */
}

/* Override for professional cards to prioritize top */
#featured-listings #featured-professionals-content .card-img-top {
    object-position: top; 
}

/* Add other page/section specific styles below */