/*
 Theme Name:   Moonrise Hotel 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.0
*/

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

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

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

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

:root {
	
	/* CUSTOMIZE THESE VARIABLES FOR DESIGN CHANGES */
	
	    /* 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: cinzel, system-ui, sans-serif; /* <--- Enter heading font before 'system-ui' */
    --body-font: roboto, system-ui, sans-serif; /* <--- Enter body font before 'system-ui' */
    
	/* Conditional Design Variables <--SET THESE */
	
	/* Layout */
	--grid-gap: var(--space-l);
	--image-margin-mobile: var(--space-m);
	
	/* Negative margin variables */
	--image-margin: var(--space-3xl);
	--image-margin-neg: calc(var(--image-margin)*-1);
	
	/* Border radius defaults */
	--radius-default: var(--radius-xs);
	
	/* Effects & transitions */
	
	--transition-type: transform;
	--transition-duration: 0.5s;
	--transition-timing: ease;
	--transition-default: var(--transition-type) var(--transition-duration) var(--transition-timing); /* default item transition */
	
    /*
    TYPOGRAPHY
    */

	
	/* Font Weights */
	--heading-font-weight: 600;
    --body-font-weight: 400;
	
	/* 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.05;
	--line-height-h1: 1.1;
	--line-height-h2: 1.2;
	--line-height-h3: 1.25;
	--line-height-h4: 1.3;
	--line-height-h5: 1.4;
	--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-xs: 1rem;
    --section-s: 1.5rem;
    --section-m: clamp(1.5rem, 1.197rem + 1.515vw, 2.5rem);
    --section-default: clamp(3rem, 2.394rem + 3.03vw, 5rem);
    --section-l: clamp(4.5rem, 3.591rem + 4.545vw, 7.5rem);
    --section-xl: clamp(6rem, 4.788rem + 6.061vw, 10rem);

    
    /* 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 */;


    /* 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);


	/* 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;


}

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

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

h1, h2, h3, h4, h5, h6, .text--headline-xl, .text--looks-h1, .text--looks-h2, .text--looks-h3, .text--looks-h4, .text--looks-h5, .text--looks-h6 {
	font-family: var(--heading-font);
	font-weight: 600;
	color: var(--base-800)
}

.text--pre-headline, .text--pre-headling--light {
	font-family: var(--heading-font);
}

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

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

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

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

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

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

h6, .text--looks-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-default, .text--body-s, .text--body-xs {
	font-family: var(--body-font);
    line-height: var(--line-height-p);
    margin-bottom: var(--margin-bottom-p);
}

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

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

.text--body-default {
    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--m {
    padding: var(--section-m) var(--section-inline);
}

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

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

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

.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);
}


/* Container Widths */

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

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

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

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

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

.container--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;
}


/*
**
**
** 5. ANIMATIONS & EFFECTS
**
**
*/