/*
Theme Name: Kinesiology with Kirstan
Theme URI: 
Author: Kirstan Leane
Author URI: kirstan.com.au
Description: A custom block theme built for JCP
Requires at least: 6.8
Tested up to: 6.8
Requires PHP: 5.7
Version: 1.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: kirstan-theme
Tags: 
*/

/* ------------------ GLOBAL STYLES ------------------ */



html {
    padding:0;
    margin:0;
    scroll-behavior: smooth;
    font-family:"LexendDeca", sans-serif;
    font-weight:400;
}
body {
   max-width: 1200px;
    margin: 0 auto;
    width: 100% !important;
    position: relative;
}
.wp-site-blocks > .entry-content {
    margin-top:0;
}
.wp-site-blocks > .wp-block-cover {
    margin-block-start: 0;
    margin-block-end: 0;
}
/*.post-template-post-landing-page .wp-site-blocks,
.post-template-default .wp-site-blocks,
.wp-singular .wp-site-blocks {
    padding-top:170px;
} */

body:not(.home) .wp-site-blocks {
    padding-top:0;
}

h1 {
    color: var(--wp--preset--color--darkest-green);
    font-size: 1.8em;
    line-height: 1.65em;
    font-family:"Domine", serif;
    font-weight:400;
}
h2 {
    color: var(--wp--preset--color--darkest-green);
    font-size: 1.4em;
    line-height: 1.95em;
    font-family: "Domine", serif;
    font-weight: 400;
}
h3 {
    color: var(--wp--preset--color--darkest-green);
    font-size: 1.2em;
    line-height: 2em;
    font-family:"Domine", serif;
    font-weight:400;
}
h4 {
    color: var(--wp--preset--color--darkest-green);
    font-size: 1.05em;
    line-height: 1.75em;
    font-family:"Domine", serif;
    font-weight:400;
}
p, ul, ol {
    color: var(--wp--preset--color--darkest-green);
    font-size: 1rem;
    line-height: 2.3rem;
    font-family: "LexendDeca", serif;
    font-weight: 400;
    letter-spacing: 0.03em;
    margin-block-start:16px
}
ol li {
    margin:10px 0;
}


@media screen and (max-width:800px)  {
 /*    h1 {
    font-size: 2em;
    }
    h2 {
    font-size: 1.8em;
    }
    h3 {
    font-size: 1.25em;
    }
    h4 {
    font-size: 1.1em;
    }
    p, ul, ol {
    font-size: 1rem;
    line-height: 1.8rem;
    }*/
}

.no-gap {
    gap:0 !important;
}
.flex-centre-vertical {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.img-cover {
    height: 100%;
}
.img-cover img {
    width: 100%;
  height: 100%;
  object-fit: cover; /* Fills the container and crops excess */
  object-position: center; /* Centers the image within the container */
}


a {
    color: var(--wp--preset--color--darkest-green);
    text-decoration:none;
    border-bottom:2px dotted var(--wp--preset--color--light-green);
}
a:hover,
a:active,
a:focus {
    color: var(--wp--preset--color--dreamy-blue);
    border-bottom:2px dotted var(--wp--preset--color--dreamy-blue);
}
.has-darkest-green-background-color a:hover,
.has-darkest-green-background-color a:active,
.has-darkest-green-background-color a:focus {
    color: var(--wp--preset--color--light-green);
    border-bottom:2px dotted var(--wp--preset--color--white);
}


a:has(img) {
   border-bottom:0;
}


iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
}


header a, 
header a:hover,
.wp-block-post-featured-image a {
    border:0;
}


/*  set the breakpoint of mobile navigation - 950px
and DON'T DISPLAY MENU ON DESKTOP, USING BUTTONS INSTEAD --------------------- */
    
@media screen and (max-width: 950px)  {
    .wp-block-navigation__responsive-container-open:not(.always-shown) {
        display: flex !important;
    }

   header .header-side-buttons {
       display: none !important;
   }
   
   .wp-block-navigation .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
        background-color: inherit;
        display: none !important;
        position: relative;
        width: 100%;
        z-index: auto;
    }
    header .is-layout-flex {
       /*  more space between header links for smaller screens  */ 
    gap: 1.5rem;
}
.wp-block-navigation__responsive-container-open {
    /*  style the mobile open menu button  */ 
        transform: scale(1.1);
        color: var(--wp--preset--color--darkest-green);
        border:1px solid var(--wp--preset--color--mid-green);
        background-color: var(--wp--preset--color--light-green-tint);
        padding: 5px 5px;
        border-radius: 10px;
        height: 46px;
        width: 46px;
}
.wp-block-navigation__responsive-container-open:hover {
    transform: scale(1.2);
    background: var(--wp--preset--color--mid-green) !important;
    color:#fff;
}

.wp-block-navigation-item a:hover {
    border-bottom:2px dotted var(--wp--preset--color--light-green);
}
.wp-block-navigation__responsive-container-close {
    background: var(--wp--preset--color--light-green-tint);
    border: none;
    color: var(--wp--preset--color--mid-green);
    cursor: pointer;
    margin: 0;
    padding: 0;
    text-transform: inherit;
    vertical-align: middle;
    z-index: 9999999999;
}

.site-header-container .main-nav-column {
        display: flex;
        width: 100%;
        justify-content: flex-end;
        align-items: center;
        padding-top: 5px;
    }
    
    
    

.wp-block-navigation__responsive-container-close svg, .wp-block-navigation__responsive-container-open svg {
    fill: currentColor;
    display: block;
    height: 36px;
    pointer-events: none;
    width: 38px;
}
.site-header-container .main-nav-column {
        padding-right: 180px;
  }
  .site-logo-column {
    flex-basis: 50% !important;
}

.wp-block-navigation {
    position: fixed;
    right: 20px;
    top: 92px;
    z-index: 9999;
}

.wp-block-navigation ul {
    padding-top:70px;
}

header .wp-block-buttons {
    position: fixed;
    right: 10px;
    top: 15px;
    z-index: 99999999;
}

}



@media screen and (min-width: 951px) {
.wp-block-navigation__responsive-container-open:not(.always-shown) {
        /* mobile nav */
        display: none !important;
    }
 header .wp-block-navigation {
     /* desktop nav */
        display: flex !important;
    }
}
/*  END set the breakpoint of mobile navigation - 950px --------------------- */

header.wp-block-template-part {
    width:100%;
}
header .wp-block-site-logo {
    padding-top:20px;
    padding-left:20px;
}
.header-logo-tagline {
    font-size:0.9rem;
    color:#000;
}

.home-page-h1 {
    color: #fff;
    background: var(--wp--preset--color--darkest-green);
    padding: 24px 10%;
    text-align:left;
    margin-top:0;
}



.blog-hero, 
.wp-singular .wp-block-cover {
    align-items: flex-end;
    padding:0;
}
.blog-hero h1,
.wp-singular .wp-block-cover h1 {
   padding: 12px 10%;
    display: inline-block;
    width: 80%;
    text-align: left;
}
.wp-block-columns {
    gap:4rem;
}
 .wp-block-column ul li {
     padding:5px 0;
}
 
 
 @media screen and (max-width: 781px) {
.home-hero-banner .wp-block-column:nth-of-type(2) {
    padding:40px 10% !important;
}
.wp-block-columns {
    gap: 0;
}
.wp-block-columns .wp-block-column:nth-of-type(2)>p,
.wp-block-columns .wp-block-column:nth-of-type(2)>h2{
    margin-top:24px;
}
.no-gap {
    gap:2em !important;
}
.home-hero-banner {
    gap:0 !important;
}
.has-large-font-size {
    font-size:28px !important;
}
.wp-block-group {
    margin-top:0;
}
.wp-block-group>h2 {
    margin-top:40px !important;
}
.home-section-two,
.wp-block-group.has-background>h2{
    margin-top:0 !important;    
    }
.home-section-two .has-text-align-center {
    text-align:left !important;
}

.blog-hero + .wp-block-group,
.wp-block-group.has-background {
    margin-top:40px;
}

}
 
 
 :root :where(.wp-element-button, .wp-block-button__link) {
    background-color: var(--wp--preset--color--darkest-green);
    color: var(--wp--preset--color--white);
    border:1px solid var(--wp--preset--color--white);
 }
 :root :where(.wp-element-button, .wp-block-button__link):hover,
  :root :where(.wp-element-button, .wp-block-button__link):focus,
   :root :where(.wp-element-button, .wp-block-button__link):active {
    background-color: var(--wp--preset--color--light-green-tint);
    color: var(--wp--preset--color--darkest-green);
    border:1px solid var(--wp--preset--color--darkest-green);
 }
 
 
 
 summary {
     font-size: 1.2em;
    line-height: 2em;
    font-family:"Domine", serif;
    font-weight:400;
     padding:20px 5%;
     background-color: var(--wp--preset--color--darkest-green);
     color:#fff;
 }
 details .wp-block-group {
     margin-top:0;
 }
 
 .blog-index.wp-block-query ul {
     display:flex;
     flex-wrap: wrap;
 }
  .blog-index.wp-block-query ul li {
     max-width: 44%;
    padding: 20px 3%;
    margin-block-start: 0;
  }
  @media screen and (max-width:850px) {
     .blog-index.wp-block-query ul li {
     max-width: 100%;
     padding:20px 0;
  }
  }
 
.wpcf7 label {
    display: none;
}
input[type="text"],
input[type="email"],
textarea {
     padding:10px;
     background-color: var(--wp--preset--color--light-green-tint);
     border:2px solid var(--wp--preset--color--light-green);
     color:var(--wp--preset--color--darkest-green);
     font-family: "LexendDeca", sans-serif;
     width:100%;
 }
 footer input[type="text"],
 footer input[type="email"],
 footer textarea {
    color:#fff;
}

footer input[type="text"],
footer input[type="email"]{ 
    background-color: var(--wp--preset--color--darkest-green);
    border:2px solid var(--wp--preset--color--light-green);
    width:90%;
}
 input::placeholder,
 textarea::placeholder {
     color:var(--wp--preset--color--mid-green);;
 }
 footer input::placeholder {
     color:var(--wp--preset--color--light-green);;
 }
 .wpcf7-submit {
     background-color: var(--wp--preset--color--darkest-green);
    color: var(--wp--preset--color--white);
    border: 1px solid var(--wp--preset--color--white);
    padding:10px 20px;
    font-family: "LexendDeca", sans-serif;
    font-size:1rem;
    cursor:pointer;
 }
  .wpcf7-submit:hover,
   .wpcf7-submit:active,
    .wpcf7-submit:focus {
 background-color: var(--wp--preset--color--light-green-tint);
    color: var(--wp--preset--color--darkest-green);
    border: 1px solid var(--wp--preset--color--darkest-green);
    }
 
.wpcf7 form.sent .wpcf7-response-output {
    border-color: var(--wp--preset--color--light-green);
    color:#fff;
    padding: 12px;
    margin-left: 0;
}
 
 footer .wp-block-columns {
     padding-top:40px;
     padding-bottom:40px;
 }