/*
Theme Name: twentytwentyfive-child
Description: Child theme for TwentyTwentyFive -Consultoria Canadiense
Author: Pixelscape
Author URI: http://pixelscape.ca
Template: twentytwentyfive
Version: 1.0.1
*/

.top-nav-links > a:hover{
    text-decoration: none;
    font-weight: 700;
}

.top-nav-links:hover{
    color: red;
    border-bottom: 3pt solid red;
}

.angled-hero {
    --slope-left-mobile: 96%;
    --slope-right-mobile: 100%;
    --slope-left-desktop: 90%;
    --slope-right-desktop: 100%;

    position: relative;
    overflow: hidden;
    clip-path: polygon(0 0, 100% 0, 100% var(--slope-right-mobile), 0 var(--slope-left-mobile));
}

.hero-container{
    max-width: 800px;
}

.hero-button{
    max-width: 240px;
}


#who-we-are{
        padding-bottom: var(--wp--preset--spacing--40);
}

#seasonal-youth-desktop{
    display: none;
}


/* Adjust angle for Desktop */
@media (min-width: 782px) {
    .angled-hero {
        clip-path: polygon(0 0, 100% 0, 100% var(--slope-right-desktop), 0 var(--slope-left-desktop));
        border-bottom-right-radius: 80px;
        height: 55vh;
        max-height: 1200px;
    }
    
    .angled-hero{
        display: block;
    }
    
    .hero-container{
        width: 40%;
    }
}

/* Ensure the Cover Block media fills the clipped space */
.angled-hero .wp-block-cover__video-background,
.angled-hero .wp-block-cover__image-background {
    object-fit: cover !important;
    object-position: center 20% !important;
}

/* The Red Accent Ribbon */
.angled-hero::after {
    content: "";
    position: absolute;
    /* inset: 0 stretches the pseudo-element to fill the parent entirely */
    inset: 0; 
    background-color: #e62e1a;
    z-index: 2;
    pointer-events: none;
    
    /* Creates a 12px thick ribbon exactly at the mobile cut line */
    clip-path: polygon(
        0 calc(var(--slope-left-mobile) - 22px), 
        100% calc(var(--slope-right-mobile)), 
        100% var(--slope-right-mobile), 
        0 var(--slope-left-mobile)
    );
}

/* ==========================================================================
   1. HIDE SPECIFIC ELEMENTS
   ========================================================================== */

/* Hide the form title, "Fields marked with..." text, and the red asterisks */
.nf-form-title,
.nf-form-fields-required,
.ninja-forms-req-symbol {
    display: none !important;
}

/* ==========================================================================
   2. GENERAL FORM STYLES (Applies to both Mobile & Desktop)
   ========================================================================== */

/* Main form container wrapper */
.nf-form-layout {
    background-color: #ffffff;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    max-width: 800px; /* Limits overall width to match design */
    margin: 0 auto;
}

/* Style the text inputs and textarea */
.nf-form-content input[type="text"],
.nf-form-content input[type="email"],
.nf-form-content textarea {
    width: 100% !important;
    border: 1px solid #dcdcdc !important;
    border-radius: 4px !important;
    padding: 12px 14px !important;
    background-color: #ffffff !important;
    box-shadow: none !important;
    font-size: 15px !important;
    transition: border-color 0.2s ease;
    box-sizing: border-box !important;
}

/* Focus state color change */
.nf-form-content input[type="text"]:focus,
.nf-form-content input[type="email"]:focus,
.nf-form-content textarea:focus {
    border-color: #da211c !important;
    outline: none;
}

/* Form field labels */
.nf-form-content .nf-field-label label {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-weight: 700 !important;
    color: #333333 !important;
    font-size: 16px !important;
    margin-bottom: 8px !important;
    display: block;
}

/* Red Submit Button styling - UPDATED TO TARGET [type="submit"] */
.nf-form-content input[type="button"],
.nf-form-content input[type="submit"] {
    background-color: #da211c !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 16px !important;
    border: none !important;
    border-radius: 6px !important;
    padding: 12px 40px !important;
    cursor: pointer;
    transition: background-color 0.2s ease;
    -webkit-appearance: none; /* Removes default iOS styling */
}

/* Submit Button hover state */
.nf-form-content input[type="button"]:hover,
.nf-form-content input[type="submit"]:hover {
    background-color: #b51a16 !important;
}

/* Fix for disabled state (when form has errors) */
.nf-form-content input[type="button"]:disabled,
.nf-form-content input[type="submit"]:disabled {
    opacity: 0.6 !important;
    cursor: not-allowed !important;
}


/* ==========================================================================
   3. DESKTOP GRID LAYOUT (Frame 163 - Screens 768px and wider)
   ========================================================================== */
@media (min-width: 768px) {
    
    /* Configures the container element to use CSS grid */
    .nf-form-fields-wrap {
        display: grid !important;
        grid-template-columns: 1fr 1fr; /* Two columns of equal width */
        column-gap: 24px;
        row-gap: 16px;
    }

    /* Force the third field (Message textarea) to stretch across both columns */
    .nf-form-fields-wrap nf-field:nth-child(3) {
        grid-column: span 2;
    }

    /* Force the fourth field (Submit Button) to span full width & align right */
    .nf-form-fields-wrap nf-field:nth-child(4) {
        grid-column: span 2;
        display: flex;
        justify-content: flex-end;
        margin-top: 12px;
    }
}



@media (min-width: 782px) {
    .angled-hero::after {
        /* Creates a 12px thick ribbon exactly at the desktop cut line */
        clip-path: polygon(
            0 calc(var(--slope-left-desktop) - 32px), 
            100% calc(var(--slope-right-desktop)), 
            100% var(--slope-right-desktop), 
            0 var(--slope-left-desktop)
        );
    }
}

@media(min-width: 678px){
    #who-we-are{
        display: grid;
        grid-template-columns: 2fr 1fr;
        padding-bottom: 0px;
        height: 800px;
    }

    .why-trust-us{
        top: 60px;
        left: -59px;
        height: fit-content;
    }
    
    .we-are-not-just-consultants{
     max-width: 800px;   
    }
    #seasonal-youth-desktop{
        display: block;
    }
    #seasonal-youth-mobile{
        display: none;
    }
}

@media(min-width: 1550px){
    .why-trust-us{
        left: -116px;
    }
}

/* Keep the text above everything */
.angled-hero .wp-block-cover__inner-container {
    z-index: 3;
    position: relative;
    padding-bottom: 60px;
}

.why-trust-us > h3{
    width: 100%;
}

.why-trust-us{
    position: relative;
    bottom: 47px;
    margin-left: 16px!important;
    margin-right: 16px!important;
}

@media (min-width: 450px){
    
    .explore-path-container{
    min-height: 200px;
    min-width: 400px;
    }
}

/*PAGE TEMPLATES CUSTOM CSS*/
.page-hero-content > .wp-block-buttons > .wp-block-button{
    min-width: 100%;
    max-width: 100%;
}


@media (min-width: 500px){
        .page-hero{
min-height: 600px;
}
.page-hero-content{
        max-width: 1200px;
        width: 50%;
        padding-left: 40px;
}
.page-hero-content > .wp-block-buttons > .wp-block-button{
    max-width: 75%;
    min-width: 70%;
}

}