/* Jayne Marie site style CSS file */

/**************** Site Colour Scheme *****************/
/* background: #000033; /* dark blue background colour - same colour as rgb = (0, 0, 51) */
/* color: #9999CC;      /* light blue colour - same colour as rgb = (153, 153, 204) */
/* color: #CC9966;      /* light orange colour - same colour as rgb = (204, 153, 102) */
/* color: #FF9999;      /* light coral colour - same colour as rgb = (255, 153, 153) */
/* color: #99FF33;      /* light green colour - same colour as rgb = (153, 255, 51) */
/* color: #FFFFFF;      /* white colour - same colour as rgb = (255, 255, 255) */

:root {
  --color-background: #000033;
  --color-text: #9999CC;
  --color-accent: #CC9966;
  --color-highlight: #FF9999;
  --color-highlight2: #99FF33;
  --color-highlight-text: #FFFFFF; /* for use in selection highlight or contrast */
  
  /* Dummy property to silence empty-rule warning */
  font-size: inherit;
}

/* Default link styles for both levels */
.navigationMenuL1 ul li a,
.navigationMenuL2 ul li a {
  color: var(--color-accent);
  font-weight: normal;
  text-decoration: none;
}

/* Hover, focus, active, or .current link styles */
.navigationMenuL1 ul li a:hover,
.navigationMenuL1 ul li a:focus,
.navigationMenuL1 ul li a:active,
.navigationMenuL1 ul li a.current,
.navigationMenuL2 ul li a:hover,
.navigationMenuL2 ul li a:focus,
.navigationMenuL2 ul li a:active,
.navigationMenuL2 ul li a.current {
  color: var(--color-highlight);
  font-weight: bold;
}

html, /* html, pushes the footer to bottom of page */

body {
  /* font: 22px/27px arial, helvetica, sans-serif; */
/* font-size: calc([minimum size] + ([maximum size] - [minimum size]) * ((100vw - [minimum viewport width]) / ([maximum viewport width] - [minimum viewport width])));
*/

  font: arial, helvetica, sans-serif;
  line-height: 1.2;
  font-size: calc(14px + (26px - 14px) * ((100vw - 300px) / (1920px - 300px)));
  
  /* color: #000033; */
  background-color: var(--color-background);
  /* background: url(../siteImages/Background2.gif) repeat; */
  background: url(https://jmarieps.com/siteImages/Background2.gif) repeat;
  text-align: left;
  margin: 0;
  padding: 0;
  height: 100%;
}

#container {
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  color: var(--color-text); /* #9999cc; */
  position: relative;
  margin-bottom: -50px; /* height of the footer area including padding and borders */
  overflow: hidden; /* expanding box problem fix */
}

/* center the logo in the header in the center of site page*/
#header {
  text-align: center;
  position: relative;
  display: inline-block;
  width: 100%;
  height: 200px;
}
.logo{
    position: absolute;
    width: 463px;
    left: calc(50% - 231px);;
}

/* footer styling */
.clearFooter {
  height: 50px; /* height of the footer area */
  clear: both;
}

#footer {
  margin-top: auto;
  flex-shrink: 0;
  
  /* width: 100%; */
  /* height: 30px;  */ /* height of the footer in the footer area */
  color: var(--color-text); /* #9999cc; */
  font: 10px/12px arial, helvetica, sans-serif;
  text-align: center;
}

/**************** Centered Navigation Menu (Level 1) *****************/
.navigationMenuL1 {
  color: var(--color-accent); /* #cc9966; */
  /* background-color: #000033;
  background: url(../siteImages/Background2.gif) repeat; */
  width: 100%;
  float: left;
  overflow: hidden;
  position: relative;
  font: 0.7em/1.4em arial, helvetica, sans-serif;
  font-size: 50%;
}

.navigationMenuL1 ul {
  clear: left;
  float: left;
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
  left: 50%;
  text-align: center;
}

.navigationMenuL1 ul li {
  display: block;
  float: left;
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
  right: 50%;
}

.navigationMenuL1 .jmpsH2 {
font-family: inherit;
font-size: 1.5em;
font-weight: bold;
}

.navigationMenuL1 ul li a {
  display: block;
  margin: 0 0 0 1px;
  padding: 3px 10px;
  color: var(--color-accent); /* #cc9966; */
  /* background-color: #000033;
  background: url(../siteImages/Background2.gif) repeat; */
  text-decoration: none;
  border-right: 2px solid var(--color-text); /* #9999cc; */
  line-height: 1.3em;
}

/* remove right border on last list item in navigation menu level 1 */
.navigationMenuL1 li.last a {
  border-right-style: none;
}

.navigationMenuL1 ul li a:hover,
.navigationMenu ul li .current {
  color: var(--color-highlight); /* #99ff33; */
  /* background-color: #000033;
  background: url(../siteImages/Background2.gif) repeat; */
}
/**************** End of Centered Navigation Menu (Level 1) *****************/

/* center the dotted line between navigation menu levels in the center of site page, the footer and text border */
#dottedLine,
#dottedLine_Footer,
#textBorder {
  padding-left: 10px;
  text-align: center;
  /* background-color: #000033;
  background: url(../siteImages/Background2.gif) repeat; */
}

/**************** Centered Navigation Menu (Level 2) *****************/
.navigationMenuL2 {
color: var(--color-accent); /* #CC9966; */
/* background-color: #000033;
background: url(../siteImages/Background2.gif) repeat; */
width: 100%;
float: left;
overflow: hidden;
position: relative;
font: 0.7em/1.4em arial, helvetica, sans-serif;
font-size: 50%;
}

.navigationMenuL2 ul {
clear: left;
float: left;
list-style: none;
margin: 0;
padding: 0;
position: relative;
left: 50%;
text-align: center;
}

.navigationMenuL2 ul li {
display: block;
float: left;
list-style: none;
margin: 0;
padding: 0;
position: relative;
right: 50%;
}

.navigationMenuL2 .jmpsH2 {
font-family: inherit;
font-size: 1.5em;
font-weight: bold;
}

.navigationMenuL2 ul li a {
display: block;
margin: 0 0 0 1px;
padding: 3px 10px;
color: var(--color-accent); /* #CC9966; */
/* background-color: #000033;
background: url(../siteImages/Background2.gif) repeat; */
text-decoration: none;
border-right: 2px solid var(--color-text); /* #9999CC; */
line-height: 1.3em;
}

/* remove right border on last list item in navigation menu level 2 */
.navigationMenuL2 li.last a {
border-right-style: none;
}

.navigationMenuL2 ul li a:hover, .menu ul li .current {
color: var(--color-highlight); /* #99FF33; */
/* background-color: #000033;
background: url(../siteImages/Background2.gif) repeat; */
}
/**************** End of Centered Navigation Menu (Level 2) *****************/

/**************** page title styling ***********************/
.pageTitle .jmpsH1 {
color: var(--color-accent); /* #CC9966; */
/* background-color: #000033;
background: url(../siteImages/Background2.gif) repeat; */
text-decoration: none;
list-style: none;
font: bold 18px/22px arial, helvetica, sans-serif;
text-align: center;
padding-top: 10px;
}

/**************** page text styling ***********************/
.home, .pageText, .faqs, .services, .happenings, .classes, .interests, .articles, .resources {
color: var(--color-text); /* #9999CC; */
/* background-color: #000033;
background: url../siteImages/Background2.gif) repeat; */
}

.home p, .resources p {
color: var(--color-text); /* #9999CC; */
/* background-color: #000033;
background: url(../siteImages/Background2.gif) repeat; */
text-decoration: none;
font: 14px/17px arial, helvetica, sans-serif;
font: bold italic 18px/22px arial, helvetica, sans-serif;
text-align: center;
padding-top: 10px;
}

.pageText p, .contactForm p, .articles p, .services p, .happenings p, .classes p, .interests p, .faqs p { /****/
color: var(--color-text); /* #9999CC; */
/* background-color: #000033;
background: url(../siteImages/Background2.gif) repeat; */
text-decoration: none;
font: 14px/17px arial, helvetica, sans-serif;
text-align: center;
padding-top: 10px;
}

/* .pageText h3, .faqs h3, .services h3, .happenings h3, .interests h3, .classes h3 { */
.pageText .jmpsH3, .faqs .jmpsH3, .services .jmpsH3, .happenings .jmpsH3, .classes .jmpsH3, .interests .jmpsH3 {
font: bold 18px/22px arial, helvetica, sans-serif;
padding-bottom: 5px;
text-align: center;
text-decoration: none;
}

/* .pageText h2, .faqs h2, .services h2, .happenings h2, .interests h2, .classes h2, .articles h2 { */
.pageText .jmpsH2, .faqs .jmpsH2, .services .jmpsH2, .happenings .jmpsH2, .classes .jmpsH2, .articles .jmpsH2, .interests .jmpsH2 {
font: bold 18px/22px arial, helvetica, sans-serif;
text-decoration: none;
padding-top: 10px;
}

.interests p {
    position: relative;
    left: 83px;
}

.interests article {
position: relative;
left: 83px;
padding:10px;
}

.interests article p {
font:18px/22px arial, helvetica, sans-serif;
text-decoration:none;
text-align:left;
margin-left:20px;
width:860px;
}

.interests .jmpsH2 {
color: var(--color-accent); /* #CC9966; */
}

.pageText .jmpsH2 {
color: var(--color-accent); /* #CC9966; */
}

/* hypertext link border elimination */
.pageText a {
border: 0px none transparent;
}

.pageText ul {
clear: left;
float: left;
list-style: none;
position: relative;  /* affects alignment of link headings in links section !!!!!!! */
left: 10%;           /* affects alignment of text in links section !!!!!!! */
}

.pageText ul li {
	clear: left;
	float: left;
	display: block;
	list-style: none;
	position: relative; /*** affects alignment of link text below the link heading in the links section */
	left: 50px;
	width: 800px;  /* this is line length of 800px; added for help to align text in links section */
}

.pageText ul li a {
display: block;
padding-bottom: 10px;
color: var(--color-text); /* #9999CC; */
/* background-color: #000033;
background: url(../siteImages/Background2.gif) repeat; */
text-decoration: none;
line-height: 1.3em;
}

.pageText ul li a:hover {
display: block;
padding-bottom: 10px;
color: var(--color-highlight); /* #99FF33; */
/* background-color: #000033;
background: url(../siteImages/Background2.gif) repeat; */
text-decoration: none;
line-height: 1.3em;
}

/* center the dotted line between link sections in the center of site page*/
#dottedLine2 {
padding-top: 20px;
text-align: center; /* xxxx */
display: block;     /* xxxx */
}

/**************** start of readings background styling ***********************/
#reading
{ 
	border-style: solid;
	border-color: var(--color-accent); /* #CC9966; */
    border-width: 3px;
    border-radius: 10px;
	width:55%;
	background-color: white; 
	margin: auto;
	margin-bottom: 3%;
    padding: 1% 3%; 
} 

#reading img
{
    display: block;
    margin-top: 2%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 2%;
    width: 50%;
}

#reading p
{
    color: var(--color-background); /* #000033;  background color */
	text-align: justify;
	word-wrap: break-word; /* words won't go from the boundry */
}

/**************** start of contact form styling ***********************/
.contactForm .jmpsH3 {
color: var(--color-accent); /* #CC9966; */
/* background-color: #000033;
background: url(../siteImages/Background2.gif) repeat; */
text-decoration: none;
font-family: arial, helvetica, sans-serif;
    /* font-size: calc([minimum size] + ([maximum size] - [minimum size]) * ((100vw - [minimum viewport width]) / ([maximum viewport width] - [minimum viewport width])));
    */
font-weight: bold;
line-height: 1.2;
font-size: calc(14px + (26 - 14) * ((100vw - 300px) / (1600px - 300px)));
text-align: center;
margin-top: 1.5em;
padding-top: 0;
}

.contact-name-label, .contact-email-label {
    color: var(--color-accent); /* #CC9966; /*#9999CC;*/
    display: inline-block;
    text-align: right;
    padding: 0.25% 0.25%;
}

.inputField {
/* color: #99FF33; 
background: url(../siteImages/Background2.gif) repeat; */
font: 16px/19px arial, helvetica, sans-serif;
border: 1px solid var(--color-text); /* #9999CC; */
border-radius: 4px;
text-align: left;
}

.inputField:hover, .inputField:focus {
outline-style: solid;
outline-color: var(--color-accent); /* #CC9966; */
outline-width: 1px;
border-style: hidden;
}

.msgArea {
width: 100%;
height: 200px;
color: var(--color-highlight); /* #99FF33; */
background: url(../siteImages/Background2.gif) repeat;
font: 16px/20px arial, helvetica, sans-serif;
border: 1px solid var(--color-text); /* #9999CC; */
border-radius: 4px;
text-align: left;
margin-bottom: 0;
padding-bottom: 0;
}

.msgArea:hover, .msgArea:focus {
outline-style: solid;
outline-color: var(--color-accent); /* #CC9966; */
outline-width: 1px;
border-style: hidden;
}

.button {
font: 16px/19px arial, helvetica, sans-serif;
color: var(--color-accent); /* #CC9966; */
background: url(../siteImages/Background2.gif) repeat;
border: 1px solid var(--color-text); /* #9999CC; */
border-radius: 6px;
margin: 0 1em 0.75em;
padding: 0 2%;
}

.button:hover {
color: var(--color-highlight-text); /* #FFFFFF; /* white text 
background-color: #CC9966;
/*background: url(../siteImages/Background2.gif) repeat; */
border: 1px solid var(--color-accent); /* #CC9966; */
}

/**************** start of articles content styling ***********************/
#author {
font: 16px/19px arial, helvetica, sans-serif;
color: var(--color-accent); /* #CC9966; */
/* background-color: #000033;
background: url(../siteImages/Background2.gif) repeat; */
text-align: right;
text-decoration: none;
margin: 0;
padding: 0;
}

.articles ol li a {
display: block;
padding-bottom: 10px;
color: var(--color-accent); /* #CC9966; */
/* background-color: #000033;
background: url(../siteImages/Background2.gif) repeat; */
text-decoration: none;
line-height: 1.3em;
}

.articles ol li a:hover {
display: block;
padding-bottom: 10px;
color: var(--color-highlight); /* #99FF33; */
/* background-color: #000033;
background: url(../siteImages/Background2.gif) repeat; */
text-decoration: none;
line-height: 1.3em;
}

/**************** start of events content styling ***********************/
.events p, .classes p, .interests p {
font: bold 18px/22px arial, helvetica, sans-serif;
color:  var(--color-text); /* #9999CC; */
/* background-color: #000033;
background: url(../siteImages/Background2.gif) repeat; */
padding-bottom: 15px;
text-align: center;
text-decoration: none;
}
.events ul {
clear: left;
float: left;
margin: 0;
padding: 0;
position: relative;
left: 50%;
}

.events ul li {
display: block;
margin: 0;
padding: 0;
position: relative;
right: 50%;
font: 14px/17px arial, helvetica, sans-serif;
color: var(--color-text); /* #9999CC; */
/* background-color: #000033;
background: url(../siteImages/Background2.gif) repeat; */
text-decoration: none;
line-height: 2em;
}

/**************** start of fees content styling ***********************/
.fees {
color: var(--color-text); /* #9999CC; */
/* background-color: #000033;
background: url(../siteImages/Background2.gif) repeat; */
width: 100%;
float: left;
position: relative;
}

.fees ul {
clear: left;
float: left;
list-style: none;
margin: 0;
padding: 0;
position: relative;
left: 50%;
text-align: center;
}

.fees .jmpsH2, .fees li {
color: var(--color-text); /* #9999CC; */
/* background-color: #000033;
background: url(../siteImages/Background2.gif) repeat; */
text-decoration: none;
list-style: none;
}

.fees .jmpsH2 {
font: bold 14px/17px arial, helvetica, sans-serif;
padding-top: 15px;
}

.fees ul li {
display: block;
list-style: none;
margin: 0;
padding: 0;
padding-top: 10px;
position: relative;
right: 50%;
font: 14px/17px arial, helvetica, sans-serif;
color: var(--color-text); /* #9999CC; */
/* background-color: #000033;
background: url(../siteImages/Background2.gif) repeat; */
}

.fees ul li a {
display: block;
padding-bottom: 10px;
color: var(--color-text); /* #9999CC; */
/* background-color: #000033;
background: url(../siteImages/Background2.gif) repeat; */
text-decoration: none;
line-height: 1.3em;
}

.fees ul li a:hover {
color: var(--color-highlight); /* #99FF33; */
/* background-color: #000033;
background: url(../siteImages/Background2.gif) repeat; */
}

/**************** accordion styling for articles, services, happenings and FAQs sections ***********************/
.faqs ol, .articles ol, .services ul li, .happenings ul li, .classes ul li {
clear: left;
float: left;
position: relative;
left: 10%;
width: 60%;
font: bold 18px/22px arial, helvetica, sans-serif;
text-decoration: none;
line-height: 1.3em;
list-style-type: decimal; /***/
}

.services ul li, .happenings ul li, .classes ul li {
list-style: none;
width: 80%;
}

.faqs ul li, .articles ul li, .services ul li ul li, .happenings ul li ul li, .classes ul li ul li {
display: none;
list-style: none;
position: relative;
font: 14px/17px arial, helvetica, sans-serif;
}

.services ul li a, .happenings ul li a, .classes ul li a {
display: block;
padding-bottom: 10px;
color: var(--color-text); /* #9999CC; */
/* background-color: #000033;
background: url(../siteImages/Background2.gif) repeat; */
text-decoration: none;
line-height: 1.3em;
list-style: none;
margin: 0;
padding: 0;
padding-top: 10px;
position: relative;
font: 14px/17px arial, helvetica, sans-serif;
text-align: center;
}

.services span, .happenings span, .classes span {
color: var(--color-accent); /* #CC9966;	 /* #99FF33; */		
}

.services ul li a:hover, .happenings ul li a:hover, .classes ul li a:hover {
color: var(--color-highlight); /* #99FF33; */
/* background-color: #000033;
background: url(../siteImages/Background2.gif) repeat; */
}

.faqs ol li:hover, .articles ol li:hover, .services ul li:hover, .happenings ul li:hover, .classes ul li:hover {
color: var(--color-highlight); /* #99FF33; */
}

.faqs ol li:hover ul li, .articles ol li:hover ul li, .services ul li:hover ul li, .happenings ul li:hover ul li, .classes ul li:hover ul li {
color: var(--color-accent); /* #CC9966; */
display: block;
}
/********************************/

/********* CBC 11h11 Announcement Panel (for Happenings page) ****************/
.cbc-announcement {
  border-style: solid;
  border-color: var(--color-accent);
  border-width: 1px;
  border-radius: 10px;
  max-width: 600px;
  background-color: transparent;
  margin-left: 83px;
  margin-right: auto;
  margin-bottom: 3%;
  padding: 1% 3%;
}

.cbc-announcement__item {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  align-items: center;  /* Center all content */
}

.cbc-announcement__item h3 {
  margin: 0;
  font: 18px/22px arial, helvetica, sans-serif;
  color: var(--color-text);
  text-align: center;
}

.cbc-announcement__item img {
  width: 35%;  /* Adjust this percentage as needed: 40%, 50%, 60% */
  height: auto;
  display: block;
  border-radius: 8px;
}

.cbc-announcement__cta {
  display: flex !important;  /* Changed to flex */
  align-items: center !important;  /* Vertical centering */
  justify-content: center !important;  /* Horizontal centering */
  text-decoration: none;
  text-align: center;
  padding: 0 !important;
  height: 2rem !important;  /* Use height instead of line-height */
  border-radius: 8px;
  font-weight: 700;
  font-size: 1.1rem;
  border: none;
  background: #CC9966;
  color: var(--color-background) !important;
  transition: background-color 0.2s ease, color 0.2s ease;
  width: 35%;
  box-sizing: border-box;
}

.cbc-announcement__cta:hover,
.cbc-announcement__cta:focus {
  background: #FF9999;
  color: #FFFFFF;
  outline: none;
}

.cbc-announcement__cta:focus-visible {
  outline: 2px solid #FF9999;
  outline-offset: 2px;
}

/* Mobile responsive */
@media (max-width: 768px) {
  .cbc-announcement {
    margin-left: auto;
    margin-right: auto;
    width: 90%;
    max-width: 90%;
  }
  
  .cbc-announcement__item img {
    width: 70%;  /* Slightly larger on mobile */
  }
  
  .cbc-announcement__cta {
    max-width: 100%;  /* Full width button on mobile */
  }
}

/**** Disable hover effect on home page CBC heading ****/
.home-announcement ul li,
.home-announcement ul li:hover,
.home-announcement .jmpsH2,
.home-announcement .jmpsH2:hover {
  color: var(--color-text) !important;
  cursor: default !important;
}

.home-announcement span,
.home-announcement span:hover {
  color: var(--color-accent) !important;
  cursor: default !important;
}
/*************** CBC TV show 11h11 Announcement Panel ************************/

/**** Social Media Icon styling for font awesome ****/
.fa {  
		width: 25px;
		font-size: 25px;
		text-align: center;
		text-decoration: none;
		margin: 5px 2px;
		border-radius: 50%;
}
.fa:hover {
		color: var(--color-highlight); /* #99FF33; */
}
.fa-instagram {
		color: var(--color-accent); /* #CC9966; */
}
a.fa.fa-instagram {
    position: absolute;
    top: 160px;
    left: calc(50% - 45px);
}
/********************************/
/**** Responsive typography ****/

/* Ensure full-viewport overlay coverage */
html, body {
  min-height: 100%;
}