/*
Theme Name: Flux
Theme URI:
Author: Kings Digital
Author URI: https://www.kingsdigital.com.au/
Description: Flux is a minimalist, versatile and adaptable theme designed to be applicable to any website. It contains a collection of templates and patterns tailor to different needs and to speed up site building process. It is fully compatible with the site editor, and takes advantage of new design tools introduced in WordPress 6.4. It also contains custom code designed to improve site performance and speed.
Requires at least: 6.0
Tested up to: 6.4.3
Requires PHP: 5.7
Version: 1.0.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: flux
Tags: blog, news, portfolio, one-column, wide-blocks, accessibility-ready, block-patterns, block-styles, custom-colors, custom-logo, custom-menu, editor-style, featured-images, full-site-editing, rtl-language-support, sticky-post, style-variations, threaded-comments, translation-ready
*/

/* CSS Reset
---------------------------------------------------------------------------- */
html {
	scroll-behavior: smooth;
}
*,
*::before,
*::after {
	box-sizing: inherit;
}

html {
	box-sizing: border-box;
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
}

a,
a:focus,
a:hover {
	/* text-decoration: underline; */
}

b,
strong {
	font-weight: 600;
}

ol,
ul {
	padding: 0;
}

ol:where(:not([class*='wp-block'])),
ol:where(.wp-block-list),
ul:where(:not([class*='wp-block'])),
ul:where(.wp-block-list) {
	padding-inline-start: 1.75rem;
}

div[class*='wp-block-'] figcaption {
	color: var(--wp--preset--color--secondary);
	font-size: var(--wp--preset--font-size--small);
	margin-bottom: 0;
	margin-top: 20px;
	text-align: center;
}

/* Standardize form styling
--------------------------------------------- */

input,
button,
textarea,
select {
	font: inherit;
}

input[type='button'],
input[type='email'],
input[type='search'],
input[type='submit'],
input[type='text'],
textarea {
	-webkit-appearance: none;
}

input:not([type='submit']),
select,
textarea,
.wp-block-post-comments-form input:not([type='submit']):not([type='checkbox']),
.wp-block-post-comments-form textarea {
	color: var(--wp--preset--color--contrast);
	border-radius: 0px;
	border: none;
	border-bottom: solid 1px black;
	padding: 0.5em 1em;
	font-size: var(--wp--preset--font-size--small);
	width: 100%;
	background-color: transparent;
}

input:focus-visible,
textarea:focus-visible {
	outline-color: var(--wp--preset--color--contrast-2);
}

input[type='checkbox'],
input[type='image'],
input[type='radio'] {
	width: auto;
}

label {
	width: 100%;
	display: block;
}

::placeholder {
	color: var(--wp--preset--color--gray-500);
	font-size: var(--wp--preset--font-size--small);
	opacity: 0.75;
}

/* Helper styles that can't be done via theme.json
---------------------------------------------------------------------------- */
h1,
h2,
h3,
h4,
h5,
h6 {
	text-wrap: pretty;
}

/* Ninja Forms styles
---------------------------------------------------------------------------- */
.nf-form-fields-required {
	display: none;
}

/* fields */
.nf-field-element > * {
	/* background-color: transparent; */
}

.nf-after-field,
.nf-field-description {
	font-size: var(--wp--preset--font-size--small);
}

/* buttons */
input[type='submit'] {
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--primary);
	border-radius: 0px;
	padding-block: var(--wp--custom--button--padding-block);
	padding-inline: var(--wp--custom--button--padding-inline);
	cursor: pointer;
}

.nf-error-msg,
.ninja-forms-req-symbol {
	color: var(--wp--preset--color--status-error);
}

/* Utility classes
---------------------------------------------------------------------------- */
.truncate {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Global block styles
---------------------------------------------------------------------------- */

html {
	scroll-padding-top: calc(var(--wp-admin--admin-bar--height, 0px) + 4rem);
}

/* Header */
:where(header, header a) {
	transition: all ease 0.3s;
}

header {
	position: sticky;
	width: 100%;
	max-width: 100%;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 100; /* Adjust as needed to ensure the navbar is above other content */
	margin-block-start: 0;
	margin-block-end: 0;
}

header.is-style-transparent-overlay {
	--_bg: transparent;
	position: fixed;
}

/* Control header styling when it's sticking */
header {
	--_bg: var(--wp--custom--color--nav-bg, inherit);
	--_nav-link-color: var(--wp--custom--color--nav-link, inherit);
	background: var(--_bg);
	color: var(--_nav-link-color);
}

header.sticking {
	--_bg: var(--wp--custom--color--nav-bg-sticking, inherit);
	--_nav-link-color: var(--wp--custom--color--nav-link-sticking, inherit);
}

/* Roller Door CSS */
.has-white-color * {
	color: #fff !important;
}
.is-style-tw-hard-shadow img {
	box-shadow: 6px 6px 0 2px var(--wp--preset--color--secondary) !important;
}

.is-style-hard-shadow-other img {
	box-shadow: -6px 6px 0 2px var(--wp--preset--color--secondary);
}

/* Mega menu */
:is(
		#mega-menu-wrap-max_mega_menu_1
			#mega-menu-max_mega_menu_1
			> li.mega-menu-megamenu
			> ul.mega-sub-menu
			> li.mega-menu-item
			li.mega-menu-item
			> a.mega-menu-link,
		#mega-menu-wrap-max_mega_menu_1
			#mega-menu-max_mega_menu_1
			> li.mega-menu-megamenu
			> ul.mega-sub-menu
			li.mega-menu-column
			> ul.mega-sub-menu
			> li.mega-menu-item
			li.mega-menu-item
			> a.mega-menu-link,
		#mega-menu-wrap-max_mega_menu_1
			#mega-menu-max_mega_menu_1
			> li.mega-menu-megamenu
			> ul.mega-sub-menu
			> li.mega-menu-item
			h4.mega-block-title,
		#mega-menu-wrap-max_mega_menu_1
			#mega-menu-max_mega_menu_1
			> li.mega-menu-megamenu
			> ul.mega-sub-menu
			li.mega-menu-column
			> ul.mega-sub-menu
			> li.mega-menu-item
			h4.mega-block-title
	)::after {
	content: '';
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='10' fill='none' viewBox='0 0 20 10'%3E%3Cpath stroke='%23F7F7FF' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M15.25 1.25 19 5m0 0-3.75 3.75M19 5H1'/%3E%3C/svg%3E");
	display: inline-block;
	width: 20px;
	height: 10px;
	margin-left: 0.5em;
	transition: transform 0.3s ease;
}

:is(
		#mega-menu-wrap-max_mega_menu_1
			#mega-menu-max_mega_menu_1
			> li.mega-menu-megamenu
			> ul.mega-sub-menu
			> li.mega-menu-item
			li.mega-menu-item
			> a.mega-menu-link,
		#mega-menu-wrap-max_mega_menu_1
			#mega-menu-max_mega_menu_1
			> li.mega-menu-megamenu
			> ul.mega-sub-menu
			li.mega-menu-column
			> ul.mega-sub-menu
			> li.mega-menu-item
			li.mega-menu-item
			> a.mega-menu-link,
		#mega-menu-wrap-max_mega_menu_1
			#mega-menu-max_mega_menu_1
			> li.mega-menu-megamenu
			> ul.mega-sub-menu
			> li.mega-menu-item
			h4.mega-block-title,
		#mega-menu-wrap-max_mega_menu_1
			#mega-menu-max_mega_menu_1
			> li.mega-menu-megamenu
			> ul.mega-sub-menu
			li.mega-menu-column
			> ul.mega-sub-menu
			> li.mega-menu-item
			h4.mega-block-title
	):hover::after {
	transform: translateX(4px);
}

.all-products-submenu > .mega-menu-link {
	margin-bottom: 1rem !important;
}

.all-products-submenu > .mega-sub-menu {
	display: grid !important;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 8px;
}

/* Image and title in mega menu */

#mega-menu-item-media_image-2,
#mega-menu-item-media_image-3,
#mega-menu-item-media_image-6,
#mega-menu-item-media_image-7 {
	display: flex !important;
	flex-direction: column-reverse;
	gap: 10px;
}

#mega-menu-wrap-max_mega_menu_1 #mega-menu-max_mega_menu_1 img {
	aspect-ratio: 16/9;
}

/* Header Menu (Mobile) */

@media only screen and (max-width: 768px) {
	header > * {
		padding-block: 8px;
	}
	#mega-menu-wrap-max_mega_menu_1
		#mega-menu-max_mega_menu_1
		> li.mega-menu-item
		> a.mega-menu-link {
		padding-right: var(--wp--style--root--padding-right) !important;
		padding-left: var(--wp--style--root--padding-left) !important;
	}

	#mega-menu-wrap-max_mega_menu_1
		#mega-menu-max_mega_menu_1
		> li.mega-menu-item:not(:last-child) {
		border-bottom: 1px solid var(--wp--preset--color--white);
	}

	#mega-menu-wrap-max_mega_menu_1 #mega-menu-max_mega_menu_1 * {
		text-decoration: none !important;
	}

	.mega-menu-max_mega_menu_1-mobile-open #mega-menu-wrap-max_mega_menu_1:after {
		content: '';
		display: block !important;
		position: fixed;
		inset: 0;
		background-color: var(--wp--preset--color--primary);
		z-index: -1;
		isolation: isolate;
	}
}

#mega-menu-wrap-max_mega_menu_1
	.mega-menu-toggle
	.mega-toggle-block-0
	.mega-toggle-animated-inner::before {
	width: 50px !important;
	transform: translateX(-5px);
}

#mega-menu-wrap-max_mega_menu_1
	.mega-menu-toggle
	.mega-toggle-blocks-right
	.mega-toggle-block:only-child {
	margin: 0;
	transform: translateX(8px);
}

a.content-on-page.is-active,
li:hover > a.wp-block-navigation-item__content.content-on-page {
	text-decoration: underline;
	text-decoration-color: var(--wp--preset--color--secondary);
	text-decoration-thickness: 3px;
	text-underline-offset: 0.4em;
}

a.wp-block-navigation-item__content.content-on-page:not(.is-active) {
	color: var(--wp--preset--color--gray-400);
}

.wp-block-details.is-style-content-toggle summary {
	list-style-type: none;
}

div:has(.wp-block-details.is-style-content-toggle) {
	overflow: hidden;
}

:has(.is-position-sticky nav) div.content-section {
	opacity: 0.5;
	transition: 0.3s ease;
}

:has(.is-position-sticky nav) div.content-section.is-active {
	opacity: 1;
}
.mega-sub-menu li.mega-menu-row ul.mega-sub-menu {
    max-width: var(--wp--style--global--wide-size) !important;
    margin: 0 auto !important;
}
.widget_media_image {
	position: relative;
}
.widget_media_image a:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    display: block;
}
.mega-sub-menu li .mega-sub-menu li:hover h4:after{
	transform: translateX(4px);
}
.files_uploaded .delete {
    color: #000;
    border: 1px solid #000;
    padding: 0.125rem 0.5rem;
    text-decoration: none;
    border-radius: 0.25rem;
	transition: all 300ms;
}
.files_uploaded .delete:hover {
	background: #000;
	color: #fff;
	transition: all 300ms;
}