/*
Theme Name: Seja Framework Version 3.6
Description: Customise styles - This is where you style your theme. 
This style sheet should load last (although some plugins may load later), so anything 
written here *should* be final, without the need for the !important call. 
*/

/* DEV NOTE : There are instructional comments along the way to help you in building your theme, feel free to delete these and any empty rules upon completion */

body {	
	background:#fff;
    font-family: 'Roboto', sans-serif;
	font-size:20px; /* changing this will affect font sizes and line hights, form sizes, and (importantly) the drop-down gap in the primary navigation */
    --menu-bg:#fff;
	/*Parent Level */
	--menu-parent:var(--theme-colour);				/*menu parent link colour */
	--menu-hover-parent:#fff;			/*menu parent hover link colour */
	--menu-hover-parent-bg:var(--theme-colour);		/*menu hover background */
}

/*

font-family: 'Montserrat', sans-serif;
font-family: 'Roboto', sans-serif;

*/



/* SOME IMPORTANT NOTES ABOUT INTERNET EXPLORER
The 'var' colours do not display in IE. To resolve this there are duplicate colours which appear BEFORE the variable colour call.
These colours have been selected to be accessible and reasonably aesthetical despite other theme modifications, however if you are targeting an audience that requires IE you may want to manually target these classes in this CSS file  */
/* FONTS
-------------------------------------------------------------- */

pre,#respond .form-allowed-tags{font-family: "Courier 10 Pitch", Courier, monospace;}
code,kbd {font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace;}
h1,h2,h3{font-family: 'Montserrat', sans-serif;font-weight:600}

/* FONT COLOURS
-------------------------------------------------------------- */
.highlight {color:var(--theme-colour);}
input,textarea,.category-title,.archive h1.page-title {color:var(--theme-colour);}
.alt-colour {color:#039;}

/* current menu page colour */
#seja-framework-menu ul li.current_page_item > a,#seja-framework-menu ul li.current-menu-ancestor > a,#seja-framework-menu ul li.current-menu-item > a,#seja-framework-menu ul li.current-menu-parent > a {color: #fff;}

/* light colour */
.entry-meta,.entry-meta a:link,.entry-meta a:visited,.entry-utility,.entry-utility a:link,.entry-utility a:visited,.navigation a:link,.navigation a:visited,p.logged-in-as,p.logged-in-as a:link,p.logged-in-as a:visited,p.form-allowed-tags,p.comment-meta,.comment-meta a:link,.comment-meta a:visited,a.reset_variations{color:#757575;}

nav.seja-breadcrumb .separator{color:#636969;}

/* HEADER
-------------------------------------------------------------- */ 

.header-img img {height:auto;max-width:300px;}
#header {display:flex;} /* delete any elements that are not being used */


/* NAVIGATION 
-------------------------------------------------------------- */

/* Seja Access */
#nav-access{height:56px;padding-top:210px;}
#seja-framework-menu a{border:none;}
.nav-collapse li{margin:0 2px;}
.nav-collapse a:hover,.nav-collapse li.focus > a{background-color:#4f4f4f;background-color:var(--menu-hover-parent);}
/* this will eventually be moved to the generated inline styles */
@media screen and (max-width:800px){
    #nav-access{padding-top:30px;}
  #nav-access .nav-collapse .dropdown-toggle{border-color:#fff;color:#fff;background:rgba(0,0,0,0.4);}
  #nav-access .nav-collapse .dropdown-toggle:hover,#nav-access .nav-collapse .dropdown-toggle:focus,#nav-access .nav-collapse .dropdown-toggle:active{background-color:#ccc;color:#333;} 
}
nav.seja-breadcrumb li{border:none;}

/* CONTENT - GENERAL
-------------------------------------------------------------- */
#top-content-block {}
#content-shell {}
#alt-content-block {}
#content {background:#fff;}

.separator {}
.seja-link-div {background:#f1f1f1;}
p {line-height:1.75rem;margin-bottom:30px;}/* for more compact designs use this - line-height:1.6em;margin-bottom:18px; */

/* SCROLL PAGES
-------------------------------------------------------------- */
#scroll-page{}
.scroll-page-wrapper.inner-wrapper{}
/* styles are examples, add and delete as required */
.scroll-block{padding:20px 0;} 
.scroll-block-1 {background:#fff;position:relative;clear:both;}
.scroll-block-2 {background:#f6f6f6}
.scroll-block-3 {background:#fff}
.scroll-block-4 {background:#f6f6f6;}

/* CONTENT - FORM
-------------------------------------------------------------- */
/* want larger form elements - wrap the form using .large-form  MAKE A NOTE OF THIS IN THE HELP PAGES*/
input[type="text"],input[type="password"],input[type="email"],input[type="tel"],input[type="file"],input[type="url"],select,textarea{background: #fff;border: 1px solid #ccc;-webkit-border-radius: 3px;-moz-border-radius:3px;border-radius:3px;}
/*buttons default*/
input[type="submit"],a.button,a.wp-block-button__link,
.calendar_wrap, /* calendar_rap uses the same background as the button for the calendar. alternatively move it and give it new attributes */
.woocommerce #content input.button.alt,.woocommerce #respond input#submit.alt,.woocommerce a.button.alt,.woocommerce button.button.alt,.woocommerce input.button.alt,.woocommerce-page #content input.button.alt,.woocommerce-page #respond input#submit.alt,.woocommerce-page a.button.alt,.woocommerce-page button.button.alt,.woocommerce-page input.button.alt	{
	border:1px solid var(--theme-colour);-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;
	color:#fff;
	background:#333;background:var(--theme-colour);
}
.is-style-outline a.wp-block-button__link{
	color:#333;color:var(--theme-colour);
	background:#fff;
}
:focus{outline-color:var(--theme-colour);}
/* button hover */
input[type="submit"]:hover,a.button:hover,a.wp-block-button__link:hover,
.woocommerce #content input.button.alt:hover,.woocommerce #respond input#submit.alt:hover,.woocommerce a.button.alt:hover,.woocommerce button.button.alt:hover,.woocommerce input.button.alt:hover,
.woocommerce-page #content input.button.alt:hover,.woocommerce-page #respond input#submit.alt:hover,.woocommerce-page a.button.alt:hover,.woocommerce-page button.button.alt:hover,.woocommerce-page input.button.alt:hover {
	color:#333;color:var(--theme-colour);
	background:#fff;
}
.is-style-outline a.wp-block-button__link:hover{
	color:#fff;
	background:#333;background:var(--theme-colour);
}

/* button disabled */
.woocommerce #respond input#submit.alt.disabled, .woocommerce #respond input#submit.alt.disabled:hover, .woocommerce #respond input#submit.alt:disabled, .woocommerce #respond input#submit.alt:disabled:hover, .woocommerce #respond input#submit.alt[disabled]:disabled, .woocommerce #respond input#submit.alt[disabled]:disabled:hover, .woocommerce a.button.alt.disabled, .woocommerce a.button.alt.disabled:hover, .woocommerce a.button.alt:disabled, .woocommerce a.button.alt:disabled:hover, .woocommerce a.button.alt[disabled]:disabled, .woocommerce a.button.alt[disabled]:disabled:hover, .woocommerce button.button.alt.disabled, .woocommerce button.button.alt.disabled:hover, .woocommerce button.button.alt:disabled, .woocommerce button.button.alt:disabled:hover, .woocommerce button.button.alt[disabled]:disabled, .woocommerce button.button.alt[disabled]:disabled:hover, .woocommerce input.button.alt.disabled, .woocommerce input.button.alt.disabled:hover, .woocommerce input.button.alt:disabled, .woocommerce input.button.alt:disabled:hover, .woocommerce input.button.alt[disabled]:disabled, .woocommerce input.button.alt[disabled]:disabled:hover {
	background:#bdb7b8;
}
/* widget search submit button */
.widget_search input#searchsubmit {
	-webkit-border-radius: 0 15px 15px 0;
	-moz-border-radius:    0 15px 15px 0;
	border-radius:         0 15px 15px 0;
}
.ui-datepicker-div{font-size:0.75em;} /* if you've changed the font size in body{}, you may want to adjust this */
.ui-datepicker .ui-widget-header { /* add a background here if you're using the cf7 datepicker (jquery ui) */ }
::placeholder{ /* Chrome, Firefox, Opera, Safari 10.1+ */ color:#575757;opacity: 1;}
:-ms-input-placeholder{ /* Internet Explorer 10-11 */ color:#575757;}
::-ms-input-placeholder {/* Microsoft Edge */color:#575757;}

/*home page */
.home #top-content-block{max-height:550px;overflow:hidden;}
.ahf-leadin{background:var(--theme-colour);position:relative;top:-80px;}
.ahf-leadin .cta-left,.ahf-leadin .cta-right{padding:50px 0 0 50px;}
.ahf-leadin h1{color:#fff; font-size:1.8rem;}
.ahf-leadin p{color:#fff;font-size:0.95rem;}
.ahf-leadin a.wp-block-button__link{border:1px solid #fff;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;color:var(--theme-colour);background:#fff;}
.ahf-leadin a.wp-block-button__link:hover{color:var(--theme-colour);}
@media(max-width:1000px){.ahf-leadin .cta-right{padding:50px 10px 0 0}}
@media(max-width:783px){.ahf-leadin .cta-left{padding:50px 50px 0 50px;}.ahf-leadin .cta-right{padding:0 0 40px 50px;}.ahf-leadin p{margin-bottom:0;}}
.scroll-block-1 figure{margin-bottom: 20px;}
.scroll-block-1 h2{font-size:1em;color:#414953;text-align:center;}
.hentry ul.dumbell li::before{content:"\f44b";font-size:0.8em!important;font-weight: 200;}
.hentry ul.certificate li::before{content:"\f5f3";font-size:0.8em!important;font-weight: 200;}


/*carousel */
.wp-block-carousel-slider-slider{padding-top:40px;}
p.fullbanner{max-height:500px;overflow: hidden;}
@media(max-width:1200px){p.fullbanner{max-height:350px;}}
p.fullbanner img{width:100%;}

/* contact */
.page-id-35 #top-content-block{background:#e5e5e5;}
.page-id-35 #top-content-block .wp-block-columns{max-width:1200px;margin:0 auto;}
iframe.map{width:100%;height:450px;}
.page-id-35 #top-content-block p{margin:0;}
#top-content-block .wp-block-column{padding-left: 30px;}
#top-content-block .wp-block-column h3{color:#414953;font-size:1rem;}
#top-content-block .wp-block-column p{font-size:0.9rem;margin-bottom:0}
#top-content-block .wp-block-column a:active,#top-content-block .wp-block-column a:visited,#top-content-block .wp-block-column a:link{color:#414953;}
.separator{border-right:1px solid #8c8c8c;}
.wpcf7-form p{margin-bottom:5px;}

/* testimonials */

.box-content{font-size:1rem!important; padding:0 100px;}
.cycle-slide .testimonial-box .box-com-name{color:#000!important;font-weight:600!important;}
.cycle-slide .testimonial-box .box-design-name{color:var(--seja-link)!important;}

.gs_testimonial_container .cycle-pager{width:initial;height:initial;cursor:initial;background-color:transparent;}
.gs_testimonial_container .cycle-pager a {width: 42px!important;height: 42px!important;border-radius:0!important;text-indent:0px!important;padding:10px 0 0;font-size:0.75em;
cursor: pointer;}
.gs_testimonial_container .cycle-pager a.cycle-pager-active{background-color:var(--theme-colour)!important;color:#fff;}
.cycle-slideshow .cycle-carousel-wrap .cycle-slide .testimonial-box, .cycle-slide .testimonial-box {
	padding-bottom: 50px;
}
@media(max-width:800px){.box-content{padding:0 50px;}}
@media(max-width:500px){.box-content{padding:0 20px;}}


/* FOOTER
-------------------------------------------------------------- */
#footer {background:#222;}
#colophon {} /* this is a wrapper for the footer content */
#footer {font-size:0.8em;}
#wp-calendar caption,#wp-calendar tfoot a{color:#fff;}
/*footer widgets*/
#footer-widget-area h2 {color:#fff}
#footer-widget-area p,#footer-widget-area ol,#footer-widget-area ul,#footer-widget-area dd,#footer-widget-area pre,#footer-widget-area td {color:#fff;}
#footer-widget-area a:link,#footer-widget-area a:visited {color:#fff;}
#footer-widget-area a:active,#footer-widget-area a:hover{color:#fff;border:2px dotted #fff;text-decoration: none;} 

/* WOOCOMMERCE
-------------------------------------------------------------- */

.price span{font-size:1.25em;}/* price size*/
.woocommerce div.product p.price, .woocommerce div.product span.price {color:#8fae1b;}/* pricing colour here */
.woocommerce-message::before {color: #8fae1b;}/* GREEN colour here */
.woocommerce-message {border-top-color: #8fae1b;}/* GREEN border here */
.woocommerce a.remove{color:#f00 !important;}/* RED colour here */
.woocommerce a.remove:hover{background: #ff0000;}
/* slideout sidebar */
.two-fixed .col2.slideout {
	width:550px;
	background:#f5f5f5;
	-webkit-border-radius:0 15px 15px 0;
	-moz-border-radius:0 15px 15px 0;
	border-radius:0 15px 15px 0;
	-moz-box-shadow: 0 1px 0 #1d47c1, 0 2px 0 #061952;
	-webkit-box-shadow: 0 1px 0 #1d47c1, 0 2px 0 #061952;
	box-shadow: 0 1px 0 #1d47c1, 0 3px 0 #061952;
}
/* PAGINATION AND CALENDAR
-------------------------------------------------------------- */
.pagination span, .pagination a {
	background: #fff; /* background colour of inactive pagination blocks */
}
.pagination .current,
.pagination a:hover{
	color:#fff; /* font colour of current page block */
}
#wp-calendar tbody td{background:#f5f5f5;border:1px solid #fff;}
#wp-calendar tbody a{background: #f00;color:#fff;}