#kapcsolat{
    padding-bottom: 0;
    display: grid;
    grid-template-columns: 22.5% 55% 22.5%;
}



/*** CIM ***/
#kapcsolat .cim{
    grid-column: 1/4;
    grid-row: 1;

    margin: 0 0 var(--space-m) 0;
}
#kapcsolat .cim h2{
    margin: 0;
    font-size: calc(var(--font-m)*1.2);
    letter-spacing: var(--font-spacing-m);
    text-transform: uppercase;
}



/*** LINK CONTAINER ***/
#kapcsolat #link-container{
    grid-column: 1;
    grid-row: 2;
}
#kapcsolat ul{
    align-self: flex-start;
    margin-top: calc(var(--space-m)*0.8);

    display: flex;
    flex-direction: column;
    justify-content: left;
    gap: calc(var(--gap-m)*1.5);
}
#kapcsolat ul li{
    width: fit-content;
}
#kapcsolat ul li:hover a{
    color: var(--barna);
}



/*** FORM ***/
#kapcsolat form{
    grid-column: 2;
    grid-row: 2;

    padding-inline: var(--space-s);
    align-self: flex-start;

    display: grid;
    grid-template-columns: 50% 50%;
    gap: var(--gap-s);

    font-size: var(--font-xs);
}

/* Ikonok */
#kapcsolat .material-symbols-rounded{
    font-size: calc(var(--font-m)*0.8) !important;
}
#kapcsolat button .material-symbols-rounded{
    font-size: calc(var(--font-s)*1.1) !important;
    font-weight: var(--font-alap-bold);
}

/* "Irjon uzenetet" div */
#kapcsolat form #irjon{
    grid-row: 1;
    grid-column: 1/3;

    padding-bottom: var(--space-xxs);

    display: flex;
    justify-content: left;
    align-items: center;
    gap: var(--gap-s);

    border-bottom: var(--border-xxs) dashed var(--szurke);
    opacity: var(--opacity-s);
}

/* Input, textarea */
#kapcsolat form input{
    padding: var(--space-s);
    font-weight: var(--font-alap-regular);
}
#kapcsolat form textarea{
    padding: var(--space-s);
    font-weight: var(--font-alap-regular);
}
#kapcsolat form input::placeholder,#kapcsolat form textarea::placeholder{
    color: var(--kek)
}
#kapcsolat form input[name="name"]{grid-column: 1; grid-row: 2;}
#kapcsolat form input[name="email"]{grid-column: 2; grid-row: 2;}
#kapcsolat form #kapcsolatfelvevo-uzenet{grid-column: 1/3; grid-row: 3; resize: none;}

/* Kuldes button */
#kapcsolat form button{
    grid-column: 2;
    grid-row: 4;
    justify-self: end;
    align-self: flex-start;

    width: fit-content;
    height: calc(var(--space-m)*1.5);
    padding-inline: var(--space-s);
    
    display: flex;
    justify-content: center;
    align-items: center;
    
    background-color: var(--kek);
    color: var(--szurke);
    font-size: calc(var(--font-s)*1.2);
    
    border: var(--border-xs) solid var(--szurke);
    border-radius: 0;

    cursor: pointer;
}
#kapcsolat form button span.material-symbols-rounded{
    width: 0;
    opacity: 0;
    transform: translateX(-100%);
}
#kapcsolat form button:hover span.material-symbols-rounded{
    width: var(--space-s);
    opacity: 1;
    display: block;
    transform: translateX(30%);
}

/* Captcha */
#kapcsolat form #captcha-container{
}



/*** CIMER ***/
#kapcsolat #kapcsolat-logo{
    grid-column: 3;
    grid-row: 2;

    margin-top: calc(var(--space-m)*0.8);
    justify-self: right;
    align-self: baseline;
    width: 100%;
    max-width: 178.22px;
}



/*** SOCIAL MEDIA CONTAINER ***/ 
#kapcsolat .social-media-container{
    grid-column: 1/4;
    grid-row: 3;

    width: 100%;
    height: min-content;
    padding-block: 0 var(--space-m);
    align-self: flex-end;
    
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
    flex-wrap: wrap;

    border-bottom: var(--border-xxs) solid;
    opacity: 100%;
}
#kapcsolat .social-media-container li{
    background-color: var(--szurke);
}
#kapcsolat .social-media-container a{
    width: 48px;
    height: 48px;

    display: block;
    
    background-size: min(40px, 90%);
    filter: invert(1);
}
#kapcsolat .social-media-container li:hover a{
    filter: invert(91%) sepia(15%) saturate(154%) hue-rotate(142deg) brightness(97%) contrast(86%);
}





/* MOBILE */
@media all and (max-width: 1200px){
    #kapcsolat{
        grid-template-columns: 100%;
        grid-template-rows: auto;
    }
    #kapcsolat > *{ grid-column: 1 !important; }

    /* CIM */
    #kapcsolat .cim{
        grid-row: 1;
        width: fit-content;
        justify-self: center;
        margin: 0;
    }

    /* LINK CONTAINER */
    #kapcsolat #link-container{
        grid-row: 2;
        place-self: center;
        width: fit-content;
        margin-bottom: var(--space-m);
        
        justify-content: center;
        align-items: center;
    }

    /* FORM */
    #kapcsolat form{ grid-row: 3; }
    #kapcsolat #irjon, #kapcsolat input, #kapcsolat textarea{ grid-column: 1/3 !important; }
    #kapcsolat #irjon{grid-row: 1; }
    #kapcsolat form input[name="name"]{ grid-row: 2; }
    #kapcsolat form input[name="email"]{ grid-row: 3; }
    #kapcsolat form #kapcsolatfelvevo-uzenet{ grid-row: 4; }
    #kapcsolat form button{ grid-row: 5; }
    
    /* CIMER */
    #kapcsolat #kapcsolat-logo{
        grid-row: 4;
        width: 150px;
        height: auto;
        padding: var(--space-m) calc(50% - 75px) var(--space-s) calc(50% - 75px);
    }
    
    /* SOCIAL MEDIA CONTAINER */
    #kapcsolat .social-media-container{
        grid-row: 5;
        padding-block: var(--space-s);
    }
}
@media all and (max-width: 800px){
    #kapcsolat form{ grid-template-columns: 100%; }
    #kapcsolat form *{ grid-column: 1 !important; }
    #kapcsolat form #captcha-container{ 
        justify-self: center;
        transform: scale(0.77,0.77);
    }
    #kapcsolat form button{ 
        grid-row: 6; 
        justify-self: center;
    }
}
@media all and (max-width: 500px){
    #kapcsolat .social-media-container a{
        width: 40px;
        height: 40px;
    }
}