/* openCOJ - 16 Mar 2026 */
/* 25 May 2026 - Logo_container img = Combined logo and text */

/*Color and height for header*/
.header {
	background-color: #ffffff;   	/* White background */
/*	margin-top:35px	     */
	margin-bottom: 35px; */		/* Gap between header and column containers to accomodate Search and QuickSearch bars */
	display: flex;			/* V2 - commented out in COJ2*/
  	gap: 20px;			/* V3 - AI suggestion*/
  	padding: 10px 15px;		/* V3 - AI suggestion*/
	flex-wrap: wrap;   		/* V3 - AI ✅ allows wrapping instead of overflow */
	justify-content: flex-start;	/* V3 - AI suggestion*/
}

/*Color for header wrapper*/
.headerWrapper {
	background-color: #ffffff;
	width: 100%;
	height: 130px;			/*Added to accommodate logo white space*/
/*	background-image: url("/custom/web/content/Header_light.png");*/
	background-image: center;
}

.header_container {
	color: #ffffff
}

/*Logo container*/			
.logo_container {
 	padding-left: 10px;		/*default padding-left: 10px ; margin-right:19px*/
	padding-top: 10px;
	margin-right:19px;
/*	margin-left: 10px;*/		/*Not required if use padding*/
/*	margin-top: 10px;*/		/*Not required if use padding*/
}

/*Logo Image*/
.logo_container img {
     	margin-top: 0px;		/*default for flat.css = 5px*/
 	height: 75px;			
    	max-height: 80px;		/*default for flat.css = 80px*/
    	width: auto;			/* maintains aspect ratio */
  	max-width: 550px;   		
/*	display: block;*/		/* REMOVED TO TEST*/
}

/*Lower the position of Main Menu*/
#mainMenuContainer {
  margin: 3px				/* LIVE currently = 5px - check and change if required */
}

/*Color for Welcome text - Orange*/
.welcome {
  padding:5px;
  color:#ff5100
}

/*Color for Log in text - Black*/
.loginLink a {
  color:#000000;
}

/*Color for My Lists text - Black*/
.menuLink a {
  font-size:13px;
  padding:5px;
  color:#000000;
}

/*Color for My Lists text once visited - Black*/
.menuLink a:visited {
  color:#000000;
}

/*Color for Lib Info text - Black*/
#libInfoLink {
  color:#000000;
}

/*Color for Enable Adaptability text - Black*/
.ada_link {
  color:#000000;
}

/*Color for Help circle - Black*/
.fa-question-circle::before {
  color:#000000;
}

/*Color for Pipe separators - White*/
.pipeSeparator-light {
  color:#fff;				/* in V2 no ending ; - does this matter?*/
}

/*Add Search box wrapper - gold*/
#searchBoxWrapper {
	background: #ffb600;
	top: 115px; 			/*original = 85px COJv1 = 95px*/
}

/*Color for the "Search" button - dark grey*/
#searchButton {
    background-color: #53575a;
}

/*Color for "Search" button when you hover your mouse over it - teal*/
#searchButton:hover {
    background-color: #005470;
}

/*The gold border color for the 2 search boxes in the top left*/
#searchBox .dropDown {
    border: 1px solid #ffb600;
}

/*Border around Search field*/
#q {
  border:2px solid #fff;
}

/*The "Advanced search" link*/
#searchBoxAdvancedLink a {
    	color: #000000;
	font-size: 12px;
}

/*Add QuickSearch Wrapper*/
#quicksearchWrapper {
	background-color: #ffffff;
	text-align: Center;
	width: 100%;
	min-height: 35px;
	position: absolute;
  	top: 153px; 			/*original = 123px COJv1 = 133px*/

    	/* Flexbox for vertical centering */
    	display: flex;
	flex-wrap: wrap; 		/* V2 - wraps on a smaller screen - try removing as using mobile.css anyway*/
    	align-items: center;   		/* Vertical centering */
    	justify-content: center; 	/* Horizontal centering */
}

/*Add QuickSearch Bar*/
.quicksearchBar {
	width: 100%;
	font-size: 16px;
}

/*Add QuickSearch Buttons*/
.quicksearch_display_button {
/*	Padding: 4px 50px 0; */
	Padding: 4px 30px;		/*V2 for mobile resonsiveness ?? try removing as using mobile.css*/
}

/*The "QuickSearch" buttons font colour*/
.quicksearch_display_button a {
    	color: #000000;
	font-size: 16px;
	white-space: nowrap;		/*V2 for mobile resonsiveness ?? try removing as using mobile.css*/
}

/*Color for body*/
body {
	background: #fff url(/custom/web/content/Joburg Logo (Black - two colours).png);
	background-position: center;
        background-size: contain;        /* keeps full image visible */
        background-color: #53575a;       /* fallback color around image - dark grey*/
 }

/*Buttons container, a and .btn - previously in html*/
    .button-container {
      display: flex;
      flex-direction: column;
      gap: 15px;
      max-width: 400px;
      width: 100%;
    }

    .button-container a {
      text-decoration: none;
      width: 100%;
    }

    .btn {
      display: block;
      padding: 12px;
      width: 100%;
      border: none;
      color: #000;
      font-size: 16px;
      cursor: pointer;
      border-radius: 12px;
      transition: transform 0.25s ease,
                  box-shadow 0.25s ease,
                  opacity 0.25s ease;
    }

    .btn:hover {
      transform: translateY(-4px);
      box-shadow: 0 4px 12px rgba(0,0,0,0.25);
      opacity: 0.92;
    }

 /* Color themes - Previously in html*/
    .color1 { background: #ffb600; }   /* gold */
    .color2 { background: #000000; color: #fff; } /* black with white text */
    .color3 { background: #ffffff; }   /* white */
    .color4 { background: #53575a; color: #fff; }   /* dark grey with white text*/
    .color5 { background: #cccccc; }   /* light grey */
    .color6 { background: #870064; color: #fff; }   /* purple with white text */
    .color7 { background: #ff5100; }   /* orange */
    .color8 { background: #005470; }   /* teal */
    .color9 { background: #78ded4; }   /* turquoise */
    .color10 { background: #896b25; }  /* olive */

/*eResources Column - rename as will be used for all Quicklink to single column rooms - V2*/
  .eresources-column {
      	background: #fff;
  	padding: 10px;
	border:1px solid #000;
  	margin: 5px;
	line-height: 1.4; 		/* Sets spacing to 1.4 times the font size */
	text-align: center;
  }

/*Middle column for CoJ Room - Used for eResources, Special Collections, etc. - copy of .eresources-column*/
  .cojroom-column {
      	background: #fff;
  	padding: 10px;
	border:1px solid #000;
  	margin: 5px;
	line-height: 1.4; 		/* Sets spacing to 1.4 times the font size */
	text-align: center;
  }

/*To make only visible slide clickable*/
.slide {
  	pointer-events: none;
}

.slide[style*="opacity: 1"] {
  	pointer-events: auto;
}

/*Footer - colour currently dark grey*/
#footer {
  	background-color:#53575a;	/*CHECK - should this element just be background?*/
  	color: #fff; 			/*Fill in colour if background not fill space - cold grey*/
  	padding: 5px;			/*Added in V2 for responsive grid */
  	display: flex;
  	justify content: space-between;	/*check if this is needed, or not */
  	flex-wrap: wrap;

/*  display: grid; */			/* Grid styling removed in V2.1 to place copyright at bottom */
/*  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); */ /* Grid styling removed in V2.1 to place copyright at bottom */
/*  gap: 30px; */			/* Grid styling removed in V2.1 to place copyright at bottom */
/*  min-height:25px; */    		/*Removed in V2 for responsive grid */
/*  width:100%; */			/*Removed in V2 for responsive grid */
/*  margin-top:8px;  */			/*Removed in V2 for responsive grid */
/*  position:relative;*/
/*  position:static\9*/
}

/*Color of footer text - white*/
#footer a {
  	color:#fff
}

/* NEW V2.1 - Footer columns - V2.1 */
.footer-column {
  	flex: 1;
  	min-width: 250px;
  	margin: 10px;
  	margin-left: 55px; 		/*pushes the left column to the right*/
}

.footer-column h3 {
	margin-bottom: 10px;
	text-decoration: underline;
        text-transform: uppercase;
    }

.footer-link {
      	display: flex;
      	align-items: center;
      	margin: 5px 0;
}

.footer-link a {
      	color: white;
      	text-decoration: none;
      	margin-right: 10px;
}

.footer-link a:hover {
      	text-decoration: underline;
}

.social-links a {
      	margin-right: 8px;
      	color: white;
}

.social-links a:hover {
      	color: #dcdcdc;
}

.social-links a i {
      	font-size: 1.2em;   		/* makes icons bigger */
}

/* NEW V2.1: copyright styling */
#copyright {
  flex: 0 0 100%;          		/* takes full width */
  text-align: center;     		/* center text */
/*  font-size: 0.85rem;  */		/* Add in as delivered sizing not work */
    margin-top: 20px;
    padding-top: 10px;
    border-top: 1px solid rgba(255,255,255,0.3); /* optional separator */
}

/*the facet filter buttons*/
.button {
    background: #ffb600 url(./images/sirsidynix/alert-overlay.png) repeat-x;
}

/*the facet filter buttons when you hover over them*/
.button:hover {
    background-color: #ff5100
}

/*Color of the links to the current/previous rooms at the top of the page*/
.secondary_header_menu_container ul li a {
    color: #ffffff;
}

/* Header and Logo Mobile responsiveness - REMOVED ALL TO TEST IF STILL NEEDED IF USING mobile.css?*/