/* Specific Hex Colors to be used across project ( like a theme ) */
:root {
    --cora-orange: #fcac67;
    --cora-blue: #10fcbb;
    --cora-red: #db7093;
    --cora-green-correct: #28a745;
    --cora-red-incorrect: #dc3545;
    --cora-blackgrey: #303030;
    --cora-nav-height: 4.75em;
}

/* Our Fixed Screen Covering containers shared properties ( overridable by local files ) */
section.absolute-screen { 
    top: var(--cora-nav-height);
    width: 100%;
    height: calc(100vh - var(--cora-nav-height));
}
/*  Video BackGround
    Tutor Avatar Idle
*/
#tutorAvatar,
#assistantAvatar {
    z-index: 1;
    transition: filter .5s ease-in-out, top 1s ease-in-out, height 1s ease-in-out;
}
#tutorAvatar > video,
#assistantAvatar > video { 
    background-image: url('/imgs/avatarBG.webp');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    object-fit: cover;
    object-position: 50% 35%;
    height: inherit !important;
    z-index: inherit !important;
    transition: inherit !important;
}
/* 2nd video starts with opacity 0 */
#tutorNextVid { 
    opacity: 0;
}
/* global class to apply element's custom background css rule */
.background { 
    background: var(--custom-background);
}


html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}


@keyframes wobble {
    0% {
        transform: rotate(0deg);
    }

    15% {
        transform: rotate(-5deg);
    }

    30% {
        transform: rotate(5deg);
    }

    45% {
        transform: rotate(-4deg);
    }

    60% {
        transform: rotate(4deg);
    }

    75% {
        transform: rotate(-2deg);
    }

    100% {
        transform: rotate(0deg);
    }
}

.wobble {
    animation: wobble 0.8s ease-in-out;
}



/* =========================
   CORA NAVBAR
========================= */
header { 
    height: var(--cora-nav-height) !important;
}
.cora-navbar {
    padding-top: 0.35rem;
    padding-bottom: 0.35rem;
    background-color: #ffffff;
    height: inherit !important;
    z-index: 1001;
}

/* Logo sizing */
.cora-navbar-logo {
    height: 48px;
    width: auto;
    display: block;
}

/* Nav links */
.cora-navbar .nav-link {
    font-family: "Manrope", system-ui, sans-serif;
    font-weight: 500;
    font-size: 0.95rem;
    color: #1f2937; /* slate-ish */
    padding: 0.5rem 0.75rem;
}

    .cora-navbar .nav-link:hover {
        color: #0d6efd;
    }

.cora-navbar {
    background-color: rgba(255,255,255,0.9);
    backdrop-filter: blur(6px);
}


/* Mobile tweaks */
@media (max-width: 576px) {
    .cora-navbar {
        padding-top: 0.6rem;
        padding-bottom: 0.6rem;
    }

    .cora-navbar-logo {
        height: 42px;
    }
}