/*
Theme Name: ListingHive Child
Template: listinghive
Version: 1.0
Author: aircraft.zone
Description: Custom styles for the ListingHive child theme.
*/

/* ========================================================= */
/* --- Header, Footer & General Layout --- */
/* ========================================================= */

/* Header and footer bar backgrounds */
.header-navbar,
.site-footer {
	background-color: #1A3E68;
}

/* Main content area background */
.site-content {
	background-color: #F5F8FA;
}

/* Header logo name */
.header-logo__name {
	font-size: 2rem !important;
	color: #FFFFFF !important;
}

/* Mobile-specific styles for header logo name */
@media only screen and (max-width: 767px) {
	.header-logo__name {
		font-size: 1.5rem !important;
	}
}

/* Header logo tagline */
.header-logo__description {
	color: #C5D6E6 !important;
	font-style: italic;
}

/* Header navigation menu links */
.header-navbar__menu ul li a {
	color: #FFFFFF !important;
	font-weight: 700;
}

/* Current menu item link in the header navigation */
.header-navbar__menu ul li.current-menu-item > a {
	color: #FFFFFF !important;
	font-weight: 900;
}

/* Footer navigation menu links */
.footer-navbar__menu ul li a {
	color: #FFFFFF !important;
	font-weight: 700;
}

/* Mobile-specific styles for footer navigation links */
@media only screen and (max-width: 767px) {
	.footer-navbar__menu ul li a {
		font-size: .8em;
	}
}

/* Header burger menu (mobile) icon */
.header-navbar__burger > a i {
	font-size: 24px !important;
	background-color: #234D7C;
	color: #fff !important;
	font-weight: 700 !important;
	height: 36px;
}

/* Header burger menu (mobile) dropdown background */
.header-navbar__burger > ul {
	background-color: #C0C0C0;
}

/* ========================================================= */
/* --- Buttons & Forms --- */
/* ========================================================= */

/* Secondary button style */
.button--secondary {
	background-color: #2C609B !important;
}

/* Common styles for various buttons (search, modal, submit) */
.hp-form--listing-search .hp-form__button,
.hp-form--vendor-search .hp-form__button,
.hp-form--narrow .hp-form__button,
.hp-modal .hp-form__button,
input[type="submit"],
button[type="submit"] {
	background-color: #234D7C !important;
}

/* Search input field in the listing search form */
.hp-form--listing-search .hp-form__field input[type='search'] {
	background-color: #F0F0F0;
	color: #000000 !important;
	font-weight: 700 !important;
}

/* Search input field in the vendor search form */
.hp-form--vendor-search .hp-form__field input[type='search'] {
	background-color: #F0F0F0;
	color: #FFFFFF !important;
	font-weight: 700 !important;
}

/* Form field labels (for all forms) */
.hp-field__label,
.hp-field__label small {
	color: #000000;
	font-size: 1em !important;
	font-weight: 600;
}

/* Styles for text, email, password inputs, and textareas */
input[type=password],
input[type=email],
input[type=text],
.hp-field--textarea {
	color: #000000;
	font-size: 1em;
	font-weight: 600;
	border-color: #000000 !important;
}
.hp-field input[type=checkbox]+span::before {
    border-radius: 3px;
    border: solid 1px red;
}
.select2-container--default .select2-selection .select2-selection__rendered {
    border: solid 1px #000000 !important;
}
/* ========================================================= */
/* --- WP Admin Bar & Widgets --- */
/* ========================================================= */

/* Hide the search bar in the WordPress admin bar */
#wpadminbar #wp-admin-bar-search {
	display: none !important;
}

/* Fixes for the admin bar avatar and fonts */
#wpadminbar .quicklinks a,
#wpadminbar * {
	font-size: 16px;
	font-weight: 500;
}

#wpadminbar #wp-admin-bar-my-account.with-avatar > a img {
	height: 28px !important;
}

#wpadminbar {
	line-height: 3;
	height: 42px;
}

/* Hide specific widgets in the sidebar */
.widget--sidebar,
.widget.hp-menu {
	display: none;
}

/* ========================================================= */
/* --- Page-Specific Styles (Add Listing Form) --- */
/* ========================================================= */

/*
 * This section explicitly creates a two-column grid layout for the form
 * on the 'Add Details' page (ID 39).
 * The styles are more specific to override the theme's default layout.
 */

/*
 * We target the container that holds the fields and apply a grid.
 * The .hp-form__field--column is the key container to target.
 */
.page-id-39 .hp-form {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 20px !important;
}

/*
 * --- Column 1 Fields ---
 * Explicitly places these fields in the first column.
 */
.page-id-39 .hp-form__field--column:nth-of-type(odd) {
    grid-column: 1 !important;
}

/*
 * --- Column 2 Fields ---
 * Explicitly places these fields in the second column.
 */
.page-id-39 .hp-form__field--column:nth-of-type(even) {
    grid-column: 2 !important;
}

/*
 * --- Full-width Fields (spanning both columns) ---
 * This rule makes specific fields span the entire width.
 * You'll need to add the correct field names here.
 * For example: `.hp-form__field--column.hp-form__field--description`
 */
.page-id-39 .hp-form .hp-form__field--description,
.page-id-39 .hp-form .hp-form__field--photos,
.page-id-39 .hp-form .hp-form__field--documents {
    grid-column: 1 / -1 !important;
    width: 100% !important;
}

/*
 * A media query to ensure the layout reverts to a single column on mobile devices.
 */
@media (max-width: 767px) {
    .page-id-39 .hp-form {
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;
    }
    .page-id-39 .hp-form .hp-form__field--column {
        width: 100% !important;
        margin-right: 0 !important;
        grid-column: unset !important;
    }
}