/*
Theme Name: Base Theme
Author: TRU Open Learning
Author URI: 
Theme URI: 
Tags: full-site-editing, block-patterns
Text Domain: base-theme
Requires PHP: 7.4
Tested up to: 6.8
Version: 1.0.5

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.*/

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;
}


:where(.wp-block-file__button):is(a):active, :where(.wp-block-file__button):is(a):focus, :where(.wp-block-file__button):is(a):hover, :where(.wp-block-file__button):is(a):visited{
	/*color: inherit;*/
	opacity: 100%;
}


/* Code block in paragraph */
p code {
	font-weight: 300;
	color: var(--wp--preset--color--contrast);
	background-color: var(--wp--preset--color--note-1);
	padding: 0.2em 0.5em; 
	border-radius: 0.2em;
} 

/* Layout fixes */

main{
	padding-block: 0px !important;
} 

.wp-site-blocks{
	display: flex; 
	flex-direction: column; 
	min-height: calc(100vh - var(--wp-admin--admin-bar--height, 0px));
} 

footer{
	margin-top: auto;
}

.page-template-no-title main{
 margin-top: 0;
}

/* Kadence palette translation */

:root {
    --global-palette1: var(--wp--preset--color--accent-2) !important;
    --global-palette2: var(--wp--preset--color--accent-1) !important;
    --global-palette3: var(--wp--preset--color--primary) !important;
	--global-palette4: var(--wp--preset--color--contrast) !important;
	--global-palette5: var(--wp--preset--color--secondary) !important;
	--global-palette6: var(--wp--preset--color--borders) !important;
	--global-palette7: var(--wp--preset--color--note-2) !important;
	--global-palette8: var(--wp--preset--color--note-1) !important;
	--global-palette9: var(--wp--preset--color--base) !important;
	--global-palette-btn-bg: var(--wp--preset--color--primary);
	--global-palette-btn: var(--wp--preset--color--base);
}

/* Override weird block defaults */

.wp-block-table.is-style-stripes tbody tr:nth-child(2n+1) {
	background-color: var(--wp--preset--color--note-1);
}

.wp-block-post-author__content > p{
	margin-top: 0 !important;
}

.taxonomy-category a, .wp-block-post-author__name a{
	text-decoration: none;
}

strong{
	font-weight: 700;
}

.wp-block-cover, .wp-block-cover-image{
	padding-inline: 0px;
}

/* Custom class styling for query loop patterns */


.border .wp-block-post{
	border: 1px solid var(--wp--preset--color--borders);
}

.border-bottom .wp-block-post{
	border-bottom: 1px solid var(--wp--preset--color--borders);
}


@media (max-width:900px) {
	.grid-fix.wp-block-post-template-is-layout-grid.wp-block-post-template-is-layout-grid.wp-block-post-template-is-layout-grid.wp-block-post-template-is-layout-grid {
	  grid-template-columns: 1fr;
	}
  }

/* Details block variations */

.is-style-faq-1 :nth-child(2), .is-style-faq-2 :nth-child(2){
	margin-top: 0;
}

.is-style-faq-1[open], .is-style-faq-2[open]{
	padding-bottom: var(--wp--preset--spacing--30);
}

.is-style-faq-1 > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.is-style-faq-1 > summary::after {
    content: "\f343";
    font-family: 'dashicons';
    width: 18px; 
    font-size: 18px;
    margin-right: 10px;
    transition: 0.2s;
	transform: rotate(180deg);
}

.is-style-faq-1[open] > summary::after {
    transform: rotate(0deg);
}

.is-style-faq-2 > summary {
    display: flex;
    align-items: center; 
}

.is-style-faq-2 > summary::before {
    content: "\f543";
    font-family: 'dashicons';
    width: 18px; 
    font-size: 18px;
    margin-right: 10px;
    transition: 0.2s;
	
}

.is-style-faq-2[open] > summary::before {
	content: "\f460";
}

.is-style-faq-1 + .is-style-faq-1, .is-style-faq-2 + .is-style-faq-2{
	margin-top: 0 !important;
}

/* Button variations hover */

.wp-element-button{
	position: relative;
	transition: box-shadow 0.5s ease, border-color 0.5s ease;
	overflow: hidden;
}

.wp-element-button:hover {
	box-shadow: inset 0 0 0 1000px color-mix(in srgb, currentColor 15%, transparent 85%);
	border-color: color-mix(in srgb, currentColor, transparent 85%);
  	transition: box-shadow 0.5s ease, border-color 0.5s ease;
}

/*
.wp-element-button::before{
	content: '';
	position: absolute;
	inset: 0px;
	background: color-mix(in srgb, currentColor, transparent 85%);
	height: 1px;
	width: 1px;
	top: 50%;
	left: 50%;
	border-radius: 50%;
	transform: scale(0) translate(-50% -50%);
}

.wp-element-button:hover::before{
	opacity: 1;
	transition: opacity 0.3s ease;
}

@keyframes ripple {
	to {
	  transform: scale(400);
	  opacity: 0;
	}
  }
*/


/* For Container Queries (instead of media queries) */

main{
	container-type: inline-size;
	container-name: container-group;
}


/* Checker Board */

.checkerboard-img-l, .checkerboard-img-r{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}

.checkerboard-img-l .wp-block-group, .checkerboard-img-r .wp-block-group, .checkerboard-img-l figure, .checkerboard-img-r figure{
	width:25%;
}

.checkerboard-img-l .components-resizable-box__container, .checkerboard-img-l img, .checkerboard-img-r .components-resizable-box__container, .checkerboard-img-r img{
	height: 100% !important;
}

.checkerboard-img-l img, .checkerboard-img-r img{
	object-fit: cover;
	width: 100%
}

@container container-group (max-width: 1050px){
	.checkerboard-img-l .wp-block-group, .checkerboard-img-r .wp-block-group, .checkerboard-img-l figure, .checkerboard-img-r figure{
		width:50%;
	}
}

@container container-group (max-width: 600px){
	.checkerboard-img-l .wp-block-group, .checkerboard-img-r .wp-block-group, .checkerboard-img-l figure, .checkerboard-img-r figure{
		width:100%;
	}
}


/* Overlap Card Groups */

.overlap-left-card-group, .overlap-right-card-group{
	display: flex;
}

.img-left, .img-right{
	width: calc(var(--wp--style--global--content-size) *2);
}

.card-left{
	margin-right: -300px !important;
	position: relative;
	z-index: 10;
}
  
.card-right{
	margin-left: -300px !important;
	position: relative;
	z-index: 10;
}

@container container-group (max-width: 1050px){
	.overlap-left-card-group, .overlap-right-card-group{
		flex-wrap:wrap;
	}

	.card-left, .card-right{
		margin-left: var(--wp--preset--spacing--30) !important;
		margin-right: var(--wp--preset--spacing--30) !important;
		margin-top: calc(var(--wp--preset--spacing--50) *-1) !important;
		margin-bottom: 0px !important;
	}

	.overlap-left-card-group div:first-child{
		order: 2 !important;
	}
	.overlap-left-card-group div:nth-child(2){
		order: 1 !important;
	}
}

/* Row Wraps */

@container container-group (max-width: 1050px) {
	.stack-on-tablet{
		flex-wrap: wrap !important;
	}
}

/* Flex Direction */

.flex-row-reverse{
	flex-direction: row-reverse;
}

.flex-row{
	flex-direction: row;
}


/* Card */

.flex-card{
	flex-basis: 400px;
 	flex-grow: 1;
}


/* Backdrop-blur for Cards on Banners */

.backdrop-blur{
	backdrop-filter: blur(5px);
}


/* Semi Transparent Backgrounds */

.primary-bg{
	background: color-mix(in srgb, var(--wp--preset--color--primary) , transparent 15%);
}

.secondary-bg{
	background: color-mix(in srgb, var(--wp--preset--color--secondary) , transparent 15%);
}

.note1-bg{
	background: color-mix(in srgb, var(--wp--preset--color--note-1) , transparent 15%);
}

.note2-bg{
	background: color-mix(in srgb, var(--wp--preset--color--note-2) , transparent 15%);
}

/* Text Shadows */

.text-shadow-base :where(p, h1, h2, h3, h4, h5){
	text-shadow: 2px 2px 8px var(--wp--preset--color--note-1);
}

.text-shadow-base-sharp :where(p, h1, h2, h3, h4, h5){
	text-shadow: 2px 2px 2px var(--wp--preset--color--note-1);
}

.text-shadow-contrast :where(p, h1, h2, h3, h4, h5){
	text-shadow: 2px 2px 8px var(--wp--preset--color--primary);
}

.text-shadow-contrast-sharp :where(p, h1, h2, h3, h4, h5){
	text-shadow: 2px 2px 2px var(--wp--preset--color--primary);
}


/* Object Orders */

.order-1{
	order: 1
}

.order-2{
	order: 2
}

.order-3{
	order: 3
}

.order-4{
	order:4
}

@container container-group (max-width: 1050px){
	.order-t-1{
		order: 1
	}

	.order-t-2{
		order: 2
	}

	.order-t-3{
		order: 3
	}

	.order-t-4{
		order: 4
	}
}


@container container-group (max-width: 600px){
	.order-m-1{
		order: 1
	}

	.order-m-2{
		order: 2
	}

	.order-m-3{
		order: 3
	}

	.order-m-4{
		order: 4
	}
}

/* Negative Top Margins */

.negative-margin-top-xs{
	margin-top: calc(var(--wp--preset--spacing--20) * -1) !important;
	position: relative;
	z-index: 10;
}

.negative-margin-top-sm{
	margin-top: calc(var(--wp--preset--spacing--40) * -1) !important;
	position: relative;
	z-index: 10;
}

.negative-margin-top-md{
	margin-top: calc(var(--wp--preset--spacing--60) * -1) !important;
	position: relative;
	z-index: 10;
}

.negative-margin-top-lg{
	margin-top: calc(var(--wp--preset--spacing--70) * -1) !important;
	position: relative;
	z-index: 10;
}

/* Force mobile menu to show at 1050px */
@media (max-width: 1050px) {
    /* Hide the desktop navigation items */
    .overlay-on-tablet .wp-block-navigation:not(.has-modal-open) .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
        display: none ;
    }
    
    /* Show the mobile menu button (hamburger) */
    .overlay-on-tablet .wp-block-navigation__responsive-container-open {
        display: flex ;
    }
    
    /* Alternative selectors for the mobile button in case above doesn't work */
    .overlay-on-tablet .wp-block-navigation__responsive-container-close,
    .overlay-on-tablet .wp-block-navigation-submenu__toggle {
        display: block ;
    }
}

@media (min-width: 1051px) {
    /* Show desktop navigation */
    .overlay-on-tablet .wp-block-navigation:not(.has-modal-open) .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
        display: block ;
    }
    
    /* Hide mobile menu button on desktop */
    .overlay-on-tablet .wp-block-navigation__responsive-container-open {
        display: none ;
    }
}

/* Force the Navigation block to always show mobile button when needed */
.overlay-on-tablet .wp-block-navigation__responsive-container-open {
    display: none;
}

@media (max-width: 1050px) {
    .overlay-on-tablet .wp-block-navigation__responsive-container-open {
        display: flex ;
    }
}