/* Layout Reset + Safari Compatibility */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
}
body {
  touch-action: manipulation;
}

/* 🔤 Responsive base font size scaling */
html {
  font-size: 16px; /* mobile default */
}
@media screen and (min-width: 768px) {
  html {
    font-size: 16px;
  }
}
@media screen and (min-width: 1024px) {
  html {
    font-size: 16px;
  }
}

/* Responsive Container */
.content {
  width: 100%;
  max-width: 100vw;
  margin: 0 auto;
  /*padding: calc(2em + env(safe-area-inset-top)) 1em calc(2em + env(safe-area-inset-bottom)) 1em;*/
  box-sizing: border-box;
}

@media screen and (min-width: 768px) {
  .content {
    max-width: 720px;
  }
}

@media screen and (min-width: 1024px) {
  .content {
    max-width: 860px;
  }
}

/* Global Body Styling */
body {
  background-color: #000;
  color: #fff;
  font-family: "Open Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
  font-variation-settings: "wdth" 100;
  text-align: center;
}

a {
  color: #057B00;
}
a:hover,
a:active {
  color: #ffffff;
}

/* Typography and Layout */
.verse-text {
  font-size: 1.2rem;
  width: 100%;
  line-height: 1.6em;
  text-align: left;
  color: #EBEBEB;
}
.scripture2{
	padding:0 8%;
}

.initial-verse {
  font-size: 1.5rem;
line-height:140%;
  font-family: "Roboto Slab", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  text-align: center;
  background-color: rgba(5, 123, 0, 0.2);
  border-radius: 12px;
	text-shadow: 1px 1px 2px black;

}
#quote {
  background-color: #222; /* fallback color */
  color: white;
  min-height: 320px;
  position: relative;
}
#quote{
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

#quote.has-background {
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
#quoteText{
	font-size:+1.25em;
	line-height:140%;
}
.top-quote{
	  padding: 8% 8% 0 8%;
}
.bottom-quote {
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1));
	padding:0 8% 8% 8%;
}
.scripture-reference {
  font-size: 1.5rem;
	font-weight:700;
  margin: 1.25em 0 .5em 0;
  color: #07BE00;
  font-family: "Roboto Slab", serif;
  text-align: center;
	line-height:140%;
	text-shadow: 1px 1px 2px black;
}
.verse-expanded{
	  font-size: 2rem;
	font-weight:500;
  margin: 0 0 1.25em 0;
  font-family: "Roboto Slab", serif;
  text-align: center;
	line-height:140%;
}

.scripture-summary {
  font-size: 1.25rem;
  font-family: "Open Sans", sans-serif;
  line-height: 1.4;
  font-weight: 300;
  margin: 1.5em 0 0 0;
	border-top: 1px dotted rgba(5, 123, 0, 0.6);
	padding-top:1.5em;
	text-shadow: 1px 1px 2px black;
}
.highlight {
  padding: 0.25em;
  border-radius: 4px;
  display: inline-block;
	color:#ffffff;
	font-weight:600;
}

.link {
  font-size: 0.875rem;
  color: #ccc;
  font-weight: 400;
}

.button, button {
  width: 100%;
  max-width: 300px;
  margin: 2em auto 0;
  padding: 0.75em 1em;
  background-color: #057B00;
  color: white;
  text-decoration: none;
  border-radius: 5px;
  border: none;
  font-size: 1rem;
  line-height: 1.4;
  font-family: "Roboto Slab", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  align-items: center;
  justify-content: center;
	display:flex;
}
.button:hover {
  background-color: #055701;
}
button {
	display:inline-block;
}
button[class~="button"] {
  font-size: 1rem;
}
.outline{
	border: solid 1px #057B00;
	background-color: rgba(12,29,1,0.63);
	display:inline-block;
}
.outline:hover{
	background-color:#032d01;
}

.material-symbols-outlined {
  margin-right: 8px;
}

.footer {
  margin: 0 4% 8% 4%;
  font-size: .875em;
  font-weight: normal;
	color:#A0C78A;
}
.footnote{
		color:#5A7956;
}

.outline-button {
  margin-top: 1em;
  padding: 0.5em 1em;
  background-color: transparent;
  color: #ffffff;
  border: 1px solid #34a853;
  border-radius: 5px;
  text-decoration: none;
  cursor: pointer;
  width: 100%;
  max-width: 300px;
}
#shareButton {
  display: none; /* Hidden by default; shown by JS */
  align-items: center; /* Vertically centers flex items (icon and text) */
  justify-content: center; /* Horizontally centers flex items (optional) */
}
.icon {
	margin-right:8px;
}
.solo{
	margin:2em 0 10%;
	display:block;
}

/* Headings */
h1,
h2,
h3 {
  font-family: "Roboto Slab", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

h1 {
  font-size: 1.5rem;
}

.find-me {
  padding: 0 8% 8% 8%;
  font-size: 1.1rem;
  text-align: center;
}

/* Responsive Enhancements */
@media screen and (min-width: 768px) {
  .initial-verse {
    font-size: 2.5rem;
  }

  .scripture-reference {
    font-size: 2rem;
  }

  .scripture-summary {
    font-size: 1.5rem;
  }

  .button,
  .outline-button {
    font-size: 1.125rem;
  }

  h1 {
    font-size: 1.75rem;
  }

  .find-me {
    font-size: 1.25rem;
  }
}