/* CSS Document */
/* Apply Catamaran font globally */
body {
  font-family: 'Catamaran', Helvetica, Tahoma, Geneva, Arial, sans-serif;
	font-size: 1.0rem;
    color: #232529;
    background: #cccccc;
}

html { box-sizing: border-box; }
*, *::before, *::after { box-sizing: inherit; }

.container{
	--gutter-x: 0;
}
/* Optional: emphasize headings */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Catamaran', Helvetica, Tahoma, Geneva, Arial, sans-serif;
}

a {
    color: #233566;
}

h1 {
	font-size: 2.5rem;
	font-weight:600;
	line-height: 2.5rem;
	margin-top: 2.75rem;
	margin-bottom: 0.625rem;
	padding-bottom: 0.25rem;
}
/* Set standard paragraph text size sitewide */
p {
  font-size: 1.0rem;
	line-height: 1.6;
}


.dj-megamenu-default li a.dj-up_a {
    font-size: 1rem;
}

#dj-megamenu550, #dj-megamenu550sticky {
    background: rgba(35, 53, 102, 1);
}

.container-header nav{
	margin-top:0;
}
/* Ensure h3 tags in footer modules are 1.5em */
footer.container-footer.full-width .moduletable h2 {
  font-size: 1.5rem;
	text-align:center;
}
footer.container-footer.full-width .moduletable p {
  font-size: 1.0rem;
	text-align:center;
}


.skip-link {
  position: absolute;
  left: -999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
  z-index: 1000;
  background: #000;
  color: #fff;
  padding: 0.5rem 1rem;
  text-decoration: none;
}

.skip-link:focus {
  left: 1rem;
  top: 1rem;
  width: auto;
  height: auto;
  background: #004080;
  color: #fff;
}




/* Style the entire header element */
header.container-header.full-width {
  background-image: none !important;
  color: #ffffff !important;
  background: #233566;
}
.dj-megamenu-default {
	background: #233566;
}

/* Style any links inside the header */


.header-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  padding-right: 2rem;
}

header.container-header.full-width .header-row {
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 1rem;
}

.logo-area {
  flex: 0 0 30%;
  max-width: 30%;
  text-align: left;
}

.quick-help-area {
  flex: 0 0 70%;
  max-width: 70%;
  text-align: right;
}

#search-container {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    justify-content: flex-end; /* keep content right-aligned inside container */
    margin-left: auto;         /* pushes search to the far right in flex parent */
    margin-right: 0;
}

@media (max-width: 768px) {
  #search-container {
    display: flex;              /* block-level flex so parent text-align won’t center it */
    margin-left: auto;          /* push to the right in flex rows */
    margin-right: 0;
    justify-content: flex-end;  /* keep contents on the right within the container */
    text-align: right;          /* belt-and-suspenders */
    flex: 0 0 auto;             /* prevent stretching */
  }
}

/* Keep the search pinned right inside quick-help-area on mobile */
@media (max-width: 768px) {
  .quick-help-area {
    /* override the centering applied elsewhere */
    text-align: right !important;

    /* make this block a flex row so we can push the search to the edge */
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center;
  }

  /* ensure the search container doesn’t stretch or get centered */
  .quick-help-area #search-container {
    margin-left: auto !important;
    margin-right: 0 !important;
    display: inline-flex !important;
    justify-content: flex-end;
    flex: 0 0 auto; /* don’t grow to full width */
  }
}

#g-search {
    display: inline-flex;
    margin: 0;
    padding: 0;
}

#g-search input[type="search"] {
    max-width: 150px;
    font-size: 14px;
    padding: 0.25rem;
    border: 1px solid #ddd;
    border-radius: 3px;
    background-color: #fff;
    color: rgb(68, 102, 132);
}

/* Make the header a no-wrap flex row with space between */
.container-header .header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;        /* <- prevents stacking */
  gap: .5rem;               /* optional breathing room */
}

/* Logo block: allow it to shrink a bit, not fixed width */
.container-header .logo-area {
  flex: 0 1 auto;           /* can shrink if needed */
  min-width: 0;             /* enables shrink in flexbox */
  margin-top: .5rem;
}

/* Search (quick help) block: stick to the right, don’t grow full width */
.container-header .quick-help-area {
  display: flex;            /* keep internal items aligned */
  justify-content: flex-end;
  align-items: center;
  flex: 0 1 auto;           /* can shrink if needed */
  min-width: 0;             /* enables shrink instead of wrapping */
  margin-left: auto;        /* pushes it to the far right */
}

/* Keep the search container compact */
#search-container {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  flex: 0 0 auto;           /* don’t let it take over the row */
}

/* At 525px and below: stack vertically */
@media (max-width: 425px) {
  .container-header .header-row {
    flex-wrap: wrap; /* allow wrapping below this width */
  }

  .container-header .logo-area,
  .container-header .quick-help-area {
    flex: 0 0 100%; /* full width for both */
    max-width: 100%;
  }

  .container-header .quick-help-area {
    justify-content: center; /* center search on narrow screens */
    margin-left: 0;
  }
}

/* Constrain the logo image so it can shrink on tiny screens */
.container-header .logo-area img {
  max-width: 100%;
  height: auto;
}
/* Global logo sizing */
a.brand-logo img {
  height: 53px;   /* set the new visual height you want */
  width: auto;    /* keep aspect ratio */
}


/* Style emergency message area */
header .container.emergency-message, .debug {
    background-color: #ffffff !important;
    color: #000000 !important;
    padding: 1rem !important;
    border-bottom: 1px solid #ccc;
}


.container-header {
	background-image: none !important;
	background-color: #00000000 !important;
}

.container-header .container{
	background:#233566
}



@media (min-width: 1200px) {
  :root { --cta-overlap: 180px; }  /* tune 160–220 */

  /* layer header above hero */
  header { position: relative; z-index: 40; }

  /* visually pull header over hero without shifting the rest of the page */
  header { margin-bottom: calc(-1 * var(--cta-overlap)); }
}

@media (max-width: 1100px) {
  .header-cta-nav {
    display: none;
    visibility: hidden;
  }
}

/* Utility button look: outline style that fits college sites well */
.btn-utility {
  display: inline-block;
  padding: .5rem 1rem;
  border-right-width: 1px;
  background: transparent;
  color: var(--cassiopeia-color-primary, #0d6efd);
  text-decoration: none;
  line-height: 1.2;
}



/* Make sure the group aligns with header content width */
.site-header__cta-group {
  flex: 0 0 auto;
  margin-left: clamp(1rem, 3vw, 2.5rem); /* adjust until it looks like “before” */
}

/* If your header uses a container, optionally constrain width */
@media (min-width: 992px) {
  .site-header__cta-group .header-cta-nav {
    max-width: var(--container-max, 1140px); /* adjust or remove */
    margin: 0 auto;
    padding: 0 1rem;
  }
}

.scc-gold-bar  {
  height: 16px;               /* thickness of the gold bar */
  background: #C7a65f;       /* SCC gold – tweak as needed */
  
}

/* Container spacing under the gold bar */
.site-header__cta-group {
	background-color: transparent;
}

/* Layout: stack on mobile, row on tablet+ */
.header-cta-list {
  display: flex;
  flex-direction: column;
  list-style: none;
  padding: 0;
  margin: 0;
}

@media (min-width: 768px) {
  .header-cta-list {
    flex-direction: row;
    justify-content: flex-end;
  }
}

/* Don’t force full width; let the container control it */
.site-header__cta-group .header-cta-nav { width: auto; }

/* Normalize button height so Apply matches the others */
.header-cta-list .btn,
.header-cta-list .btn-utility {
  padding: .5rem 1rem;
  line-height: 1.25;
}

/* Base CTA styles */
.cta-utility,
.cta-primary {
  display: inline-block;
  padding: .5rem 1rem;
  text-decoration: none;
}

/* Outline style */
.cta-utility {
  border-right: 1px solid #D2CDCD;
  background-color:#f2f2f2;
  color: #233566;
}


/* Desktop display Filled style */
.cta-primary {
  background: #233566 !important;
  color: #f2f2f2 !important;
}
/* Over ride template hover */
li a.cta-primary:hover {
  background: #233566;
  color: #f2f2f2;
}
/* Mobile display Hamburger Filled style */
a.dj-up_a.CTA{
	 background: #f2f2f2 !important;
  	color: #233566 !important;
	text-align: center;
	/* Remove real border-left */
  border-left: none;
	 /* Simulated inset border */
  	box-shadow: inset 1px 0 0 #233566;
}
a.dj-up_a.CTA:hover{
	 background: #D9D9D9 !important;
	 color: #000000 !important;
}
a.dj-up_a.CTA-Apply{
	 background: #233566 !important;
  color: #f2f2f2 !important;
	text-align: center;
}
a.dj-up_a.CTA-Apply:hover{
	 background: #1D2C55 !important;
}

/*
.btn-outline-primary{
	background-color:#f2f2f2;
	color: #233566;
}
a .btn-outline-primary {
	color: #233566;
}

.btn .btn-primary{
	background-color: #233566;
	color:#f2f2f2;
}
a .btn-primary{
	color:#f2f2f2;
}

.btn.btn-primary a:hov{
	font-weight: 700;
}
*/

@media (min-width: 992px) {
  .site-header__cta-group .header-cta-nav {
    max-width: var(--container-max, 1140px);
    margin: 0 auto;
    padding: 0 1rem;
  }
}

/* Make the main content area white */
main.site-main {
  background-color: #ffffff !important;
  color: #000000; /* Optional: ensure text is readable */
}

.com-content-article.item-page{
	padding: 0 2rem 2rem 2rem;
}

#maincontent .row {
   --gutter-x: 0;
}
	
.gray-box {
    color: #233566;
	background: #ededed;
	padding: 1.0rem;
    margin: 0.625rem;
}
.gray-box h2{
	margin-top:0;
	font-size: 1.2rem;
    text-transform: uppercase;
}
.gray-box ul{
	margin-left: 1rem;
    margin-bottom: 1.5rem;
}

.gray-box a {
    text-decoration: none;
    box-shadow: none;
}

.gray-box a:hover {
    text-decoration: none;
}

/* Layout column stays a clean container */
aside.col-md-3.sidebar-region { padding: 0; }



@media (min-width: 1200px) {
  /* Pad the inner wrapper without affecting the grid math */
	.sidebar-region .sidebar-inner {
	  box-sizing: border-box;
	  padding-left: 25px;
	padding-top: 3rem;
	}
}
/* If the module chrome ("card") paints a background, keep it seamless */
.sidebar-region { background: var(--sidebar-bg, transparent); }
.sidebar-region .sidebar-inner .card { background-clip: border-box; }


/* Aside menu: improve background color on hover */
/* Hover style: accessible dark gray full width */
aside.sidebar-a .mod-menu li a:hover,
aside.sidebar-a .mod-menu li a:focus {
  background-color: #f8f8f8; /* WCAG AA compliant contrast */
  color: #000;
}

/* Active/current page style */
aside.sidebar-a .mod-menu li.current > a,
aside.sidebar-a .mod-menu li.active > a {
  background-color: #d7d7d7; /* dark gray */
  color: #020202;
  font-weight: bold;
	
  /*border-left: 4px solid #C7A65F; /* SCC gold indicator */
}

/* SCC News double arrows to left of news article titles on home page */
.moduletable .category-module li a::before{
	color: rgb(35, 53, 102);
    font-family: FontAwesome;
    content: "-";
    margin-right: 0.5rem;
}

/* Reset list spacing */
aside.sidebar-a .mod-menu,
aside.sidebar-a .mod-menu li {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Make link fill full width */
/* Force full-width clickable link */
aside.sidebar-a .mod-menu li a {
  display: block;
  width: 100%;
  padding: 0.75rem 1rem;
  text-decoration: none;
  color: #233566;
  box-sizing: border-box;
}

.expanded.container-expanded.full-width {
  background-color: #EAEAEA !important;
  background-image: none !important;
  border-top: 0 !important; /* Optional: removes any border line */
	margin-top: 0;
}

/* expanded grid layout */


.scc-expanded-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    padding: 2rem;
    background-color: #EAEAEA;
    color: #302E38;
}
.scc-expanded-grid > * {
  flex: 1 1 30%; /* three equal columns */
}
/* Expanded grid: match footer stacking breakpoint */
@media (max-width: 768px) {
  .scc-expanded-grid > * {
    flex: 1 1 100%;   /* full-width blocks on small screens */
  }
}



.scc-factoid {
	padding: 1.5rem;
    background: #B37A00;
    color: #FFFFFF;
}

.factoid-title-icon i.fa.fa-compass {
    display: inline-block;
    width: 100%;
    font-size: 5rem;
    text-align: center;
}

.factoid-description {
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.25;
    text-align: center;
}

/* Vertically (and horizontally) center the contents in the factoid */
.scc-factoid {
  display: grid;
  place-items: center;   /* centers both axes */
  text-align: center;    /* keep text centered */
  min-height: 12rem;     /* tweak as desired */
}

/* Optional: small spacing tweak under the icon */
.scc-factoid  {
  line-height: 1;
  margin-bottom: .5rem;
}
 .box2.moduletable{/*Make Text in box2 style darker*/
 	color:#233566;
 }
  .boxgold, .boxgold a{
	  background-color:#c7a65f;
 	color:#fff;
	text-decoration:none;
 }
  .boxgold a:hover{
 	color:#fff;
	text-decoration:underline;
  }

#mod-custom260 {
    padding-left: 10%;
}

.button {
    display: inline-block;
    font-family: "catamaran", "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif;
    font-weight: 600;
    color: #ffffff !important;
    background: #233566;
    margin: 0 0 0.5rem 0;
    padding: 0.75rem 2rem .5rem 2rem;
    
    border-radius: 2rem;
    vertical-align: middle;
    text-shadow: none;
    transition: all 0.2s;
}
.button.button-block {
    display: block;
    text-align: center;
}

*, *::before, *::after {
    box-sizing: inherit;
}

.button-right{
	float: right;
}
.button.button-grey{
    background: #ededed;
    border-color: #ededed;
	text-decoration:none;
	font-size: 1.1rem;
    font-weight: 500;
}
.button.button-grey a, .button.button-blue a{
	text-decoration:none;
	color: #233566;
}
.button.button-grey a:hover, .button.button-grey:active, .button.button-grey:focus, .button.button-grey:focus-within{
	color:#FFFFFF;
	background: #6d8082;
    border-color: #6d8082;
}
.button.button-grey-dk{
    background: #808080;
    border-color: #ededed;
	text-decoration:none;
	font-size: 1.1rem;
    font-weight: 600;
	
	
}
.button.button-grey-dk a{
	text-decoration:none;
	color:#FFFFFF;
}
.button.button-grey-dk:hover{
	color:#FFFFFF;
	background-color:#5D6363;
	font-size: 1.3rem;
}

.item-page a.button{
	 text-decoration: none;	 
 }

a.button-4{
  display:inline-flex;        /* makes the whole pill clickable */
  align-items:center;
  padding:.75rem 1.25rem;
  border-radius:9999px;
  text-decoration:none;
  transition:background-color .2s ease, color .2s ease;
  background:#e7eefb;         /* normal bg */
  color:#0d2e6b;              /* normal text */
}
a.button-4:hover, a.button-4:focus-visible{
  background:#0d2e6b;         /* dark blue */
  color:#fff !important;                  /* white text */
}

.button.button-4 a, .button.button-3 a{
text-decoration: none;	
}

a.button.button-4{
	text-decoration:none;
}

a.button.button-block.button-blue{
	font-size: 1.1rem;
	background: #233566;
	text-decoration: none;
}
a:hover.button.button-block.button-blue{
	font-size: 1.3rem;
	background: #162140;
}
a.button.button-block.button-blue.button-small{
	font-size: 0.8rem;
	background: #233566;
}
a:hover.button.button-block.button-blue.button-small{
	font-size: 1.0rem;
	background: #162140;
}
a.button.button-block.button-blue.button-small, a:hover.button.button-block.button-blue.button-small{
    padding: 0.25rem 1rem;
    padding-bottom: 0.4rem;
    border-radius: 1rem;
	width: 40%;
}
@media screen and (max-width: 768px) and (min-width: 100px){
	 a.button.button-block.button-blue.button-small, a:hover.button.button-block.button-blue.button-small {
   		 width: 80%;
	}
}

.box-grey > .g-content{
	background: #eaeaea;
	color: #565657;
}
.box-grey > .g-content a{
	color: #565657;
	text-decoration: underline;
}
.box-grey > .g-content a:hover{
	color: #232529;
	text-decoration: none;
}

footer.container-footer.full-width {
  background-color: #4D4D4D !important;
  background-image: none !important;
  color: #ffffff !important;
  border-top: 0 !important; /* Optional: removes any border line */
	margin-top: 0;
}
/* Footer grid layout */
.scc-footer-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  padding: 2rem;
  background-color: #4D4D4D;
  color: #ffffff;
}
.scc-footer-grid .moduletable h3 {
  text-transform: uppercase;
}

.scc-footer-grid > * {
  flex: 1 1 30%; /* three equal columns */
}
	
#copyright{
	text-align: center;
	color: #f2efef;
	font-weight: 400;
	font-size: 1rem;
	padding-bottom: 2rem;
}


	
/* MAIN MENU ---- Apply background and font styles directly to the menu */
ul.dj-megamenu {
  background: #233566 !important;
  font-family: "Source Sans Pro", sans-serif !important;
  font-size: 1rem !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Top-level items */
ul.dj-megamenu > li {
  display: inline-block !important;
  margin: 0 !important;
  position: relative !important;
}

/* Top-level menu links */

.dj-megamenu-default li:hover a.dj-up_a{
	background:#233566 !important;
}

ul.dj-megamenu > li > a.dj-up_a {
  font-family: "Source Sans Pro", sans-serif !important;
  font-size: 1rem !important;
  font-weight: 400 !important;
  color: white !important;
  background-color: #233566 !important; /* same as nav background */
  margin: 0 !important;
  display: block !important;
  text-decoration: none !important;
  box-sizing: border-box !important;
  text-transform: uppercase;
}

/* Kill the DJ MegaMenu blue gradient on top-level items */
.dj-megamenu-default li:hover > a.dj-up_a,
.dj-megamenu-default li.hover > a.dj-up_a,
.dj-megamenu-default li.active > a.dj-up_a,
.dj-megamenu-default li.current > a.dj-up_a,
.dj-megamenu-default li.alias-parent-active > a.dj-up_a {
  background-image: none !important;
  background-color: #4b4b4b !important; /* your dark gray */
  color: #fff !important;
  border-left-color: transparent !important;
}

/* Optional: subtitle color when hovered/active */
.dj-megamenu-default li:hover a.dj-up_a small.subtitle,
.dj-megamenu-default li.active a.dj-up_a small.subtitle {
  color: #e5e5e5 !important;
}

/* Quick-help menu links mixed case */
.cassio-quick-help ul.dj-megamenu > li > a.dj-up_a {
	 text-transform:none;
}

.quick-help-menu li a:hover{
	background:#192544;
}

/* Quick-help menu items in main menu 
.quick-only {
  display: none !important;
}

/* Show on small screens (when menu is collapsed) 
@media (max-width: 992px) {
  .quick-only {
    display: list-item !important;
  }
}
*/

.dj-megamenu-default.dj-megamenu-wcag *:focus, .dj-megamenu-default.dj-megamenu-wcag *:focus-visible, .dj-megamenu-clean.dj-megamenu-wcag *:focus, .dj-megamenu-clean.dj-megamenu-wcag *:focus-visible {
    outline: 2px solid #746f91 !important;
    outline-offset: -2px !important;
}

.scc-website #g-page-surround {
    margin-top: 0rem;
    padding-top: 0rem;
    margin-left: auto;
    margin-right: auto;
    max-width: 1600px;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    border-left-style: solid;
    border-right-style: solid;
    border-color: #5a4f80;
    border-width: 1px;
}

.gantry-right {
    float: right;
    margin-left: 5px;
}
.gantry-width-30 {
    width: 30%;
}


#dj-megamenu653 .dj-megamenu-default li.active a.dj-up_a {
	background: rgba(25, 37, 68, 1);
}

.dj-megamenu-default li.active > a.dj-up_a,
.dj-megamenu-default li.active > a.dj-up_a.active {
  background: none !important;
  background-color: rgba(25, 37, 68, 1) !important;
  color: #ffffff !important;
  border-left-color: rgba(25, 37, 68, 1) !important;
}
	
.dj-megamenu-default li.active:hover > a.dj-up_a {
  background-color: rgba(37, 37, 68, 1) !important;
}
	
#dj-megamenu653, #dj-megamenu550sticky {
    background: rgba(35, 53, 102, 1);
}
	
/* Hover state for top-level menu */
ul.dj-megamenu > li > a.dj-up_a:hover,
ul.dj-megamenu > li > a.dj-up_a:focus {
	border-left:rgba(25, 37, 68, 1) !important;
  	background-color: rgba(25, 37, 68, 1) !important;  /* SCC-like hover */
  	color: #ffffff !important;
}
	.dj-megamenu-default>li>a.dj-up_a>.arrow {
		transform:none !important;
	}



/* Program table look + zebra striping */
.prog-table a{text-decoration:none}
.prog-table a:hover{text-decoration:underline;text-decoration-color:#AEAEAE}
.prog-table .deptNameCell{padding-left:0.5rem}
.prog-table tbody tr:nth-child(2n+1) td{background:#f6f6f6}
.prog-table th{padding:0.5rem 0 0.5rem 0;border:0}
.prog-table th{font-size:0.75rem;text-align:center}
.prog-table th h2{font-size:1.25rem;margin:0;font-weight:600;text-align:left}
.prog-table .campus{text-align:center}

/* Optional: ensure full width table */
.prog-table{width:100%}

/* Dropdown container */
.dj-subwrap {
  background-color: #2a2a2a !important;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2) !important;
  padding: 0 !important;
  z-index: 1000;
}

/* Submenu styling */
ul.dj-submenu {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

ul.dj-submenu li a {
  background-color: #2E2E2E !important;  /* base background */
  color: white !important;
}

ul.dj-submenu li a:hover,
ul.dj-submenu li a:focus {
  background-color: #414042 !important;  /* SCC hover match */
  color: #d6d6d6 !important;
}

/* Optional: style arrow icon if it's using <span class="arrow"> */
.dj-up_a .arrow {
  margin-left: 0.25rem !important;
 
  display: inline-block;
  vertical-align: bottom;
}
	
	ul.dj-submenu li {
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
}

ul.dj-submenu li a {
  margin: 0 !important;
  border: none !important;
  display: block !important;
  box-sizing: border-box !important;
}
	
	ul.dj-submenu li a {
  line-height: 1.5rem !important;
}
/* --------------- */
.quick-help-menu {
  display: flex;
  justify-content: flex-end;
  background: transparent;
  font-family: inherit;
}

.help-menu-list {
  display: flex;
  gap: 1rem;
  list-style: none;
  margin: 0;
  padding: 0;
  align-items: center;
}

.help-menu-list li {
  position: relative;
}


.help-menu-link,
.submenu-toggle {
  display: inline-block;
  color: #fff !important;
  font-size: 0.8125rem !important;
  font-weight: 600 !important;
  padding: 0.5rem !important;
  text-decoration: none;
  background: none;
  border: none;
  transition: background-color 0.2s ease;
}

.help-menu-link:hover,
.submenu-toggle:hover,
.help-menu-link:focus,
.submenu-toggle:focus {
  background-color: rgba(25, 37, 68, 1);
  border-radius: 4px;
  outline: none;
	border: 5px;
	border-color: #736f8f;
}

/* When submenu is open, keep the top item dark like main menu */
.submenu-toggle[aria-expanded="true"] {
	background: #1b2542;
	
  border-radius: 4px;
	
}

#myscc-submenu li a{
	background: #2e2e2e;
}
#myscc-submenu li a:hover{
	background: #414042;
}
/* Dropdown styling */
.submenu-list {
  position: absolute;
  top: 100%;
  left: 0;
  background: #2e2e2e;
  list-style: none;
  padding: 0.5rem 0;
  margin: 0;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25);
  border-radius: 0.25rem;
  z-index: 1000;
  min-width: 150px;
}

.submenu-list[hidden] {
  display: none;
}

.submenu-list a {
  display: block;
  padding: 0.5rem 1rem;
  color: #eee !important;
  font-size: 0.9rem;
  text-decoration: none;
  text-align: left;
}

.submenu-list a:hover {
  background-color: #414042;
}

.help-menu-search input[type="search"] {
  padding: 0.3rem 0.5rem;
  border-radius: 4px;
  border: none;
  font-size: 0.8125rem;
}

.scc-table table {
    /* border-collapse: collapse; */
    border-spacing: 0;
    width: 100%;
}

.scc-table thead, tbody, tfoot, tr, td, th {
    border-color: inherit;
    border-style: solid;
    border-width: thin;
}
.scc-table tbody {
    display: table-row-group;
    vertical-align: middle;
    unicode-bidi: isolate;
    border-color: inherit;
}

.scc-table tr {
    display: table-row;
    vertical-align: inherit;
    unicode-bidi: isolate;
    border-color: inherit;
}

.scc-table th {
    background: rgba(0, 0, 0, 0.1);
    padding: 0.5rem;
}

.scc-table td{
    padding: 0.5rem;
}

.com-content-article h2{
	margin-top:.75rem;
}

.com-content-article .info h2 {
	margin-top:.5rem;
}

.info{
	background: #eaeaea;
	padding: 15px;
	border-radius: 5px;
	margin-bottom:1rem;
}

div.feature-box {
    background: #f2f2f2;
    padding: 15px;
    border-radius: 15px;
}
div.white-box {
    background: #ffffff;
    padding: 15px;
    border-radius: 10px;
}

/* === Dual-column: clean flex layout that truly fills the row === */

/* 0) Kill the old float layout globally */
.dual-column { float: none !important; }

/* 1) Flex row, no negative margins (your container gutters are 0) */
.row-dc { 
	display: grid; 
	grid-template-columns: repeat(2, minmax(0, 1fr)); 
}
.row-dc .dual-column { 
	padding: 15px; 
}

@media (max-width: 1100px) { 
	.row-dc { 
		grid-template-columns: 1fr; 
	} 
}
/* 3) Stack below your breakpoint */

@media (max-width: 1100px) {
  .row-dc .dual-column {
    flex-basis: 100%;
    max-width: 100%;
  }
}

/* 4) Remove leftover float clearfix on a flex container */
.row-dc::after { content: none; }

/* 5) Fix selector typo so this class actually applies */
.expanded.container-expanded.full-width {
  background-color: #EAEAEA !important;
  background-image: none !important;
  border-top: 0 !important;
  margin-top: 0;
}

/* 6) (Optional) Delete/neutralize old float and width-based stack rules */
@media screen and (max-width: 767px) {
  .dual-column { width: auto !important; }        /* legacy override */
}
@media screen and (max-width: 1165px) {
  .prog-page .dual-column { width: auto !important; } /* legacy override */
}


/* Clear floats after the columns */
.row-dc:after {
  content: "";
  display: table;
  clear: both;
}

/* Create gray container for dual columns */
.row-dc.dc-gray{
	background:#f3f3f5;
}

/* Gray background requires padding adjustment for mobile */
@media screen and (max-width: 767px) {
	.dc-gray .dual-column {

		padding-bottom: 1.5rem;
		padding-left: 15px;
		padding-right: 15px;
	}
}

/* Row that contains breadcrumbs (left) and CTAs (right) */
.site-header__utility-row {
  display: flex;
  align-items: center;
  justify-content: flex-start; /* was space-between */
  gap: 1rem;
  padding-block: 0;            /* was .4rem 0 → remove vertical padding */
  padding-inline-end: 2rem;    /* keep your right padding */
}


/* Pull CTAs up to “touch” the gold bar */
.site-header__cta-group {
  margin-left: auto;                      /* <-- moves it to the right edge */
}

/* Clean any default module spacing that might add extra gap */
.site-header__cta-group .moduletable,
.site-header__cta-group > * {
  margin-top: 0;
  padding-top: 0;
}

/* Breadcrumbs area */
.site-breadcrumbs {
  flex: 0 1 clamp(28rem, 48vw, 56rem); /* tune the middle value to taste */
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Tidy default Breadcrumbs module output (Joomla often outputs <ol class="breadcrumb">) */
.site-breadcrumbs .breadcrumb {
  
  background: transparent;
  flex: 1 1 auto;
  min-width: 0;            /* enables ellipsis if you use it */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Keep CTAs visible on desktop, hide below 1200px */
@media (max-width: 1099.98px) {
  .site-header__cta-group {
    display: none;
    transform: none; /* no need to lift when hidden */
  }
}

/* ===== Hero/CTA overlap fix ===== */
@media (min-width: 1100px) {
  :root { --cta-overlap: 180px; } /* tune 160–220 */

  /* 1) Pull the header down over the hero */
  header { position: relative; z-index: 40; margin-bottom: calc(-1 * var(--cta-overlap)); }

  /* 2) DO NOT re-add top padding to <main> (this cancels the overlap) */
  #maincontent.site-main.container { padding-top: 0 !important; margin-top: 0 !important; }

  /* 3) Let the hero show through behind the CTA row */
  .container .site-header__utility-row { background: transparent !important; }
}

/* Tight seam at the gold bar */
.scc-gold-bar { margin-bottom: 0 !important; }

/* Ensure hero stacks below the header, caption above image */
.newsflash-hero { position: relative; z-index: 1; }
.newsflash-hero .newsflash-caption { position: relative; z-index: 2; }

/* Remove undefined lift (or define it); transform is optional and visual only */
.site-header__cta-group { transform: none; }  /* or define a value: :root{ --cta-lift:.4rem } */


/* Optional: prevent long crumb trails from breaking layout */
.site-breadcrumbs ol,
.site-breadcrumbs ul {
  display: flex;
  flex-wrap: nowrap;
  gap: .5rem;
  white-space: nowrap;
  overflow: hidden;
}
.site-breadcrumbs li:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 60vw; /* tweak as needed */
}



/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 767px) {
  .dual-column {
    width: 100%;
	}
}
/* Program Page needs to transition to single column sooner than other pages */
@media screen and (max-width: 1165px) {
  .prog-page .dual-column {
    width: 100%;
	}
}


@media screen and (max-width: 767px) {
    #mod-custom644 .dual-column {
        padding-bottom: 1.5rem;
        padding-left: 1rem;
        padding-right: 1rem;
    }
}



/* Stack columns on smaller screens */
@media (max-width: 768px) {
  .scc-footer-grid > * {
    flex: 1 1 100%;
  }
}

@media (max-width: 768px) {
  .scc-footer-grid > * {
    text-align: center;
    justify-content: center;
  }

  .scc-footer-grid {
    text-align: center;
  }

  .scc-footer-grid .moduletable {
    margin-left: auto;
    margin-right: auto;
  }
}

.card-header.menu-title {
	font-size:1.25rem;
	font-weight:600;
}
.card-header{
	border-bottom:none;
}
.card-body{
	background: #22262A08;
}

a.touch-buffer::before {
  content: "";
  display: block;
  position: absolute;
  top: -10px; bottom: -10px;
  left: -10px; right: -10px;
}
a.touch-buffer {
  position: relative;
  z-index: 1;
}

/* Mobile: stack logo & quick help (assumes a flex parent) */
@media (max-width: 768px) {
  .logo-area,
  .quick-help-area {
    flex: 0 0 100%;
    max-width: 100%;
    text-align: center;
    margin-bottom: 0.5rem;
  }
}

/* Sidebar margins on wide vs narrow */
@media (width >= 1200px) {
  aside.sidebar-a { margin: 0 1rem; }
}
@media (width < 1200px) {
  /* Keep .row as a row; just force full-width cols */
  main .row {
    display: flex;        /* Bootstrap already sets this, but harmless */
    flex-wrap: wrap;
  }
  main .col-md-9,
  main .col-md-3 {
    flex: 0 0 100%;
    max-width: 100%;
    width: 100%;
  }
  aside.sidebar-a {
    margin: 2rem 0 0;     /* clear side margins when stacked */
  }
}

/* Hide mobile menu by default; show under 900px */
#mobileMenuContainer { display: none; }
@media (max-width: 900px) {
  #mobileMenuContainer {
    display: block;
    padding: 1rem;
    margin-bottom: 1rem;
  }
  #mobileNav {
    width: 100%;
    font-size: 1rem;
    padding: 0.5rem;
  }
}

/* Containers: full-bleed below 1600, fixed at/above 1600 */
@media (width < 1600px) {
  .container, .container-sm, .container-md, .container-lg, .container-xl, .container-xxl {
    max-width: none;
  }
}
@media (width >= 1600px) {
  .container, .container-sm, .container-md, .container-lg, .container-xl, .container-xxl {
    max-width: 1600px;
  }
}

/* Hide text visually but keep it for screen readers */
.sr-only {
  position:absolute !important;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}


/* Social list: horizontal, no bullets */
.social-links {
  display: flex;           /* puts items in a row */
  justify-content: center;   /* this centers the row */
  gap: .5rem;              /* space between icons */
  list-style: none;        /* no bullets */
  
  
  align-items: center;
}


.social-links li { list-style: none; }

/* Parent: nuke any inherited inset and center inline content */
nav[aria-labelledby="social-heading"] {
  padding: 0;
  margin: 0;
  text-align: center;
	margin-bottom:1rem;
}

/* Row: shrink to content and center via parent */
nav[aria-labelledby="social-heading"] .social-links {
  display: inline-flex;
  gap: .5rem;
  list-style: none;
  margin: 0;
  padding: 0;
  vertical-align: middle; /* keeps it tidy next to text */
}

/* Make each icon a touch-friendly target (≥24x24) */
.social-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;             
  height: 28px;
  text-decoration: none;
}

/* Icon size (adjust to taste) */
.social-links .fa { font-size: 1.75rem; }


.social-links a:focus {
  outline:2px solid currentColor; outline-offset:2px;
}

/* Non-text contrast: ensure icon color has ≥3:1 contrast with background */
.social-links .fa { color: #DADADA; } /* adjust to meet contrast on your bg */

/* Bulletproof skip link: hidden offscreen until focused */
a.skip-link {
  position: absolute;
  left: -9999px;           /* move off-canvas, not just off viewport */
  top: auto;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;              /* neutralize global a padding */
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);     /* legacy clipping */
  clip-path: inset(50%);   /* modern clipping */
  white-space: nowrap;
  z-index: 1000;
  background: transparent; /* neutralize background if any */
}

/* Reveal on keyboard focus */
a.skip-link:focus,
a.skip-link:focus-visible {
  left: 1rem;
  top: 1rem;
  width: auto;
  height: auto;
  clip: auto;
  clip-path: none;
  padding: .5rem 1rem;
  background: #004080;
  color: #fff;
  text-decoration: none;
  z-index: 10000;          /* above header */
}
/* Prog pages buttons */
#scc_prog_menu{
display:block;
}


/*Programs Areas Menu show on Program Areas page and on all program pages*/
#scc_prog_menu a{
	font-size: 1.0rem;
	display:block;
	padding: 0.25rem 1rem;
    padding-bottom: 0.4rem;
	margin-bottom: 0rem;
	color:#000000;
}

/*Programs Page Only (not Program Areas Page)*/
.expanded #scc_prog_menu a {
	background-color:#DAD5D5;
	border-radius: 1rem;
	width: 100%;
}
.expanded #scc_prog_menu a:hover{
	/*font-size: 1.1rem;*/
	/*background: #162140;*/
	background: #414042;
	padding: 0.25rem 1rem;
    padding-bottom: 0.4rem;
    border-radius: 1rem;
	/*color:#EEEEEE;*/
	color:#d6d6d6;
}

/*Program Areas Page Only (not Program Pages)*/
.com-content-article #scc_prog_menu a {
text-decoration:underline;
}

.com-content-article #scc_prog_menu {
    padding: 0; 
}


@media screen and (min-width: 767px){
#scc_prog_menu{
	padding: 3rem 0rem;
}
}
@media screen and (max-width: 767px) and (min-width: 100px){
	 #scc_prog_menu{
	padding: 0rem 0rem;
}
}

/* Make the entire pill react and be clickable */
.button.button-4{
  padding: 0;                           /* move padding to the link */
  background: transparent;
  color: #233566 !important;            /* override .button's white text */
  border: .5px solid #233566;
  border-radius: 2rem;
}

/* Link fills the pill */
.button.button-4 a{
  display: block;                       /* fills the wrapper */
  padding: 0.75rem 2rem .5rem 2rem;
  border-radius: inherit;
  text-decoration: none;
  color: inherit;                       /* follow container color */
  transition: background-color .2s ease, color .2s ease;
}

/* Hover anywhere inside, or when focused via keyboard */
.button.button-4:hover a,
.button.button-4:focus-within a{
  background: #233566 !important;
  color: #fff !important;
}

/* If you have <strong> inside, ensure it follows the color */
.button.button-4 a > strong { color: inherit; }

/* Make the entire .button-grey pill react (wrapper hover triggers link state) */
.button.button-grey{
  padding: 0;                           /* move padding to the link */
  background: transparent;              /* visuals on the link */
  color: #233566 !important;            /* override .button’s white text */
  border: 1px solid #ededed;
  border-radius: 2rem;
}

.button.button-grey a{
  display: block;                       /* fill the pill */
  padding: 0.75rem 2rem .5rem 2rem;
  border-radius: inherit;
  background: #ededed;                  /* normal bg */
  color: inherit;                       /* follow wrapper color */
  text-decoration: none;
  transition: background-color .2s ease, color .2s ease;
}

/* Hover anywhere inside, or when focused via keyboard */
.button.button-grey:hover a,
.button.button-grey:focus-within a{
  background: #6d8082;
  color: #fff;
}

/* If you ever wrap text in <strong>, keep the color consistent */
.button.button-grey a > strong{ color: inherit; }

.sidebar-a.card.box2{
	margin-bottom: 1rem;
	margin-right: 1rem;
	margin-left: 1rem;
}

.te_trombinoscope.list{
	
	padding:0 2rem;
}

.mod-breadcrumbs__divider .icon-fw{
	width: .5em;
}

/* === Desktop (≥1200px): overlay CTA over hero without touching gold bar === */
@media (min-width: 1100px) {
  /* How far below the bottom of the header row you want the CTA to start */
  :root { --cta-gap: 0px; }  /* try 0 first; bump to 8–24px if you want more space */

  .container.site-header__utility-row {
    position: relative;
    z-index: 35;
    background: transparent !important;
  }

  .site-header__cta-group {
    position: absolute;
    right: clamp(16px, 3vw, 32px);
    top: calc(100% + var(--cta-gap)); /* <-- anchor to the row’s bottom edge */
    bottom: auto;                      /* no bottom anchoring */
    z-index: 45;
    background: transparent;
    transform: none;
  }

  /* Ensure the hero starts right after header; no extra gaps */
  header { position: relative; z-index: 40; margin-bottom: 0 !important; }
  #maincontent.site-main.container { margin-top: 0 !important; padding-top: 0 !important; }

  .newsflash-hero { position: relative; z-index: 1; }
  .newsflash-hero .newsflash-caption { position: relative; z-index: 2; }
}

/* Tight seam at the gold bar */
.scc-gold-bar { margin-bottom: 0 !important; }