/* ==========================================================================
   Contact page — layout for the split info / form panel.
   Loaded after css/style.css, which provides the fonts and colour variables.
   All rules are scoped to the contact page so they cannot leak into the header.
   ========================================================================== */

.contact-container{
   display:flex;
   flex-wrap:wrap;
   min-height:calc(100vh - var(--header-height));
}

.contact-info{
   flex:1 1 32rem;
   background-color:var(--blue-dark);
   color:var(--white);
   padding:5rem 4rem;
   display:flex;
   flex-direction:column;
   justify-content:center;
}

.contact-info h2{
   margin-bottom:.5rem;
   font-size:2rem;
   font-weight:600;
}

.contact-info h2:not(:first-child){
   margin-top:3rem;
}

.contact-info p{
   font-size:1.6rem;
   line-height:1.8;
   color:rgba(255,255,255,.85);
}

.contact-info a{
   color:var(--white);
   text-decoration:underline;
}

.contact-info a:hover{
   color:var(--blue);
}

.contact-form{
   flex:1.5 1 40rem;
   background-color:var(--light-bg);
   padding:5rem 4rem;
   display:flex;
   flex-direction:column;
   justify-content:center;
}

.contact-form h2{
   margin-bottom:2rem;
   font-size:2.6rem;
   color:var(--heading);
}

.contact-form label{
   display:block;
   font-size:1.4rem;
   font-weight:500;
   color:var(--heading);
   margin-bottom:.5rem;
}

.contact-form .form-group{
   display:flex;
   flex-wrap:wrap;
   gap:1.5rem;
}

.contact-form .form-group .form-field{
   flex:1 1 18rem;
}

.contact-form input,
.contact-form textarea{
   width:100%;
   margin-bottom:1.8rem;
   padding:1.2rem 1.4rem;
   font-size:1.5rem;
   background-color:var(--white);
   border:.1rem solid #ddd;
   border-radius:var(--radius);
   transition:border-color .2s ease, box-shadow .2s ease;
}

.contact-form textarea{
   resize:vertical;
   min-height:12rem;
}

.contact-form input:focus,
.contact-form textarea:focus{
   border-color:var(--blue);
   box-shadow:0 0 0 .3rem rgba(0,158,255,.2);
}

.contact-form button{
   width:100%;
   padding:1.3rem;
   background-color:var(--blue);
   color:var(--white);
   border-radius:var(--radius);
   cursor:pointer;
   font-size:1.6rem;
   font-weight:500;
   transition:background-color .2s ease;
}

.contact-form button:hover{
   background-color:var(--blue-dark);
}

@media (max-width:768px){

   .contact-info,
   .contact-form{
      padding:4rem 2rem;
   }

}