/*  My Reset Styles  */
*,
*::before,
*::after {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

/*  custom properties  */

:root {
  /* Font Family */
  --font-family: 'Merienda-Bold', sans-serif;

  /* Type Scale */
  --display-lg-size: 39.06px;
  --display-lg-weight: 800;
  --display-lg-line-height: 1.55;
  --display-lg-letter-spacing: 0.015em;

  --display-md-size: 34.94px;
  --display-md-weight: 800;
  --display-md-line-height: 1.55;
  --display-md-letter-spacing: 0.015em;

  --h1-size: 31.25px;
  --h1-weight: 700;
  --h1-line-height: 1.55;
  --h1-letter-spacing: 0.02em;

  --h2-size: 25px;
  --h2-weight: 600;
  --h2-line-height: 1.55;
  --h2-letter-spacing: 0.02em;

  --h3-size: 22.36px;
  --h3-weight: 600;
  --h3-line-height: 1.6;
  --h3-letter-spacing: 0.025em;

  --h4-size: 20px;
  --h4-weight: 500;
  --h4-line-height: 1.6;
  --h4-letter-spacing: 0.025em;

  --h5-size: 18.91px;
  --h5-weight: 500;
  --h5-line-height: 1.6;
  --h5-letter-spacing: 0.03em;

  --h6-size: 17.89px;
  --h6-weight: 500;
  --h6-line-height: 1.6;
  --h6-letter-spacing: 0.03em;

  --body-xl-size: 16.92px;
  --body-xl-weight: 400;
  --body-xl-line-height: 1.6;
  --body-xl-letter-spacing: 0.03em;

  --body-size: 16px;
  --body-weight: 400;
  --body-line-height: 1.6;
  --body-letter-spacing: 0.03em;

  --body-sm-size: 15.13px;
  --body-sm-weight: 400;
  --body-sm-line-height: 1.65;
  --body-sm-letter-spacing: 0.03em;

  --caption-lg-size: 14.31px;
  --caption-lg-weight: 400;
  --caption-lg-line-height: 1.65;
  --caption-lg-letter-spacing: 0.03em;

  --caption-size: 13.53px;
  --caption-weight: 400;
  --caption-line-height: 1.65;
  --caption-letter-spacing: 0.03em;

  --caption-sm-size: 12.8px;
  --caption-sm-weight: 300;
  --caption-sm-line-height: 1.65;
  --caption-sm-letter-spacing: 0.03em;

  --overline-size: 12.11px;
  --overline-weight: 500;
  --overline-line-height: 1.65;
  --overline-letter-spacing: 0.03em;

	--ff-primary: "Raleway", sans-serif;
	--ff-secondary: "Merienda", sans-serif;

  /* See Reference Notes at the bottom of this file */
  /* --fs-h1: clamp(1.6rem, 1.379rem + 1.103vw, 2rem); */
  --fs-h1: clamp(1.8rem, 1.383rem + 2.087vw, 3rem);
  --fs-h2: clamp(1.4rem, 1.25rem + 0.8vw, 1.7rem);
  --fs-h3: clamp(1.2rem, 1.1rem + 0.533vw, 1.4rem);
/*   --fs-body: clamp(1rem, calc(1.25rem + 2vw), 1.8rem); */
/* 	--fs-body: clamp(1.1rem, 0.6rem + 2.667vw, 1.7rem); */
	--fs-body: clamp(1.125rem, 1.0739rem + 0.2273vw, 1.25rem);
  --fs-small: 0.9rem;

  --fw-reg: 400;
  --fw-med: 500;
  --fw-bold: 600;
/* 	--fw-header: normal; */

	--clr-light: #fff;
	--clr-off-white: rgb(235, 235, 235);
	--clr-dark: #303030;
	--clr-accent: #16e0bd;
	--clr-background: #DBCA60;
	--clr-dropdowns: #ffe699;
	--clr-link: #8B4513;
	--clr-linkvisited: #004d00;
	--clr-quote: rgba(197, 240, 197, 0.5);

	--clr-red: #e60000;
	--clr-green: hsl(120, 100%, 24%);
	--clr-blue: blue;
	--clr-black: black;
	--clr-cocobrown: #7E3817;
	--clr-darkbrown: #432109;

}

img {
	display: block;
	max-width: 100%;
}

html {
	margin: 0;
	padding: 0;
	scroll-behavior: smooth;
}

body {
	/* https://www.freecodecamp.org/news/html-page-width-height/ */
	min-height: 100vh;
	font-family: var(--ff-primary);
	font-size: var(--fs-body);
	line-height: 2.0rem; /* needed to due increased font size */
	color: var(--clr-dark);
	/* ff 3.6+ */
	background:-moz-linear-gradient(92deg, rgba(255, 255, 0, 0.65) 0%, rgba(255, 255, 0, 0.23) 48%, rgba(78, 154, 6, 0.77) 99%);
	/* safari 5.1+,chrome 10+ */
	background:-webkit-linear-gradient(92deg, rgba(255, 255, 0, 0.65) 0%, rgba(255, 255, 0, 0.23) 48%, rgba(78, 154, 6, 0.77) 99%);
	/* opera 11.10+ */
	background:-o-linear-gradient(92deg, rgba(255, 255, 0, 0.65) 0%, rgba(255, 255, 0, 0.23) 48%, rgba(78, 154, 6, 0.77) 99%);
	/* ie 6-9 */
	/* filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4E9A06', endColorstr='#FFFF00', GradientType=1 ); */
	/* ie 10+ */
	background:-ms-linear-gradient(92deg, rgba(255, 255, 0, 0.65) 0%, rgba(255, 255, 0, 0.23) 48%, rgba(78, 154, 6, 0.77) 99%);
	/* global 94%+ browsers support */
	background:linear-gradient(92deg, rgba(255, 255, 0, 0.65) 0%, rgba(143, 143, 101, 0.23) 48%, rgba(78, 154, 6, 0.77) 99%);
}

ul {
	padding-block-end: 1em;
}

ul.unstyled {
	list-style-type: none;
}

dialog {
  padding: 20px;
  border-radius: 8px;
  border: 1px solid #ddd;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

dialog::backdrop {
  background-color: rgba(0,0,0,0.6);
}

/* typography
----------------------------------------------------------------------------- */
p {
	line-height: 1.6;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--ff-secondary);
	font-weight: var(--fw-header);
	color: var(--clr-cocobrown);
	padding: 0;
	margin: 0;
}
h1 {
	font-size: var(--fs-h1);
/* 	line-height: 1.3em; */
  font-weight: var(--h1-weight);
  line-height: var(--h1-line-height);
  letter-spacing: var(--h1-letter-spacing);
}
h2 {
	font-size: var(--fs-h2);
/* 	line-height: 1.3em; */
	font-weight: var(--h2-weight);
  line-height: var(--h2-line-height);
  letter-spacing: var(--h2-letter-spacing);
	padding-block-end: .5em;
}
h3 {
	line-height: 1.5;
}
h4 {
	line-height: 1.5;
}
h5 {
	color: var(--clr-green);
}

/*  link styles */

a:any-link {
	color: var(--clr-dark);
}
a:link {
	text-decoration: none;
	text-underline-offset: 7px;
}
/*a:visited {
	color: #006600;
	color: #004d00;
	text-decoration: none;
} */
a:focus,
a:hover {
	opacity: 75%;
}
a:hover {
	color: var(--clr-green);
	text-decoration: underline;
	outline: none;
}
/*
a:active {
	color: black;
	background-color: #FFFFCC;
	outline: solid;
	outline-width: thin;
	border: none;
}
*/

a.RedLnkM.p-1,
a.HavLnkM.p-1 {
	padding-inline: .3em;
}


/* general styles - utilities
---------------------------------------------------------------------------- */
.debug-off {
	display: none;
}
.debug-on {
	display: block;
}

.my-pb1 {
	padding-bottom: 1em;
}
.my-pb2 {
	padding-bottom: 2em;
}
.my-pl1 {
	padding-left: 1em;
}
.my-pl2 {
	padding-left: 2em;
}
.my-pl3 {
	padding-left: 3em;
}
.my-pl4 {
	padding-left: 4em;
}
.my-ml1 {
	margin-left: 1em;
}
.my-ml2 {
	margin-left: 2em;
}
.my-ml4p {
	margin-left: 4%;
/* 	border: 1px solid green */
}

.indexPage--indent {
/* 	margin-left: 4%; */
	margin: 0;
/* 	border: 1px solid green */
}

main.page--index section > h2 {
	text-align: center;
	line-height: 2.5em;
	background-color: var(--clr-quote);
	margin-block-end: .5em;
}

.my-ml3 {
	margin-left: 3em;
}
.my-ml4 {
	margin-left: 4em;
}
.my-mt2 {
	margin-top: 2em;
}
.element-center {
	margin: 0 auto;
}
.image-center {
	margin: 0 auto;
}
.text-center {
	text-align: center;
	margin: 0 auto;
}
.text-flex-start {
	align-self: flex-start;
}
.text-right {
	text-align: right;
}
.text-flex-end {
	align-self: flex-end;
}
.text-italic {
	font-style: italic;
}
.text-bold {
	font-weight: var(--fw-bold);
}
.noShadow {
  box-shadow: none;
}
.noRadius {
	border-radius: 0px;
}
.hidden {
	opacity: 0;
}
.hidden:hover {
	opacity: 0;
}
.noteB {
	color: var(--clr-green);
	font-size: 95%;
	margin-left: 2%;
}
.noteB p {
	margin: 0;
}
.scrB {
	padding-top: 1em;
	margin: 0 0 1em 2em;
}
sup {
	color: var(--clr-red);
	padding-left: .5rem;
	padding-right: .5rem;
}

/* header ----------------------------------------- */
header {
	padding-block-start: .5em;
	padding-inline: 3%;
/* 	border: 2px solid red; */
}
.header__wrapper {
	max-width: 1000px;
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	align-items: center;
	gap: .5em;
/* 	border: 2px solid blue; */
	margin: 0 auto;
}
.header__image {
	max-width: 100px;
/* 	border: 2px solid green; */
}

/* burger toggle */
.header__burger {
  cursor: pointer;
/* 	border: 2px solid salmon; */
}
.header__burger div {
  width: 25px;
  height: 3px;
  background-color: var(--clr-black);
  margin: 5px;
  transition: all 0.3s ease;
}
.navbar-toggle {
	cursor: pointer;
	font-size: 1.5rem;
}
.toggle .line1 {
	transform: rotate(-45deg) translate(-5px, 6px);
}
.toggle .line2 {
	opacity: 0;
}
.toggle .line3 {
	transform: rotate(45deg) translate(-5px, -6px);
}

/* date */
.header__date {
	color: var(--clr-darkbrown);
/* 	border: 2px solid aqua; */
}

/* menu */
/* .header__navbar {
	padding-bottom: .5em;
	border: 2px solid red;
} */

.header__menu {
	display: flex;
	flex-direction: column;
	justify-content: center;
	position: absolute;
	top: 150px;
	left: 0;
	right: 0;
  opacity: 0;
	background-color: #ffe699;
/* 	border: 1px solid rgb(100, 255, 11); */
	margin: 0 auto;

	transition: all .75s ease;
/* 	border: 2px solid purple; */
}
a.nav-link {
	display: block;
	min-width: 100px;
	font-weight: var(--fw-bold);
	text-align: center;
	text-decoration: none;
	background-color: var(--clr-green);
	color: white;
	padding: .3em .5em;
	border: 1px solid #8B4513;
	margin: .3em 0;
}
a.nav-link:hover {
	background-color: #ccffcc;
	color: var(--clr-dark);
	text-decoration: underline;
}
.showMenu {
	top: 155px;
  opacity: 1;
}

/* end header  */

/* Style Guide */

.SG__style-name {
	font-size: .9rem;
	color: var(--clr-linkvisited);
}

.SG__typography h1,
.SG__typography h2,
.SG__typography h3,
.SG__typography h4,
.SG__typography h5,
.SG__typography h6 {
	border: 1px solid black;
}

/* trying to fix graphics on home page */
.wrapper__img {
  inline-size: 60vw;
  block-size: 50vh;
  padding: 1.5em 0;
  margin: 0 auto;
/*   border: 1px solid black; */

  > img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
  }
}

/* begin page content  */

ul.intro__nav-list {
	list-style-type: none;
}

.intro.indexPage h2 {
	padding-block-end: .75em;
}
/*  Check for error in plural !!!!                     */
.container-indexPage h2 {
	padding-block-start: 1em;
	padding-block-end: .25em;
}
div.indexPage_flexContainer-2col {
	display: flex;
	flex-flow: row wrap;
	gap: 1em;
	margin-block-end: 1em;
}
div.indexPage_flexContainer-2col a {
	min-width: 45%;
}


/* <main.page--index> */

.page--index h3 {
	/* color: red; */
	text-transform: uppercase;
	font-size: 1.25rem;
	font-weight: var(--fw-bold);
	padding-block-start: .75em ;
	padding-block-end: .25em;
}

.page--index__block--ml {
	margin-inline-start: 2%;
}

/* .page--index__block--pl {
	padding-inline-start: 2%;
} */

.page--index__block--image {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 1em;
	padding-block: 1em;
/* 	border: 2px solid salmon; */
}

.page--index__block--image figcaption {
	font-weight: var(--fw-bold);
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding-block-start: .5em;
}

.page--index__block--video,
.page--note__block--video {
	text-align: center;
	font-weight: var(--fw-bold);
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 1em;
	padding-block: 1em;
/* 	border: 2px solid violet; */
}
.page--index__block--video figure.video,
.page--note__block--video figure.video {
	max-width: 90%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
/* 	border: 2px solid orange; */
}
.page--index__block--video figcaption,
.page--note__block--video figcaption {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: .25em;
	padding-block: .75em;
/* 	border: 2px solid mediumvioletred; */
}

/* <main.page--note> */

.page--note__block {
	padding-block: 1em;
}
.page--note img {
	margin-inline: auto;
}
.page--note figure {
	padding-block: 1em;
}
.page--note figure > figcaption {
/* 	font-size: var(--fs-small); */
	font-size: 1rem;
	text-align: center;
	padding-block: .5em;
}

/* scroll button */
button.scrollToTop {
	color: var(--clr-dark);
	position: sticky;
	top: 90%;
	left: 90%;
	z-index: 5;
	background: tan;
	opacity: 65%;
	padding: 0.5rem 1rem;
	border-radius: 1rem;
}
button.scrollToTop:hover {
	background-color: #FFFFCC;
	opacity: 100%;
}
/* turn off scroll button on home page */
main.home-page button.scrollToTop {
	display: none;
}
/* alpha nav bar - IndexPages only
------------------------------------ */
.alphaNavBar {
	/* max-width: 90%; */
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	gap: 0.5rem;
	padding: 1em 0;
	margin: 0 auto 1em;
}
.alphaNavBar a {
	padding: 0 .4em;
}
.alphaNavBar a:hover {
	padding: 0 .4em;
	border-radius: 2em;
}

section {
/* 	padding-block-end: 1em; */
	padding-inline: 3%;
/* 	border: 2px solid red; */
}
section h2 {
	text-transform: uppercase;
}

.page__wrapper {
	max-width: 1000px;
	background-color: var(--clr-off-white);
	/* padding-inline: min(5em 8%); */
	/* padding-inline: 8%; */
	/* padding-inline: 5%; */
	padding-inline: 2%;
	padding-block-start: 0em;
	padding-block-end: 1em;
	/* border: 2px solid blue; */
	border: 1px solid var(--clr-darkbrown);
	border-radius: 5px;
	margin: 0 auto;
}

.section__wrapper {
	max-width: 1000px;
	background-color: var(--clr-off-white);
	/* padding-inline: min(5em 8%); */
	padding-inline: 8%;
	/* padding-inline: 5em; */
	padding-block: 1em;
	/* border: 2px solid blue; */
	border: 1px solid var(--clr-darkbrown);
	border-radius: 5px;
	margin: 0 auto;
}

.section__wrapper--index {
	/* max-width: 1000px; */
	background-color: var(--clr-off-white);
	/* padding-inline: min(5em 8%); */
	/* padding-inline: 8%; */
	/* padding-inline: 5em; */
	padding-inline-start: 4%;
	/* padding-block-start: 0em; */
	/* padding-block-end: 1em; */
	/* border: 2px solid blue; */
	border: 1px solid var(--clr-darkbrown);
	/* border-radius: 5px; */
	margin: 0 auto;
}

.hero div.section__wrapper {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 1em;
}

.hero__h1 {
	text-align: center;
	margin-block-end: .5em;
}

.hero__h2 {
	text-align: center;
	padding-inline: min(.2em 5px);
	margin: 0;
}

.hero__picture {
/* 	max-width: 100%; */
	min-width: 20%;
}

.hero__img2 {
	/* width: 70%; */
	margin-inline: auto;
}

.hero__menu--wrapper {
	list-style-type: none;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 2em;
	padding-block-end: 1.5em;
}

.hero__menu--wrapper ul {
	list-style-type: none;
}

.hero__menu {
	list-style-type: none;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: .5em;
}

.hero__banner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1em;
	margin-block-end: 1em;
}

/* .hero__imageWrapper {
	max-width: 40vw;
} */

.quote {
	max-width: 50ch;
	font-style: italic;
	color: var(--clr-dark);
	display: flex;
	flex-direction: column;
	justify-content: center;
	background: rgba(197, 240, 197, 0.2);
	padding: 1em;
	border: 1px solid sienna;
	border-radius: 5px;
	margin: 0 auto;
}
.quote__cite {
	text-align: right;
	margin: 0;
}
cite a:link {
	color: var(--clr-dark);
}
blockquote p {
	margin: 0;
}
blockquote p::before {
	content: '\201C ';
}
blockquote p::after {
	content: ' \201D';
}
/* end blockquote  */
/* KJV pages */
.main-container.KJV-page p {
	max-width: 95%;
}
section.kjv h1 {
	text-align: center;
}
h2.PsalmTitle {
	font-size: .9rem;
	font-family: var(--ff-primary);
	max-width: 50%;
	text-align: center;
	text-transform: none;
	padding-bottom: 2em;
	margin: auto;
}
h2.PsalmTitle a {
	display: inline-block;
	margin-top: 1em;
}
nav.subnav.kjv {
	display: flex;
	flex-flow: row nowrap;
	justify-content: center;
	align-items: center;
	column-gap: 1rem;
	padding: 1rem 0;
	margin: 0 auto;
}
nav.subnav.kjv a:hover {
	background-color: unset;
	text-decoration: none;
}
nav.subnav.kjv img.zoom {
	transition: transform .2s;
}
.zoom:hover {
  transform: scale(1.15);
  -ms-transform: scale(1.15); /* IE 9 */
  -webkit-transform: scale(1.15); /* Safari 3-8 */
}
nav.subnav.notePages {
	text-align: right;
}
nav.subnav.notePages img {
	display: inline;
}


/* footer  --------------- */

footer {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	align-items: center;
	padding-block: 1em;
	padding-inline: 3%;
/* 	border: 2px solid red; */
}
.footer__wrapper {
	max-width: 1000px;
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	align-items: center;
/* 	border: 2px solid blue; */
	padding-inline: min(5em 8%);
	margin: 0 auto;
}
.footer__title {
	margin: 0 auto;
}
.footer__contact {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
	align-content: center;
	/* border: 1px solid darkgreen; */
}
.footer__filedata {
	max-width: fit-content;
}

/* I like to include this as it helps me set breakpoints
Extra small (xs) devices (portrait phones, less than 576px)

Small (sm) devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }

Medium (md) devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

Large (lg) devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

Extra (xl) large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

-----

    320px — 480px: Mobile devices
    481px — 768px: iPads, Tablets
    769px — 1024px: Small screens, laptops
    1025px — 1200px: Desktops, large screens
    1201px and more —  Extra large screens, TV
*/
/* media queries
------------------------------------ */
@media (min-width: 600px) {
	.quote {
		max-width: 80%;
	}
	.page__wrapper {
		-webkit-box-shadow:0 5px 10px #668D3C;
						box-shadow:0 5px 10px #668D3C;
	}
	.section__wrapper {
		-webkit-box-shadow:0 5px 10px #668D3C;
						box-shadow:0 5px 10px #668D3C;
	}
}

@media only screen and (max-width: 766px) {

}

@media only screen and (min-width: 767px) {
	.indexPage--indent {
		margin-left: 4%;
		/* 	border: 1px solid green */
	}
}

@media only screen and (min-width: 900px) {
	.header__wrapper {
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}

	.hero__menu--wrapper {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		/* gap: 4em; */
	}

	.hero__menu {
		min-width: 50%;
	}

	.hero__banner {
		display: grid;
		grid-template-columns: 1fr 2fr;
	}

	.header__menu {
		background-color: inherit;
		max-width: 1000px;
		position: absolute;
	/* 	flex-flow: column nowrap; */
		flex-flow: row wrap;
	/* 	justify-content: center; */
		align-items: center;
		align-content: center;
		column-gap: 1rem;
		top: 80px;
	/* 	left: 0;
		right: 0;
		opacity: 0; */
		background-color: var(--clr-off-white);
		padding-block: 1em;
	/* 	border: 1px solid rgb(100, 255, 11); */
		margin: 0 auto;

		transition: all .75s ease;
	}
	a.nav-link {
		border-radius: 12.5px;
	}




}




/* Reference Notes: */

/* https://css-tricks.com/linearly-scale-font-size-with-css-clamp-based-on-the-viewport/ */

/* https://fluid.style/type?min=2.25&max=4.5&min-bp=20&max-bp=77.5&unit=%22rem%22 */

/* https://utopia.fyi/type/calculator */

/*
Pick your minimum and maximum font sizes, and your minimum and maximum viewport widths.

slope = (maxFontSize - minFontSize) / (maxWidth - minWidth)
yAxisIntersection = -minWidth * slope + minFontSize

preferredValue = yAxisIntersection[rem] + (slope * 100)[vw]

.header {
  font-size: clamp(1rem, -0.875rem + 8.333vw, 3.5rem);
}

MPA View Transitions deep dive
https://www.youtube.com/watch?v=quvE1uu1f_I

*/