/* =========================================================
   styles_common.css
   Shared styles used by all pages on the site
   ========================================================= */

/* ---------------------------------------------- Variables ------------------------------------------------------ */

:root {  /* These global variables are available for all stylesheets the browser calls  */
	--content-gap: 0.0rem; /* Used in conjunction with menu-width to calculate content width */
	--menu-width: 140px;  /* Used in conjunction with content-gap to calculate content width */
	--menu-font-size: 18px; /* Most fonts resize a little with the viewport, but not the menu items */
}

/* YouTube styles */
/* Common */

.video_container {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
}

.responsive-iframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
}


/* sort these out */


.text_divider_image_container {
	margin:0 auto;
	max-width:40%;
	border: 0;
}

.in_text_image_container {
	padding-top:1rem;
	margin:0 auto;
	border: 0;
}

.in_text_image_container img {
	display:block;
	margin:0 auto;
}

.image_container img {
	display:block;
	width:100%;
	height:auto;
}

img {
    transition: width 0.3s;
    width: 90%;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
    border-radius: 0em;
}

.large_icon_anchor  {
	text-decoration: none;
	color: #fff;
}

.large_icon_anchor:hover {
	background-color: #f8f;
	color: black;
}

.large_icon_shrink_on_hover:hover {
	width: 85%;
}

a {
	color: #909;
	font-style: italic;
	font-weight: bold;
	text-decoration: none;
	cursor: pointer;
	}



/* ----------------------------------------Define font colours---------------------------------------------*/
/* Common */

	.white {
        color: #ffffff;
	}
	
	.light_grey {
		color: #b0b0b0
	}
	
	.dark_grey {
		color: #606060
	}
	
	.black {
        color: #000000;
	}
	
	.olive {
        color: #003300;
	}

	.dark_red {
		color: #aa0000;
	}

	.bright_red {
		color: #ff1111;
	}
	
	.red {
        color: #cc0000;
	}

	.light_blue {
		color: #8888ff;
	}

	.blue {
        color: #0000cc;
	}
	
	.dark_blue {
		color: #3333bb;
	}

	.pink {
		color: #ff9999;
	}
	
/* ----------------------------------------Define font styles---------------------------------------------*/
/* Common */

	.small_non_serif {
        font-family: Manrope;
        font-weight: bold;
        font-size: 1.2rem;
        line-height: 1.1;
        margin-left: 10%;
		margin-right: 10%
	}

	.medium_non_serif {
        font-family: Manrope;
        font-weight: bold;
        font-size: 1.5rem;
        line-height: 0.9;
        margin-left: 10%;
		margin-right: 10%
	}

	.large_non_serif {
        font-family: Manrope;
        font-weight: bold;
        font-size: 2rem;
        line-height: 0.9;
        margin-left: 10%;
		margin-right: 10%
	}

	.small_serif {
        font-family: Garamond;
        font-size: 1.25rem;
        font-weight: bold;
        line-height: 0.9;
        margin-left: 10%;
        margin-right: 10%;
    }	

	.medium_serif {
        font-family: Garamond;
        font-size: 1.5rem;
        font-weight: bold;
        line-height: 0.9;
        margin-left: 10%;
        margin-right: 10%;
    }	
	
	.large_serif {
        font-family: Garamond;
        font-size: 2rem;
        font-weight: bold;
        line-height: 0.9;
        margin-left: 7%;
        margin-right: 7%;
    }

	.phone_call {
		color:#DC143C;
		line-height:1;
		font-size: 0.8rem;
		margin-left:3em;
		margin-right:1em;
		font-style:italic;
		font-weight:bold;
		white-space: pre-line;	/* Enables reliable use of -| rather than > for paragraph breaks without <br> */
		margin-bottom: 0rem;	/* Enables reliable use of -| rather than > for paragraph breaks without <br> */
	}
	
	.phone_call p {
		margin-bottom:30px;
	}
	
	.song {
		color:#117;
		line-height:1.3;
		font-family: Roboto;
		font-size: 1rem;
		margin-left:2em;
		margin-right:2em;
		font-style:italic;
		white-space: pre-line;	/* Enables reliable use of -| rather than > for paragraph breaks without <br> */
		margin-bottom: 0rem;	/* Enables reliable use of -| rather than > for paragraph breaks without <br> */
	}


.bible {
	font-style:italic;
	font-weight:bold;
    font-size: 1.3rem;
	color:#171;
	line-height:1.3;
	margin-left:2em;
	margin-right:2em;
	white-space: pre-line;	/* Enables reliable use of -| rather than > for paragraph breaks without <br> */
    margin-bottom: 0rem;	/* Enables reliable use of -| rather than > for paragraph breaks without <br> */
}

.explanation {
    font-size: clamp(0.9rem, 1.5vw, 1.7rem);
	color: #000;
	line-height:1.3;
	white-space: pre-line;	/* Enables reliable use of -| rather than > for paragraph breaks without <br> */
    margin-bottom: 0rem;	/* Enables reliable use of -| rather than > for paragraph breaks without <br> */
}

.emphasis {
    font-size: clamp(1rem, 1.5vw, 1.7rem);
    font-style: italic;
	color: #000;
	line-height:1.3;
	white-space: pre-line;	/* Enables reliable use of -| rather than > for paragraph breaks without <br> */
    margin-bottom: 0rem;	/* Enables reliable use of -| rather than > for paragraph breaks without <br> */
}

.narrative {
	font-family: Roboto;
    font-size: clamp(0.8rem, 1.5vw, 1.7rem);
	font-weight:400;
    font-style: italic;
    letter-spacing: 0.02em;
	color: #003;
	line-height:1.4;
	white-space: pre-line;	/* Enables reliable use of -| rather than > for paragraph breaks without <br> */
    margin-bottom: 0rem;	/* Enables reliable use of -| rather than > for paragraph breaks without <br> */
}

.explanation,
.narrative,
.emphasis {
    margin-top: 0;
    margin-bottom: 0;
}

/*---------------------------------------------Define rem size---------------------------------------------------*/
/* Mobile */
@media (max-width: 640px) {
    html {
        font-size: clamp(15px, calc(13px + 0.5vw), 20px);
    }
}
/* Desktop */
@media (min-width: 641px) {
    html {
        font-size: clamp(15px, calc(13px + (100vw - 2 * var(--menu-width)) / 200), 20px);
    }
}


/* --------------------------- Define LHS and RHS Menu And Menu Anchor Styles --------------------- */
/* Common */
.menu {
	text-align: center;	
}
.leftHandMenu a {
    display: block;
    color: #f8f;
    padding: 1em;
    text-decoration: none;
	text-align: center;
    font-style: normal;
    font-weight: normal;
}
.leftHandMenu a:hover {
    background-color: #f8f;
    color: black;
}
.rightHandMenu a {
    display: block;
    color: #f8f;
    text-align: center;
    padding: 1em;
    text-decoration: none;
    font-style: normal;
    font-weight: normal;
}
.rightHandMenu a:hover {
    background-color: #f8f;
    color: black;
}

/* ----------------------------------------Define LHS and RHS Menu Styles-------------------------------------*/
/* Desktop */
@media only screen and (min-width: 641px) {
    .leftHandMenu {
        overflow: hidden;
        background-color: #000;
        color: white;
        font-size: var(--menu-font-size);
        position: fixed;
		text-align: center;
        top: 0;
        left: 0;
        width: var(--menu-width);
        height: 100%;
        overflow-y: auto;
        pointer-events: auto;
        z-index: 1000;
    }
    .rightHandMenu {
        overflow: hidden;
        background-color: #000;
        color: #f8f;
        font-size:  var(--menu-font-size);
        position: fixed;
        top: 0;
        right: 0;
        width: var(--menu-width);
        height: 100%;
        overflow-y: auto;
        pointer-events: auto;
        z-index: 1000;
    }
    .leftHandMenu::-webkit-scrollbar,
    .rightHandMenu::-webkit-scrollbar {
        width: 6px;
    }
    .leftHandMenu::-webkit-scrollbar-thumb,
    .rightHandMenu::-webkit-scrollbar-thumb {
        background-color: #bbf;
    }
    .leftHandMenu::-webkit-scrollbar-track,
    .rightHandMenu::-webkit-scrollbar-track {
        background-color: #000;
    }
    @supports (scrollbar-color: auto) {
        .leftHandMenu,
        .rightHandMenu {
            scrollbar-color: #555 #000;
            scrollbar-width: thin;
        }
    }
    @supports (-ms-ime-align: auto) {
        .leftHandMenu,
        .rightHandMenu {
            scrollbar-color: #555 #000;
            scrollbar-width: thin;
        }
    }
}

/* Mobile*/
@media only screen and (max-width: 640px) {
    .leftHandMenu {
        overflow: hidden;
        background-color: #000;
        color: white;
        font-size: var(--menu-font-size);
        position: fixed;
        top: 25px;
        width: var(--menu-width);
        height: 100%;
        overflow-y: auto;
        pointer-events: auto;
        transform: translateX(-8em);
        transition: transform 0.3s ease-in-out;
        z-index: 1000;
    }
    .leftHandMenu.visible {
        transform: translateX(0);
    }
    .rightHandMenu {
        overflow: hidden;
        background-color: #000;
        color: #f8f;
        font-size: var(--menu-font-size);
        position: fixed;
        top: 25px;
        right: 0;
        width: var(--menu-width);
        height: 100%;
        overflow-y: auto;
        pointer-events: auto;
        transform: translateX(100%);
        transition: transform 0.3s ease-in-out;
        z-index: 1000;
    }
    .rightHandMenu.visible {
        transform: translateX(0);
    }
    .overlay {				/* This dulls the centre area when the sidebar menus are available */
        display: block;
        position: fixed;
        top: 25px;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0,0,50,0.6);
        opacity: 50;
        transform: translateX(-40em);
        z-index: 7;
    }
    .overlay.visible {				/* This dulls the centre area when the sidebar menus are available */
        transform: translateX(0);
    }
}

/* ------------------------------------------Define Social Media Icon Styles----------------------------------------*/
/* Common */
.share-text a {
	cursor: pointer;
	color:#fff;
	background-color: #fff;
}

/* Desktop */
@media only screen and (min-width: 641px) {
	.share-text {
		font-family: 'Palatino','Garamond';
		font-size: 0.8rem;
		color: #000;
		margin-top: 0rem;
		margin-bottom: 0rem;
		text-align: right; /* Right justify the content */
		margin-left: 0rem;
		margin-right:8rem;
	}
	.share-icon {
		display: inline-block;
		width: 30px;
		height: 30px;
		margin-right: 0px;
		margin-left: 0px;
	}
}

/* Mobile */
@media only screen and (max-width: 640px) {
	.share-text { /* Social media icons in here */
		background-color: #ffffff;
		top: 0px;
		height: 28px;
		width: 81%;
		margin-left: 50px;
		margin-right: 50px;
		margin-top: 0px;
		margin-bottom: 0px;
		font-family: 'Palatino','Garamond';
		font-size: 0.7rem;
		color: #333;
		line-height: 1.0;
		padding-left: 0px;
		padding-right: 0px;
		padding-top: 0px;
		padding-bottom: 0px;
		text-align: center; /* Center the content */
		position: fixed;
		z-index: 6;  /* Ensure the buttons appear z-above the overlay and navigation menu */
	}
	.share-icon {
		width: 25px;
		height: 25px;
		margin-right: 0px;
		margin-left: 0px;
	}
}

/* -------------------------------------Define Sausage Styles----------------------------------*/
/* Desktop */
@media only screen and (min-width: 641px) {
    .top_left_sausage,
    .top_right_sausage {
        display: none;
    }
}
	
/* Mobile */
@media only screen and (max-width: 640px) {
	.top_left_sausage{ 
		display: block;
		top: 0px;
		left: 0px;
		height: 25px;
		width: 52px;
		margin-left: 0px;
		margin-top: 0px;
		padding-left: 0px;
		padding-top: 0px;
		position: fixed;
		z-index: 9;  /*Ensure the buttons appear z-above the overlay and navigation menu */
	}
	.top_right_sausage{ 
		display: block;
		top: 0px;
		right: 0px;
		height: 25px;
		width: 52px;
		margin-right: 0px;
		margin-top: 0px;
		padding-right: 0px;
		padding-top: 0px;
		position: fixed;
		z-index: 9;  /*Ensure the buttons appear z-above the overlay and navigation menu */
	}
}

/* ---------------------------------------------Define body Style-------------------------------------------------*/
/* Mobile */
@media only screen and (max-width: 640px) {
	body {
	font-family: 'Palatino','Garamond';
	font-size: 1.1rem;
	margin: 0rem;
	min-height: 100vh;
	padding-top: 40px;  /* to accommodate the fixed social media bar no longer floating */
	}
}
/* Desktop */
@media only screen and (min-width: 641px) {
	body {
	font-family: 'Palatino','Garamond';
	font-size: 1.1rem;
	margin: 0rem;
	min-height: 100vh;
	}
}





/* -------------------------------------Define Text Containers----------------------------------*/
/* Common */

.centred_text_container {
	text-align: center;
	height: 120%;
	padding-left: 0rem;
	padding-right: 0rem;
	padding-top:1rem;
	padding-bottom:1rem;
}

.top_left_right_padding {   /* Used in tjssc (Taking Jesus Seriously Contents Page */
	padding-left:3rem;
	padding-right:3rem;
	padding-top:1rem;
}

.text_container.a {
	font-family: 'Palatino','Garamond';
	font-size: 0.8rem;
}

/* Desktop */
@media only screen and (min-width: 641px) {
    .text_container section {
        margin: 0;
        padding: 1.5em;
    }

    .main_content {
		padding-left: calc(var(--menu-width) + var(--content-gap));
		padding-right: calc(var(--menu-width) + var(--content-gap));
        padding-top: 0;
        padding-bottom: 0;
    }
}


/* Mobile */
@media only screen and (max-width: 640px) {
    .text_container section {
        margin: 0;
        padding: 1.5em;
    }

    .main_content {
        margin-left: 10px;
        margin-right: 10px;
        margin-top: 0px;
        margin-bottom: 0px;
    }

}

/* -------------------------------------Define Icon Containers----------------------------------*/
/* Desktop */
@media only screen and (min-width: 641px) {

    .large_icon_grid {
        display: flex;
        flex-wrap: wrap;
		align-items: flex-end;
        z-index: 3;
        text-align: center;
        margin-left: 2rem;
        margin-right: 2rem;
    }

    .large_icon_container {
        max-width: 170px;
        min-width: 50px;
        margin: 0 auto;
    }
}

/* Mobile */
@media only screen and (max-width: 640px) {

    .large_icon_grid {
        display: flex;
        flex-wrap: wrap;
		align-items: flex-end;
		position: relative;
        z-index: 3;
    }

    .large_icon_container {
        max-width: 200px;
        min-width: 50px;
        margin: 0 auto;
    }

}

/* -------------------------------------Define Heading 1 Style----------------------------------*/
/* Common */
h1 {
	font-family: 'Palatino','Garamond';
	font-weight: 400;
	font-size: 2rem;
	line-height: 2.3rem;
	color: #333;
	margin-top: 0.7rem;
	margin-bottom: 0.3rem;
	margin-left: 2rem;
	margin-right: 2rem;
	text-align: center;
}

/* This div affects the sequencing, and is styled to mimic h1 for Intimacy With God series */
	.head {
		font-family: 'Palatino','Garamond';
		font-weight: 400;
		font-size: 2rem;
		line-height: 2.3rem;
		color: #333;
		margin-top: 0.7rem;
		margin-bottom: 0.3rem;
		margin-left: 2rem;
		margin-right: 2rem;
		text-align: center;
	}	

/* -------------------------------------Define Heading 2 and 3 Style----------------------------------*/
/* Common */
h2 {
	font-family: 'Palatino','Garamond';
	font-size: 1.5rem;
	text-align: left;
	margin-top: 10px;
	margin-bottom: 10px;
}

h3 {
	font-family: 'Palatino','Garamond';
	font-size: 1.25rem;
	text-align: left;
	margin-top: 5px;
	margin-bottom: 5px;
}

h4 {
    font-family: "Brush Script MT", "Segoe Script", cursive;
    font-size: 2rem;
	color: #448844;
    opacity: 0.85;
    margin-bottom: 0.5rem;
    letter-spacing: 0.02em;
}

/* -------------------------------------Define Subhead Style----------------------------------*/
/* Common */
.subhead {
	font-family: Manrope;
	font-size: 1rem;
	text-align: center;
	max-width: 85%;
    padding-top: 1rem;
	margin: 0 auto;
	color: #00c;
	line-height:1;
}


.overlay_2,
.overlay_3 p {
	font-family: 'Palatino','Garamond';
	font-size: 1.2rem;
	text-align: left;
	margin-top: 3px;
	margin-bottom: 3px;
}

/* ------------------------------------- Define Scripture Popout Panel ----------------------------------*/
/* Common */

.cross_container {
	position:relative;
}

.cross_top_right {
	position:absolute;
	top:0px;
	right:0px;
	width:15px;
	height:15px;
}


.initially_blank {
	width:90%;
	height:40px;
	color:#171;
	line-height:1.1rem;
	font-size:0.9rem;
	margin-left:0.1em;
	margin-right:0.1em;
	font-style:italic;
	font-weight:bold;
}


.popout_panel a {
	line-height: 1.5rem;
	font-size: 0.9rem;
	margin-left: 0.1em;
	margin-right: 0.1em;
	font-style: italic;
	font-weight: bold;
	text-align:right;
	color: #909;
}