/*
 Theme Name:   Dales.Net Theme
 Theme URI:    https://dales.net
 Description:  A custom theme for GeneratePress
 Author:       Dales.Net Team
 Author URI:   
 Template:     generatepress
 Version:      1.0
*/

/*
 * previous font scale setup...
https://www.fluid-type-scale.com/calculate?minFontSize=16&minWidth=767&minRatio=1.2&maxFontSize=17&maxWidth=1200&maxRatio=1.25&steps=80%2C90%2C100%2C200%2C300%2C400%2C500%2C600%2C700%2C800&baseStep=100&prefix=fs&useContainerWidth=false&includeFallbacks=true&useRems=true&remValue=16&decimals=2&previewFont=Inter&previewText=Almost+before+we+knew+it%2C+we+had+left+the+ground&previewWidth=1200 */

/* 
 * current font scale setup
 * https://www.fluid-type-scale.com/calculate?minFontSize=16&minWidth=767&minRatio=1.067&maxFontSize=17&maxWidth=1200&maxRatio=1.125&steps=80%2C90%2C100%2C200%2C300%2C400%2C500%2C600%2C700%2C800%2C900%2C1000&baseStep=100&prefix=fs&useContainerWidth=false&includeFallbacks=true&useRems=true&remValue=16&decimals=2&previewFont=Inter&previewText=Almost+before+we+knew+it%2C+we+had+left+the+ground&previewWidth=1200
 *  */

/* For browsers that support clamp  */
@supports (font-size: clamp(1rem, 1vi, 1rem)) {
  :root {
		--fs-80: clamp(0.88rem, -0.14vi + 0.95rem, 0.84rem);
		--fs-90: clamp(0.94rem, 0.03vi + 0.92rem, 0.94rem);
		--fs-100: clamp(1rem, 0.23vi + 0.89rem, 1.06rem);
		--fs-200: clamp(1.07rem, 0.47vi + 0.84rem, 1.2rem);
		--fs-300: clamp(1.14rem, 0.76vi + 0.77rem, 1.34rem);
		--fs-400: clamp(1.21rem, 1.1vi + 0.69rem, 1.51rem);
		--fs-500: clamp(1.3rem, 1.5vi + 0.58rem, 1.7rem);
		--fs-600: clamp(1.38rem, 1.96vi + 0.44rem, 1.91rem);
		--fs-700: clamp(1.48rem, 2.51vi + 0.27rem, 2.15rem);
		--fs-800: clamp(1.57rem, 3.14vi + 0.07rem, 2.42rem);
		--fs-900: clamp(1.68rem, 3.87vi + -0.17rem, 2.73rem);
		--fs-1000: clamp(1.79rem, 4.71vi + -0.46rem, 3.07rem);
  }
}
/* For browsers that don't support clamp */
@supports not (font-size: clamp(1rem, 1vi, 1rem)) {
  :root {
		--fs-80: 0.88rem;
		--fs-90: 0.94rem;
		--fs-100: 1rem;
		--fs-200: 1.07rem;
		--fs-300: 1.14rem;
		--fs-400: 1.21rem;
		--fs-500: 1.3rem;
		--fs-600: 1.38rem;
		--fs-700: 1.48rem;
		--fs-800: 1.57rem;
		--fs-900: 1.68rem;
		--fs-1000: 1.79rem;
  }
  @media screen and (min-width: 1200px) {
    :root {
			--fs-80: 0.84rem;
			--fs-90: 0.94rem;
			--fs-100: 1.06rem;
			--fs-200: 1.2rem;
			--fs-300: 1.34rem;
			--fs-400: 1.51rem;
			--fs-500: 1.7rem;
			--fs-600: 1.91rem;
			--fs-700: 2.15rem;
			--fs-800: 2.42rem;
			--fs-900: 2.73rem;
			--fs-1000: 3.07rem;
    }
  }
}
/* Default body / p font settings */
:root {
    --headline-font: Inter, sans-serif;
    --body-font: sans-serif;
}
p {
    font-size: var(--fs-text-m);
    font-weight: 400;
    line-height: 1.3;
    margin-bottom: 1.5rem;
    font-family: var(--body-font);
}

/* Default Headings font settings */

h1, h2, h3, h4, h5, h6, 
.gb-headline-h-xl, .gb-headline-h1, .gb-headline-h2, .gb-headline-h3, .gb-headline-h4, .gb-headline-h5, .gb-headline-h6 {
    font-family: var(--headline-font);
    font-weight: 600;
    margin-bottom: 0.5rem;
}
h1.entry-title {
	font-weight: 400;
}
/* TEXT SIZE UTILITY CLASSES */

/* With suggested line heights (automatically responsive). Feel free to tweak to taste. 
In Theme Styles > Typography > Body Copy: set the font size variable AND line height the SAME as .text-m here in this code. */
.fs-80, .dnu-fs-80 {
    font-size: var(--fs-80) !important;
}
.fs-90, .dnu-fs-90 {
    font-size: var(--fs-89) !important;
}
.fs-100, .dnu-fs-100 {
    font-size: var(--fs-100) !important;
}
.fs-200, .dnu-fs-200 {
    font-size: var(--fs-200) !important;
}
.fs-300, .dnu-fs-300 {
    font-size: var(--fs-300) !important;
}
.fs-400, .dnu-fs-400 {
    font-size: var(--fs-400) !important;
}
.fs-500, .dnu-fs-500 {
    font-size: var(--fs-500) !important;
}
.fs-600, .dnu-fs-600 {
    font-size: var(--fs-600) !important;
}
.fs-700, .dnu-fs-700 {
    font-size: var(--fs-700) !important;
}
.fs-800, .dnu-fs-800 {
    font-size: var(--fs-800) !important;
}
.fs-900, .dnu-fs-900 {
    font-size: var(--fs-900) !important;
}
.fs-1000, .dnu-fs-1000 {
    font-size: var(--fs-1000) !important;
}
/* line height method from: https://kittygiraudel.com/2020/05/18/using-calc-to-figure-out-optimal-line-height/ */
.fs-80, .fs-90, .fs-100, .fs-200, .fs-300, .fs-400, .fs-500, .fs-600, .fs-700, .fs-800, .fs-900, .fs-1000 {
    line-height: calc(2px + 2ex + 2px);
    font-weight: 300;
}

/* HEADING SIZE UTILITY CLASSES */

/* With suggested line heights (automatically responsive) */

.u-h-xl {
    font-size: var(--fs-1000);
    line-height: 1.05;
}
h1, .dnu-h1 {
    font-size: var(--fs-900);
    line-height: 1.1;
}
h2, .dnu-h2 {
    font-size: var(--fs-700);
    line-height: 1.2;
}
h3, .dnu-h3 {
    font-size: var(--fs-600);
    line-height: 1.3;
}
h4, .dnu-h4 {
    font-size: var(--fs-500);
    line-height: 1.4;
}
h5, .dnu-h5 {
    font-size: var(--fs-400);
    line-height: 1.5;
}
h6, .dnu-h6 {
    font-size: var(--fs-300);
    line-height: 1.6;
}

/* BORDER RADIUS UTILITY CLASSES */

:root {
    --radius-xs: .125rem;
    --radius-s: .25rem;
    --radius-m: .5rem;
    --radius-l: 1rem;
    --radius-xl: 1.5rem;
    --radius-xxl: 2rem;
    --radius-50: 50%;
    --radius-circle: 50%;
}