/*-- -------------------------- -->
<---        Core Styles         -->
<--- -------------------------- -*/

@media only screen and (min-width: 0px) {
	/* All elements in the library derive their variables and base styles from this central sheet, simplifying site-wide edits. For instance, if you want to modify how your h2's appear across the site, you just update it once in the global styles, and the changes apply everywhere. */
	:root {
		--navy: #0F2F5B;
		--brooklynBlue: #1A78BD;
		--silver: #969696;
		--lightGrey: #D9D9D9;
		--charcoal: #2C2C2C;
		--signingGold: #D4A843;
		--white: #ffffff;
		--headerColor: #0F2F5B;
		--bodyTextColor: #2C2C2C;

		/* 13px - 16px */
		--topperFontSize: clamp(0.8125rem, 1.6vw, 1rem);
		/* 31px - 49px */
		--headerFontSize: clamp(1.9375rem, 3.9vw, 3.0625rem);
		--bodyFontSize: 1rem;
		/* 60px - 100px top and bottom */
		--sectionPadding: clamp(2.5rem, 5vw, 4rem) 1rem;

		--headerFont: "georgia", Arial, sans-serif;
		--bodyFont: "Montserrat", Arial, sans-serif;
	}

	html,
	body {
		margin: 0;
		padding: 0;
		font-family: var(--bodyFont);
		font-size: 100%;
		transition: background-color 0.3s;
		color: var(--bodyTextColor);
	}

	html {
		overflow-x: clip;
	}

	body {
		overflow-x: hidden;
	}

	*,
	*:before,
	*:after {
		/* prevents padding from affecting height and width */
		box-sizing: border-box;
		margin: 0;
		padding: 0;
	}

	/* CS Typography */
	.cs-topper {
		font-size: var(--topperFontSize);
		line-height: 1.2em;
		text-transform: uppercase;
		text-align: inherit;
		letter-spacing: 0.1em;
		font-weight: 700;
		color: var(--signingGold);
		margin-bottom: 0.25rem;
		display: block;
	}

	.cs-title {
		font-size: var(--headerFontSize);
		font-weight: 700;
		line-height: 1.2em;
		text-align: inherit;
		max-width: 43.75rem;
		margin: 0 0 1rem 0;
		color: var(--headerColor);
		position: relative;
		text-transform: capitalize;
	}

	.cs-text {
		font-size: var(--bodyFontSize);
		line-height: 1.5em;
		text-align: inherit;
		width: 100%;
		max-width: 40.625rem;
		margin: 0;
		color: var(--bodyTextColor);
	}
}


/*-- -------------------------- -->
<---   Components + Utilities   -->
<--- -------------------------- -*/

@media only screen and (min-width: 0px) {

	/* Skip Nav */
	.skip {
		z-index: -1111111;
		position: absolute;
		top: 0;
		left: 0;
		opacity: 0;
	}

	/* Solid Button */
	.cs-button-solid {
		z-index: 1;
		position: relative;
		display: inline-block;
		width: auto;
		padding: 0.875rem 2rem;
		text-decoration: none;
		text-transform: capitalize;
		font-family: var(--headerFont);
		font-size: 1rem;
		font-weight: 700;
		letter-spacing: 0.1em;
		line-height: 1;
		white-space: nowrap;
		text-align: center;
		border-radius: 6.25rem;
		border: 1.5px solid var(--brooklynBlue);
		background-color: var(--brooklynBlue);
		color: var(--white);
		overflow: hidden;
		box-shadow: 0 2px 18px rgba(0, 0, 0, 0.15);
		transition: all 0.22s ease;
	}

	/* Shimmer layer */
	.cs-button-solid::after {
		content: "";
		position: absolute;
		inset: 0;
		background: linear-gradient(
			90deg,
			transparent 0%,
			rgba(255, 255, 255, 0.25) 50%,
			transparent 100%
		);
		background-size: 200% 100%;
		opacity: 0;
		transition: opacity 0.3s ease;
		animation: cs-btn-shimmer 1.8s ease infinite;
	}

	.cs-button-solid:hover {
		background-color: var(--navy);
		border-color: var(--navy);
		color: var(--white);
		box-shadow: 0 4px 22px rgba(0, 0, 0, 0.2);
	}

	.cs-button-solid:hover::after {
		opacity: 1;
	}

	/* Outline Button */
	.cs-button-outline {
		z-index: 1;
		position: relative;
		display: inline-block;
		width: auto;
		padding: 0.875rem 2rem;
		text-decoration: none;
		text-transform: capitalize;
		font-family: var(--headerFont);
		font-size: 1rem;
		font-weight: 700;
		letter-spacing: 0.1em;
		line-height: 1;
		white-space: nowrap;
		text-align: center;
		border-radius: 6.25rem;
		border: 1.5px solid var(--white);
		background: rgba(255, 255, 255, 0.1);
		color: var(--white);
		backdrop-filter: blur(8px);
		-webkit-backdrop-filter: blur(8px);
		transition: all 0.22s ease;
	}

	.cs-button-outline:hover {
		background: rgba(255, 255, 255, 0.22);
		border-color: var(--white);
		color: var(--white);
	}

	/* Ghost Button */
	.cs-button-ghost {
		z-index: 1;
		position: relative;
		display: inline-block;
		width: auto;
		padding: 0.875rem 2rem;
		text-decoration: none;
		text-transform: capitalize;
		font-family: var(--headerFont);
		font-size: 1rem;
		font-weight: 700;
		letter-spacing: 0.1em;
		line-height: 1;
		white-space: nowrap;
		text-align: center;
		border-radius: 6.25rem;
		border: 1.5px solid rgba(255, 255, 255, 0.35);
		background: rgba(255, 255, 255, 0.08);
		color: rgba(255, 255, 255, 0.7);
		backdrop-filter: blur(8px);
		-webkit-backdrop-filter: blur(8px);
		transition: all 0.22s ease;
	}

	.cs-button-ghost:hover {
		background: rgba(255, 255, 255, 0.18);
		border-color: rgba(255, 255, 255, 0.7);
		color: var(--white);
	}

	/* Button Keyframes */
	@keyframes cs-btn-shimmer {
		0%   { background-position: -200% 0; }
		100% { background-position:  200% 0; }
	}

	/* Utilities */
	.cs-color {
		color: var(--primary);
	}

	.cs-bold {
		font-weight: 700;
	}

	.cs-hide-on-mobile {
		display: none !important;
	}

	.cs-dark,
	.dark {
		display: none !important;
	}
}

/* Desktop Utilities */
@media only screen and (min-width: 64rem) {
	.cs-hide-on-mobile {
		display: block !important;
	}

	.cs-hide-on-desktop {
		display: none !important;
	}
}


/*-- -------------------------- -->
<---     Base Element Styles    -->
<--- -------------------------- -*/

@media only screen and (min-width: 0px) {

	/* Headings */
	h1,
	h2,
	h3,
	h4,
	h5,
	h6 {
		font-family: var(--headerFont);
		line-height: 1.2em;
		color: var(--headerColor);
	}

	/* Body Copy */
	p,
	li,
	a {
		font-size: 1rem;
		line-height: 1.5em;
		text-decoration: none;
	}

	p,
	li {
		color: var(--bodyTextColor);
	}

	p a,
	li a {
		color: var(--primary);
	}

	a:hover,
	button:hover {
		cursor: pointer;
	}
}


/*-- -------------------------- -->
<---           Fonts            -->
<--- -------------------------- -*/

@media only screen and (min-width: 0px) {

	/* Montserrat Regular */
	@font-face {
		font-style: normal;
		font-family: "Montserrat";
		font-weight: 400;
		font-display: swap;
		src: local(""),
			url("../fonts/Montserrat-Regular.woff2") format("woff2"),
			url("../fonts/Montserrat-Regular.woff") format("woff");
	}

	/* Georgia */
	@font-face {
		font-style: normal;
		font-family: "georgia";
		font-weight: 700;
		font-display: swap;
		src: local(""),
			url("../fonts/georgia.woff2") format("woff2"),
			url("../fonts/georgia.woff") format("woff");
	}
}

/*-- -------------------------- -->
<---      Side Nav Wrapper       -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0px) {
  #cs-sidebar-wrapper {
    display: flex;
    flex-direction: column;
    width: 100%;
  }

  #cs-section-sidebar {
    display: none;
  }
}

/* Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #cs-sidebar-wrapper {
    display: grid;
    grid-template-columns: 20rem 1fr;
    align-items: start;
  }

  #cs-section-sidebar {
    display: block;
    padding: 2rem 0 2rem 6vw;
    position: sticky;
    top: 5rem;
    height: fit-content;
    border-right: 0.5px solid rgba(0, 0, 0, 0.08);
  }

  .cs-sidebar-heading {
    font-family: var(--headerFont);
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--navy);
    padding: 0 0 0.875rem;
    margin: 0;
    display: block;
  }

  .cs-sidebar-nav {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .cs-sidebar-item {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.625rem 0;
  }

  .cs-sidebar-item::before {
    content: '';
    width: 0.3125rem;
    height: 0.3125rem;
    border-radius: 50%;
    background: transparent;
    flex-shrink: 0;
    transition: background 0.2s ease;
  }

  .cs-sidebar-item.cs-active::before {
    background: var(--signingGold);
  }

  .cs-sidebar-item.cs-active .cs-sidebar-link {
    color: var(--navy);
    font-weight: 600;
  }

  .cs-sidebar-item:hover::before {
    background: rgba(212, 168, 67, 0.4);
  }

  .cs-sidebar-item:hover .cs-sidebar-link {
    color: var(--navy);
  }

  .cs-sidebar-link {
    display: block;
    font-family: var(--bodyFont);
    font-size: 1rem;
    font-weight: 400;
    color: var(--silver);
    text-decoration: none;
    transition: color 0.2s ease;
  }
}

/*-- ----------------------------------------- -->
<---      School News Featured Post            -->
<--- ----------------------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0px) {
  #school-news-featured {
    padding: var(--sectionPadding);
    background: var(--white);
  }

  #school-news-featured .cs-container {
    width: 100%;
    max-width: 80rem;
    margin: 0 auto;
  }

  #school-news-featured .cs-featured {
    position: relative;
    width: 100%;
    height: 23.75rem;
    border-radius: 0.875rem;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
  }

  #school-news-featured .cs-featured-bg {
    position: absolute;
    inset: 0;
    background: var(--navy);
  }

  #school-news-featured .cs-featured-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    opacity: 0.45;
  }

  #school-news-featured .cs-featured-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
      to top,
      rgba(5, 13, 30, 0.95) 0%,
      rgba(5, 13, 30, 0.45) 55%,
      rgba(5, 13, 30, 0.05) 100%
    );
  }

  #school-news-featured .cs-featured-content {
    position: relative;
    z-index: 1;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: 100%;
  }

  #school-news-featured .cs-featured-tag {
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    background: rgba(255, 255, 255, 0.15);
    border: 0.5px solid rgba(255, 255, 255, 0.3);
    border-radius: 100px;
    padding: 0.1875rem 0.75rem;
    color: var(--white);
    display: inline-block;
    width: fit-content;
  }

  #school-news-featured .cs-featured-title {
    font-size: clamp(1.1rem, 3vw, 1.5rem);
    font-weight: 900;
    color: var(--white);
    line-height: 1.3;
    margin: 0;
  }

  #school-news-featured .cs-featured-excerpt {
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.6;
    margin: 0;
    display: none;
  }

  #school-news-featured .cs-featured-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: 0.25rem;
  }

  #school-news-featured .cs-featured-date {
    font-size: 0.6875rem;
    color: rgba(255, 255, 255, 0.4);
  }

  #school-news-featured .cs-featured-cta {
    font-size: 0.9rem;
    font-family: var(--headerFont);
    text-transform: capitalize;
    background: var(--signingGold);
    color: var(--navy);
    border-radius: 100px;
    padding: 0.5rem 1.125rem;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    flex-shrink: 0;
    transition: opacity 0.18s ease;
  }

  #school-news-featured .cs-featured-cta:hover {
    opacity: 0.88;
  }

  #school-news-featured .cs-featured-cta svg {
    width: 0.625rem;
    height: 0.625rem;
  }
}

/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #school-news-featured .cs-container {
    padding: 0 2.5rem;
  }

  #school-news-featured .cs-featured {
    height: 26.25rem;
  }

  #school-news-featured .cs-featured-excerpt {
    display: block;
  }

  #school-news-featured .cs-featured-content {
    padding: 1.75rem 2rem;
  }
}

/* Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #school-news-featured {
    padding: 2rem clamp(2rem, 4vw, 3.5rem) clamp(3rem, 5vw, 4.5rem);
  }

  #school-news-featured .cs-container {
    max-width: 100%;
    padding: 0;
  }

  #school-news-featured .cs-featured {
    height: 28.75rem;
  }

  #school-news-featured .cs-featured-title {
    max-width: 40rem;
  }

  #school-news-featured .cs-featured-excerpt {
    max-width: 33.75rem;
  }
}

/*-- ----------------------------------------- -->
<---         School News Grid                  -->
<--- ----------------------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0px) {
  #school-news {
    padding: var(--sectionPadding);
    padding-top: 0;
    background: var(--white);
  }

  #school-news .cs-container {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0 1rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
  }

  /* Toolbar */
  #school-news .cs-toolbar {
    background: var(--white);
    border: 0.5px solid rgba(0, 0, 0, 0.08);
    border-radius: 0.75rem;
    padding: 0.875rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }

  #school-news .cs-search {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: #f7f7f6;
    border: 0.5px solid rgba(0, 0, 0, 0.1);
    border-radius: 0.5rem;
    padding: 0.5625rem 0.75rem;
  }

  #school-news .cs-search svg {
    width: 0.875rem;
    height: 0.875rem;
    color: var(--silver);
    flex-shrink: 0;
  }

  #school-news .cs-search-input {
    font-size: 0.8125rem;
    color: var(--charcoal);
    background: transparent;
    border: none;
    outline: none;
    flex: 1;
    width: 100%;
  }

  #school-news .cs-search-input::placeholder {
    color: rgba(0, 0, 0, 0.28);
  }

  /* Filter Dropdown */
  #school-news .cs-filter-select {
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    background-color: #f7f7f6;
    background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23666' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    border: 0.5px solid rgba(0, 0, 0, 0.1);
    border-radius: 0.5rem;
    padding: 0 2.25rem 0 0.875rem;
    height: 2.375rem;
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--charcoal);
    cursor: pointer;
    transition: border-color 0.18s ease;
  }

  #school-news .cs-filter-select:hover,
  #school-news .cs-filter-select:focus {
    border-color: var(--navy);
    outline: none;
  }

  /* Grid */
  #school-news .cs-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
  }

  #school-news .cs-card {
    background: var(--white);
    border: 0.5px solid rgba(0, 0, 0, 0.08);
    border-radius: 0.75rem;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }

  #school-news .cs-card-img {
    height: 6.875rem;
    overflow: hidden;
    flex-shrink: 0;
  }

  #school-news .cs-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
  }

  #school-news .cs-card:hover .cs-card-img img {
    transform: scale(1.04);
  }

  #school-news .cs-card-img--blue  { background: #e8f0f8; }
  #school-news .cs-card-img--gold  { background: #f8f2e4; }
  #school-news .cs-card-img--green { background: #e8f4ec; }
  #school-news .cs-card-img--navy  { background: #e8eef4; }

  #school-news .cs-card-body {
    padding: 0.75rem 0.875rem;
    display: flex;
    flex-direction: column;
    gap: 0.3125rem;
    flex: 1;
  }

  #school-news .cs-tag {
    font-size: 0.5625rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    border-radius: 100px;
    padding: 0.125rem 0.5rem;
    display: inline-block;
    width: fit-content;
  }

  #school-news .cs-tag--academics     { background: rgba(26, 120, 189, 0.1);  color: #1A78BD; }
  #school-news .cs-tag--sports        { background: rgba(212, 168, 67, 0.12); color: #B8902E; }
  #school-news .cs-tag--events        { background: rgba(15, 47, 91, 0.08);   color: var(--navy); }
  #school-news .cs-tag--announcements { background: rgba(46, 160, 67, 0.1);   color: #1a7a2e; }

  #school-news .cs-card-date {
    font-size: 0.625rem;
    color: var(--silver);
    margin: 0;
  }

  #school-news .cs-card-title {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--navy);
    line-height: 1.35;
    margin: 0;
    flex: 1;
  }

  #school-news .cs-card-link {
    font-size: 0.9rem;
    font-family: var(--headerFont);
    letter-spacing: 0.08em;
    text-transform: capitalize;
    color: var(--brooklynBlue);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 0.1875rem;
    padding: 0 0.875rem 0.75rem;
    transition: gap 0.18s ease;
  }

  #school-news .cs-card-link:hover {
    gap: 0.375rem;
  }

  #school-news .cs-card-link svg {
    width: 0.5625rem;
    height: 0.5625rem;
  }

  /* Pagination */
  #school-news .cs-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
  }

  #school-news .cs-page-count {
    font-size: 0.75rem;
    color: var(--silver);
  }

  #school-news .cs-pages {
    display: flex;
    gap: 0.375rem;
    align-items: center;
  }

  #school-news .cs-page-btn {
    width: 2.125rem;
    height: 2.125rem;
    border-radius: 0.5rem;
    border: 0.5px solid rgba(0, 0, 0, 0.1);
    background: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--navy);
    cursor: pointer;
    text-decoration: none;
    transition: all 0.18s ease;
  }

  #school-news .cs-page-btn:hover {
    border-color: var(--navy);
  }

  #school-news .cs-page-btn.is-active {
    background: var(--navy);
    border-color: var(--navy);
    color: var(--white);
  }

  #school-news .cs-page-btn--arrow {
    color: var(--silver);
  }

  #school-news .cs-page-btn--arrow svg {
    width: 0.75rem;
    height: 0.75rem;
  }
}

/* Mobile only — max 480px */
@media only screen and (max-width: 30rem) {
  #school-news .cs-container {
    padding: 0 1rem;
  }

  #school-news .cs-grid {
    grid-template-columns: 1fr;
  }
}

/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #school-news {
    padding-top: 0;
  }

  #school-news .cs-container {
    padding: 0 2.5rem;
  }

  #school-news .cs-toolbar {
    flex-direction: row;
    align-items: center;
    gap: 1rem;
  }

  #school-news .cs-search {
    flex: 1;
  }

  #school-news .cs-filter-select {
    width: auto;
    min-width: 12rem;
  }

  #school-news .cs-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #school-news {
    padding-top: 0;
  }

  #school-news .cs-container {
    padding: 0 6vw;
  }

  #school-news .cs-card-img {
    height: 8.75rem;
  }

  #school-news .cs-card-title {
    font-size: 1rem;
  }
}

/* Hidden card state for filtering */
.cs-card.is-hidden {
	display: none !important;
}