/* ===================================
   FONT IMPORTS
   =================================== */

/* Grandstander - Primary Font (Headers, Decorative) */
@import url('https://fonts.googleapis.com/css2?family=Grandstander:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

/* Rethink Sans - Secondary Font (Body Text) */
@import url('https://fonts.googleapis.com/css2?family=Rethink+Sans:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,500;1,600;1,700;1,800&display=swap');

/* ===================================
   CSS CUSTOM PROPERTIES
   =================================== */

:root {
  /* Font Families */
  --font-primary: 'Grandstander', cursive, system-ui, -apple-system, sans-serif;
  --font-secondary: 'Rethink Sans', sans-serif, system-ui, -apple-system, sans-serif;
  
  /* Color Tokens (matching Tailwind config) */
  --color-offBlack: #1f2937;
  --color-lightBlue: #c7eaf3;
  --color-white: #ffffff;
  --color-black: #000000;
  --color-gray-500: #6b7280;
  --color-gray-700: #374151;
  --color-primary: #4381b5;
  --text-xl: 1.25rem;
  --text-offBlack: #110241;
  --default-transition-duration: .15s;
  --default-transition-timing-function: cubic-bezier(.4,0,.2,1);
  --tw-duration: .3s;
}

body {
	font-family: var(--font-secondary);
	overflow-x: hidden;
}

@media (max-width: 768px) {
	body {
		padding-left: 0;
		padding-right: 0;
	}
}

.navbar .navbar-inner {
	background: #fff;
	font-size: var(--text-xl);
	position: relative;
	z-index: 1;
	overflow: visible;
	box-shadow: none;
}

.navbar {
  position: relative;
  z-index: 3;        /* higher than #contentArea */
  overflow: visible; /* so the wave can hang below */
}

.navbar::after {
  content: "";
    position: absolute;
    bottom: -32px;
    width: 100%;
    height: 33px;
    transform: scaleY(-1);
    transform-origin: center;
    pointer-events: none;
    z-index: 3;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 28' preserveAspectRatio='none'><path fill='%23ffffff' d='M0,14 C15,2 45,2 60,14 S105,26 120,14 V28 H0 Z'/></svg>");
    background-repeat: repeat-x;
    background-position: center bottom;
    background-size: 600px 100%;
}

@media (max-width: 480px) {
	.navbar::after {
		background-size: 300px 100%;
	}
}

.navbar-inner > * {
  position: relative;
  z-index: 1;
}

.navbar .nav li a:hover,
.navbar .nav li a:focus,
.navbar .nav .active a,
.navbar .nav .active a:hover,
.navbar .nav .active a:focus {
	color: var(--color-offBlack);
	font-weight: 600;
}

.navbar .nav li a,
.navbar .icon-private-w {
	color: var(--color-offBlack);
	font-weight: 600;
}

/* Hero Section */
#docsSearch {
	background: #033d9a;
    border-bottom: 1px solid #DFDFDF;
    margin-bottom: 3em;
    padding: 12rem 0;
    background-image: url(https://images.sunsationalswimschool.com/backgrounds/helpscout-hero-bg-wide-2.);
    background-size: cover;
    border: 0;
}

@media (max-width: 768px) and (max-width: 480px) {
	#docsSearch {
		padding: 3rem 0.5rem;
		background-image: url('https://images.sunsationalswimschool.com/backgrounds/helpscout-hero-bg-mobile.gif');
	}
}

@media (min-width: 2000px) {
	#docsSearch {
		background-size: 100% 100%;
	}
}

#docsSearch h1 {
  font-size: 3rem; /* text-5xl */
  color: #fff;
  font-weight: 700;
  font-family: var(--font-primary);
  line-height: 115%;
}

@media (min-width: 768px) {
  #docsSearch h1 {
    font-size: 6rem; /* md:text-8xl */
    line-height: 100%;
  }
}

/* Category Section Headings */
.category h3,
#contentArea h2 {
  font-size: 2rem; /* text-[32px] */
  color: #1f2937;
  font-weight: 700;
  line-height: 115%;
  font-family: var(--font-primary);
}

@media (min-width: 768px) {
  .category h3,
  #contentArea h2 {
    font-size: 3rem; /* md:text-5xl */
    line-height: 110%;
  }
}

/* Article Body Typography */
#fullArticle h1 {
  font-size: 2.5rem; /* text-[40px] */
  color: var(--text-offBlack);
  font-family: var(--font-primary);
  font-weight: 700;
  line-height: 115%;
  margin-top: 2rem;
  margin-bottom: 1rem;
}

@media (min-width: 768px) {
  #fullArticle h1 {
    font-size: 3rem; /* md:text-[64px] */
  }
}

#fullArticle h2 {
  font-size: 2rem; /* text-[32px] */
  color: #1f2937;
  font-family: var(--font-primary);
  font-weight: 700;
  line-height: 115%;
  margin-top: 2rem;
  margin-bottom: 1rem;
}

@media (min-width: 768px) {
  #fullArticle h2 {
    font-size: 3rem; /* md:text-5xl */
    line-height: 110%;
  }
}

#fullArticle h3 {
  font-size: 1.5rem; /* text-[24px] */
  color: #1f2937;
  font-weight: 700;
  margin-top: 1.5rem;
  margin-bottom: 0.75rem;
}

@media (min-width: 768px) {
  #fullArticle h3 {
    font-size: 2rem; /* md:text-[32px] */
  }
}

#fullArticle p,
#fullArticle li {
  font-size: 1.125rem; /* text-[18px] - body2 */
  line-height: 1.75;
  color: #374151; /* text-gray-700 */
  font-family: var(--font-secondary);
  margin-bottom: 1.25rem;
}

@media (min-width: 768px) {
  #fullArticle p,
  #fullArticle li {
    font-size: 1.25rem; /* md:text-xl - 20px */
  }
}

.articleList a:hover span {
	padding-left: 1px;
	text-decoration: none;
}

/* Category Card Description */
.category p {
  font-size: 1rem; /* text-base - body3 */
  line-height: 120%;
  font-family: var(--font-secondary);
  color: #6b7280; /* text-gray-500 */
}

/* Article Count / Caption Text */
.category .article-count,
.caption {
  font-size: 0.75rem; /* text-xs - caption */
  font-weight: 600;
  color: #4381b5;
}

#docsSearch .search-subtitle {
  font-size: 1.125rem;
  color: #ffffff;
  text-align: center;
  margin-top: 1.5rem;
  margin-bottom: 1.625rem;
  line-height: 125%;
  font-family: var(--font-secondary);
  font-weight: 500;
}

@media (min-width: 768px) {
  #docsSearch .search-subtitle {
    font-size: 1.25rem;
  }
}

/* Search Bar Styling */


@media (max-width: 768px) {
	#searchBar {
		max-width: 447px;
	}
}


#searchBar .search-query {
  border: 0;
    clip-path: polygon(87.377% 99.024%, 87.377% 99.024%, 80.318% 98.87%, 73.26% 98.656%, 66.203% 98.38%, 59.147% 98.044%, 52.092% 97.647%, 45.038% 97.189%, 37.986% 96.67%, 30.937% 96.091%, 23.889% 95.451%, 16.844% 94.751%, 16.844% 94.751%, 15.548% 94.602%, 14.239% 94.41%, 12.931% 94.15%, 11.638% 93.801%, 10.374% 93.339%, 9.153% 92.743%, 7.99% 91.99%, 6.899% 91.058%, 5.893% 89.923%, 4.988% 88.564%, 4.988% 88.564%, 4.508% 87.65%, 4.083% 86.681%, 3.707% 85.665%, 3.376% 84.609%, 3.084% 83.52%, 2.827% 82.404%, 2.599% 81.267%, 2.396% 80.118%, 2.212% 78.963%, 2.043% 77.809%, 2.043% 77.809%, 1.311% 72.037%, .74% 66.223%, .333% 60.377%, .088% 54.51%, .005% 48.633%, .084% 42.756%, .326% 36.89%, .731% 31.045%, 1.298% 25.232%, 2.028% 19.461%, 2.028% 19.461%, 2.273% 17.804%, 2.548% 16.146%, 2.861% 14.5%, 3.22% 12.881%, 3.632% 11.304%, 4.105% 9.785%, 4.648% 8.337%, 5.269% 6.976%, 5.975% 5.716%, 6.774% 4.572%, 6.774% 4.572%, 7.749% 3.483%, 8.791% 2.59%, 9.891% 1.874%, 11.038% 1.313%, 12.222% .887%, 13.435% .577%, 14.667% .36%, 15.907% .217%, 17.146% .127%, 18.375% .069%, 18.375% .069%, 22.37% .037%, 29.295% .182%, 38.384% .594%, 48.87% 1.364%, 59.985% 2.582%, 70.963% 4.337%, 81.037% 6.72%, 89.439% 9.82%, 95.403% 13.728%, 98.161% 18.534%, 98.161% 18.534%, 98.95% 24.887%, 99.506% 33.017%, 99.808% 42.389%, 99.837% 52.467%, 99.574% 62.716%, 99% 72.599%, 98.094% 81.58%, 96.838% 89.124%, 95.212% 94.695%, 93.196% 97.756%, 93.196% 97.756%, 92.654% 98.111%, 92.097% 98.394%, 91.528% 98.614%, 90.949% 98.779%, 90.361% 98.896%, 89.768% 98.973%, 89.171% 99.017%, 88.573% 99.036%, 87.975% 99.037%, 87.38% 99.029%, 87.377% 99.024%);
    padding-bottom: 1rem;
    padding-top: 1rem;
    color: #110241;
    font-family: 'Rethink Sans';
    font-size: 1rem;
    height: 62px;
}

.search-query {
  width: 100%;
  padding: 1rem 1.5rem 1rem 2rem;
  font-size: 1.125rem;
  border: 2px solid #e5e7eb;
  border-radius: 0.5rem;
  font-family: var(--font-secondary);
  background-color: #ffffff;
  transition: all 0.3s ease;
}

@media (max-width: 768px) {
	#sidebar .search-query {
		padding: 1.5rem 1.5rem 2rem;
	}
}

.search-query:focus {
  outline: none;
  border-color: #4381b5;
  box-shadow: 0 0 0 3px rgba(67, 129, 181, 0.1);
}

.search-query::placeholder {
  color: #110241;
}

#searchBar button {
	clip-path: polygon(87.377% 99.024%, 87.377% 99.024%, 80.318% 98.87%, 73.26% 98.656%, 66.203% 98.38%, 59.147% 98.044%, 52.092% 97.647%, 45.038% 97.189%, 37.986% 96.67%, 30.937% 96.091%, 23.889% 95.451%, 16.844% 94.751%, 16.844% 94.751%, 15.548% 94.602%, 14.239% 94.41%, 12.931% 94.15%, 11.638% 93.801%, 10.374% 93.339%, 9.153% 92.743%, 7.99% 91.99%, 6.899% 91.058%, 5.893% 89.923%, 4.988% 88.564%, 4.988% 88.564%, 4.508% 87.65%, 4.083% 86.681%, 3.707% 85.665%, 3.376% 84.609%, 3.084% 83.52%, 2.827% 82.404%, 2.599% 81.267%, 2.396% 80.118%, 2.212% 78.963%, 2.043% 77.809%, 2.043% 77.809%, 1.311% 72.037%, .74% 66.223%, .333% 60.377%, .088% 54.51%, .005% 48.633%, .084% 42.756%, .326% 36.89%, .731% 31.045%, 1.298% 25.232%, 2.028% 19.461%, 2.028% 19.461%, 2.273% 17.804%, 2.548% 16.146%, 2.861% 14.5%, 3.22% 12.881%, 3.632% 11.304%, 4.105% 9.785%, 4.648% 8.337%, 5.269% 6.976%, 5.975% 5.716%, 6.774% 4.572%, 6.774% 4.572%, 7.749% 3.483%, 8.791% 2.59%, 9.891% 1.874%, 11.038% 1.313%, 12.222% .887%, 13.435% .577%, 14.667% .36%, 15.907% .217%, 17.146% .127%, 18.375% -0.931%, 18.375% .069%, 22.37% .037%, 29.295% .182%, 38.384% .594%, 48.87% 1.364%, 59.985% 2.582%, 70.963% 4.337%, 81.037% 6.72%, 89.439% 9.82%, 95.403% 13.728%, 98.161% 18.534%, 98.161% 18.534%, 98.95% 24.887%, 99.506% 33.017%, 99.808% 42.389%, 99.837% 52.467%, 99.574% 62.716%, 99% 72.599%, 98.094% 81.58%, 96.838% 89.124%, 95.212% 94.695%, 93.196% 97.756%, 93.196% 97.756%, 92.654% 98.111%, 92.097% 98.394%, 91.528% 98.614%, 90.949% 98.779%, 90.361% 98.896%, 89.768% 98.973%, 89.171% 99.017%, 88.573% 99.036%, 87.975% 99.037%, 87.38% 99.029%, 87.377% 99.024%);
    font-family: Grandstander, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, Apple Color Emoji, Segoe UI emoji;
    padding: 0.6rem 1rem;
    height: auto;
    margin-right: 0.75rem;
    margin-top: 0.5rem;
    background: #fedf46;
    border: 0;
    color: #110241;
    text-shadow: none;
    font-weight: 500;
    top: 29px;
}

@media (max-width: 768px) and (max-width: 480px) {
	#searchBar button {
		padding-bottom: 0.4rem;
		top: 22px;
	}
}

[class^=icon-] {
	color: #110241;
}

@media (max-width: 768px) and (max-width: 480px) {
	[class^=icon-] {
		line-height: 0;
		color: #110241;
	}
}

#searchBar button:hover {
	background: #fedf46!important;
}

@media (max-width: 768px) and (max-width: 480px) {
	#searchBar button .icon-search {
		position: relative;
        top: 10px;
	}
}

.container-fluid {
	max-width: 	100%;
}

.navbar-inner .container-fluid {
	max-width: 	1080px;
}

#categoryHead h1 {
	margin-right: 165px;
    font-family: var(--font-primary);
    font-size: 3.25rem;
    font-weight: 600;
    color: var(--text-offBlack);
}

@media (max-width: 480px) {
	#categoryHead h1 {
		font-size: 2rem;
	}
}

.category-list {
	display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    padding: 0 1.5rem;
}

.category-list .category {
	clip-path: polygon(98.026% 33.406%,98.026% 33.406%,98.118% 35.326%,98.335% 40.146%,98.635% 47.141%,98.978% 55.585%,99.323% 64.753%,99.629% 73.919%,99.854% 82.357%,99.958% 89.343%,99.9% 94.15%,99.639% 96.054%,99.639% 96.054%,95.138% 97.295%,87.107% 98.299%,76.435% 99.049%,64.012% 99.527%,50.728% 99.717%,37.475% 99.601%,25.14% 99.164%,14.616% 98.388%,6.792% 97.256%,2.557% 95.752%,2.557% 95.752%,1.644% 93.247%,.978% 87.87%,.525% 80.337%,.249% 71.365%,.115% 61.671%,.087% 51.972%,.13% 42.984%,.209% 35.425%,.288% 30.011%,.332% 27.46%,.332% 27.46%,.372% 25.498%,.425% 23.536%,.489% 21.574%,.566% 19.612%,.655% 17.65%,.756% 15.687%,.869% 13.725%,.994% 11.763%,1.131% 9.801%,1.28% 7.838%,1.28% 7.838%,1.325% 7.365%,1.402% 6.887%,1.531% 6.409%,1.731% 5.933%,2.023% 5.463%,2.426% 5.003%,2.961% 4.557%,3.648% 4.127%,4.507% 3.717%,5.557% 3.331%,5.557% 3.331%,6.662% 3.012%,7.88% 2.728%,9.197% 2.476%,10.6% 2.253%,12.072% 2.056%,13.601% 1.882%,15.171% 1.728%,16.768% 1.591%,18.377% 1.469%,19.984% 1.358%,19.984% 1.358%,25.586% 1.021%,31.23% .745%,36.907% .531%,42.605% .38%,48.315% .292%,54.027% .265%,59.729% .302%,65.413% .401%,71.068% .563%,76.683% .787%,76.683% .787%,77.806% .841%,78.93% .9%,80.049% .967%,81.154% 1.044%,82.241% 1.131%,83.302% 1.233%,84.331% 1.35%,85.322% 1.484%,86.266% 1.638%,87.159% 1.814%,87.159% 1.814%,88.555% 2.121%,89.85% 2.42%,91.036% 2.718%,92.106% 3.022%,93.053% 3.337%,93.869% 3.67%,94.548% 4.028%,95.082% 4.416%,95.464% 4.841%,95.687% 5.31%,95.687% 5.31%,96.36% 8.042%,96.858% 10.823%,97.21% 13.641%,97.445% 16.485%,97.592% 19.343%,97.68% 22.201%,97.738% 25.049%,97.795% 27.873%,97.88% 30.663%,98.022% 33.404%,98.026% 33.406%);
	--tw-duration: .3s;
	transition-duration: .3s;
	border: 0;
	background: var(--color-lightBlue);
	flex-grow: 1;
	gap: 1rem;
	display: flex;
    flex-direction: column;
    justify-content: space-around;
}

/*@media (min-width: 64rem) {
	.category-list .category {
		width: calc(33% - 25px);
	}
}*/

.category-list .category:hover {
	background: #110241;
}

.category-list .category:hover h3 {
	color: white;
}

.category-list .category p {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration)); 
	font-size: 1rem;
	line-height: 120%;
	color: rgb(74, 63, 110);
}

.category-list .category:hover p {
	color: white;
}

.category-list .category .article-count {
	color: #f86008;
    text-transform: uppercase;
    font-weight: 800;
    font-size: .8rem;
}

.category-list .category:hover .article-count {
	color: #f86008;
}

.category-list .category .article-count:hover {
	color: #f86008;
}

#contentArea {
	background: #1c2674;
    width: 100%;
    height: 100%;
}

#contentArea .row-fluid {
	max-width: 1440px;
	margin: auto;
	padding-top: 4rem;
}

.contentWrapper {
	clip-path: polygon(98.026% 33.406%,98.026% 33.406%,98.118% 35.326%,98.335% 40.146%,98.635% 47.141%,98.978% 55.585%,99.323% 64.753%,99.629% 73.919%,99.854% 82.357%,99.958% 89.343%,99.9% 94.15%,99.639% 96.054%,99.639% 96.054%,95.138% 97.295%,87.107% 98.299%,76.435% 99.049%,64.012% 99.527%,50.728% 99.717%,37.475% 99.601%,25.14% 99.164%,14.616% 98.388%,6.792% 97.256%,2.557% 95.752%,2.557% 95.752%,1.644% 93.247%,.978% 87.87%,.525% 80.337%,.249% 71.365%,.115% 61.671%,.087% 51.972%,.13% 42.984%,.209% 35.425%,.288% 30.011%,.332% 27.46%,.332% 27.46%,.372% 25.498%,.425% 23.536%,.489% 21.574%,.566% 19.612%,.655% 17.65%,.756% 15.687%,.869% 13.725%,.994% 11.763%,1.131% 9.801%,1.28% 7.838%,1.28% 7.838%,1.325% 7.365%,1.402% 6.887%,1.531% 6.409%,1.731% 5.933%,2.023% 5.463%,2.426% 5.003%,2.961% 4.557%,3.648% 4.127%,4.507% 3.717%,5.557% 3.331%,5.557% 3.331%,6.662% 3.012%,7.88% 2.728%,9.197% 2.476%,10.6% 2.253%,12.072% 2.056%,13.601% 1.882%,15.171% 1.728%,16.768% 1.591%,18.377% 1.469%,19.984% 1.358%,19.984% 1.358%,25.586% 1.021%,31.23% .745%,36.907% .531%,42.605% .38%,48.315% .292%,54.027% .265%,59.729% .302%,65.413% .401%,71.068% .563%,76.683% .787%,76.683% .787%,77.806% .841%,78.93% .9%,80.049% .967%,81.154% 1.044%,82.241% 1.131%,83.302% 1.233%,84.331% 1.35%,85.322% 1.484%,86.266% 1.638%,87.159% 1.814%,87.159% 1.814%,88.555% 2.121%,89.85% 2.42%,91.036% 2.718%,92.106% 3.022%,93.053% 3.337%,93.869% 3.67%,94.548% 4.028%,95.082% 4.416%,95.464% 4.841%,95.687% 5.31%,95.687% 5.31%,96.36% 8.042%,96.858% 10.823%,97.21% 13.641%,97.445% 16.485%,97.592% 19.343%,97.68% 22.201%,97.738% 25.049%,97.795% 27.873%,97.88% 30.663%,98.022% 33.404%,98.026% 33.406%);
	padding-top: 3rem;
	padding-bottom: 3rem;
}

#main-content {
	padding-top: 0px;
}

@media (max-width: 768px) {
	#main-content {
		max-width: 90%;
		margin: auto;
		padding-bottom: 3rem;
	}
}

@media (max-width: 768px) {
	#sidebar {
		max-width: 90%;
		margin: auto;
	}
}

#sidebar h3 {
	font-size: 1.2rem;
    color: #ffffff;
    font-family: var(--font-primary);
}

#sidebar .nav-list a {
	text-shadow: none;
	color: #cdcdcd;
	font-size: 1rem;
}

#sidebar .nav-list .active a {
	color: var(--color-lightBlue);
	font-size: 150%;
}

#sidebar .nav-list a:hover {
	color: var(--color-lightBlue);
	font-size: 136%;
}

#searchBar.sm button {
    background: #fedf46;
    padding: 0.6rem 1rem;
    top: 4px;
}

@media (min-width: 481px) {
	#searchBar.sm button {
		height: auto;
	}
}

@media (max-width: 768px) {
	#searchBar.sm button {
		top: 10px;
	}
}