/*
Theme Name: JA Canada Theme
Description: This is a custom child theme for Salient
Theme URI:   https://themeforest.net/item/salient-responsive-multipurpose-theme/4363266
Author: ThemeNectar
Author URI:  https://themeforest.net/user/themenectar
Template: salient
Version: 1.0
*/

@import url('./navigation.css');
@import url('./about.css');
@import url('./board.css');
@import url('./home.css');
@import url('./learn.css');
@import url('./locations.css');
@import url('./policy.css');

/* --------------------------------------------------------------------------------- */
/* --- Colours --------------------------------------------------------------------- */
/* --------------------------------------------------------------------------------- */

:root {
    --color-p-boundless-blue: #285f74;
    --color-p-resilient-turquoise: #00a0af;
    --color-p-gritty-green: #bbd153;
    --color-p-empowered-yellow: #e3e24f;
    --color-p-optimistic-ice: #c2edf0;
    --color-p-immersive-blue-black: #22404d;
    --color-s-off-white: #eef3f4;
    --color-s-pale-blue: #99d9df;
    --color-s-aqua: #00c0ca;
    --color-s-teal-blue: #008b9c;
    --color-s-cerulean: #28708b;
    --color-s-pale-yellow: #f3f2b3;
    --color-s-key-lime: #8fc440;
    --color-s-jade: #46b17b;
    --color-s-grass-green: #009424;
    --color-s-forest-green: #00763d;
    --color-accent1: var(--color-p-immersive-blue-black);
    --color-accent2: var(--color-p-boundless-blue);
    --color-theme1: var(--color-p-empowered-yellow);
    --color-theme2: var(--color-s-aqua);
    --color-theme3: var(--color-p-immersive-blue-black);
    --color-white: #fff;
    --gradient-theme1-from: var(--color-theme1);
    --gradient-theme1-to: var(--color-theme2);
    --gradient-theme2-from: var(--color-s-pale-blue);
    --gradient-theme2-to: var(--color-theme2);
}

/* --------------------------------------------------------------------------------- */
/* --- Typography ------------------------------------------------------------------ */
/* --------------------------------------------------------------------------------- */
h3 { font-size: 1.7rem; }
p { line-height: 1.4; }

body .clipped-heading {
    height: 0.7em;
    line-height: 0.85;
    margin-bottom: 0;
    /* overflow: hidden; */
}

/* --------------------------------------------------------------------------------- */
/* --- Global Sections ------------------------------------------------------------- */
/* --------------------------------------------------------------------------------- */
.main-content p a {
    text-decoration: underline;    
    text-underline-offset: 5px !important;
}

.cta-banner p { font-weight: 500; }
.cta-banner a {
    color: inherit;
    font-weight: 700;
}

.secondary-hero h1 {
    font-size: 0.6rem;
    line-height: 1;
    text-transform: uppercase;
}

.secondary-hero h2 {
    line-height: 0.9;
    padding-bottom: 1rem;
    text-transform: uppercase;
}

.secondary-hero.inner-block {
    background-color: var(--color-s-off-white);
    border-radius: 5px;
    position: absolute;
}

.secondary-hero.inner-block p {
    line-height: 1.4;
    width: 85%;
}

.secondary-hero.inner-block + div {
    padding-top: 12rem !important;
    padding-bottom: 1rem !important;
}

.secondary-hero.policy.inner-block + div { padding-top: 6rem !important; }

@media only screen and (max-width: 999px) {
    .hide-on-mobile { display: none!important; }
    .secondary-hero h2 br { display: none; }
    .secondary-hero.inner-block + div { padding-top: 18rem; }
}

/* --- Fancy Box ----------------------------------------------------------------- */
.jac-fancy .nectar-fancy-box .image-wrap {
    border-radius: 20px;
    overflow: hidden;
}

.jac-fancy .nectar-fancy-box .text {
    text-align: left;
}

.jac-fancy .nectar-fancy-box[data-style=image_above_text_underline] .text p { padding-bottom: 0.25rem; }

.jac-fancy .nectar-fancy-box .text h5 {
    font-size: 2.25rem;
    font-weight: 300;
    line-height: 1.2;
}

.jac-fancy .nectar-fancy-box .text h6 { font-weight: 500; }

/* Paragraph and arrow link styling */
.jac-fancy .nectar-fancy-box .text p {
    color: var(--color-p-immersive-blue-black);
}

.jac-fancy .nectar-fancy-box .text p:last-of-type::after {
    content: "";
    display: block;
    width: 50px;
    height: 17px;
    margin-top: 1em;
    background-image: url("data:image/svg+xml,%3Csvg width='50' height='17' viewBox='0 0 50 17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cline x1='0.00716769' y1='8.75542' x2='49.0072' y2='8.05364' stroke='%2322404d'/%3E%3Cpath d='M41.0143 16.3535L49.0143 8.35352L41.0143 0.353516' stroke='%2322404d'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
}
.jac-fancy .nectar-fancy-box[data-style=image_above_text_underline] .text {
    padding: 1.75rem .75rem;
}

/* --- Toggle Element ------------------------------------------------------------ */
div[data-style="minimal"] .toggle {
    padding-left: 0;
    padding-right: 20px;
    border-bottom-color: var(--color-p-immersive-blue-black);
    border-bottom-width: 1px;
}

.toggle > .toggle-title a {
    font-size: 1.3rem;
    padding-bottom: 1.5rem;
}

.toggle .inner-toggle-wrap p { font-size: unset!important; }

div[data-style="minimal"] .toggle.accent-color i {
    border-color: var(--color-p-immersive-blue-black);
    border-width: 1px;
}

/* Plus Icon Inside Toggle */
div[data-style="minimal"] .toggle.accent-color i::after {
    background-color: var(--color-p-immersive-blue-black);
    height: 15px;
    margin-left: -1px;
    width: 1px;
}

div[data-style="minimal"] .toggle.accent-color i::before {
    background-color: var(--color-p-immersive-blue-black);
    height: 1px;
    margin-top: -1px;
    width: 15px;
}