/*!
Theme Name: KCHO KChild
Theme URI: https://www.kadencewp.com/kadence-theme/
Template: kadence
Author: Hornet Creative
Author URI: https://www.kadencewp.com/
Description: A child theme for the Kadence Theme.
Version: 1.0.0
License: GNU General Public License v3.0 (or later)
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Text Domain: kcho
*/

/* Theme customization starts here
-------------------------------------------------------------- */

/* orange: #f5a300
 blue:  #21a4d8
  blue2:  #227296
*/


html{
  scroll-behaviour:smooth;
}
body{
  /*font-family: 'Lato', Helvetica, sans-serif;*/
  /*scroll-behaviour:smooth;*/
}

/* header / menu etc */
body .main-navigation .primary-menu-container > ul > li.menu-item.kcho-menu-item-highlight > a{
  color:#fff;
  background:#21a4d8;
  border-radius:5px;
}
body .main-navigation .primary-menu-container > ul > li.menu-item.kcho-menu-item-highlight > a:hover{
  background: #227296;
}

@media(max-width:1024px){
  .mobile-navigation ul li.kcho-menu-item-highlight > a{
    text-align:center;
    background:#21a4d8;
    border-radius:5px;
    margin-top:20px;
  }
}
@media(min-width:1025px){
  .kcho-menu-item-highlight{
    margin-left:30px;
  }
}

/* the spacing of headings and paragraphs is poor by default, with an h2 having less space underneath than a p tag.
The p tags bottom margin is way too big, and the h2 seems to have none set by the theme and uses 'user agent' 'block-bottom-margin' ??*/
/* from the all.css.min stylesheet in parent theme 

.single-content p,.single-content table,.single-content pre,.single-content form,.single-content .wp-block-buttons,.single-content .wp-block-button,.single-content .wc-block-grid,.single-content .wp-block-kadence-advancedbtn,.single-content .wp-block-media-text,.single-content .wp-block-cover,.single-content .entry-content-asset,.single-content .wp-block-kadence-form,.single-content .wp-block-group,.single-content .wp-block-yoast-faq-block,.single-content .wp-block-yoast-how-to-block,.single-content .schema-faq-section,.single-content .wp-block-kadence-tableofcontents,.single-content .enlighter-default,.single-content .wp-block-kadence-iconlist,.single-content [class*=__inner-content]{
  margin-top:0;margin-bottom:var(--global-md-spacing)
}
.single-content .wp-block-buttons .wp-block-button{margin-bottom:0}
.single-content p>img{display:inline-block}
.single-content p>img.aligncenter{display:block}
.single-content li>img{display:inline-block}
.single-content li>img.aligncenter{display:block}
.single-content p:not(.wp-block-kadence-advancedheading)+.wp-block-kadence-spacer{margin-top:calc( 0rem - var(--global-md-spacing))}
.single-content .wp-block-yoast-faq-block .schema-faq-question{margin-bottom:.5em}
.single-content h1,.single-content h2,.single-content h3,.single-content h4,.single-content h5,.single-content h6{margin:1.5em 0 .5em}
.single-content h1:first-child,.single-content h2:first-child,.single-content h3:first-child,.single-content h4:first-child,.single-content h5:first-child,.single-content h6:first-child{margin-top:0}
.single-content h1+*,.single-content h2+*,.single-content h3+*,.single-content h4+*,.single-content h5+*,.single-content h6+*{margin-top:0}

*/

/* text links*/
.single-content .kcho-text-links-decoration-none a{ 
  text-decoration:none;
}
.single-content a:hover{
  text-decoration:none;
}


.single-content p, .single-content ul, .single-content ol{
  /*margin-bottom:var(--global-xs-spacing); /* this results in using rems */
  margin-bottom:1.5em;
}
.single-content h1, .single-content h2, .single-content h3, .single-content h4, .single-content h5, .single-content h6{
  margin-bottom:1.5em;
}




/* can't find anywhere in customiser to set the header or footer to be full width of the browser */
.site-header-wrap .site-container,
.site-footer-wrap .site-container{
  max-width:1740px /*95%*/
}

/* no option in settings for a site footer colour to apply to whole footer, only per block/section*/
.site-footer-wrap{
  color:#fff;
  font-size:0.9em;
}
.site-footer-wrap a,
.site-footer-wrap a:link,
.site-footer-wrap a:visited,
.site-footer-wrap .widget-area a{
  color:inherit;
}
/* remove the large amount of space between icon and container */
.site-footer a.social-button{
  width:auto;
  height:auto;
}

.site-footer-wrap{
  background-image:url('./assets/images/bg-graphic-3.png');
  background-position:right bottom;
  background-repeat:no-repeat;
}

/* page title overlay image (not possible to use image for overlay in settings */
.post-archive-hero-section.entry-hero-layout-standard .hero-section-overlay,
.page-hero-section.entry-hero-layout-standard .hero-section-overlay{
  background-image:url('./assets/images/bg-graphic-7.png');
  background-position:right bottom;
  background-repeat:no-repeat;
}
.hero-container .entry-header .entry-title:after, /* could just target h1, but may change?.. the .page-title class is sometimes on the entry-header container, not the h1, so have to include .entry-header in selector*/
.hero-container .entry-header .page-title:after,
.hero-container .entry-header .archive-title:after{
  content:'';
  display:block;
  width:100px;
  height:12px;
  margin:5px auto;
  background:#f5a300;
  transform:skew(-45deg);
}

/* theme customiser seems to not have full contols of title font/style for archive the same s pages, so have to add more styling here to match pages. */
.hero-container .page-title,
.hero-container .archive-title{
  text-transform:uppercase;
  line-height:1.1;
}

body.content-title-style-hide .content-area{
  margin-top:0;
}


/* K makes this h2 in testimonials have no bottom margin as it is inside it's own div:
.single-content h2:last-child */
.single-content .kt-testimonial-title-wrap{
  margin-bottom:1em;
}

.footer-navigation .menu{
  display:block; /* K makes it flex and row meaning the menu items aren't stacked... fine if not using the footer like columns. But no option to change. */
}




.widget_block p{
  margin-top:0;
  margin-bottom:1em;
}


/*.content-area{
  margin-top:0;
}*/

.wp-block-kadence-rowlayout.kcho-height-100vh .kt-row-column-wrap:first-child{
  min-height:100vh;
}
.is-style-kcho-kadence-rowlayout.alignwide{
  padding-left:10px;
  padding-right:10px;
}
.is-style-kcho-kadence-rowlayout .kt-row-layout-inner{
  box-shadow: 2px 2px 17px -5px rgba(0,0,0,0.4);
}





/* page header / title*/
.is-style-kcho-heading-underline:after{
  content:"";
  display:block;
  width:100px;
  max-width:45%;
  height:5px;
  margin-top:15px;
  position:relative;
  top:0px;
  left:auto;
  right:auto;
  /*background:rgba(0,0,0,0.15); /*make faint or transparent by default, colour is changed in page css elem settings.  #444;*/
  background: var(--global-palette1); /*#ccc;*/
  border-radius:0px;
  transform:skew(-35deg);
}
[class*='is-style-kcho-heading-underline'].has-text-align-center:after,
[class*='is-style-kcho-heading-underline'].has-text-align-center:after{
  text-align:center;
  margin-left:auto;
  margin-right:auto;
}




/*   end also incl in block-editor.css    */



/* typewrite animated js css text */
.typewrite-container{
  height:580px;
  margin-right:-50%;
  /*width:600px;
  /*border-left:5px solid #eee;
  border-right:5px solid #eee;
  padding:0 30px;*/
  overflow:hidden;

  display:flex;
  flex-direction:column;
  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;
  align-content:flex-end;
  position:relative;
  top:-120px;
  opacity:0.35;
  -webkit-mask-image: linear-gradient(to top, black 60%, transparent 100%);
  mask-image: linear-gradient(to top, black 60%, transparent 100%);
}
.typewrite-container h2{
  font-size:2.2em;
  line-height:1.1;
  margin:0;
}

@media(max-width:767px){
  .typewrite-container{
    height:360px;
    margin-right:-40%;
    top:-120px;
  }
  .typewrite-container h2{
    font-size:1.7em;
  }
}
/*
.typewrite-container:after {
  content  : "";
  position : absolute;
  z-index  : 1;
  top   : 0;
  left     : 0;
  pointer-events   : none;
  background-image : linear-gradient(to top, 
                    rgba(255,255,255, 0) 20%, 
                    rgba(255,255,255, 1) 70%);
  width    : 100%;
  height   : 4em;
}
*/
/*.container > *{
  border:0px solid green;
}*/
.typewrite-list{
  opacity:0.45;
}


/* examples of different styling */
.lnd-typewrite-container-1 .typewrite-container{
  opacity:0.85;
}
.lnd-typewrite-container-1 .typewrite-container h2{
  font-size:2.2em;
  font-weight:normal;
  line-height:1.1;
}
.lnd-typewrite-container-1 .typewrite-list{
  opacity:0.50;
}


.lnd-typewrite-container-2 .typewrite-container{
  opacity:1;
}
.lnd-typewrite-container-2 .typewrite-container h2{
  font-size:2.2em;
  font-weight:normal;
  font-style:italic;
  line-height:1.1;
}
.lnd-typewrite-container-2 .typewrite-list{
  opacity:0.35;
  color:#fff;
}





.typewrite-text:after { 
  content:'';
  display:inline-block;
  height:1.1em; 
  vertical-align:middle; 
  width:5px; 
  border-right: 0.08em solid; 
  opacity:0.5;
  animation: blink-animation 0.8s steps(5, start) infinite;
  -webkit-animation: blink-animation 0.8s steps(5, start) infinite;
}
@keyframes blink-animation {
  to {
    visibility: hidden;
  }
}
@-webkit-keyframes blink-animation {
  to {
    visibility: hidden;
  }
}



/*words wall*/
.lands-words-wall-container .kt-inside-inner-col{ /* class applied to the column containing the words wall shortcode*/
  height:100%;
  min-height:300px;
}
.words-wall{
  display:flex;
  flex-flow: row nowrap;
  font-size:30px;
  line-height:1.1;
  font-weight:bold;
  /*height:700px;*/
  overflow:hidden;
  
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  /*left: 400px;*/
  /*margin-left:-100px; no longer working well after apr23 kadence updates*/
  -webkit-mask-image: linear-gradient(to bottom, transparent 10%, black 40%, black 60%, transparent 90%);
  mask-image: linear-gradient(to bottom, transparent 10%, black 40%, black 60%, transparent 90%);
}
@media(min-width:1780px){
  .words-wall{
    width:750px;
  }
}
.words-wall > div.words-wall-column{
  padding:0 25px;
  opacity:0.5;
  position:relative;
  width:500px;
}
.ww-column-inner{
  position:absolute;
  padding-top:20px;
  padding-bottom:20px;
}
.words-wall-column:nth-child(odd){
  text-align:right;
}
.words-wall-column:nth-child(odd) .ww-column-inner{
  right:20px;
}
.words-wall-column .words-line{
  padding: 5px;
  position:relative;
}
.words-wall-column:nth-child(odd) > div{
  /*position:relative;
  top:-10px;*/
  /*margin-top:-10px;*/
}
@media(max-width:1080px){
  .words-wall{
    -webkit-mask-image: linear-gradient(to bottom, transparent 3%, black 40%, black 60%, transparent 97%);
    mask-image: linear-gradient(to bottom, transparent 3%, black 40%, black 60%, transparent 97%);
    top:50px;
  }
  .words-wall-column{
    max-width:90vw;
    display:none;  /*messes up when becomes visible is browser width changed from mobile to wider, but other method also messy*/
    /*width:1px;
    overflow:hidden;
    opacity:0;
    visibility:hidden;*/
  }
  .words-wall-column:first-child{
    display:block;
    text-align:left;
    width:auto;
    /*width:auto;
    overflow:hidden;
    opacity:1;
    visibility:visible;*/
  }
}
@media(min-width:768px) and (max-width:1080px){
  .words-wall{
    /*width:39%;*/
    width:auto;
    max-width:100%;
    margin-left:0px;/*was 30px*/
  }
  .words-wall-column:nth-child(odd) .ww-column-inner{
    right:auto;
    padding-left:20px;
  }
}
@media(max-width:767px){
  .words-wall{
    height:400px;
    margin-left:0;
    margin-top:-60px;
    margin-bottom:0px;
    position:relative;
    top:0;
    
    width:auto;
    max-width:100%;
  }
  .words-wall > div.words-wall-column,
  .words-wall-column:nth-child(odd) .ww-column-inner{
    right:auto;
    padding-left:0px;
  }
}
@media(max-width:420px){
  .words-wall{
    top:0;
    /*-webkit-mask-image: linear-gradient(to top, black 40%, transparent 55%);
    mask-image: linear-gradient(to top, black 40%, transparent 55%);*/
    margin-left:0;
    padding-left:0;
    width:auto;
  }
  .words-wall > div.words-wall-column,
  .words-wall-column:first-child{
    font-size:0.9em;
    text-align:left;
    max-width:90vw;
    /*left:-20px;*/
  }
  /*.word-wall-column,
  .word-wall-column:nth-child(odd) .ww-column-inner,
  .ww-column-inner{
    padding-left:0;
  }*/
}


.words-line:nth-child(even){
  -webkit-animation: fade1 5s ease;
  -moz-animation: fade1 5s ease;
  -o-animation: fade1 5s ease;
  animation: fade1 5s ease;
  animation-iteration-count: infinite;
}
.words-line:nth-child(odd){
  -webkit-animation: fade2 5s ease;
  -moz-animation: fade2 5s ease;
  -o-animation: fade2 5s ease;
  animation: fade2 5s ease;
  animation-iteration-count: infinite;
  /*animation-delay:2.5s; makes a jump*/
}
.words-line:nth-child(3), .words-line:nth-child(7){
  -webkit-animation: fade1 3s ease;
  -moz-animation: fade1 3s ease;
  -o-animation: fade1 3s ease;
  animation: fade1 3s ease;
  animation-iteration-count: infinite;
  /*animation-delay:2.5s; makes a jump*/
}
.words-line:nth-child(4), .words-line:nth-child(11){
  -webkit-animation: fade2 7s ease;
  -moz-animation: fade2 7s ease;
  -o-animation: fade2 7s ease;
  animation: fade2 7s ease;
  animation-iteration-count: infinite;
  /*animation-delay:2.5s; makes a jump*/
}
@-webkit-keyframes fade1 { /* was 7 and 3*/
    0% {
        opacity: 0.6;
    }

    50% {
        opacity: 0.8;
    }

    100% {
        opacity: 0.6;
    }
}
@-webkit-keyframes fade2 {
    0% {
        opacity: 0.8;
    }

    50% {
        opacity: 0.6;
    }

    100% {
        opacity: 0.8;
    }
}






/* columns reversing - can do in mobile settings for layout block, right-to-left*/
/*.lnd-flex-column-swap-desktop .kt-row-column-wrap{
  flex-direction:column-reverse;
}*/




/* icons in text */
.kcho-text-icon{
  height:1.6em;
  width:1.6em;
  margin-right:0.4em;
}
@media(max-width:767px){
  .kcho-text-icon{
    height:1.3em;
    width:1.3em;
    vertical-align:bottom!important;
  }
}

/*k corrections*/
.kcho-last-child-margin-tablet-correction .kt-testimonial-grid-wrap .kt-testimonial-item-wrap:last-child{
  margin-right:auto;
}


/*useful classes for mob control*/
@media(max-width:767px){
  .kcho-mobile-force-alignleft,
  .ho-mobile-force-alignleft{
    text-align:left;
  }
  body .ho-align-remove-mobile,
  body .ho-align-remove-mobile > .alignleft,
  body .ho-align-remove-mobile > .alignright{
    float:none;
    clear:both;
  }

}

.kcho-force-wordbreak-none{
  word-break:normal;
}


.ho-image-caption-style-1{
  position:relative;
}
.ho-image-caption-style-1 figcaption{
  position: absolute;
  bottom: 0;
  right: 0;
  padding: 7px 12px;
  background: rgba(0,0,0,0.75);
  color: white;
  transform: translateY(50%);
  margin-left: 10px;
  margin-right: -10px;
}



.ho-align-remove-mobile,
.ho-align-remove-mobile>.alignleft,
.ho-align-remove-mobile>.alignright{
  float:none;
  clear:both;
}




/* buttons*/
body .kt-btn-wrap .kt-button:not(.kb-btn-global-inherit),
body button{
  line-height:1.3;
}

/* wpforms*/
body div.wpforms-container-full .wpforms-form input[type=submit], 
body div.wpforms-container-full .wpforms-form button[type=submit], 
body div.wpforms-container-full .wpforms-form .wpforms-page-button{
  font-size:18px;
  background: transparent;
  color: #555;
  border:2px solid #555;
  border-radius:3px;
  padding:8px 16px;
  line-height:1.1;
}

body div.wpforms-container-full .wpforms-form input[type=submit]:hover, 
body div.wpforms-container-full .wpforms-form button[type=submit]:hover, 
body div.wpforms-container-full .wpforms-form .wpforms-page-button:hover{
  background: #555;
  color:#fff;
  border:2px solid #555;
}


/* teams flex cols */
/* set last element in each column to be at bottom, also have to make each col inner a flexbox first.*/
.kcho-team-container .kt-inside-inner-col{
  display:flex;
  flex-direction:column;
}
.kcho-team-container .kt-inside-inner-col > :last-child{
  margin-top:auto;
}

/* complianz cookie consent form */
@media (max-width: 768px){
  body .cmplz-cookiebanner{
    bottom: 6px;
    width:96%;
    margin-left:2%;
    margin-right:2%;
  }
  body .cmplz-cookiebanner .cmplz-buttons .cmplz-btn{
    height:auto;
    padding:8px 12px;
  }
}

/* kdnc lightbox overlay not dark enough */
@media (min-width: 769px){
  body .goverlay {
      background: rgba(0,0,0,0.9);
  }
}