/*
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.2
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;
  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;
}
hr.ninja-forms-field {
  display: none;
} */
.entry-content ul {
  list-style-position: inside;
}
label {
  width: 100%;
  display: block;
}

::placeholder {
  color: var(--wp--preset--color--gray-200);
  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;
} */

h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a {
  font-size: inherit;
}
/* 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;
}

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

/* Utility classes
---------------------------------------------------------------------------- */
.truncate {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mt-auto {
  margin-top: auto;
}
.ml-auto {
  margin-left: auto;
  margin-right: 0;
}
.mr-auto {
  margin-right: auto;
  margin-left: 0;
}
.mx-auto {
  margin-left: auto;
  margin-right: auto;
}
.my-auto {
  margin-top: auto;
  margin-bottom: auto;
}
/* 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.sticky {
  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);
}

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

.tw-stretched-link.has-brand-yellow-50-background-color {
  transition: all 0.3s ease-in-out;
}

.tw-stretched-link.has-brand-yellow-50-background-color:hover {
  background-color: var(--wp--preset--color--brand-yellow-100) !important;
  transition: all 0.3s ease-in-out;
}

.wp-block-details {
  border-radius: var(--wp--custom--border-radius--default);
  border: 1px solid var(--wp--custom--color--border);
  background: var(--wp--preset--color--white);
  padding: var(--wp--preset--spacing--30);
}
.wp-block-details summary {
  display: flex;
  position: relative;
  gap: var(--wp--preset--spacing--5);
  align-items: center;
  justify-content: space-between;
}

.wp-block-details summary svg {
  display: none;
  width: 24px;
}

.wp-block-details summary::after {
  content: "+";
  font-size: 1.5rem;
  font-weight: 300;
}

.wp-block-details[open] summary::after {
  content: "-";
}
.wp-block-details summary {
  position: relative;
}
.wp-block-details summary::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

/* tabs styles  */
.tabs-container .tab-list {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0 0 1rem 0;
}

.tabs-container .tab-list li {
  padding: 0.5rem 1rem;
  cursor: pointer;
  border-bottom: 2px solid transparent;
}

.tabs-container .tab-list li.active {
  border-bottom: 2px solid #000;
}

.tabs-container .tab-content .tab-panel {
  display: none;
  padding: 1rem 0;
}

.tabs-container .tab-content .tab-panel.active {
  display: block;
}
.toc-menu {
  position: sticky;
  top: calc(var(--wp-admin--admin-bar--height, 0px) + 10rem);
  max-height: calc(100vh - var(--wp-admin--admin-bar--height, 0px) - 2rem);
  overflow-y: auto;
  border-radius: var(--wp--custom--border-radius--default);
  padding: var(--wp--preset--spacing--30);
  background-color: var(--wp--preset--color--white);
}
.toc-menu h3 {
  margin-top: 0;
  margin-bottom: 0;
}
.toc-menu ul {
  background-color: var(--wp--preset--color--gray-50);
  /* padding: 0; */
  padding: var(--wp--preset--spacing--20);
  display: flex;
  flex-direction: column;
}
.toc-menu ul li {
  line-height: 1;
}
.toc-menu ul li::marker {
  font-size: 0;
}
.toc-menu ul li a {
  text-decoration: none;
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  color: var(--wp--preset--color--gray-500);
}
.toc-menu ul li a.active {
  font-weight: 600;
  transition: all 0.3s ease-in-out;
  color: var(--wp--preset--color--black);
}
.toc-menu ul li a:after {
  content: "";
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 50px;
  transition: all 0.3s ease-in-out;
  background-color: transparent;
}
.toc-menu ul li a.active:after {
  background-color: var(--wp--preset--color--black);
  transition: all 0.3s ease-in-out;
}
.wp-embed-responsive .wp-embed-aspect-16-9 .wp-block-embed__wrapper:before {
  padding-top: 0;
}

#closeButton {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 99;
  border: 2px solid #fff;
  height: auto;
}

#closeButton:after {
  background-image: url("data:image/svg+xml,%3Csvg stroke='%23fff' fill='%23fff' stroke-width='0' viewBox='0 0 512 512' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M405 136.798L375.202 107 256 226.202 136.798 107 107 136.798 226.202 256 107 375.202 136.798 405 256 285.798 375.202 405 405 375.202 285.798 256z'%3E%3C/path%3E%3C/svg%3E");
}

/* search styles */
form[role="search"] {
  position: relative;
  display: flex;
  align-items: center;
}
form[role="search"] button {
  background-color: transparent;
  padding: 0;
  border: none;
  align-items: center;
}
a:hover {
  color: var(--wp--custom--button--primary-text-hover);
  text-decoration: none;
}
.single-post .entry-content *,
.single-post .entry-content {
  max-width: 100% !important;
}

body.single-post .posts-hero,
.pill {
  background-color: var(--wp--preset--color--brand-yellow-50) !important;
}
body.category-news .posts-hero,
.pill.cat-news,
.cat-news {
  background-color: var(--wp--preset--color--brand-do-100) !important;
}
body.category-events .posts-hero,
.pill.cat-events,
.cat-events {
  background-color: var(--wp--preset--color--brand-dg-50) !important;
}
/* .pill,
.post-category.pill {
  display: none;
}
.pill.cat-news,
.pill.cat-events {
  display: inline-block;
} */
/*
 a:where(:not(.wp-element-button)) {
  font-size: var(--wp--preset--font-size--medium) !important;
} */
:where(.editor-styles-wrapper) p {
  font-size: var(--wp--preset--font-size--medium) !important;
}
.has-small-font-size,
.has-small-font-size a,
a.has-small-font-size,
p.has-small-font-size {
  font-size: var(--wp--preset--font-size--small) !important;
}

.wp-block-column.is-vertically-aligned-stretch img {
  border-radius: 0;
}

/* Base layout */
.filters-grid {
  display: grid;
  grid-template-columns: 250px 1fr;
  gap: 2rem;
}

/* Mobile filter button */
.mobile-filter {
  display: none;
  margin-bottom: 1rem;
}

.filter-toggle-btn {
  background-color: #333;
  color: #fff;
  border: none;
  border-radius: 50px;
  padding: 0.6rem 1.2rem;
  cursor: pointer;
  display: flex;
  gap: 0.5rem;
  align-items: center;
  justify-content: center;
}

/* Mobile styles */
@media (max-width: 768px) {
  .filters-grid {
    display: block;
  }

  .mobile-filter {
    display: block;
  }

  .filters {
    position: fixed;
    top: 0;
    left: 0;
    width: 85%;
    max-width: 320px;
    height: 100%;
    background: #fff;
    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.2);
    padding: 1.5rem;
    overflow-y: auto;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    z-index: 1000;
  }

  .filters.show {
    transform: translateX(0);
  }

  /* Optional overlay */
  body.show-filters::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 999;
  }
}