/*
Theme Name: Twenty Twenty One Child Theme
Theme URI: https://example.com
Description: A child theme for Gifford Golf Club.
Author: Bill Dew
Author URI: https://giffordgolfclub.co.uk/
Template: twentytwentyone
Version: 1.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
*/

/* Theme TwentyTwentyone removed heading images in Customise
 * and any images put there obliteratted site branding 
 * (hence the changed template).
 *
 * Also - it is a single column theme so we needed a method to have
 * images in the side margion.  See Side images below
 *
 * Also, lost widget area in footer so our RED notices have stopped
 *
 * Finally, it used css var parameters which we can change in :root - neat.
*/


:root {   /* NB cpanel does not recognise these variables */
    --branding--logo--max-width: 100%;  
    --branding--logo--max-width-mobile: 100%;
    --branding--logo--max-height; 150px;
    --global--font-size-page-title: 3rem;
    --global--spacing-vertical: 10px;
    --primary-nav--padding: 8px;
    --global--color-background: #d7e2e1;
}
/* this should alter the width of the text area (was 8 * )	
@media only screen and (min-width: 822px) {
:root {
	--responsive--aligndefault-width: min(calc(100vw - 4 * var(--global--spacing-horizontal)), 610px);
	}
} */
/* it didn't work! Now use plugin Options-for-Twenty-Twentyone 		*/

body {font-size: 1.175rem;}

/* specify the default link styles first 
 * (NB order of :link, :visited :hover and :active is important, and 
 * the more specific selection overides. eg .site-branding a:link will
 * override .site-branding a)
*/
.site-branding a:link,
.entry-content a:link, .comment-content a:link, 
.entry-content a:visited, .comment-content a:visited {text-decoration: none; color: #055cff; box-shadow: none;}
.entry-content a:hover, .comment-content a:hover,
.entry-content a:active, .comment-content a:active {text-decoration: underline; color: #055cff;}

/* the following should stop iphone changing phone no. to a link; but no
a[href^=tel] {
   text-decoration:inherit;
   color: inherit;
}
*/

/* 
 * heading area
*/

/* For normal pages we use footer1.jpeg  */
.site-header {max-width: 100%;} 
#masthead  { 
    background-image: url("/wp-content/uploads/2018/07/footer1.jpeg");   
    padding-top: 110px; 
    background-position: bottom;
    background-repeat: no-repeat;
}
/* for the front page was use the  .home class */
.home #masthead  { 
    padding-top: 20em;   /* depth of image */
    background-image: url("/wp-content/uploads/2021/01/head1-17.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;       /* this gives 100% width */
}

/* When we switched to theme 2021 - I had to move branding 
 * below header image in site-header.php */

/* Branding & navigation */
#GGCbranding {
    position: sticky;
    top: 0;
    z-index: 7;  
    max-width: 100%;
    margin: auto;
    height: 4em;
    border-bottom: double;
    background-color: var(--global--color-background);
    opacity: 0.85;
    color: firebrick;
}
/* these 2 lines make navigation easier when logged in  */
.admin-bar .primary-navigation > .primary-menu-container {padding-top: 1em;}
#wpadminbar {opacity: 0.75;}


/* When we switched logo GGClogo was in site-heading.php 
 * but with plugin Options-for-Twenty-Twentyone logo is specified there - hence the dual specs 
 * (thought this would fix Twitter - but found that logo is also in the Twitter profile )
*/

/* plugin Options-for-Twenty-Twentyone could replace much of the following, maybe  */

.GGClogo, .site-logo {
    margin-left: 2%;
    margin-top: 8px;
    float:left;
    height: 50px;
    width: 50px;
}

.site-branding  { 
    float: left;
    color: firebrick;
    margin-left: 4%;
}
.site-branding h1 { 
    font-size: 2rem;
    font-weight: bold;
    color: firebrick;
}
.site-branding  a:link {  /* the iphone changes tel no to a link */
    font-size: 2.125rem;
    font-weight: bold;
    color: firebrick;  
}
/*.site-description {color: firebrick;}  */

.site-title {
    font-weight: 900;
    color: firebrick;    
}
#site-navigation { 
    padding-top: 0.5em;
    float: right;
    margin-right: 10%;
}
#site-navigation a {
    color: firebrick;
}
@media screen and (max-width: 1024px) {   
    .site-branding {margin-left: 1rem;}
    .site-branding h1 { font-size: 1.7rem;}
    .site-branding a:link { font-size: 1.7rem;}
    #site-navigation { margin-right: 1rem;}
    .site-description {font-size: 80%;}
    .entry-title {font-size: 90%;}
    .GGCalertred {line-height: 2rem; padding-left: 1em;}
}
@media screen and (max-width: 828px) {   /* iphone landscape */
    #GGCbranding {height: 3.5rem;}
    .site-branding {margin-left: 1rem;}
    .site-branding {font-size: 0.8rem;}
    .main .site-branding h1 { font-size: 0.8rem;}
    .site-description a:link { font-size: 0.8rem;}
    #site-navigation { margin-right: 0%; padding-top: 0;}
    .site-description {font-size: 80%; line-height: 70%; color: pink;}
    .entry-title {font-size: 60%;}
    .GGClogo, .site-logo {height: 40px; width: 40px;}
}
@media screen and (max-width: 768px) {   /* iphone portrait */
    #GGCbranding {height: 3rem;}
    .site-branding {margin-left: 1rem;}
    .home .site-branding {padding-top: 0.5rem;}
    .site-branding h1 { font-size:1rem;}
    .site-branding a:link { font-size: 0.8rem;}
    #site-navigation { margin-right: 0%; padding-top: 0;}
    .site-description {font-size: 0.7rem; line-height: 60%; }
    .entry-title {font-size: 50%;}
   .GGClogo, .site-logo {height: 30px; width: 30px; margin-top: 7px;}
}

@media screen and (max-width: 450px) {   /* iphone se portrait */
    .GGClogo, .site-logo {display: none;}
}

/* remove toggle switches from mavigation - too obscure!  */
.primary-navigation .primary-menu-container > ul > .menu-item > a + .sub-menu-toggle {display: none;} 

.site-main {padding-top: calc(4 * var(--global--spacing-vertical));}


/* Side images
 * As before, we specify side images/menu on first line of each page
 * but to be compliant with the Gutenberg editor which screws up
 * old style <div class=GGCsideimage>[ggc-featureimage id=6573]</div>
 *
 * We now use the shortcode [on-the-side imageid=6573 templateid=7403]
 *
 * As before, we need to add {display: inline-block} to any <h> that needs
 * to overlap side images/menu and shortcode like [aiec 
 *
 * Since theme 2021, we have also used <section> blocks
 * But again, for Gutenberg, we now use [section-on] and [section-off]
 *
 * <sections> use a contrasting background colour with the following 
 * box class which needed {box-sizing: content-box;} so that the contrast
 * could step outside the normal column width.
 *
*/
.box {
    box-sizing: content-box;
    margin-left: -1rem;
    margin-right: -1rem;
    padding: 1rem 1rem 0.5rem 1rem;
    background-color: white;
    -webkit-border-radius: 10px;
    -moz-border-radius:    10px;
    border-radius:         10px;  
    
    -webkit-box-shadow:0px 5px 10px #888;
    -moz-box-shadow:0px 5px 10px #888;
    box-shadow:0px 5px 10px #888;
}  
.GGCbox {    /* previous GGCbox still ok, but stays within the column */
    -webkit-box-shadow:0px 5px 10px #888;
    -moz-box-shadow:0px 5px 10px #888;
    box-shadow:0px 5px 10px #888;
    -webkit-border-radius: 10px;
    -moz-border-radius:    10px;
    border-radius:         10px;
    margin: 0 auto;
}

/* Notices  on the front page */
.frontpageblog {
    font-size: 90%;
}
.GGC-notices {
    border-left: 10px solid #d0d0d0;
    padding-left: 20px;
}

/*
 *      side images
*/
.GGCsideimage {          
    font-size: 80%; 
    padding-left: 16px;
    padding-right: 16px;
    border-width: 1px;
    float: left;       /* ignore msg in editor "can't be used with inline"  */
	display: inline;   /* to let other blocks to flow past */
}
figcaption.wp-caption-text {
	font-size: 80%;  
	font-style: italic;
	text-align: left;
	margin-bottom: 15px;
	width: 200px;
}

/*
 * changes since twentyseventeen
*/
 
figure.gallery-item {
    padding-right: 16px;
}

/* restore top line of tables */
.easy-table, th:first-child, tr:first-child, th {border-top: 1px solid;}

/* 
 * headings
*/

.entry-title {letter-spacing: 0.08rem;}

/* h1 is used by the 2021 theme for front-page title only
 * h2 is used by us for section headings on front page
 * h3 is used by us within sections
 * h2 and h3 need to overlap a side image.  
 * See also inline comments.
*/

h2 {
	color: firebrick; 
    font-size: 25px;	
    font-weight: bold;	
	letter-spacing: 0.2em;
	margin-bottom: 8px;
	display: inline-block;  /* to flow past GGCsidemage  */
}

h3 {
    color: darkblue;
    font-size: 20px;	
    font-weight: bold;
    display: inline-block;  /* to flow past GGCsidemage  */
}

h3.blockmode {              /* in case we need this  */
    color: darkblue;
    font-size: 20px;	
    font-weight: bold;
    display: block;
}

h4 {                        /* used for Related Pages heading */
    font-size: 18px;	
    font-weight: 600;
    color: darkgoldenrod;
	display: inline;        /* to flow past main text  */
}

h6 {                        /* used only in Notices */
    color: blue;
    font-size: 120%;	
    font-weight: bold;
    padding: 0;
	margin: 0;
	display: inline-block;  /* to flow past GGC-sideimage  */
}

/* Theme 2021 removed page title from front page !!!  
 * so added this class for the opening word(s)
*/
.illumination {
    font-size: 130%;		
	text-decoration: bold;
	color: blue;
	line-height: 110%;
	padding-right: 2em;
	display: inline;
	float: left;
}
.illumination::first-letter {
  font-size: 110%;
  vertical-position: sub;
}

/* add space before 2nd and subsequent paragraphs in entry-content only
 * because of inconsistent branding in 2021 theme
*/
.entry-content p + p {
    margin-top: 8px;
}

.entry-content p {line-height: 150%;}

.greennote {
	color: darkgreen;
	font-size: small;
}
.red {color: red;}

/* narrow down Sidemenu */
div.relatedpages ul {padding-left: var(--global--spacing-horizontal);}

/*
 * Remove side image and move side menu on small screens 
*/
/* Side menu, images and Bottom menu */
@media screen and (min-width: 1120px) { 
    .bottom-menu {display: none;}
}
@media screen and (max-width: 1120px) { 
    .GGCsideimage {display: none;}
}

/*
 * Bottom of page
*/
.widget-area {                  /* too much white space here */
    margin-top: calc(3 * var(--global--spacing-vertical));
}
/* Red Alerts no longer works, since widgets moved from footer area
.GGCalertred { 
    font-weight: 600;
    font-size: 0.875rem;
    line-height: 3em;
    vertical-align: middle;
    padding-left: 2em;
    background-color: lightpink;
    border-top: 1px solid red;
}
*/
.site-footer { border-top: double firebrick;}
.site-footer { max-width: 100%; height: 0;} 
.site-footer .site-info {border: none;}
.site-footer .site-name {display: none;}
.site-footer .powered-by {display: none;}
.site-footer .privacy-policy {display: none;}

/* 
* Posts with cat=promotions - selected by [loop] in Welcome page 
* the box now replaced by <section class="box">
*/
/* 
.GGCpromotions { 
    max-width: 100%;
    padding: 1em;
    -webkit-box-shadow:0px 5px 10px #888;
    -moz-box-shadow:0px 5px 10px #888;
    box-shadow:0px 5px 10px #888;
    -webkit-border-radius: 10px;
    -moz-border-radius:    10px;
    border-radius:         10px;
	margin-left: 			0;  
    background: -webkit-linear-gradient(white, lavender); 
    background: -o-linear-gradient(white, lavender); 
    background: -moz-linear-gradient(white, lavender); 
    background: linear-gradient(white, lavender); 
}
@media screen and (min-width: 48em) { 
	.GGCpromotions {margin-left: -55%; }  
}
*/

.GGCpromotions h5 {
    padding-left: 0;
    color: firebrick;
}

/* this is used within Promotions Notices for the thumbnails */
.GGCfloatL {
   float: left;
   padding: 8px 8px 8px 0px;   /* top ri bot left */
}

/* intended for section-notices for excerpts, but not ok on iphone  */
.GGCfloatR {
   float: right;
   padding-right: 5px;
}
/*
* Finally, our sexy link buttons.  Just code <a class="button1"  etc.
*/
a.button1 {
    line-height: 120%;
    padding: 0px 7px 0px 0px;
    margin-bottom: 0;
    font-size: 14px;    /* increased from 12 when BRS link added */
    font-weight: 400;
    text-align: center;
    text-decoration: none;
    color: black;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-image: none;
    background-color: white;
    background: -webkit-linear-gradient(white, lightgray); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(white, lightgray); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(white, lightgray); /* For Firefox 3.6 to 15 */
    background: linear-gradient(white, lightgray); /* Standard syntax */
    border: 1px solid black;
    border-radius: 8px
}
a.button1:active {   /* invert gradient if clicked  */
    background: -webkit-linear-gradient(lightgray, white); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(lightgray, white); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(lightgray, white); /* For Firefox 3.6 to 15 */
    background: linear-gradient(lightgray, white); /* Standard syntax */
}