/** 
Theme Name: Astra Child 
Theme URL: https://junespina.com
Description: Astra Child 
Theme Author: Jun P. Espina
Author URL: https://junespina.com
Template: astra
Version:  5.11.16
Text Domain: astra-child
Template: astra
*/
/*@import url("../astra/style.css");*/

/* =Theme customization starts here
-------------------------------------------------------------- */
/* ==Logo Color Brand:
/* black: #35393a
/* red: #b14d4d
/* cream: #ddd1c1
***********************/
/* Color Notes: 7-6-2025
/* cream/white: #faf5f1 - ok
/* .highlight-box:background-color: rgba(255, 99, 71, 0.1); Very light red (muted)
/*border: 1px solid rgba(255, 99, 71, 0.5);Light red border 
***********************/
/******old*************/
/* factory color: #c75d5d; used: #00aeef; */
/* BRAND COLORS -- 8-2024 */
/* dull green - #8FBC8F; ??? */
/*----brand color no. 3 ----------ok!!!!! */
/* dark red - #cb0f10; */
/* blackish - #0d0700; */
/* greenish - #a5b7ac; */
/* cream - #a5b7ac; */
/* hover > a >color: #31316E;*/
/* a color:  #cb0f10; */
/* .hthin color blue: color:#31316E; */
/* menu bar: dark blue: #13445A; */

/* brand color 9-8-2024 */
/* logo 512 orig je - orig red: #b51247;
 * je logo orig black: #454d4f; */
/*brand color junespina 9-8-2024 - color hunt
* dark blue: #13445A;
* grayish blue: #446878;
* cream: #FEF4E8;
* red: #970747; */

/* 7-5-2025 */

/* ok Hides Site Title */

/** 
Theme Name: Astra Child 
Theme URL: https://junespina.com
Description: Astra Child 
Theme Author: Jun P. Espina
Author URL: https://junespina.com
Template: astra
Version:  5.11.13
Text Domain: astra-child
Template: astra
*/
/*@import url("../generatepress/style.css");*/

/* =Theme customization starts here
-------------------------------------------------------------- */
/* ==Logo Color Brand:
/* black: #35393a
/* red: #b14d4d
/* cream: #ddd1c1
***********************/
/* Color Notes: 7-6-2025
/* cream/white: #faf5f1 - ok
/* .highlight-box:background-color: rgba(255, 99, 71, 0.1); Very light red (muted)
/*border: 1px solid rgba(255, 99, 71, 0.5);Light red border 
***********************/
/******old*************/
/* factory color: #c75d5d; used: #00aeef; */
/* BRAND COLORS -- 8-2024 */
/* dull green - #8FBC8F; ??? */
/*----brand color no. 3 ----------ok!!!!! */
/* dark red - #cb0f10; */
/* blackish - #0d0700; */
/* greenish - #a5b7ac; */
/* cream - #a5b7ac; */
/* hover > a >color: #31316E;*/
/* a color:  #cb0f10; */
/* .hthin color blue: color:#31316E; */
/* menu bar: dark blue: #13445A; */

/* brand color 9-8-2024 */
/* logo 512 orig je - orig red: #b51247;
 * je logo orig black: #454d4f; */
/*brand color junespina 9-8-2024 - color hunt
* dark blue: #13445A;
* grayish blue: #446878;
* cream: #FEF4E8;
* red: #970747; */

/* 7-5-2025 */

/* ok Hides Site Title */
.site-description, .site-title {
  margin-bottom: 0;
	display:none;
}

.jpe_border{
	font-family: Georgia, Times, "Times New Roman", serif;
    color:#0d0700; 
	background-color:#F0F8FF;  
    border-left:solid;
    border-color:#3b719f; /*#a5b7ac; */
    border-width: 2px;
	padding:20px;	
    text-align:left; 
    line-height: 1.6; 
	/*font-style:italic;*/
    font-size: 90%; 
    /*letter-spacing:2px;*/
	margin-bottom:20px;	
	margin-left:20px;
    } 
.jpe_border p {
	font-size: 95%;
	line-height: 1.6; 
}
/* N E W Column C O D E Below */
/* Create three equal columns that floats next to each other */
.jpe_4column {
    float: left;
    width: 25%;
    padding: 10px;
   /* height: 300px;  Should be removed. Only for demonstration */
}
/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media (max-width: 600px) {
    .jpe_4column {
    width: 100%;
    }
}
/* Create three equal columns that floats next to each other */
.jpe_3column {
    float: left;
    width: 33.33%;
    padding: 10px;
   /* height: 300px;  Should be removed. Only for demonstration */
}

/* Clear floats after the columns */
.jpe_row:after {
    content: "";
    display: table;
    clear: both;
}
/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media (max-width: 600px) {
    .jpe_3column {
        width: 100%;
    }
}

/* Create two equal columns that floats next to each other */
.jpe_2column {
    float: left;
    width: 50%;
    padding: 10px;
   /* height: 300px;  Should be removed. Only for demonstration */
}
/* Clear floats after the columns - ok through .jpe_row above */
/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media (max-width: 600px) {
    .jpe_2column {
        width: 100%;
    }
}
/* Create two unequal columns that floats next to each other */
.jpe_u_column {
    float: left;
    padding: 10px;
    /* height: 300px; Should be removed. Only for demonstration */
}
.u_left {
  width: 25%;
}
.u_right {
  width: 75%;
}
/*====*/
.wp-caption-text {
	font-size:80%;
	/*margin-top:0;
	padding-top:0;*/
}

.jpe_box_simple3 { /* edited 8-25-2024 */	
	font-family: Georgia, Times, "Times New Roman", serif;
	font-style:normal;
    color:#0d0700; 
	background-color:#F0F8FF;  
	font-size:90%;  
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    -ms-box-sizing:border-box;
    box-sizing:border-box;
    border: 2px solid #a5b7ac; 
    border-radius:10px;
    float: left;
    padding:3%;
	padding-bottom:0px;
    width: 100%;
    margin-bottom:12px;
    }
	
.jpe_box_simple3-green {	
	font-family: Georgia, Times, "Times New Roman", serif;
    color:#0d0700; 
	background-color:#F0F8FF;  
	font-size:90%;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    -ms-box-sizing:border-box;
    box-sizing:border-box;
    border: 1px solid #78b1c4 !important; /* #61abc5 #a5b7ac; */
    border-radius:10px;
    float: left;
    padding:3%; 
    width: 100%;
    margin-bottom:20px;  
    }

.dc { /* First Character - dc dropcap*/
  color: #e60202; 
  float: left;
  font-family: Georgia;
  font-size: 75px;
  line-height: 60px;
  padding-top: 4px;
  padding-right: 8px;
  padding-left: 3px;
}
.dc2 { /* First Character - dc dropcap*/
  color:#cb0f10; 
  float: left;
  font-family: Georgia;
  font-size: 2.5rem; /*75px;*/
  line-height: 30px; /*60px;*/
  padding-top: 4px;
  padding-right: 8px;
  padding-left: 3px;
}

/* chatgpt - box that floats to right side */
/* html side 7-5-2025 */
/*<div class="container-x">
    <div class="content-x">
        <p>Your main content goes here.</p>
        <img src="your-image.jpg" alt="Description of image" class="responsive-image-x">
    </div>
    <div class="sidebar-x">
        <div class="special-text-x">
            <h2>Announcement</h2>
            <p>This is a special announcement or ad.</p>
        </div>
    </div>
</div>*/


.container-x {
    float: right; /* Float the container to the right */
    width: 300px; /* Fixed width for the container */
    margin: 20px; /* Margin around the container */
}

.special-text-x {
    background-color: #f9f9f9; /* Light background for visibility */
    padding: 15px;
    border: 1px solid #ccc; /* Optional border */
    border-radius: 5px; /* Rounded corners */
}

.responsive-image-x {
    max-width: 100%; /* Make images responsive */
    height: auto; /* Maintain aspect ratio */
    margin-right: 10px; /* Space between image and text */
    float: left; /* Float the image to the left */
}
/* Provides border & bg color */
.highlight-box {
    background-color: rgba(255, 99, 71, 0.1); /* Very light red (muted) */
    border: 1px solid rgba(255, 99, 71, 0.5); /* Light red border */
    padding: 15px; /* Padding inside the box */
    border-radius: 5px; /* Optional: rounded corners */
}

.book-container {
    display: flex;
    flex-wrap: wrap; /* Allow items to wrap to the next line */
    justify-content: space-between; /* Space between items */
    margin: 20px; /* Margin around the container */
}

.book-item {
    flex: 1 1 calc(16.66% - 20px); /* 6 items per row with space */
    margin: 10px; /* Margin around each book item */
    background-color: #f9f9f9; /* Light background for book items */
    border: 1px solid #ccc; /* Optional border */
    border-radius: 5px; /* Rounded corners */
    text-align: center; /* Center text */
    padding: 10px; /* Padding inside each book item */
}

.book-thumbnail {
    max-width: 100%; /* Responsive image */
    height: auto; /* Maintain aspect ratio */
}

.book-title {
    font-size: 1.2em; /* Font size for book title */
    margin: 10px 0; /* Margin above and below the title */
}

.add-to-cart2 {
    background-color: #faf5f1; /*#ddd1c1;
			/*#b14d4d; /*#28a745; /* Green background for button */
    color: #b14d4d; /* White text color */
    border: none; /* No border */
    padding: 10px 15px; /* Padding inside the button */
    border-radius: 5px; /* Rounded corners for button */
    cursor: pointer; /* Pointer cursor on hover */
}

.add-to-cart2:hover {
    background-color:#35393a;
	
	/*#218838; /* Darker green on hover */
	color:#fff;
}

.fontresize {
	font-size: 80% !important;
}

/* hthin hthinCent */

/* MYBUT */

.mybut {
	color:#e0fbfc; /*#ffffff;*/
	background-color:#2271b1; /*#f8dcbf;*/
	display:block;
	margin: 0 auto;	
	border-radius:4px;
	border:2px solid #DEDEE2;
}
.mybut a {
	text-decoration:none;
	color:#ffffff; /*#86a495;*/
}
.mybut a:hover {
  color:#f8dcbf;
	text-decoration:none;
} 
.mybut:hover { /*working*/
	background-color:#f95738;
	text-decoration:none;
}
.rd { /*color:#fd5e53;*/	
	font-size:20px;
	color:rgb(255, 5, 68);
	font-style:normal;
	font-weight:normal;
}
a {
	color:#970747;
	text-decoration:none !important;
}
a:hover {
  color:#cb0f10;
	text-decoration:none;
}

.highlight-box-brown {
    background-color: #faf5f1;
	  border: 1px solid #8a3324;
    /*border: 1px solid */
    padding: 15px; 
    border-radius: 5px; 
}



/* author meta */

.author-meta {
    display: flex;
    align-items: center; /* Align items vertically centered */
    margin-bottom: 20px; /* Space below the author meta */
}

.author-image {
    border-radius: 50%; /* Make the image rounded */
    margin-right: 10px; /* Space between image and text */
}

.author-name, .reading-time, .updated-date {
    margin-right: 15px; /* Space between text elements */
}

/* Added css 7-11-2025 */

.hthin {
	font-weight:600 !important;
    color:#31316E !important;	
}
.hthinCent {
	text-align:center;
}


.h98italic {
	font-size:105%;
	font-style:italic;
    line-height: 130%; 
	color: #31316E; /*#007acc; /* #003153;*/
	margin-bottom: 10px; /*1em;*/
}

/* table of contents / NOTE: New TOC. Old TOC NOT FOUND ??? 8-2024 */
/* COLLAPSIBLE TABLE OF CONTENTS - CHAPGPT - 8-10-24 / USAGE
<details>
  <summary>CONTENTS</summary>
  <div id="toc_container">
    <ul class="toc_list">
      <li><a href="#curcumin">1. xxx xxx</a></li>
      ...
    </ul>
  </div>
</details> */

#toc_container {
    background: #f9f9f9;
    border: 1px solid #aaa;
    padding: 20px;
    width: auto;
    transition: background-color 0.3s ease; /* Smooth background transition */
}

details {
    margin-bottom: 10px;
}

summary {
    color: #8FBC8F;
    font-weight: bold;
    cursor: pointer;
    margin-bottom: 5px;
    display: flex; /* Align icon and text */
    align-items: center; /* Center vertically */
}

.eye-icon {
    margin-right: 8px; /* Space between icon and text */
    font-size: 1.2em; /* Adjust icon size */
}

.toc_title {
    font-weight: 700;
    text-align: center;
    color: #008080;
}

details[open] summary {
    color: #007bff; /* Change color when expanded */
}

#toc_container li, #toc_container ul, #toc_container ul li {
    text-decoration: none;
    color: #31316E; /* Text color */
}

ul.toc_list a {
    text-decoration: none; /* Remove underline */
    color: #31316E; /* Link color */
}

#toc_container li, #toc_container ul, #toc_container ul li {
    list-style: none; /* Remove bullet points */
    padding: 5px 0; /* Space between items */
}

#toc_container li:hover a {
    color: #007bff; /* Change color on hover */
}

.text-box {     /* float: right; / * Or left, depending on where you want the box */
  width: 300px; /*250px; /* Initial width */
  font-size:.95rem;
  margin: 0 10px 10px 10px; /*0 0 10 10 Margin to create space around the box */
  padding: 15px;            /* 10 Padding inside the box */
  border: 1px solid #ddd;   /* Border color and style */
  background-color:#F4EFF9;  /*#F1E7FA; /*#ecf0f5; /* #d3d7dc; /*blue #B0C4DE; / *white #f9f9f9;  Background color */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Optional: add a shadow for effect */
  border-radius: 4px; /* Optional: rounded corners */
}
.float-left { /* Float left */
  float: left;
  margin-right: 10px; /* Space on the right side */
}
.float-right { /* Float right */
  float: right;
  margin-left: 10px; /* Space on the left side */
}

.text-box::after { /* Clearfix */  
  content: "";
  display: table;
  clear: both;
}

@media (max-width: 768px) { /* Media query for smaller screens */
  .text-box {
    float: none;    /* Remove float on smaller screens  */
    width: 100%;    /* Full width on smaller screens    */
    margin: 10px 0; /* Adjust margin for better spacing */
  }
}


.green-blockquote{
  font-size: 1.2em; /*orig 1.4em*/
  width:90%; /* 60% orig*/
  margin:30px auto; /*50px orig */
  font-family:Open Sans;
  font-style:italic;
  color: #555555;
  padding:1.2em 30px 1.2em 75px;
  border-left:8px solid #3b719f; 
  line-height:1.6;
  position: relative;
  background:#EDEDED;
}
.green-blockquote::before{
  font-family:Arial;
  content: "\201C";
  color:#3b719f; 
  font-size:4em;
  position: absolute;
  left: 10px;
  top:-10px;
}

.green-blockquote::after{
  content: '';
}
.green-blockquote span{
  display:block;
  color:#333333;
  font-style: normal;
  font-weight: bold;
  margin-top:1em;
}

.jpe_quote-green { 
  font-family: Georgia, Times, "Times New Roman", serif;
  display:block;
  background-color: #F0F8FF; 
  padding:20px 30px 20px 30px;
  margin: 20px 10px 20px 10px; 
  position: relative;  
  font-size: 120%;
  color:#0d0700;
  text-align: center; 
  border-left: 4px solid;
  border-color:#3b719f; /*#a5b7ac;*/
  line-height: 150%;
}


	
/* == icon box -- display social media icons style.  see dad css reuse plugin == */
.icon-box {
    width: 48px;
    height: 48px;
    display: inline-block;
    border: 1px solid #ccc;
    background-color: #f9f9f9;
    transition: background-color 0.3s ease;
    overflow: hidden;
    float: right;
    margin-left: 10px; /* Added margin to create a gap between images */
    padding: 5px; /* Added padding to create space between image and border */
}

.icon-box img {
    max-height: 48px; /* Force the image height to 32px */
    width: auto; /* Maintain the aspect ratio by allowing width to adjust */
    object-fit: contain; /* Ensure the image scales correctly within the box */
}

.icon-box:hover {
    background-color:#e0e0e0;
}

.resize {
    width: 48px;
    height: 48px;
}

.resize:hover {
    height: 64px;
    width: 64px;
}

.icon-row {
    overflow: auto;
}

/* # 2 = ICON BOXES 2 - CENTERED - CHATGPT-CREATED */
/* This CSS code centers ICON images. ChatGPT-created. Same as above in usage */
/* ICON2-BOX / ICON2-ROW / ICON2-BOX IMG / RESIZE2 / RESIZE2:HOVER */

.icon2-row { /* START ICON BOXES 2 */
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
    gap: 10px;
}

.icon2-box {
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #ccc;
    background-color: #f9f9f9;
    transition: background-color 0.3s ease;
    overflow: hidden;
	margin-left: 10px; /* Added margin to create a gap between images */
    padding: 5px; /* Added padding to create space between image and border */
	padding-top:10px;

}

.icon2-box img {
    max-height: 64px; /* Force the image height to 32px */
    width: auto; /* Maintain the aspect ratio by allowing width to adjust */
    object-fit: contain; /* Ensure the image scales correctly within the box */
}
/*.icon2-box img:hover {
	background-color:#FFA07A;
}*/

.icon2-box:hover {
    background-color:#e0e0e0;
}

.resize2 {
    width: 64px;
    height: 64px;
}

.resize2:hover { /* END ICON BOXES 2 */
    height: 80px;
    width: 80px;
}

/* == icon 3 dashicon == */
.icon3-row {
    display: flex; /* Use flexbox to align items in a row */
    justify-content: flex-start; /* Align items to the start of the row */
    align-items: center; /* Center items vertically */
    /*margin-top: 1em; /* Add some space above the icon row */
}

.icon3-box {
    width: 32px; /*48*/
    height: 32px;
    display: flex; /* Use flexbox for the icon box */
    justify-content: center; /* Center the icon horizontally */
    align-items: center; /* Center the icon vertically */
    border: 1px solid #ccc;
    background-color: #f9f9f9;
    transition: background-color 0.3s ease;
    margin-left: 10px; /* Space between icons */
    padding: 5px; /* Space between icon and border */
}

.icon3-box span {
    font-size: 20px; /*24 Adjust icon size if necessary */
}

.icon3-box:hover {
    background-color: #e0e0e0;
}

/* == dillan_quote == */
.dillan_quote {
	margin-left: 20px;
	margin-right: 15px;
	margin-bottom: 15px;
	font-family: Georgia, Times, "Times New Roman", serif;
    color:#0d0700; 
	background-color:#F0F8FF;  
	padding:15px;
	font-size:95%;
}
.dillan_quote  p {
	margin-left: 4px;
	margin-right: 15px;
	margin-bottom: 15px;
	 color:#0d0700; 
	background-color:#F0F8FF; 
	font-size: 95%; 
}
.dillan_quote  h3 {
	margin-left: 15px;
	margin-right: 15px;
	margin-bottom: 15px;
	color: #848484;
	font-size: 90%; 
    letter-spacing:.8px; 
}

/* == author-meta == */
.author-meta {
    display: flex;
    align-items: center; /* Align items vertically centered */
    margin-bottom: 20px; /* Space below the author meta */
    font-size: 85%; /* Adjust font size for mobile visibility */
	  font-style: italic;
}
.author-image {
    border-radius: 50%; /* Make the image rounded */
    margin-right: 10px; /* Space between image and text */
    overflow: hidden; /* Ensure the image stays within the rounded border */
}
.author-name, .publish-date, .reading-time, .updated-date {
    margin-right: 15px; /* Space between text elements */
}

.entry-meta {
    position: absolute;
    left: -9999px; /* Move it off-screen */
}

/* == author bio == */
.author_bio2_section2 { /* author bio dad plugin */
max-width:90%;    
background: none repeat scroll 0 0 #F3F9FD; /* #FAEBD7; */
padding: 15px;
border: 1px solid #ccc;
 border-radius:10px;
margin-bottom:40px;	
display: inline-block;
}
.author_bio2_section2 .author_name2 {
font-size:18px;
font-weight: bold;
margin-bottom:10px;
}
.author_bio2_section2 .author_details2 img { /* img prob solved here*/
	width:90px;
	margin-right:20px; /*solve*/
	float:left;
	height:auto;
	border-radius:50%;
}
.author_bio2_section2 .avatar { /*.author_bio2_section2 .author_details2 - in case needed later.*/
    float: left;
    margin: 0 10px 10px 0;
}
.author_bio2_section2 p {
  margin: 0;
  padding: 0; 
}
.author_bio2_section2 .author_details2 {
	font-size:80%; /* working */
}

/* == removes author meta on specific pages == */

#post-3132 .author-meta,
#post-3720 .author-meta,
#post-3152 .author-meta,
#post-301  .author-meta
{
    display: none !important;
}

/* == shrink / reduce font size == */
.pshrink { /* shrink font-size to 90% */
	font-size:85%;
}

.jpe_center { /* used */
  text-align: center;
}

.jpe3_linehoriz { /* colored one liner for h3 heading */
margin:0;
padding:0;
padding-bottom:5px;
padding-top:5px;
max-width: 100%;
position: relative;
background-color:#FA8072; 
color:#191970; 
border-radius: 5px;
box-shadow: 3px 3px 2px #808080;
text-align:center;
}