/*
Theme Name: 12k Mastering
Theme URI: https://www.3n.design
Description: This is a custom theme for 12k Mastering, designed and developed by 3n Design.
Author: 3n Design
Author URI: https://www.3n.design
Version: 1.0
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------

	0. 	CSS Reset
	1. 	Variables
	2.	Typography
	3. 	Layout Base
	4. 	UI Elements
	5. 	Site Header
	6. 	Menu Modal
	7. 	Page Header
	8.  Grid Model
    9.  Carousel Model
	10.	Templates
	11. Entry Content
	12. Blocks
	13. Site Pagination
	14. Site Footer
    15. Transitions
	15. Accessibility

-------------------------------------------------------------- */

/* --------------------------------------------------------------
= 0. CSS Reset
-------------------------------------------------------------- */

html {
	box-sizing: border-box;
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
	text-rendering: optimizeSpeed;
}
html,
body {
	border: none;
	margin: 0;
	padding: 0;
}
h1, h2, h3, h4, h5, h6,
p, blockquote, address, big,
cite, code, em, font, img,
small, strike, sub, sup,
li, ol, ul, dl, dt, dd,
fieldset, form, label, legend, button,
table, caption, tr, th, td {
	border: none;
	font-size: inherit;
	line-height: inherit;
	margin: 0;
	padding: 0;
	text-align: inherit;
}
blockquote::before,
blockquote::after {
	content: "";
}
article, aside, details, figcaption, figure, 
footer, header, hgroup, main, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
a {
	text-decoration: none;
	color: inherit;
}
p {
	margin: 0;
}
ol, ul, menu {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote::after,
q::before, q::after {
	content: '';
	content: none;
}
img,
picture,
video,
canvas,
svg {
	display: block;
	max-width: 100%;
}
*, *::before, *::after {
	box-sizing: inherit;
}
* {
	-webkit-tap-highlight-color: transparent !important;
}
button,
input,
textarea {
	-webkit-appearance: none;
	        appearance: none;
}
input,
button,
textarea,
select {
	font: inherit;
}
figure {
	margin: 0 !important;
}

/* --------------------------------------------------------------
= 1. Variables
-------------------------------------------------------------- */

:root {
	--bs--color--primary: ;
	--bs--color--secondary: ;
	--bs--color--tertiary: ; 
	--bs--color--background: ;
	--bs--header: ;
    --bs--footer: ;
	--bs--gutter: ;
	--bs--margin: ;
	--bs--section--gap: ;
	--bs--block--gap: ;
}
@media ( min-width: 768px ) {
}
@media ( min-width: 1024px ) {

}
@media ( min-width: 1280px ) {

}

/* --------------------------------------------------------------
= 2. Typography
-------------------------------------------------------------- */

:focus {
	outline: 2px solid var(--bs--color--secondary);
	outline-offset: 2px;
}

/* --------------------------------------------------------------
= 3. Layout Base
-------------------------------------------------------------- */

/* --------------------------------------------------------------
= 4. UI Elements
-------------------------------------------------------------- */

/* Hamburger ------------------------------------------------- */

#hamburger {
    background: transparent;
    border: none;
    display: block;
	height: 14px;
    position: relative;
    width: 18px;
	vertical-align: bottom;
	-webkit-appearance: none;
}
#hamburger > span {
    height: 14px;
	position: absolute;
        top: 0;
        left: 0;
    width: 18px;
}
#hamburger > span:before,
#hamburger > span:after {
	content: '';
}
#hamburger > span:before,
#hamburger > span:after,
#hamburger > span span {
	background-color: var(--bs--color--primary);
	display: block;
	height: 2px;
	position: absolute;
		right: 0;
	width: 18px;
	transition: all 300ms ease;
}
#hamburger > span:hover:before,
#hamburger > span:hover:after,
#hamburger > span:hover span {
	background-color: var(--bs--color--secondary);
}
#hamburger > span:before {
	top: 0px;
}
#hamburger > span span {
	top: 6px;
}
#hamburger > span:after {
	top: 12px;
}
.menu--active #hamburger > span:before {
	transform: rotate(-45deg);
}
.menu--active #hamburger > span:after {
	transform: rotate(45deg);
}
.menu--active #hamburger > span:before,
.menu--active #hamburger > span:after {
    top: 6px;
	background-color: var(--bs--color--background);
}
.menu--active #hamburger > span span,
.menu--active #hamburger > span:hover span {
	background-color: transparent;
}
.menu--active #hamburger > span:hover:before,
.menu--active #hamburger > span:hover:after {
	background-color: var(--bs--color--tertiary);
}

/* --------------------------------------------------------------
= 5. Site Header
-------------------------------------------------------------- */

/* --------------------------------------------------------------
= 6. Menu Modal
-------------------------------------------------------------- */

/* --------------------------------------------------------------
= 7. Page Header
-------------------------------------------------------------- */

/* --------------------------------------------------------------
= 8. Grid Model
-------------------------------------------------------------- */

/* --------------------------------------------------------------
= 9. Carousel Model
-------------------------------------------------------------- */

#carousel {
    height: calc(100vh - var(--bs--header));
    max-height: 964px;
	padding: 0 0 var(--bs--header);
    position: relative;
}
.slider {
	display: block;
	list-style: none;
    height: 0;
	margin: 0;
    padding-bottom: calc(100% + 102px);
	position: relative;
	width: 100%;
}
.slider .slide {
	position: absolute;
		top: 0;
		left: 0;
    width: 100%;
 }
.slider .slide figure {
	height: 0;
    overflow: hidden;
	padding-bottom: 100%;
    position: relative;
	width: 100%;
}
.slider .slide figure img {
    display: block;
    height: 100%;
    position: absolute;
        top: 0;
        left: 50%;
    transform: translateX(-50%);
    width: auto;
}
.slider .slide .entry-title {
    font-size: 1.666em;
    line-height: 60px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.slide--nav_tabs {
	line-height: 10px;
	margin: 0;
	position: absolute;
		bottom: -20px;
		right: 0;
	width: 100%;
	z-index: 200;
	text-align: center;
}
.slide--nav_tabs li {
	background-color: var(--bs--color--secondary);
	border-radius: 5px;
	display: inline-block;
	height: 10px;
	margin: 0 3px;
	overflow: hidden;
	position: relative;
	width: 10px;
}
.slide--nav_tabs li.slide--nav_here {
	background-color: var(--bs--color--primary);
}
.slide--nav_tabs li a {
	position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
	text-indent: -9999px;
}
.slide--nav_nav {
	display: none;
}
@media all and (min-width: 375px) {
    .slider {
        padding-bottom: calc(120% + 102px);
    }
    .slider .slide figure {
        padding-bottom: 120%;
    }
}
@media all and (min-width: 768px) {
    .slider {
        padding-bottom: calc(75% + 102px);
    }
    .slider .slide figure {
        padding-bottom: 75%;
    }
    .slider .slide .entry-title {
        font-size: 2em;
    }
	.slide--nav_nav {
		display: block;
		height: 100%;
		position: absolute;
			top: 0;
		width: calc(var(--bs--margin) + var(--bs--gutter));
		z-index: 300;
	}
	.slide--nav_nav.prev {
		left: calc(var(--bs--margin) + var(--bs--gutter) * -1);
	}
	.slide--nav_nav.next {
		right: calc(var(--bs--margin) + var(--bs--gutter) * -1);
	}

}
@media all and (min-width: 1024px) {
    .slider {
        padding-bottom: calc(42.86% + 102px);
    }
    .slider .slide figure {
        height: auto;
        padding-bottom: 0;
    }
    .slider .slide figure img {
        height: auto;
        position: relative;
            top: 0;
            left: 0;
        transform: translateX(0);
        width: 100%;
    }
}

/* --------------------------------------------------------------
= 10. Templates
-------------------------------------------------------------- */

/* --------------------------------------------------------------
= 11. Entry Content
-------------------------------------------------------------- */

.entry-content {
	line-height: 1.5em;
    margin-bottom: var(--bs--section--gap);
}
.entry-content a {
	color: var(--bs--color--primary);
	text-decoration: underline;
	transition: color 300ms ease;
}
.entry-content a:hover {
	color: var(--bs--color--secondary);
}
.entry-content p,
.entry-content ul,
.entry-content dl,
.entry-content ol,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6,
.entry-content blockquote {
	margin-bottom: var(--bs--block--gap);
}
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6 {
    padding-bottom: 1.2em;
    position: relative;
}
.entry-content h3:after,
.entry-content h4:after,
.entry-content h5:after,
.entry-content h6:after,
.entry-content blockquote:before,
.entry-content blockquote:after {
    background-color: var(--bs--color--tertiary);
    content: '';
    display: block;
    height: 1px;
    position: absolute;
        right: var(--bs--margin);
        left: var(--bs--margin);
}
.entry-content h3:after,
.entry-content h4:after,
.entry-content h5:after,
.entry-content h6:after,
.entry-content blockquote:after {
    bottom: 0;
}
.entry-content blockquote:before {
    top: 0;
}
.entry-content > *:last-child {
    margin-bottom: 0;
}
.entry-content ul {
	list-style: disc outside;
	padding-left: var(--bs--block--gap);
}
.entry-content ul ul {
	list-style: circle outside;
	margin-bottom: 0;
	padding-left: var(--bs--block--gap);
}
.entry-content .has-text-align-center {
	text-align: center;
}
.entry-content blockquote {
	font-size: 1.066em;
	padding-top: calc(var(--bs--margin) * 2);
    padding-bottom: calc(var(--bs--margin) * 2);
    position: relative;
}
.entry-content blockquote p {
	line-height: 1.125em;
}
.entry-content blockquote p:only-child,
.entry-content blockquote p:nth-last-child(2) {
	margin-bottom: 0;
}
.entry-content blockquote cite {
	font-size: 0.75em;
}
.entry-content hr.wp-block-separator {
	border-top: 1px solid var(--bs--color--tertiary);
	border-bottom: none;
	margin-bottom: calc(var(--margin) * 2);
}
.entry-content iframe {
    display: block;
}
@media ( min-width: 768px ) {
	.entry-content,
    .entry-content h3,
    .entry-content h4,
    .entry-content h5,
    .entry-content h6 {
		font-size: 1.2em;
	}
    .wp-block-syntaxhighlighter-code {
        font-size: 0.8333em;
    }
	.entry-content .has-small-font-size {
		font-size: 0.75em;
		line-height: 1.5em;
	}
	.entry-content blockquote {
        padding-top: var(--bs--block--gap);
        padding-bottom: var(--bs--block--gap);
	}
	.entry-content hr.wp-block-separator {
		margin-bottom: var(--bs--block--gap);
	}
}
@media all and (min-width: 1280px) {
	.entry-content blockquote {
		font-size: 1.5em;
        padding-top: calc(var(--bs--margin) * 1.5);
        padding-bottom: calc(var(--bs--margin) * 1.5);
	}
}

/* --------------------------------------------------------------
= 12. Blocks
-------------------------------------------------------------- */

.entry-content > * {
    max-width: 840px;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 0 var(--bs--margin);
}
.entry-content > figure:first-child,
.entry-content .entry-details + figure:nth-child(2) {
    padding-top: 0.5em !important;
}
.entry-content .alignfull {
    max-width: calc(100% + var(--bs--gutter) * 2);
}
@media ( min-width: 768px ) {
    .entry-content > * {
        max-width: 75%;
    }
    .entry-content > .alignwide,
    .entry-content > .alignleft,
    .entry-content > .alignright {
        max-width: 100%;
    }
    .entry-content > .aligncenter {
        max-width: 50%;
    }
}
@media ( min-width: 1024px ) {
    .entry-content > * {
        max-width: 50%;
    }
    .entry-content > .aligncenter > * {
        max-width: calc(100% / 3);
    }
    .entry-content > .alignleft,
    .entry-content > .alignright {
        max-width: 75%;
    }
    .entry-content > .alignleft {
        margin-right: 25% !important;
    }
    .entry-content > .alignright {
        margin-left: 25% !important;
    }
}

/* Block: Image  --------------------------------------------- */

.entry-content img {
	display: block;
	height: auto;
	max-width: 100%;
}
.entry-content > .wp-block-image {
    margin-bottom: var(--bs--block--gap) !important;
}
.entry-content .wp-block-image figcaption {
	line-height: 1.5em;
	padding: 5px 0 0;
}
@media ( min-width: 768px ) {
    .entry-content .wp-block-image figcaption {
        font-size: 0.75em;
    }	
}
@media ( min-width: 1024px ) {
	.alignright figcaption {
		text-align: right;
	}
}

/* Block: Button --------------------------------------------- */

.wp-block-button {
    margin-bottom: var(--bs--block--gap);
}

/* Block: Columns -------------------------------------------- */

.entry-content > .wp-block-columns {
    padding-right: 0;
    padding-left: 0;
}
.entry-content > .wp-block-columns > .wp-block-column {
    margin-bottom: var(--bs--block--gap);
    padding: 0 var(--bs--margin);
}
@media ( min-width: 768px ) {
    .entry-content > .wp-block-columns {
        margin-bottom: var(--bs--block--gap);
    }
    .entry-content > .wp-block-columns > .wp-block-column {
        margin-bottom: 0;
    }
}

/* Block: Embed ---------------------------------------------- */

.wp-block-embed,
.wp-block-video {
    margin-bottom: var(--bs--block--gap) !important;
}
.wp-block-video audio,
.wp-block-video video,
.wp-block-embed iframe {
	width: 100%;
}
.wp-block-embed .wp-block-embed__wrapper {
	height: 0;
	padding-bottom: 56.25%;
	position: relative;
}
.wp-block-embed.wp-embed-aspect-4-3 .wp-block-embed__wrapper {
	padding-bottom: 75%; /* 4:3 */
}
.wp-block-embed.wp-embed-aspect-16-9 .wp-block-embed__wrapper {
	padding-bottom: 56.25%; /* 16:9 */
}
.wp-block-embed.wp-embed-aspect-21-9 .wp-block-embed__wrapper {
	padding-bottom:  41.5625%; /* 21:9 */
}
.wp-block-embed .wp-block-embed__wrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
@media ( min-width: 768px ) {
	.wp-block-embed,
	.wp-block-video {
		width: 75%;
	}
}
@media ( min-width: 1024px ) {
	.wp-block-embed,
	.wp-block-video {
		width: 50%;
	}
}

/* --------------------------------------------------------------
= 13. Site Pagination
-------------------------------------------------------------- */

/* --------------------------------------------------------------
= 14. Site Footer
-------------------------------------------------------------- */

/* --------------------------------------------------------------
= 15. Transitions
-------------------------------------------------------------- */

/* --------------------------------------------------------------
= 16. Accessibility
-------------------------------------------------------------- */

/* Text meant only for screen readers. */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	background-color: #f1f1f1;
	border-radius: 3px;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	clip: auto !important;
	clip-path: none;
	color: #21759b;
	display: block;
	font-size: 0.875rem;
	font-weight: 700;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
}
/* Do not show the outline on the skip link target. */
#primary[tabindex="-1"]:focus {
	outline: 0;
}