/*
 Theme Name:   Blue Mesa Theme 2025
 Theme URI:    https://bluemesacreative.com
 Description:  Custom GeneratePress child theme
 Author:       John Serbell
 Author URI:   https://johnserbell.com
 Template:     generatepress
 Version:      1.2
*/

/* ========== TABLE OF CONTENTS ==========

1. CSS Variables
2. Typography
3. Sections & Containers
4. Theme Tweaks
5. Utilities & Global Styles

===================================== */

/*
**
**
** 1. CSS VARIABLES
**
**
*/

:root {
    
    /*
    TYPOGRAPHY
    */

    /* Fonts
         
	Fonts entered below HAVE TO match what is in the Customizer > Typography panel.

    Instructions:
    	 1. Pull in font families using font manager. 
    	 2. Set heading-font as "All Headings," and set body-font as "Body." DO NOT SET ANY OTHER SETTINGS.
         3. Set --heading-font and --body-font variables to match the customizer:  */

    --heading-font: boldonse, system-ui, sans-serif; /* <--- Enter heading font before 'system-ui' */
    --body-font: roboto, system-ui, sans-serif; /* <--- Enter body font before 'system-ui' */
	
	/* Font Weights */
	--heading-font-weight: 600;
    --body-font-weight: 400;
	
	/* Font Colors */
	--body-color: var(--base-800);
	--heading-color: var(--base-900);
	
	/* Font Sizes */
    --fs-body: 1.125rem;
    --fs-headline-xl: clamp(3.05rem, 2.24rem + 4.08vw, 5.5rem);
    --fs-headline-h1: clamp(2.44rem, 1.96rem + 2.41vw, 3.89rem);
    --fs-headline-h2: clamp(1.95rem, 1.69rem + 1.33vw, 2.75rem);
    --fs-headline-h3: clamp(1.56rem, 1.44rem + 0.64vw, 1.94rem);
    --fs-headline-h4: clamp(1.25rem, 1.21rem + 0.21vw, 1.38rem);
    --fs-headline-h5: clamp(1.13rem, 1.05rem + 0.38vw, 1.35rem);
    --fs-headline-h6: clamp(1rem, 0.96rem + 0.1vw, 1.125rem);
    --fs-pre-headline: clamp(0.97rem, 1rem + 0vw, 1rem);
    --fs-body-xl: clamp(1.27rem, 1.15rem + 0.59vw, 1.62rem);
    --fs-body-l: clamp(1.13rem, 1.05rem + 0.38vw, 1.35rem);
    --fs-body-s: clamp(0.89rem, 0.87rem + 0.08vw, 0.94rem);
    --fs-body-xs: clamp(0.78rem, 0.79rem + 0vw, 0.79rem);
	
	/* Line Heights & Bottom Margins */
	--line-height-xl: 1.5;
	--line-height-h1: 1.5;
	--line-height-h2: 1.5;
	--line-height-h3: 1.5;
	--line-height-h4: 1.5;
	--line-height-h5: 1.5;
	--line-height-h6: 1.5;
    --line-height-p: 1.5;
	
	--margin-bottom-xl: 1.3rem;
	--margin-bottom-h1: 1.25rem;
	--margin-bottom-h2: 1rem;
	--margin-bottom-h3: 0.85rem;
	--margin-bottom-h4: 0.75rem;
	--margin-bottom-h5: 0.5rem;
	--margin-bottom-h6: 0.4rem;
    --margin-bottom-p: 1.5rem;

    /* SECTION PADDING */

    --section-inline: clamp(1rem, 0.848rem + 0.758vw, 1.5rem);
    --section-2xs: clamp(2.1rem, 2.67vi + 1.45rem, 3.58rem);
    --section-xs: clamp(2.6rem, 3.38vi + 1.78rem, 4.48rem);
    --section-s: clamp(3.23rem, 4.27vi + 2.19rem, 5.6rem);
    --section-base: clamp(4rem, 5.39vi + 2.69rem, 7rem);
    --section-l: clamp(4.96rem, 6.81vi + 3.3rem, 8.75rem);
    --section-xl: clamp(6.15rem, 8.61vi + 4.05rem, 10.94rem);
    --section-2xl: clamp(7.63rem, 10.87vi + 4.98rem, 13.67rem);

    
    /* CONTAINER WIDTHS */

    --width-xl: 64rem; /* 1024px */
    --width-l: 57rem; /* 912px */
    --width-m: 50rem; /* 800px */
    --width-s: 45rem; /* 720px */
    --width-xs: 40rem; /* 640px */
	--width-2xs: 32rem; /* 512px */
	--width-3xs: 25rem; /* 400px */


    /* SPACING */

    --space-3xs: clamp(0.25rem, 0.2309rem + 0.0956vw, 0.3125rem);
    --space-2xs: clamp(0.5625rem, 0.5434rem + 0.0956vw, 0.625rem);
    --space-xs: clamp(0.8125rem, 0.7934rem + 0.0956vw, 0.875rem);
    --space-s: clamp(1.0625rem, 1.0243rem + 0.1912vw, 1.1875rem);
    --space-m: clamp(1.625rem, 1.5676rem + 0.2868vw, 1.8125rem);
    --space-l: clamp(2.125rem, 2.0485rem + 0.3824vw, 2.375rem);
    --space-xl: clamp(3.1875rem, 3.0728rem + 0.5736vw, 3.5625rem);
    --space-2xl: clamp(4.25rem, 4.097rem + 0.7648vw, 4.75rem);
    --space-3xl: clamp(6.375rem, 6.1456rem + 1.1472vw, 7.125rem);
	
	/* EDIT THESE */
	
	--grid-gap: var(--space-xl);
	--grid-gap-s: calc(var(--grid-gap)/2);
	--section-gap: var(--space-2xl);
	--section-gap-s: calc(var(--section-gap)/2);
	--section-gap-l: var(--space-3xl);


/* BORDER RADIUS */

    --radius-2xs: .25rem;
    --radius-xs: .5rem;
    --radius-s: .75rem;
    --radius-m: 1rem;
    --radius-l: 1.25rem;
    --radius-xl: 1.5rem;
    --radius-2xl: 1.75rem;
    --radius-3xl: 2rem;
    --radius-full: 999rem;
	
	/* EDIT THESE */
	
	--border-radius-buttons: 5rem;
	--border-radius-image: 1.5rem;
	--border-radius-cards: 1.5rem;

}

/*
**
**
** 2. TYPOGRAPHY 
**
**
*/

/* Heading font-size and line-height */

h1, h2, h3, h4, h5, h6, .text-headline-xl, .text-headline-h1, .text-headline-h2, .text-headline-h3, .text-headline-h4, .text-headline-h5, .text-headline-h6 {
	font-family: var(--heading-font);
	font-weight: 900;
	color: var(--heading-color);
	text-transform: uppercase;
}

.text-headline-xl {
    font-size: var(--fs-headline-xl);
    line-height: var(--line-height-xl);
	margin-bottom: var(--margin-bottom-xl);
}

h1, .text-headline-h1   {
    font-size: var(--fs-headline-h1);
    line-height: var(--line-height-h1);
	margin-bottom: var(--margin-bottom-h1);
}

h2, .text-headline-h2 {
    font-size: var(--fs-headline-h2);
    line-height: var(--line-height-h2);
	margin-bottom: var(--margin-bottom-h2);
}

h3, .text-headline-h3 {
    font-size: var(--fs-headline-h3);
    line-height: var(--line-height-h3);
	margin-bottom: var(--margin-bottom-h3);
}

h4, .text-headline-h4 {
    font-size: var(--fs-headline-h4);
    line-height: var(--line-height-h4);
	margin-bottom: var(--margin-bottom-h4);
}

h5, .text-headline-h5 {
    font-size: var(--fs-headline-h5);
    line-height: var(--line-height-h5);
	margin-bottom: var(--margin-bottom-h5);
}

h6, .text-headline-h6 {
    font-size: var(--fs-headline-h6);
    line-height: var(--line-height-h6);
	margin-bottom: var(--margin-bottom-h6);
}

/* Additional Body Font Sizes */

.text-body-xl, .text-body-l, .text-body, .text-body-s, .text-body-xs {
	font-family: var(--body-font);
    line-height: var(--line-height-p);
    margin-bottom: var(--margin-bottom-p);
	color: var(--body-color);
	text-transform: capitalize !important;
}

.text-body-xl {
    font-size: var(--fs-body-xl);
}

.text-body-l {
    font-size: var(--fs-body-l);
}

.text-body {
    font-size: var(--fs-body);
}

.text-body-s {
    font-size: var(--fs-body-s);
}

.text-body-xs {
    font-size: var(--fs-body-xs);
}

/* Add top margin to blog post H2-H6 */

.single-post h2, .single-post h3, .single-post h4, .single-post h5, .single-post h6 {
    margin-top: 1.5em;
}

/* Remove bottom margin from the last paragraph in any container */
div p:last-child {
    margin-bottom: 0 !important;
}

/*
**
**
** 3. SECTIONS & CONTAINERS 
**
**
*/

/* Section Padding */


.section-xs {
    padding: var(--section-xs) var(--section-inline);
}

.section-bottom-xs {
    padding-bottom: var(--section-xs);
}

.section-s {
    padding: var(--section-s) var(--section-inline);
}

.section-bottom-s {
    padding-bottom: var(--section-s);
}

.section-base, .gbp-section {
    padding: var(--section-base) var(--section-inline);
}

.section-bottom-base, .gbp-section-bottom {
    padding-bottom: var(--section-base);
}

.section-l {
    padding: var(--section-l) var(--section-inline);
}

.section-bottom-l {
    padding-bottom: var(--section-l);
}

.section-xl {
 padding: var(--section-xl) var(--section-inline);
}

.section-bottom-xl {
    padding-bottom: var(--section-xl);
}

.section-2xl {
 padding: var(--section-2xl) var(--section-inline);
}

.section-bottom-2xl {
    padding-bottom: var(--section-2xl);
}

/* Container Widths */

.width-3xs {
	max-width: var(--width-3xs);
}

.width-2xs {
	max-width: var(--width-2xs);
}

.width-xs {
    max-width: var(--width-xs);
}

.width-s {
    max-width: var(--width-s);
}

.width-m {
    max-width: var(--width-m);
}

.width-l {
    max-width: var(--width-l);
}

.width-xl {
    max-width: var(--width-xl);
}


/*
**
**
** 4. THEME TWEAKS 
**
**
*/


/* Set the main content area height */

#main {
    min-height: 65vh;
}

/* Container padding overrides */
.inside-header {
    padding-inline: 0px !important;
}

.site-header {
    padding-inline: clamp(1rem, 0.848rem + 0.758vw, 1.5rem) !important;
}

.site-content, #content {
    padding: 0px;
}

/* Applies max-width to the content area inside the editor */
body.post-type-post .block-editor-writing-flow {
    max-width: 768px;
    margin-inline: auto;
    padding-inline: 1rem;
}

/* Constrains title as well */
body.post-type-post .editor-post-title__block {
    max-width: 768px;
    margin-inline: auto;
    padding-inline: 1rem;
}

/* Password Protected Pages */
.post-password-form {
    max-width: 768px;
    padding: 8rem 0px;
    margin-inline: auto;
    text-align: center;
}

/*
**
**
** 5. UTILITIES & GLOBAL STYLES
**
**
*/

/* Visually Hidden */
.visually-hidden:not(:focus):not(:active) {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

/* Line Limits */
.line-limit-4, .line-limit-3, .line-limit-2 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-limit-4 {
    -webkit-line-clamp: 4;
}

.line-limit-3 {
    -webkit-line-clamp: 3;
}

.line-limit-2 {
    -webkit-line-clamp: 2;
}

/* No Underline */
.no-underline, .no-underline a {
    text-decoration: none;
}

/* Text Balance / Pretty */

.balance {
    text-wrap: balance;
}

p, blockquote, li {
    text-wrap: pretty;
}