/* CONSTANTS DEFINITION ================================================================ */

:root {
    --primary1: #0D475D;
    --primary2: #40938C;
    --accent: #F2BB16;
    --base-dark: #39393A;
    --base-light: #E6E6E6;
}

@font-face { font-family: WorkSans; src: url("../assets/fonts/WorkSans-VariableFont_wght.ttf"); }
@font-face { font-family: Mobo; src: url("../assets/fonts/MOBO-ExtraLight.otf"); }
@font-face { font-family: Mobo; font-weight: 500; src: url("../assets/fonts/MOBO-Bold.otf"); }

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

* {
    text-align: left; 
    text-decoration: none; outline: none;
    box-sizing: border-box;
    margin: 0; padding: 0;
}
html, body { background-color: var(--base-dark); height: 100%; }

h1, h2, h3, h4 { font-family: WorkSans; font-weight: 500; line-height: normal; }
p { font-size: 12pt; }

/* NAV/FOOTER STYLES =================================================================== */

nav { display: flex; flex-direction: column; }
nav a {
    cursor: pointer;
    position: relative; margin-bottom: 10px;
    line-height: normal; font-family: WorkSans; font-size: 12pt; color: var(--base-light);
}

.nav-item { margin-bottom: 15px; }
.nav-item::before {
    transition: 300ms;
    content: ""; display: block;
    position: absolute;
    top: 50%; left: -15px;
    width: 4px; height: 100%;
    transform: translate(0, -50%) scaleY(0);
    background-color: var(--base-light);
}
.nav-item:hover::before { transform: translate(0, -50%); }

footer {
    background-color: var(--primary2);
    padding: 60px;
    display: flex; flex-direction: row;
    justify-content: space-between; gap: 40px;
}

/* GENERAL ============================================================================= */

#content {
    height: 100vh; width: 100vw;
    overflow-x: hidden;
    overflow-y: scroll;
}
.content-block { width: 100%; }
.content-block-content {
    opacity: 0;  
    transform: translateX(50%);
    transition: transform 1s, opacity 1s;
}

.center-flex { display: flex; justify-content: center; align-items: center; }

.page { display: flex; flex-direction: row; width: 100%; height: 100%; }
.page-with-img-bg {
    background-size: cover; background-position: center; background-repeat: no-repeat;
    padding: 60px;
}

.tiled-div {
    background-image: url("../assets/images/tile.svg");
    background-repeat: repeat; background-size: 80px 80px;
}

.shadow-box {
    background-color: var(--base-light);
    border: 2px solid var(--base-dark);
    box-shadow: 10px 10px 0px var(--base-dark);
}

/* TOP ================================================================================= */

#top-vert {
    width: 100%; display: none; 
    flex-direction: column; justify-content: space-between; align-items: stretch;
}
#top-hznt { width: 100%; display: flex; justify-content: space-between; align-items: stretch; }

.lang-wrap-outer {
    background-color: var(--base-light);
    padding: 5px; margin-bottom: 20px;
    display: flex; flex-direction: row; align-items: stretch;
}
.lang-wrap-outer a {
    flex: 1;
    padding: 5px; margin-bottom: 0;
    border: 2px solid var(--base-dark);
    transition: 300ms;
}
.lang-wrap-outer a p { text-align: center; vertical-align: middle; line-height: 18px; }

/* MISSION + APPROACH ================================================================== */

#mission-wrap { max-width: 500px; }
#approach-title-vert {
    transform: rotate(-90deg); transform-origin: left bottom; 
    position: absolute; bottom: 100px; left: 100px;
    color: var(--primary1); font-size: 24pt;
}
#approach-title-hznt { display: none; }

.card {
    display: flex; flex-direction: column;
    justify-content: center; align-items: center;
    width: 100%; max-width: 450px;
    margin-bottom: 40px; padding: 20px;
}
.card h3 { text-align: center; margin-bottom: 10px; font-size: 12pt; }
.card p { font-size: 10pt; }

.card-number {
    text-align: center; font-weight: bold;
    line-height: 35px; vertical-align: middle;
    background-color: var(--primary2); color: var(--base-light);
    border-radius: 50%; height: 35px; width: 35px; margin-bottom: 10px;
}

/* PROGRAMS ============================================================================ */

#program-wrap {
    display: flex; flex-direction: row; 
    align-items: stretch; justify-content: center; 
    width: 100%; gap: 40px;
}

.program-card { 
    flex: 1; max-width: 350px; 
    display: flex; flex-direction: column; align-items: stretch;
}
.program-card-header {
    background-color: var(--primary2); color: var(--primary1);
    padding: 20px 40px;
}
.program-card-inner {
    background-color: var(--primary1); color: var(--base-light);
    padding: 40px; flex-grow: 1;
    display: flex; flex-direction: column; align-items: stretch;
}

/* FORM ================================================================================== */

form input, form button, form textarea {
    padding: 10px;
    border: 2px solid var(--base-dark);
    color: var(--base-dark); background-color: var(--base-light);
}

.framed {
    display: block;
    transition: 300ms;
    border: 2px solid var(--base-dark);
    color: var(--base-dark); background-color: var(--base-light);
    position: relative; width: 160px; height: 45px;
    line-height: normal; text-align: center; 
}
.framed p {
    text-align: center;
    width: 100%;
    position: absolute; top: 50%; left: 0; z-index: 2;
    transform: translateY(-50%);
}

.sliding-bg {
    transition: 300ms;
    width: 100%; height: 100%;
    position: absolute; top: 0; left: 0;
    overflow-x: hidden;
}
.sliding-bg::before {
    transition: 300ms;
    content: ""; display: block;
    position: absolute; top: 0; left: 0; z-index: 0;
    width: 100%; height: 100%;
    background-color: var(--base-dark);
    transform: translateX(-100%);
}
form button[type="submit"] { 
    transition: 300ms;
    padding: 0; position: relative; width: 90px; height: 40px; 
    line-height: normal; text-align: center; 
}
form button[type="submit"]:hover, .framed:hover { color: var(--base-light); }
form button[type="submit"]:hover .sliding-bg::before, .framed:hover .sliding-bg::before { transform: none; }

#contact-success {
    background-color: var(--primary2);
    padding: 20px; margin: 20px 0;
    color: var(--base-light);
}
#contact-err {
    background-color: var(--accent);
    padding: 20px; margin: 20px 0;
    color: var(--base-dark);
}

/* MEDIA QUERY ========================================================================= */

#about-wrap { 
    display: flex; flex-direction: row; 
    align-items: stretch; justify-content: center; gap: 40px; 
}

@media only screen and (max-width: 1200px) {
    #mission-approach { flex-direction: column; }
    #mission-wrap { max-width: none; }

    #approach-title-hznt { display: block; }
    #approach-title-vert { display: none; }

    #program-wrap { flex-direction: column; align-items: center; }
    .program-card { max-width: 550px; }

    #about-wrap { flex-direction: column; }
    #profile-wrap { text-align: center; }
}

@media only screen and (max-width: 800px) {
    #top-vert { display: flex; }
    #top-hznt { display: none; }

    nav a { color: var(--base-dark); }
    footer { flex-direction: column; }
}