/*
 Theme Name:   Undoxxed
 Theme URI:    https://undoxxed.com/
 Description:  A custom child theme for GeneratePress
 Author:       Paul Jones Design
 Author URI:   https://pauljonesdesign.com/
 Template:     generatepress
 Version:      1.0
*/

/* ========== TABLE OF CONTENTS ==========
 * 
 * Theme
 * Utilty
 * Typography
 * Global Styles
 * Fluent Forms
 * CSS Grid
 * 
 ========================================= */

/* ||  TYPOGRAPHY */

/* 
 * Minimum Viewport: 768px
 * Maximum Viewport: 1200px
 * https://chrisburnell.com/clamp-calculator/?font-size-root=16&size-min=&size-max=&viewport-min=768&viewport-max=1200&viewport-units=vw
 * These have to match what is in the Customizer > Typography. Pull in font families using font manager. Set heading-font as 'All Headings and set body-font as Body. */
:root {
	--heading-font: var(--gp-font--outfit), sans-serif;
	--body-font: var(--gp-font--outfit), sans-serif;
	--heading--xl: clamp(2rem, 0.222rem + 3.704vw, 3rem); /* Scales between 32px and 48px */
	--heading--lg: clamp(1.75rem, 0.417rem + 2.778vw, 2.5rem); /* Scales between 28px and 40px */
	--heading--md: clamp(1.5rem, 0.167rem + 2.778vw, 2.25rem); /* Scales between 24px and 36px */
	--heading--sm: clamp(1.25rem, -0.083rem + 2.778vw, 2rem); /* Scales between 20px and 32px */
	--heading--xs: clamp(1rem, 0.556rem + 0.926vw, 1.25rem); /* Scales between 16px and 20px */
	--text--xl: clamp(1.25rem, 0.806rem + 0.926vw, 1.5rem); /* Scales between 20px and 24px */
	--text--lg: clamp(1rem, 0.556rem + 0.926vw, 1.25rem); /* Scales between 16px and 20px */
	--text--md: clamp(1rem, 0.778rem + 0.463vw, 1.125rem); /* 18px */
	--text--sm: clamp(0.85rem, 0.672rem + 0.37vw, 0.95rem); /* Scales between 13.6px and 15.2px */
	--text--xs: clamp(0.75rem, 0.572rem + 0.37vw, 0.85rem); /* Scales between 12px and 13.6px */
}


/* Default Body / p font settings */
p {
	font-size: var(--text--md);
	font-weight:400;
	line-height:1.5;
	margin-bottom:1.5rem;
	font-family:var(--body-font);
}

h1, h2, h3, h4, h5, h6 {
	font-weight:600;
	margin-bottom: .5em;
	font-family: var(--heading-font);
}

h1 {
	font-size:var(--heading--xl);
	line-height:1.05;
}

h2 {
	font-size:var(--heading--lg);
	line-height:1.1;
}

h3 {
	font-size:var(--heading--md);
	line-height:1.15;
}

h4 {
	font-size:var(--heading--sm);
	line-height:1.1;
}

h5 {
	font-size:var(--heading--xs);
	line-height:1.25;
}

h6 {
	font-size:var(--heading--xs);
	line-height:1.4;
}

p, .pretty {
	text-wrap: pretty;
}

.no-text-wrap, .text-wrap-unset {
	text-wrap: unset;
}

ul[role='list'],
ol[role='list'] {
	list-style: none;
}

/* ||  GLOBAL */
.gb-button-wrapper a.gb-button, .gb-button, .main-navigation .menu-toggle {
		transition: all 0.3s ease 0s;
}

/* Remove bottom margin on last paragraph */
.gb-container p:last-child:last-of-type {
    margin-bottom: 0px;
}

.block-editor-block-list__layout .gb-container p:nth-last-child(2) {
    margin-bottom: 0px;
}

/* Site Wrapper */
.site-wrapper {
    width: 100%;
    max-width: 1920px;
    margin-inline: auto;
	position: relative;
    overflow: clip;
}

#main {
	min-height: 65vh;
}

/* 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;
	border: 0;
}


.ipa-clickable-parent a:focus-visible {
	box-shadow: none;
	outline: none;
}

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

/* Knocks out the original overlay side padding to 0. */
.slideout-navigation.do-overlay .inside-navigation {
	padding: 0 0 0 0;
	max-width: 100%;
}

/* Puts the X close icon to the top right. */
.slideout-navigation.do-overlay .slideout-exit {
    position: fixed;
    text-align: right;
}

/* Removes off-center, mobile menu icon positioning. */
.icon-menu-bars.gp-icon svg {
	top:0em;
}

/* Search icon - remove GeneratePress default. Keep this CSS if you're using a custom icon. */
.main-navigation .menu-bar-item>a {
	display:none;
}

.post-type-post .editor-styles-wrapper {
    max-width: 656px;
    margin-inline: auto;
    width: 100%;
}

.editor-styles-wrapper p a {
	text-decoration:underline;
}

/* Custom Wave Animations on the Homepage */
.ipa-waves-block {
    width: 130px !important;
}

@keyframes waves {
    0% {
        -webkit-transform: scale(0,0);
        transform: scale(0,0);
        opacity: 0;
        -ms-filter: "alpha(opacity=0)"
    }

    50% {
        opacity: .9;
        -ms-filter: "alpha(opacity=90)"
    }

    100% {
        -webkit-transform: scale(.9,.9);
        transform: scale(4.9,4.9);
        opacity: 0;
        -ms-filter: "alpha(opacity=0)"
    }
}

.ipa-waves {
    z-index: -1;
    position: absolute;
    width: 150px;
    height: 150px;
    -ms-filter: "alpha(opacity=0)";
    opacity: 0;
    box-shadow: -13px 4px 29px rgba(255,255,255,.25),34px 0px 23px rgba(136,143,158,.18),inset -13px 4px 29px rgba(255,255,255,.25),inset 13px 0px 23px rgba(207,208,210,.5);
    border-radius: 100%;
    left: -10px !important;
    top: -10px !important;
    -webkit-animation: waves 4s ease-in-out infinite;
    animation: waves 4s ease-in-out infinite
}

.ipa-wave-1 {
    -webkit-animation-delay: 1s !important;
    animation-delay: 1s !important
}

.ipa-wave-2 {
    -webkit-animation-delay: 2s !important;
    animation-delay: 2s !important
}

.ipa-wave-3 {
    -webkit-animation-delay: 3s !important;
    animation-delay: 3s !important
}

/* Custom Text Rotation Animations on the Homepage */
@-webkit-keyframes push-in {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-100%)
    }

    70% {
        opacity: 1;
        -webkit-transform: translateY(10%)
    }

    100% {
        opacity: 1;
        -webkit-transform: translateY(0)
    }
}

@-moz-keyframes push-in {
    0% {
        opacity: 0;
        -moz-transform: translateY(-100%)
    }

    60% {
        opacity: 1;
        -moz-transform: translateY(10%)
    }

    100% {
        opacity: 1;
        -moz-transform: translateY(0)
    }
}

@keyframes push-in {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-100%);
        -moz-transform: translateY(-100%);
        -ms-transform: translateY(-100%);
        -o-transform: translateY(-100%);
        transform: translateY(-100%)
    }

    60% {
        opacity: 1;
        -webkit-transform: translateY(10%);
        -moz-transform: translateY(10%);
        -ms-transform: translateY(10%);
        -o-transform: translateY(10%);
        transform: translateY(10%)
    }

    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -ms-transform: translateY(0);
        -o-transform: translateY(0);
        transform: translateY(0)
    }
}

@-webkit-keyframes push-out {
    0% {
        opacity: 1;
        -webkit-transform: translatey(0)
    }

    60% {
        opacity: 0;
        -webkit-transform: translateY(110%)
    }

    100% {
        opacity: 0;
        -webkit-transform: translateY(100%)
    }
}

@-moz-keyframes push-out {
    0% {
        opacity: 1;
        -moz-transform: translateY(0)
    }

    60% {
        opacity: 0;
        -moz-transform: translateY(110%)
    }

    100% {
        opacity: 0;
        -moz-transform: translateY(100%)
    }
}

@keyframes push-out {
    0% {
        opacity: 1;
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -ms-transform: translateY(0);
        -o-transform: translateY(0);
        transform: translateY(0)
    }

    60% {
        opacity: 0;
        -webkit-transform: translateY(110%);
        -moz-transform: translateY(110%);
        -ms-transform: translateY(110%);
        -o-transform: translateY(110%);
        transform: translateY(110%)
    }

    100% {
        opacity: 0;
        -webkit-transform: translateY(100%);
        -moz-transform: translateY(100%);
        -ms-transform: translateY(100%);
        -o-transform: translateY(100%);
        transform: translateY(100%)
    }
}

b {
    opacity: 0;
    display: inline-block;
    position: absolute;
    white-space: nowrap;
    left: 0;
    font-weight: 600;
    top: 0
}

.is-visible {
    position: relative;
    opacity: 1;
    -webkit-animation: push-in .6s;
    -moz-animation: push-in .6s;
    animation: push-in .6s;
    color: var(--accent)
}

.is-hidden {
    color: var(--accent);
    -webkit-animation: push-out .6s;
    -moz-animation: push-out .6s;
    animation: push-out .6s
}

.words-wrapper {
    display: inline-block;
    position: relative;
    text-align: left
}