/*
Theme Name: CBC-Theme
Author: dramb
Author URI: 
Theme URI: 
Tags: full-site-editing, editor-style, block-styles, block-patterns
Text Domain: cbc-theme
Requires at least: 6.1
Requires PHP: 7.4
Tested up to: 6.2
Version: 1.0.0

License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/

/* Styles intended only for the front.*/

/* Normalize the base font size and line height, and the box sizing */
:root,
html,
body {
    font-size: 16px;
	line-height: 1.5;
}

html { box-sizing:border-box }
*,*:before,*:after { box-sizing:inherit }

html { scroll-behavior: smooth; }
@media screen and (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
}

/* Set all links to NOT be underlined */
a {
	text-decoration: none;
}

/* Menu styling for the site - remove spacing between the main page elements */
.wp-site-blocks footer,
.wp-site-blocks footer.site-footer,
.wp-site-blocks header,
.wp-site-blocks .title-bar,
.wp-site-blocks main {
	margin-block: 0rem 0rem;
}


/* Extra classes for shrinking header and scroll to top */

/* - Shrinking header on larger screens only */
@media screen and (min-width: 768px) {

	/* Make the site header background partially transparent when shrunk */
	div#masthead.shrink {
		background-color: rgba(255,255,255,0.8) !important;
		transition: all 1s ease;  /* Opacity change done gradually */
	}

	/* The site icon sets the height of the main header, and so reducing this shrinks the header height */
	div#masthead.shrink img.custom-logo {
		height: 50px; width: auto;
		transition: all 1s ease;
	}

}

/* And to keep the nav centred we need to halve the padding on the non-mobile nav */
/* @media screen and (min-width: 991px) {
	header.site-header.shrink nav {
		padding-top: 10px;
		transition: padding 1s;
	}
}
*/


/* Scroll to top */

#scroll-to-top {
	background: rgba(0, 0, 0, 0.2);
	display: none; /* Hidden by default */
	position: fixed;
	bottom: 20px;
	right: 30px;
	z-index: 99; /* Make sure it is above all other content */
	border: none;
	border-radius: 5px;
	display: inline-block;
	padding: 8px 16px;
	vertical-align: middle;
	overflow: hidden;
	text-decoration: none;
	text-align: center;
	cursor: pointer;
	white-space: nowrap;
}

#scroll-to-top:hover {
	background: var(--wp--preset--color--primary);
	box-shadow: var(--wp--preset--shadow--natural);
}

#scroll-to-top .up-arrow {
	display: block;
	color: var(--wp--preset--color--base);
	line-height: normal;
}

#scroll-to-top .up-arrow:before {
	content: "\f106";
	font-family: "Font Awesome";
	font-size: 1.5rem;
}

/**
 * GetWid style changes to slider and carousel to reflect theme colors and sizes
 */

.wp-block-getwid-post-slider .slick-prev,
.wp-block-getwid-post-slider .slick-next,
.wp-block-getwid-post-carousel .slick-next,
.wp-block-getwid-post-carousel .slick-prev {
	width: 45px;
	height: 45px;
	background-color: var(--wp--preset--color--primary) !important;
	opacity: 100%;
	overflow: hidden;
	text-shadow: none !important;
}

.wp-block-getwid-post-slider .slick-prev:hover,
.wp-block-getwid-post-slider .slick-next:hover,
.wp-block-getwid-post-carousel .slick-next:hover,
.wp-block-getwid-post-carousel .slick-prev:hover {
	background-color: var(--wp--preset--color--primary-darker) !important;
	box-shadow: 0 4px 10px 0 rgba(0,0,0,0.2),0 4px 20px 0 rgba(0,0,0,0.19);
	transition: all 200ms ease-in-out;
}

.wp-block-getwid-post-slider .slick-prev::before,
.wp-block-getwid-post-slider .slick-next::before,
.wp-block-getwid-post-carousel .slick-prev::before,
.wp-block-getwid-post-carousel .slick-next::before {
	font-family: "Font Awesome";
    font-weight: 900;
	font-size: 45px;
	padding: 0px 12px;
	color: #ffffff;
	opacity: 100%;
}

.wp-block-getwid-post-slider .slick-next::before,
.wp-block-getwid-post-carousel .slick-next::before {
	content: '\f105';
}

.wp-block-getwid-post-slider .slick-prev::before,
.wp-block-getwid-post-carousel .slick-prev::before {
	content: '\f104';
}

.wp-block-getwid-post-slider .slick-prev::before,
.wp-block-getwid-post-slider .slick-next::before,
.wp-block-getwid-post-carousel .slick-prev::before,
.wp-block-getwid-post-carousel .slick-next::before {
	color: #ffffff;
}

.wp-block-getwid-post-slider h1,
.wp-block-getwid-post-slider h2,
.wp-block-getwid-post-slider p {
	color: #ffffff;
}

.wp-block-getwid-post-slider.has-arrows-inside .slick-next,
.wp-block-getwid-post-carousel.has-arrows-inside .slick-next {
	right: 0px;
}

.wp-block-getwid-post-slider.has-arrows-inside .slick-prev,
.wp-block-getwid-post-carousel.has-arrows-inside .slick-prev {
	left: 0px;
}

.wp-block-getwid-post-carousel .wp-block-getwid-template-post-featured-image img {
	display: block;
	width: 100%;
	height: auto;
}


/* Helpful CSS classes for the 'Advanced' section to add useful styles */

/* - Useful styles to remove column or section spacing */
.margin-top-0, margin-top-bottom-0, margins-0 {
	margin-top: 0;
}

.margin-right-0, margin-left-right-0, margins-0 {
	margin-right: 0;
}

.margin-bottom-0, margin-top-bottom-0, margins-0 {
	margin-bottom: 0;
}

.margin-left-0, margin-left-right-0, margins-0 {
	margin-left: 0;
}

/* - Common action icon additions */
.email-icon::before {
	content: "\f0e0";
	font-family: "Font Awesome";
	padding-right: 0.5rem;
}

.phone-icon::before {
	content: "\f095";
	font-family: "Font Awesome";
	padding-right: 0.5rem;
}

/* - Adding shadow to title text when displaying over images */
.shadow-text {
    text-shadow: 2px 2px 8px #000000;
}

/* - Classes to create columns of text from single column paragraphs */
.two-column-text {
    -webkit-columns: 2 300px;
    -moz-columns: 2 300px;
    columns: 2 300px;
    column-gap: 3em;
    column-rule: 2px solid var(--wp--preset--color--grey-lighter);
}

.three-column-text {
    -webkit-columns: 3 300px;
    -moz-columns: 3 300px;
    columns: 3 300px;
    column-gap: 3em;
    column-rule: 2px solid var(--wp--preset--color--grey-lighter);
}

.four-column-text {
    -webkit-columns: 4 225px;
    -moz-columns: 2 225px;
    columns: 3 225px;
    column-gap: 3em;
    column-rule: 2px solid var(--wp--preset--color--grey-lighter);
}

/* - Utility style to enforce flex where needed */
.flex-it {
    display: flex !important;
}

/* - Utility style to hide content on mobile devices */
@media screen and (max-width: 767px) {
	.hide-mobile {display: none !important;}
}

/* - Utility style to hide content when printing */
@media print {
	.no-print {visibility: hidden !important; display: hidden !important;}
}