/* CSS Document */

/* colors */
body{background-color:rgba(233,233,233,1.00);} /* main page back */
.top-bar{background-color:rgba(0,0,0,1.00); color:rgba(255,236,45,1.00);} /* header bar */
.header-inner{color:rgba(255,236,45,1.00);} /* inner header bar */
.footer{background-color:rgba(0,0,0,1.00); color:rgba(255,255,255,1.00);} /* footer bar */
.overlay{background:rgba(0, 0, 0, 0.5);} /* main page cover */
.page-content-1200{background-color: rgba(231,220,164,1.00);} /* page content area */
.page-title-box{background-color: rgba(205,205,205,1.00); color:rgba(0,0,0,1.00);} /* page - title box */
.page-cont-box{background-color: rgba(235,235,235,0.50); color:rgba(30,30,30,1.00);}  /* page - content box */
.page-title-box-sub{background-color: rgba(68,68,68,1.00); color: rgba(255,255,255,1.00);} /* page - sub title box */
.page-cont-box-sub{background-color: rgba(205,205,205,0.50); color: rgba(0,0,0,1.00);}  /* page - sub content box */


/* fonts */
.page-title-box, .page-title-box-sub{
font-size: clamp(1.2rem, 2vw, 1.5rem);
font-family: 'Roboto', 'Verdana', 'Geneva', sans-serif;
font-weight: 700;}

.page-cont-box,.page-cont-box-sub{
font-size: clamp(0.875rem, 1.5vw, 1rem);
font-family: 'Roboto', 'Verdana', 'Geneva', sans-serif;}


/* Reset some defaults */
body {
margin: 0;
font-family: 'Helvetica', 'Tahoma', 'Geneva', sans-serif; 
display: flex;
flex-direction: column;
height: 100vh; /* Exact viewport height */
overflow: auto;} /* No scroll unless needed */


html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: auto; /* Allow full page height */
}


/* Top bar */
.top-bar {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 45px; /* Your header height */
z-index: 1000; /* Keep it above other elements */
display: flex;
align-items: center;
justify-content: center;
padding: 2px;  
box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* Optional shadow for separation */
}

/* Header content stays centered */
.header-content {
text-align: center;
flex: 1;}

/* Page content */
.page-content {
flex: 1; /* Takes remaining space */
padding: 1px 2rem 0px 2rem; 
margin-top: 45px; /*to allow for header*/
overflow-y: auto;}

.page-content-1200{
max-width: 1200px;
min-height: 750px;
margin: 0 auto; /* Center horizontally */
padding: 0px;}


/* Footer */
.footer {
text-align: right;
margin-top: auto; /* Push footer to bottom */
padding-right: 25px; /* Extra space on the right */
height: 25px;}

.footer {
position: relative;
/*width: 100%;*/
/* Remove min-width: max-content */
}

.header-inner, .footer-inner{
display: flex;
justify-content: center;
margin: 0 auto;
width: 100%;}

.footer-inner{
justify-content: flex-end;
align-items: center;
width: 100%;
height: 100%;
padding: 0px 20px 0px 0px; 
font-size: 12px;}

/* Overlay - page cover */
.overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh; /* Use viewport height */
background: rgba(0, 0, 0, 0.5);
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease;
z-index: 998;
}

.overlay.active{
opacity: 1;
pointer-events: auto;} /* Enable clicks when visible */

/* page boxes */
.page-title-box, .page-title-box-sub{
display: flex;
align-items: center; /* vertically centers text */
padding: 0.5rem 1rem;
margin: 1.25rem 0.25rem 0 0.25rem;
text-transform: uppercase;}

.page-cont-box,.page-cont-box-sub{
display: flex;
flex-direction: column; /* stack content vertically */
margin: 0 0.25rem 1rem 0.25rem;
padding: 0.25rem;
gap: 0.5rem; /* modern spacing */
flex: 1 1 auto;
min-height: 0; /* allows inner content to scroll */
overflow: auto;}

/* images *//* images *//* images *//* images *//* images *//* images *//* images */
.content-img { /* max width 500px, floats left allows text wrap */
display: block;/* removes inline gaps */
float: left;/* allows text to wrap around */
width: auto;/* avoid ‘100% + margins’ overflow */
max-width: min(500px, calc(100% - 2rem)); /* 2rem = left + right margins below */
height: auto;/* keeps aspect ratio */
margin: 0.5rem 1rem 0.5rem 1rem;/* space between image and text */
border-radius: 1px;
box-shadow: 0 2px 6px rgba(0,0,0,0.15);}


.center-img { /* max width 500px, centers, no text wrap */
display: block;/* no inline gaps */
width: 100%;/* responsive: scales down with container */
max-width: min(500px, calc(100% - 2rem)); /* subtract horizontal margins */
height: auto;/* preserve aspect ratio */
margin: 0.5rem auto 0.5rem auto; /* centers the image horizontally */
border-radius: 1px;
box-shadow: 0 2px 6px rgba(0,0,0,0.15);}


/*normal text for link*/
a.normal-link {
color: inherit;        /* Uses the parent element's text color */
text-decoration: none; /* Removes the underline */
font-weight: normal;   /* Ensures normal font weight */
}