/*
Theme Name: The Path to Non-duality
Theme URI: 
Author: 
Author URI: 
Description: 
Requires at least: 6.0
Tested up to: 6.3.2
Requires PHP: 5.7
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Template: twentytwentythree
Text Domain: thepathtononduality
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, 
*/

/*
 * ==========================
 * Base
 * ==========================
 */

/* Dynamic height unit */
:root {
  --line-height-body: 1.5;
  --font-size-body: clamp(20px, 0.915rem + ((1vw - 3.2px) * 0.836), 22px);
  --font-size-body-lh: calc(var(--font-size-body) * var(--line-height-body));
  --fluid-unit: calc(var(--font-size-body-lh) * 1.65);
}

body {
  font-size: var(--font-size-body);
}

/* Headings */
:root h2 {
	font-size: clamp(45px, 1.918rem + ((1vw - 3.2px) * 2.649), 54px);
}

/* Image caption */
:root :is(.wp-element-caption, .wp-block-gallery figcaption, .wp-block-image figcaption, .wp-block-video figcaption) {
	font-size: clamp(16px, 0.875rem + ((1vw - 3.2px) * 0.455), 18px);
}

/*
 * ==========================
 * Header
 * ==========================
 */

/* Fix editor title-style */
.editor-styles-wrapper h1.wp-block-post-title {
  font-weight: 700;
  margin-top: 0rem;
  margin-bottom: 0rem;
}

/* Flexible spacer above header, homepage only */
body.home .flexible-spacer {
  height: 45vh !important;
}


/* Preserve line-breaks in displayed heading */
/*
@media (min-width: 28em) {
  h1 {
    white-space: pre-line;
  }
}

@media (max-width: 27.99em) {
  h1 br {
    display: none;
  }
}
*/



/*
 * ==========================
 * Footer & circle
 * ==========================
 */

/* Stick footer to bottom of window */
.wp-site-blocks {
  min-height: calc(100vh - var(--wp-admin--admin-bar--height, 0px));
  display: grid;
  grid-template-rows: auto 1fr auto;
}

/* Set footer contents to occupy the same area, overlaying each other */
.footer-wrap {
  display: grid;
	
  /* Circle container size variables */
  --circle-diameter: 900vw;  /* Adjust the percentage as needed */
  --min-visible-width: 1000;
  --max-visible-width: 2000;
  --min-height: 120;
  --max-height: 200;
  /* Adjust screen widths where the border width grows from min to max */
  --circle-border-viewport-min: 400;
  --circle-border-viewport-max: 1200;
  /* Adjust border minimum and maximum widths */
  --circle-border-width-min: 50;
  --circle-border-width-max: 50;
  --circle-border-width-dynamic: clamp(
    calc(var(--circle-border-width-min) * 1px),
    calc(
      var(--circle-border-width-min) * 1px
      + (var(--circle-border-width-max) - var(--circle-border-width-min)) * ((100vw - var(--circle-border-viewport-min) * 1px) / (var(--circle-border-viewport-max) - var(--circle-border-viewport-min)))
    ),
    calc(var(--circle-border-width-max) * 1px)
  );	
 
}
.footer-wrap > * {
  grid-area: 1 / 1;
  align-self: center;
}

/* Little circle */
.footer-wrap::before {
  --little-circle-diameter-min: 100px;
  --little-circle-diameter-fluid: 8.7vw;
  --little-circle-diameter-max: 100px;
  --little-circle-border-min: 12.25px;
  --little-circle-border-fluid: 0.87vw;
  --little-circle-border-max: 12.25px;
  content: '';
  display: block;
  width: clamp(var(--little-circle-diameter-min), var(--little-circle-diameter-fluid), var(--little-circle-diameter-max));
  height: clamp(var(--little-circle-diameter-min), var(--little-circle-diameter-fluid), var(--little-circle-diameter-max));
  border: clamp(var(--little-circle-border-min), var(--little-circle-border-fluid), var(--little-circle-border-max)) solid var(--wp--preset--color--secondary);
  background: #000031;
  left: 50%;
  top: calc(var(--circle-border-width-dynamic) / 2);
  transform: translateX(-50%) translateY(-50%);
  position: absolute;
  z-index: 2;
  border-radius: 100%;
  box-sizing: border-box;
}

/* Circle container */
.footer-circle.footer-circle {
  overflow: hidden;
  display: flex;
  justify-content: center;
  width: 100%;
  max-width: none;
  min-height: 100%;
  align-self: end;
  height: min(calc(var(--min-height) * 1px + (var(--max-height) - var(--min-height)) * ((100vw - var(--min-visible-width) * 1px) / (var(--max-visible-width) - var(--min-visible-width)))), calc(var(--max-height) * 1px));
}

/* Undo side padding, if used inside a constrained group */
.has-global-padding .footer-circle.footer-circle {
  width: calc(100% + var(--wp--style--root--padding-left) + var(--wp--style--root--padding-right));
  margin-left: calc(var(--wp--style--root--padding-left) * -1) !important;
margin-right: calc(var(--wp--style--root--padding-right) * -1) !important;
}

/* Create circle inside container */
.footer-circle::before {
  content: '';
  display: block;
  width: var(--circle-diameter);
  height: var(--circle-diameter);
  border-radius: calc(var(--circle-diameter) / 2);
  box-shadow: inset 0 0 0 var(--circle-border-width-dynamic) var(--wp--preset--color--secondary);
  flex-grow: 0;
  flex-shrink: 0;
  /* Fix rendering issue on Safari */
  transform: translateZ(0);
  pointer-events: none;
}


/*
 * ==========================
 * Trim extra leading space from font
 * ==========================
 * 
 * https://css-tricks.com/how-to-tame-line-height-in-css/
 * https://medium.com/eightshapes-llc/cropping-away-negative-impacts-of-line-height-84d744e016ce
 * http://text-crop.eightshapes.com/
 * https://codepen.io/tvanc/pen/XWbVVER?editors=0100
 */

body:not(.editor-styles-wrapper) .wp-site-blocks :is(h1, h2, h3, h4, h5, p, li, figcaption) {
  --leading-trim-top-crop: 9;
  --leading-trim-bottom-crop: 8;
  --leading-trim-crop-font-size: 22;
  --leading-trim-crop-line-height: 1.3;
  
  /* Apply values to calculate em-based margins that work with any font size */
  --leading-trim-dynamic-top-crop: calc(
    max(
      (
        var(--leading-trim-top-crop)
        + (var(--leading-trim-line-height, var(--leading-trim-crop-line-height)) - var(--leading-trim-crop-line-height))
        * var(--leading-trim-crop-font-size) / 2
      ),
      0
    )
    / var(--leading-trim-crop-font-size)
  );
  --leading-trim-dynamic-bottom-crop: calc(
    max(
      (
        var(--leading-trim-bottom-crop)
        + (var(--leading-trim-line-height, var(--leading-trim-crop-line-height)) - var(--leading-trim-crop-line-height))
        * var(--leading-trim-crop-font-size) / 2
      ),
      0
    )
    / var(--leading-trim-crop-font-size)
  );
}

body:not(.editor-styles-wrapper) .wp-site-blocks :is(h1, h2, h3, h4, h5, p, li, figcaption)::before,
body:not(.editor-styles-wrapper) .wp-site-blocks :is(h1, h2, h3, h4, h5, p, li, figcaption)::after {
  content: '';
  display: flow-root;
  height: 0;
  width: 0;
}

body:not(.editor-styles-wrapper) .wp-site-blocks :is(h1, h2, h3, h4, h5, p, li, figcaption)::before {
  margin-bottom: calc(var(--leading-trim-dynamic-top-crop) * -1em + var(--leading-trim-top-adjustment, 0px));
}

body:not(.editor-styles-wrapper) .wp-site-blocks :is(h1, h2, h3, h4, h5, p, li, figcaption)::after {
  margin-top: calc(var(--leading-trim-dynamic-bottom-crop) * -1em + var(--leading-trim-bottom-adjustment, 0px));
}

body:not(.editor-styles-wrapper) .wp-site-blocks :is(h1, h2, h3, h4, h5) {
  --leading-trim-line-height: 1.2;
  line-height: var(--leading-trim-line-height);
}

body:not(.editor-styles-wrapper) .wp-site-blocks :is(p, li, figcaption) {
  --leading-trim-line-height: 1.5;
  line-height: var(--leading-trim-line-height);
}

/* Fallback font size adjustment */
@font-face {
  font-family: "Adjusted Arial Fallback";
  font-display: swap;
  src: local("Arial");
  /* https://screenspan.net/fallback/ */
  size-adjust: 93%;
  ascent-override: 83%;
}

/*
 * ==========================
 * Images-page 
 * ==========================
 */

/* Hide Images-page title, visually only */
/* https://css-tricks.com/inclusively-hidden/ */
/*
body.page-id-294:not(.editor-styles-wrapper) .wp-block-post-title {
  clip: rect(0 0 0 0); 
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap; 
  width: 1px;
}
*/

/* Image columns, center content vertically */
.wp-block-columns.gallery-columns .wp-block-column {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/*
 * ==========================
 * Attachment page 
 * ==========================
 */

/* Fit attachment to viewport */
body.attachment div.attachment img {
  --image-padding: 2rem;
  width: calc(100% - var(--image-padding) * 2);
  height: calc(100vh - var(--image-padding) * 2);
  object-fit: contain;
  object-position: center;
  padding: var(--image-padding);
}


/*
 * ==========================
 * Misc 
 * ==========================
 */

/* Flower flexible width */
.wp-block-image.flower img {
  --flower-size: 210;
  width: calc(var(--flower-size) / 22 * 1em) !important;
}

/* Image caption margin, use fluid unit as basis */
.wp-block-image figcaption {
  margin-block: calc(var(--wp--preset--spacing--fluid-1) / 3);
}

/*
 * ==========================
 * Forms 
 * ==========================
 */


.nf-form-cont {
	--form-input-color-foreground: var(--wp--preset--color--contrast);
	--form-input-color-background: transparent;
	--form-input-color-foreground-active: var(--wp--preset--color--secondary);
	--form-input-color-background-active: transparent;
	--form-input-padding: 0.75em;
	--form-input-corner-radius: 9px;
	--form-input-border-width: 1px;
	--form-input-font-size: max(16px, 0.875em);
	--form-input-active-ring-width: 4px;
	--form-input-transition-duration: 0.25s;
	--form-color-error: magenta;
	--form-label-font-size: 1em;
	--form-label-font-weight: 400;
	--form-label-line-height: 1.2;
}

.nf-before-form-content {
	margin-bottom: var(--wp--preset--spacing--fluid-0-5);
}

.nf-form-content {
	padding: 0;
}

.nf-field-label .nf-label-span,
.nf-field-label label {
	font-weight: var(--form-label-font-weight);
	line-height: var(--form-label-line-height);
	font-size: var(--font-size-body);
}

.nf-form-content .label-above .nf-field-label,
.nf-form-content .label-below .nf-field-label,
.nf-form-content .label-hidden .nf-field-label {
	margin-bottom: 0.25em;
}

@media only screen and (max-width: 800px) {
  .nf-field-container .nf-field-label {
    margin-bottom: 0.25em !important;
  }
}


.nf-form-content .listselect-wrap .nf-field-element div,
.nf-form-content .ninja-forms-field {
	padding: var(--form-input-padding);
}


.nf-form-content .list-select-wrap .nf-field-element > div,
.nf-form-content input:not([type="button"]),
.nf-form-content textarea {
	background: var(--form-input-color-background);
	border-width: var(--form-input-border-width) !important;
	border-style: solid !important;
	border-color: var(--form-input-color-foreground);
	border-radius: var(--form-input-corner-radius);
	box-shadow: none;
	color: var(--form-input-color-foreground);
	transition: box-shadow var(--form-input-transition-duration) ease;
	box-shadow: 0 0 0 0 var(--form-input-color-foreground);
}

.nf-form-content .list-select-wrap .nf-field-element > div:focus,
.nf-form-content input:not([type="button"]):focus,
.nf-form-content textarea:focus {
	background: transparent;
	border-color: var(--form-input-color-foreground-active);
	color: var(--form-input-color-foreground--active);
	outline: none;
	transition: box-shadow var(--form-input-transition-duration) ease;
	box-shadow: 0 0 0 var(--form-input-active-ring-width) var(--form-input-active-ring-color, var(--form-input-color-foreground-active));

}

.nf-form-content .listselect-wrap .nf-field-element div,
.nf-form-content input.ninja-forms-field,
.nf-form-content select.ninja-forms-field:not([multiple]) {
	height: auto;
	font-size: var(--form-input-font-size);
	font-family: var(--wp--preset--font-family--vera-humana-95);
}

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

.nf-error .ninja-forms-field {
	--form-input-active-ring-color: var(--form-color-error);
	border-color: var(--form-color-error) !important;
}

.nf-form-content textarea.ninja-forms-field {
	font-size: var(--form-input-font-size);
	font-family: var(--wp--preset--font-family--vera-humana-95);
	height: 10em;
}

.nf-error.field-wrap .nf-field-element::after {
	background: var(--form-color-error);
	border-radius: 0 var(--form-input-corner-radius) var(--form-input-corner-radius) 0;
	top: 0px;
	right: 0px;
	bottom: 0px;
	height: 100%;
}

.nf-error.field-wrap.textarea-wrap .nf-field-element::after {
	border-radius: 0 var(--form-input-corner-radius) 0 var(--form-input-corner-radius);
	height: 50px;
}


.nf-form-content button,
.nf-form-content input[type="button"],
.nf-form-content input[type="submit"] {
	padding-bottom: calc(var(--form-input-padding) * 0.9);
	background: var(--form-input-color-foreground-active);
	border-color: var(--form-input-color-foreground-active);
	color: var(--wp--preset--color--base);
	transition: background var(--form-input-transition-duration) ease, border var(--form-input-transition-duration) ease, color var(--form-input-transition-duration) ease;
}

.nf-form-content button:hover,
.nf-form-content input[type="button"]:hover,
.nf-form-content input[type="submit"]:hover {
	background: var(--wp--preset--color--base);
	border-color: var(--form-input-color-foreground-active);
	color: var(--form-input-color-foreground-active);
	transition: background var(--form-input-transition-duration) ease, border var(--form-input-transition-duration) ease, color var(--form-input-transition-duration) ease;
}