/*
 Theme Name:   Quirky Techie 2025
 Theme URI:    https://thequirkytechie.com
 Description:  A Quirky Techie child theme for GeneratePress
 Author:       Natasha Coskery
 Author URI:   https://thequirkytechie.com
 Template:     generatepress
 Version:      2.0
*/


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

1. Theme Tweaks
2. Utilities
3. CSS Variables

Many ideas from Kyle at The Admin Bar: https://theadminbar.com/generate-youtube-bonus/

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

/*** 1. Theme Tweaks ***/

/* Site Wrapper */
.site-wrapper {
    width: 100%;
    max-width: 2048px;
    margin-inline: auto;
}

/* 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.909vw + 0.818rem, 1.5rem) !important; /*this sets padding based on mobile 320px and desktop 1200px --> adjust if changing default padding in .setion global styles*/
}

.site-content {
    padding: 0px;
}

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


/*** 2. Utilities ***/

/* Visually Hidden - hides objects visually but remains visible for accessibilty*/
.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;
}

/* Remove bottom margin on last paragraph */
:is(.section, .inner) p:last-child:last-of-type {
    margin-bottom: 0px;
}

.block-editor-block-list__layout :is(.section, .inner) p:nth-last-child(2) {
    margin-bottom: 0px;
}

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

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

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


/*** 3. CSS Variables ***/

/* Set font size variables 
Watch here for more info: https://www.youtube.com/watch?v=LXMNqsCLjeY */
:root {
    --fs-text-s: clamp(0.79rem, 0.05vi + 0.78rem, 0.81rem);
	--fs-heading-pre: clamp(0.89rem, 0.14vi + 0.85rem, 0.96rem);
	--fs-body: clamp(1rem, 0.25vi + 0.94rem, 1.13rem);
	--fs-text-m: clamp(1.13rem, 0.39vi + 1.03rem, 1.32rem);
	--fs-text-l: clamp(1.27rem, 0.58vi + 1.12rem, 1.55rem);
	--fs-heading-h6: clamp(1.27rem, 0.71vi + 1.09rem, 1.62rem);
	--fs-heading-h5: clamp(1.42rem, 1.04vi + 1.16rem, 1.94rem);
	--fs-heading-h4: clamp(1.6rem, 1.46vi + 1.24rem, 2.33rem);
	--fs-heading-h3: clamp(1.8rem, 1.99vi + 1.3rem, 2.8rem);
	--fs-heading-h2: clamp(2.03rem, 2.66vi + 1.36rem, 3.36rem);
	--fs-heading-h1: clamp(2.28rem, 3.5vi + 1.41rem, 4.03rem);
	--fs-heading-xl: clamp(2.57rem, 4.54vi + 1.43rem, 4.84rem);
}

/* Set Container Widths */
:root {
    --cw-m: 64rem;
    --cw-s: 48rem;
    --cw-xs: 40rem;
}