/* =====================================================
AGAPE FAMILY KINGDOM
SAFEGUARDING PAGE CSS
BASED ON EQUALITY.CSS
====================================================== */


/* =====================================================
GLOBAL
====================================================== */


::selection{

    background:var(--verde-salvia);

    color:white;

}



/* =====================================================
PAGE
====================================================== */


.safechild-page{

    background:var(--fundo-pagina);

    overflow:hidden;

}



.container{

    width:100%;

    max-width:1100px;

    margin:0 auto;

    padding:0 20px;

}



.narrow{

    max-width:850px;

}



/* =====================================================
HERO SECTION
====================================================== */


.safechild-hero{

    background:var(--verde-salvia);

    padding:150px 20px;

    text-align:center;
    
    
    

}



.safechild-hero .section-tag{

    color:white;

}



.safechild-hero h1{


    max-width:900px;


    margin:25px auto;



    font-family:"Cormorant Garamond",serif;



    font-size:4rem;



    font-weight:600;



    line-height:1.1;



    color:white;



    letter-spacing:.5px;


}



.safechild-hero p{


    max-width:750px;



    margin:30px auto 0;



    color:white;



    font-family:"Inter",sans-serif;



    font-size:1.15rem;



    line-height:1.8;


}



/* =====================================================
INTRODUCTION
====================================================== */


.page-intro{


    padding:100px 20px;



    text-align:center;


}



.page-intro h2{


    font-family:"Cormorant Garamond",serif;



    font-size:3rem;



    font-weight:600;



    color:var(--texto-contraste);



    line-height:1.2;



    margin:25px 0;


}



.page-intro p{


    font-size:1.1rem;



    line-height:1.9;



    color:#555;



    margin-bottom:20px;


}
/* =====================================================
SECTION STRUCTURE
====================================================== */


.commitment,
.principles,
.responsibilities,
.reporting,
.safer-recruitment,
.training,
.policy-review,
.company-information{


    padding:100px 20px;


    align-items:center;


    text-align:center;


}



/* =====================================================
SECTION TAG
====================================================== */


.section-tag{


    display:inline-block;



    color:#c8873d;



    font-family:"Inter",sans-serif;



    font-size:.85rem;



    font-weight:700;



    letter-spacing:3px;



    text-transform:uppercase;



    margin-bottom:15px;


}





/* =====================================================
TITLES
====================================================== */


.commitment h2,
.principles h2,
.responsibilities h2,
.reporting h2,
.safer-recruitment h2,
.training h2,
.policy-review h2{


    font-family:"Cormorant Garamond",serif;



    font-size:2.8rem;



    font-weight:600;



    color:var(--texto-contraste);



    line-height:1.2;



    margin-bottom:25px;


}





/* =====================================================
PARAGRAPHS
====================================================== */


.commitment p,
.principles p,
.responsibilities p,
.reporting p,
.safer-recruitment p,
.training p,
.policy-review p{


    font-family:"Inter",sans-serif;



    font-size:1.05rem;



    line-height:1.9;



    color:#555;



    margin-bottom:20px;


}





/* =====================================================
DIVIDER
====================================================== */


.divider{


    width:80px;



    height:3px;



    background:#d18b47;



    margin:30px auto 45px;



}





/* =====================================================
PRINCIPLES SECTION
====================================================== */


.principles{


    background:var(--bege-areia);



    padding:110px 20px;



    text-align:center;


}





/* =====================================================
PRINCIPLES GRID
====================================================== */


.principles-grid{


    display:grid;



    grid-template-columns:repeat(4,1fr);



    gap:30px;



    margin-top:55px;


}





/* =====================================================
PRINCIPLE CARD
====================================================== */


.principle-card{


    background:white;



    padding:40px 30px;



    text-align:center;



    border-radius:18px;



    border:1px solid transparent;



    box-shadow:0 10px 30px rgba(0,0,0,.06);



    transition:.35s ease;


}





.principle-card:hover{


    transform:translateY(-10px);



    border-color:var(--verde-salvia);



    box-shadow:0 20px 40px rgba(0,0,0,.12);



}





/* =====================================================
PRINCIPLE SYMBOL
====================================================== */


.principle-icon{


    width:70px;



    height:70px;



    margin:0 auto 25px;



    display:flex;



    align-items:center;



    justify-content:center;



    border-radius:50%;



    background:var(--verde-salvia);



    color:white;



    font-family:"Cormorant Garamond",serif;



    font-size:2rem;



    font-weight:700;



    transition:.35s ease;


}





.principle-card:hover .principle-icon{


    transform:scale(1.1);


}





/* =====================================================
CARD CONTENT
====================================================== */


.principle-card h3{


    font-family:"Cormorant Garamond",serif;



    font-size:1.8rem;



    font-weight:600;



    color:var(--texto-contraste);



    margin-bottom:18px;



}





.principle-card p{


    font-family:"Inter",sans-serif;



    font-size:.98rem;



    line-height:1.7;



    color:#555;



    margin:0;



}

/* =====================================================
RESPONSIBILITIES
====================================================== */


.responsibilities{


    background:white;


}



.responsibility-list{


    display:grid;



    grid-template-columns:repeat(2,1fr);



    gap:30px;



    margin-top:50px;


}




.responsibility-item{


    background:var(--fundo-pagina);



    padding:40px 30px;



    text-align:center;



    border-radius:18px;



    box-shadow:0 10px 30px rgba(0,0,0,.06);



    transition:.35s ease;


}




.responsibility-item:hover{


    transform:translateY(-8px);



    box-shadow:0 20px 40px rgba(0,0,0,.12);


}




.responsibility-item h3{


    font-family:"Cormorant Garamond",serif;



    font-size:1.8rem;



    font-weight:600;



    color:var(--texto-contraste);



    margin-bottom:18px;


}





.responsibility-item p{


    font-family:"Inter",sans-serif;



    font-size:.98rem;



    line-height:1.7;



    color:#555;



    margin:0;


}





/* =====================================================
REPORTING
====================================================== */


.reporting{


    background:#f7f7f7;


}





/* =====================================================
SAFER RECRUITMENT
====================================================== */


.safer-recruitment{


    background:white;


}





/* =====================================================
TRAINING
====================================================== */


.training{


    background:var(--bege-areia);


}





/* =====================================================
POLICY REVIEW
====================================================== */


.policy-review{


    text-align:center;


}




.policy-review .divider{


    margin-left:auto;



    margin-right:auto;


}





/* =====================================================
COMPANY INFORMATION
====================================================== */


.company-information{


    background:#2f332c;



    text-align:center;



    padding:110px 20px;



}





.company-information h3{


    font-family:"Cormorant Garamond",serif;



    font-size:2.3rem;



    font-weight:600;



    color:white;



    margin-bottom:25px;


}





.company-information p{


    max-width:650px;



    margin:0 auto 15px;



    color:#dddddd;



    font-family:"Inter",sans-serif;



    font-size:1.05rem;



    line-height:1.8;


}





.company-information strong{


    color:white;


}





/* =====================================================
STRONG TEXT
====================================================== */


.commitment strong,
.responsibilities strong,
.reporting strong,
.safer-recruitment strong,
.training strong,
.policy-review strong{


    color:var(--texto-contraste);


}





/* =====================================================
ANIMATION
====================================================== */


.principle-card,
.responsibility-item{


    animation:fadeUp .7s ease both;


}





@keyframes fadeUp{


    from{


        opacity:0;


        transform:translateY(25px);


    }



    to{


        opacity:1;


        transform:translateY(0);


    }


}

/* =====================================================
ACCESSIBILITY
====================================================== */


.principle-card:focus-within,
.responsibility-item:focus-within{


    outline:2px solid var(--verde-salvia);



    outline-offset:4px;


}





/* =====================================================
SMOOTH ELEMENTS
====================================================== */


a,
button,
.principle-card,
.responsibility-item,
.principle-icon{


    transition:.35s ease;


}





/* =====================================================
INTERNAL ANCHOR OFFSET
====================================================== */


.commitment,
.principles,
.responsibilities,
.reporting,
.safer-recruitment,
.training,
.policy-review{


    scroll-margin-top:100px;


}





/* =====================================================
RESPONSIVE DESIGN
====================================================== */


/* =====================================================
LARGE DESKTOP
====================================================== */


@media(max-width:1400px){


    .container{


        max-width:1000px;


    }



    .safechild-hero h1{


        font-size:3.6rem;


    }


}





/* =====================================================
DESKTOP / LAPTOP
====================================================== */


@media(max-width:1200px){



    .navbar{

        background-color:rgba(0,0,0,0.8) !important;

        -webkit-backdrop-filter:blur(10px);

        backdrop-filter:blur(10px);

        padding:0 20px;

        justify-content:space-between;

    }





    .principles-grid{


        grid-template-columns:repeat(2,1fr);


    }





    .safechild-hero{


        padding:130px 20px;


    }





    .safechild-hero h1{


        font-size:3.2rem;


    }





    .commitment h2,
    .principles h2,
    .responsibilities h2,
    .reporting h2,
    .safer-recruitment h2,
    .training h2,
    .policy-review h2{


        font-size:2.5rem;


    }


}





/* =====================================================
TABLET LANDSCAPE
====================================================== */


@media(max-width:992px){



    .safechild-hero{


        padding:110px 20px;


    }





    .safechild-hero h1{


        font-size:2.9rem;


    }





    .page-intro{


        padding:80px 20px;


    }





    .commitment,
    .principles,
    .responsibilities,
    .reporting,
    .safer-recruitment,
    .training,
    .policy-review,
    .company-information{


        padding:80px 20px;


    }





    .responsibility-list{


        grid-template-columns:1fr;


    }


}





/* =====================================================
TABLET PORTRAIT / IPAD
====================================================== */


@media(max-width:768px){



    .safechild-hero{


        padding:90px 20px;


    }





    .safechild-hero h1{


        font-size:2.5rem;



        line-height:1.15;


    }





    .safechild-hero p{


        font-size:1rem;


    }





    .page-intro h2{


        font-size:2.2rem;


    }





    .page-intro p{


        font-size:1rem;



        line-height:1.8;


    }





    .principles-grid{


        grid-template-columns:1fr;



        gap:25px;


    }





    .commitment h2,
    .principles h2,
    .responsibilities h2,
    .reporting h2,
    .safer-recruitment h2,
    .training h2,
    .policy-review h2{


        font-size:2.1rem;


    }





    .principle-card{


        padding:35px 25px;


    }


}





/* =====================================================
MOBILE
====================================================== */


@media(max-width:576px){



    .container{


        padding:0 18px;


    }





    .safechild-hero{


        padding:75px 18px;


    }





    .safechild-hero h1{


        font-size:2.1rem;


    }





    .section-tag{


        font-size:.75rem;



        letter-spacing:2px;


    }





    .commitment,
    .principles,
    .responsibilities,
    .reporting,
    .safer-recruitment,
    .training,
    .policy-review,
    .company-information{


        padding:65px 18px;


    }





    .company-information h3{


        font-size:1.9rem;


    }





    .responsibility-item{


        padding:30px 20px;


    }


}





/* =====================================================
EXTRA SMALL MOBILE
====================================================== */


@media(max-width:430px){



    .safechild-hero h1{


        font-size:1.85rem;


    }





    .safechild-hero p{


        font-size:.95rem;


    }





    .page-intro h2{


        font-size:1.8rem;


    }





    .principle-card h3{


        font-size:1.5rem;


    }


}





/* =====================================================
PRINT VERSION
====================================================== */


@media print {



    body{


        background:white;



        color:black;


    }





    .navbar,
    .top-bar,
    .main-footer,
    .prayer-modal{


        display:none !important;


    }





    .safechild-hero{


        background:white;



        padding:40px 0;


    }





    .safechild-hero h1,
    .safechild-hero p{


        color:black;


    }





    .principle-card,
    .responsibility-item{


        box-shadow:none;



        border:1px solid #ccc;


    }





    .company-information{


        background:white;


    }





    .company-information h3,
    .company-information p,
    .company-information strong{


        color:black;


    }





    .divider{


        background:black;


    }

}