/*

Key points:

  * Where important, IMA styles are distinguished by their 'ima-' prefix. This
    is to identify things that provide a particular look and feel that's tied
    to the overall design of the site.

  * !important is used very sparingly. Only when used to explicitly apply a
    style or to squash something insipid (like cheesy animation).

*******************/
/* General Styles */
/******************/

/* Margin added to dodge the nav */
header {
    margin-top: 86px;
}

@media (max-width: 440px) {
    header {
        margin-top: 66px;
    }
}

/*
These 'hidden' classes were removed in Bootstrap 5 in favour of SASS mixins but
since we're not using SASS, we still need them. Breakpoints are as follows:

    lg (lg): 1200px
    medium (md): 992px
    small (sm): 768px
    extra small (xs): 576px
    extra extra small (xxs): 440px
    extra extra extra small (xxxs): 380px
*/
@media (min-width: 768px) {
    .hidden-md-up {
        display: none !important;
    }
}

@media (max-width: 767px) {
    .hidden-md-down {
        display: none !important;
    }
}

@media (min-width: 576px) {
    .hidden-sm-up {
        display: none !important;
    }
}

@media (max-width: 575px) {
    .hidden-sm-down {
        display: none !important;
    }
}

@media (min-width: 380px) {
    .hidden-xxxs-up {
        display: none !important;
    }
}

@media (max-width: 379px) {
    .hidden-xxxs-down {
        display: none !important;
    }
}

/* A column breakpoint for tiny displays */
@media (max-width: 380px) {
    .col-xxxs-12 {
        flex: 0 0 auto;
        width: 100%;
    }
}

/* Extremely useful for images. */
.object-fit-none {
    object-fit: none;
}

.object-fit-cover {
    object-fit: cover;
}

.object-fit-contain {
    object-fit: contain;
}

/*****************/
/* Basic Theming */
/*****************/

.btn.btn-primary {
    background-color: #c93807;
    border-color: transparent;
}

.btn.btn-primary:hover {
    background-color: #393d7b;
    border-color: transparent;
}

.ima-card-link {
    position: relative;
    transition: all 0.3s ease-in-out;
    text-decoration: none;
    color: #212529;
}

.ima-card-link .card-body {
    display: flex;
    justify-content: center;
    flex-direction: column;
}

.ima-card-link:hover {
    transform: translate(0px, -5px);
    box-shadow: 0 5px 15px rgb(0 0 0 / 30%);
    border-color: #393d7b;
}

/* Based on the 'services' cards */
.card.ima-card-link h3.card-title {
    font-size: 16px;
}

.card.ima-card-link h2.card-title {
    font-size: 20px;
    font-weight: bold;
}

/* Based on the 'map' cards */
.card h3.card-title {
    font-size: 20px;
}

.card .card-header h3 {
    font-size: 20px;
    margin-bottom: 0px;
}

/**************/
/* Typography */
/**************/

body {
    font-family: 'Helvetica Neue', Helvetica, 'Open Sans', Arial, sans-serif;
}

h1, h2 {
    font-weight: 700;
}

h1 {
    font-size: 45px;
}

h2 {
    margin-bottom: 0.5em;
}

/*************/
/* Recaptcha */
/*************/

/**********/
/* Themes */
/**********/

/* More specific appearance is handled by two themes: light and dark. We apply
either theme where required, to achieve a consistent look and feel across the
entire site. These override the Basic theme established above. */

.ima-light-theme {
    color: #212529;
}

.ima-light-theme.opaque {
    background-color: white;
}

.ima-dark-theme {
    color: white;
}

.ima-dark-theme.opaque {
    background-color: #393d7b;
}

.ima-dark-theme .ima-icon {
    filter: invert(99%) sepia(4%) saturate(0%) hue-rotate(191deg) brightness(106%) contrast(101%);
}

.primary-colour-filter {
    filter: invert(23%) sepia(41%) saturate(881%) hue-rotate(197deg) brightness(92%) contrast(91%)
}

.ima-dark-theme h2, .ima-dark-theme h4, .ima-dark-theme a {
    color: white;
}

.ima-dark-theme a:hover {
    color: #3b3f7f;
    transition: all 0.5s ease;
}

.ima-dark-theme .btn.btn-primary:hover {
    background-color: #aaabc4;
    border-color: transparent;
}

.ima-dark-theme hr {
    /* Bootstrap is looking for the 'size' attribute, but it's not supported in
    HTML 5. horizontal rules are used sparingly so we just force this in. */
    height: 2px;
    background-color: #aaabc4;
}

/* The bright theme only exists for that that contact bar towards the bottom. */
.ima-bright-theme {
    background-color: #c93807;
}

.ima-bright-theme .btn.btn-primary:hover {
    background-color: #c93807;
    color: #3b3f7f;
}

.ima-bright-theme .ima-icon {
    filter: invert(99%) sepia(4%) saturate(0%) hue-rotate(191deg) brightness(106%) contrast(101%);
}

/*********/
/* Icons */
/*********/

.ima-icon {
    height: 30px;
    width: 30px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.ima-icon.big {
    height: 40px;
    width: 40px;
}

.btn.ima-icon {
    margin: 0px 6px;
    padding: 0px;
    border-radius: 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.ima-icon.inline {
    display: inline-block;
    vertical-align: middle;
    height: 24px;
    width: 24px;
}

h6 .ima-icon.inline {
    height: 19px;
    width: 19px;
}

h2 .ima-icon.inline {
    height: 38px;
    width: 38px;
}

.btn-lg .ima-icon.inline {
    height: 38px;
    width: 38px;
}

@media (max-width: 576px) {

    /* Based on those social icons */
    .btn.ima-icon {
        margin: 0px 3px;
    }
    
    .ima-icon.big {
        height: 25px;
        width: 25px;
    }

    /* Below is a bit hacked together for the social icons, so they look nice
    with text down to lower resolutions.. */
    .btn-lg .ima-icon.inline {
        height: 23px;
        width: 23px;
    }

    .btn-lg {
        font-size: 14px;
    }
}

.ima-icon.call-icon {
    background-image: url("images/call-icon.svg");
}

.ima-icon.email-icon {
    background-image: url("images/email-icon.svg");
}

.ima-icon.map-icon {
    background-image: url("images/map-icon.svg");
}

.ima-icon.link-icon {
    background-image: url("images/link-icon.svg");
}

.ima-icon.recaptcha-icon {
    background-image: url("images/recaptcha-icon.svg");
}

/**************/
/* Nav Styles */
/**************/

/* Remove animation cheese */
.collapsing {
    transition: none !important;
}

nav.fixed-top {
    box-shadow: 0px 0px 40px 15px rgba(0,0,0,0.56)
}

.navbar-brand {
    height: 70px;
}

#logo {
    width: auto;
    height: 100%;
}

@media (max-width: 440px) {
    .navbar-brand {
        height: 50px;
    }
}

#ima-fixed-width-nav-container {
    align-items: flex-end;
    max-width: 1200px;
}

ul.dropdown-on-hover li.nav-item > a.nav-link {
    color: #1e2125;
}

#ima-lessons-dropdown {
    color: #000000E6;
}

.navbar-toggler.ima-custom-toggler .navbar-toggler-icon {
    background-image: url("images/menu-icon.svg");
}

.navbar-toggler.ima-custom-toggler[aria-expanded="true"] .navbar-toggler-icon{
    background-image: url("images/close-icon.svg");
}

.navbar-toggler.ima-custom-toggler {
    border: none;
    border-radius: 200px;
    padding: 0px;
    margin-left: 12px;
}

.collapsed-nav-controls {
    display: flex;
    flex-direction: row;
    align-items: center;
}

#ima-fixed-width-nav-container a.nav-link {
    padding: 6px 6px;
}

/* At medium resolution and lower, use more compact typograhpy so that we can
keep the full menu visible for longer. As per discussions, the full menu must
be visible on an iPad in potrait mode. */
@media (max-width: 992px) {
    #ima-fixed-width-nav-container a.nav-link {
        font-size: 13px;
    }

    #ima-fixed-width-nav-container a.dropdown-item {
        font-size: 13px;
    }

    #ima-fixed-width-nav-container .navbar-btn {
        font-size: 13px;
    }
}

@media (min-width: 768px) {

    /* Remove those silly rounded corners and tighten up margins. */
    ul.dropdown-on-hover li.dropdown > ul.dropdown-menu {
        margin: 0;
        border-radius: 0px;
    }
}

@media (max-width: 767px) {
    ul.dropdown-on-hover {
        margin-bottom: 0px;
        margin-top: 10px;
    }

    /* Undo left and right padding coming down from the parent to give a 'full
    width' appearance. Then, pad items to give a clean look for top-level and
    nested items. */
    ul.dropdown-on-hover li{
        margin: 0px -12px;
    }

    ul.dropdown-on-hover .dropdown-menu a.dropdown-item {
        padding: 6px 0px 6px 62px;
    }

    ul.dropdown-on-hover li.nav-item > a.nav-link {
        padding: 6px 0px 6px 42px;
    }

    /* On hover effects for all! */
    ul.dropdown-on-hover li.nav-item > a.nav-link:hover {
        background-color: #e9ecef;
    }

    /* Always show dropdowns expanded, inline. */
    ul.dropdown-on-hover li.dropdown > .dropdown-menu {
        display: block;
        position: relative;
        border-width: 0;
        padding: 0;
        margin: 0;
    }

    /* Remove the dropdown symbol, pointers and on-hover effects. Note that we
    can't remove the dropdown from the tab order with CSS. */
    ul.dropdown-on-hover li.dropdown > .dropdown-toggle {
        background-color: #bdc0c4;
        pointer-events: none;
        cursor: default;
    }

    ul.dropdown-on-hover li.dropdown > .dropdown-toggle:hover {
        background-color: #bdc0c4;
    }

    ul.dropdown-on-hover li.dropdown > .dropdown-toggle::after {
        border: unset;
    }

    /* When menu items are hidden, use larger fonts to improve readability. */
    #ima-fixed-width-nav-container a.nav-link {
        font-size: 16px;
        padding: 6px 0px 6px 27px;
        color: #1e2125;
    }

    #ima-fixed-width-nav-container a.dropdown-item {
        font-size: 16px;
    }

    #ima-fixed-width-nav-container .navbar-btn {
        font-size: 16px;
    }
}

/*****************/
/* Footer Styles */
/*****************/

footer {
    background-image: linear-gradient(180deg,#3b3f7f 0%,rgb(8, 8, 8) 100%);
    padding-bottom: 20px;
    padding: 0px 12px 20px 12px;
    color: white;
    font-size: 13px;
    line-height: 22px;
}

footer .container-fluid {
    max-width: 1200px;
}

.ima-footer-menu {
    margin-bottom: 0px;
    padding-left: 16px;
}

.ima-footer-menu li {
    margin-bottom: 6px;
    list-style: none;
}

.ima-footer-menu li a {
    font-size: 16px;
    line-height: 27px;
    text-decoration: none;
}

.ima-footer-icon-item {
    display: flex;
    flex-direction: row;
    margin-bottom: 6px;
    font-size: 14px;
    line-height: 28px;
}

.ima-footer-col {
    justify-content: flex-end;
    display: flex;
    flex-direction: column;
}

.ima-footer-icon-item .ima-icon {
    flex-shrink: 0;
}

.ima-footer-icon-item .caption {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* A few tweaks for low resolutions */
@media (max-width: 440px) {
    .ima-footer-icon-item {
        font-size: 13px;
    }

    .ima-footer-menu li a {
        font-size: 13px;
    }
}

@media (max-width: 380px) {
    .ima-footer-icon-item {
        font-size: 16px;
    }

    .ima-footer-menu li a {
        font-size: 16px;
    }
}


/* The copywrite menu at the very bottom of the page */
ul.ima-copywrite {
    margin: auto;
}

ul.ima-copywrite > li {
    display: inline-block;
}

ul.ima-copywrite > li::after {
    margin: .5rem;
    content: '|';
    color:  #aaabc4;
}

ul.ima-copywrite > li:last-child::after {
    margin: unset;
    content: unset;
}

/*************************/
/* Simple Section Styles */
/*************************/

section {
    padding: 60px 0px;
    display: flex;
}

section .container {
    max-width: 1200px;
    margin: auto;
}

.ima-section-padding {
    padding: 60px 12px;
}

/********************/
/* Jumbotron Styles */
/********************/

section.ima-jumbotron {
    padding-top: 0px;
    min-height: 550px;
}

section.ima-jumbotron.compact {
    min-height: 250px;
}

section.ima-jumbotron .cover {
    position: absolute;
    min-height: 550px;
    background-position: 50%;
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    z-index: 1;
}

section.ima-jumbotron.compact .cover{
    min-height: 280px;
}

section.ima-jumbotron .container {
    padding: 0px 12px;
    z-index: 2;
}

/* Height + top margin equals the jumbotron's minimum height */
section.ima-jumbotron .cover-text {
    height: 450px;
    margin-top: 100px;
    margin-bottom: 60px;
    overflow: hidden;
}

section.ima-jumbotron.compact .cover-text {
    height: 160px;
    margin-top: 60px;
    margin-bottom: 60px;
    overflow: hidden;
}

section.ima-jumbotron .cover-text p {
    font-size: 25px;
    line-height: 30px;
}

section.ima-jumbotron .cover-text.ima-dark-theme {
    background: none;
}

@media (max-width: 767px) {

    section.ima-jumbotron .cover-text h1 {
        font-size: 30px;
    }

    section.ima-jumbotron {
        min-height: 270px;
    }

    section.ima-jumbotron .cover {
        min-height: 270px;
    }

    section.ima-jumbotron .cover-text {
        height: 220px;
        margin-top: 50px;
    }
}

/**************************/
/* First-free Form Styles */
/**************************/

section.ima-jumbotron div.ima-first-free-form {
    margin-top: 60px;
    box-shadow: rgba(94, 89, 87, 0.56) 0px 12px 32px 0px;
    background: rgb(255, 255, 255);
}

@media (max-width: 767px) {
    section.ima-jumbotron div.ima-first-free-form {
        margin-top: 30px;
    }
}

/* First free styles are split so it can be used outside of the jumbotron. */
div.ima-first-free-form {
    position: relative;
    padding: 24px;
    border: 1px solid #3b3f7f;
}

/* Used on the contact page, where the form is embedded. */
div.ima-first-free-form.embedded {
    position: relative;
    padding: 0px;
    border: none;
}

/*************/
/* ReCAPTCHA */
/*************/

/* ReCAPTCHA is hidden. As per https://developers.google.com/recaptcha/docs/faq,
we must include the required text */ 

.grecaptcha-badge {
    visibility: hidden;
    position:absolute;
    z-index: -1;
}

/**********************/
/* Testimonial styles */
/**********************/

div.ima-testimonial {
    padding: 24px;
}

p.ima-testimonial-quote {
    font-style: italic;
    padding-left: 20px;
    padding-right: 20px;
}

p.ima-testimonial-quote::before {
    position: absolute;
    padding: 20px;
    font-size: 36px;
    top: 0px;
    left: 0px;
    height: 100%;
    content: '“';
    color: #393d7b;
}

p.ima-testimonial-quote::after {
    position: absolute;
    padding: 20px;
    font-size: 36px;
    top: 0px;
    right: 0px;
    height: 100%;
    content: '”';
    text-align: right;
    color: #393d7b;
}

p.ima-testimonial-author {
    font-weight: bold;
    padding-left: 20px;
    padding-right: 20px;
    margin: 0px;
}

p.ima-testimonial-author-meta {
    margin: 0px;
    padding-left: 20px;
    padding-right: 20px;
    margin: 0px;
}

/************************/
/* Shadow Effect Styles */
/************************/

.ima-shadow-parent {
    z-index: 0;
}

.ima-shadow {
    position:relative;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 20px rgba(0, 0, 0, 0.1) inset;
}

.ima-shadow::before, .ima-shadow::after{
    position:absolute;
    content:"";
    bottom:12px;left:15px;top:80%;
    width:45%;
    background: black;
    z-index:-1;
    box-shadow: 0 20px 15px black;
    transform: rotate(-6deg);
}

.ima-shadow::after{
    transform: rotate(6deg);
    right: 15px;left: auto;
}

/***********************************/
/* A card adverising an IMA mentor */
/***********************************/

.ima-mentor-card {
    position: relative;
    transition: all 0.3s ease-in-out;
    text-decoration: none;
    color: #212529;
    overflow: hidden;
}

.ima-mentor-card .card-body {
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
}

.ima-mentor-card .blockquote {
    font-size: 16px;
    font-style: italic;
}

.ima-mentor-card .blockquote .quote-source {
    font-style: normal;
}

.ima-mentor-card:hover {
    transform: translate(0px, -5px);
    box-shadow: 0 5px 15px rgb(0 0 0 / 30%);
    border-color: #393d7b;
}