/*
LAST UPDATED:
-------------
2025.07.24 PMW


CHANGELOG
----------
Changed 'Multi-Column Lists' to 'Multi-Columns' so it works for lists and paragraphs; added more breakpoits (7/24/2025)
Added FEATURED SUMMARIES Top Padding Hack (5/29/2025)
Added SECONDARY NAV HACK (5/5/25)
Updated 'Multi-Column Lists' to streamline code and add non-breaking list items (3/17/25)
Updated 'Callouts' to add code that makes RCCL's call-out-text class work the way it used to (3/17/25)
Added https://dev-ru-rccl-sebs-dbm.pantheonsite.io to USED ON (2/24/25)
Added https://sebs.rutgers.edu to USED ON (2/24/25)
Removed 'Removes extra space above embedded video' from RICH TEXT/FULL HTML HACKS (2/24/25)
Removed 'COMPONENT WITH BACKGROUND COLOR AFTER RICH TEXT HACK' (2/24/25)


USED ON:
--------
https://plantbiology.rutgers.edu
https://sebs.rutgers.edu
https://dev-ru-rccl-animal-sciences.pantheonsite.io
https://dev-ru-rccl-deenr.pantheonsite.io
https://dev-ru-rccl-sebs-dbm.pantheonsite.io
https://dev-ru-rccl-sebs-rce.pantheonsite.io


TABLE OF CONTENTS:
------------------
BACKGROUND COLORS
HEADER HACKS
 -  Utility Menu Hack
 - Mobile Utility Menu Hack
 - Main Menu Hack
ANCHOR LINK HACK
FEATURED SUMMARIES HACKS
 - Cursor Hack
 - Top Padding Hack
 - Vertical Hack
MINI-SITE HACKS
 - Hide Scrollbar Hack
 - Underline Hack
 - Remove Extra Padding Hack
 - Link Grid Hack
RICH TEXT/FULL HTML HACKS
 - Button Hack
 - H2 Size Hack
FOOTER HACKS
SECONDARY NAV HACK
MISC ENHANCEMENTS
 - Box Menu
 - Callouts
 - Flex-box
 - Multi-columns
 - Tables
 - Etc
*/



/* BACKGROUND COLORS */

.rccl-white {
	background: white;
}

.rccl-light-gray {
	background: #efefef;
}

.rccl-pale-teal {
	background: #87c3be;
}

.rccl-pale-blue {
	background: #92d6e3;
}

.rccl-pale-yellow  {
	background: #fce488;
}

.rccl-black {
	background: black;
}

.rccl-dark-gray {
	background: #222;
}

.rccl-blue {
	background: #007fac;
}

.rccl-teal {
	background: #00626d;
}

.rccl-red {
	background: #c03;
}

.rccl-black,
.rccl-dark-gray,
.rccl-blue,
.rccl-teal,
.rccl-red {
	color: white;
}


/* HEADER HACKS */

/* Utility Menu Hack */
@media screen and (min-width: 1024px) {
	.cc--utility-menu .m--menu > li .utility-button span {
		height: auto;
	}
}

/* Mobile Utility Menu Hack */
#l--main-header-basic .mobile-nav .cc--utility-menu ul::after {
	display: none;
}
#l--main-header-basic .mobile-nav .cc--utility-menu ul li .utility-button-wrapper .utility-button {
	display: block;
}
@media screen and (max-width: 1023px) {
	#l--main-header-basic .mobile-nav .cc--utility-menu ul li .utility-button-wrapper .utility-button span {
		color: white;
		cursor: default;
		padding: 0;
		text-align: left;
	}
	#l--main-header-basic .mobile-nav .cc--utility-menu ul li .utility-button-wrapper .submenu {
		padding-left: 1rem;
	}
}

/* Main Menu Hack */
@media screen and (min-width: 1024px) {
	#l--main-header-basic .main-nav-container .branding-mainmenu-container .cc--main-menu .c--main-menu ul ul li:nth-last-child(2) > .submenus-wrapper,
	#l--main-header-basic .main-nav-container .branding-mainmenu-container .cc--main-menu .c--main-menu ul ul li:nth-last-child(3) > .submenus-wrapper {
		left: 100%;
		right: 100%;
	}
}



/* ANCHOR LINK HACK */
html {
	scroll-padding-top: 10.5rem;
}
 
@media screen and (min-width: 768px) {
	html {
		scroll-padding-top: 6.875rem;
	}
}

@media screen and (min-width: 1024px) {
  html {
	 scroll-padding-top: 12.25rem;
	}
}



/* FEATURED SUMMARIES HACKS */

/* Cursor Hack */
/* I think this shows appropriate cursor when there is no link */
.paragraph--type--featured-summaries article .image-link[data-href=""] {
	cursor: initial;
	pointer-events: none;
}

.paragraph--type--featured-summaries article .f--sub-title a[href=""] {
	pointer-events: none;
}

/* Top Padding Hack */
/*Adds top padding when a Featured Summaries component with a bacackground color follows a Rich Text or Full HTML component */

.cc--rich-text + .cc--featured-summaries .c--featured-summaries .inner-wrapper {
	padding-top: 4.375rem;
}

/* Vertical Cursor HackHack */
/* Allows for vertical alignment of featured summaries */

@media screen and (min-width: 768px) {
	.cc--featured-summaries .c--featured-summaries #vertical + .inner-wrapper .header-text-container {
		margin-left: 0;
		margin-right: 0;
		max-width: 100%
	}

	.cc--featured-summaries .c--featured-summaries #vertical + .inner-wrapper .cards-list {
		display: block;
	}

	.cc--featured-summaries .c--featured-summaries #vertical + .inner-wrapper .cards-list .cc--news-card {
		margin-right: 0;
		margin-bottom: 0;
		width: 100%;
	}

	.cc--featured-summaries .c--featured-summaries #vertical + .inner-wrapper .cards-list .cc--news-card .c--news-card {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		-ms-flex-direction: row;
		flex-direction: row;
		-webkit-box-pack: justify;
		-ms-flex-pack: justify;
		justify-content: space-between;
	}

	.cc--featured-summaries .c--featured-summaries #vertical + .inner-wrapper .cards-list .cc--news-card .c--news-card {
		margin-bottom: 1.25rem;
		overflow: hidden;
	}

	.cc--featured-summaries .c--featured-summaries #vertical + .inner-wrapper .cards-list .cc--news-card .image-link,
	.cc--featured-summaries .c--featured-summaries #vertical + .inner-wrapper .cards-list .cc--news-card .text-container {
		width: 47.36842%;
	}
}

@media screen and (min-width: 1024px) {
		.cc--featured-summaries .c--featured-summaries #vertical + .inner-wrapper .cards-list .cc--news-card .c--news-card {
			gap: 3rem;
		}
		
	.cc--featured-summaries .c--featured-summaries #vertical + .inner-wrapper .cards-list .cc--news-card .image-link {
		flex: 0 0 439px;
	}
	.cc--featured-summaries .c--featured-summaries #vertical + .inner-wrapper .cards-list .cc--news-card .text-container {
		flex: 1;
		width: auto;
	}
}



/* MINI-SITE HACKS */

/* Hide Scrollbar Hack */
.cc--mini-site-sidebar .c--mini-site-sidebar nav ul.m--mini-site-menu {
		overflow: hidden;
}

/* Underline Hack */
/* Adds underline to sidebar menu title if it is a link */
html[data-whatintent="mouse"] .cc--mini-site-sidebar h2 > a:focus,
html[data-whatintent="mouse"] .cc--mini-site-sidebar h2 > a:hover {
	color: #c03;
	text-decoration: underline;
}

/* Remove Extra Padding Hack */
@media screen and (min-width: 768px) {
	.mini-site-section .cc--link-grid .outer-wrapper .inner-wrapper {
		padding-right: 0;
		padding-left: 0;
	}
}

@media screen and (min-width: 1024px) {
	.mini-site-section .cc--link-grid .outer-wrapper .inner-wrapper {
		padding-right: 0;
		padding-left: 0;
	}

/* Link Grid Hack */
/* Changes link grid to be only 3 elements wide instead of 4 */
	.mini-site-section .cc--link-grid .link-list .link-list-wrapper .f--link {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 33.33%;
    flex: 0 0 33.33%;
	}
}




/* RICH TEXT/FULL HTML HACKS */

/* Button Hack */
/* Removes underline from button */
.f--rich-text a.button,
html[data-whatintent="mouse"] .f--rich-text a.button:focus,
html[data-whatintent="mouse"] .f--rich-text a.button:hover {
	text-decoration: none;
}

/* H2 Size Hack */
/* Changes size of H2 tag to be consistent with other components */
@media screen and (min-width: 1024px) {
	.f--rich-text h2 {
		font-size: 3.125rem;
		line-height: 1.16;
	}
}




/* FOOTER HACKS */

/* Changes bottom margin of address list */
.cc--basic-footer .c--basic-footer .cc--footer-menu.supplemental-menu nav ul {
	display: block;
	margin-bottom: 2rem;
}

/* Changes bottom margin of item in address list*/
.cc--basic-footer .c--basic-footer .cc--footer-menu.supplemental-menu nav ul li {
	display: block;
	margin-bottom: 0;
}

/* Removes line after item in address list  */
.cc--basic-footer .c--basic-footer .cc--footer-menu.supplemental-menu nav ul li::after {
	padding-right: 0;
	padding-left: 0;
	content: '';
}

/* Adds underline to footer links */
#l--main-footer-basic a {
	text-decoration: underline;
	text-decoration-color: #aaa;
}

/* Changes color of footer links underline */
#l--main-footer-basic a:focus,
#l--main-footer-basic a:hover {
	text-decoration-color: white;
}

/* Hides campus block and connect block header */
#block-campus,
#connect-section-title {
	display: none;
}

/* Changes width of logo */
.cc--basic-footer .c--basic-footer .cc--basic-branding-footer a img {
	width: 276px;
}

/* Changes font size of headings */
.cc--basic-footer .c--basic-footer .connect-menu-section h2,
.cc--basic-footer .c--basic-footer .cc--footer-menu h3 {
	font-size: 1rem;
}

/* Changes width of list items */
.cc--basic-footer .c--basic-footer .footer-middle .cc--footer-menu nav ul li,
.cc--basic-footer .c--basic-footer .footer-middle .cc--footer-menu ul li {
	width: 100%;
}

/* set max width of social icon area */
.cc--footer-social {
	max-width: 50%;
}

/* Changes spacing below last notices list item and removes border */
.cc--basic-footer .c--basic-footer .cc--footer-menu.notices-menu ul li:nth-child(1) {
	border-bottom: none;
	margin-bottom: 0.9375rem;
	padding-bottom: 0;
}

/* Changes spacing of social media icons */
.cc--footer-social .footer-social-container .social-media-links--platforms {
	gap: 2rem;
	justify-content: center;
}

/* Changes size of social media icons */
.cc--footer-social .footer-social-container .social-media-links--platforms > li .fa svg {
	height: 2rem;
}

@media screen and (min-width: 768px) {
	/* Changes padding of middle footer area */
	.cc--basic-footer .c--basic-footer .footer-middle {
		padding-bottom: 1.75rem;
		padding-top: 0;
	}

	/* I don't remember what this is for */
	#block-connect .menu-wrapper {
		display: block;
	}
	
	/* Changes padding of social media area */
	.cc--basic-footer .c--basic-footer .footer-bottom .social-newsletter-container {
		padding-bottom: 1.25rem;
	}
	
	/* Changes marginb below last notices list item */
	.cc--basic-footer .c--basic-footer .cc--footer-menu.notices-menu ul li:nth-child(1) {
		margin-bottom: 1.25rem;
	}
	
	/* Centers social media icons */
	.cc--footer-social {
		margin-left: auto;
		margin-right: auto;
	}

}

@media (min-width: 1024px) {
	/* Changes width of locations block */
	#block-locations {
		width: calc(33.33333% - 2rem);
	}
	
	/* Changes margin of address list */
	.cc--basic-footer .c--basic-footer .cc--footer-menu.supplemental-menu nav ul {
		margin-bottom: 3rem;
	}

	/* Changes margin of logo */
	.cc--basic-footer .c--basic-footer .cc--basic-branding-footer a img {
		margin-bottom: 3.5rem;
	}
	
	/* Changes spacing and padding of middle footer section */
	.cc--basic-footer .c--basic-footer .footer-middle {
		gap: 2rem;
		justify-content: space-between;
		padding-bottom: 1.75rem;
	}
	
	/* Changes paddign and converts footer to 3 columns */
	.cc--basic-footer .c--basic-footer .cc--footer-menu.academic-menu,
	.cc--basic-footer .c--basic-footer .cc--footer-menu.campus-menu,
	.cc--basic-footer .c--basic-footer .connect-menu-section,
	.cc--basic-footer .c--basic-footer .cc--footer-menu.notices-menu {
		padding: 0;
		width: calc(33.33333% - 2rem);
	}
	
	/* Changes padding and sets with of footer menus */
	.cc--basic-footer .c--basic-footer .connect-menu-section .menu-wrapper .cc--footer-menu {
		padding-right: 0;
		width: 100%;
	}

}



/* SECONDARY NAV HACK */

/* Hack to keep Secondary Nav from going off screen */

@media screen and (min-width: 1024px) {
	.cc--secondary-menu ul {
		flex-wrap: wrap;
	}
	.cc--secondary-header .secondary-nav-container .branding-secondarymenu-container .branding-secondarymenu-container-inner .inner-wrapper,
	.cc--secondary-menu {
		height: auto;
	}
}



/* MISC ENHANCEMENTS */

/* Box Menu */
/* Currently supports 2-6-column layouts with the gird-width-# class */
ol.box-menu,
ul.box-menu {
	list-style-type: none;
	margin-left: 0
}

.box-menu li {
	display: block;
	margin-bottom: 1rem;
}

.f--rich-text ul.box-menu > li::before,
.cc--accordion .c--accordion .accordion-list .accordion-list-item .accordion-panel ul.box-menu > li::before,
.box-menu li:before {
	content: none;
}

.box-menu > li a {
	background: transparent;
	border: 2px solid #c03;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px;
	box-shadow: none;
	color: #0a0a0a;
  	display: block;
	font-size: 1rem;
	font-weight: bold;
	letter-spacing: 0;
 	line-height: 1.1875;
	padding: 1rem 1.5rem; 
	text-align: center;
	text-decoration: none; 
	text-shadow: none;
	text-transform: none;
	  width: 100%;
}

.box-menu > li a:focus,
.box-menu > li a:hover {
	background: #c03;
	color: white;
	text-decoration: none !important;
	-webkit-transition: background-color 0.1s ease-in-out,color 0.1s ease-in-out;
	transition: background-color 0.1s ease-in-out,color 0.1s ease-in-out;
}

@media screen and (min-width: 48em) {
	ol.box-menu,
	ul.box-menu {
		display: grid;
		gap: 2rem;
	}
	
	.box-menu.grid-width-2,
	.box-menu.grid-width-4,
	.box-menu.grid-width-5 {
		grid-template-columns: repeat(2, 1fr);
	}
	
	.box-menu.grid-width-3,
	.box-menu.grid-width-6 {
		grid-template-columns: repeat(3, 1fr);
	}
	
	.box-menu li {
		align-items: center;
		display: flex;
		justify-content: center;
		min-height: 5rem;
		margin-bottom: 0;
	}

	.box-menu li a {
		align-items: center;
		display: flex;
		height: 100%;
		justify-content: center;
		padding: 1rem;
		text-align: center;
	}
	
	.box-menu.centered-text li a {
		padding: 1rem;
		text-align: center;
	}
}

@media screen and (min-width: 64em) {
	.box-menu.grid-width-4 {
		grid-template-columns: repeat(4, 1fr);
	}

	.box-menu.grid-width-5 {
		grid-template-columns: repeat(5, 1fr);
	}

	.box-menu.grid-width-6 {
		grid-template-columns: repeat(6, 1fr);
	}
}


/* Callouts */

.callout {
	padding: 2rem;
}

.f--rich-text .callout h2,
.callout h3 {
	margin-top: 0;
}

.f--rich-text p.callout-one-line {
	margin-bottom: 0;
	text-align: center;
}

.f--rich-text .call-out-text {
	background-color: #fce488;
    padding: 1.5rem;
    color: #010203;
}


/* Flex-box */

@media screen and (min-width: 48em) {
	.flex-box {
		align-items: stretch;
		display: flex;
		gap: 2rem;
		justify-content: space-between;
	}
	
	.flex-box > div {
		width: 50%;
	}
}


/* Multi-Column Lists */
/* Currently supports 2-4 column lists */
/* When usign with paragraphs, put the whole collection of parasgraphs into a div, and add the class to the div */

@media (min-width: 768px) {
	.columns-2 {
		columns: 2;
		column-gap: 3rem;
	}
	
	.columns-3 {
		columns: 2;
		column-gap: 2rem;
	}
	
	.columns-4 {
		columns: 2;
		column-gap: 1rem;
	}
	
	:where(.columns-2, .columns-3, .columns-4) :where(li, p) {
		-webkit-column-break-inside: avoid;
		page-break-inside: avoid;
		break-inside: avoid;
	}
}

@media (min-width: 1024px) {
	.columns-3 {
		columns: 2;
		column-gap: 2rem;
	}
	
	.columns-4 {
		columns: 3;
		column-gap: 1rem;
	}
}

@media (min-width: 1200px) {
	.columns-3 {
		columns: 3;
		column-gap: 2rem;
	}
	
	.columns-4 {
		columns: 4;
		column-gap: 1rem;
	}
}


/* Tables */

.f--rich-text table,
.cc--accordion .c--accordion .accordion-list .accordion-list-item .accordion-panel table {
	width: 100%;
}

.f--rich-text table caption,
.cc--accordion .c--accordion .accordion-list .accordion-list-item .accordion-panel table caption {
	background: #444;
	color: white;
	font-size: 1.25rem;
	font-weight: bold;
}

.f--rich-text table th,
.cc--accordion .c--accordion .accordion-list .accordion-list-item .accordion-panel table th {
	font-weight: bold;
}

.f--rich-text thead,
.cc--accordion .c--accordion .accordion-list .accordion-list-item .accordion-panel thead {
	background: #efefef;
}

.f--rich-text thead th,
.cc--accordion .c--accordion .accordion-list .accordion-list-item .accordion-panel thead th {
	min-width: 5rem; /* Needed for Credits column in Core Curriculum tables */
	text-align: center;
	vertical-align: middle;
}

.f--rich-text tfoot th,
.f--rich-text tfoot td,
.cc--accordion .c--accordion .accordion-list .accordion-list-item .accordion-panel thead th,
.cc--accordion .c--accordion .accordion-list .accordion-list-item .accordion-panel thead td {
	font-weight: bold;
}


/* Etc. */

.important {
	color: #8e0023;
	font-style: italic;
	font-weight: bold;
}

.highlight {
	background: #ff0;
}

.fall {
	background: #8b4513;
}

.spring {
	background: #556b2f;
}

.fall,
.spring {
	color: white;
	font-weight: bold;
	margin-left: .25rem;
	padding: 0 .375rem;
}