/* BASE CSS STYLES FOR ENTIRE PROJECT.

TABLE OF CONTENTS:
- General
    - Colors
    - Typography
    - Buttons

- Top Navbar
- Bottom Navbar
- Footer

search "todo" for todos
*/


/* GENERAL */

/* Rem base of 10.
Instead of doing math to figure out what rem is to px, now 16px = 1.6rem. 32px = 3.2rem. Easy peasy.  */

.root, html{
    font-size: 64.5% !important;
}


#content {
    min-height: 100vh;
    padding-bottom: 7rem;
    /* padding-top: 1rem; */
    padding-top: 0.1rem;  /* todo: come back to this. Does something weird when you take it off completely. */
    background-color: var(--secondary-bg);
}

@media only screen and (min-width: 768px) {
    /* #content{
        padding-top:2rem;
    } */
}


a {
    text-decoration: none;
    color: inherit;
}

.hidden {
    display: none;
}

.show {
    display: block;
}

.hr{
    border-bottom: 1px solid var(--medium-grey);
}

.vl{
    border-left: 2px solid var(--medium-grey);
    margin: 0 8px 0 5px;
}

/* todo: container is in multiple html files - bring it all here.
Right now I'm going to use this spelling of container so that the other containers don't clash. Will change later.
Note that what the containers are vs what they should be is wrong, so if I bring the
existing container code here, it'll break in random places (ex. the splash page).*/
.cont-ainer {
    max-width: 160rem;
    margin: 0 auto;
}

svg path {
    fill: var(--primary);
}

/* make images responsive
todo: delete all of the "responsive-img" classes added to every single img element*/
img {
    width: 100%;
}

/* COLORS */
:root {
    /* general default */
    --primary-bg: #fff;
    --secondary-bg: #f5f5f7;
    --dark-text: #131313;
    --light-text: #F5F5F7;
    --dark-grey: #bbb;
    --medium-grey: #d9d9d9;
    --success: #6CCA4F;
    --error: #EA3538;
    --box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;

    /* perks specific - admins will eventually be able to set their own branding colours */
    --primary: #420294;
    --secondary: #131313;
    --cta: #EE4266;
    /* there was a lot of random colours. I changed all of them to --highlight for now, until I get to redesigning those areas. */
    --highlight: #FAC92C;

    --event: #BDB4FF;
    --quiz: #49D8C2;
    --survey: #6BB8FF;
}

/* TYPOGRAPHY */
:root {
    --header-font: todo;
    --body-font: todo;
}

* {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* todo: color should be one of the text colors */
h1,
h2,
h3,
h4,
h5,
h6{
    color: var(--dark-text);
    line-height: 1.3; /*best for accessibility*/
    text-transform: capitalize;
}

h1{
    font-size: 2.4rem;
;   font-size: clamp(2.4rem, 1.9rem + 1.5vw, 4.8rem);/* min size, font growth, max size */
    margin: 2rem 0 1rem;
}

h2{
    font-size: 2.8rem;
    font-size: clamp(2.8rem, 2.4 + 0.39vw, 3.2rem);
    margin: 0;
}

h3{
    font-size: 2rem;
    font-size: clamp(2rem, 1.8rem + 0.3130vw, 2.4rem);
    margin: 0;
}

h4{
    font-size: 1.6rem;
    font-size: clamp(1.6rem, 1.5rem + 0.1559vw, 1.8rem);
    margin: 0;
}


p, input, label span {
    color: var(--dark-text);
    line-height: 1.5; /*best for accessibility*/
    margin: 0;
    font-size: 1.6rem;
    font-size: clamp(1.6rem, 1.5rem + 0.1559vw, 1.8rem);
}

td, th{
    color: var(--dark-text);
    font-size: 1.4rem;
    font-size: clamp(1.4rem, 1.36rem + 0.12vw, 1.6rem);
}


.bold, strong {
    font-weight: bold;
}

.highlight-text{
    color: var(--primary);
}

/* BUTTONS
Right now buttons are a free for all. Bring it all in here.*/

/* Small (mobile buttons) */
.button {
    width: 100%;
    display: block;
    border-radius: 1.6rem;
    text-align: center;
    padding: 1rem 1.6rem;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    transition: 0.3s;
    border: none;
    font-size: 1.6rem;
    font-size: clamp(1.6rem, 1.5rem + 0.1559vw, 1.8rem);
}

/* medium (ipad buttons) */
@media only screen and (min-width: 768px) {
    .button{
        padding: 1.2rem 1.6rem;
    }
}

.btns-container{
    display:flex;
    align-items: center;
    justify-content: space-around;
    gap: 2rem;
}

.btn-right{
    display:flex;
    justify-content: flex-end;
}

.btn-primary {
    background-color: var(--primary);
    color: var(--light-text);
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-primary svg{
    height: 1.6rem;
    margin-left: 2rem;
}

.btn-primary svg path {
    fill: var(--light-text);
}

.btn-secondary {
    background-color: var(--dark-text);
    color: var(--light-text);
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-filter{
    background-color: var(--dark-text);
    color: var(--light-text);
    display:flex;
    width:8rem;
    justify-content: center;
    cursor:pointer;
    margin-bottom: 4rem;
    padding:0.5rem;
    border-radius: 1.4rem;
    align-items: center;
}

.btn-filter svg{
    height: 2.5rem;
}

.btn-filter svg path{
    fill: var(--light-text);
}

.btn-filter span{
    display:none;
}

.button.logout{
    margin:4rem auto 2rem;
    width: 16rem;
}

@media only screen and (min-width: 768px) {
    .btn-filter{
        width: 10rem;
    }

    .btn-filter svg{
        margin-right:1rem;
    }

    .btn-filter span{
        display:block;
        font-size: 1.4rem;
    }
}

.btn-cancel{
    display:flex;
    align-items: center;
    justify-content: center;
    color:var(--primary);
    font-size: 1.4rem;
    min-width: 15rem;
    margin-bottom: 1rem;
  }

  .btn-cancel svg{
    height: 1.6rem;
    margin-right:1rem;
  }

  .no-results .btn-cancel{
    justify-content: initial;
  }

.button:hover {
    cursor: pointer;
}

.btn-primary:hover {
    transition: 0.3s;
    box-shadow: rgba(60, 24, 97, 0.7) 0px 6px 12px -2px, rgba(0, 0, 0, 0.5) 0px 3px 7px -3px;
}

.btn-secondary:hover {
    transition: 0.3s;
    box-shadow: rgba(17, 17, 17, 0.7) 0px 6px 12px -2px, rgba(0, 0, 0, 0.5) 0px 3px 7px -3px;
}

.btn-filter:hover{
    transition: 0.3s;
    box-shadow: rgba(0, 0, 0, 0.75) 0px 5px 15px;
}

.btn-cancel:hover {
    /* todo styling */
}

.btn-back:hover {}

.disabled{
    background-color: var(--medium-grey);
    box-shadow: none;
    color: var(--dark-grey);
}

.disabled svg path {
    fill: var(--dark-grey) !important;
}

.disabled:hover{
    box-shadow: none;
    cursor: default;
}


/* Form styling */
[type=checkbox]+span:not(.lever) {
    font-size: 1.6rem;
    line-height: 1.5;
}

fieldset{
    padding: 1rem;
}



/* TOP NAVBAR */
nav {
    height: 7.3rem;
    background-color: var(--primary-bg);
}

.logo {
    display: flex;
    align-items: center;
}

.navbar-logo {
    height: 100%;
    padding: 0.5rem;
}

nav .nav-wrapper {
    justify-content: space-between !important;
}

.nav-container {
    height: 7.3rem;
}

.nav-wrapper .exp-circle {
    height: 4rem !important;
    width: 4rem !important;
    padding: 1rem;
}

nav .header-points {
    color: var(--primary);
    display: flex;
    align-items: center;
    font-weight: bold;
}

nav.nav-top,
nav.hide-nav {
    color: var(--light-text);
    font-size: 1.4rem;
    line-height: 1.9rem;
}

nav i {
    height: auto;
}

nav .nav-wrapper {
    padding: 0 1rem;
}

nav .announcement-icon {
    display: flex;
    align-items: center;
}

.hide-nav {
    -webkit-box-shadow: none;
    box-shadow: none;
}

nav .brand-logo{
    height: 100%;
    padding: 1.2rem;
}

.nav-brand-logo{
    height: 5rem;
    object-fit: contain;
}



/* BOTTOM NAVBAR */

footer {
    position: fixed;
    bottom: 0%;
    width: 100%;
    left: 50%;
    transform: translate(-50%, 0);
    border-radius: 2rem 2rem 0 0;
    background-color: var(--primary-bg);
    box-shadow: var(--box-shadow);
    z-index: 1;
}

.footer-nav {
    display: flex;
    width: 100%;
    margin: 0 auto;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0rem 2rem;
}

.footer-nav li {
    width: 100%;
}

.footer-nav a {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: var(--primary);
    margin: 0 .5rem;
    padding: 0.6rem 0;
    transition: 0.3s;
    border-radius: 1.5rem;
    font-size: 1.4rem !important;
}

.footer-nav a:hover {
    transition: 0.3s;
    background-color: var(--secondary-bg);
    box-shadow: var(--box-shadow);
    cursor: pointer;
}

.footer-nav-active {
    background-color: var(--secondary-bg);
    padding: 2rem 0rem !important;
    transition: 0.3s;
}

.footer-nav-active p {
    display: none;
}

.footer-nav p {
    padding-top: .3rem;
    font-size: 1.4rem !important;
    color: var(--primary);
}

.footer-nav svg {
    height: 2rem;
}

/* check is screen has no hover capabilities (so it's a phone) */
@media (hover: none) {
    .footer-nav {
        padding: 0.5rem 0rem 2rem;
    }
}

@media only screen and (min-width: 768px) {
    .footer-nav{
        padding: 0.5rem 0;
    }

    .footer-nav a {
        padding: 1rem 0;
    }

    .footer-nav svg {
        height: 2.4rem;
    }

    .footer-nav-active {
        padding: 2.5rem 0rem !important;
    }
}

/***************************************************/


/* Poppers */

.driver-popover {
    background-color: var(--primary) !important;
    color: white !important;
}

.driver-popover-arrow {
    position: absolute;
    border: 5px solid var(--primary) !important;
    border-right-color: transparent !important;
    border-bottom-color: transparent !important;
    border-left-color: transparent !important;
}

.popper {
    background-color: var(--primary);
    padding: 1rem 1rem 1rem 1rem;
    font-size: 1.6rem;
    color: white;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
    border-radius: 0.4rem;
    z-index: 9999999;
    display: none;
}

.popper > p {
    color: white;
}

.popper [x-arrow] {
    position: absolute;
    width: 0rem;
    height: 0rem;
}

.popper[x-placement="bottom"] [x-arrow] {
    border-right: 1rem solid transparent;
    border-left: 1rem solid transparent;
    border-bottom: 1rem solid var(--primary);
}

.popper[x-placement="left"] [x-arrow] {
    border-top: 1rem solid transparent;
    border-left: 1rem solid var(--primary);
    border-bottom: 1rem solid transparent;
}

.popper[x-placement="top"] [x-arrow] {
    border-right: 1rem solid transparent;
    border-left: 1rem solid transparent;
    border-top: 1rem solid var(--primary);
}

.popper[x-placement="right"] [x-arrow] {
    border-top: 1rem solid transparent;
    border-right: 1rem solid var(--primary);
    border-bottom: 1rem solid transparent;
}

.popper[x-placement="bottom"] {
    margin-top: 0.9rem;
}

.popper[x-placement="left"] {
    margin-right: 0.9rem;
}

.popper[x-placement="top"] {
    margin-bottom: 0.9rem;
}

.popper[x-placement="right"] {
    margin-left: 0.9rem;
}

.popper[x-placement="bottom"] [x-arrow] {
    top: -0.9rem;
}

.popper[x-placement="left"] [x-arrow] {
    right: -0.9rem;
}

.popper[x-placement="top"] [x-arrow] {
    bottom: -0.9rem;
}

.popper[x-placement="right"] [x-arrow] {
    left: -0.9rem;
}

.popper span {
    font-size: 1.4rem;
    bottom: 1rem;
}

.fixed-btn-bottom {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 1
}

.purple-btn {
    color: var(--light-text);
    background-color: var(--primary);
    border-radius: 0.5rem;
    box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.25);
}

.purple-btn:hover,
.purple-btn:active,
.purple-btn:focus {
    background-color: rgba(47, 9, 96, 0.7);
}

.list-header {
    margin: 2rem 0 1rem 0;
}

.list-hr {
    border: none;
    width: 22%;
    background: rgba(0, 0, 0, 0.15);
    height: 0.3rem;
}

.darken-coming-soon img {
    filter: brightness(35%);
}

.darken-coming-soon:after {
    content: 'Coming Soon';
    color: white;
    font-size: 2rem;
    position: absolute;
    top: 50%;
    left: 50%;
    filter: brightness(100%);
    transform: translate(-50%, -50%);
}

.quizcolor {
    background-color: #ccc821;
}

.quizcolor.pending {
    background-color: #BBBA80;
}

.surveycolor {
    background-color: #FFAA98;
}

.surveycolor.pending {
    background-color: #EAC0C0;
}

.card-content .points {
    padding-left: 0.25rem;
}

.header .points {
    font-weight: bold;
    padding: 0.25rem 0 0 0.3rem;
}

.card-content .title {
    font-weight: bold;
    font-size: 1rem;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}

.cls-1{
    fill:#2f0960;
}

#demographics-submit-btn {
    background-color: var(--primary);
}

.draft-ribbon {
    position: absolute;
    right: 0;
    bottom: 0px;
    z-index: 1;
    overflow: hidden;
    width: 100px;
    height: 100%;
    text-align: right;
}

.draft-ribbon .draft-text {
    font-size: 12px;
    text-transform: uppercase;
    text-align: center;
    line-height: 16px;
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    width: 115px;
    display: block;
    background: #fad201;
    box-shadow: 0 0 10px 3px #dea731;
    position: absolute;
    bottom: 20px;
    right: -30px;
}

.draft-ribbon-event {
    position: absolute;
    right: 0;
    bottom: 0px;
    z-index: 1;
    overflow: hidden;
    width: 100px;
    height: 100%;
    text-align: right;
}

.draft-ribbon-event .draft-text-event {
    font-size: 12px;
    text-transform: uppercase;
    text-align: center;
    line-height: 16px;
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    width: 115px;
    display: block;
    background: #fad201;
    box-shadow: 0 0 10px 3px #dea731;
    position: absolute;
    bottom: 20px;
    right: -30px;
}