/*!
Theme Name: BrightGreen Child
Template: BrightGreen
Description: Bright Green Nature
Version: 1.0.002
*/

/*  Index ------------------------------------------------------------
1. Root styles
2. Basic Structure and Layout
3. Default html styles
4. Navigation
5. Search Box
6. Images
7. Bespoke Elements
8. Scroll activated transitions
9. Main media
10. Sandbox
*/

/* Media-Queries break points - for ref only --------------------- */ 
    /* 
    Main break point is 768px)
    Declare in this order: 
    Phone = small: (min-width:521px);     
    Tablet= standard: (min-width:768px);  Default for this style sheet is 767px
    Phone = small: (min-width:521px);  
    Laptop = wide: (min-width:1366px) ; 
    Desktop = xtra-wide: (min-width:1920px) ;
    */

/* 1. Root styles ----------------------------------------------------------------*/
:root {  
    --primary-font:"Montserrat", arial, sans-serif;
    --secondary-font: "Caveat Brush", cursive; 
    /* Main Colors */
    --bgn_green:#264734;
    --bgn_lime:#649d2b;
    --bgn_yellow:#E7B221;
    --text:#35332C;
    --soft_text:#868686; 
    --light: #E5EFD4;
    /* Navigation Colors */
    --link: #365318;
    --hover:#649d2b;
    --visited:#649d2b;    
    --cta: #fa7014;
    --cta_hover: #f8ae02;
    /* Basic transitions */
    --fade-text:  color 500ms ease;
    --fade-background:  background-color 500ms ease;
    --fade-opacity:  opacity 500ms ease;
    --in-view:  opacity 2000ms ease;
    /* Base font */
    font-size:12pt;
    @media screen and (min-width:920px) { font-size:16pt; }  
    }  
  
/* 2. Basic Structure and Layout =========================================================== */
    body { -webkit-font-smoothing: antialiased; font-family: "Montserrat", sans-serif;}
    #content-wrapper {background-image : url(images/decoration/background.svg); margin:0 0 40px; padding:20px;}    
    footer.site-footer {text-align:center;}
    .size-auto, .size-full, .size-large, .size-medium, .size-thumbnail {max-width: 100%; height: auto;}
    body{ font-family: var(--primary-font);  font-weight:400; color:var(--text);  }    
    /* Header */
    #header-wrapper {margin: 0 auto 0 auto; max-width: 2000px; padding:0 20px 0 20px; } 
    #site-navigation {margin:20px 0 20px 0;}
    /* Main Content */
    #content-wrapper {background: var( --bgn_lime); background-image: url(images/decoration/background.svg); background-size: 400px 400px; padding:10px;}   
    .entry-content.secondary-content { }   
    /* Footer */
    #footer-logo img{width:350px; height:auto;  opacity:0.9; transition: var(--fade-opacity);}
    #footer-logo img:hover {  opacity:1;}
    #footer-nav {margin:20px 0 20px 0;}
    #footer-nav-block {margin:40px 30px 0;}
    /* Footer Logofest */
    #footer-logofest {display:flex; justify-content:center; flex-direction:row; flex-wrap:wrap; align-items:center; }
    #footer-logofest .footer-logofest_logo img {opacity:0.9;}
    #footer-logofest .footer-logofest_logo img:hover {opacity:1;}

/* 3. Default html styles ============================================================= */
    h1 {font-size: 2rem; line-height: 1.2em; margin: 0; color: var(--bgn_lime);}
    h2 {color: var(--bgn_lime); line-height: 1.2em;}
    h3 {color: var(--bgn_lime); line-height: 1.2em; margin-bottom:0.5rem;}
    /* H6 Highjacked for a graphic style*/
    h6 { font-size: 1.2rem; padding:16px; line-height:18pt; border: 2px solid var(--bgn_lime); border-radius: 5px; color:var(--bgn_lime); font-weight:800; margin:20px 10px 20px 0; display:inline-block; clear:both; }
    p {margin-bottom:1em; margin-top:0.5rem;}
    blockquote p{font-family: "Caveat Brush", cursive; color:var(--bgn_lime); padding:0 5px 0 5px; font-size:1.6rem;  line-height: 1.2; text-align:center;}
    @media screen and (min-width:768px) { 
    blockquote p{ padding:0 50px 0 50px;  }   
    }   
    
    em {font-style:italic;}
    ol {padding:0; margin:0;}
    ul {padding:0; margin:0;}    
    .entry-content ol {margin-left:40px;}
    .entry-content ul {margin:0 0 20px 20px;}
    .entry-content ul li {list-style-type:none; background-image: url(images/decoration/bullet.svg); background-position: left 8px; background-size: 14px 14px; background-repeat:no-repeat; padding:0 0 0 24px ; margin-bottom:20px;}
    .entry-content ol li {list-style-type: upper-roman;}    
    /* Targeted text stlyes */       
    h1.page-title, h1.entry-title {margin:20px 0 40px 0; font-size:2rem; }
    .category-news h1.page-title, .category-news h1.entry-title {margin:60px 0 0 0;}
    h1.page-title .archive-title_prefix {font-weight:300;}
    #footer-content p, #site-info p {font-size:0.8rem;}
    
/* 4. Navigation ==========================================================*/
    a {text-decoration:none; font-weight:800; color: var(--link);}
    a:hover {color: var(--hover);}
    a:visited{color: var(--visited);}
    /* Nav Block on the front page */
    .front-page-nav_block a  {color: white; font-weight:300;} 
    #front-page-news a:hover {}
    #front-page-nav_blocks {display:flex; justify-content:space-between; flex-wrap:wrap; }
    #front-page-nav_blocks h3 {line-height:1; padding:0; margin:0 0 10px 0; color:white; font-size:1.2rem;}
    #front-page-nav_blocks p {line-height:1.2; padding:0; margin:0 0 10px 0; color:white; font-weight:300 !important;}
    .front-page-nav_block-img {aspect-ratio : 1.5 / 1; width:100%; background-size: cover; border-radius: 8px 8px 0 0;}
    #front-page-nav_blocks .front-page-nav_block .inner { padding:10px;}    
    #front-page-nav_blocks .front-page-nav_block  {  margin-bottom:20px; background-color: var(--bgn_lime); background-size: cover; background-position: center; background-repeat:no-repeat; border: 1px solid var(--bgn_lime); border-radius :10px; border:2px solid white;}
    .front-page-nav_block a h3.cta_link {font-size:0.9rem;}   
    .front-page-nav_block a h3.cta_link::after, .front-page-nav_block a .front-page-nav_title h3::after {content: url('images/decoration/read-more.svg'); width: 24px; height: 24px; display: inline-block; padding-left:5px;}
    .front-page-nav_block a:hover h3.cta_link::after, .front-page-nav_block a:hover .front-page-nav_title h3::after {content: url('images/decoration/read-more_hover.svg'); width: 24px; height: 24px; display: inline-block; padding-left:5px;}
    /* Pagination */
    .page-navigation__block {padding-top:30px;  }
    ul.page-navigation {display:flex; justify-content:center;}
    #content-wrapper ul.page-navigation li{background-image:none; }
    ul.page-navigation li a{padding:5px 10px 5px 10px;  text-align:center; color:white; border: 1px solid var(--link); transition: var(--fade-background); font-weight:800; background-color: var(--link); border-radius:3px;}
    ul.page-navigation li.active a{background-color:white; color:var(--bgn_lime); border: 1px solid var(--bgn_lime); opacity:0.5;}
    ul.page-navigation li a:hover, ul.page-navigation li.active a:hover { border: 1px solid var(--hover); background-color: var(--hover); color:white;opacity:1;}
    ul.page-navigation li.next, ul.page-navigation li.previous{display:none;}
    /* Read more */       
    .read-more_link {padding-bottom:20px;}
    .read-more_link a.read-more {margin-top:10px; padding: 5px 26px 5px 0px; background-image: url('images/decoration/more.svg'); background-size: 20px 20px; background-position: right center; background-repeat: no-repeat; font-weight:400;}
    .read-more_link a.read-more:hover {background-image: url('images/decoration/more_hover.svg'); background-size: 24px 24px;}
    /* Post edit button */
    a.post-edit-link { display: inline-block; font-size: 1.2rem;  font-weight: 400; text-decoration: none;  border: 1px solid white; border-radius: 5px; color: white; padding: 5px 40px 5px 10px; background-color: var(--cta);  background-image: url('images/decoration/edit-post.svg'); background-size: 36px 36px;
        background-position: right center; background-repeat: no-repeat; transition: background-color 0.5s ease; margin-top:20px; margin-bottom: 20px;}
    a.post-edit-link:hover {background-color: var(--cta_hover);  color: white;}

    /* Note Mega Menu styled via Menu Themes / Custom Styling using these styles     
    Push menu onto new line  
    #{$wrap} {     clear: both; }
    Mobile Menu 
    @media only screen and (max-width: 767px) {
    #mega-menu-wrap-menu-1 #mega-menu-menu-1 > li.mega-menu-item {background-color:#649d2b; margin-top:5px; border-radius:5px ; text-align:center;}
        #mega-menu-wrap-menu-1 #mega-menu-menu-1 > li.mega-menu-item:first-child {margin-top:0;}
    #mega-menu-wrap-menu-1 #mega-menu-menu-1 > li.mega-menu-item > a.mega-menu-link {font-size:14pt;}
    #mega-menu-wrap-menu-1 #mega-menu-menu-1 > li.mega-menu-flyout ul.mega-sub-menu li.mega-menu-item > a.mega-menu-link { text-align:center !important;}
    }
    Desktop Menu
    @media only screen and (min-width: 768px) {
    #mega-menu-wrap-menu-1 #mega-menu-menu-1 > li.mega-menu-item {border-left: 1px solid var(--text);}
    #mega-menu-wrap-menu-1 #mega-menu-menu-1 > li.mega-menu-flyout ul.mega-sub-menu li.mega-menu-item a.mega-menu-link {line-height:1.2; padding-bottom:10px;}
    }
    #mega-menu-wrap-menu-1 #mega-menu-menu-1 li.mega-menu-item:last-child {background-color: var(--bgn_lime); border-radius:3px; border-left:none; }
    #mega-menu-wrap-menu-1 #mega-menu-menu-1 li li.mega-menu-item:last-child {background-color: transparent; }
    #mega-menu-wrap-menu-1 #mega-menu-menu-1 li.mega-menu-item:last-child:hover {background-color: var(--cta); }
    #mega-menu-wrap-menu-1 #mega-menu-menu-1 li li.mega-menu-item:last-child:hover {background-color: transparent; }
    #mega-menu-wrap-menu-1 #mega-menu-menu-1 li.mega-menu-item:last-child a.mega-menu-link {color:white;}
    */

/* 5. Search Box ================================================================== */
    /* Search box in the footer*/
    #footer-search .search-form input.search-field { background-color: var(--bgn_lime); background-size: 30px 30px; background-image: url("images/decoration/search.svg");  background-position: right center;
        background-repeat: no-repeat;  font-size: 14pt; color: white !important; font-weight:400; width:160px; transition: width 600ms ease 0s, background-color 700ms ease 0s; border: solid 1px var(--bgn_lime);
        border-radius: 5px; outline: var(--bgn_lime); cursor: pointer; margin: 0 12px 0 0 ; padding: 6px 36px 6px 6px; -webkit-box-shadow: 0px 0px 0px rgba( 0, 0, 0, 0); -moz-box-shadow: 0px 0px 0px rgba(0, 0, 0, 0); 
        box-shadow: 0px 0px 0px rgba(0, 0, 0, 0); }
    #footer-search .search-form input.search-field:hover { background-color: white; border: solid 1px var(--bgn_lime); color: var(--text); background-size: 30px 30px; background-image: url("images/decoration/search_hover.svg");
        width:400px; -webkit-box-shadow: 0px 0px 0px rgba( 0, 0, 0, 0); -moz-box-shadow: 0px 0px 0px rgba(0, 0, 0, 0); box-shadow: 0px 0px 0px rgba(0, 0, 0, 0); opacity: 1; }
    #footer__search .search-form input.search-field:focus { color: var(--text); background-size: 30px 30px; background-image: url("images/decoration/search_hover.svg"); -webkit-box-shadow: 0px 0px 0px rgba( 0, 0, 0, 0);
        -moz-box-shadow: 0px 0px 0px rgba(0, 0, 0, 0); box-shadow: 0px 0px 0px rgba(0, 0, 0, 0);}
    input.search-submit {display: none;}
    #footer-search input {color: #ffffff;}    
      
/* 6. Images ================================================================== */
    .alignleft {float: left; margin-right: 1rem; margin-bottom: 1rem;}
    .alignright { float: right; margin-left: 1rem; margin-bottom: 1rem;}
    .aligncenter {clear: both;display: block; margin-left: auto; margin-right: auto; margin-bottom: 1rem;}
    /* Captions -------------- */
    .wp-caption {margin-bottom: 1.5em; max-width: 100%;}
    .wp-caption img[class*="wp-image-"] {display: block; margin-left: auto;margin-right: auto;}
    .wp-caption .wp-caption-text { margin: 0.8075em 0; font-size: 0.8rem; background-color: var(--secondary);}
    .wp-caption-text { font-size: 0.4rem; padding:5px 10px 5px 10px; }
    @media screen and (min-width:768px) { .wp-caption-text { font-size: 0.6rem; } }     
        
/* 7. Bespoke Elements ================================================================ */ 
    /* Front Page */
    #front-page-nav_blocks {margin-top:50px;}
    #sp_easy_accordion-1776179862 {margin-top:10px;} 
    .entry-header.wys-page,  .entry-header.yrf-page {display:flex; flex-direction:row; flex-wrap:nowrap; align-items:center;}
    .entry-header.wys-page img.wys_logo, .entry-header.yrf-page img.yrf_logo {width:140px; height:140px;}
    .entry-header.wys-page h1.entry-title, .entry-header.yrf-page h1.entry-title {margin:0; padding:0 0 0 20px;} 
    .facebook-header {text-align:center;}
    .facebook-header h2 {color:white; background-image: url(images/social-media-icons/facebook-button.svg);background-repeat: no-repeat; background-size: 32px 32px; padding-right: 42px; display:inline-block; background-position: right center; }
    /* Archive list */
    .category-list_thumb img {border: solid 1px var(--soft_text);}
    /* Search list */
    .search-list_item {display:flex; justify-content:space-between;}
    .search-list_content {flex-basis: 78%; margin-bottom:20px; border-top: solid 1px var(--soft_text); padding-top:20px;}
    .search-list_thumb {flex-basis:20%; height:auto; margin-right:20px; }
    .search-list_thumb img {border: solid 1px var(--soft_text);} 
    /* Map Page */
    #interactive-map {margin-bottom:20px; border:1px solid var(--soft_text);}
    /* Home page accordion content */
    .page-id-382 main#primary {margin: 30px auto 20px auto;}
    .page-id-382 .google-calendar {border:1px solid var(--bgn_lime); background-color:#f0f4f9; border-radius:10px;padding:5px; margin-bottom:50px;}
    /* News page */
    .news-date {font-size:1.2rem;}
    .news-location {font-size:1.2rem;}  
    /* News list */
    .category-news .entry-meta p {font-size:0.8rem}
    .category-news .news-date {font-size:1rem}
    .category-news .news-location {font-size:1rem}
    
/* 8. Scroll activated transitions. Add 'animate' to the class in the html, scrolling will add .in-view automatically, add .in-view styles here ====================== */ 
    .front-page-nav_block {opacity:0.5; transition: var(--in-view);}  
    .front-page-nav_block.in-view {opacity:1; }
    .front-page-news {opacity:0.5; transition: var(--in-view);}
    .front-page-news.in-view  {opacity:1;}  
    #footer-logofest {opacity:0.5; transition: var(--in-view);}
    #footer-logofest.in-view  {opacity:1;}  
    #footer-wrapper {opacity:0.5; transition: var(--in-view);}
    #footer-wrapper.in-view  {opacity:1;}  
    #facebook-feed {opacity:0.5; transition: var(--in-view);}
    #facebook-feed.in-view  {opacity:1;}
    .entry-content {opacity:0.5; transition: var(--in-view);}
    .entry-content.in-view {opacity:1;}     
    #front-page-nav_blocks .front-page-nav_block {opacity:0.5; transition: var(--in-view);}
    #front-page-nav_blocks .front-page-nav_block.in-view {opacity:1;}
    #header-wrapper nav#social-media-links {display:flex; justify-content:center; width:100%; margin:20px 0 20px 0 ;}
    #footer-wrapper nav#social-media-links {display:flex; justify-content:center; }
    nav#social-media-links .social-media_link { width: 36px ; height: 36px; display:block; margin: 0 5px 0 5px; flex-direction:row; flex-wrap:nowrap; border:0; padding:0; line-height:0;}
    nav#social-media-links .social-media_link { background-color:var(--bgn_lime); transition: var(--fade-background);  }
    nav#social-media-links .social-media_link a{width: 36px ; height: 36px; display:block;}
    nav#social-media-links .social-media_link:hover {background-color:#333;}
    nav#social-media-links .social-media_link.facebook {background-image: url(images/social-media-icons/facebook.svg);background-repeat: no-repeat; background-size: 36px 36px; }
    nav#social-media-links .social-media_link.ex {background-image: url(images/social-media-icons/ex.svg); background-repeat: no-repeat; background-size: 36px 36px;}
    nav#social-media-links .social-media_link.instagram {background-image: url(images/social-media-icons/instagram.svg); background-repeat: no-repeat; background-size: 36px 36px;}
    nav#social-media-links .social-media_link.youtube {background-image: url(images/social-media-icons/youtube.svg); background-repeat: no-repeat; background-size: 36px 36px;}
    nav#social-media-links .social-media_link.bluesky {background-image: url(images/social-media-icons/bsky.svg); background-repeat: no-repeat; background-size: 36px 36px;}
    nav#social-media-links .social-media_link.linkedin {background-image: url(images/social-media-icons/linkedin.svg); background-repeat: no-repeat; background-size: 36px 36px;}
    #footer-search-and-socials {margin-bottom:20px; width:100%; display:flex; flex-direction:column; text-align:center;}
    #footer-wrapper nav#social-media-links {order:1; margin-bottom:20px;}
    #footer-wrapper #footer-search {order:2;}

    @media screen and (min-width:920px) {
        #footer-search-and-socials { justify-content:center; wrap:nowrap; flex-direction:row;}
         #footer-wrapper nav#social-media-links {order:2; margin-bottom:0;}
        #footer-wrapper #footer-search {order:1;}
         #header-wrapper nav#social-media-links {justify-content:flex-end; }
    }

/* 9. Main media queeries =============================================================== */     
    .home .page-content, .home .entry-content, .home .entry-summary {margin: 30px 0 40px 0 ; padding:40px; border-radius:10px; background: white; } 
    @media screen and (min-width:1366px) { .home .page-content, .home .entry-content, .home .entry-summary {margin: 20px 0 20px 0 ; padding:30px;  }}
    main#primary {margin: 30px auto 40px auto ; padding:20px; border-radius:10px; background: white;}
    .home main#primary {border-radius:0; padding:0 10px 40px 10px; background:transparent;} 
    @media screen and (min-width:1366px) { 
    #content-wrapper {padding:20px;}
    main#primary {margin: 30px auto 40px auto ; padding:40px; border-radius:10px; background: white;}
    .home main#primary {border-radius:0; padding:0 40px 40px 40px; background:transparent;} }
    /* Header Wrapper */
    #header-wrapper {max-width:100%;}
    @media screen and (min-width:1920px) { #header-wrapper {max-width:80%; margin: 0 auto 0 auto;}}  
    /* Header Wrapper */
    #footer-wrapper {padding:0 20px 100px 20px;}
    @media screen and (min-width:1920px) { #footer-wrapper {max-width:80%; margin: 0 auto 0 auto;}} 
    /* Constrained */
    .constrained {width:100%; margin: 20px auto 20px auto;}
    @media screen and (min-width:549px) { .constrained {width:100%;} }     
    @media screen and (min-width:920px) { .constrained {width:100%;} }
    @media screen and (min-width:1366px) { .constrained {max-width:1040px;} }
    @media screen and (min-width:1920px) { .constrained {max-width:1140px;} }
    /* Front Page Nav Blocks */
    #front-page-nav_blocks .front-page-nav_block  {  flex-basis:100%;}
    @media screen and (min-width:768px) { #front-page-nav_blocks .front-page-nav_block {flex-basis:49%; aspect-ratio : 1 / 1;} }
    @media screen and (min-width:960px) { #front-page-nav_blocks .front-page-nav_block {flex-basis:49%; aspect-ratio : 1 / 1;} }  
    /* Footer Logos */
    #footer-logofest .footer-logofest_logo {width:120px; height:auto; margin:0 6px 20px 6px; }
    @media screen and (min-width:768px){ #footer-logofest .footer-logofest_logo {width:140px; height:auto; margin:0 10px 20px 10px; } }
    /* Archive list */
    .category-list_item {display:flex; justify-content:space-between;}
    .category-list_content {flex-basis: 78%; margin-bottom:20px; border-top: solid 1px var(--soft_text); padding-top:20px;}
    .category-list_thumb {flex-basis:20%; height:auto; margin-right:20px;}
    @media screen and (max-width:600px){  .category-list_item {display:flex; flex-direction:column;  flex-wrap:wrap;}}
    @media screen and (max-width:600px){ .category-list_thumb { flex-basis: 100%; height: auto; margin-right: 0; } }
    @media screen and (max-width:600px) { .category-list_content {  flex-basis: 100%; margin-bottom: 20px; border-top: none; padding-top: 0; } }        
    /* Social Media Links */
    @media screen and (min-width:960px) {
    nav#social-media-links .social-media_link { width: 42px ; height: 42px; }    
    nav#social-media-links .social-media_link a{width: 42px ; height: 42px; }
    nav#social-media-links .social-media_link:hover {background-color:var(--cta);}
    nav#social-media-links .social-media_link.facebook {background-size: 42px 42px; }
    nav#social-media-links .social-media_link.ex {background-size: 42px 42px;}
    nav#social-media-links .social-media_link.instagram {background-size: 42px 42px;}
    nav#social-media-links .social-media_link.youtube {background-size: 42px 42px;}
    nav#social-media-links .social-media_link.bluesky {background-size: 42px 42px;}
    nav#social-media-links .social-media_link.linkedin {background-size: 42px 42px;}}   
        
/* 10. Sandbox =========================================================================== */