html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--page-scroll-gap, 0);
}



.srjc-logo {
  &.logo-mark {
    aspect-ratio: 0.7872340426 !important;

    #footer & {
      width: 58px;
    }
  }

  &.small {
    aspect-ratio: 2.06382978723;

    #region-navigation & {
      display: none;
    }
  }

  &.medium {
    aspect-ratio: 4.5 !important;

    .srjc-logo-wordmark {

      #region-navigation & {
        fill: #fff;
      }

    }

    &:has(.srjc-logo-tagline) {
      aspect-ratio: 6.41306061;

      .srjc-logo-tagline {
        transform: translate(355px, 12px);
      }

      #dept-block & {
        height: 50px;

        @media (width > 1200px) {
          height: 100px;
        }

        @media (900px < width <= 1200px) {
         height: 75px;
        }
      }
    }
  }

  &.long {
    aspect-ratio: 6.6847826087 !important;
    transform: none !important;

    .srjc-logo-wordmark {
      transform: translateX(1.25%);

      #header & {
        fill: #fff;
      }
    }

    #region-navigation & {
      display: none;
    }
  }

  &.long-white {
    aspect-ratio: 6.4042553191;
    width: 300px;
  }

  .srjc-logo-tagline {
    fill: #959B9D;
  }
}


.grid-container {
	max-width: 87.5rem;
}

.container {
	margin-inline: auto;
	max-width: 87.5rem;
	padding-inline: 1.5rem;
}

#page {
  display: flex;
  flex-direction: column;
	min-height: 100vh;
	overflow: hidden;
	position: relative;
}

#main {
  flex-grow: 1;
	padding-bottom: 3rem;
}

.sidebar {
	padding-top: 2.25rem;
}

@media(min-width:1201px) {
	#sidebar-first {
		order: -1;
	}
}

@media(min-width:901px) {
	#sidebar-first {
		padding-right: 2rem;
	}

	#sidebar-second {
		padding-left: 2rem;
	}
}

#content-bottom {
	margin-left: 0;
	margin-right: 0;
}

#content-bottom .demo-block {
	width: 100%;
}

#main .main {
    padding-bottom: 1rem;
    padding-top: 2.25rem;
}

.field-label,
.field__label {
	font-weight: 700;
}

.field--label-inline {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
}

.field--label-inline :where(.field-label,.field__label):after {
	content:":";
	padding-right: .25rem;
}

.node-meta {
	color: gray;
	display: flex;
    font-size: 14px;
    font-style: italic;
}

.node-meta > div:not(:last-child) {
	margin-right: 3rem;
}


/* ELEMENTS: BLOCKS
----------------------------------------------- */
aside section.block, main section.block {
	margin-bottom: 1.75em;
}

.views-row .teaser {
	margin-bottom: 1rem;
}

/* featured content block */
/* teaser */
#region-content .type-page.teaser,
#content-bottom .block:not(.display-content-right) .type-page.teaser {
	display: block;
	padding-right: 1rem;
    padding-left: 1rem;
}

#region-content .type-page.teaser .cell,
#content-bottom .block:not(.display-content-right) .type-page.teaser > .cell {
	min-width: 100%;
	padding-left: 0;
	padding-right: 0;
}

#content-bottom .block-title {
	border: none;
}

#content-bottom h2:not(.block-title) {
	text-transform: none;
}



/* ELEMENTS: PAGINATION
----------------------------------------------- */

nav.pager > ul {
    text-align: center;
}

.pagination .current {
	background: none;
}

ul.pagination a {
	cursor: pointer;
}

ul.pagination li.current a {
	background: #002654;
	color: #fff;
}



/* ELEMENTS: SOCIAL ICONS
----------------------------------------------- */
.social-icons a {
	background-position: 50% 50%;
	background-repeat: no-repeat;
	background-size: contain;
	border-radius: 50%;
	display: inline-block;
	font-size: 0;
	height: 32px;
	margin-right: 7px;
	overflow: hidden;
	position: relative;
	width: 32px;
}

.social-icons a:last-child { margin-right: 0; }

.social-icons a svg {
	bottom: 0;
	fill: #fff;
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;

}

.social-icons a.facebook {
	background-color: #6D85B5;
}

.social-icons a.twitter {
	background-color: #89BEE1;
}

.social-icons a.linkedin {
	background-color: #1786B0;
}

.social-icons a.youtube {
	background-color: #DF5844;
}

.social-icons a.instagram {
	background-color: #F06597;
}

.social-icons a.srjc_app {
  background: #182952;
}



/*** Google CUstom Search ***/
.gsc-results-wrapper-visible {
    min-height: 50vh;
}

.gsc-control-wrapper-cse .gsc-modal-background-image-visible {
	height: 200vh;
    top: -50vh;
}

/* accordions */
/* newer style (not KS)*/
/*.ckeditor-accordion .accordion-title,
.ckeditor--accordion .accordion-title {
  background-color: var(--srjc-blue);
  color: var(--white);
  font-size: 1.35714rem;
  margin-bottom: 0;
}

.ckeditor-accordion .accordion-item:nth-child(even) .accordion-title,
.ckeditor--accordion .accordion-item:nth-child(even) .accordion-title {
  background-color: var(--light-blue);
  color: var(--srjc-blue);
}*/

.accordion {
  .accordion-title {
    padding-right: 1.75rem;
  }
}



.contact_us_block {
  & > ul {
    list-style: none;
    margin: 0;

    li {
      padding-top: .5rem;
    }

    a {
      display: inline-flex;
      align-items: center;
      gap: .5rem;
      
      &::before {
        background-color: #820000;
        background-position: center;
        background-repeat: no-repeat;
        background-size: .875rem auto;
        border-radius: 50%;
        content: "";
        display: block;
        height: 1.5rem;
        width: 1.5rem;
      }

      &[href^="tel:"] {
        &::before {
          background-image: url('/assets/img/sprite-new.svg#phone-white');
        }
      }

      &[href^="mailto:"] {
        &::before {
          background-image: url('/assets/img/sprite-new.svg#envelope-white');
        }
      }
    }
  }

  .contact-us-additional-info {
    padding-top: 1rem;
  }
}


/* Link box type blocks*/
.block__link_box {

	main &:is(section.block) {
		margin-bottom: 0;
		padding-inline: 0;
	}
	
	.field--block-content-field-items {
		--gap: 3rem;
		background-color: var(--srjc-blue);
		display: flex;
		flex-wrap: wrap;
		gap: var(--gap);
		padding-block: 3.5rem;
		position: relative;
	
		#content-bottom & {
			&::before,
			&::after {
				background: inherit;
				bottom: 0;
				content:"";
				position: absolute;
				top: 0;
				width: 50dvw;
			}
			
			&::before {
				right: 100%;	
			}
			
			&::after {
				left: 100%;
				z-index: 1;
			}
		}

		#region-content & {
			padding-inline: 3rem;
		}
	
		& > .field__item {
			background: #fff;
			flex-grow: 1;
			width: 100%;

			@media(width > 900px) {
				max-width: calc(33.333% - (var(--gap) * 2 / 3));
				width: calc(33.333% - (var(--gap) * 2 / 3));
			}
		
			&:before {
	    	background: #86000a;
	    	content: "";
	    	display: block;
	    	height: .625rem;
	    	width: 100%;
			}
		}
	}

	@media(min-width: 901px) {
		.paragraph--type--link-box {
			display: flex;
			flex-direction: column;
		}
	}
	
	.field--name-field-title {
		border-bottom: 1px solid #dadada;
		color: #002653;
		font-size: 1.75rem;
		font-weight: 400;
		line-height: 1.2;
		margin-left: 1.5rem;
		margin-right: 1.5rem;
		padding: 1.25rem 0 .625rem;
	}
	
	/*.paragraph--type--link-box*/ .field--paragraph-field-link {
		flex-grow: 1;
		padding: 2.25rem 1.5rem 4.5rem;
	}

	.field--name-field-link .field__item {
		padding-top: 0.5rem;
	}

	.field__item a {
		color: #002653;
		font-size: 1.25rem;
		font-weight: 400;
	}

	.field--name-field-link a:before {
		border-bottom: 10px solid transparent;
		border-left: 10px solid #86000a;
		border-top: 10px solid transparent;
		content: "";
		display: inline-block;
		height: 0;
		transform: translateY(4px) scaleY(.75);
		width: 0;
	}
	
	.field--name-field-link a:before {
		margin-right: 1rem;
	}
}


/* Cards type blocks*/
.block__cards {
	background-color: #fff;
	position: relative;
	
	main &:is(section.block) {
		margin-bottom: 0;
		padding-inline: 0;
	}
	
	&::before,
	&::after {
		background: inherit;
		bottom: 0;
		content:"";
		position: absolute;
		top: 0;
		width: 50dvw;
	}
		
	&::before {
		right: 100%;	
	}
		
	&::after {
		left: 100%;
		z-index: 1;
	}
	
	.field--block-content-field-items {
		display: flex;
		flex-wrap: wrap;
		gap: 3rem;
		padding-block: 3.5rem 1.5rem;
		position: relative;
    z-index: 2;
		
		& > .field__item {
			box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1), 0 3px 6px 0 rgba(0, 0, 0, 0.09);
    	padding: 0 1rem 1rem;
    	width: 100%;
    	
    	@media(600px < width <= 900px) {
				width: calc(50% - (3rem * 1/2));
			}
			
			@media(width > 900px) {
				width: calc(33.333% - (3rem * 2/3));
			}
		}
	}
	
	.field--paragraph-field-image {
		margin-inline: -1rem;
    padding-bottom: 1rem;
	}
	
	.field--paragraph-field-button a {
		background-color: #820000;
		border: none;
		border: 1px solid transparent;
		border-radius: 0;
		box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.33), inset 0 0 5px rgba(255, 255, 255, 0.2);
		color: #eee;
		cursor: pointer;
		display: inline-block;
		font-family: inherit;
		font-size: 0.9rem;
		letter-spacing: 0.05em;
		line-height: 1;
		margin: 0;
		padding: 0.85em 1em;
		text-align: center;
		text-transform: capitalize;
		transition: background-color 0.25s ease-out, color 0.25s ease-out;
		vertical-align: middle;
	}
}