/* /public_html/css/frontend-style.css */

/* =========================================
   1. GLOBAL & LAYOUT UTILITIES
   ========================================= */
:root {
    --primary-blue: #1a365d;
    --luxury-gold: #e9b949;
    --urgency-red: #d90429;
}

.project-hero-section,
.services-section,
.options-section,
.process-section,
.why-choose-us-section,
.auth-cta-wrapper,
.related-services-section {
    overflow-x: hidden;
    max-width: 100vw;
    width: 100%;
}

.section-heading {
    font-weight: 700;
    color: var(--primary-blue);
    margin-bottom: 1rem;
}

.transition-all { transition: all 0.3s ease; }
.shadow-hover:hover { box-shadow: 0 5px 20px rgba(0,0,0,0.15); }

/* --- HIGH VISIBILITY HERO BREADCRUMBS --- */
.auth-breadcrumb-nav .breadcrumb-visible {
    background: rgba(0, 0, 0, 0.25) !important; /* Soft dark tint */
    backdrop-filter: blur(4px); /* Modern "Glass" effect */
    display: inline-flex;
    padding: 6px 15px !important;
    border-radius: 50px; /* Matches your pill buttons */
    list-style: none;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.auth-breadcrumb-nav .breadcrumb-item a {
    color: #ffffff !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    transition: 0.3s;
}

.auth-breadcrumb-nav .breadcrumb-item a:hover {
    color: var(--luxury-gold) !important;
}

/* The separator (/) */
.auth-breadcrumb-nav .breadcrumb-item + .breadcrumb-item::before {
    content: "\f105"; /* FontAwesome angle right for a cleaner look */
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    color: rgba(255, 255, 255, 0.5) !important;
    padding: 0 10px;
}

.auth-breadcrumb-nav .breadcrumb-item.active {
    color: var(--luxury-gold) !important; /* Active page is gold for visibility */
    font-size: 0.85rem;
    font-weight: 700;
}

/* =========================================
   2. HERO SYSTEM (Above the Fold)
   ========================================= */
.auth-hero-main {
    background: linear-gradient(to right, rgba(13, 23, 38, 0.9), rgba(13, 23, 38, 0.4)), var(--hero-bg) !important;
    background-size: cover !important;
    background-position: center !important;
    /* Reduced bottom padding to bring the Trust Strip closer */
    padding: 100px 0 40px 0 !important; 
    min-height: 450px;
    display: flex;
    align-items: center;
    width: 100%;
}

.auth-badge-top {
    display: inline-block;
    background: var(--luxury-gold);
    color: var(--primary-blue);
    padding: 6px 15px;
    border-radius: 4px;
    font-weight: 800;
    font-size: 0.85rem;
    text-transform: uppercase;
    margin-bottom: 15px;
}

/* --- HERO DESCRIPTION LIST STYLING --- */
.hero-description-editor ul {
    list-style: none !important;
    padding-left: 0 !important;
    margin-bottom: 1.5rem;
}

.hero-description-editor ul li {
    position: relative;
    padding-left: 28px; /* Space for the checkmark */
    margin-bottom: 10px;
    font-size: 1.1rem;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.95); /* High-visibility white */
    display: block; /* Ensures they stack correctly */
}

/* The Gold Checkmark */
.hero-description-editor ul li::before {
    content: "\f00c"; /* FontAwesome Checkmark */
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    position: absolute;
    left: 0;
    top: 2px;
    color: var(--luxury-gold); /* Uses your gold variable */
    font-size: 0.95rem;
}

/* Keep bold text inside the description Gold */
.hero-description-editor strong {
    color: var(--luxury-gold);
    font-weight: 700;
}

/* Hero Pill Buttons */
.hero-cta-group {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
    margin-top: 20px;
    margin-bottom: 0 !important; /* Removed bottom margin */
}

.btn-hero-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 35px !important; /* Slightly slimmer padding */
    font-size: 1.05rem;
    font-weight: 700;
    text-decoration: none !important;
    border-radius: 50px !important; 
    border: 2px solid var(--primary-blue);
    background-color: var(--primary-blue) !important;
    color: #ffffff !important;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.btn-hero-pill:hover {
    background-color: #ffffff !important;
    color: var(--primary-blue) !important;
    transform: translateY(-2px);
}

/* =========================================
   3. TRUST STRIP (Social Proof)
   ========================================= */
.trust-strip {
    background: #f8fafc;
    /* Reduced padding to make the strip sleeker */
    padding: 25px 0 !important; 
    border-bottom: 1px solid #e2e8f0;
    position: relative;
    z-index: 10;
}

.ts-item {
    font-size: 1rem;
    color: var(--primary-blue);
    font-weight: 600;
}

/* =========================================
   4. CARDS & GRID COMPONENTS
   ========================================= */
.service-card, .option-card {
    border-radius: 15px !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05) !important;
    transition: all 0.3s ease !important;
    border: 1px solid #edf2f7 !important;
    background: #fff;
}

.service-card:hover, .option-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.12) !important;
    border-color: var(--primary-blue) !important;
}

.card-title {
    color: var(--primary-blue) !important;
    font-weight: 800 !important;
}

/* Image overlay cards (Our Expert Services) — global .card-title must not force brand blue */
.service-card-featured .card-title,
.services-modern-section .service-card-featured .card-title {
    color: #ffffff !important;
    font-weight: 700 !important;
}

.service-image, .option-image {
    height: 200px;
    overflow: hidden;
}

.service-image img, .option-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* =========================================
   5. PROCESS & WHY CHOOSE US
   ========================================= */
.process-step-card {
    padding: 2rem 1rem;
}

.step-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
    color: var(--primary-blue);
}

.reason-card {
    padding: 2rem;
    border-radius: 15px;
    background: #fff;
}

/* =========================================
   6. WARRANTY SECTION
   ========================================= */
.warranty-section {
    padding: 100px 0;
    background-color: #fcfcfc;
    border-top: 1px solid #eee;
}

.warranty-section h2 {
    font-size: 2.8rem;
    font-weight: 800;
    color: var(--primary-blue) !important;
}

.warranty-badge-img {
    max-width: 280px;
    filter: drop-shadow(0 10px 15px rgba(0,0,0,0.1));
}

/* =========================================
   7. FOOTER AUTHORITY CTA
   ========================================= */
.auth-cta-wrapper {
    padding: 80px 0 !important;
    background-color: #ffffff !important;
}

.auth-cta-card {
    background: linear-gradient(135deg, #1a365d 0%, #0d1726 100%) !important;
    border-radius: 20px !important;
    padding: 60px 30px !important;
    text-align: center !important;
    box-shadow: 0 20px 40px rgba(0,0,0,0.2) !important;
    color: white !important;
}

.auth-cta-title {
    color: #ffffff !important;
    font-size: 2.5rem !important;
    font-weight: 800 !important;
}

.auth-cta-actions {
    display: flex !important;
    gap: 15px !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
}

.btn-auth-primary {
    background: #ffffff !important;
    color: var(--primary-blue) !important;
    padding: 15px 35px !important;
    border-radius: 50px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
}

.btn-auth-outline {
    background: transparent !important;
    color: #ffffff !important;
    padding: 15px 35px !important;
    border-radius: 50px !important;
    border: 2px solid white !important;
    text-decoration: none !important;
}

/* =========================================
   8. RESPONSIVE QUERIES
   ========================================= */
@media (max-width: 768px) {
    .auth-hero-main { 
        padding: 60px 0 !important; 
        text-align: center !important; 
    }
    .hero-description-editor li { text-align: left; }
    .hero-cta-group { justify-content: center; }
    .btn-hero-pill, .btn-auth-primary, .btn-auth-outline { width: 100% !important; }
    
    .trust-strip { padding: 30px 0 !important; }
    .ts-item { font-size: 1rem; margin-bottom: 10px; }
    
    .auth-cta-title { font-size: 1.8rem !important; }
}