/**
 * Plugin Name: DAF Marketplace
 * File Name: marketplace-hero.css
 * Location: /wp-content/plugins/daf-marketplace/assets/front/marketplace-hero.css
 *
 * Purpose:
 * - Styles the dedicated marketplace hero section.
 * - Controls hero height, background image presentation, spacing, and responsive layout.
 * - Keeps hero layout styling isolated from the search component system.
 *
 * Linked / Related Files:
 * - /wp-content/plugins/daf-marketplace/templates/marketplace/parts/hero.php
 * - /wp-content/plugins/daf-marketplace/templates/marketplace/parts/search-bar.php
 * - /wp-content/plugins/daf-marketplace/assets/front/marketplace-search.css
 * - /wp-content/plugins/daf-marketplace/assets/front/marketplace-search.js
 * - /wp-content/plugins/daf-marketplace/includes/frontend/class-dafmp-frontend.php
 *
 * Enqueue / Load:
 * - Enqueued in: /wp-content/plugins/daf-marketplace/includes/frontend/class-dafmp-frontend.php
 * - Handle: dafmp-marketplace-hero
 *
 * System:
 * - DAF Marketplace Frontend Hero System
 *
 * Notes:
 * - This file only styles the hero section.
 * - Search-specific styles must stay inside marketplace-search.css.
 * - No overlay layer should be styled here.
 */

/* hero */
.dafmp-hero,
.dafmp-marketplace-hero{
position:relative;
z-index:20;
width:100%;
min-height:320px;
padding:22px 0 8px;
background-color:#dcece3;
background-position:center center;
background-repeat:no-repeat;
background-size:cover;
overflow:visible
}

/* inner layout */
.dafmp-hero__inner{
position:relative;
z-index:2;
max-width:1200px;
margin:0 auto;
padding:0 20px;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
text-align:center;
overflow:visible
}

.dafmp-hero__content-wrap{
position:relative;
z-index:3;
width:100%;
display:flex;
flex-direction:column;
align-items:center;
overflow:visible
}

.dafmp-hero__content{
width:100%;
max-width:920px
}

.dafmp-hero__title{
margin:0;
color:#18253f;
font-size:clamp(2.1rem,3.5vw,3.5rem);
font-weight:800;
line-height:1.02;
letter-spacing:-.035em
}

.dafmp-hero__desc{
max-width:760px;
margin:10px auto 0;
color:#445365;
font-size:1rem;
font-weight:500;
line-height:1.5
}

.dafmp-hero__search-wrap{
position:relative;
z-index:9998;
width:100%;
max-width:820px;
margin-top:18px;
overflow:visible
}

.dafmp-hero__search{
position:relative;
z-index:9999;
width:100%;
overflow:visible
}

/* responsive */
@media (max-width:1024px){
.dafmp-hero,
.dafmp-marketplace-hero{
min-height:290px;
padding:20px 0 6px
}

.dafmp-hero__title{
font-size:clamp(1.9rem,4.4vw,3rem)
}

.dafmp-hero__desc{
font-size:.97rem
}

.dafmp-hero__search-wrap{
max-width:760px;
margin-top:16px
}
}

@media (max-width:782px){
.dafmp-hero,
.dafmp-marketplace-hero{
min-height:250px;
padding:18px 0 6px;
background-position:center center
}

.dafmp-hero__title{
font-size:clamp(1.72rem,6vw,2.45rem)
}

.dafmp-hero__desc{
margin-top:10px;
font-size:.94rem
}

.dafmp-hero__search-wrap{
margin-top:14px
}
}

@media (max-width:640px){
.dafmp-hero,
.dafmp-marketplace-hero{
min-height:220px;
padding:16px 0 4px
}

.dafmp-hero__content,
.dafmp-hero__desc{
max-width:100%
}

.dafmp-hero__title{
font-size:clamp(1.55rem,7.5vw,2.1rem)
}

.dafmp-hero__desc{
font-size:.9rem
}

.dafmp-hero__search-wrap{
margin-top:12px
}
}