/**
 * Theme Name: events-loopla
 * Template:   generatepress
 * Description: A child theme of GeneratePress for Events Loopla
 * test canI edit
 */

:root {
   --events-margin-bottom: 20px;
   --events-sm-margin: 20px;
   --events-margin-small: 5px;
   --accent-color: #260045;
   --h-tags-color: #272529;
   --events-margin-under-h1: 40px;
   --events-img-radius: 8px;
   --body-color: #636066;
   --events-blue-dot-color: #5E8EFF;
} 

body{
   font-family: "Poppins", sans-serif;   
   background: white;  
   color: var(--body-color); 
}

/*********************** typography ****************************************************/

html{
   font-size: 16px;
   scroll-behavior: smooth;
}
body{
   text-rendering: optimizeLegibility;
}
body, button, input, select, textarea{
   font-size: 100%;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {   
   font-weight: 600;
   line-height: 1.4;
   margin-bottom: 1rem;
   margin-top: 0;   
   color: var(--h-tags-color);
}


p {
   margin: 0 0 1.5rem;
}

h1, .h1 {
   font-size: 2.4rem;
}

h2, .h2 {
   font-size: 1.8rem;
}

h3, .h3 {
   font-size: 1.5rem;
}

h4, .h4 {
   font-size: 1.3rem;
}

h5, .h5 {
   font-size: 1.1rem;
}

h6, .h6 {
   font-size: 1rem;
}

@media screen and (max-width: 1024px) {
   h1, .h1 {
       font-size: 1.8rem;
   }

   h2, .h2 {
       font-size: 1.5rem;
   }

   h3, .h3 {
       font-size: 1.35rem;
   }

   h4, .h4 {
       font-size: 1.2rem;
   }

   h5, .h5 {
       font-size: 1.1rem;
   }

   h6, .h6 {
       font-size: 1rem;
   }
}

#crumbs, #loopla-aff-msg{
   font-size: 0.9rem;
}

b, strong{
   font-weight: 600;
}
/*********************** END typography ****************************************************/

.wp-block-button, .main-navigation #loopla-search-mainsite-btn a{
   font-weight: 600;
}

.container {
   width: 100%;
   /* max-width: 1140px; */
   /* 
    1.change width in generatepress UI wp-admin , upped from 1215 (i think) to 1295
    2. altered max-width here to 1240px
    3. in frontend.min.css OR frontend.css  --content-width 1240px
   */
   max-width: 1240px;
   padding-right: 0;
   padding-left: 0;
   margin-right: auto;
   margin-left: auto;
}



/*************  nav ****************************************************/
#primary-menu > ul > li > a {
   text-transform: uppercase;
 }
#loopla-search-mainsite-btn .button{
   border-radius: 5px;
   background-color: var(--accent-color);
   padding: 7px 20px;
   font-size: 0.85rem;
}

.main-nav ul ul{ /* sub menu */
   background-color: white;
   border-radius: var(--events-img-radius);
   box-shadow: 10px 10px 20px grey;
}
/*************  end nav ****************************************************/

#loopla-aff-msg{   
   text-align: center;
   margin-top: 20px; 
   margin-bottom:20px;
}

/*********** posts page ******************************/
body.single-post header.entry-header { /* center post header */
   margin-bottom: var(--events-margin-under-h1);
   text-align: center;
}

body.single-post figure.wp-block-image img{
   margin-bottom: var(--events-margin-bottom);
   margin-top: calc( var(--events-margin-bottom) - 10px);
}

body.single-post div.wp-block-button{
   margin-bottom: 40px;
}

body.single-post main.site-main , body.home .site-content{ /* move content up under affiliate msg (home and single post) */
   margin-top: -40px;
}

body.single-post #crumbs{
   margin-bottom:  var(--events-margin-bottom);
   font-weight: 500;
}

/* buttons */
body.single-post .wp-block-buttons .wp-block-button__link {
   border-radius: 8px;
   font-size: 14px;
   padding: 12px 24px;
   background-color: var(--accent-color) !important;
}

/* h2 */
body.single-post h2, body.single-post h2.wp-block-heading{
   margin-top: 70px;
   margin-bottom: 20px;
}
/* h3 */
body.single-post h3, body.single-post h3.wp-block-heading{
   margin-top: 2rem;
}

body.single-post .inside-article img{
   border-radius: var(--events-img-radius);
}


/*********** end posts page ******************************/

/********* category page ( and posts page  footer nav )*************************************/
@media only screen and (min-width: 768px) { /* ipad and bigger */
   #loopla-category-wrapper{
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      row-gap: 30px; /* MPRO-469 */
      column-gap: 30px; /* MPRO-469 */
   }

   #loopla-category-wrapper article{ /* MPRO-469 */
      border: 1px solid #8589a038;
      border-radius: 15px;
      padding: 20px; /*20px */
   }

   #loopla-category-wrapper .inside-article{ /* MPRO-469 */
      padding: 20px;

   }

   #loopla-category-wrapper article:hover{ /* MPRO-469 */
      box-shadow: 0 20px 35px #70798b38;
   }
}
@media only screen and (min-width: 768px) {     /** posts footer nav **/
   #loopla-posts-nav {
      
    
   }   
}  
#loopla-category-wrapper h2, #loopla-posts-nav h2, #test-raddy h2{
   font-size: 1.5rem;
   font-weight: 600;
   line-height: 1.4;

}

#loopla-category-wrapper img{
   border-radius: var(--events-img-radius);
    height: 200px;
    object-fit: cover;
}

#loopla-category-wrapper div.most-relative-category, 
#loopla-posts-nav div.most-relative-category,
#test-raddy div.most-relative-category
{
   margin-top: var(--events-sm-margin);
   margin-bottom: var(--events-sm-margin);
}

#loopla-category-wrapper .most-relative-category a, 
#loopla-posts-nav .most-relative-category a,
#test-raddy a
{
   text-decoration: none;
}

body.archive.category header.page-header {   
   padding-top: 10px;
   padding-bottom: 10px;   
}

body.archive.category .site-content#content{
   padding-top: 0px;
}

/* homepage - category above post title and excerpt (eg  on homepage) and on categories page - also */
body.home .content-wrapper .term-item span, 
body.category .most-relative-category a, 
#loopla-posts-nav .most-relative-category a,
#test-raddy .most-relative-category a
{
   font-size: 0.75rem;
   display: flex;   
   gap: 5px;
   align-items: center;  
}

/* homepage - category above post title and excerpt (eg  on homepage) and on categories page - also */
body.home .content-wrapper .term-item span:before, 
body.category .most-relative-category a:before, 
#loopla-posts-nav  .most-relative-category a:before,
#test-raddy .most-relative-category a:before
{
   background: var(--events-blue-dot-color);
   content: '';
   display: inline-block;
   width: 6px;
   height: 6px;
   border-radius: 50px;
}
body.category .most-relative-category span a, 
#loopla-posts-nav .most-relative-category span a,
#test-raddy .most-relative-category span a{
   font-size: 1rem;
}

body.category .taxonomy-description{
   border-bottom: 1px solid var(--body-color);
}
/********* END category page *************************************/

/* links */
a {
   color:  var(--accent-color); 
   outline: 0;
   transition: all ease 0.3s;
}
a:hover{
   text-decoration: none;
}

.post-wrapper .terms-wrapper {
   margin-bottom: 10px;
}


/* fix footer social icons alignment */
.footer-widgets .widget .wp-block-social-links :last-child{
   margin-bottom: auto !important;
}

form.formkit-form{
   margin-top: 120px;
}

.loopla_block_btn_container{
   display: flex; align-items: center; height: 100px;
}
.loopla_block_btn{
   display: inline-block;
   padding: 12px 24px;
   background-color: #260045;
   color: #ffffff;
   text-decoration: none;
   font-size:  14px;
   font-weight: 600;
   border-radius: 8px
}
.loopla_block_btn:hover, 
.loopla_block_btn:link, 
.loopla_block_btn:visited,
.loopla_block_btn:active 
{
   color: white;
}

/************* mobile ********************************************/

@media (max-width: 768px) {

   body.single-post main.site-main , body.home .site-content{ /* move content up under affiliate msg (home and single post) */
      margin-top: -65px;
   }

	.site-content, .one-container .site-content{
		padding-left: 0px !important;
		padding-right: 0px !important;
	}

   .site-header .header-image{   
      width: 75px;
   }

   /* left align stuff on mobile */
   body.single-post header.entry-header {      
      text-align: left;
   }   

   #loopla-aff-msg{  
      text-align: left;   
   }
}