/* GENERAL */
body {
	background-color:#f1e5c9;
}
.wrapper {
	width:98%;
	margin:0 auto;
	position:relative;
	display:block;
}
a:link, a:visited {
	color:#5A4411;
	text-decoration:none;

}
a:hover, a:focus {
	color:#895720;
	text-decoration:underline;
}	
a.center {
  display: block; /* or inline-block */
  width: fit-content; /* or a fixed width like 200px */
  margin: 0 auto;
}

.center {display:block;text-align: center;}
img {margin:1%;}

.parallax-integrity {
  background-image: url('/data/uploads/ethical-living.png');
   background-attachment: fixed;
  background-position: center;
	overflow:hidden;
  background-repeat: no-repeat;
  background-size: cover;
}
.content {
  padding-top: 34%;
  color: #f1e5c9;
  font-family: Nunito;
	text-align:center;
}
.total-score {font-size:2rem;padding:3%;}
#scoreDisplay {
  position: fixed;
  top: 10px;
  left: 10px;
  background: #412A08; /* EAPCS brown */
  color: #fff;
  padding: 10px 15px;
  font-weight: bold;
  font-family: sans-serif;
  border-radius: 8px;
  box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
  z-index: 1000;
}

/* HEADER */
header {
  width: 100%;
  height: 50vh;
  background-image: url("/data/uploads/header-2.png");
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  background-repeat: no-repeat;
}
.header {
	 background-image: url('/data/uploads/new-logo.png');
    background-position: left center;
    background-size: contain;
    background-repeat: no-repeat;
    height: 10vh;
}
#logo {
	margin-left:4%;
}
/* HEADER: breadcrumbs */
header .breadcrumbs {
	display:none;
	
	border-top:#FFF 1px solid;
	border-bottom:#ccc 1px solid;
	font-size:11px;
	height:25px;
	line-height:25px;
	overflow:hidden;
	color:#bbc7b3;
	width:100%;
	background: #eee;
	background: -moz-linear-gradient(top, #EDEDED 0%, #D5D5D5 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#EDEDED), color-stop(100%,#D5D5D5));
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#EDEDED', endColorstr='#D5D5D5',GradientType=0 ); 
}
header .breadcrumbs a:link, 
header .breadcrumbs a:visited {
	color:#666;
	text-decoration:underline;
}
header .breadcrumbs a:focus, 
header .breadcrumbs a:hover {
	color:#316594;
	text-decoration:underline;
}
#index header .breadcrumbs {
	display:none; /* no reason to have breadcrumbs on homepage */
} 

/* HEADER: logo */
header #logo {
	position:absolute;
	top:20px;
	left:0;
	font-size:35px;
	white-space:nowrap;
	color:#D9994B;
	font-family:'Nunito Sans';
}
header #logo:link, 
header #logo:visited, 
header #logo:hover, 
header #logo:focus {
	text-decoration:none;
}

/* HEADER: navigation */
header nav {
	position:absolute;
	top:30px;
	right:0;
}
header nav ul {
	list-style:none;	
	float:right;
}	
header nav li {
	display:block;
	float:left;
	margin:0 0 0 10px;
}
header nav li a {
	display:block;
	font-size:13px;
	padding:5px 15px;
	font-weight:bold;
}
header nav li a:link, 
header nav li a:visited {
	color:#eee;
	text-decoration:none;
}	
header nav li a:hover, 
header nav li a:focus {
	color:#FFF;
	text-decoration:none;
}
header nav li.current a {
	color:#FFF;
	background:#7096B6;
	background:rgba(255,255,255,.2);
	text-decoration:none;
	border-radius:40px;
	-moz-border-radius:40px;
	-khtml-border-radius:40px;
	-webkit-border-radius:40px;
}


/* BODY CONTENT */
.wrapper {
  display: flex;
  flex-wrap: wrap; /* keeps it responsive */
  gap: 3%;          /* optional spacing between columns */
  margin: 0px 1%;
}

/* Main content (70%) */
article {
  flex: 0 0 64%;
  padding: 1%;
  border-bottom: 1px solid #c8c8c8;
  border-left: 1px solid #e4e4e4;
  border-right: 1px solid #c8c8c8;
  box-shadow: 2px 1px 10px rgba(0,0,0, 0.07);
}


.ethical-living {	background: url('/data/uploads/autoupload/ethical-living.png');
	background-attachment: fixed;
 }
.practical-wisdom {background: url('/data/uploads/autoupload/practical-wisdom.png');
	background-attachment: fixed;}
.spiritual-foundations {background: url('/data/uploads/spiritual-foundations.png');
	background-attachment: fixed;}
.civic-responsibility {background: url('/data/uploads/autoupload/civic-responsibility.png');
	background-attachment: fixed;}
.relationships {}
.justice-mercy {}
.work-vocation {}
.teaching-modeling {}


article h3 {
	margin:0 0 15px 0;
}
article h4 {
	margin:0 0 10px 0;
	font-weight:100;
}
article h5 {
	margin:0 0 10px 0;
}
article h6 {
	margin:0 0 10px 0;
}
article section {
	padding:2%;
	line-height:22px;
	color:#191104;	
		background: rgb(241,229,201,0.7);
}
article section p {margin:0 0 10px 0;font-size:1em;}
article section ul, 
article section ol {
	margin:0 0 10px 10px;
}
article section ul ul, 
article section ol ol,
article section ul ol, 
article section ol ul {
	margin:0 0 0 15px;
}
article section code {
	border:1px solid #ccc;
	background:#f6f6f6;
	font-size:12px;
	padding:1px;
}
article section pre {
	border:1px solid #ccc;
	background:#f6f6f6;
	padding:15px;
	margin:0 0 25px 0;
	line-height:16px;
	font-size:13px;
	color:#555;
	text-shadow: 1px 1px 0px #fff;
	border-radius:0 4px 4px 0;
	-moz-border-radius:0 4px 4px 0;
	-khtml-border-radius:0 4px 4px 0;
	-webkit-border-radius:0 4px 4px 0;
}
article section pre code {
	border:none;
	background:none;
	padding:none;
}

article section blockquote {
  text-align: justify;
  color: #f1e5c9;
  line-height: 1.5;
  font-family: 'Nunito Sans', serif;
  font-style: italic;
  margin: 2% 0px 0px 5%;
	width:86%;
}
article section .footer {
	color:#888;
	font-size:11px;
	margin-top:40px;
	border-top:1px dotted #895720;
	padding-top:15px;
}
article section .footer p {
	margin:0 0 10px 0;
}
.donation-tiers {text-indent: 3%;}
dt { color: #6B4214; font-weight: bold; margin-top:1%;}
dd {padding-left:2%;;
}
/* Quiz Container */
.quiz-form {width: 90%;}

    .quiz-container {
    /*  border-radius: 10px;
      padding: 2rem;
      box-shadow: 0 0 10px rgba(0,0,0,0.1);
      max-width: 400px;
      margin: 2% 3%;
display: inline-grid; */
		display: flex;
  flex-wrap: wrap;
  justify-content: space-between; /* or center or flex-start */
  gap: 20px; /* space between cards */
    }
.quiz {
	flex: 1 1 30%; /* grow, shrink, basis */
  min-width: 280px; /* keeps it responsive */
  max-width: 32%; /* avoids overflowing */
  box-sizing: border-box;
	box-shadow: 0 0 10px rgba(0,0,0,0.1);
  padding: 20px;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;}

/* .correct-highlight {
  background-color: #828e71;
  color: #fff;
  font-weight: bold;
  padding: 6px;
  border-radius: 4px;
  display: inline-block;
  margin-top: 10px;
}

    .choice {
      display: block;
      margin: 0.5rem 0;
      padding: 0.75rem;
      background: #e0e0e0;
      border-radius: 6px;
      cursor: pointer;
    }
    .choice:hover {
      background: #d0d0d0;
    } */
.score, .text {padding:1%;}
.radio-group {
  display: flex;
  gap: 20px; /* spacing between Yes and No */
  margin: 1%;
	align-items:center;
	width:90%;
  font-family: sans-serif;
}

.radio-group label {
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
}
.donation-tier {
  display: flex;
  width: 100%;
  margin-bottom: 20px; /* Add some spacing between tiers */
}

/* donations */
.donation-image {
  flex: 1;
  background-size: cover;
  background-position: center;
  height: 100%; /* Adjust as needed */
}
td img { width: 46%;}
.donation-title,
.donation-desc {
  flex: 1;
  padding: 10px;
}

.donation-title {
  font-size: 1.5em;
  font-weight: bold;
}

.donation-desc {
  font-size: 1em;
  color: #555;
}

/* Default layout: image on the left, content on the right */
.donation-tier:nth-child(even) .donation-image {
  order: 1;
}

.donation-tier:nth-child(even) .donation-title,
.donation-tier:nth-child(even) .donation-desc {
  order: 2;
}

/* SIDEBAR 
aside {
	float:right;
	width:20%;
	padding:1%;
	margin:1%;
}*/
/* === Testimonials === */
.testimonial-carousel {
  position: relative;
	padding:1%;
  max-width: 600px;
  margin: 0 auto;
  overflow: hidden;
  min-height: 160px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
}

.testimonial-slide {
  display: none;
	padding:2%;
  opacity: 0;
  transition: opacity 0.6s ease-in-out;
  text-align: center;
}

.testimonial-slide.active {
  display: block;
  opacity: 1;
}

.testimonial-slide p {
  font-size: 1.125rem;
  font-style: italic;
  margin-bottom: 1rem;
}

.testimonial-slide .author {
  font-weight: bold;
  color: #047857;
}

/* Sidebar (20%) */
aside {
  flex: 0 0 24%;
  padding: 1%;
}


aside .section {
	margin:0 0 40px 0;
	font-size:0.8em;
	color:#5A4411;
	box-shadow: 2px 1px 10px rgba(0,0,0, 0.07);
}
.aside-content {margin: 3%;}
aside .section p {
	margin:0 0 15px 0;
}
aside .section ul, 
aside .section ol {
	margin:0 0 1% 1%;
}
ul.menu {}
/* icons */
.icon span {
  display: inline-block;
  width: 80px;
  height: 80px;
  background-image: url('/data/uploads/social-icons-new.png');
  background-repeat: no-repeat;
}


/* Position each icon */
.icon.youtube span {
  background-position: -2px -14px;
}
.icon.instagram span {
  background-position: -78px -14px;
}

.icon.facebook span {
  background-position: -148px -8px;
}

.icon.twitter span {
  background-position: -6px -100px;
}
.icon.rumble span {
  background-position: -82px -102px;
}
.icon.linktree span {
  background-position: -152px -102px;
}
.icon.blogger span {
  background-position: -226px -102px;
}
.icon.teaching span {
  background-position: -226px -10px;
}

ul.clean {list-style-type: none;}
ul li a {font-size:1em;}

aside .section h2 {
	background:#895720;
	background-image: url('/data/uploads/new-logo.png');
	background-position: left center;
	background-size: contain;
	background-repeat: no-repeat;
	font-weight:100;
	color:#f1e5c9;
	font-size:19px;
	line-height:19px;
	border-radius:5px;
	-moz-border-radius:5px;
	-khtml-border-radius:5px;
	-webkit-border-radius:5px;/**/
	text-align:center;
}

.section h2 a {color:#f1e5c9; }


/* SIDEBAR: socialmedia */
aside #socialmedia {
	position:relative;
}
aside #socialmedia h2 {
	width:65px;
	background: #316594;
	background: -moz-linear-gradient(top, #316594 0%, #2C5983 100%); 
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#316594), color-stop(100%,#2C5983));
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#316594', endColorstr='#2C5983',GradientType=0 ); 
}
aside #socialmedia .icons {
	position:absolute;
	top:3px;
	left:100px;
}
aside #socialmedia .icons a{
	margin:0 2px;
}
/* Forms */
/* === Form Styles === */
form {
  padding: 1%;
  border-radius: 5px;
  width: 96%;
  margin: 0 auto;
  display: inline-grid;
}

label {
  display: inline-flex;
  align-items: center;
  margin-right: 1.5rem;
  cursor: pointer;
  user-select: none;
  width: 90%;
	font:16px Nunito Sans;
}

label input {
  margin-right: 0.4rem;
}

input, textarea, select {
  width: 90%;
  padding: 10px;
  margin-bottom: 15px;
  border: 1px solid #555;
  border-radius: 3px;
}

input[type=button],
input[type=submit],
input[type=reset],
input[type=radio] {
  border: none;
  padding: 16px 32px;
  text-decoration: none;
  margin: 4px 2px;
  cursor: pointer;
	width:20%;
}

/* FOOTER */
footer {
	font-size:small;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	padding: 3% 4%;
	flex-wrap: wrap;
}

footer .left {
	flex: 1 1 44%;
	text-align: left;
}

footer .right {
	flex: 1 1 44%;
	text-align: right;
}

footer a:link, footer a:visited {
	color:#6B4214;
	text-decoration:none;
}
footer a:hover, footer a:focus {
	color:#895720;
	text-decoration:underline;
}


/****************************  new CSS ***************************************/
/* === MOBILE-FRIENDLY ADJUSTMENTS (append or refactor into base CSS) === */
@media (max-width: 800px) {

  /* Make wrapper stack naturally */
  .wrapper {
    flex-direction: column;
    gap: 1rem;
    padding: 1rem 0;
  }

  /* Full-width main content */
 article,  aside #sidebar{
  flex: 2 2 96%;
  padding: 1%;
  border-bottom: 1px solid #c8c8c8;
  border-left: 1px solid #e4e4e4;
  border-right: 1px solid #c8c8c8;
  box-shadow: 2px 1px 10px rgba(0,0,0, 0.07);
}

  /*  sidebar or push below */
   {
  flex: 2 2 96%;
}

  /* Header logo and nav stacking */
  header {
    height: auto;
    background-attachment: fixed;
    text-align: center;
  }
  header #logo {
    position: static;
    display: block;
    margin: 1rem 0;
    text-align: center;
  }
  header nav {
    position: static;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  header nav ul {
    float: none;
    padding: 0;
  }
  header nav li {
    float: none;
    margin: 0.5rem 0;
  }

  /* Responsive images */
  img {
    width: 100%;
    height: auto;
    margin: 0.5rem 0;
  }

  /* Quiz layout stack */
  .quiz-container {
    display:grid;
    align-items: center;
  }
  .quiz, .quiz-form {
   flex: 2 2 96%;
   max-width: 100%;
  }

  /* Form adjustments */
  form {
   flex: 2 2 96%;
 }
  input[type=button],
  input[type=submit],
  input[type=reset] {
  flex: 2 2 96%;
    padding: 12px;
  }

  /* Footer stack */
  footer {
    text-align: center;
  }
  footer .left,
  footer .right {
    float: none;
    width: 100%;
    margin: 0.5rem 0;
    text-align: center;
  }


/* Optional: Improve touch targets and readability */
button, a, input[type=submit], .choice {
  flex: 2 2 96%;
  font-size: 1rem;
  line-height: 1.5;
  padding: 0.75rem;
  min-height: 44px; /* Apple human interface minimum */
}