/* CONTACT Page Specific Styling - Black Line MTB */
/* Based on Black Line Page Styling Standard v1.0 - Matching Sustainability Page */

/* ============================================================================
   ENHANCED PAGE TITLE HIDING - Research-Based Comprehensive Selectors
   ============================================================================
   
   Research findings: WordPress themes use various selectors for page titles.
   Ridez theme specifically uses .entry-header for page titles.
   Contact page has URL slug 'contact-2' so we need to target multiple variations.
   
   Strategy: Use multiple selector approaches to ensure complete coverage:
   1. Page ID specific selectors (155, 4053)
   2. Body class selectors for page slug (contact-2)
   3. Ridez theme specific selectors
   4. WordPress standard selectors
   5. Nuclear option selectors with !important
*/

/* Page ID based selectors - Primary approach */
.page-id-155 .entry-header,
.page-id-155 .page-header,
.page-id-155 .entry-title,
.page-id-155 h1.entry-title,
.page-id-155 header.entry-header,
.page-id-4053 .entry-header,
.page-id-4053 .page-header,
.page-id-4053 .entry-title,
.page-id-4053 h1.entry-title,
.page-id-4053 header.entry-header {
    display: none !important;
}

/* Body class selectors for contact-2 page slug - Secondary approach */
body.page-contact-2 .entry-header,
body.page-contact-2 .page-header,
body.page-contact-2 .entry-title,
body.page-contact-2 h1.entry-title,
body.page-contact-2 header.entry-header,
body.page-contact-2 #primary .site-main .entry-header,
body.page-contact-2 .site-main > article > .entry-header {
    display: none !important;
}

/* WordPress standard page selectors - Tertiary approach */
.page .entry-header,
.page .page-header {
    display: none !important;
}

/* Ridez theme specific selectors - Based on research */
#primary .site-main article .entry-header,
#primary .site-main .entry-header,
.site-main > article > .entry-header,
article[id*="post-"] .entry-header {
    display: none !important;
}

/* Nuclear option - Last resort comprehensive hiding */
.entry-header,
.page-header,
.entry-title,
h1.entry-title,
header.entry-header {
    display: none !important;
}

/* 1. Hero Section Styling - Matching Sustainability Page */
.hero-section {
    position: relative;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    min-height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 0 30px 0;
    overflow: hidden;
    color: white;
    text-align: center;
}

/* Dark overlay for text readability - Matching Sustainability Page */
.hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.6));
    z-index: 1;
}

/* Hero text styling - Force white text - Matching Sustainability Page */
.hero-section .container {
    position: relative;
    z-index: 2;
    max-width: 800px;
    margin: 0 auto;
    padding: 0 20px;
}

.hero-section h1 {
    position: relative;
    z-index: 2;
    color: #ffffff !important;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8) !important;
    text-align: center;
    font-size: 3em !important;
    margin-bottom: 15px !important;
    font-weight: bold !important;
    line-height: 1.2 !important;
}

.hero-section .hero-text-addition {
    position: relative;
    z-index: 2;
    color: #ffffff !important;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8) !important;
    text-align: center;
    font-size: 1.3em !important;
    line-height: 1.5 !important;
    font-weight: 400 !important;
}

/* 2. Page Content Styling - Matching Sustainability Page */
.page-content {
    margin-top: -20px;
}

.container {
    margin-top: 0;
}

/* 3. Section Headers - Brand Green - Matching Sustainability Page */
h2 {
    color: #28a745 !important;
    font-weight: 600;
    margin-bottom: 30px;
}

/* 4. Card Styling - Square Corners and Drop Shadows - Matching Sustainability Page */
.bg-light.rounded {
    border-radius: 8px !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    background-color: #f8f9fa !important;
}

.bg-light.rounded:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.15) !important;
}

/* 5. Content Section Spacing - Matching Sustainability Page */
.content-section {
    margin-bottom: 60px !important;
}

/* Override inline styles for better spacing */
div[style*="margin-bottom: 60px"] {
    margin-bottom: 60px !important;
}

/* 6. Icons for Connect With Us Section - Using Sustainability Page Approach */
.bg-light.rounded {
    position: relative;
    padding-top: 80px !important;
}

/* Email Support Icon */
.content-section .row .col-md-3:nth-child(1) .bg-light.rounded::before {
    content: "";
    position: absolute;
    top: 15px;
    left: 50%;
    transform: translateX(-50%);
    width: 50px;
    height: 50px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2328a745'%3E%3Cpath d='M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z'/%3E%3Cpolyline points='22,6 12,13 2,6'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* Instagram Icon */
.content-section .row .col-md-3:nth-child(2) .bg-light.rounded::before {
    content: "";
    position: absolute;
    top: 15px;
    left: 50%;
    transform: translateX(-50%);
    width: 50px;
    height: 50px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2328a745'%3E%3Crect width='20' height='20' x='2' y='2' rx='5' ry='5'/%3E%3Cpath d='m16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z'/%3E%3Cline x1='17.5' x2='17.51' y1='6.5' y2='6.5'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* YouTube Icon */
.content-section .row .col-md-3:nth-child(3) .bg-light.rounded::before {
    content: "";
    position: absolute;
    top: 15px;
    left: 50%;
    transform: translateX(-50%);
    width: 50px;
    height: 50px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2328a745'%3E%3Cpath d='M2.5 17a24.12 24.12 0 0 1 0-10 2 2 0 0 1 1.4-1.4 49.56 49.56 0 0 1 16.2 0A2 2 0 0 1 21.5 7a24.12 24.12 0 0 1 0 10 2 2 0 0 1-1.4 1.4 49.55 49.55 0 0 1-16.2 0A2 2 0 0 1 2.5 17'/%3E%3Cpath d='m10 15 5-3-5-3z'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* Newsletter Icon */
.content-section .row .col-md-3:nth-child(4) .bg-light.rounded::before {
    content: "";
    position: absolute;
    top: 15px;
    left: 50%;
    transform: translateX(-50%);
    width: 50px;
    height: 50px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2328a745'%3E%3Cpath d='M4 22h16a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2H8a2 2 0 0 0-2 2v16a2 2 0 0 1-2 2Zm0 0a2 2 0 0 1-2-2v-9c0-1.1.9-2 2-2h2'/%3E%3Cpath d='M18 14h-8'/%3E%3Cpath d='M15 18h-5'/%3E%3Cpath d='M10 6h8v4h-8V6Z'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* 7. Link Styling - Matching Sustainability Page */
a {
    color: #28a745;
    text-decoration: none;
    font-weight: 600;
    transition: color 0.3s ease;
}

a:hover {
    color: #218838;
    text-decoration: underline;
}

/* 8. Responsive Design - Matching Sustainability Page */
@media (max-width: 1024px) {
    .hero-section {
        min-height: 350px;
    }
    
    .hero-section h1 {
        font-size: 2.5em !important;
    }
    
    .hero-section .hero-text-addition {
        font-size: 1.2em !important;
    }
}

@media (max-width: 768px) {
    .hero-section {
        min-height: 300px;
    }
    
    .hero-section h1 {
        font-size: 2em !important;
        margin-bottom: 10px !important;
    }
    
    .hero-section .hero-text-addition {
        font-size: 1.1em !important;
        padding: 0 15px;
    }
    
    .bg-light.rounded {
        margin-bottom: 20px;
        padding-top: 70px !important;
    }
    
    .content-section .row .col-md-3:nth-child(1) .bg-light.rounded::before,
    .content-section .row .col-md-3:nth-child(2) .bg-light.rounded::before,
    .content-section .row .col-md-3:nth-child(3) .bg-light.rounded::before,
    .content-section .row .col-md-3:nth-child(4) .bg-light.rounded::before {
        width: 40px;
        height: 40px;
        top: 12px;
    }
}

@media (max-width: 480px) {
    .hero-section {
        min-height: 250px;
    }
    
    .hero-section h1 {
        font-size: 1.8em !important;
    }
    
    .hero-section .hero-text-addition {
        font-size: 1em !important;
    }
    
    .page-content {
        margin-top: -10px;
    }
}