/* Font face declarations */
@font-face {
  font-family: 'Pirata One';
  src: url('webfonts/PirataOne-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Sorts Mill Goudy';
  src: url('webfonts/SortsMillGoudy-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Sorts Mill Goudy';
  src: url('webfonts/SortsMillGoudy-Italic.ttf') format('truetype');
  font-weight: normal;
  font-style: italic;
}

@font-face {
  font-family: 'EB Garamond';
  src: url('webfonts/EBGaramond-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
}

@font-face {
  font-family: 'EB Garamond';
  src: url('webfonts/EBGaramond-Italic-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: italic;
}

@font-face {
  font-family: 'CushingStd-Medium';
  src: url('webfonts/CushingStd-Medium.otf');
}

@font-face {
  font-family: 'CushingStd-BookItalic';
  src: url('webfonts/CushingStd-BookItalic.otf') format('opentype');
  font-style: italic;
  font-weight: 400;
}

@font-face {
  font-family: 'CushingStd-BoldItalic';
  src: url('webfonts/CushingStd-BoldItalic.otf') format('opentype');
  font-style: italic;
  font-weight: 700;
}

@font-face {
  font-family: 'CushingStd-Bold';
  src: url('webfonts/CushingStd-Bold.otf') format('opentype');
  font-style: normal;
  font-weight: 700;
}


/* General body styles */
body {
  font-family: 'CushingStd-Medium', serif;
  font-size: 16px;
  line-height: 1.6;
  margin: 0;
  padding: 0;
}

/* Paragraphs */
p {
	font-family: 'CushingStd-Medium', serif;
	font-weight: 550;
	font-size: 1.33rem;
	margin-top: .33em;
	margin-bottom: 0;
	text-indent: 2.1em;
	line-height: 1.21;
	color: black;
}
.citation {
  font-family: 'CushingStd-BookItalic', serif;
  font-weight: 550;
  font-size: 1.1rem;         /* slightly smaller than 1.33rem */
  font-style: italic;
  text-align: center;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  text-indent: 0;            /* typically no indent for citations */
  line-height: 1.21;
}
.citation a{
color: darkolivegreen;
	text-decoration: none;
}
.citation a:hover{
color: darkolivegreen;
	text-decoration: underline;
}
.citation a:visited{
color: forestgreen;
	text-decoration: underline;
}
.prayer {
  font-family: 'CushingStd-Bold', serif;
  font-weight: 700;
  font-size: 1.3rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-align: center;
  margin-top: 1em;
  margin-bottom: 1em;
  text-indent: 0;
  line-height: 1.4;
	text-shadow: 7px 7px 13px black;
}

p a{
	text-decoration: underline;
	color: darkgreen;
}
p a:hover{
	text-decoration: underline;
	color: darkolivegreen;
}



.subhead {
		color: white;
		text-indent: 0;
		margin-left: 0.5EM;
		margin-right: 0.5em;
		font-size: 1.33em;
	}
.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
}
.firstpara {
  font-family: 'CushingStd-Medium', serif;
  font-weight: 550;
  font-size: 1.33rem;
  margin-top: .33em;
  margin-bottom: 0;
  text-indent: 0em;
  line-height: 1.21;
}
.right-border {
  border-right: solid 1px white;
}
/* Headings */
h1 {
  font-family: 'Pirata One', cursive;
  font-size: 3.3rem;
  margin: 0em 0em 0em 0em;
	padding-top: .5em;
	padding-bottom: .5em;
	padding-left: 0;
	padding-right: 0;
		text-align: center;
	background: black;
	color: white;
	align-items: center;

}

h2 {
  font-family: 'Pirata One', cursive;
  font-size: 2.1rem;
	margin-bottom: 0;
	margin-top: 0;
	margin-left: 0;
	margin-right: 0;
	text-align: center;
	border-bottom: 2px solid black;
	border-top:  2px solid black;
  top: -2px;
}

h3 {
  font-family: 'CushingStd-Bold', serif;
  font-size: 1.3rem;
  font-weight: bold;
  margin: 1em 0 0.5em;
	text-transform: uppercase;
	text-align: center;
}

h3 a{
	text-decoration: underline;
	color: black;
}
h3 a:hover{
	text-decoration: underline;
	color: darkgreen;
}

h4 {
  font-family: 'Sorts Mill Goudy', serif;
  font-size: 1.25rem;
  font-weight: bold;
  margin: 1em 0 0.5em;
}

h5 {
  font-family: 'Sorts Mill Goudy', serif;
  font-size: 1rem;
  font-weight: bold;
  margin: 1em 0 0.5em;
}

/* Navigation buttons */
/* Navbar base styles */
.navbar {
  background-color: black;
  padding: 0.5em;
  border-bottom: 2px solid black;
}

.navmenu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 1em;
  align-items: center;
  justify-content: center;
}

.navmenu > li {
  position: relative;
}

.navmenu > li > a {
  font-family: 'Pirata One', cursive;
  text-decoration: none;
  color: whitesmoke;
	font-size: 1.5em;
  padding: 0.5em 1em;
  display: block;
}
.navmenu > li > a:hover {
  color: white;
	background-color: darkolivegreen;
}

/* Submenu styling */
.submenu {
  display: none;
	
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  list-style: none;
  margin: 0;
  padding: 0.5em 0;
  z-index: 1000;
  gap: 0.25em;
  background-color: rgba(85, 107, 47, 0.5);
	backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(3px); /* for Safari */
  border: 0px solid black;
  border-radius: 0px;
	


}


.submenu li {
  margin: .33em;
	text-align: center;
	font-family: CushingStd-Medium;
	width: 100%;
}

/* Default submenu item style */
.submenu li a {
  display: block;
  padding-bottom: .5em;
	padding-left: .5em;
	padding-right: .5em;
	padding-top: .5em;
	font-size: 1.5em;
  background-color: black;
  color: white;
  border: 1px solid #000;
  border-radius: 8px;
  text-decoration: none;
  white-space: nowrap;
  transition: all 0.5s ease;
  background-size: contain;
  background-position: center;
	font-family: CushingStd-Medium;
}

/* On hover, text disappears */
.submenu li a:hover {
  color: white;
	text-shadow: 4px 4px 2px black;
}
/* Show submenu on hover */
.has-submenu:hover .submenu {
  display: grid;
  grid-auto-flow: column; /* Fill columns top to bottom */
  grid-template-rows: repeat(5, auto); /* 5 rows max before starting new column */
	grid-auto-columns: 21em; /* or any fixed width you want */
	column-gap: 1em;
  max-width: 100vw;
  overflow: auto; /* prevent overflow */
	padding: 1em;
}



/* Per-item hover backgrounds */
.bg-holythurs:hover {
  background-image: url('images/holythursday/nav3.png');
}
.bg-NativityoftheLord:hover {
  background-color: darkblue;
}
.bg-Annunciation:hover {
  background-color: cornflowerblue;
}
.bg-Ascension:hover {
  background-color: darkgoldenrod;
}
.bg-DormitionoftheTheotokos:hover {
  background-color: darkslateblue;
}
.bg-ExaltationoftheHolyCross:hover {
  background-color: darkred;
}
.bg-GoodFriday:hover {
  background-color: darkred;
}
.bg-NativityTheotokos:hover {
  background-color: darkblue;
}
.bg-PalmSunday:hover {
  background-color: darkolivegreen;
}
.bg-Pascha:hover {
  background-color: goldenrod;
}
.bg-Pentecost:hover {
  background-color: red;
}
.bg-PresentationoftheLord:hover {
  background-color:deepskyblue;
}
.bg-PresentationoftheTheotokos:hover {
  background-color: darkblue;
}
.bg-Theophany:hover {
  background-color: palegoldenrod;
}
.bg-Transfiguration:hover {
  background-color: palegoldenrod;
}
.bg-morning:hover {
  background-color: lightskyblue;
}

.bg-evening:hover {
  background-color: darkslateblue;
}

.bg-liturgy:hover {
  background-color: darkgoldenrod;
}

.bg-jesus:hover {
  background-color: crimson;
}

.bg-theotokos:hover {
  background-color: royalblue;
}

.bg-saints:hover {
  background-color: forestgreen;
}

.bg-lenten:hover {
  background-color: purple;
}
.bg-rulesofprayer:hover {
  background-color: firebrick;
}




.readmore {
	text-indent: 0;
	text-align: right;
	font-size: 1em;
}
.readmore a{
	color: black;
	text-decoration: none;
}
.readmore a:hover{
	color: darkolivegreen;
	text-decoration: underline;
}

.h2 {
}
.pagecontain {

	max-width: 1500px;       /* or 800px, 1200px, etc. */
	margin-top: 21px;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 0px; /* optional, adds padding inside the container */
	padding-bottom: 0;
	padding-top: 0;
	padding-left: 0;
	padding-right: 0;
	background: darkgrey;       /* just to show the container visually */
}
.responsive-img {
  width: 100%;
  height: auto;        /* keeps the aspect ratio */
  display: block;      /* removes bottom whitespace */
}


.container {
  display: flex;
  flex-wrap: wrap;
  gap: 1em;
  align-content: flex-start;
}

.column {
  flex: 1 1 calc(33.333333% - 1rem); /* 3 columns */
  background-color: #fdfdfd;
  padding: 1rem;
  box-sizing: border-box;
	border-left: solid 2px black;
	border-right: solid 2px black;
	border-bottom: solid 2px black;
	margin-bottom: 0;
}
.containerhead {
  display: flex;
	align-items: center;
  flex-wrap: wrap;
  gap: 0em;
	background-color: black;
}

.columnhead {
  flex: 1 1 calc(33.333% - 1rem); /* 3 columns */
  background-color: black;
  padding: 0rem;
  box-sizing: border-box;
}
/* On screens smaller than 768px, stack them */


.hr-white {
  height: 2px;
  background-color: black;
  color: white;
  border: none;
  margin: 1em 0; /* optional spacing */
}
.firstcharacter {
  color: darkred;
  float: left;
  font-family: Pirata One;
  font-size: 5em;
  line-height: 60px;
  padding-top: 4px;
  padding-right: 8px;
  padding-left: 3px;
}

.firstcharacter2 {
  color: black;
  float: left;
  font-family: 'Pirata One', serif;
  font-size: 4em;
  line-height: 1.21;
  padding-top: 7px;
	padding-bottom: 0;
	padding-left: 0;
	padding-right: 0;
  margin-right: 3px;
  margin-top: 0;
  margin-bottom: 1px;
  /* Calculate exact height for 3 lines */
  height: calc(3 * 1.33rem * 1);
  display: inline-flex;
  align-items: center;
}

@media (max-width: 1300px) {
  .column,
  .columnhead {
    flex: 1 1 100%;
  }
.pagecontain {
	margin: 0px auto;          /* centers the container */
	padding: 0px;           /* optional, adds padding inside the container */
	background: darkgrey;       /* just to show the container visually */
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* optional, adds a soft shadow */
}
p {
  font-family: 'CushingStd-Medium', serif;
	font-weight: 550;
  font-size: 3rem;
  margin-top: .33em;
	margin-bottom: 0;
	text-indent: 2.1em;
	line-height: 1.21;
}
.citation {
  font-family: 'CushingStd-BookItalic', serif;
  font-weight: 550;
  font-size: 2.1rem;         /* slightly smaller than 1.33rem */
  font-style: italic;
  text-align: center;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  text-indent: 0;            /* typically no indent for citations */
  line-height: 1.21;
}
.citation a{
color: darkolivegreen;
	text-decoration: none;
}
.citation a:hover{
color: darkolivegreen;
	text-decoration: underline;
}
.citation a:visited{
color: forestgreen;
	text-decoration: underline;
}
.prayer {
  font-family: 'CushingStd-Bold', serif;
  font-weight: 700;
  font-size: 3.3rem;
  text-transform:uppercase;
  letter-spacing: 0.1em;
  text-align: center;
  margin-top: 0em;
  margin-bottom: 0em;
  text-indent: 0;
  line-height: 1.3;
	text-shadow: 7px 7px 13px grey;
}
.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
}
.subhead {
		color: white;
		text-indent: 0;
		margin-left: 0.5EM;
		margin-right: 0.5em;
		font-size: 3em;
	}
.firstpara {
  font-family: 'CushingStd-Medium', serif;
	font-weight: 550;
  font-size: 3rem;
  margin-top: .33em;
	margin-bottom: 0;
	text-indent: 0em;
	line-height: 1.21;
}
.firstcharacter2 {
  color: black;
  float: left;
  font-family: CushingStd-Medium;
  font-size: 10rem;
  line-height: 70px;
  padding-top: 33px;
  padding-right: 3px;
  padding-left: 3px;
}
/* Headings */
h1 {
  font-family: 'Pirata One', cursive;
  font-size: 6rem;
  margin: 0em 0em 0em 0em;
	padding-top: .5em;
	padding-bottom: .5em;
	padding-left: 0;
	padding-right: 0;
		text-align: center;
	background: black;
	color: white;
	align-items: center;

}

h2 {
  font-family: 'Pirata One', cursive;
  font-size: 5rem;
	margin-bottom: 0;
	margin-top: 0;
	margin-left: 0;
	margin-right: 0;
	text-align: center;
	border-bottom: 2px solid black;
	border-top:  2px solid black;
  top: -2px;
}

h3 {
  font-family: 'Sorts Mill Goudy', serif;
  font-size: 4rem;
  font-weight: bold;
  margin: 1em 0 0.5em;
	text-transform: uppercase;
	text-align: center;
}

h3 a{
	text-decoration: none;
	color: black;
}
h3 a:hover{
	text-decoration: underline;
	color: darkgreen;
}

h4 {
  font-family: 'Sorts Mill Goudy', serif;
  font-size: 1.25rem;
  font-weight: bold;
  margin: 1em 0 0.5em;
}

h5 {
  font-family: 'Sorts Mill Goudy', serif;
  font-size: 1rem;
  font-weight: bold;
  margin: 1em 0 0.5em;
}


  .navmenu {
  display: flex;
  flex-wrap: wrap;       /* 🔥 allows wrapping to a new line */
  align-items: center;
  justify-content: center; /* optional, centers wrapped lines */
  overflow: visible;
  max-width: 100%;
  font-size: 1.33em;
  box-sizing: border-box;
  }

  .navmenu > li > a {
    text-align: center;
    padding-left: 1em;
	  padding-right: 0;
	  padding-top: .5em;
	  padding-bottom: 0;
  }

.submenu {
  display: none;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(0%);
  list-style: none;
  margin: 0;
  padding: 0.5em 0;
  z-index: 1000;

  background-color: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  border: 2px solid black;
  border-radius: 6px;
}

.has-submenu:focus-within .submenu,
.has-submenu:hover .submenu {
  display: block;
}

  .submenu li a {
    font-size: 1em;
    padding: 0.21em;
    display: block;
    text-align: center;
  }
}

@media print {
  * {
    color: black !important;
    background: white !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  body {
    background: white !important;
  }
  h1 {
		background: white !important;
		color: black !important;
		font-size: 2.1rem !important;
	  padding: 0 !important;
	}
	  h2 {
		background: white !important;
		color: black !important;
		font-size: 1.7rem !important;
		  padding: .1em !important;
	}
	  h3 {
		background: white !important;
		color: black !important;
		font-size: 1.3rem !important;
		  padding: .1em !important;
	}
  p {
		background: white !important;
		color: black !important;
		font-size: 1rem !important;
	}
  .firstpara {
    font-family: 'CushingStd-Medium', serif !important;
    font-weight: 550 !important;
    font-size: 1rem !important;
    line-height: 1.21 !important;
    text-indent: 0 !important;
  }
  
  .firstcharacter2 {
    color: black !important;
    font-family: 'Pirata One', serif !important;
    font-size: 4em !important;
    line-height: 1 !important;
    float: left !important;
    padding-top: 4px !important;
    padding-bottom: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-right: 3px !important;
    height: calc(3 * 1rem * 1) !important;
    background: none !important;
  }

  img {
	  display: none;
    filter: grayscale(100%);
	width: 33% !important;
    height: auto !important;
	  text-align: center;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  a {
    color: black !important;
    text-decoration: underline;
  }

  /* Optional: hide elements not needed on print */
  .navbar, navmenu {
    display: none !important;
  }
}