@layer fcac-design, constants, rdx, thememin, bootmin;

/* Constants */
@layer constants {
    @import url('/atoms.css');
    @import url('/button.css');
    html {

        /** Colors */
            --canada-blue: #284162;
            --cyan: #005B4F;
            --teal: #1E6F63;
            --teal-light: #3C8A7A;
            --teal-lighter: #4A8C7E;
            --teal-dark: #005B4F;
            --teal-darker: #1B544C;
            --teal-darkest: #0F3732;
            --black: #000000;
            --grey-darkest: #404040;
            --grey: #2F2F2F;
            --grey-light: rgb(128 124 124 / 96%);
            --grey-lighter: #F1F1F1;
            --green: #A2D893;
            --yellow: #E9C46A;
            --orange: #F4A261;
            --orange-dark: #b93615;
            --brown: #362205;
            --white: #FFFFFF;
        /** Gradients */--teal-gradient: linear-gradient(-128deg, rgba(30,111,99,1) 0%, rgba(15,55,50,1) 100%);
        /** Padding */
            --padding-96: 96px;
            --padding-48: 48px;
        }
}

/* Atomic */
.invert {
    filter: invert(1);
}

.align-start {
    align-self: start;
}
.d-contents {
    display: contents;
}
/** Text */
html {
    --font-family-Font-1: "Noto Sans", sans-serif;
}
.font-display {
    font-family: Lato;
    font-style: normal;
    font-weight: 700;
    &.xs {
        font-size: 24px;
        line-height: 32px; /* 133.333% */

    }
    &.sm {
        font-size: 30px;
        line-height: 38px;
    }
}

.font-semantic {
    font-family: var(--font-family-Font-1, "Noto Sans");
    font-style: normal;
    font-weight: 400;
    &.link {
        font-size: 20px;
        line-height: 1.65;
    }
}



/* RDX Headers */ 
.rdx-header {
    background: var(--teal);
    background: var(--teal-gradient);
    color: white;
    
    .container {
        padding-top: 96px;
        padding-bottom: 96px;
        min-height:500px;
        display:flex;
        flex-direction: column;
        justify-content: center;
        
        h1 span {
            font-size: 22px;
            font-weight:500;
            display: block;
            margin-bottom:15px;
        }

        div:has(+div) h1 {
            margin-bottom:24px;
        }

        .lead:has(+*) {
            color:var(--grey-lighter);
            margin-bottom:50px;
        }
    } 
}

.rdx-hero {
    padding-block: 43.47px;
    > .container {
        margin-inline: auto;
        > .row {
            display: flex;
            flex-flow: row wrap;
            align-items: center;
            min-height: 570px;
        }
    }
    a.fcac-link {
        margin-block: 36.5px 50px;
        display:block;
    }
    h1 {
        display: flex;
        flex-flow: column nowrap;
        gap: 20px;
        margin: unset;
        padding: unset;
        font-size: 60px;
        word-break: break-word;
        margin-block: 64px 36.5px;
        .shrink {
            font-size: 30px;
            font-weight: 500;
            font-family: 'Noto Sans';
        }
    }

}

/* RDX Headers - Mobile */
@media (max-width: 767px) {
    .rdx-header {
        .container {
            padding-top: 35px;
            padding-bottom: 35px;

            div:has(+div) h1 {
                margin-bottom: 16px;
            } 
        }
    }
} 

/* RDX Footer */


.rdx-footer {
    background: var(--grey);
    color: white;
    .lead {
        font-size: 18px;
        font-weight: 600;
    }
}

/* RDX Accessibility Feedback */
.rdx-accessibility {
    background: #53525c;
    color: white;
    padding: 30px 0;
    a {
        color: white;
    }
    strong {
        font-size: 26px;
    }
}

/* NFLS Disclaimer */
.nfls-disclaimer {
    background: var(--teal-darker);
    color: white;
    padding: 30px 0 0 0;

    + .rdx-accessibility {
        margin-top:0;
        padding-top: 0;
    }
}

/* NFLS Disclaimer - Mobile */
@media (max-width: 767px) {
    .nfls-disclaimer  {
        padding-top: 15px;
    }
    .rdx-accessibility {
        padding: 15px 0;
    }
}


/* NFLS Search Bar - Common */
    .search-bar {
        display: grid;
        background: var(--Base-Shades-White);
        border-radius: 22px;
        border: 2px solid var(--Neutral-600, #656565);
        grid-template-columns: auto;
        align-content: stretch;
        justify-items: stretch;
        padding: 25px 46px;
        &:has(input[type="search"]:is(:hover, :focus)) {
            border-width: 2px;
            border: 1px solid var(--RDX-Blue-400, #5997D7);
        }

        .search-field {
            border: none;
            background: none;
            outline: unset;
            padding: 0;
            min-width: 0;
            grid-area: 1 / 1;
            word-break: break-all;
            word-wrap: break-word;
            overflow-wrap: break-word;
            pointer-events: all;
        }
		span {
			display: grid;
			grid-template: auto / auto;
			margin: 0;
			padding: 0;
			align-content: stretch;
			align-items: stretch;
			justify-items: stretch;
			p {
				color: var(--grey-light);
				grid-area: 1 / 1;
				margin: 0;
				visibility: hidden;
				appearance: none;
				overflow-x: auto;
				text-wrap: nowrap;
			}
			&:has(.search-field:placeholder-shown + p) p {
					visibility: visible;
					appearance: auto;
					margin-block: auto;
					pointer-events: none;
			}
		}
    }


/* End NFLS Search Bar */

/* RDX Tabs */ 
.rdx-tabs  {
    padding: 40px 0;
    border-top: 1px solid var(--grey-lighter);
    border-bottom: 1px solid var(--grey-lighter);

    .rdx-tab {
        flex: 1;
        list-style: none;
        color: black;
        margin: 40px;
        font-weight: 600;
        cursor:pointer;
    
        a, div {
            display: flex;
            color: black;
            text-decoration: none;
            align-items: center;
            padding-bottom: 5px;
            cursor:pointer;
            border-bottom: 3px solid white;
    
            img {
                margin-right:40px;
                width: 40px;
                height: 40px;
                flex: 0 0 40px;
            }
    
            &.active {
                color: var(--cyan);
                border-bottom-color: var(--green);
                img {
                    filter: invert(26%) sepia(14%) saturate(4008%) hue-rotate(132deg) brightness(97%) contrast(101%);
                }
            }
        
            span {
                display: block;
            }
        }
    }
} 

/* RDX Tabs - Mobile */
@media (max-width: 767px) {
    .rdx-tabs {
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
        .rdx-tab {
            margin:0;
            a, div {
                flex-direction: column;
                text-align: center;
                img {
                    margin:0;
                }
            }
        }
    }
}

/* RDX Panels */ 
.rdx-panel {
    border: 3px solid var(--grey-lighter);
    border-radius: 20px;
	.toggle-header {
            display: flex;
            align-items: center;
            font-weight: 600;
            cursor: pointer;
            background: none;
            border: none;
            justify-content: space-evenly;
            width: 100%;
            margin: 0;
            padding: 45px;
            img {
                margin-right: 20px;
                width:40px;
                height:40px;
            }

            &:hover, &:focus, &:has(span.rotated) {
                color:var(--teal-dark);

                img {
                    filter: brightness(0) saturate(100%) invert(22%) sepia(84%) saturate(391%) hue-rotate(122deg) brightness(88%) contrast(90%);
                }
            }

            .glyphicon {
                margin-left:auto;
                -webkit-transition: all 0.3s ease-in;
                -moz-transition: all 0.3s ease-in;
                -o-transition: all 0.3s ease-in;
                transition: all 0.3s ease-in;
                &.rotated {
                    -webkit-transform: rotate(180deg);
                    -moz-transform: rotate(180deg);
                    -o-transform: rotate(180deg);
                    transform: rotate(180deg);
                }
            }

            &+section .panel-header img {
                margin-left:5px;
                margin-right:25px;
                width:30px;
                height:30px;
            }
        }
    section {
        margin:0 40px 40px 40px;
        padding: 40px 5px 5px 5px;
        border-top: 1px solid var(--grey-lighter);
        &:first-child {
            border-top: none;
        }
        a {
            text-decoration: unset;
            color:inherit;
        }
        .panel-header {
            display:block;
            display: flex; 
            align-items: center;
            margin: 0 0 30px 0;
            h3, h4 {
                margin: 0;
            }

            img {
                margin-right:20px;
                width:40px;
                height:40px;
            }
            
            &:has(img) + .panel-content {
                margin-left:60px;
            }

            &.sm-img img {
                margin-right:35px;
                width:20px;
                height:20px;
            }
        }
        .panel-content {
            margin-bottom: 70px;
        }
        a:hover, a:focus {
            color:var(--teal-dark);

            img {
                filter: brightness(0) saturate(100%) invert(22%) sepia(84%) saturate(391%) hue-rotate(122deg) brightness(88%) contrast(90%);
            }
        }

        .link a, a.link {
            word-wrap: break-word;
            text-decoration: underline;
        }
        

        .data-header {
            display: flex;
            align-items: center;
            margin:0;
            img {
                margin-right:10px;
                width: 20px;
                height: 20px;
            }
            span {
                display: block;
            }
            +ul {
                margin-left:25px;
                margin-bottom: 50px;
            }
        }
    }
    &:has(+.rdx-panel) {
        margin-bottom: 80px;
    }
}

@media (max-width: 767px) {
    .rdx-panel.rdx-panel .panel-content.panel-content {
        margin-left:0px;
    }
}


/* Image Cards */

.img-card-left {
    box-shadow: 0px 3px 10px 3px rgba(0, 0, 0, 0.1);
    border-radius: 20px;
    margin-bottom: 50px;
    display: flex;
    background: var(--white);
    color: var(--black);
    flex-flow: row wrap;
    align-content: stretch;
    overflow: hidden;
	.card-body {
		background: var(--white);
		flex: 3 1 min-content;
		position: relative;
		/* width: auto; */
	}
	
    h4 {
        margin: 0 0 30px 0;
    }
    
    .chevron {
        position:absolute;
        .glyphicon {
            font-size: 25px;
        }
    }
  
    .card-image {
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center center;
        flex: 1 0;
    }
  
}
  
@media (max-width: 767px) {
    .img-card-left {
        .card-body {
		    padding: 12.5px 30px 12.5px 8px;
        }
		.chevron {
			bottom: 2.5px;
			right: 2.5px;
			padding: 6.25px 6.25px 6.25px 8.95px;
		}
    }
	.img-card-top {
	
		.chevron {
            bottom: 10px;
            right: 10px;
			
		}
		.card-image {
			min-height: 60px;
		}
	}
}
@media (min-width: 767px) {
	.img-card-left {
	    .card-body {
	      padding: 60px 20px;
	    }
	}
	:is(.img-card-top, .img-card-left) {
		.chevron {
            bottom:27px;
            right:32px;
		}
		.card-image {
			min-height: 85px;
		}
	}
}

.img-card-top {
    box-shadow: 0px 3px 10px 3px rgba(0, 0, 0, 0.1);
    margin-bottom: 50px;
    border-radius: 20px;
    position:relative;
    display:block;
    background: white;
    color: black;
    min-height: inherit;
    h4 {
        margin: 0 0 20px 0;
    }

    .chevron {
        position:absolute;
        .glyphicon {
            font-size: 25px;
        }
    }

    .card-image {
        border-radius: 20px 20px 0 0;
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center center;
    }

    .card-body {
        justify-content: center;
        align-self: center;
        word-break: auto-phrase;
        padding: 30px;
    } 
}

.data-card {
    background: var(--green);
    color: black;
    padding: 40px 20px;
    margin:0 30px 30px 30px;
    justify-items: center;
    align-items: center;
    border-radius: 20px;
    display:flex;
    box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.15);

    img {
        flex: 1;
        width: 60px;
        height: 60px;
        margin-right:10px;
    }

    .data {
        flex:2;
        display:flex;
        flex-direction: column;
        justify-items: center;
        align-items: center;
        font-weight: 600;

        .h2 {
            margin: 0;
        }
    }
}

/* Buttons */
.btn-green {
    background: var(--green);
    color: black;
    font-weight: 600;
    border-radius: 30px;
    cursor: pointer;
    grid-template: auto auto / auto 1fr;
    font-family: 'Noto Sans';
    font-size: 20px;
    padding: 8px 20px;
}

.btn-cdp-primary {
    display: inline-flex;
    padding: 12px 18px;
    align-items: center;
    gap: 6px;
    border-radius: 8px;
    background: var(--Neutral-900, #3D3D3D);
    color: var(--white, #FFF);
    border: 0;
    box-sizing: content-box;
    &:hover {
        background: var(--Neutral-800, #464646);
    }
    &:focus, &:active {
        background: var(--Neutral-600, #656565);
        outline: 2px solid var(--Neutral-200, #DCDCDC);
        outline-offset: -2px;
    }
    &:disabled {
        background: var(--Neutral-100, #EFEFEF);
        pointer-events: none;
        color: var(--Neutral-300, #BDBDBD);
    }
}

.btn-blue {
    display: flex;
    padding: 12px 50px;
    justify-content: center;
    align-items: center;
    gap: 6px;
    border-radius: 360px;
    background: var(--rdx-blue-600-main, #2665AF);
    color: var(--white, #FFF);

    /* Text/xl (Default)/semi-bold */
    font-family: "Noto Sans";
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: 30px; /* 150% */
}

.cdp-button:is(:not([hierarchy]), [hierarchy="primary"])[data-color="lightgreen"] {
    background-color: var(--RDX-Green-200, #C2E4B2);
    color: var(--Base-Shades-Black, #000);
    border: 1px solid var(--RDX-Green-200, #C2E4B2);
    &:hover, &:active {
        background-color: var(--RDX-Green-50, #f1f9ec);
    }
    &:focus {
        border: 2px solid var(--RDX-Green-400, #78bd5e);
    }
}

/* Lists */
.list-img {
    list-style-type: none;
    li {
        margin-top:15px;
        display: flex;
        align-items: center;
        
        img {
            margin-right:20px;
            width: 20px;
            height: 20px;
        }
        span {
            display: block;
        }
    }
    
}

/* Accent Block */
.accent-block {
    background: var(--teal);
	color: white;
    padding: var(--spacing-6xl) 0;
}

/* Default Content Margins */
.content-section {
	padding-block: var(--spacing-9xl);
}

.related-section {
    margin-top:70px;
}

/** Text Truncation */
.trunc {
    overflow: hidden;
    -webkit-box-orient: vertical;
    display: -webkit-box;
}
.trunc-5 {
    line-clamp: 5;
    -webkit-line-clamp: 5;
}
.trunc-4 {
    line-clamp: 4;
    -webkit-line-clamp: 4;
}
.trunc-3 {
    line-clamp: 3;
    -webkit-line-clamp: 3;
}
.trunc-2 {
    line-clamp: 2;
    -webkit-line-clamp: 2;
}
.trunc-1 {
    line-clamp: 1;
    -webkit-line-clamp: 1;
}
/* disable ckeditor font modification */
.ck-content {
	font-family: unset !important;
    font-size: unset !important;
    display: contents;
	:is(p,span)[style] {
		display: contents;
	}
    ol, ul {
        padding-left: 1ch;
    }
}
.ck-content-mod {
    :is(p,span,div)[style] {
        display: contents;
    }
}


/** Font */

h1 .h1 {
    line-height: 1.25;
}

h2:not(.h1,.h3,.h3,.h4,.h5,.h6), .h2 {
    font-size: 2.4em;
}

h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
    line-height: 1.4;
}

/** end text modifiacations */
.hero-banner {
    display: flex;
    flex-flow: column nowrap;
    h1.hero-title {
        align-self: center;
    }
    img.hero-image {
		align-self: center;
		}
    .hero-text {
        align-self: center;
        > * {
			max-width: 65ch;
        }
    }
}
.radius-5 {
    border-radius: 5px;
}
hr {
    border: none;
    background-color: rgb(128 124 124 / 96%);
    height: 1px;
}

.search-preview-card {
    flex: 1;
    display: grid;
    justify-items: center;
    align-items: end;
    text-align: center;
    grid-template: 1fr 1fr min-content / minmax(auto, 146px) minmax(max-content, auto);
    padding: 47px 20px;
	gap: 8px;
    color: var(--Base-Shades-White, #fff);
    border-radius: 22px;
    border: var(--Stroke-Border-Width, 1px) solid var(--Neutral-200, #DCDCDC);
    filter: var(--shadow-xl);
    &:nth-of-type(3n + 1) {
        background-color: #2D6E51;
    }
    &:nth-of-type(3n + 2) {
        background-color: #419165;
    }
    &:nth-of-type(3n) {
        background-color: #40A551;
    }
    > img {
		aspect-ratio: 1/1;
		grid-column: 1;
		grid-row: 1 / span 3;
        justify-self: stretch;
        align-self: center;
        filter: invert(1);
        max-width: 146px;
	}
	> *:not(img) {
		grid-column: 2;
		margin: 0;
	}
    .chevron {
        position: absolute;
        bottom: 10px;
        right: 16px;
    }
}
@media (max-width: 992px) {
    .search-preview-card > img {
        max-width: 105px;
        margin-left: 15%;
    }
}


@media (max-width: 375px) {
	.container-sized {
		width: auto;
	}
}
@media (min-width: 375px)
{
	.container-sized {
		max-width: 343px;
	}
}
@media (min-width: 580px) {
	.container-sized {
		max-width: 570px;
	}
}

@media (min-width: 768px) {
    .container-sized {
		max-width: 750px;
	}
}
@media (min-width: 992px) {
    .container-sized {
        max-width: 970px;
	}
}
@media (min-width: 1200px) {
    .container-sized {
        max-width: 1170px;
    }
}