/*********************************************
* INDEX
**********************************************
1. Pageload Animations
2. Meta Information Overlay
3. Scrolling Underline Link Effect
4. Page Titles
5. Headings
6. Images
7. Image Sizing
8. Image Decorations
9. Positioning
10. Padding
11. Lists
12. Hero Elements
13. Content Containers
14. Footer Containers
15. Code
16. Embeds
**********************************************/

/*********************************************
* 1. Pageload Animations
**********************************************/
html {
	background-color: rgba(50,50,50,1);
}

body {
    animation: fadeIn 1s;
    margin: 0;
	background-color: #fff;
}

@keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

/*********************************************
* 2. Meta Information Overlay
**********************************************/
#debug-overlay-container {
	font-size: 12px;
	line-height: 1.5;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #f0f0f0;
    padding: 10px;
    box-sizing: border-box;
    border-top: 1px solid #ccc;
    z-index: 9999;
}

.debug-content {
    max-width: 800px;
    margin: 0 auto;
}

/*********************************************
* 3. Scrolling Underline Link Effect
**********************************************/
a {
    position: relative;
    text-decoration: none;
}

a::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 2px;
    border-radius: 4px;
    background-color: #18272F;
    bottom: 0;
    left: 0;
    transform-origin: right;
    transform: scaleX(0);
    transition: transform .3s ease-in-out;
}

.footercontent a::before {
    background-color: #fff;
}

a:hover::before {
    transform-origin: left;
    transform: scaleX(1);
}

.disable-scrolling-underline::before {
    content: none;
    transform: none;

}

/*********************************************
* 4. Page Titles
**********************************************/
.pagetitle {
	margin-bottom: 50px;
	padding-bottom: 30px;
	border-bottom: 1px solid rgba(0,0,0,0.08);
}

.pagetitle h1 {
	max-width: 100%;
	margin-bottom: 12px;
	font-family: 'Source Serif 4', serif;
	font-weight: 700;
	color: #18272F;
}

.pagetitle .pagedate,
.pagetitle .pageauthor {
	color: #777;
	font-size: 0.95rem;
	margin: 0;
}

/*********************************************
* 5. Headings
**********************************************/
/*********************************************
* Typography Refinement
**********************************************/
body {
	font-family: 'Source Sans 3', sans-serif;
	color: #2a2a2a;
	font-size: 1.05rem;
	line-height: 1.75;
}

.content h2, .content h3 {
	font-family: 'Source Serif 4', serif;
	font-weight: 600;
	color: #18272F;
	letter-spacing: -0.01em;
}

.content h2 {
	font-size: 2.2rem;
	margin-top: 3rem;
	margin-bottom: 1rem;
}

.content h3 {
	font-size: 1.6rem;
	margin-top: 2.5rem;
	margin-bottom: 0.75rem;
}

.content p {
	max-width: 68ch; /* ideal reading line length */
	margin-top: 0;
	margin-bottom: 1.25rem;
}

.content hr {
	border: none;
	height: 1px;
	width: 80px;
	margin: 3rem auto;
	background: linear-gradient(to right, transparent, #c9a86a, transparent);
}

.content > .section > p:first-of-type {
	font-size: 1.2rem;
	line-height: 1.7;
	color: #444;
	margin-top: 0;
}

.content > .section > p:first-of-type::first-letter {
	font-family: 'Source Serif 4', serif;
	font-size: 3.2rem;
	font-weight: 700;
	float: left;
	line-height: 0.8;
	margin: 0.1rem 0.5rem 0 0;
	color: #18272F;
}

.content a {
	color: #8a6d3b; /* warm, muted — feels more "considered" than default blue */
	font-weight: 500;
}

.section.group + .section.group {
	margin-top: 3rem;
}

/*********************************************
* 6. Images
**********************************************/
img {
	width: 100%;
	max-width: 100%;
	height: auto;
}

/*********************************************
* 7. Image Sizing
**********************************************/
img.tiny {
	max-width: 150px;
	height: auto;
}

img.small {
	max-width: 300px;
	height: auto;
}

img.medium {
	max-width: 600px;
	height: auto;
}

img.large {
	max-width: 1000px;
	height: auto;
}

/*********************************************
* 8. Image Decorations
**********************************************/
img {
	border: 1px solid rgba(200, 200, 200, 0.5);
	border-radius: 0px;
	box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0);
	transition: box-shadow 0.5s ease-in-out;
}

img:hover {
	box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.5);
}

a img:hover {
	box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
}

img.nodecoration, img.nodecoration:hover {
	border: none;
	box-shadow: none;
	transition: none;
}

/*********************************************
* 9. Positioning
**********************************************/
.align-left, .align-right {
	display: block;
	float: left;
}

.center {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.textalign-left {
	display: block;
	text-align: left;
}

.textalign-center {
	display: block;
	text-align: center;
}

.textalign-right {
	display: block;
	text-align: right;
}

/*********************************************
* 10. Padding
**********************************************/
.padding-5px {
	padding: 5px;
}

.padding-10px {
	padding: 10px;
}

.padding-20px {
	padding: 20px;
}

.padding-50px {
	padding: 50px;
}

/*********************************************
* 11. Lists
**********************************************/
ul {
	list-style-type: circle;
	list-style-position: outside;
	list-style-image: none;
}

ol {
	list-style-type: decimal;
	list-style-position: outside;
	list-style-image: none;
}

ol, ul {
  padding-left: 20px;
  margin-top: 0;
}

/*********************************************
* 12. Hero Elements
**********************************************/
.hero, .herosmall {
	background: url(../../images/cornerstonehero.webp);
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	background-color: rgba(50,50,50,1);
	width: 100vmax;
	max-width: 100%;
	height: calc(100vmin - 66px);
    box-shadow: 0px 2px 5px rgba(0,0,0,0.5);
	position: relative; /* anchor the overlay */
	display: grid;
    align-items: center;
	align-content: center;
}

.herosmall {
	height: calc(25vmin + 66px);
}

/* Scrim so text stays readable regardless of the photo underneath */
.hero::before, .herosmall::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.25) 100%);
	z-index: 0;
}

/* Wrap the text so it can center as a block above the scrim */
.hero > *, .herosmall > * {
	position: relative;
	z-index: 1;
}

span.herotext {
	display: block;
	font-size: 9vmin;
	font-weight: 700;
	color: #fff;
	text-shadow: 0 2px 12px rgba(0,0,0,0.6);
	text-align: center;
    margin: 0;
	line-height: 1;
	letter-spacing: 0.02em;
	font-family: 'Source Serif 4', serif;
}

span.herosubtext {
	display: block;
	font-size: 3vmin;
	font-weight: 300;
	color: #fff;
	text-shadow: 0 1px 8px rgba(0,0,0,0.6);
	text-align: center;
	margin-top: 0.5vmin;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	opacity: 0.95;
	line-height: 1;
}

.herodownarrowcontainer {
    position: absolute;
    font-size: 10vmin;
    left: 50%;
    bottom: 0%;
	text-shadow: 0px 0px 2px #000;
	transition: text-shadow .5s ease-in-out;
}

.herodownarrowcontainer a {
    color: #fff;
}

.herodownarrowcontainer:hover {
	text-shadow: 0px 0px 10px #000;
	transition: text-shadow .5s ease-in-out;
}

.bounce {
  animation: bounce 2s infinite;
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-30px);
  }
  60% {
    transform: translateY(-15px);
  }
}

/*********************************************
* 13. Content Containers
**********************************************/
.contentcontainer {
    background: #fdfcfa;
    padding: 60px 48px;
    position: relative;
	max-width: 1280px;
	margin-top: 20px;
	margin-bottom: 40px;
	margin-left: auto;
	margin-right: auto;
	border: 1px solid #c9a86a;
}

.contentcontainer::before {
	content: '';
	position: absolute;
	inset: 8px;
	border: 1px solid rgba(0,0,0,0.08);
	pointer-events: none;
}

@media only screen and (max-width : 1000px) {
	.contentcontainer {
		padding: 36px 24px;
	}
}

.content {
	max-width: 960px;
	margin-left: auto;
	margin-right: auto;
}

/*********************************************
* 14. Footer Containers
**********************************************/
.footercontainer {
	background-color: rgba(50,50,50,1);
    padding: 50px 0 30px;
	border-top: 3px solid #c9a86a;
}

.footercontent {
	max-width: 90%;
	margin-left: auto;
	margin-right: auto;
	color: #e8e8e8;
	text-align: left;
}

.footercontent a {
	color: #fff;
}

.footercontent span.sectiontitle {
	display: block;
	text-align: left;
	font-family: 'Source Serif 4', serif;
	font-weight: 600;
	font-size: 1.4rem;
	color: #c9a86a;
	margin-bottom: 16px;
	letter-spacing: 0.02em;
}

.footercontent p {
	font-size: 0.95rem;
	line-height: 1.7;
	color: #cfcfcf;
	margin: 0 0 0.75rem;
	text-align: left;
}

/* Simple copyright bar beneath the columns */
.footerbottom {
	max-width: 90%;
	margin: 30px auto 0;
	padding-top: 20px;
	border-top: 1px solid rgba(255,255,255,0.1);
	text-align: center;
	font-size: 0.85rem;
	color: #999;
}

@media only screen and (max-width : 768px) {
	.footercontent {
		max-width: 95%;
		text-align: center;
	}
	.footercontent span.sectiontitle {
		text-align: center;
	}
}

/*********************************************
* Footer Schedule
**********************************************/
.schedule {
	margin: 0;
}
.schedule dt {
	font-weight: 600;
	color: #c9a86a;
	font-size: 0.95rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin-top: 14px;
	border-bottom: 1px solid rgba(255,255,255,0.12);
}
.schedule dt:first-child {
	margin-top: 0;
}
.schedule dd {
	margin: 4px 0 0;
	padding-left: 0;
	color: #cfcfcf;
	font-size: 0.95rem;
	line-height: 1.6;
	display: flex;
	justify-content: space-between;
	gap: 12px;
}
.schedule dd span:last-child {
	color: #fff;
	font-weight: 500;
	white-space: nowrap;
}

/*********************************************
* 15. Code
**********************************************/
code {
	overflow-x: auto;
}

/*********************************************
* 16. Embeds
**********************************************/
.responsive-embed {
	position: relative;
	width: 100%;
	max-width: 600px; /* optional cap so it doesn't stretch huge on wide screens */
	aspect-ratio: 4 / 3; /* matches your original 600x450 ratio */
	margin: 0 auto;
}

.responsive-embed iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}