/*
  Created for Summer 101 landing page, May 2026
*/
@import url('https://fonts.googleapis.com/css2?family=Spicy+Rice&family=Sriracha&display=swap');
:root {
	--sooo-header-color:#FFFBEB;
	--sooo-groove-red:#FFA6A7;
	--sooo-groove-green:#BFD8A5;
	--sooo-groove-orange:#FEBB7F;
	--sooo-groove-pink:#F5C5E9;
	--sooo-groove-blue:#7FA5DD;
	--sooo-groove-tan:#E9E3D9;
	/*--site-secondary-seaGreen:#288369;
    --site-secondary-aquamarine:#7CD5B7;*/
}
.spicy-rice {
	font-family: "Spicy Rice", serif;
	font-weight: 400;
	font-style: normal;
}
.sriracha-regular {
	font-family: "Sriracha", cursive;
	font-weight: 400;
	font-style: normal;
}

/* Start header styles ======================= */
.jump-box {border: 0;}
.container .jump-box .header a {
    background:var(--sooo-header-color);
    border-bottom:none;
	padding-left: 0.8rem;
}
.jump-box .content {padding: 0;}
.jump-box .content ol li:before {content:"";padding:0;}
.jump-box .content ol li {
    letter-spacing:normal;
    background-color: var(--site-secondary-aquamarine);
    border-top-right-radius: 9999px;
    border-bottom-right-radius: 9999px;
    margin-bottom:2vmin;
}
.jump-box .content a {
	font-size:1.3rem;
    padding:0.5em 1em;
    flex: 1;
	border-top-right-radius: 9999px;
    border-bottom-right-radius: 9999px;
	background-size:14%;
	background-repeat:no-repeat;
	background-position:110% 200%;
}
.jump-box .content a:hover, .jump-box .content a:focus {
	background-image:url('https://pwsblobprd.schools.nyc/prd-pws/images/default-source/external-comms/summer101-crab2.svg');
	background-position:right center;
	color:var(--pws-black);
	background-color:rgba(var(--pws-white-rgb),0.8);
}
.jump-box .content ol .icon {display:none;}
@media(min-width: 768px) { /* desktop */
    .jump-box .content ol {columns:3;}
}
/* End header styles */

/* Miscellaneous tweaks ====================== */
.main-column {margin-top:0;}
.w-md-50 {width:50vw;}
@media(max-width: 768px) {
	.w-md-50 {width:auto;}
}
.d-md-flex.sideBlogColumn > div {flex: 1;} /* temp. decide later */

/* Headings and text adjustments ============= */
main h1, main h2 {
    font-family: "Spicy Rice",serif;
    font-weight: 400;
    font-style: normal;
}
main h1 {
    color:var(--site-secondary-seaGreen);
    font-size:7.2vh;
}
main h2 {
    color:var(--site-logo-darkBlue);
    font-size:2.5rem;
}

/* Background, color, and wave styles ======== */
.bg-header {background-color: var(--sooo-header-color);}
.bg-groove-red {background-color: var(--sooo-groove-red);}
.bg-groove-green {background-color: var(--sooo-groove-green);}
.bg-groove-orange {background-color: var(--sooo-groove-orange);}
.bg-groove-pink {background-color: var(--sooo-groove-pink);}
.bg-groove-blue {background-color: var(--sooo-groove-blue);}
.bg-groove-tan {background-color: var(--sooo-groove-tan);}
.text-groove-red {color: var(--sooo-groove-red);}
.text-groove-green {color: var(--sooo-groove-green);}
.text-groove-orange {color: var(--sooo-groove-orange);}
.text-groove-pink {color: var(--sooo-groove-pink);}
.text-groove-blue {color: var(--sooo-groove-blue);}
.text-groove-tan {color: var(--sooo-groove-tan);}
.rte-content.wave svg {
	position:relative;
	top:1px;
}
@media(max-width: 768px) {
    .rte-content.wave {
		display: inline-block;
		width: 200%;
		height: auto;
	}
	.rte-content.wave svg {
		left:-30%;
	}
}

/* Summer Reading adjustments ================ */
.d-lg-flex .py-3 h3 {
    color: var(--site-primary-darkGray);
    font-size:1.5rem;
    letter-spacing:normal;
    font-weight:600;
}
@media(max-width: 1024px) { /* mobile */
    .d-lg-flex .py-3 {background:none;}
    .d-lg-flex .py-3 a {font-size:1.3rem;}
}


/* Tabs and panes styles ===================== */
ul.nav.nav-pills {
    list-style:none;
    padding:0;
    margin:0;
}
.nav-pills .nav-item button {
	font-weight:600;
	text-decoration: underline;
    text-underline-offset: 0.3em;
	background:none;
	background-color:rgba(255, 255, 255, 0.7);
    padding:0.6rem 1rem;
    color:var(--site-logo-darkBlue);
    border-color:var(--site-logo-darkBlue);
    border:solid 1px;
	border-radius: var(--pws-border-radius-pill);
}
.nav-pills .nav-item button:hover {
    color:var(--pws-white);
    background:var(--site-logo-darkBlue);
	text-decoration:none;
}
.nav-pills .nav-item .active {
	color:var(--site-primary-darkGray);
    background-color:rgba(255,255,255,0.9);
	text-decoration:none;
}
.tab-content>.tab-pane {
	color:var(--site-logo-darkBlue);
    background-color:rgba(255,255,255,0.9);
    border:1px solid currentColor;
	padding:1rem 1.5rem;
}
/* Transition animation */
.tab-pane.active {
    animation: slide-up 0.3s ease-out;
}
@keyframes slide-up {
    0% { opacity: 0; transform: translateY(10px); }
    100% { opacity: 1; transform: translateY(0); }
}
/* Mobile adjustments */
@media(max-width: 576px) {
    li.nav-item {
        display: inline-block;
        margin:0 0.4rem 0.5rem 0;
    }
}
/* Tab content styles ======================== */
ul.p-0 li {
    background-color:var(--sooo-groove-red);
    padding:0.313rem;
    color:var(--pws-black);
    margin-bottom:0.625rem;
}

/* Background images styles ================== */
.bg-image {background-repeat:no-repeat;}
.bg-sun {
	background-image:url('https://pwsblobprd.schools.nyc/prd-pws/images/default-source/external-comms/summer101-sun1.png');
	background-position:-8%;
	background-size:27vw;
}
.bg-sunglasses {
	background-image:url('https://pwsblobprd.schools.nyc/prd-pws/images/default-source/external-comms/summer101-rising1.png');
	background-position:100% -6%;
	background-size:23%;
}
.bg-sports {
	background-image:url('https://pwsblobprd.schools.nyc/prd-pws/images/default-source/external-comms/summer101-sport1.png');
	background-position:82% 60%;
}
.bg-reading {
	background-image:url('https://pwsblobprd.schools.nyc/prd-pws/images/default-source/external-comms/summer101-reading1.png');
	background-position-x:-7%;
	background-size:30%;
}
.bg-cooling {
	background-image:url('https://pwsblobprd.schools.nyc/prd-pws/images/default-source/external-comms/summer101-cooling1.png');
	background-position-x:100%;
}
@media(max-width: 1440px) { /* smaller screen pc */
	.bg-cooling {
        background-size:30%;
    }
}
@media(max-width: 1024px) { /* tablets */
	.col-md-4 .rte-content.stopWrapping.bg-header {background: none;} /* Remove bg from title */
	.container .jump-box .header a {background:none;}
	.bg-sun {
		background-position:right -40%;
		background-size:40%;
	}
	.bg-sunglasses > div.row {margin-top:11rem;}
    .bg-sunglasses {
        background-position:47% 94%;
		background-size:16rem;
    }
	.bg-sports {
		background-position:85% bottom;
		background-size:30%;
	}
	.bg-reading {
		background-position:-12% top;
	}
	.bg-cooling {
		background-size:14rem;
		background-position:right top;
		padding-top:5rem;
	}
}
@media(max-width: 940px) { /* columns */
	.px-6.p-lg-0 img { /* meals */
		margin:0 auto;
		width:auto;
		height:200px;
	}
}
@media(max-width: 768px) { /* mobile */
	.bg-sun {
		background-position:center 40%;
		background-size:24%;
	}
	.container .jump-box .header a {background:none;}
	.bg-sunglasses > div.row {margin-top:13rem;}
	.bg-sports {
		background-size:15rem;
	}
	.bg-reading {
		background-size:15rem;
		background-position:center top;
		padding-top:13rem;
	}
	.bg-cooling {
		background-size:12rem;
		background-position:80% top;
		padding-top:10rem;
	}
	.row.mt-md-0 {margin-top:9rem;}
	.mb-0.mx-auto.w-25 {width:50vw !important;}
}

/* Blog post widget adjustments ==============
List settings > List template > Blog post list title only with image
Use limit 3
More options > CSS classes > 'd-md-flex gap-2 my-2' (adjust gap and margin as needed)
Single item settings > Selected existing page > needed to fix the URLs for blog posts
*/
.d-md-flex.sideBlogColumn img.sideBlogColumnImage {
    aspect-ratio: 40 / 21;
    object-fit: cover;
}
.d-md-flex.sideBlogColumn .blogTitleAndSummary {
    margin-top: 0.325rem;
}
.d-md-flex.sideBlogColumn .blogTitleAndSummary h3.more {
    font-size: 1.6rem;
    letter-spacing: normal;
}
.d-md-flex.sideBlogColumn .blogTitleAndSummary h3.more::after {
    content:"";
    margin:0;
    border:none;
}