/* ==========================================
   Calmera Mindcare - Full-Width Edge-to-Edge & Styling Layout
   ========================================== */

/* 1. Compact, Professional Header Customizations */
header,
.site-header,
.wp-block-template-part > header,
.wp-block-group.global-header {
    padding-top: 15px !important;
    padding-bottom: 15px !important;
    min-height: 90px !important;
    max-height: 110px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    box-sizing: border-box !important;
}

/* Ensure all primary child blocks (logo, navigation, contact, CTA) align horizontally and center vertically */
header .wp-block-group,
header .wp-block-columns,
.site-header .wp-block-group,
.wp-block-template-part > header .wp-block-group,
.wp-block-template-part > header .wp-block-columns,
.wp-block-group.global-header > .wp-block-group {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    width: 100% !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

header nav,
header .wp-block-navigation,
header .wp-block-buttons,
header .wp-block-image,
header p,
header a {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    display: flex !important;
    align-items: center !important;
}

/* Make sure the logo is centered vertically and compact */
header img,
.site-logo img,
.custom-logo-link img {
    max-height: 50px !important;
    width: auto !important;
    object-fit: contain !important;
}

/* Ensure margins/paddings on inner columns inside header don't create vertical stack gaps */
header .wp-block-column,
.wp-block-template-part > header .wp-block-column {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    display: flex !important;
    align-items: center !important;
}

/* 2. Force Full-Width & Edge-to-Edge Page Canvas */
.entry-content,
.post-953,
.page,
.site-main,
.wp-site-blocks,
main {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Ensure Gutenberg/Theme default constraints are overridden for containers */
.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)),
.wp-block-group,
.wp-block-columns {
    max-width: 100% !important;
    width: 100% !important;
}

/* 3. Global Section Spacing (Edge to Edge) */
.premium-section,
.wp-block-group.alignfull {
    width: 100% !important;
    max-width: 100% !important;
    padding: clamp(60px, 8vw, 120px) clamp(20px, 5vw, 80px) !important;
    box-sizing: border-box !important;
    margin: 0 !important;
}

/* 4. Grid & Column Alignments */
.grid-2col {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)) !important;
    gap: clamp(40px, 6vw, 80px) !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 1400px !important;
    margin: 0 auto !important;
}

.grid-3col {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important;
    gap: clamp(30px, 4vw, 50px) !important;
    width: 100% !important;
    max-width: 1400px !important;
    margin: 0 auto !important;
}

/* 5. Contrast & Readability inside dark green sections (#1c3a2a) */
.bg-dark,
.hero-banner,
div[style*="background-color: #1c3a2a"],
div[style*="background-color:#1c3a2a"],
div[style*="background: linear-gradient"] {
    color: #ffffff !important;
}

/* Specific cards inside dark green section */
.bg-dark .premium-card,
div[style*="background-color: #1c3a2a"] .premium-card {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
}

/* Ensure headings inside dark sections are clear and high-contrast */
.bg-dark h1, .bg-dark h2, .bg-dark h3,
.hero-banner h1, .hero-banner h2, .hero-banner h3,
div[style*="background-color: #1c3a2a"] h2,
div[style*="background-color: #1c3a2a"] h3 {
    color: #ffffff !important;
}

/* Ensure the titles inside cards are pure high-contrast white */
.bg-dark .premium-card .card-title,
div[style*="background-color: #1c3a2a"] .premium-card .card-title,
.premium-card .card-title {
    color: #ffffff !important;
    font-weight: 700 !important;
    margin-top: 15px !important;
    margin-bottom: 10px !important;
}

/* Ensure paragraph/lead text inside dark green areas is perfectly visible */
.bg-dark p, 
.bg-dark .card-text,
.bg-dark .premium-card .card-text,
div[style*="background-color: #1c3a2a"] .premium-card .card-text,
.premium-card .card-text,
.hero-banner p, 
.hero-banner .premium-lead,
div[style*="background-color: #1c3a2a"] p,
div[style*="background-color: #1c3a2a"] .card-text {
    color: #f0f5f8 !important;
    font-size: 17px !important;
    line-height: 1.65 !important;
}

/* Style the numbers on the cards for clear vision */
.bg-dark .premium-card .card-num,
div[style*="background-color: #1c3a2a"] .premium-card .card-num,
.premium-card .card-num {
    color: #8fb4c4 !important;
    font-size: 36px !important;
    font-weight: 800 !important;
    opacity: 1 !important;
}

/* 6. Center-alignment & elegant spacing */
.premium-section {
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
}

.premium-section .grid-2col, 
.premium-section .grid-3col {
    justify-items: center !important;
    text-align: center !important;
}

.premium-section .grid-2col > div {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
}

/* Subtle Hover Effects for Cards */
.premium-card {
    text-align: center !important;
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important, 
                box-shadow 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    border-radius: 12px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: clamp(20px, 4vw, 40px) !important;
    box-sizing: border-box !important;
}

/* Cards hover state (elegant lift and soft shadow) */
.premium-card:hover {
    transform: translateY(-8px) !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12) !important;
    background: rgba(255, 255, 255, 0.12) !important;
}

/* Buttons Styling with Soft Blue & Hover lift */
.premium-btn {
    display: inline-block !important;
    background-color: #8fb4c4 !important;
    color: #1c3a2a !important;
    padding: 16px 36px !important;
    border-radius: 50px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    font-size: 16px !important;
    letter-spacing: 0.5px !important;
    transition: transform 0.3s ease !important, 
                background-color 0.3s ease !important, 
                box-shadow 0.3s ease !important;
    box-shadow: 0 4px 15px rgba(143, 180, 196, 0.3) !important;
}

/* Button Hover State */
.premium-btn:hover {
    background-color: #7a9b8e !important;
    color: #ffffff !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 25px rgba(122, 155, 142, 0.4) !important;
}