/* =============================================================================
   05-shared-sections.css
   Section blocks reused across several templates: #info, #quotes, lists, #mainbanner.

   Split out of style.css, which had grown to 3,647 lines. Loaded via
   wp_enqueue_style() in inc/enqueue.php - the load ORDER there matches the
   numeric filename order, and matches the order these rules appeared in the
   original file, so the cascade is unchanged.
   ============================================================================= */
/* --- #INFO --- */
#info .container .column .left {
	width: 50%;
	padding-right: 65px;
	border-right: 1px solid;
}
#info .container .column .right {
	padding-left: 65px;
}

/* --- #QUOTES --- */
#quotes .container .column {
	padding: 50px 0px;
}
#quotes .container .column .right {
	padding-left: 105px;
	color: var(--js-white);
}
#quotes .container .column .right h1 {
	color: var(--js-white);
	margin-bottom: 0px;
}

body.page-template-template_employer #quotes {
	background-image: url("http://jobshopsu.co.uk/wp-content/uploads/2025/07/employer_small.webp");
}
body.page-template-template_signup #quotes {
	background-image: url("http://jobshopsu.co.uk/wp-content/uploads/2025/07/aboutus_gradient.webp");
}
body.page-template-template_signup #quotes {
	background-image: url("https://assets-cdn.sums.su/MA/images/su_images/layouts/jobshop/blue-tinit.png");
}
body.page-template-template_signup #quotes2 {
	background-image: url("http://jobshopsu.co.uk/wp-content/uploads/2025/07/aboutus_small2.webp");
	background-size: cover;
}
body.page-template-template_agency #quotes {
	background-image: url("https://assets-cdn.sums.su/MA/images/su_images/layouts/jobshop/ornagetheme.png");
}
body.page-template-template_employer #quotes {
	/* background-image: url('https://assets-cdn.sums.su/MA/images/su_images/layouts/jobshop/yellowtheme.png');*/
	background-image: url("https://assets-cdn.sums.su/MA/images/su_images/layouts/jobshop/Jobshop-Webskin-quotebk.png");
}
body.page-template-template_about #quotes {
	background-image: url("https://assets-cdn.sums.su/MA/images/su_images/layouts/jobshop/Jobshop-Webskin-quotebk.png");
}

/* !! JOBCLUB TO BE REMOVED */
body.page-template-template_jobclub #quotes {
	background-image: url("https://assets-cdn.sums.su/MA/images/su_images/layouts/jobshop/Jobshop-Webskin-quotebk_2.png");
	height: 600px;
	background-position: center;
	position: relative;
}
body.page-template-template_jobclub #quotes2 {
	background-image: url("https://assets-cdn.sums.su/MA/images/su_images/layouts/jobshop/Jobshop-Webskin-quotebk3.png");
	height: 600px;
	background-position: center;
	position: relative;
	background-size: cover;
}
body.page-template-template_jobclub #quotes3 {
	background-image: url("https://assets-cdn.sums.su/MA/images/su_images/layouts/jobshop/blue-tinit.png");
	height: 600px;
	background-position: center;
	position: relative;
}
/* !! */

/* --- Ul --- */
ul {
	padding-left: 18px;
}
ul li {
	background-image: none;
	padding-left: 0px;
	list-style: initial;
	margin-bottom: 0px;
	font-family: "effraregular";
	font-size: 15pt;
	line-height: 20pt;
}

/* !! WHERE IS THIS USED? */
.tabs-wrap-content {
	position: absolute;
	top: 0px;
	left: 0px;
	opacity: 0;
	transition: transform 400ms ease-out;
}
.tabs-wrap-content.active {
	opacity: 1;
	position: relative;
	top: 0px;
	left: 0px;
}
/* !! */

/* --- #MAINBANNER --- */
#mainbanner {
	min-height: 700px;
	position: relative;
	padding-top: 200px;
	padding-bottom: 330px;
	background-size: cover;
}
#mainbanner p,
#mainbanner p a {
	font-size: 21pt;
	line-height: 26pt;
	color: var(--js-white);
}
#mainbanner .container .column .left {
	width: 60%;
}
#mainbanner .container .column .right {
	width: 40%;
}
#mainbanner h1 {
	color: var(--js-white);
}

#mainbanner .pattern,
#quotes .pattern {
	background: url("https://assets-cdn.sums.su/MA/images/su_images/layouts/jobshop/Jobshop-Webskin-2023-strip.png");
	background-size: contain;
	height: 250px;
	position: absolute;
	width: 100%;
	bottom: 0px;
	left: 0px;
}
#quotes .pattern {
	bottom: -70px;
}
#quotes {
	background-size: cover;
	line-height: 0px;
}
#quotes2 h1 {
	color: var(--js-white);
}

body.page-template-template_homepage #mainbanner {
	background-image: url("http://jobshopsu.co.uk/wp-content/uploads/2025/07/aboutus.webp");
}
body.page-template-template_employer #mainbanner {
	background-image: url("http://jobshopsu.co.uk/wp-content/uploads/2025/07/employer.webp");
}
body.page-template-template_contact #mainbanner {
	background-image: url("http://jobshopsu.co.uk/wp-content/uploads/2025/07/faqs.webp");
}
body.page-template-template_signup #mainbanner {
	background-image: url("http://jobshopsu.co.uk/wp-content/uploads/2025/07/aboutus.webp");
}
body.page-template-template_events_workshops #mainbanner {
	background-image: url("http://jobshopsu.co.uk/wp-content/uploads/2025/07/contactus.webp");
}
body.page-template-template_advice_and_resources #mainbanner {
	background-image: url("http://jobshopsu.co.uk/wp-content/uploads/2025/07/employer.webp");
}

/* !! JOBCLUB TO BE REMOVED */
body.page-template-template_jobclub #mainbanner {
	padding-bottom: 0px;
	min-height: auto;
}
body.page-template-template_jobclub #mainbanner .container .column .left,
body.page-template-template_jobclub #mainbanner .container .column .right {
	width: 50%;
}
body.page-template-template_jobclub #mainbanner p {
	color: var(--js-black);
}
body.page-template-template_jobclub #mainbanner h1 {
	color: var(--js-black);
}
/* !! */


/* ! WHERE ARE THESE USED? WHERE SHOULD THEY BE MOVED TO? */
a {
	text-decoration: none;
	/* what about text colour being inherited? */
	color: inherit;
}
p a {
	font-family: "effraregular";
	font-size: 15pt;
	line-height: 20pt;
	color: var(--js-black);
}
ul li a {
	color: var(--js-black);
}
#pick p a {
	color: var(--js-white);
}
a.button {
	font-family: "effrabold";
	background-color: var(--js-black);
	color: var(--js-white);
	font-size: 21pt;
	line-height: 26pt;
	padding: 15px 20px;
	border-radius: 10px;
	text-decoration: none;
	display: inline-block;
}
h1 {
	margin-top: 0pc;
	font-size: 47pt;
	line-height: 45pt;
	color: var(--js-black);
	margin-bottom: 30px;
}
ul.special {
	list-style: none;
	margin: 0px;
	padding: 0px;
}
ul.special li {
	font-family: "effraregular";
	font-size: 15pt;
	line-height: 20pt;
	margin-bottom: 15px;
	background-image: url("https://assets-cdn.sums.su/MA/images/su_images/layouts/jobshop/Jobshop-list.png");
	background-repeat: no-repeat;
	background-size: 30px;
	background-position: 5px 5px;
	padding: 0px 0px 8px 40px;
	list-style: none;
}
/* 
ul.special.events li {
	padding: 5px 0px 7px 40px;
} */
ul.special li strong {
	font-family: "effrabold";
	font-size: 19pt;
	margin-bottom: 10px;
	display: block;
	position: relative;
	top: 6px;
}
/* !! */


/** QUOTES SLIDESHOW                         **/
#slideshow {
	position: relative;
}
#slideshow .slide.showing {
	position: relative;
	opacity: 1;
}
#slideshow .slide {
	position: absolute;
	top: 0px;
	left: 0px;
	opacity: 0;
	transition: all 1000ms ease-out;
}

/* -- Quote attribution line (name + course + avatar). ---
   These rules replace the long style="..." attributes that used to be repeated
   inline in the quotes slideshow. Values are unchanged 
 --- */
#slideshow .quote_attribution {
	font-size: 9pt;
	line-height: 11pt;
	position: relative;
	top: -10px;
	margin-bottom: 0px;
	margin-top: 40px;
}
#slideshow .quote_avatar {
	display: inline-block;
}
#slideshow .quote_avatar img {
	width: 34px;
	border: 2px solid #000;
	border-radius: 50%;
	display: inline-block;
}
#slideshow .quote_person {
	display: inline-block;
	top: -5px;
	position: relative;
	margin-left: 10px;
}
#slideshow .quote_person strong {
	display: block;
}
/* The looped quotes had an extra width constraint the hardcoded one didn't. */
#slideshow .quote_person_wide {
	width: 80%;
}

/**                                  **/