/**
 *  Leaf CSS - a fluid, type starter
 *  @author - @joshwayman
 *  @version - 1.0
 * A mini fluid, type-scale based typography CSS library. 
 *  Type can be annoying to set up every time, this lil libraries goal is to make that process quick, easy and standardised
 *
 */
 
:root {
    --text-root : 16px;
    --text-scale : 1.25;
    --text-base : 1rem;
    --text-root-fluid: clamp(var(--text-root), 1vw, 1.1713vw);

    --leading-body: 1.3;
    --leading-headings: 1.1;
  
    --text-7xl : calc(1rem * var(--text-scale) * var(--text-scale) * var(--text-scale) * var(--text-scale) * var(--text-scale) * var(--text-scale) * var(--text-scale) * var(--text-scale) );
    --text-6xl : calc(1rem * var(--text-scale) * var(--text-scale) * var(--text-scale) * var(--text-scale) * var(--text-scale) * var(--text-scale) * var(--text-scale) );
    --text-5xl : calc(1rem * var(--text-scale) * var(--text-scale) * var(--text-scale) * var(--text-scale) * var(--text-scale) * var(--text-scale)  );
    --text-4xl : calc(1rem * var(--text-scale) * var(--text-scale) * var(--text-scale) * var(--text-scale) * var(--text-scale) );
    --text-3xl : calc(1rem * var(--text-scale) * var(--text-scale) * var(--text-scale) * var(--text-scale) );
    --text-2xl : calc(1rem * var(--text-scale) * var(--text-scale) * var(--text-scale) );
    --text-xl : calc(1rem * var(--text-scale) * var(--text-scale) );
    --text-lg : calc(1rem * var(--text-scale) );
    --text-md : 1rem;
    --text-sm : calc(1rem / var(--text-scale) );
    --text-xs: calc(1rem / var(--text-scale) / var(--text-scale) );
    --text-2xs: calc(1rem / var(--text-scale) / var(--text-scale) / var(--text-scale) );

    --font-headings : 'neue-haas-grotesk-display', Helvetica Neue, Helvetica, Arial, sans-serif;
    --font-sans: 'neue-haas-grotesk-text', Helvetica Neue, Helvetica, Arial, sans-serif;
    --font-mono: 'roboto-mono', ui-monospace, SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace;

    --font-light : 200;
    --font-normal : 400;
    --font-bold: 700;
    --font-black: 900;
  
    --rounded: 1rem;
    --rounded-full: 100%;

    --shadow-sm : 1px -1px 11px -3px color-mix(in srgb, var(--clr-highlight) 20%, var(--clr-bg));
    --shadow-md : 1px -1px 11px -3px color-mix(in srgb, var(--clr-highlight) 20%, var(--clr-bg));
    --shadow-lg : 1px -1px 11px -3px color-mix(in srgb, var(--clr-highlight) 20%, var(--clr-bg));

    --spacing-none : 0.5rem;
    --spacing-narrow : 3rem;
    --spacing-default : 7rem;
    --spacing-wide : 10rem;
}

*, *::before, *::after { box-sizing: border-box; }

html,body {
    margin: 0;
    padding: 0;

    font-size: var(--text-root-fluid);
    font-family: var(--font-sans);
    line-height: var(--leading-body);

    -webkit-font-smoothing: antialiased; 
    text-rendering: geometricPrecision;
    
    tab-size: 4;
}

p, h1, h2, h3, h4, h5, h6, ul, ol {
    overflow-wrap: break-word;
    margin: 0 0 0.5em;
    padding: 0;
}
  
h1,h2,h3,h4,h5,h6 {
    font-family: var(--font-headings);
    font-weight: var(--font-bold);
    line-height: var(--leading-headings);
    text-wrap: balance;
}

p, ul, ol {
    font-family: var(--font-sans);
    line-height: var(--leading-body);
    font-size: var(--text-base);
}

p {
    margin-bottom: 1rem;
}

h1, .text-6xl { font-size: var(--text-6xl); }
h2, .text-5xl { font-size: var(--text-5xl); }
h3, .text-4xl { font-size: var(--text-4xl); margin-bottom: 0.75rem; }
h4, .text-3xl { font-size: var(--text-3xl); margin-bottom: 0.75rem; }
h5, .text-2xl { font-size: var(--text-2xl); margin-bottom: 0.75rem; }
h6, .text-xl, p.xl { font-size: var(--text-xl); margin-bottom: 0.75rem; }

h1.xl, .text-7xl { font-size: var(--text-7xl); }

p.lg, .text-lg { font-size: var(--text-lg); }
p.md, .text-md { font-size: var(--text-md); }
p.sm, .text-sm { font-size: var(--text-sm); }
p.xs, .text-xs { font-size: var(--text-xs); }
p.xxs, .text-2xs { font-size: var(--text-2xs); }

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

sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }

sub { bottom: -0.25em; }
sup { top: -0.5em; }

b, strong { font-weight: var(--font-bold); }

code, kbd, samp, pre { font-family: var(--font-mono); }
small { font-size: 80%; }


pre {
    white-space: pre-wrap;
}

/** END LEAF **/
.text-center {
    text-align: center;
}
.text-left {
    text-align: left;
}
.text-right {
    text-align: right;
}

p:empty {
	margin-bottom: 0;
}
a {
	text-decoration: none;
	color: inherit;
	transition: opacity 150ms ease;
	opacity: 1;
	cursor: pointer;
}
a:not(.btn):hover {
	opacity: 0.7;
}

button, a { cursor: pointer;}
.btn-plus, .btn-icon {
    border: 0;
    background-color: transparent;
    display: block;
    padding: 0;
}
.btn-plus svg, .btn-icon svg {
    width: auto;
    height: 100%;
    display: block;
    color: currentColor;
}


.btn {
	background-color: var(--base-background-color, transparent);
	color: var(--clr-highlight);
	border: 0px solid var(--text-color);
	display: inline-flex;
    align-items: center;
    gap: 1rem;
    
	transition: all 150ms ease;
	position: relative;
	text-align: left;
	cursor: pointer;

    font-family: var(--font-mono);
    text-transform: uppercase;
    letter-spacing: 0.25rem;
}
.btn span {
    display: flex;
    align-items: center;
    border: solid 1px currentColor;
    border-radius: var(--rounded-full);
    aspect-ratio: 1 / 1;
    padding: 1rem;
    overflow: hidden;
}
.btn svg {
    max-width: 1.5em;
    transition: translate 150ms ease;
    translate: 0 0;
}
.btn:hover svg {
    translate: 20% 0;
}

.btn:hover {
	background-color: var(--text-color);
	color: var(--clr, white);
}
.btn.btn-secondary {
	color: var(--base-background-color, white);
	background-color: var(--text-color);
}

.btn.btn-secondary:hover {
    background-color: var(--base-background-color, white);
    color: var(--text-color);
}
.btn-align-center { text-align: center; }
.btn-align-left { text-align: left; }
.btn-align-right { text-align: right; }

.btn.align-center {
	margin-inline: auto;
}
.btn + .btn {
	margin-left: 1rem;
}
.btn:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}
.btn-menu span {
    display: none;
}

.btn.btn-wysiwyg {
    border: solid 1px currentColor;
    padding-inline: 2rem;
    padding-block: 0.5rem;
    border-radius: 2rem;
}
.btn.btn-wysiwyg-alt {
    background-color: var(--clr-highlight, black);
    color: var(--clr-white);
    border: solid 1px var(--clr-highlight, black);
    padding-inline: 2rem;
    padding-block: 0.5rem;
    border-radius: 2rem;
}
.btn.btn-wysiwyg-alt:hover {
    background-color: color-mix(in srgb, var(--clr-highlight), black 50%);
    border-color: color-mix(in srgb, var(--clr-highlight), black 50%);
}

.icon-link {
    border-radius: var(--rounded-full);
    display: flex;
    align-items: center;
    border: solid 2px currentColor;
    aspect-ratio: 1 / 1;
    padding: 0.375rem;
}
.icon-link svg {
    width: auto;
    height: auto;
}

p + .btn {
    margin-top: 2rem;
}

figure {
	margin: 0;
}
form {
    display: block;
}

img {
	display: block;
	max-width: 100%;
	height: auto;
}

img.aligncenter {
    margin-inline: auto;
    margin-bottom: 1rem;
}

img.alignright {
    float: right;
    display: inline;
    margin-left: 1rem;
}

img.alignleft {
    display: inline;
    float: left;
    margin-right: 1rem;
}

img[src*=".svg"] {
	width: 100%;
	height: auto;
}


.has-none-overlay, .site-header.has-none-overlay { --overlay-tint: 0%; }
.has-light-overlay, .site-header.has-light-overlay { --overlay-tint: 10%; }
.has-medium-overlay, .site-header.has-medium-overlay { --overlay-tint: 35%; }
.has-dark-overlay, .site-header.has-dark-overlay { --overlay-tint: 60%; }


/* WYSIWYG */

img.aligncenter {
    margin-inline: auto;
    margin-bottom: 1rem;
}

img.alignright {
    float: right;
    display: inline;
    margin-left: 1rem;
}

img.alignleft {
    display: inline;
    float: left;
    margin-right: 1rem;
}
.gallery-caption {
    font-size: var(--text-sm);
    margin-top: 1rem;
}
.wysiwyg {
    width: 100%;
}

.wysiwyg .gallery {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
}
.wysiwyg li, #tinymce li {
    margin-bottom: 0.5rem;
}
.wysiwyg ul, #tinymce ul, .wysiwyg ol, #tinymce ol {
    padding-left: 1.5rem;
    margin-bottom: 1rem;
}
.wysiwyg + .btn {
    margin-top: 1rem;
}

/* GTranslate */
body .gt_float_switcher .gt-selected .gt-current-lang {
    background-color: var(--clr-black-bg);
    color: var(--clr-white);
}
body .gt_float_switcher-arrow {
    filter: brightness(100);
}
body .gt_float_switcher {
    border-radius: 0.25rem;
    background-color: var(--clr-black-bg);
    color: var(--clr-white);
}
body .gt_float_switcher .gt_options a {
    color: inherit;
}
body .gt_float_switcher {
    transition: scale 150ms ease;
    scale: 0.8;
}
body .gt_float_switcher:has(> .gt_options[style="display: block;"]) {
    scale: 1;
}