/*
Theme Name: WCC Theme
Theme URI: https://ellucian.com
Author: Moy Ibanez
Author URI: https:/⁄ellucian.com
Description: Built for testing purposes only.
Requires at least: 5.9
Tested up to: 6.4
Requires PHP: 5.6
Version: 1.6
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: WCC
*/

/*
 * Font smoothing.
 * This is a niche setting that will not be available via Global Styles.
 * https://github.com/WordPress/gutenberg/issues/35934
 */

 @import url('https://fonts.googleapis.com/css2?family=Fauna+One&family=Lato:wght@300&display=swap');

 *{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
 }

 :root {
    --primary: #046a38;
    --yellow: #fecb00;
    --blue: #003478;
    --body-font: 'Lato', sans-serif;
    --heading-font: 'Fauna One', serif;
 }

 header {
    display: inline-flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    background-color: var(--primary);
    color: white;
    border-bottom: 8px solid var(--yellow) !important;
 }

 header > div{
    width: 50%;
    padding: 25px;
}

#page-content {
    width: 90%;
    margin: auto;
}

#site-logo img {
    width: 300px;
    height: auto;

}

#search {
    width: 100%;
    display: flex;
    flex-direction: row;
}

#search-box {
    width: 100%;
    font-size: 14px;
    font-style: italic;
    padding: 10px;
}

#search-button {
    background-color: var(--blue);
    border: none;
    color: white;
    padding: 10px;
    cursor: pointer;
}

#menu-primary-menu {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    list-style-type: none;
    padding: 25px;
    font-family: var(--body-font);
}

#menu-primary-menu li {
    padding: 10px;
    list-style: "|";
    color: white;
}

#menu-primary-menu li:nth-child(1) {
    list-style: none;
}

#menu-primary-menu li a {
    color: white;
    text-decoration: none;
    font-weight: bold;
}

#menu-primary-menu li a:hover {
    text-decoration: underline;
}

#tabs-menu {
    display: flex !important;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

#tabs-menu .menu-tab {
    padding: 10px;
    color: white;
    font-family: var(--body-font);
}

#tabs-menu .menu-tab a {
    text-decoration: none;
    display: flex;
    flex-direction: column;
    border-left: 1px #CCCCCC solid;
    padding-left: 20px;
}

.login-tab {
    background-color: #EAEAEA;
}

.login-tab a {
    border: none !important;
    padding: 10 !important;
}

.menu-tab-content span:nth-child(1) {
    color: var(--primary) !important;
    font-size: 1.3rem;
    font-weight: bold;
    font-family: var(--heading-font);
}

.menu-tab-content span:nth-child(2) {
    color: black !important;
    font-size: 0.9rem;
    font-weight: bold;
    font-family: var(--body-font);
}



/*    DEFAULT BLOCKS    */


/*    BUTTONS    */

.wp-block-button {
    width: 100% !important;
    padding: 20px !important;
}

.wp-block-button__link,
.wp-element-button {
    border-radius: 0px !important;
    background-color: transparent;
    border: 1px solid var(--blue) !important;
    color: var(--blue) !important;
    text-transform: uppercase;
    padding: 10px !important;
    font-size: 0.9rem;
    width: 100% !important;
    transition: 0.3s
}

.wp-block-button__link:hover,
.wp-element-button:hover {
    background-color: var(--blue) !important;
    color: white !important;
    text-decoration: none;
    box-shadow: inset 100% 0 0 0 var(--blue);
}

/*  NOTIFICATIONS  */

#notifications {
    display: flex;
    flex-direction: column !important;
    align-items: flex-end;
    width: 100%;
}

.notification {
    font-family: var(--body-font);
    display: flex !important;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    background-color: var(--yellow);
    padding: 10px;
    margin-bottom: 5px;
    animation-name: show-notification;
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
}

.close-notification {
    color: rgba(0,0,0,0.5);
    border: none;
    padding: 10px;
    cursor: pointer;
    right: 0;
    width: 10px;
}

.hide-notification {
    animation: hide-notification;
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
}

.notification a {
    color: var(--blue);
    text-decoration: none;
    font-weight: bold;
    border-bottom: 1px solid var(--blue);
}


@keyframes show-notification {
    0% {
        display: none;
        height: 2px !important;
        transition: 0.25s;
        transform-origin: top;
        transform: scaleY(0);
    }
    100% {
        display: block;
        height: 100% !important;
        transition: 0.25s;
        transform-origin: top;
        transform: scaleY(1);
    }
}

@keyframes hide-notification {
    0% {
        display: block;
        height: 100% !important;
        transition: 0.25s;
        transform-origin: top;
        transform: scaleY(1);
    }
    100% {
        display: none;
        height: 2px !important;
        transition: 0.25s;
        transform-origin: top;
        transform: scaleY(0);
    }
}

/* DEFAULT BLOCKS */

/* BUTTONS */
.wp-block-button {
    width: 100% !important;
    padding: 20px !important;
}

.wp-block-button__link,
.wp-element-button {
    border-radius: 0px !important;
    background-color: transparent;
    border: 1px solid var(--blue) !important;
    color: var(--blue) !important;
    text-transform: uppercase;
    padding: 10px !important;
    font-size: 0.9rem;
    width: 100% !important;
    transition: 0.3s;
    animation-name: button-hover;
    animation-duration: 0.3s;
    animation-fill-mode: forwards;
}

.wp-block-button__link:hover,
.wp-element-button:hover {
    background-color: var(--blue) !important;
    color: white !important;
    text-decoration: none;
    box-shadow: inset 100% 0 0 0 var(--blue);
}

@keyframes button-hover {
    0% {
        box-shadow: inset 0% 0 0 0 var(--blue);
    }
    100% {
        box-shadow: inset 100% 0 0 0 var(--primary);
    }
}

/*  CALENDAR  */

.wp-calendar-table caption{
    color: var(--primary) !important;
    font-size: 1.3rem;
}
.wp-calendar-table thead tr th{
    background-color: var(--primary) !important;
    color: #EAEAEA;
}

.wp-calendar-table tbody tr td {
    font-family: var(--body-font);
}

.wp-calendar-table tbody tr td a {
    color: var(--primary) !important;
    font-weight: bold;
}