/*!
Theme Name: sph CHILD
Author: Lunaria Ltd
Author URI:  https://lunaria.co.uk
Template: sph
Description: Scotland's Print Heritage
Version: 1.0.11
Text Domain: sph_child
*/

/*  Index
1.  Import Fonts
2.  Root Styles
3.  Media Queery - break points (reference only)
4.  Basic Structure and Layout
5.  Typography
6.  Other default HTML tags
7.  Navigation
8.  Images 
9.  Bespoke elements
10.  Plugin Tweaks
11. Sandbox/sketch pad
12. Sketchpad/sandbox
*/

/* 1 Import Fonts ----------------------------------------------------------------
    Google variable font 'Open Sans'imported via link in header.php.
    Text weights from 100 to 1000 are available
    */

/* 2. Root styles ----------------------------------------------------------------*/

:root {  
    --primary:"Open Sans", arial, sans-serif;
    --secondary: "EB Garamond", Garamond, serif;    
    /* Main Colors */
    --navy:#002449;
    --maroon:#821f48;
    --sky: #4FA2F6;  
    --text: #4f545a;    
    --light: #949696;
    --warning-red: #c01515;   
    /* Navigation Colors */
    --link: #821f48    ;
    --hover: #8AC1F9;
    --focus: #28FF52;
    --active: #28FF52;
    --visited: #cccccc;
    /* Basic transitions */
    --fade-text:  color 500ms ease;
    --fade-background:  background-color 500ms ease;
    --fade-opacity:  opacity 500ms ease;
    /* Base font */
    font-size:16pt;
    line-height: 1.4;  
}

/* 3. 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) ;
    */

/* 4. Basic Structure and Layout =========================================================== */
    * {box-sizing: border-box;}
    @media screen and (max-width:767px) {.desktop{display:none;} }    
    @media screen and (min-width:768px) { .mobile {display:none;} }
    body { margin:0; padding:0; font-size:1rem; background-color:var(--navy);}
    #page{position:relative;}
    #content-wrapper {padding-top:30px;}
    /* Header */
    #header-flex{display:flex; flex-direction:column; flex-wrap:wrap; background-color:white;border-bottom:1px solid var(--navy);}
    #header_wrapper{ flex-basis:100%; padding:20px;  }
    #header_wrapper {order:2; }
    #site-navigation{order:1;  padding:0 ;}    
    @media screen and (min-width:768px) { 
        #header_wrapper {order:1;}
        #site-navigation{order:2; padding:0 20px 20px 20px; margin-top:30px;}
    }    
    #masthead.site-header{display:flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between;} 
    #header-nav_block {width:120px; order:2; display:flex; flex-direction:column; justify-content: space-between; } 
    nav#big-nav-buttons {display:flex; flex-direction:column; flex-wrap:wrap; }
    .big-nav-button a { text-align:center; border: solid 1px var(--navy); background-color:white; display:block; font-weight:700; width:120px;  height:48px; font-size: 11pt; line-height:1.1; color:var(--navy); transition:  var(--fade-background); transition:var(--fade-text);} 
    .big-nav-button:first-child {margin-bottom:10px;}        
    .big-nav-button a:hover { border: solid 1px var(--maroon);  background-color:var(--maroon);  border: solid 1px var(--navy); color:white; text-decoration:none;  color:var(--navy);} 
    .big-nav-button:hover a {color:white;}
    .big-nav-button.newsletter-button a{padding-top:6px;}       
    .big-nav-button.donate-button a{padding-top:14px;}    
        .home h1.entry-title{display:none;}   
    .site-branding { order:1; max-width: 260px; margin-right:40px;}
    #header-logo img {width:100%;}
    h1.site-title {display:none;}
    #page_wrapper {background-color:white;}
    main.site-main{max-width:1200px; margin:0 auto 0 auto; padding:30px 20px 30px 20px;}   

    @media screen and (min-width:768px) {
        .site-branding { order:1; max-width: 360px;}
        #header-nav_block {flex-basis:70%; order:2; display:flex; flex-direction:column; justify-content: space-between; } 
        nav#big-nav-buttons {display:flex; flex-direction:row; flex-wrap:nowrap; justify-content:flex-end;}
        .big-nav-button a{margin-left:20px; flex-basis:180px; font-size: 14pt; height:80px;}
        .big-nav-button:first-child {margin-bottom:0;}
        .big-nav-button.newsletter-button a {padding-top:20px;} 
        .big-nav-button.donate-button a {  padding-top: 26px; }  
    }
   
/* 5. Typography =========================================================== */
    body {font-family: var(--primary); font-optical-sizing: auto; font-weight: 400 ; font-style: normal; color:var(--text);}
    h1,h2,h3 {font-family: var(--secondary); font-weight: 700;}
   
/* 6. Other default HTML tags  =========================================================== */

    /* A. Select the correct font */
    * strong {font-family: var(--primary); font-weight: 700;}
    h1, h2 {font-family: var(--secondary); font-optical-sizing: auto; font-weight: 100; font-style: normal;}     
    h3 { font-family: var(--primary);  font-weight:700; font-style: normal;}
    h4, h5 ,h6 { font-family: var(--primary);  font-weight:700; font-style: normal;}
    p, li {font-family: var(--primary); font-optical-sizing: auto; font-weight: 400; font-style: normal; font-size:14pt;}  
    /* A. Add sizes, line heights and spacing */
    h1 {  font-size:2.4rem; margin:0.25rem 0 0.25rem 0; line-height:1; }
    h2 {font-size:1.8rem; }    
    h3 {font-size:1rem;}
    h4, h5, h6 {  font-size:1.1rem;}
    p { margin-bottom: 1rem; line-height:1.6; }     
    blockquote p{ font-family: var(--secondary);  font-weight: 100; color:var(--maroon); padding:0 40px 0 40px; margin:0 30px 0 30px; font-style: italic; font-size:1.2rem; font-weight: 500; line-height: 1.1;  background-image: url(decoration/blockquote-open.svg), url(decoration/blockquote-close.svg) ; background-size: 42px 42px; background-position: top left, top right; background-repeat:no-repeat; text-align: center; }       
    @media screen and (min-width:768px)  {
        blockquote p { padding:0 40px 0 40px; margin:0 100px 0 100px; font-size:2rem; background-size: 28px 28px; font-weight: 100;}
    }  
    ul {padding:0; margin:0; list-style-type:none;} /* Remove browser formatting */
    li {padding-bottom:0.5rem; }
    #content-wrapper ul li { background-image: url(decoration/bullet.svg); background-position: top left; background-size: 20px 20px; background-repeat:no-repeat; padding-left:24px;}
    #content-wrapper ul li ul{ padding-top:10px;}
    #content-wrapper ul li li {background-image: url(decoration/bullet-sub-menu.svg);background-position: top left; background-size: 20px 20px; background-repeat:no-repeat; padding-left:24px;}
    pre {text-wrap:wrap;}
    sup {font-size:60%; padding-left:2px;}    
    
/* 7. Navigation =========================================================== */
    
    /* Note! Main Nav and Footer Nav are styled via the Mega Menu plugin */  
    a { text-decoration: none; font-weight:700; color:var(--link); }       
    a:hover { color: var(--hover); } 
    /* Sub menu widget */
    h2.widgettitle {display:none;}
    #header-widgets{}
    .header-widget-container {}
    #header-widgets ul.menu {list-style-type:none; display:flex; flex-direction:row; flex-wrap:nowrap; justify-content:flex-start; margin:20px 0 50px 0; padding:0;}
    #header-widgets ul.menu li {padding: 0 10px 0 10px;  border-left:  solid 1px var(--text); background-image:none;}
    #header-widgets ul.menu li:last-child {  border-right: solid 1px var(--text); }
    #header-widgets ul.menu li a {font-weight:400;}
    #header-widgets ul.menu {list-style-type:none; background-image:none;}
    /* Pagination */
    #pagination_block {padding-top:30px;  }
    #content-wrapper ul.pagination-links {display:flex; justify-content:center; margin-top:30px;}
    #content-wrapper ul.pagination-links li{background-image:none; list-style-type:none;  padding-left:5px; padding-right:5px; }
    #content-wrapper ul.pagination-links li.previous,  #content-wrapper ul.pagination-links li.next {display:none;}
    #content-wrapper ul.pagination-links li a{padding:5px 10px 5px 10px;  color:white; border: 1px solid var(--link); transition: var(--fade-background); font-weight:200; background-color: var(--link); }
    #content-wrapper ul.pagination-links li.active a{background-color:var(--light); color:#fff; border: 1px solid var(--text); opacity:0.5;}
    #content-wrapper ul.pagination-links li a:hover, #content-wrapperul.ppagination-links li.active a:hover { border: 1px solid var(--hover); background-color: var(--hover); color:var(--text); opacity:1;}
    #content-wrapper ul.pagination-links li.next, #content-wrapper ul.pagination-links li.previous{}
    /* Edit Posts and pages */
    .edit-post a{padding: 8px 10px 8px  32px;  color:white; font-size:0.6rem; border-radius:3px; background-color:var(--light); background-image: url(decoration/edit-post.svg); background-position: center left; background-size: 24px 24px; background-repeat:no-repeat; font-weight:400; 
    transition: background-color 500ms ease;}
    .edit-post a:hover {background-color:var(--text);}
     /* Tags list*/
    p.tag_list {font-size:0.8rem;}

    /* 8. 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;}
    #footer-logo img {width:180px; margin-left:auto; margin-right:auto;}
    /* Captions -------------- */
    .wp-caption {margin-bottom: 1.5em; max-width: 100%;}
    .wp-caption img[class*="wp-image-"] {display: block; border:solid 1pt var(--text); margin-left: auto;margin-right: auto;}
    .wp-caption .wp-caption-text { margin: 0.8075em 0; font-size: 0.8rem; background-color: var(--primary);}
    .wp-caption-text {border: 1px solid var(--light); font-size: 0.4rem; padding:5px 10px 5px 10px; }
    @media screen and (min-width:768px) {
        .wp-caption-text {font-size: 0.6rem; }
    }
        
/* 9. Bespoke elements =========================================================== */
    /* Front page - logo fest in the footers */
    #logo-fest_wrapper {width:100%; text-align:center; padding:30px; background-color:white; text-align:center;}
    #logo-fest {display:flex; flex-direction:row; justify-content:center}
    .logo-fest_logo img {margin:0 10px 0 10px; width:150px;}
    @media screen and (min-width:768px) {
        .logo-fest_logo img {margin:0 20px 0 20px; width:200px;}
    }

    #footer_wrapper {width:100%; text-align:center; padding:30px;}
    #site-info{margin-top:20px;}
    #site-info p{color:white; font-size:0.7rem; opacity:0.5; font-weight: 300;}
    #site-info a{color:white;  font-weight: 600; font-family: var(--primary);}
    #site-info a:hover{opacity:1;}
    /* Front page - 'Did you know? block in the footer */
    #on-this-day_block { text-align:center; max-width: 1200px; margin: 20px auto 30px auto; }
    #on-this-day_block .otd-content {padding:10px; border: 1px solid white; color:white; font-size:80%; font-weight:300; }
    .otd-content p.tag_list {display:none;}
    #on-this-day_block .otd-content h3 {font-size:1.8rem; margin:0;}
    #on-this-day_block .otd-content a {color:white; font-weight: 700; }
    #on-this-day_block .otd-content a:hover {color:white;}
    /* Front page - big navigation buttons */
    #front-page-nav_blocks {display:flex; flex-wrap:wrap;justify-content:space-between; margin:30px 0 0 0 ;}
    .front-page-nav_block { flex-basis:100%;   display: block; background-blend-mode: multiply; background-color: rgba(130,31,72,0.1); position:relative; margin-bottom:20px; transition:var(--fade-background);}
    @media screen and (min-width:768px){ 
    .front-page-nav_block { flex-basis:49%;  aspect-ratio : 1 / 1;} 
    }
    .front-page-nav_block { background-size: cover; background-repeat:no-repeat; } /* Background image is generated automatically */
    .front-page-nav_block:hover {background-color: rgba(130,31,72,0.3);}
    .front-page-nav_block .inner {width:100%;  aspect-ratio : 1 / 1; display:block; }
    .front-page-nav_title {position: absolute; bottom:0; left:0; background-image: url(decoration/nav-block-background.png); width:100%;  border-top:solid 5px white;}    
    .front-page-nav_block .front-page-nav_title h3 { margin:0; font-family: var(--primary); font-weight: 700 ; color:white; padding: 10px 30px 10px 10px; display:inline-block; background-size: 24px 24px; }
    .front-page-nav_block:hover .front-page-nav_title h3 {background-image: url('decoration/point.svg'); color:white; background-size: 24px 24px; background-position: right center; background-repeat: no-repeat;   }
    /* Front page News and Front Page Events*/
    #front-page-events, #front-page-news  { width:100%;}
    /* Front page news */
    #front-page-news { }
    .front-page-news_block {flex-basis:100%; background-color:#821f48e6;; transition: var(--fade-background); margin-bottom:20px;}
    .front-page-news_block:hover { background-color:var(--maroon) ;}

   

    .front-page-news_block .inner {display:flex; flex-wrap:nowrap; flex-direction:row; justify-content: flex-end; width:100%}
    .front-page-news_block .label {font-weight:700;}
    .front-page-news_image {border-right: 2px solid white; background-image: url(decoration/news-bck.png); background-size: cover; background-position-x: center;
        background-position-y: -100px; background-color: rgba(138,193,249,0.3); 
        background-blend-mode: multiply;  background-repeat:no-repeat; width: 30%; min-width: 30%; margin-right:15px; min-height:220px; }
    .front-page-news_content {flex-basis:70%;}
    .front-page-news_content h3.home-page-news-title {line-height:1.2; margin:0;  color:white; padding-right:5px;}
    h3.post-type { line-height:1.1; margin:30px  0  0 0; color:white; font-family: var(--primary); font-size:1.6rem; }
    a .front-page-news_content  h3.home-page-news-title  {color:white;}
    .front-page-news_content p {line-height:1.1; margin:10px 0 10px 0; font-size:90%; color:white; padding-right:5px; }
    .front-page-news_content p.post-date { margin:0; font-size: 70%; font-weight:400; margin: 5px 0 15px 0 ;}	
    .front-page-news_content:hover p {color:white;}
    .front-page-news_content p .label {font-weight:700;}
    .front-page-news_content .read-more_link p {padding: 5px 26px 5px 0px; color:white; background-image: url('decoration/point.svg'); display:inline-block; background-size: 24px 24px; background-position: right center; background-repeat: no-repeat;}
    .front-page-news_content:hover .read-more_link p {color:white; padding: 5px 26px 5px 0px; background-image: url('decoration/point.svg'); display:inline-block; background-size: 24px 24px; background-position: right center; background-repeat: no-repeat;}
   
    @media screen and (min-width:1000px) 
    {
        .front-page-news_content .read-more_link p {padding: 5px 26px 5px 0px; color:transparent; background-image:none;}
        h3.post-type {font-size:1.4rem;  margin:10px  0  0 0; }
            #front-page-news {display:flex; flex-wrap:nowrap; justify-content:space-between; align-items:stretch;}
        .front-page-news_block {flex-basis:32%; margin-bottom:0;}
        .front-page-news_image { background-position-x: center;  background-position-y: center; width: 30%; min-width: 30%;  }
        .front-page-news_content {flex-basis:70%;}
    }

   
    /* Front Page Events*/
    .front-page-events_block {display:flex; flex-direction:row; flex-wrap:nowrap; width:100%; margin-bottom:20px; color:var(--navy); background-color:  rgba(138, 193, 249, 0.8); align-items:stretch; transition: var(--fade-background);  }
    .front-page-events_block:hover { background-color:var(--sky); }
    .front-page-events_block {margin-right:30px;}
    .front-page-events_image {flex-basis: 30%; display:block; background-size:cover; background-position: center; background-repeat: no-repeat; border: 1px solid var(--soft_text); border-right:solid 2px white; opacity: 0.8; transition: var(--fade-opacity);}
    .front-page-events_content {flex-basis: 60%; padding:20px 20px 20px 20px;} 
    .front-page-events_title  {flex-basis: 10%; display:flex; align-items:center;} 
    h3.home-page-events-title {font-size: 20pt; margin:0 0 7px 0 ;  line-height: 1; font-family: var(--secondary);}
    h3.home-page-events-title a {color: var(--navy);}

    .teaser-text {padding:10px 0 0 0; margin:0;}
    .home .post-teaser {padding: 15px 0 5px 0; margin:0; font-size:0.7rem; line-height:1.2;} 
    .home p.home-page-events-date {padding:10px 0 0 0 ; margin:0; font-weight:700; line-height:1.2;}
    .home p.home-page-events-date span.label {font-weight:400;}
    p.home-page-events-date {padding:5px 0 0 0 ; margin:0; font-weight:700; font-size:1rem;}
    p.home-page-events-date span.label {font-weight:400;}
    .front-page-events_block .read-more_link p {color: white; line-height:1; padding: 5px 28px 5px 0px; background-image: url('decoration/point.svg'); display:inline-block; background-size: 24px 24px; background-position: right center; background-repeat: no-repeat;}
    .front-page-events_block:hover .read-more_link p {color: white; background-image: url('decoration/point.svg'); display:inline-block; background-size: 24px 24px; background-position: right center; background-repeat: no-repeat;} 
    
    @media screen and (min-width:768px) 
    {
        .front-page-events_image{ flex-basis: 30%;}  
        .front-page-events_content {flex-basis: 60%; padding:20px 20px 20px 20px;} 
        .front-page-events_title  {flex-basis: 10%; display:flex; align-items:center;}       
        .front-page-events_block .read-more_link p {color: transparent; padding: 5px 28px 5px 0px; background-image: none;}
        h3.home-page-events-title {font-size: 32pt; } 
        p.home-page-events-date { font-size:1.4rem;} 
        .home .post-teaser {font-size:0.9rem;} 
    }
           
    /* Events page */
    .post.home-page-events-date {font-weight:700; font-size:1.4rem;}
    .post.home-page-events-date span.label {font-weight:400;} 
    /* Links page */
        
    #header-widgets .widget_nav_menu li {font-size: 12pt;}      
    
    .column { width:100% }

    @media screen and (min-width:960px) {
        #links_wrapper { display:flex; flex-direction:row; flex-wrap:wrap; justify-content: space-between; }
    .column { flex-basis:42%; }
    }

    p.link_url_text a { word-break: break-all; line-height:1; margin:0; padding: 5px 0 5px 0;}
    #links_wrapper p.teaser-text {padding:0 0 0 20px; line-height:1.2; margin:0; font-size:0.8rem;}
  
    /* Generic Archives*/
    body.archive .category-list.archive h2{margin:0; padding:0 }
    body.archive .category-list_item {padding-top:20px; padding-bottom:20px; border-bottom: solid 1px var(--light);  }
    body.archive .category-list_thumb img {width:100% !important; height:auto; border: solid 1px var(--light);}
    body.archive .category-list_content h3{margin-top:0;}
    body.archive .category-list_content h3 a, body.archive .read-more_link a {padding: 5px 30px 5px 0px; background-image: url(''); display:inline-block; background-size: 24px 24px; background-position: right top 9px; background-repeat: no-repeat;}
    body.archive .category-list_content h3 a:hover, body.archive .read-more_link a:hover {padding: 5px 30px 5px 0px; background-image: url('decoration/point-sky.svg'); display:inline-block; background-size: 24px 24px; background-position: right top 9px; background-repeat: no-repeat;}
    body.archive .category-list.newsletters .category-list_thumb img {width: 120px !important; margin-right:20px;}
    body.archive .category-list_content header { display:flex; flex-direction:row; align-items:flex-start; flex-wrap:nowrap; }
    h3.category-list_item_title {padding: 0 ; margin:0 0 12px 0; font-size: 1.4rem; line-height:1.1; font-weight:300;}
    h3.category-list_item_title a{font-weight:300;}
    .archive.tag h1.page-title {text-transform: capitalize;}
    .archive.tag h1.page-title::before {content: "Tag: "}
    .archive.category-otd p.teaser-text {display:none;}

    @media screen and (min-width:768px) 
   
    {
    body.archive .category-list_item {padding-top:20px; padding-bottom:20px; border-bottom: solid 1px var(--light); display:flex; flex-direction:row; justify-content:flex-start; align-items:flex-start; }    
    body.archive .category-list_thumb img {width:200px !important; margin-right:20px;}
    }

    /* Links page*/
    #links_wrapper {}
    #links_wrapper h2{border-bottom:1px solid var(--light); padding-bottom:10px;}
    #links_wrapper h3 {background-image: url(decoration/bullet.svg); background-position: top left; background-size: 20px 20px; background-repeat:no-repeat; padding-left:20px; margin:25px 0 5px 0; line-height:1.2;}
    #links_wrapper h3:hover {background-image: url(decoration/bullet_sky.svg); background-position: top left; background-size: 20px 20px; background-repeat:no-repeat; padding-left:20px; margin:25px 0 5px 0; line-height:1.2;}
    /* Projects page*/
    .category-list.projects {padding-top:50px;}
    .category-list.projects .category-list_item {border-top: 1px solid var(--light); padding: 10px 20px 20px 20px;}

    /* Search box in the footer*/
    #footer-search .search-form input.search-field {
        background-color: transparent;
        background-size: 30px 30px;
        background-image: url("decoration/search.svg");
        background-position: right center;
        background-repeat: no-repeat;
        color: white;
        font-size: 14pt;
        font-weight:400;
        width:160px;
        transition: width 600ms ease 0s, background-color 700ms ease 0s;
        border: solid 1px white;
        border-radius:3px;
        outline: var(--soft_text);
        cursor: pointer;
        margin: 20px 0 30px 0px;
        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 white;
        color: var(--text);
        background-size: 30px 30px;
        background-image: url("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("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;
    }   
  
/* 10. Plugin tweaks and styling ==================== */

    /* Woocommerce*/ 
    #content-wrapper .woocommerce ul.products li.product,  #content-wrapper .woocommerce-page ul.products li.product{background-image:none; padding-left:20px;}
    .woocommerce div.product .woocommerce-tabs ul.tabs li {background-image:none; padding-left:20px;}
    img.attachment-woocommerce_thumbnail {border:1px solid var(--light);}
    .woocommerce-product-gallery__image img {border:1px solid var(--light);}
    .woocommerce .wc-block-cart-item__image  img {border:1px solid var(--light);}   
    .woocommerce .woocommerce-tabs li.description_tab {background-image:none; padding-left:20px;}
    .woocommerce .single-product {}
    .woocommerce:where(body:not(.woocommerce-uses-block-theme)) ul.products li.product .price {color:var(--text) !important;}
    .woocommerce:where(body:not(.woocommerce-uses-block-theme)) ul.products li.product .price::before {content: "Price: ";}
    .woocommerce .woocommerce-Price-amount {color:var(--text) !important;}
    .woocommerce .woocommerce-Price-amount::before {content: "Price: ";}
    .woocommerce .wc-block-cart-item__prices::before {content: "Price: ";}    
    .woocommerce .single-product {margin-top:50px;}
    .woocommerce .product_meta {display:none;}
    .woocommerce .woocommerce-ordering {display:none;}
    .woocommerce #tab-description div {margin-bottom:1rem; font-size:0.8rem;}
    #content-wrapper .woocommerce .woocommerce-tabs li.description_tab {background-image:none; padding-left:20px !important;} 
    #content-wrapper .wp-block-woocommerce-cart li.wc-block-grid__product {background-image:none; padding-left:20px;}

    /* Contact form 7 */
    .wpcf7-form{margin-top:10px; }
    .wpcf7-form p.required-prompt {padding:0; line-height:1;}
    .wpcf7-form label {  color:var(--text); display:block;}
    .wpcf7-email, .wpcf7-text {font-size:14pt; color:var(--text); letter-spacing: 0.05em;  text-align:left; margin:0; width:60%; border:1px solid var(--light); padding:5px;background-color:#eee;}
    .wpcf7-email:hover, .wpcf7-text:hover {border:1px solid var(--text); color:var(--text); background-color:#eee;}
    .wpcf7-email:focus, .wpcf7-text:focus {border:1px solid var(--hover); color:var(--text);  box-shadow: none !important; outline: none; background:white;}
    .wpcf7-textarea {font-size:14px;  color:var(--text); letter-spacing: 0.05em;  text-align:left; margin:0; width:60%; border:1px solid var(--light); padding:5px; background-color:#eee;}
    .wpcf7-textarea:hover {border:1px solid  var(--text); color:var(--text);  box-shadow: none !important; outline: none; background-color:#eee;}
    .wpcf7-textarea:focus {border:1px solid  var(--hover); color:var(--text);  box-shadow: none !important; outline: none; background-color:white;}
    div.wpcf7-mail-sent-ok, div.wpcf7-validation-errors, div.wpcf7-acceptance-missing {padding:20px; font-size:18px; color:var(--text); background-color:white; border-radius: 5px; border:2px solid var(--warning-red) !important; margin: 2em 0 0.5em 0!important;}
    span.wpcf7-not-valid-tip {margin:10px 0 10px 0!important; color:var(--warning-red)!important; }
    input.wpcf7-submit{ float:left; cursor:pointer; margin:0; border-radius:5px; padding:5px 10px 5px 10px; background-color: var(--link); font-size:24px; color:white; border:none; transition: background-color 0.5s ease; }
    input.wpcf7-submit:hover {background-color: var(--hover);   }
    .wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.unaccepted .wpcf7-response-output, .wpcf7 form.payment-required .wpcf7-response-output {border-color: var(--warning-red);}
    .wpcf7 select.contact.list {font-size:14pt; padding:5px; border-radius:0;  border:1px solid var(--soft_text); box-shadow: none !important; outline: none;}
    .wpcf7 select.contact.list:hover{border:1px solid var(--link); color:var(--text); box-shadow: none !important; outline: none;}
    .wpcf7 select.contact.list:focus{border:1px solid var(--hover); color:var(--text); box-shadow: none !important; outline: none;}  

    /* 11. Sandbox/sketch pad =========================== */
    header.entry-header {display:flex; flex-direction:row; justify-content: flex-start; align-items:center; }
    header.entry-header  h1.entry-title {padding: 0;  margin:0; line-height:1;}
    header.entry-header .post-thumbnail img{width:200px; height:auto; padding:0; margin:0; line-height:0; border:1px solid var(--light); margin-right:30px;}
    .post.home-page-events-date {font-weight:700; font-size:1.4rem;}
    .post.home-page-events-date span.label {font-weight:400;}

    #header-widgets .widget_nav_menu li.current_page_item a {color:var(--light);}  
    ul#page-links {  }
    ul#page-links li { background-image:none; padding-left:0; display:inline-block; border-left:solid 1px var(--text); padding:0 20px 0 20px; color:var(--light);}