/* Responsive layout for service listings */
/* (Plus various overrides for other site css formatting at the bottom of this file */

.service-columns > div.col:first-child {
	flex-grow: 3;
	min-width: 50%;
	max-width: 1020px;
}

.service-columns > div.col:last-child {
	flex-grow: 2;
}

.service-columns > div.col:first-child > div.container-fluid {
	max-width: 1040px;
	width: 100%;
}

.service-columns > div.col:first-child > div.container-fluid > div.large-text > div.large-text_body {
	padding-right: 0;
	padding-left: 0;
}

.service-date, .service-date a {
	font-family: "Lato", sans-serif;
	font-weight: 800;
	text-transform: uppercase;
	font-size: 0.875rem;
	letter-spacing: 0.1875rem;
	padding-top: 0rem;
	width: auto;
	text-decoration: none;
}

.service-date a:hover {
	text-decoration: underline;
}

.observance {
	font-family: "Libre Baskerville", serif;
	font-weight: normal;
	color: #897148;
	font-size: 1.25rem;
	padding-top: 0.4rem;
	line-height: 1.2;
	width: auto;
	display: block;
}

.majorfeast {
	font-size: 1.875rem;
	line-height: 1.2;
}

.service-time, .service-name {
	font-family: "Lato", sans-serif;
	font-size: 1rem;
	padding-top: 0;
	font-weight: 500;
}

.service-time {
	display: inline-block;
	width: 5rem;
	margin-top: 0.5rem;
	text-align: right;
	vertical-align: top
}

.service-name {
	font-weight: bold;
}

.service-name ~ span {
  line-height: inherit;
  padding-top: 0.165rem;
  margin-bottom: -0.165rem;
}

.psalms, .hymns, .setting, .anthem, .response, .preacher, .choir, .livestream {
	font-family: "Libre Baskerville", serif;
	font-style: normal;
	font-size: 0.85rem;
	color: #897148;
	font-weight: 500;
	vertical-align: baseline;
	line-height: 1.2rem;
}

.psalms, .hymns, .response, .preacher {
	float: right;
	padding-left: 1.5rem;
}

.setting, .anthem, .choir, .livestream {
 	display: inline-block;
	padding-left: 1.5rem;
	text-indent: -1.5rem;
}

.setting + .setting, .anthem + .anthem {
	display: block;
}

div.service-scheme {
	display: flex;
	flex-direction: column;
	justify-content: space-evenly;
	max-width: 900px;
	width: 100%;
	margin: 0 auto;
	border-collapse: separate;
	border-spacing: 5px;
	padding: 1.5rem;
}

/*div.service-nav div.service-scheme {
	width: calc(100% - 8.4rem);
}*/

div.service-scheme:before, div.service-scheme:after {
	content: '';
	flex-basis: 0;
	flex-grow: 0.25;
}

div.service-scheme:nth-of-type(even) {
	background-color: #1b7c26;
}

div.service-scheme:nth-of-type(even) .service-date,
div.service-scheme:nth-of-type(even) .service-time,
div.service-scheme:nth-of-type(even) .service-name {
	color: 	#ffffff;
}

div.service-scheme:nth-of-type(even) .observance,
div.service-scheme:nth-of-type(even) .psalms,
div.service-scheme:nth-of-type(even) .hymns,
div.service-scheme:nth-of-type(even) .setting,
div.service-scheme:nth-of-type(even) .anthem,
div.service-scheme:nth-of-type(even) .response,
div.service-scheme:nth-of-type(even) .preacher,
div.service-scheme:nth-of-type(even) .choir,
div.service-scheme:nth-of-type(even) .livestream {
	color: #c3a12e;
}

div.service-scheme:nth-of-type(odd) {
	background-color: #cfba8a;
}

div.service-scheme:nth-of-type(odd) .service-date,
div.service-scheme:nth-of-type(odd) .service-time,
div.service-scheme:nth-of-type(odd) .service-name {
	color: 	#155419;
}

div.service-scheme:nth-of-type(odd) .observance {
	color: #ffffff;
}
div.service-scheme:nth-of-type(odd) .psalms,
div.service-scheme:nth-of-type(odd) .hymns,
div.service-scheme:nth-of-type(odd) .setting,
div.service-scheme:nth-of-type(odd) .anthem,
div.service-scheme:nth-of-type(odd) .response,
div.service-scheme:nth-of-type(odd) .preacher,
div.service-scheme:nth-of-type(odd) .choir, 
div.service-scheme:nth-of-type(odd) .livestream {
	color: #49443c;
}

.service-scheme .h2 {
    color: #49443c;
    padding: 1.25rem 0;
}

span.service-block {
	display: inline-block;
    width: calc(100% - 5.5rem);
	margin-top: 0.5rem;  
}

div.service-line {
	/*display: block;*/
	align-items: baseline;
	line-height: 1.2rem;
	min-height: 1.2rem;
}

div.service-line + .div.service-line:after {
	content: '';
	clear: left;
	display: table;
}

div.service-line:last-child {
	clear: both;
}

span.service-block div.service-line {
	display: block;
	justify-content: space-between;
}

.service-arrow-left {
	display: inline-block;
	position: sticky;
	top: 50%;
	flex-shrink: 0;
	width: 4.2rem;
	height: 4.2rem;
	background: #ffffff;
	border: 2px solid #155419;
	border-radius: 4.2rem;
	color: #155419;
	cursor: pointer;
	line-height: 4.2rem;
	transition: all 0.25s ease-in-out;
	font-size: 0;
	margin: 1.5rem;
	margin-left: 0;
}
.service-arrow-left:hover {
	background: #155419;
	border-color: #155419;
	color: #c3a12e;
  }
.service-arrow-left:after {
	position: relative;
	display: inline-block;
	content: "";
	width: 1.4rem;
	height: 1.4rem;
	top: 17.5%;
	left: 37.5%;
	border-bottom: 2px solid;
	border-left: 2px solid;
	transform: rotateZ(45deg);
  }
  
.service-arrow-right {
	display: inline-block;
	position: sticky;
	top: 50%;
	flex-shrink: 0;
	width: 4.2rem;
	height: 4.2rem;
	background: #ffffff;
	border: 2px solid #155419;
	border-radius: 4.2rem;
	color: #155419;
	cursor: pointer;
	line-height: 4.2rem;
	transition: all 0.25s ease-in-out;
	font-size: 0;
	margin: 1.5rem;
	margin-right: 0;
}
.service-arrow-right:hover {
	background: #155419;
	border-color: #155419;
	color: #c3a12e;
  }
.service-arrow-right:after {
	position: relative;
	display: inline-block;
	content: "";
	width: 1.4rem;
	height: 1.4rem;
	top: 17.5%;
	left: 25%;
	border-top: 2px solid;
	border-right: 2px solid;
	transform: rotateZ(45deg);
  }

@media screen and (min-width: 1017px) and (max-width: 1500px) {
	.majorfeast {
		font-size: 1.625rem;
		line-height: 1.2;
	}

	.psalms, .hymns, .setting, .anthem, .response, .preacher, .choir {
		width: 100%;
		padding-left: 1.5rem;
		text-indent: -1.5rem;
	}
  
	span.service-block {
		display: inline-block;
	}
  
	span.service-block div.service-line:first-child {
		display: inline
	}
	
	.service-name ~ span {
		line-height: inherit;
  		padding-top: 0;
		margin-bottom: 0;
	}
}

@media screen and (max-width: 850px) {
	.majorfeast {
		font-size: 1.625rem;
		line-height: 1.2;
	}

	.psalms, .hymns, .setting, .anthem, .response, .preacher, .choir {
		width: 100%;
		padding-left: 1.5rem;
		text-indent: -1.5rem;
	}
  
	span.service-block {
		display: inline-block;
	}
  
	span.service-block div.service-line:first-child {
		display: inline
	}
	
	.service-name ~ span {
		line-height: inherit;
  		padding-top: 0;
		margin-bottom: 0;
	}
	
}

@media screen and (max-width: 650px) {
	:not(div.service-mini-nav) .service-arrow-left, .service-arrow-right {
		position: relative;
		margin: 1.5rem;
	}

	div.service-nav {
		flex-wrap: wrap;
	}

	.service-scheme-list {
		width: 100%;
		order: 1;
	}

	div.service-nav div.service-scheme {
		width: 100%;
	}
}

@media screen and (min-width: 1017px) and (max-width: 1120px) {
	.majorfeast {
		font-size: 1.5rem;
		line-height: 1.2;
	}
	
	.psalms, .hymns, .setting, .anthem, .response, .preacher, .choir, .livestream {
		width: 100%;
		padding-left: 1.5rem;
		text-indent: -1.5rem;
	}
	
	span.service-block {
		display: contents;
		width: auto;
	}
	
  	span.service-block div.service-line:first-child {
		display: inline
	}
	
	.service-time {
		width: auto;
	}
  
	.service-name {
		vertical-align: bottom;
	}
	
	.service-name ~ span {
		line-height: inherit;
  		padding-top: 0;
		margin-bottom: 0;
	}
}

@media screen and (max-width: 30em) {
	.majorfeast {
		font-size: 1.5rem;
		line-height: 1.2;
	}

	.psalms, .hymns, .setting, .anthem, .response, .preacher, .choir, .livestream {
		width: 100%;
		padding-left: 1.5rem;
		text-indent: -1.5rem;
	}
	
	span.service-block {
		display: contents;
		width: auto;
	}
	
  	span.service-block div.service-line:first-child {
		display: inline
	}
	
	.service-time {
		width: auto;
	}
  
	.service-name {
		vertical-align: bottom;
	}
	
	.service-name ~ span {
		line-height: inherit;
  		padding-top: 0;
		margin-bottom: 0;
	}
}

div.service-nav {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	max-width: 1000px;
	margin: 0 auto;
	border-collapse: separate;
	border-spacing: 5px;
	padding: 1.5rem;
}

div.service-mini-nav {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-around;
	width: 100%;
	background: #cfba8a;
	padding-bottom: 1.5rem;
}

div.service-mini-nav .service-arrow-left, div.service-mini-nav .service-arrow-right {
	position: static;
	border: 2px solid #897148;
	background: #cfba8a;
	margin-top: 0;
	width: 3rem;
	height: 3rem;
	line-height: 3rem;
}

div.service-mini-nav .service-arrow-left:hover, div.service-mini-nav .service-arrow-right:hover {
	background: #155419;
	border-color: #155419;
	color: #c3a12e;
}

div.service-mini-nav .service-arrow-left:after, div.service-mini-nav .service-arrow-right:after {
	width: 1rem;
	height: 1rem;
	top: 14%;
	border-color: #897148;
}

div.service-scheme-list {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
}

/* Fix for sticky arrows on /worship/services no longer working because of recent addition of overflow-x:hidden to body 2/11/24 */

body:has(.service-nav) {
    overflow-x: visible;
}



/* Overrides for other parts of the website */


/* Fixes for menu dropdowns that exceed the window viewport height */

/* Option 1 - Add a scroll-bar to overlong 'What's On' menu dropdowns */
/* Simple fix, but will only work on fairly recent versions of */
/* Chrome, Edge & Safari (Firefox doesn't yet support :has pseudo-class) */

@media screen and (min-width: 64em) {
	div.nav_list_control:has(> a.nav_list_a[href="/whats-on"])+div.nav_dropdown>ul.nav_dropdown_list {
		max-height: 55vh;
		overflow-y: auto;
	}
}

/* Option 2 - Make 'What's On' menu dropdown multicolumn */
/* (while working round flexbox bug that fails to increase container width with column wrap) */
/* HOWEVER - in practice the contents readily exceed available screen width */


/*@media screen and (min-width: 64em) {
	div.nav_list_control:has(> a.nav_list_a[href="/whats-on"])+div.nav_dropdown>ul.nav_dropdown_list {
		max-height: 55vh;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		writing-mode: vertical-lr;
		text-orientation: upright;
	}
	
	div.nav_list_control:has(> a.nav_list_a[href="/whats-on"])+div.nav_dropdown>ul.nav_dropdown_list * {
		writing-mode: horizontal-tb;
		width: min-content;
	}
}*/


/* Option 3 - Make 'What's On' menu dropdown wider to fit more rows on screen */


/*@media screen and (min-width: 64em) {
	div.nav_list_control:has(> a.nav_list_a[href="/whats-on"])+div.nav_dropdown>ul.nav_dropdown_list li {
		width: max-content;
	}
}*/



/* Gold hover colour for nav menu elements and search button on homepage */
/* (but don't attempt this on pointerless touchscreens) */

@media (hover: hover) {
	.hamburger:hover .hamburger-inner,
	.hamburger:hover .hamburger-inner:before,
	.hamburger:hover .hamburger-inner:after,
	.nav_list_btn:hover .chevron:before,
	.nav_list_btn:hover .chevron:after,
	.nav_dropdown_btn:hover .chevron:before,
	.nav_dropdown_btn:hover .chevron:after,
	.nav_list_a:hover ~ .nav_list_btn:not(.-is-active) .chevron:before,
	.nav_list_a:hover ~ .nav_list_btn:not(.-is-active) .chevron:after,
	.nav_dropdown_a:hover ~ .nav_dropdown_btn:not(.-is-active) .chevron:before,
	.nav_dropdown_a:hover ~ .nav_dropdown_btn:not(.-is-active) .chevron:after,
	.nav_subdropdown_a:hover ~ .nav_dropdown_btn:not(.-is-active) .chevron:before,
	.nav_subdropdown_a:hover ~ .nav_dropdown_btn:not(.-is-active) .chevron:after {
		background-color: #c38c2c;
	}

	.nav_list_a:hover,
	.nav_dropdown_a:hover,
	.nav_subdropdown_a:hover {
		color: #c38c2c;
		transition: color 0.15s ease;
	}

	.hamburger,
	.hambuger-inner {
		transition-property: transform, width, background-color;	
	}
	
	.hdr_form input[type="search"]:hover {
		filter: invert(46%) sepia(40%) saturate(747%) hue-rotate(359deg) brightness(98%) contrast(91%);
	}
	
	.hdr_form input[type="search"]:focus {
		filter: unset;
	}
	
	.hdr_logo.-white svg:hover text {
		fill: #c38c2c;
	}
}


/* fix disappearing 'search' icon on other (white header background) pages */
/* and add dark green hover highlight to this, the logo, and top-level menu items */

@media screen and (hover: hover) and (min-width: 64em) {
	.-hdr-white .nav_list_a:hover {
		color: #134d35;
		transition: color 0.15s ease;
	}
	
	.-hdr-white .hdr_form input[type="search"] {
		background: url(/_assets/images/search.svg) no-repeat 9px center;
	}
	
	.-hdr-white .hdr_form input[type="search"]:hover {
		background: url(/_assets/images/search-mobile.svg) no-repeat 9px center;
		filter: invert(77%) sepia(20%) saturate(1565%) hue-rotate(103deg) brightness(92%) contrast(89%);
	}
	
	.hdr_logo.-gold svg:hover text {
		fill: #134d35;
	}
}

/* Removes unwanted spacer strip to left of photo galleries */
/* (on homepage, or elsewhere) */

div.tile_bg_strip {
	width: 0;
}

/* Changes hover colour for photo gallery 'View More' button on larger screen layouts */

@media screen and (min-width: 62.5em) {
	.btn_main:hover {
		background: #cfba8a; 
	}
}

/* Renders photo gallery 'View More' button translucent in smaller screen layouts */
/* when it overlaps the tile beneath it */

/*@media screen and (max-width: 62.5em) {
	.btn_main {
		opacity: 0.8;
	}
	
	.btn_main:hover {
		opacity: 1;
	}
}*/

/* Shrinks photo gallery 'View More' button in smaller screen layouts */
/* to prevent overlap with the text of the tile beneath it on the homepage */

@media screen and (max-width: 38em) {
	.btn_main {
		width: 7rem;
		height: 7rem;
	}
	
	.btn_main > span {
		max-width: 70%;
		text-align: center;
	}
}

/* Prevents 'search' box skipping between rows when input focus received */
/* and tidies up dividing line with 'Donate' button */

@media screen and (min-width: 64em) {
	.hdr_form {
		min-width: 8.125rem;
		margin: 0.5rem 0;
	}
	
	.navigation_container {
		flex-basis: 64%
	}
	
	.hdr-extras_container {
		flex-basis: 17%
	}
	
	.hdr_line {
		margin-left: auto;
		margin-right: auto;
	}
}

@media print, screen and (min-width: 91.25em) and (max-width: 1576px) {
	.hdr_line {
		display: none;
	}
}

/* Preserve aspect ratio for inline images in full-width grid boxes */

.large-text p > img {
  height: auto;
}

/* Preserve aspect ratio for parallex tile images */

@media print, screen and (min-width: 62em) {
	.parallax-tile_image {
		object-fit: cover;
	}
}


/* Fullcalendar formatting */

.fc-h-event .fc-event-title-container {
    white-space: normal;
}

.fc-h-event .fc-event-time {
    flex-shrink: 0;
}

.fc-col-header, .fc-scrollgrid, .fc-scrollgrid table {
    margin: 0;
}

.fc .fc-daygrid-body-natural .fc-daygrid-day-events {
    margin-bottom: 1px;
}

.fc-h-event:hover {
    border: 1px solid;
    fill: #134d35;
    background: var(--fc-event-selected-overlay-color);
}

.fc-h-event:hover::after {
	background: var(--fc-event-selected-overlay-color);
    inset: -1px;
    content: "";
    position: absolute;
    z-index: 1;
}

.fc-daygrid-day {
    background: var(--fc-today-bg-color);
}

.large-text_body:has(div#calendar) {
    padding: 0;
}

#sect-calendar {
    padding: 0;
}

#sect-calendar a {
    text-decoration-line: none;
}

.calendar-accordion {
    max-width: none;
    margin: 0;
    margin-top: 1.25rem;
    margin-bottom: 1.25rem;
}

@media screen and (min-width: 992px) {
    #accordion-calendar {
        display: none;
    }
    
    .calendar-accordion {
        margin-bottom: 0;
    }
}