@charset "UTF-8";
/*=============================================================================*/
/*                ** FOREST WALKERS WEBSITE **                                 */
/*                                                                             */
/*     Cascading Style Sheets  CSS  -   Home page view                         */
/*                                                                             */
/*              This view has four sections:                                   */
/*                                                                             */
/*  1) Home page header (club logo, information text and FLUCCS logo)          */
/*  2) Home navigation Bar Menu                                                */ 
/*  3) Home View Main section                                                  */
/*  4) Home page footer (club logo, information text and Heart Fundation logo) */
/*  5) CSS media queries for responsive layout (laptop / mobile)               */ 
/*                                                                             */
/*=============================================================================*/ 
/* 30/08/2021 -   Ver 03.00  Support responsive/adaptive design (phone etc.).  */
/*                          Refer to "styleDocument.css".                      */
/* 14/11/2022 -   Ver 05.00  Support for extended  header: "Sydney Aus."       */
/*                           (location).                                       */
/* 20/11/2022 -   Ver 06.02   GOOGLE Search Console Mobile Usability issues    */
/*=============================================================================*/ 
.container {
  width: clamp(65vw, 1000px, 100vw);     /* This is the only setup that does what I need!!! */
  margin: auto;                          /* To display in the width centre on large screen */
}

/*======================================================================*/
/*  1) Home page header (club logo, information text and FLUCCS logo)   */
/*======================================================================*/  
#home_view_header_container {  
  padding-top: 0;
  display: grid;
  grid-template-columns: 1fr 9fr 2.5fr;
  grid-template-rows: repeat(4, auto);
  grid-template-areas: 
        "logo club flogo"
        "logo info flogo"
        "logo info flogo"
        "sep1  sep1  sep1";
}
.banner {
  background-color: #639c19;
  color: white; 
  padding-top: 6px; 
  padding-bottom: 10px; 
}
#logo {
  grid-area: logo;
  padding-left: 2vw;
  padding-right: 1vw;
 }

 #club {
  grid-area: club;
  padding-top: 15px;  
  padding-bottom: 0;   
  padding-left: 2vw;  
  font-size: clamp(24px, 3.5vw, 4.5vw);   /* Ver 05.00  */   
 }

 #location {          /* Ver 05.00  */                
  padding-top: 0; 
  padding-right: 0.2vw;
  padding-left: 4px;
  font-size: clamp(8px, 2vw, 3vw);
  font-style: italic;
  overflow-wrap: break-word
}
#flucss {
  grid-area: flogo;
  padding-top: 10px;
  align-items: start;
}

#fluccsLogo_normal {
  Display: block;   /* Show standard Flucss logo */
}
#fluccsLogo_small {
  Display: none;   /* Hide small Flucss logo */
}

#clubinfo {
  grid-area: info;
  padding-top: 0; 
  padding-right: 0.2vw;
  padding-left: 4px;
  font-size: clamp(10px, 1.6vw, 16px);
  font-family: Helvetica, Arial, sans-serif;
}
#banner_end_separator {
  grid-area: sep1;
}
.clubname {
  font-weight: bold;
  font-variant: small-caps;
  color: #ffffff;
  text-shadow: 4px 4px  #919191;
}

/*==================================================================*/
/*  2) Navigation Bar Menu  grid                                    */
/*------------------------------------------------------------------*/  
#navbar {
  display: grid;
  justify-content: left;
  align-content: center;
  grid-auto-flow: column dense;
  grid-template-rows: none;
}
/*------------------------------------------------------------------*/ 
/*   Home view Navigation Bar                                       */
/*------------------------------------------------------------------*/   
nav {
  padding-right: 0;
  padding-top: 4px;
  padding-bottom: 3px;

  margin-right: 0;
  background: #2e805a; 
}

/* Change the bacground color of links on hover */
nav a:hover {
  background-color: #a1c2bb;
  font-weight: bold;
  color: navy;
}
/*------------------------------------------------------------------*/
/*   Navigation bar main menu  list                                 */
/*------------------------------------------------------------------*/  
nav ul li {
  float: left;
  position: relative;      /* To align vertically */
  list-style: none;
  margin-left: 1.4vw;
  margin-bottom: 2px;
}

/* Style the links inside the navigation bar */
nav ul li a {
  display: block;
  list-style: none;
  text-decoration: none;
  color: #f2f2f2;
  text-align: center;
  padding-top: 8px;
  padding-bottom: 8px;
  padding-right: 12px;
  padding-left: 12px;
  font-size: clamp(8px, 1.5vw, 12px);
  font-weight: bold; 
  border: 1px solid #bd8c23;
  border-radius: 10px;
  background: #448868;
 }

/*------------------------------------------------------------------*/
/*   Navigation bar main menu dropdown menu list                    */
/*------------------------------------------------------------------*/  
nav ul li ul {
  display: none;
  position: absolute;
  border-radius: 10px;
  background: #2e805a;
  padding-right: 4px;
  padding-left: 4px;
  margin-top: 0px;            /*  Required - otherwise cannot select item */
  opacity: 0.92;              /*  A little transparancy  */
  z-index: 10;                /* Force it to  be in front of its navigation bar item - */
                              /* - whenever the navigation bar is is contracted to two rows */
  }

 nav ul li:hover ul {
  display: block;
  }

nav ul li ul li {

  padding-top: 4px;
  padding-bottom: 4px;
  padding-left: 0px;
}
nav ul li ul li a {                   /* Sub menu link item */
  font-size: clamp(8px, 1.5vw, 12px);
  width: clamp(9px, 12vw, 12vw);     /* Sub menu link item */
  color: black;
  background: lightgrey;
  border: none;
  border-radius: 5px;
}
nav ul li ul li a:hover {
  font-weight: bold;
  background: white;
}    
/*==================================================================*/

/*==================================================================*/
/*  3) Home View Main section                                       */
/*------------------------------------------------------------------*/  
#home_view_main_container {  
  display: grid;
  background-color: lightgray;
  color: black; 
  grid-template-columns: 1fr 12fr 5.5fr;
  grid-template-rows: 2px 6vh auto 2px auto;
  grid-template-areas: 
        "sep2  sep2 sep2"
        "welcome welcome joinhdr"
        "welcome welcome jointxt"
        "sep3  sep3 sep3"
        "hflogo hftext hftext";
}     

#main_start_separator {
  grid-area: sep2;
}
#welcome {
  grid-area: welcome;
  padding-right: 1vw;
 }
#mainImage {
  width: 100%;
  max-width: 800px;
  height: 100%;
}
#joinHdr {
  grid-area: joinhdr;
  padding-top: 2vh;
  font-size: clamp(16px, 2.3vw, 8rem);
  font-weight: bold;
  text-align: center;
}
#joinTxt {
  grid-area: jointxt;
}
#sideinfotext {
  display:block;
  margin-left: 1vw;
  margin-right: 2vw;
  margin-top: 2vh;
  font-family: DejaVu Sans Mono, monospace;
  font-size: clamp(12px, 1.8vw, 1.2rem);
  line-height: 1.4;
  text-align: left;
  font-style: italic;
}
#main_end_separator {
  grid-area: sep3;
} /*----------------------------------------------------------------------------*/


/*==============================================================================*/
/*  4) Home page footer (club logo, information text and Heart Fundation logo)  */
/*------------------------------------------------------------------------------*/  
.footer {
  background-color: #cfa79e;
  color: black; 
  padding-top: 5px; 
  padding-left: 0.4vw;
  padding-bottom: 5px; 
}
#hflogo {
  grid-area: hflogo;
}
#hftext {
  grid-area: hftext;
 }
#hfinfotext {
  display:block;  
  padding-left: 1vw;
  margin-right: 2vw;
  font-size: clamp(0.7rem, 1.6vw, 1rem); 
}

#hfimage {
  width: 40px; 
  height: 40px;
} /*----------------------------------------------------------------------------*/

/*==============================================================================*/
/*  5) CSS media queries for responsive layout (laptop / mobile)                 */
/*------------------------------------------------------------------------------*/  
@media screen and (max-width: 1440px) {    /* Apply when screen width is 1440px or less - e.g. Laptop / tablet */
  #home_view_main_container {  
    display: grid;
    background-color: lightgray;
    color: black; 
    grid-template-columns: 1fr 10fr 8fr;
    grid-template-rows: 2px 6vh auto 2px auto;
    grid-template-areas: 
          "sep2  sep2 sep2"
          "welcome welcome joinhdr"
          "welcome welcome jointxt"
          "sep3  sep3 sep3"
          "hflogo hftext hftext";
  }  
  nav ul li a {       /* Style the links inside the navigation bar    #06.02 */          
    margin-bottom: 3px;
    margin-right:  1px;
    margin-left:   1px;
    }
  #mainImage {      /* Try to fit the all view in non-full screem display. #06.02 */     
    width: 98%;
  }

      
} /*----------------------------------------------------------------------------*/

@media screen and (max-width: 576px) {    /* Apply when screen width is 576px or less e.g Mobile phone */
  #home_view_header_container {  
    display: grid;
    grid-template-columns: 3fr 1fr;
    grid-template-rows: repeat(4, auto);
    grid-template-areas: 
          "club flogo"
          "info info"
          "info info"
          "sep1  sep1";
  }      
  #home_view_main_container {  
    display: grid;
    background-color: lightgray;
    color: black; 
    grid-template-columns: 50px 1fr 1px;
    grid-template-rows: auto;
    grid-template-areas: 
          "sep2 sep2 sep2"
          "welcome welcome welcome"
          "joinhdr joinhdr joinhdr"
          "jointxt jointxt jointxt "
          "sep3 sep3 sep3"
          "hflogo hftext hftext";
  }   
  #mainImage {
    width: 100%;
  } 
  #logo {
    Display: none;  /* Not have enough realestate to show our logo on sall size */         
  }  
  #club {
    font-size: clamp(4vw, 3.5vw, 4.5vw);   /* Ver 05.00  */   
   }
  #fluccsLogo_normal {
    Display: none;  /* Hide standard Flucss logo */
  }
  #fluccsLogo_small {
    Display: block; /* Show small Flucss logo */
  }
  nav ul li a {       /* Style the links inside the navigation bar    #06.02 */              
  margin-bottom: 6px;
  margin-right:  2px;
  margin-left:  2px;
  }
  #sideinfotext {
    width: 100vw;
    padding-bottom: 1vh;
  }
} /*-------------------------------------------------------------------------*/ 

/*==================================================================*/