/*
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: 5px;
  border: solid 1px var(--wp--preset--color--contrast);
  padding: 0.5em 1em;
  font-size: var(--wp--preset--font-size--small);
  width: 100%;
}

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: var(--wp--preset--color--gray-50);
}

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

/* buttons */
input[type="submit"],
.nf-field-element button {
  background-color: var(--wp--preset--color--contrast-2);
  color: var(--wp--preset--color--base) !important;
  border-color: var(--wp--preset--color--contrast-2);
  border-radius: 0.33rem;
  padding-block: 0.33rem;
  padding-inline: 1rem;
  cursor: pointer;
}

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

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

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

/* Footer */
#back-to-top {
  display: flex;
}
.back-to-top--wrapper {
  background-color: white;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  aspect-ratio: 1;
  padding: 1rem;
}

/* header.wp-block-template-part {
  transition: top 0.3s;
  position: fixed;
  width: 100%;
  z-index: 1000;
  top: 0;
} */

.w-full {
  width: 100%;
  flex-basis: 100%;
}
.w-full.wp-block-post-title a {
  width: 100%;
  display: block;
}
.family-index-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1rem;
  max-width: 100% !important;
  list-style: none;
  word-break: break-word;
  hyphens: auto;
  overflow-wrap: break-word;
  padding: 2rem 0;
}
.family-index-grid li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  border: 1px solid #dfdfdf;
  border-radius: 6px;
  padding-top: var(--wp--preset--spacing--10);
  padding-right: var(--wp--preset--spacing--10);
  padding-bottom: var(--wp--preset--spacing--10);
  padding-left: var(--wp--preset--spacing--10);
  position: relative;
  font-size: var(--wp--preset--font-size--medium);
  transition: all 200ms;
}
.family-index-grid li:hover,
.hover-drop-shadow:hover {
  background-color: #fff;
  box-shadow: 0 0 1.5rem rgba(0, 0, 0, 0.25);
  transition: all 200ms;
}
.family-index-grid li a:after {
  content: "";
  height: 100%;
  width: 100%;
  position: absolute;
  left: 0;
  right: 0;
}
.family-index-grid li a:hover {
  color: var(--wp--preset--color--gray-600);
}
.btn {
  border-style: solid;
}
.btn.btn-back {
  cursor: pointer;
  background: transparent;
  display: flex;
  gap: 0.25rem;
  align-items: center;
  border-radius: 0.25rem;
  transition: all 200ms;
  color: #000;
}
.btn.btn-back svg {
  transition: all 200ms;
}
.btn.btn-back:hover {
  background-color: #000;
  transition: all 200ms;
  color: #fff;
}
.btn.btn-back:hover svg {
  transition: all 200ms;
  transform: translateX(-4px);
}


header.wp-block-template-part {
	margin-top: 0;
}