.site-description
{
    font: 300 italic 25px "Source Sans Pro", Helvetica, sans-serif;
    color: white;
    text-align: center;
    margin: 0;
    padding-bottom: 20px;
}

.content p { margin:5px;
    padding:5px;
    font-family: Tahoma, Verdana, Helvetica, sans-serif; 
    font-size: 110%;
    color: black; }

@font-face
{
	font-family: Museo300;  
	src: local('Museo300-Regular'), 
		url("fonts/Museo300-Regular.ttf") format('truetype');  
	font-weight: normal;  
}

.post-item
{font-family: Museo300}

body {font-family: Verdana, Arial, Helvetica, 
     Futura, sans-serif; 
     font-size: 1em; 
     padding:0; 
     margin:0;
	   background-color:whitesmoke;
    }

#menu ul li { font-size: 110%; color: green; }


/** change background color of ads to transparent #2312915-zd **/
ins{
  background-color: transparent;
}

/* reduce footer padding - norman 2312915zd */

#footer-widgets {
    padding: 5px;
}

/* change recent posts widget links color | 17080921-hc */
.widget_recent_entries ul li a {
	color:#000000;
}

/* change recent posts widget links color | 17080921-hc */
.widget_recent_entries ul li a, .widget_top-posts ul li a {
	color:#000000;
}

/* set blog post tag color | 17539691-hc */

.blog-post-tags, .blog-post-tags a {
    color:black;
	  font-weight: normal; 
	  
}


/* set post title font and color | 17539691-hc */
.blog-post-title h2, .blog-post-title h2 a {
    color: black;
    font-family: "Arbutus Slab", serif;	
	font-weight: normal; 	
	
}


/* continue reading background color | 17539691-hc */

.blog-post-read-more a {
    background-color:gray;
	 
}

/* Make the content and sidebar links red | RG-18707756-hc */
#sidebar a,
#content a {
    color: #a30000;
}

/*Added this css on 17_NOV_2022 for search console error */
img {
  max-width: 100%;
  display: block;
}

/*Added this css on 11_June_2023 for mobile compatibility issue */
/* Mobile Styles */
@media (max-width: 767px) {
  /* Add your mobile-specific styles here */

  /* Example Styles */
  body {
    font-size: 14px;
    line-height: 1.5;
    padding: 10px;
  }

  .header {
    background-color: #f1f1f1;
    padding: 20px;
  }

  .content {
    margin: 10px;
  }

  .footer {
    background-color: #f1f1f1;
    padding: 10px;
  }
}

/* Desktop Styles */
@media (min-width: 768px) {
  /* Add your tablet and desktop-specific styles here */

  /* Example Styles */
  body {
    font-size: 16px;
    line-height: 1.6;
    padding: 20px;
  }

  .header {
    background-color: #f1f1f1;
    padding: 30px;
  }

  .content {
    margin: 20px;
  }

  .footer {
    background-color: #f1f1f1;
    padding: 20px;
  }
}

/*Added this css on 11_June_2023 for mobile compatibility issue - Region ends here */

/* ----------------------------------------------------
   Ensure web fonts do not block text rendering.
   'swap' tells the browser to show fallback fonts first
   and replace them with the web font once it loads.
   This prevents invisible text and reduces CLS.
----------------------------------------------------- */
@font-face {
  font-display: swap;
}


/* ----------------------------------------------------
   Prevent layout shift caused by late-loading fonts.
   Headings can change size when web fonts load.
   These rules reserve space so the page doesn't move.
----------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
  line-height: 1.25;   /* Keeps heading height consistent */
  min-height: 1em;     /* Reserves vertical space before font loads */
}


/* ----------------------------------------------------
   Stabilize page titles and site titles.
   Without this, the title area may expand after
   fonts or styles finish loading.
----------------------------------------------------- */
.entry-title,
.site-title {
  min-height: 60px;   /* Reserves vertical space for titles */
}


/* ----------------------------------------------------
   Prevent text reflow when fallback fonts switch
   to the final web font. This helps maintain layout
   consistency and reduces CLS.
----------------------------------------------------- */
body {
  font-size-adjust: 0.5;
}


/* ----------------------------------------------------
   Make images responsive and prevent layout shift.
   - max-width keeps images inside containers
   - height:auto preserves correct proportions
   - display:block removes extra inline spacing
----------------------------------------------------- */
img {
  max-width: 100%;
  height: auto;
  display: block;
}


/* ----------------------------------------------------
   Stabilize header height.
   Sometimes the logo or menu loads late and pushes
   the page down. This reserves space for the header.
----------------------------------------------------- */
.site-header {
  min-height: 80px;
}

/* ----------------------------------------------------
   Reduce layout recalculations for large page sections.
   The browser skips rendering content until needed.
   Helps reduce main-thread work on long pages.
----------------------------------------------------- */
#main {
  content-visibility: auto;
  contain-intrinsic-size: 1px 5000px; 
}


/* ----------------------------------------------------
   Optimize rendering of sections and containers.
   'contain' isolates layout calculations so changes
   inside a section don't force the whole page to reflow.
----------------------------------------------------- */
section,
.container,
.site-content {
  contain: layout style;
}


/* ----------------------------------------------------
   Improve browser rendering efficiency.
   Reduces expensive layout calculations for text.
----------------------------------------------------- */
body {
  text-rendering: optimizeSpeed;
}


/* ----------------------------------------------------
   Prevent unnecessary repaints caused by animations
   or transformations.
----------------------------------------------------- */
* {
  backface-visibility: hidden;
}


/* ----------------------------------------------------
   Optimize image rendering to reduce paint time.
----------------------------------------------------- */
img {
  image-rendering: auto;
}

/* ----------------------------------------------------
   Skip rendering of offscreen sections until visible.
   This reduces work while JavaScript loads later.
----------------------------------------------------- */
section {
  content-visibility: auto;
  contain-intrinsic-size: 1px 800px;
}