/* ==========================================================================
     Project:     Taos Charter School
     Date:        3/16/2026 - File created	
     Created by:  Third Wave Digital (www.thirdwavedigital.com)
========================================================================== */

:root {

    --white: #FFFFFF;
    --grey: #eeeeee;
    --body: #212121;
    --purple: #5F3C82;
    --blue: #0091C9;
    --light-blue: #589BBF;
    --dark-blue: #2B4B72; 
    --yellow: #F8C008;
    --light-yellow: #FFF9E5;
    --light-blue: #EAF7FC;
}


/* ==========================================================================
    Typograpy
========================================================================== */

body {font-family: "Josefin Sans", sans-serif; color: var(--body); background: var(--white);}
h1,h2,.h1,.h2,h3,.h3,h4,.h4,h5,.h5,h6,.h6{font-family: "Josefin Sans", sans-serif; margin-bottom: 2rem; font-weight: 700; letter-spacing: 1px; color: var(--dark-blue);}


/* ==========================================================================
     Main Layout
========================================================================== */ 


html {scroll-behavior: smooth;}

/* Skip */
.skip {position:absolute;top:-1000px;left:15px;width:auto;height:auto;text-align:center;overflow:hidden;transition:.25s;background:var(--blue); width:auto;height:auto;overflow:visible;padding:10px;color:var(--white);font-weight:600;font-size:.875rem;z-index:99;text-decoration:underline}
.skip:active,.skip:focus,.skip:hover{left:15px;top:15px;color: var(--white);}

/* Header */
.headermenu {border-bottom: 3px solid var(--yellow); background-color: var(--white);}
.headermenu .logo-wrapper {margin-right: 15px; flex-shrink: 0;}


.headermenu .mainmenu {gap: 15px; display:flex; align-items:center; line-height:1.2; padding: 0px;margin: 0px;position: relative; justify-content: center;font-size: 0.913rem;  font-weight: 700;}
.headermenu .mainmenu a {color: var(--dark-blue);}
.headermenu .mainmenu span {color: var(--blue);transition: transform 250ms ease;}
.headermenu .mainmenu > li {position: relative; display:flex; align-items: center; text-align:center;}
.headermenu .mainmenu > li:hover > a, .headermenu .mainmenu > li a:focus  {color: var(--blue); text-decoration: none; transition: all 250ms ease;}

.headermenu .dropdown {visibility: hidden; font-size: 1.063rem; box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px; opacity: 0; padding: 0px; transition: all 250ms ease; top:calc(100% + 20px);text-transform: none;text-align:left; background: var(--white); width: 200px; position: absolute; left: 0px; border-top: 3px solid var(--yellow); list-style: none;}
.headermenu .dropdown.active {visibility: visible;opacity: 1;top: 100%; z-index: 2;}
.headermenu .dropdown li {padding-right: 0px}
.headermenu .dropdown li:not(:last-child) {border-bottom: 1px solid var(--grey);}
.headermenu .dropdown a {padding: 15px; color: var(--blue); transition: all 250ms ease; font-size: .913rem; display: block;}
.headermenu .dropdown a:hover, .headermenu .dropdown a:focus {color: var(--blue); border:none; text-decoration: none; background-color: var(--light-blue);}

/* Footer */
footer h2 {color: var(--white); text-align: center;}
footer address {color: var(--white); margin-bottom: 0px;}
footer address p {color: var(--yellow); margin-bottom: 0px;}
footer .locations {font-size: 90%;}
footer .locations a {color: var(--white);}
footer .locations a:hover, footer .locations a:focus {color: var(--blue);}
footer .bg-dark-blue img{border: 2px solid var(--white);}
footer a.btn-link:focus {text-decoration: none;}
footer a.social-circle:hover {color: var(--white); text-decoration: none;}
footer .contact-info a {color: var(--blue);}
footer .po-location {font-family: "Source Sans 3", sans-serif;}
footer .copyright {font-family: "Source Sans 3", sans-serif; font-size: .875rem;}
footer .copyright a {color: var(--body);}
footer .copyright a:hover, footer .copyright a:focus {text-decoration: none;}
/* ==========================================================================
     Components
========================================================================== */ 

/* Images */
img {max-width: 100%; height: auto}
p:has(img:only-child) {margin: 0px}
.img-fit {object-fit: cover; object-position: center center; width: 100%; height: 100%;}
.img-bg {position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; object-fit:cover; z-index: -1; object-position: 100% 50%;}
.img-flip {  transform: scaleX(-1);}
.aspect-ratio-16-10 {aspect-ratio: 16 / 10; object-fit: cover;width: 100%; display:block;}
.aspect-ratio-16-9 {aspect-ratio: 16 / 9; object-fit: cover;width: 100%; display:block;}
.aspect-ratio-4-3 {aspect-ratio: 4 / 3; object-fit: cover;width: 100%; display:block;}
.aspect-ratio-1-1 {aspect-ratio: 1 / 1; object-fit: cover;}
section:has(.img-bg) {position: relative;z-index: 1;}

/* Backgrounds */
.bg-dark-blue {background-color: var(--dark-blue);}
.bg-light-blue {background-color: var(--light-blue);}
.bg-light-yellow {background-color: var(--light-yellow);}

/* Text */
.text-body {color: var(--body);}
.text-blue {color: var(--blue);}
.text-dark-blue {color: var(--dark-blue);}
.text-yellow {color: var(--yellow);}

/* Buttons */
.btn-link, .btn-blue{font-weight: 700; position: relative; display: inline-block; align-self: center; padding-left: 0px; padding-right: 0px; transition: all 250ms ease;}

.btn-blue {color: var(--white); background-color: var(--blue); text-transform: uppercase;}
.btn-blue:hover, .btn-blue:focus {color: var(--white); background-color: color-mix(in srgb, var(--blue) 80%, white 20%);}

.btn-link {color: var(--dark-blue);}
.btn-link:hover, .btn-link:focus {text-decoration: none;}
.btn-link::after {content: ""; position: absolute; bottom: 0px; left: 0; width: 100%; height: 2px; background-color: var(--dark-blue);}

.btn-scrollup {text-decoration: none; padding: 10px 25px; border-top-left-radius: 15px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px  ;border-top-right-radius: 15px; text-align: center; font-weight: 700; font-size: 1rem; background-color: var(--blue); color: var(--white);}
.btn-scrollup:focus, .btn-scrollup:hover {color: var(--white); background-color: var(--dark-blue);}

/* Social Circles */
.social-circle { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background-color: var(--blue); color: var(--white); text-decoration: none;}

/* Indicies */
.z-1 {z-index: 1;}
.z-2 {z-index: 2;}

/* Hero */
.hero {min-height: 950px;}
.hero img.img-bg {object-position: 100% 15%; transform: scaleX(-1);}
.hero::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: calc(100% + 1px); background: linear-gradient(to top, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 40%); pointer-events: none; z-index: -1;}

/* Form */
form {outline: 3px solid var(--white); background-color: rgba(43, 75, 114, 0.9);}
form h2 {text-transform: uppercase;}
form .form-label {font-size: 0.913rem;}
#contact_form{scroll-margin-top: 50px;}

/* Brushstroke Effect */
.brushstroke {position: relative;z-index: 1;}
.brushstroke::after {content: ""; position: absolute; top: 0; right: 0; left: 0; width: 100%; height: 100%; background: url('../img/brushstroke.svg') no-repeat center/contain; z-index: -1;}

/* Testimony */
.testimony-text {border-top: 2px solid var(--yellow); border-bottom: 2px solid var(--yellow); padding: 20px 0px; font-size: 22px;}

/* Slideshows */
.slick-track {display: flex !important;}
.slick-slide {height: inherit !important}
.slick-dots {position: relative; list-style:none; display: flex; justify-content: center;padding: 0px;}
.slick-dots li {margin: 0px 2px}
.slick-dots button {width: 10px;height: 10px;padding: 0;background: var(--blue);opacity: .35;border: none;border-radius: 50%;outline: none;transition: all 150ms ease;}
.slick-dots .slick-active button {opacity: 1;background: var(--dark-blue);outline: none;}
.slick-dots button:focus-visible {outline: 2px solid var(--yellow) !important;outline-offset: 2px;opacity: 1;}

.slick-prev, .slick-next {border:none; z-index:5; position: absolute; top: 35%; background:none; padding: 0px; opacity: 1; height: 30px; width: 30px}
	.slick-prev::after, .slick-next::after { content:"";width: 20px;height: 20px;display: block;border: 1px solid var(--blue);border-width: 0px 0px 2px 2px;}
	.slick-prev::after {transform: rotate(45deg);margin-left: 8px;}
	.slick-next::after {transform: rotate(223deg);margin-right: 8px}


/* ==========================================================================
     Media Queries
========================================================================== */

@media (min-width: 0px) {
    .headermenu .mainmenu {position:initial;}
    .headermenu .mainmenu li:nth-child(2) span {padding-top: 0px;}
    .headermenu .mainmenu li:last-child span {padding-top: 0px;}
    .headermenu .mainmenu a {padding-right: 15px;}
    .headermenu .mainmenu span {padding-top: 0px; position: initial ; top: 0px;}
    .headermenu .mainmenu li.list-inline-item:not(:last-child) {border-right: none; padding-right: 0px; margin-right: 0px;}

    /* Testimony */
    .testimony {margin-top: 0rem;}

    .slick-prev {left: 15px}
	.slick-next {right: 15px}
}

@media (min-width: 576px) {

}

@media (min-width: 768px) {
    .headermenu .mainmenu li:nth-child(2) span {padding-top: 18px;}
    .headermenu .mainmenu li:last-child span {padding-top: 18px;}

    /* Slick Arrows */ 
    .slick-prev, .slick-next {top: 25%; background:none;}
    .slick-prev {left: -15px}
	.slick-next {right: -15px}

}

@media (min-width: 864px) {
    .headermenu .mainmenu li:nth-child(2) span {padding-top: 0px;}
    .headermenu .mainmenu li:last-child span {padding-top: 0px;}


}

@media (min-width: 992px) {
    .headermenu .mainmenu {position: relative; font-size: 1.025rem;}
    .headermenu .mainmenu li:nth-child(2) span {padding-top: 10px;}
    .headermenu .mainmenu li:last-child span {padding-top: 10px;}
    .headermenu .mainmenu a {padding-right: 0px;}
    .headermenu .mainmenu span {padding-top: 10px; position: absolute; top: 30px;}
    .headermenu .mainmenu span:nth-of-type(2) {top: 30px;}
    .headermenu .mainmenu li.list-inline-item:not(:last-child) {border-right: 1px solid var(--yellow); padding-right: 15px;}

    /* Slick Arrows */ 
    .slick-prev, .slick-next {top: 35%; background:none;}

    /* Testimony */
    .testimony {margin-top: -4rem;}

}

@media (min-width: 1200px) {
    .headermenu .mainmenu li:nth-child(2) span {padding-top: 10px;}

    /* Testimony */
    .testimony {margin-top: -6rem;}

    /* Slick Arrows */ 
    .slick-prev, .slick-next {top: 40%; background:none;}

}

@media (prefers-reduced-motion: reduce) {
	* { animation-duration: 0.01ms !important;animation-iteration-count: 1 !important;transition-duration: 0.01ms !important;scroll-behavior: auto !important;transition: none !important}
}


/* Content block positioning */

.template-home section[id] .cms.cms-contentmenu:not(.text-content) { 
    position: absolute;
    &:nth-child(even){
        right:50%;
    }
}