/*
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.1.001
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;
}

b,
strong {
  font-weight: 600;
}

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

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

:where(:focus-visible, :focus) {
  outline-style: dotted;
  outline-width: 1px;
  outline-offset: 3px;
  outline-color: var(--wp--custom--color--ring);
}

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 {
  color: var(--wp--preset--color--text);
  border-radius: 5px;
  border: 1px solid var(--wp--custom--color--border);
  overflow: hidden;
  width: 100%;
  background-color: var(--wp--preset--color--gray-50);
}

input:not([type="submit"]),
textarea {
  font-size: var(--wp--preset--font-size--small);
}

input:not([type="submit"]),
select:not([multiple]),
select[multiple] option,
textarea {
  padding: 0.5em;
}

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

li:has(input:is([type="checkbox"], [type="radio"])) {
  display: grid;
  grid-template-columns: 1em auto;
  gap: 0.5em;
}

.list-checkbox-wrap .nf-field-element li input,
.list-image-wrap .nf-field-element li input,
.list-radio-wrap .nf-field-element li input {
  margin: 0;
}

.list-checkbox-wrap .nf-field-element li label,
.list-image-wrap .nf-field-element li label,
.list-radio-wrap .nf-field-element li label {
  margin-inline-start: 0.5em;
}

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

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

/* buttons */
input[type="submit"],
.nf-field-element :is(button) {
  background-color: var(--wp--custom--button--primary-background);
  color: var(--wp--custom--button--primary-text);
  border-radius: var(--wp--custom--button--border-radius);
  padding-block: 0.33rem;
  padding-inline: 1rem;
  cursor: pointer;
  box-shadow: none;
  outline: none;
  border: none;
}
input:not([type="submit"]),
select,
textarea {
  background-color: transparent;
}
.nf-error-msg,
.ninja-forms-req-symbol {
  color: var(--wp--preset--color--status-error);
}

.nf-error.listimage-wrap .nf-field-element ul,
.nf-error .ninja-forms-field {
  border-color: var(--wp--preset--color--status-error);
}
/* #nf-form-1-cont select:not(.nf-row:first-child .field-wrap select),
#nf-form-1-cont textarea:not(.nf-row:first-child .field-wrap textarea) */
/* #nf-form-1-cont input:not([type="submit"]) {
  border: none;
} */
#nf-form-1-cont .nf-row .field-wrap,
#nf-form-4-cont .nf-row .field-wrap {
  border-radius: var(--wp--custom--button--border-radius);
  border: 1px solid #ccc;
  border: none;
  position: relative;
}
#nf-form-1-cont .nf-row .submit-container .field-wrap,
#nf-form-4-cont .nf-row .submit-container .field-wrap {
  border: none !important;
}
#nf-form-1-cont .nf-field-label label,
#nf-form-4-cont .nf-field-label label {
  position: absolute;
  top: -14px;
  width: max-content;
  background-color: var(--wp--preset--color--white);
  left: 0.5rem;
  padding: 0 0.125rem;
  z-index: 1;
  font-size: var(--wp--preset--font-size--small) !important;
}

/* 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 {
  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.sticking {
  position: sticky;
}
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);
}
.bg-size-auto {
  background-size: auto !important;
}

.has-white-color.has-text-color,
.has-text-color.has-background-color {
  color: var(--wp--preset--color--white) !important;
}

details:last-child {
  border-bottom: 0px solid transparent;
}

.no-disc-white-bg {
  list-style-type: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  max-width: max-content;
  margin-left: 0 !important;
}
.no-disc-white-bg li {
  background-color: #fff;
  padding: 0.25rem 1rem;
  border-radius: 0.25rem;
}
.wpdr-instructions * + * {
  margin-top: var(--wp--preset--spacing--10);
}
.wpdr-instructions h1,
.wpdr-instructions h2,
.wpdr-instructions h3,
.wpdr-instructions h4,
.wpdr-instructions h5,
.wpdr-instructions h6,
.wpdr-instructions p,
.dr-archive-list-gridwrap h1,
.dr-archive-list-gridwrap h2,
.dr-archive-list-gridwrap h3,
.dr-archive-list-gridwrap h4,
.dr-archive-list-gridwrap h5,
.dr-archive-list-gridwrap h6,
.dr-archive-list-gridwrap p {
  margin: 0;
}
.wpdr-instructions {
  display: flex;
  flex-direction: column;
}
.dr-archive-list-gridwrap {
  display: flex;
  gap: var(--wp--preset--spacing--20);
  margin-left: 0;
}
@media screen and (min-width: 767px) {
  .dr-archive-list-gridwrap {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(20rem, 1fr));
  }
}
.related-recipe-item {
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--10);
}
.related-recipe-item a {
  text-decoration: none;
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--10);
  height: 100%;
}
.related-recipe-item img {
  width: 100%;
  display: block;
}
.related-recipe-item .wp-block-button {
  margin-top: auto;
}
.wp-block-post-featured-image {
  width: 100%;
  overflow: hidden;
}

.post-type-archive-recipe .wp-block-post:hover .wp-block-post-featured-image,
.related-recipe-item-thumbnail {
  opacity: 1;
  transition: all 200ms;
  position: relative;
}
.post-type-archive-recipe .wp-block-post .wp-block-post-featured-image::after,
.related-recipe-item-thumbnail::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: all 900ms ease;
  opacity: 0;
}

.post-type-archive-recipe
  .wp-block-post:hover
  .wp-block-post-featured-image::after,
.related-recipe-item a:hover .related-recipe-item-thumbnail::after {
  opacity: 1;
  background: rgba(0, 0, 0, 0.2);
}

.wp-block-image a {
  line-height: 1;
}

@media screen and (max-width: 767px) {
  .bg-hide-mob {
    background-image: none !important;
  }
}
.is-style-is-carousel .wp-block-image img {
  width: 100%;
}

/* facet styles */
.facetwp-facet {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wp--preset--spacing--20);
  margin-bottom: var(--wp--preset--spacing--20);
  margin-bottom: 0 !important;
  justify-content: center;
}

.facetwp-checkbox {
  position: relative;
  background: none !important;
  padding: 0 !important;
}

.facetwp-checkbox .facetwp-display-value,
.facetwp-clear {
  background-color: var(--wp--custom--button--primary-background);
  border-radius: var(--wp--custom--button--border-radius);
  border-color: var(--wp--custom--button--primary-background);
  border-width: var(--wp--custom--button--border-width);
  color: var(--wp--custom--button--primary-text);
  font-family: var(--wp--preset--font-family--inter);
  font-size: var(--wp--preset--font-size--small);
  font-style: normal;
  font-weight: 400;
  line-height: inherit;
  padding-top: var(--wp--custom--button--padding-block);
  padding-right: var(--wp--custom--button--padding-inline);
  padding-bottom: var(--wp--custom--button--padding-block);
  padding-left: var(--wp--custom--button--padding-inline);
  text-decoration: none;
  transition: all 300ms;
}
.facetwp-clear {
  min-width: max-content;
  line-height: 1;
  border-style: solid;
  cursor: pointer;
  background: var(--wp--preset--color--gray-50);
  color: #000;
  border-color: var(--wp--preset--color--gray-50);
}
.facetwp-clear:hover {
  background-color: var(--wp--custom--button--primary-background);
  border-color: var(--wp--custom--button--primary-background);
  border-width: var(--wp--custom--button--border-width);
  color: var(--wp--custom--button--primary-text);
}
.facetwp-checkbox.checked .facetwp-display-value {
  background-color: var(--wp--preset--color--gray-200);
  color: var(--wp--custom--button--primary-background);
  transition: all 300ms;
}

.facetwp-checkbox .facetwp-display-value:hover {
  background-color: var(--wp--custom--button--primary-background-hover);
  color: var(--wp--custom--button--primary-text);
  transition: all 300ms;
}

.facetwp-checkbox .facetwp-counter {
  display: none;
}

.recipe-grid {
  display: grid;
  width: 100%;
  max-width: 100%;
  gap: var(--wp--preset--spacing--20);
}
@media screen and (min-width: 767px) {
  .recipe-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.recipe-grid-item {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--wp--preset--spacing--5);
  flex-direction: column;
  align-items: flex-start;
  position: relative;
}

.recipe-grid .post-thumbnail {
  position: relative;
}

.recipe-grid .post-thumbnail img {
  aspect-ratio: 4/3;
  margin-bottom: 0;
  padding-bottom: 0;
}

.recipe-grid-item a {
  text-decoration: none;
}

.recipe-grid-item a::before {
  content: "";
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 1;
}

.recipe-grid .post-thumbnail:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 1;
  background: transparent;
  opacity: 0;
  transition: all 900ms ease;
}

.recipe-grid .recipe-grid-item:hover .post-thumbnail:after {
  opacity: 1;
  background: rgba(0, 0, 0, 0.2);
  transition: all 900ms ease;
}
.wp-block-social-links .wp-social-link svg {
  height: 2.5rem;
  width: 2.5rem;
}