/*
	Theme Name: Attitudes!
	Theme URI: https://withwonderly.com
	Description: Wonderly Web starter child theme for the Genesis Framework. Beaver Builder and Beaver Themer handle all front-end layout.
	Author: Wonderly Web
	Author URI: https://withwonderly.com

	Version: 1.0.0

	Template: genesis
	Template Version: 3.5.0

	License: GPL-2.0+
	License URI: https://opensource.org/licenses/gpl-license.php
*/


/* =============================================================================
   BRAND COLORS
   Define project brand colors here as CSS custom properties.
   Reference throughout stylesheet and BB Global Styles as var(--name).
   e.g. --primary: #000; --accent: #e14d43;

   Kit form color variables are also defined here — see KIT FORMS section.
   Update these to match the project's brand before building out forms.
============================================================================= */

:root {
	
	--error: #E01455;
	--text: #351C3A;
	--Cream: #F6F3D2;
	--Mint: #52C6AD;
	--Pink: #FF88D0;
	--Soft-Blue: #9AC5F0;
	--Dark-Purple: #351C3A;
	--Accent-Yellow: #ECC760;
	
	/* 	Fonts */	
	--script: 'freestyle-script';
	--sans-serif-title: newake, Verdana, Arial, sans-serif;
	--pt-mono: font-family: pt-mono;
	
	
	/* Gradients */
	--drop-shadow: linear-gradient(180deg, #351C3A 7.21%, #FFECE4 15.87%, #351C3A 28.85%, #F91493 60.1%, #FB5B3C 82.21%, #351C3A 100%);
	--radial-gradient: radial-gradient(85.97% 164.42% at 100% 190.56%, #FE44AA 22.16%, #303458 100%), #351C3A;
	
	--Texture-Off-White: url(../../uploads/texture-background.jpg) lightgray 0% 0% / 19.045454263687134px 19.045454263687134px repeat, #F5F5F5;

    /* Kit Form defaults — update per project */
    --kit-font: sans-serif;         /* form font family */
    --kit-primary: #000;            /* main accent: button bg, borders */
    --kit-primary-text: #fff;       /* text on --kit-primary backgrounds */
    --kit-bg: #fff;                 /* input background */
    --kit-input-text: #000;         /* input and placeholder text color */
    --kit-success-bg: #fff;         /* success message background */
    --kit-success-border: #000;     /* success message border and text color */

}


/* =============================================================================
   BASE RESET
   Minimal — modern browsers don't need much.
============================================================================= */

*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	margin: 0;
}

img,
embed,
iframe,
object,
video,
.wp-caption {
	max-width: 100%;
	height: auto;
}

a img {
	display: block;
}




/* =============================================================================
   TYPOGRAPHY DEFAULTS
   Intentionally bare — set per-project via BB Global Styles.
   These are fallback/body defaults only.
============================================================================= */

body {
	color: var(--text);
	font-family: albert-sans, sans-serif;
	font-size: 18px;
	font-weight: 400;
	line-height: 1.3;
	-webkit-font-smoothing: antialiased;
	background-image: url(../../uploads/textured-bg.jpg);
	background-repeat: no-repeat;
	background-size: cover;
}

h1, h2, h3, h4, h5, h6 {
	font-family: advercase;
	font-style: normal;
	line-height: 1.2;
	margin: 0 0 20px;
}

h1 {
	font-size: 80px;
	font-weight: 700;
	line-height: 130%;
}

h2,
.small h1,
h1.small {
	font-size: 60px;
	font-weight: 700;
	line-height: 120% ;
}

.large h2,
h2.large{
	font-size: 80px;
	font-weight: 700;
	line-height: 130%;
}

h3 {
	font-size: 68px;
}

h4 {
	font-size: 40px;
	font-weight: 700;
	line-height: 120%; 
}

p {
	margin: 0 0 20px;
}

.large p { 
	font-size: 24px;
}

.sans-serif {
	font-family: var(--sans-serif-title);
	font-weight: 400;
}

p:last-child,
.fl-rich-text p:last-child,
.uabb-text-editor p:last-child {
	margin-bottom: 0 !important;
}

/* In-text link styles — scoped to paragraph context only.
   Keeps nav, buttons, and other links unaffected. */
.entry-content p a,
.site-inner .fl-rich-text p a {
	color: var(--Dark-Purple) !important;
	text-decoration: underline;
}

.entry-content p a:hover,
.site-inner .fl-rich-text p a:hover {
	color: var(--Dark-Purple) !important;
	text-decoration: none;
}

a {
	transition: color 0.15s ease-in-out;
}

b,
strong {
	font-weight: 700;
}

input:focus::placeholder,
input:focus::-webkit-input-placeholder { 
	color: transparent !important; 
} 

.nav {
	font-family: pt-mono;
	font-size: 18px;
	font-style: normal;
	font-weight: 400;
	line-height: 1.2;
}

.pt-mono {
	font-family: var(--pt-mono);
}

.body-display {
	font-size: 24px;
	line-height: 1.3;
}


/* =============================================================================
   RESPONSIVE TYPOGRAPHY
   Uncomment and adjust per project. Values below are starting point examples.
   Primary breakpoint for heading size reduction is typically 768px.
============================================================================= */

@media only screen and (max-width: 768px) {
	
	h1 {
		font-size: 44px;
		line-height: 1.2;
	}
	
	h2,
	.small h1,
	h1.small{
		font-size: 32px;
		line-height: 1.3;
	}
	
	.large h2,
	h2.large {
		font-size: 44px;
		line-height: 1.2;
	}
	
	h3 {
		font-size: 28px;
	}
	
	h4 {
		font-size: 24px;
		line-height: 1.2;
	}
	body {
		font-size: 16px;
		line-height: 1.3;
	}
	
	.body-display {
		font-size: 20px;
	}
	
	.nav {
		font-size: 16px;
	}
	
	.large p { 
		font-size: 20px;
	}

}



/* =============================================================================
   BUTTON DEFAULTS
   
============================================================================= */

.fl-button,
.pp-button,
.uabb-button,
.nf-form-content input[type=submit],
.episode-menu .menu-item a,
.episode-filter-button .pp-offcanvas-toggle-button,
.sticky-blue-pixels .pp-offcanvas-toggle-button,
button.formkit-submit {
	border: 1px solid var(--Dark-Purple) !important;
	border-radius: 0 !important;
	box-shadow: 3px 3px 0 0 var(--Dark-Purple) !important;
	font-family: pt-mono !important;
	font-size: 18px !important;
	font-weight: 400 !important;
	line-height: 1.2 !important;
	line-height: 1 !important;
	padding: 12px 20px !important;
	transition: all 0.3s ease-in-out !important;
	background-color: #fff !important;
	text-align: center;
	color: var(--Dark-Purple) !important;
}

@media only screen and (max-width: 760px) {
	.fl-button,
	.pp-button,
	.uabb-button,
	.nf-form-content input[type=submit],
	.episode-filter-button .pp-offcanvas-toggle-button,
	.sticky-blue-pixels .pp-offcanvas-toggle-button,
	button.formkit-submit {
		font-size: 16px !important;
		padding: 10px 16px !important;
	}
}

.pink.fl-button,
.pink .fl-button,
.episode-menu .menu-item.current-menu-item a,
button.formkit-submit {
	background-color: var(--Pink) !important;
}

.mint.fl-button,
.mint .fl-button {
	background-color: var(--Mint) !important;
}

.fl-button:hover,
.pp-button:hover,
.uabb-button:hover,
.nf-form-content input[type=submit]:hover,
.episode-menu .menu-item a:hover,
.episode-filter-button .pp-offcanvas-toggle-button:hover,
.sticky-blue-pixels .pp-offcanvas-toggle-button:hover,
button.formkit-submit:hover  {
	box-shadow: 0 0 0 0 var(--Dark-Purple) !important;
    transform: translate(3px, 3px) !important;
}

.episode-menu .menu-item a:hover {
	background-color: var(--Pink) !important;
}

.episode-menu ul {
	margin: 0 !important;
}

.fl-button-text,
.fl-button-icon,
.fl-button:hover .fl-button-text,
.fl-button:hover .fl-button-icon {
	color: inherit !important;
}

/* Button Group - Horizontal */
.fl-module-button-group::before,
.fl-module-button-group::after {
	display: none !important;
}

.fl-button-group-layout-vertical,
.fl-button-group-layout-horizontal {
	display: flex !important;
	gap: 24px;
	flex-wrap: wrap;
}

.fl-button-group-layout-horizontal {
	justify-content: center;
	align-items: center;
}

.fl-button-group-layout-horizontal .fl-button-group-button {
    padding: 0 !important;
}

.fl-button-group-layout-vertical {
	flex-direction: column;
}

.dashed-underlined-button a {
	background: transparent!important;
	border: none!important;
	border-bottom: 1px dashed var(--Dark-Purple)!important;
	box-shadow: none!important;
	padding: 0 0 4px 0!important;
}

.dashed-underlined-button a:hover {
	border-bottom: 1px dashed transparent!important;
	box-shadow: none !important;
    transform: none !important;
}

/*@media only screen and (max-width: 760px) {
	.stack-on-mobile .fl-button-group-layout-horizontal {
		flex-direction: column;
		gap: 16px;
	}
}*/


/* =============================================================================
   LISTS
   Restore sensible list defaults inside content and BB rich text areas.
   (Genesis/resets strip these.)
============================================================================= */

.entry-content ol,
.entry-content ul,
.site-inner ol,
.site-inner ul,
.fl-rich-text ol,
.fl-rich-text ul {
	margin: 0 0 20px;
	padding: 0;
}

.entry-content ol > li,
.site-inner ol > li,
.fl-rich-text ol > li {
	list-style-type: decimal;
	margin-bottom: 8px;
}

.entry-content ul > li,
.site-inner ul > li,
.fl-rich-text ul > li {
	list-style-type: none;
	margin-bottom: 8px;
}

.fl-rich-text ul > li  {
	display: flex;
	gap: 10px;
	align-items: center;
}

.fl-rich-text ul > li::before {
	width: 12px;
	content: "\e903";
	font-family: attitudes-icons;
	font-size: 12px;
}

.entry-content ol ol,
.entry-content ul ul,
.fl-rich-text ol ol,
.fl-rich-text ul ul {
	margin-bottom: 0;
}


/* =============================================================================
   WORDPRESS ALIGN CLASSES
   Used by the block editor and classic editor image alignment.
============================================================================= */

.alignleft {
	float: left;
	margin: 0 24px 16px 0;
}

.alignright {
	float: right;
	margin: 0 0 16px 24px;
}

.aligncenter,
img.centered {
	display: block;
	margin: 0 auto 24px;
}

.alignnone {
	margin-bottom: 16px;
}

.wp-caption-text {
	font-size: 14px;
	text-align: center;
}

/* =============================================================================
   Position/Relative Over/Under
============================================================================= */
.over {
	z-index: 10;
	position: relative;
}

.under {
	z-index: 1;
	position: relative;
}


/* =============================================================================
   GENESIS CHROME
   Hide default Genesis header/footer — Beaver Themer handles all of this.
============================================================================= */

.site-header,
.site-footer {
	display: none;
}


/* =============================================================================
   BEAVER BUILDER
============================================================================= */

/* Prevents Genesis list reset from stripping menu item list styles */
.fl-menu .menu li {
	list-style-type: none;
}

/* Prevents absolutely-positioned elements and animations bleeding outside rows.
   Safe to remove on a per-row basis using overflow: visible !important if needed.  */

.hide-overflow .fl-row-content-wrap {
	overflow: hidden;
}

/* =============================================================================
   NINJA FORMS
============================================================================= */

.nf-form-fields-required {
	display: none;
}

.ninja-forms-req-symbol {
	color: var(--text) !important;
}

.nf-form-content textarea,
.nf-form-content input:not([type=button]) {
	border: 1px solid var(--Dark-Purple) !important;
	color: var(--Dark-Purple, #351C3A) !important;
	font-family: pt-mono;
	font-size: 18px !important;
	font-style: normal;
	font-weight: 400;
	line-height: 120%;
}

.nf-form-content textarea::placeholder,
.nf-form-content input:not([type=button])::placeholder {
	opacity: 1;
	color: var(--Dark-Purple, #351C3A) !important;
}

label a {
	color: var(--Dark-Purple) !important;
}

label a:hover {
	text-decoration: none !important;
}

/* ----------------------------------------
   ERROR STYLING
---------------------------------------- */
.nf-error .nf-error-msg,
.nf-error-msg {
	color: var(--error) !important;
}

.nf-error.field-wrap .nf-field-element:after {
	background: transparent !important;
	color: var(--error) !important;
}

.nf-error .ninja-forms-field {
	border-color: var(--error) !important;
}

/* ----------------------------------------
   TEXT FIELDS
---------------------------------------- */
.contact .nf-form-content .list-select-wrap .nf-field-element>div, 
.contact .nf-form-content input:not([type=button]), 
.contact .nf-form-content textarea {
	background-color: transparent !important;
}

/* ----------------------------------------
   CHECKBOXES + RADIOS
---------------------------------------- */
.listcheckbox-wrap .nf-field-element label:after, 
.checkbox-wrap .nf-field-label label:after {
	background-color: transparent !important;
	border: 1px solid #000 !important;
	border-radius: 0 !important;
	width: 20px !important;
	height: 20px !important;
	top: 0 !important;
}

/* Checked */
.checkbox-wrap .nf-field-element label:before, 
.checkbox-wrap .nf-field-label label:before, 
.listcheckbox-wrap .nf-field-element label:before, 
.listcheckbox-wrap .nf-field-label label:before {
	color: var(--Dark-Purple) !important;
	font-size: 18px !important;
	font-weight: 400 !important;
	line-height: 20px !important;
	bottom: unset !important;
	top: unset !important;
	left: -28px !important;
}

.listradio-wrap .nf-field-element label.nf-checked-label:before {
	background-color: var(--Dark-Purple) !important;
}


/* =============================================================================
   ADMIN BAR FIX
   Prevents admin bar from overlapping content on mobile.
============================================================================= */

@media only screen and (max-width: 782px) {
	html {
		margin-top: 0 !important;
	}

	.admin-bar .site-container {
		padding-top: 46px !important;
	}
}

/* =============================================================================
   Rotation
============================================================================= */
.rotateup {
	transform: rotate(-3.303deg);
}

/* =============================================================================
   KIT FORMS
   Class-based styling system for embedded Kit (formerly ConvertKit) forms.
   Apply wrapper classes in BB to trigger variants. Colors inherit from
   --kit-* custom properties defined in :root above.

   VARIANTS:
     .kit-form-inline     — single-line input + button side by side
     .kit-form-stacked    — input and button stacked vertically

   USAGE:
     1. Set --kit-* variables in :root to match project brand colors.
     2. Wrap the Kit embed in a BB HTML module and add .kit-form-inline
        or .kit-form-stacked as a class on that module's row or column.
     3. For a color variant that differs from the project default (e.g. a
        white form on a dark background), override --kit-primary etc. with
        a project-specific selector in the PROJECT-SPECIFIC STYLES section.
     4. Per-form data-uid overrides go in PROJECT-SPECIFIC STYLES below.

   NOTE: Not using Kit? Delete this section.
============================================================================= */

/* ----------------------------------------
   SHARED — applies to all Kit form variants
---------------------------------------- */

.kit-form-inline .formkit-form,
.kit-form-stacked .formkit-form {
    max-width: 100% !important;
}

.kit-form-inline .formkit-input,
.kit-form-stacked .formkit-input {
    font-family: var(--kit-font);
    font-size: 18px;
    color: var(--kit-input-text);
    background-color: var(--kit-bg);
    height: 56px;
    padding: 12px 11px 8px !important;
}

.kit-form-inline ::placeholder,
.kit-form-stacked ::placeholder {
    font-family: var(--kit-font);
    color: var(--kit-input-text);
    opacity: 0.7;
}

.kit-form-inline .formkit-button,
.kit-form-inline .formkit-submit,
.kit-form-stacked .formkit-button,
.kit-form-stacked .formkit-submit {
    cursor: pointer;
}

.kit-form-inline .formkit-submit > span,
.kit-form-stacked .formkit-submit > span {

}

.kit-form-inline .formkit-button:hover,
.kit-form-inline .formkit-submit:hover,
.kit-form-stacked .formkit-button:hover,
.kit-form-stacked .formkit-submit:hover {
    background-color: transparent !important;
}

.kit-form-inline .formkit-submit:hover > span,
.kit-form-stacked .formkit-submit:hover > span {
    background-color: transparent !important;
}

.kit-form-inline .formkit-alert-success,
.kit-form-stacked .formkit-alert-success {
    background: var(--kit-success-bg);
    border-color: var(--kit-success-border);
    color: var(--kit-success-border);
}

.kit-form-inline .formkit-alert,
.kit-form-stacked .formkit-alert {
    font-family: var(--kit-font);
}


button.formkit-submit span {
	padding: 0 !important;
}

button.formkit-submit {
	width: auto !important;
}

.formkit-form[data-uid="010ebb0218"] .formkit-button:hover>span, .formkit-form[data-uid="010ebb0218"] .formkit-submit:hover>span, .formkit-form[data-uid="010ebb0218"] .formkit-button:focus>span, .formkit-form[data-uid="010ebb0218"] .formkit-submit:focus>span {
	background-color: transparent !important;
}

.formkit-form[data-uid="010ebb0218"][min-width~="700"] [data-style="clean"], .formkit-form[data-uid="010ebb0218"][min-width~="800"] [data-style="clean"] {
	padding: 0 !important;
}

/* ----------------------------------------
   INLINE — input + button side by side
---------------------------------------- */

.kit-form-inline .formkit-fields {
    display: grid !important;
    grid-template-columns: 1fr auto;
    gap: 8px;
    align-items: center;
}

.kit-form-inline .formkit-field,
.kit-form-inline .formkit-submit {
    margin: 0;
}

@media (max-width: 445px) {
    .kit-form-inline .formkit-fields {
        grid-template-columns: 1fr;
    }
}


/* ----------------------------------------
   STACKED — input above button
---------------------------------------- */

.kit-form-stacked .formkit-fields {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
}


/* =============================================================================
   PROJECT-SPECIFIC STYLES
   Add per-project CSS below this line (or in a separate enqueued stylesheet).
   Kit data-uid overrides (per-form success messages, color variants) go here.
============================================================================= */
.radial-gradient-bg .fl-row-content-wrap,
.fl-builder-edit.fl-theme-builder-header header .fl-row-content-wrap {
    background: radial-gradient(85.97% 164.42% at 100% 190.56%, #FE44AA 22.16%, #303458 100%), #351C3A !important;
}

.sticky  {
	position: sticky;
	top: 0;
	z-index: 99;
}

.admin-bar .sticky {
	top: 32px;
}

.sticky-blue-pixels::after {
	content: '';
	width: 100%;
	height: 27px;
	background: url('../../uploads/blue-pixels.png');
	background-repeat: repeat-x !important;
    background-size: auto 27px !important;
	background-color: transparent !important;
}


header .menu,
footer .menu {
    display: flex;
    gap: 32px;
	flex-wrap: wrap;
}

footer .menu {
	gap: 24px;
}

header .menu::before,
footer .menu::before,
footer .menu::after {
    display: none !important;
}

body:not(.logged-in) header .menu::after {
	display: none !important;
}

@media only screen and (max-width: 1200px) {
	header .menu .menu-item a {
		font-size: 16px !important;
	}
	
	header .menu {
		gap: 24px;
	}
}

@media only screen and (max-width: 760px) {
	.fl-menu {
		container-type: normal !important;
	}
	
	footer .menu-item {
		font-size: 13px !important;
		line-height: 1 !important;
	}
}

header .menu-item a::after,
footer .menu-item a::after,
.uabb-search-form .uabb-button .uabb-button-text::after,
.mobile-menu-content .menu-item a:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 1px;
  width: 10.8px;
  background-color: #fff;
  transition: width 0.3s ease;
}
.mobile-menu-content .menu-item a {
	display: inline-block;
	overflow: hidden;
}
.mobile-menu-content .menu-item a:after {
	background-color: var(--Dark-Purple);
}

@media only screen and (max-width: 1200px) {
	header .menu-item a::after,
	footer .menu-item a::after,
	.uabb-search-form .uabb-button .uabb-button-text::after,
	.mobile-menu-content .menu-item a::after {
		width: 9.59px;
	}
}

header .menu-item a:hover::after,
footer .menu-item a:hover::after,
.uabb-search-form .uabb-button:hover .uabb-button-text::after,
.mobile-menu-content .menu-item:hover a:after{
  width: 100%;
}

.mobile-menu .pp-offcanvas-toggle {
    display: block;
}

.mobile-menu .pp-offcanvas-toggle-button,
.uabb-search-form .uabb-button {
	padding: 0 !important;
	background-color: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
}

.mobile-menu .pp-offcanvas-toggle-button:hover,
.uabb-search-form .uabb-button:hover {
	transform: translate(0) !important;
}

.uabb-search-form .uabb-button-text {
	line-height: 1.2 !important;
}

.uabb-search-form .uabb-search-form-wrap {
	display: block !important;
	margin-bottom: 2px;
}

@media only screen and (max-width: 1200px) {
	.uabb-search-form .uabb-button {
		font-size: 16px !important;
	}
}

.mobile-search input {
	padding: 12px !important;
}

.mobile-search input::placeholder {
	opacity: 1 !important;
}

.mobile-search input,
.mobile-search input::placeholder {
	color: var(--Dark-Purple, #351C3A);
	font-family: pt-mono;
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	line-height: 120%;
}

.mobile-search .pp-search-form__icon {
	display: none !important;
}

.mobile-menu-content .menu {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.mobile-menu-content .menu-item a {
	color: var(--Dark-Purple) !important;
}

.page-id-138500618 header .dashed-box,
.parent-pageid-138500618 header .dashed-box,
.dark-header header .dashed-box,
.single-episode header .dashed-box,
.search-results header .dashed-box,
.error404 header .dashed-box,
.role-subscriber.page-id-138500623 header .dashed-box,
.role-subscriber.page-id-138500619 header .dashed-box {
	border-color: var(--Dark-Purple) !important;
}

.page-id-138500618 header .menu-item a,
.parent-pageid-138500618 header .menu-item a,
.dark-header header .menu-item a,
.single-episode header .menu-item a,
.search-results header .menu-item a,
.page-id-138500618 header .pp-offcanvas-toggle-icon,
.parent-pageid-138500618 header .pp-offcanvas-toggle-icon,
.dark-header header .pp-offcanvas-toggle-icon,
.single-episode header .pp-offcanvas-toggle-icon,
.search-results header .pp-offcanvas-toggle-icon,
.page-id-138500618 header .uabb-button-text,
.parent-pageid-138500618 header .uabb-button-text,
.dark-header header .uabb-button-text,
.single-episode header .uabb-button-text,
.search-results header .uabb-button-text,
.error404 header .uabb-button-text,
.error404 header .pp-offcanvas-toggle-icon,
.error404 header .menu-item a,
.role-subscriber.page-id-138500623 header .menu-item a,
.role-subscriber.page-id-138500623 header .pp-offcanvas-toggle-icon,
.role-subscriber.page-id-138500623 header .uabb-button-text,
.role-subscriber.page-id-138500619 header .menu-item a,
.role-subscriber.page-id-138500619 header .pp-offcanvas-toggle-icon,
.role-subscriber.page-id-138500619 header .uabb-button-text{
	color: var(--Dark-Purple) !important;
}

.page-id-138500618 header .menu-item a::after,
.parent-pageid-138500618 header .menu-item a::after,
.dark-header header .menu-item a::after,
.single-episode header .menu-item a::after,
.search-results header .menu-item a::after,
.page-id-138500618 .uabb-search-form .uabb-button .uabb-button-text::after,
.parent-pageid-138500618 .uabb-search-form .uabb-button .uabb-button-text::after,
.dark-header .uabb-search-form .uabb-button .uabb-button-text::after,
.single-episode .uabb-search-form .uabb-button .uabb-button-text::after,
.search-results .uabb-search-form .uabb-button .uabb-button-text::after,
.error404 .uabb-search-form .uabb-button .uabb-button-text::after,
.error404 header .menu-item a::after,
.role-subscriber.page-id-138500623 header .menu-item a::after,
.role-subscriber.page-id-138500623 .uabb-search-form .uabb-button .uabb-button-text::after,
.role-subscriber.page-id-138500619 header .menu-item a::after,
.role-subscriber.page-id-138500619 .uabb-search-form .uabb-button .uabb-button-text::after{
	background-color: var(--Dark-Purple) !important;
}

footer .fl-rich-text p a, 
footer .fl-rich-text p a:hover,
.fl-theme-builder-footer .fl-rich-text a {
	color: #fff !important;
}

footer .fl-rich-text p a:hover {
	text-decoration: none !important;
}
/* ----------------------------------------
   YELLOW NOTE BOX
---------------------------------------- */
.note-box {
    background-color: var(--Cream);
    border: 1px solid var(--Dark-Purple);
    box-shadow: 6px 6px 0 0 #351C3A;
    position: relative;
    padding: 73px 40px 40px;
}

.note-box::before {
    content: '';
    width: 100%;
    height: 33px;
    background: linear-gradient(to bottom, var(--Dark-Purple) 0, var(--Dark-Purple) 16px, var(--Cream) 16px, var(--Cream) 17px, var(--Dark-Purple) 17px,
    var(--Dark-Purple) 33px);
    position: absolute;
    top: 0;
    left: 0;
}

@media only screen and (max-width: 1024px) {
	.note-box {
		padding: 57px 24px 24px;
	}
}

/* ----------------------------------------
   BLUE PIXEL ROW BORDER
---------------------------------------- */
.blue-pixels .fl-row-content-wrap {
    background-size: auto 27px !important;
	background-color: transparent !important;
}

.blue-pixels-before::before,
.blue-pixels-after::after {
	content: '';
	width: 100%;
	height: 27px;
	background-size: auto 27px !important;
	background-color: transparent !important;
}

.blue-pixels-before::before {
	background-image: url('../../uploads/blue-pixels.png');
	margin-bottom: -1px;
}

/* ----------------------------------------
   SCROLLING TEXT
---------------------------------------- */
.scrolling-text {
    text-align: center;
    gap: 40px;
    overflow: hidden;
	display: flex !important;
	flex-wrap: nowrap !important;
	width: max-content;
	animation: infinite-scrolling linear infinite;
	
}

.scrolling-text p {
	color: #FFF;
	z-index: 1;
	position: relative;
	font-family: newake;
    font-size: 128px;
    font-style: normal;
    font-weight: 400;
    line-height: 0.86;
    text-transform: uppercase;
}

.scrolling-text p::before {
	content: attr(data-text); 
	position: absolute;
	top: 5px;
	left: 5px; 
	z-index: -1;
	width: 100%;
	background: var(--Drop-Shadow, linear-gradient(180deg, #351C3A 7.21%, #FFECE4 15.87%, #351C3A 28.85%, #F91493 60.1%, #FB5B3C 82.21%, #351C3A 100%));
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.scrolling-text p {
	margin-bottom: 0;
}

@media only screen and (max-width: 760px) {
	.scrolling-text p {
		font-size: 64px;
	}
	
	.scrolling-text p::before {
		top: 3px;
		left: 3px;
	}
}

@keyframes infinite-scrolling {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* =============================================================================
   EPISODE GRID
============================================================================= */
.episode-grid .pp-content-post-grid {
	row-gap: 34px !important;
	column-gap: 18px !important;
}

.episode-link {
    display: flex;
    flex-direction: column;
    gap: 16px;
    border: 1px solid var(--Dark-Purple, #351C3A) !important;
    background: var(--Cream, #F6F3D2);
    box-shadow: 6px 6px 0 0 #351C3A !important;
    padding: 12px 12px 24px 12px;
    color: var(--Dark-Purple) !important;
    text-align: center;
	margin-right: 6px;
	margin-bottom: 6px;
	height: calc(100% - 6px);
	transition: all 0.3s ease-in-out !important;
}

.episode-link:hover {
	box-shadow: 0 0 0 0 var(--Dark-Purple) !important;
    transform: translate(6px, 6px) !important;
}

.episode-image img {
	width: 100%;
	aspect-ratio: 377/380;
	object-fit: cover;
}

.episode-title {
    font-family: albert-sans;
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: 130%;
    margin: 0;
	overflow-wrap: anywhere;
}

.episode-date {
	margin-top: 8px;
}

@media only screen and (max-width: 760px) {
	.episode-grid .pp-content-post-grid {
		row-gap: 18px !important;
	}
	
	.episode-link {
		display: grid;
		grid-template-columns: 35% auto;
		grid-column-gap: 16px;
		grid-row-gap: 24px;
	}
	
	.episode-date {
		grid-row: 1/2;
		grid-column: 1/3;
		margin: 0;
	}
	
	.episode-image {
		grid-row: 2/3;
		grid-column: 1/2;
	}
	
	.episode-title {
		grid-row: 2/3;
		grid-column: 2/3;
		font-size: 20px;
	}
}

.episode-grid ul.page-numbers {
    display: flex !important;
    gap: 27px;
    justify-content: center;
    align-items: center;
	flex-wrap: wrap;
}

@media only screen and (max-width: 760px) {
	.episode-grid ul.page-numbers {
		gap: 12px;
	}
}

.episode-grid ul.page-numbers li .page-numbers {
    font-family: albert-sans;
    font-size: 18px !important;
    font-weight: 400;
    line-height: 1.3;
    padding: 2px 10px !important;
    margin: 0 !important;
	margin-right: 3px !important;
    min-width: 0 !important;
    background-color: transparent !important;
    border: 1px solid transparent !important;
}

.episode-grid ul.page-numbers .current.page-numbers,
.episode-grid ul.page-numbers a.page-numbers:hover {
    border: 1px solid var(--Dark-Purple, #351C3A) !important;
    background-color: var(--Pink, #FF88D0) !important;
    box-shadow: 3px 3px 0 0 #351C3A !important;
}


.episode-grid .pp-content-grid-pagination {
    padding-top: 40px !important;
    padding-bottom: 0 !important;
}

.pp-content-grid-empty {
	border: 0 !important;
	padding: 0 !important;
	font-size: unset !important;
}

.episode-menu-mobile .menu {
    display: flex !important;
    flex-direction: column;
    gap: 24px;
}

.episode-menu-mobile .menu-item {
    margin-bottom: 0;
}
.episode-menu-mobile .menu-item a {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--Dark-Purple);
}

.episode-menu-mobile .menu-item a::before {
    content: '';
    width: 16px;
    height: 16px;
    border: 1px solid var(--Dark-Purple);
    border-radius: 16px;
    background-color: transparent;
    display: block;
}

.episode-menu-mobile .menu-item.current-menu-item a::before,
.episode-menu-mobile .menu-item:hover a::before {
    background-color: var(--Pink);
}

/* =============================================================================
   BONUS EPISODES
============================================================================= */

.highlighted p {
    background: var(--Accent-Yellow);
    display: inline;
    padding: 0 3px;
}

.bonus-anchors {
    display: flex;
    column-gap: 16px;
    row-gap: 24px;
    flex-wrap: wrap;
    justify-content: center;
}

.bonus-anchors p {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 16px;
}

.bonus-anchors p::after {
    content: '';
    width: 8px;
    height: 8px;
    background-color: var(--Accent-Yellow);
    display: block;
}

.bonus-anchors p:last-of-type::after {
    display: none;
}

.bonus-anchors a {
    text-decoration: none !important;
}

.bonus-anchors a:hover {
    text-decoration: underline !important;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px !important;
}

@media only screen and (max-width: 1024px) {
    .bonus-anchors {
        flex-direction: column;
    }
    .bonus-anchors p::after {
        display: none;
    }
    
    .bonus-anchors p::before {
    	content: '';
    	width: 8px;
    	height: 8px;
    	background-color: var(--Accent-Yellow);
    	display: block;
	}
}

@media only screen and (max-width: 992px) {
	.bonus-episode .episode-grid .pp-content-post-grid {
		grid-template-columns: repeat(3, 1fr) !important;
		margin-right: -24px !important;
	}
	
	.bonus-episode .episode-grid .pp-content-post {
		width: 290px;
	}
}

@media only screen and (max-width: 760px) {
	.bonus-episode .episode-grid .pp-content-post-grid {
		margin-right: -16px !important;
	}
}


/* =============================================================================
   HOMEPAGE/SALES
============================================================================= */
/* Popup */
#modal-fxlrv4himyup .uabb-modal-close {
    top: 45px;
    right: 15px;
}

.no-wrap-text {
    white-space: nowrap;
}

@media only screen and (max-width: 768px) {
 .no-wrap-text {
    white-space: normal;
}   
}

.gradient-shadow .gradient-text-wrap {
    position: relative;
    display: inline-block;
    z-index: 1;
    font-size: 128px;
    font-style: normal;
    font-weight: 700;
    line-height: 0.86;
    text-transform: uppercase;
    margin: 0;
}

.gradient-shadow .white-layer {
    position: relative;
    color: #FFF;
    z-index: 1;
}

.gradient-shadow .gradient-layer {
    position: absolute;
	top: 106px;
    left: 6px;
    z-index: 0;
    width: 100%;
    background: linear-gradient(180deg, #351C3A 7.21%, #FFECE4 15.87%, #351C3A 28.85%, #F91493 60.1%, #FB5B3C 82.21%, #351C3A 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 20px rgba(249, 20, 147, 0.6));
}

.glow-shadow h1 {
	text-shadow: 0 0 15.67px #F91493;
	-webkit-text-stroke-width: 0.98px;
	-webkit-text-stroke-color: #FE44AA;
	font-family: var(--script)!important;
	font-size: 207.216px;
	font-style: normal;
	font-weight: 400;
	line-height: 177.614px; /* 85.714% */
	letter-spacing: -6.216px;
}

.faqs-accordion .pp-accordion-item {
	box-shadow: 6px 6px 0 0 #351C3A;
}

.faqs-accordion .pp-accordion-item .pp-accordion-button {
	margin-bottom: -1px;
}

.faqs-accordion .pp-accordion-button-icon {
	transform: rotate(90deg);
    padding: 0!important;
}

.pp-accordion-content a {
	color: var(--Dark-Purple) !important;
	text-decoration: underline !important;
}

.add-border-shadow img {
	border: 1px solid var(--Dark-Purple);
	box-shadow: 3px 3px 0 0 var(--Dark-Purple);
}

@media only screen and (max-width: 760px) {
	.gradient-shadow .gradient-layer {
		top: 45px;
        left: 3px;
	}
}

.press-recognition-title .pp-infobox-title-prefix {
	background-image: url(/wp-content/uploads/textured-bg-scaled.jpg);
    background-repeat: no-repeat;
    background-size: 100%;
	font-family: pt-mono !important;
	width: fit-content;
    margin: 8px auto;
	padding: 0 8px;
}

.press-recognition .pp-vertical-align {
	width: 100%;
}

.press-recognition .layout-2 .pp-content-wrapper {
    margin-bottom: 20px;
}

.press-recognition .pp-testimonials .layout-2 .pp-testimonials-image {
	margin-right: 0!important;
}

.press-recognition .pp-title-wrapper {
    display: none !important;
}

/* .bonus-episodes-container {
	overflow: auto;
} */

.scrollbar-wrap {
	width: 100%;
	height: 10px !important;
}

.bonus-episodes {
	/*width: 400px!important;*/
	flex-shrink: 0;
	padding-bottom: 8px;
}

.bonus-episodes img {
	width: 100%;
	aspect-ratio: 1/1;
	object-fit: cover;
}

.bonus-episodes .pp-infobox-link:hover .pp-infobox {
	box-shadow: none;
	transform: translate(6px, 6px) !important;
}

@media (max-width: 768px) {
	.bonus-episodes {
		width: 280px;
	}
}

@media only screen and (max-width: 1024px) {
    .gif-arrow img {
        transform: rotate(90deg);
    }
}

.home-hero .fl-row-content-wrap {
	background-size: auto 750px, cover !important;
	min-height: 100dvh !important;
}

@media only screen and (max-width: 1350px) and (min-width: 1150px) {
	.home-hero .fl-module-box {
		margin-left: 300px !important;
	}
}
@media only screen and (max-width: 1149px) and (min-width: 1024px) {
	.home-hero .fl-row-content-wrap {
		background-position: left -70px bottom, center !important;
	}
	
	.home-hero .fl-module-box {
		margin-left: 170px !important;
	}
}

@media only screen and (max-width: 1024px) and (min-width: 761px) {
	.home-hero .fl-row-content-wrap {
		background-size: auto 450px, cover !important;
	}
	.home-hero .gradient-shadow {
		margin-top: -130px !important;
	}
	.home-hero .gradient-shadow .gradient-layer {
		top: 85px;
	}
}

@media only screen and (max-width: 760px) {
	.home-hero .fl-row-content-wrap {
		background-size: auto 40dvh, cover !important;
	}
	
	.home-hero .gradient-shadow {
		max-width: 332px;
		margin-left: auto !important;
		margin-right: auto !important;
	}
}

/* =============================================================================
   EVENTS PAGE
============================================================================= */
.live-events-grid {
    position: relative;
    margin: 0 auto;
}

.live-events-grid .live-events-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
    gap: 80px;
    height: auto;
    min-height: 0;
}

.live-events-grid .live-event-description {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 32px;
    min-width: 0;
}

.live-events-grid .live-event-description-container {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.live-events-grid .live-event-photo {
    position: relative;
    min-height: 400px;
    overflow: hidden;
	aspect-ratio: 546 / 570;
}

.live-events-grid .live-event-photo img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Tablet */
@media (max-width: 1200px) {
    .live-events-grid {
        padding: 36px;
    }
    .live-events-grid .live-events-container {
        gap: 40px;
    }
}

/* Mobile: stack */
@media (max-width: 992px) {
    .live-events-grid {
        padding: 24px;
    }
    .live-events-grid .live-events-container {
        grid-template-columns: 1fr;
    }
    .live-events-grid .live-event-photo {
        min-height: 0;
        aspect-ratio: 39 / 41;
    }
    .live-events-grid .live-event-description .pink .fl-button {
        margin-bottom: 24px;
    }
}

/* =============================================================================
   WELCOME MEMBER PAGE
============================================================================= */
/* Marquee */
.you-got-this-marquee .marquee {
  position: relative;
    width: 100%;
    max-width: 100%;
    height: 145px;
  overflow-x: hidden;
}


.you-got-this-marquee .marquee .track {
  position: absolute;
  white-space: nowrap;
  will-change: transform;
  animation: marquee 60s linear infinite;
}


.you-got-this-marquee .marquee .content {
font-family: var(--sans-serif-title);
font-size: 130px;
line-height: .8;
color: #fff;
	text-transform: uppercase;
}

.you-got-this-marquee .marquee .content span {
    position: relative;
    display: inline-block;
    color: #fff;
}

.you-got-this-marquee .marquee .content span::before {
    content: "Girl, you got this.";
    position: absolute;
    top: 6px;
    left: 6px;
    z-index: -1;
    width: 100%;
    background: linear-gradient(180deg, #351C3A 7.21%, #FFECE4 15.87%, #351C3A 28.85%, #F91493 60.1%, #FB5B3C 82.21%, #351C3A 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-transform: uppercase;
}


@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@media (max-width: 992px) {
	.you-got-this-marquee .marquee .content {
		font-size: 64px;
	}
	
	.you-got-this-marquee .marquee {
		height: 65px;
	}
}


.fair-warning-icon .pp-infobox-title-wrapper {
	display: none;
}

/* =============================================================================
   GIFT PAGE
============================================================================= */
.smooth-scrolling-gallery .swiper-wrapper {
  -webkit-transition-timing-function: linear!important;
  -moz-transition-timing-function: linear!important;
  transition-timing-function: linear!important;
}

.gift-attitudes-scrolling-gallery img {
	aspect-ratio: 1/1;
	object-fit: cover;
}

.gift-attitudes-scrolling-gallery .pp-image-carousel-item,
.gift-attitudes-scrolling-gallery .swiper-slide-inner,
.gift-attitudes-scrolling-gallery img {
	width: 100%;
}

/* =============================================================================
   PODCAST EPISODE LAYOUT
============================================================================= */
.breadcrumbs a {
	color: var(--Dark-Purple);
}

.breadcrumbs a:hover {
	text-decoration: none;
}

/*.mejs-container, .mejs-container .mejs-controls, .mejs-embed, .mejs-embed body {
    background-color: #fff !important;
}

.mejs-container {
	max-width: 1000px !important;
	margin-left: auto !important;
	margin-right: auto !important;
}

.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current {
    background-color: var(--Dark-Purple) !important;
}

.fl-wp-audio .mejs-button button {
    border-color: #000 !important;
}

.mejs-time {
    color: var(--Dark-Purple) !important;
    font-family: albert-sans !important;
    font-size: 18px !important;
    font-weight: 400 !important;
    line-height: 1.4 !important;
    letter-spacing: -0.36px !important;
    padding: 0 !important;
}

.mejs-duration {
    font-family: albert-sans !important;
}

.mejs-controls {
    gap: 16px !important;
    align-items: center !important;
}

.mejs-time-rail {
    padding: 0 !important;
    margin: 0 !important;
    align-items: center !important;
	display: flex !important;
	align-items: center !important;
}

.mejs-time-total {
    margin: 0 !important;
    background: #fff !important;
    border: 1.5px solid var(--Dark-Purple) !important;
	height: 20px !important;
}

.mejs-time-buffering, 
.mejs-time-current, 
.mejs-time-float, 
.mejs-time-float-corner, 
.mejs-time-float-current, 
.mejs-time-hovered, 
.mejs-time-loaded, 
.mejs-time-marker, 
.mejs-time-handle, .mejs-time-handle-content {
	height: 17px !important;
}

.mejs-time-handle {
	height: 20px !important;
}

.mejs-time-handle, .mejs-time-handle-content {
	border: 0 !important;
}

.mejs-controls .mejs-time-rail .mejs-time-loaded,
.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-total {
	background-color: #fff !important;
}

.mejs-controls .mejs-time-rail .mejs-time-current {
	background-color: var(--Dark-Purple) !important;
}

.mejs-time-handle-content {
	top: 0 !important;
	background-color: var(--Pink) !important;
}

.mejs-horizontal-volume-total {
	top: 50% !important;
	transform: translatey(-50%) !important;
	height: 20px !important;
}

.podcast-audio .mejs-button>button {
	background: none !important;
	background-position: center !important;
	background-size: contain !important;
	background-repeat: no-repeat !important;
}

.podcast-audio .mejs-play>button {
	background-image: url('https://attitudespodcast.com/wp-content/themes/wonderly-child-theme-2026/images/controls-play.svg') !important;
	
}

.podcast-audio .mejs-pause>button {
	background-image: url('https://attitudespodcast.com/wp-content/themes/wonderly-child-theme-2026/images/controls-pause.svg') !important;
	
}

.podcast-audio .mejs-mute>button {
	background-image: url('https://attitudespodcast.com/wp-content/themes/wonderly-child-theme-2026/images/controls-mute.svg') !important;
}

.podcast-audio .mejs-unmute>button {
	background-image: url('https://attitudespodcast.com/wp-content/themes/wonderly-child-theme-2026/images/controls-unmute.svg') !important;
}

.podcast-audio .mejs-unmute>button {
	background-image: url('https://attitudespodcast.com/wp-content/themes/wonderly-child-theme-2026/images/controls-unmute.svg') !important;
}

.podcast-audio .mejs-time {
	font-size: 18px !important;
}

.podcast-audio .mejs-time-rail {
	padding: 0 !important;
}

.podcast-audio .mejs-horizontal-volume-total {
	height: 20px !important;
	position: relative !important;
	top: 18px !important;
}*/

.pp-video-play-icon svg {
	display: none !important;
}

.pp-video-play-icon {
	background: url('../../uploads/play.png') !important;
	background-size: contain !important;
	background-repeat: no-repeat !important;
	padding: 0 !important;
	width: 195px !important;
	aspect-ratio: 1 !important;
}

.pp-video-play-icon:hover {
	opacity: 0.8 !important;
}

@media only screen and (max-width: 760px) {
	.pp-video-play-icon {
		width: 100px !important;
	}
}

.suggestion-box .nf-form-content input[type=submit] {
	background-color: var(--Mint) !important;
}

/* =============================================================================
   LIVE EVENTS PAGE
============================================================================= */
.page-numbers.current,
.pp-content-grid-pagination li a.page-numbers:hover {
    border-style: solid;
    border-width: 0;
    background-clip: border-box;
    border-color: #351C3A!important;
    border-top-width: 1px;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 1px;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
    box-shadow: 6px 6px 0px 0px #351C3A;
}

/* =============================================================================
   PAYWALL
============================================================================= */
.paywall {
	position: relative;
}

/*.paywall::before {
	content: '';
	width: 100%;
	height: 75px;
	background: linear-gradient(to bottom, transparent 0, var(--Soft-Blue) 100%);
	backdrop-filter: blur(2.8499999046325684px);
}*/

.paywall {
	margin-top: -500px;
	padding-top: 100px;
	position: relative;
}

.fl-builder-edit .paywall {
	margin-top: 0;
}

.paywall::before {
	content: '';
	width: 100%;
	height: 300px;
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);
  
  mask-image: linear-gradient(to bottom, transparent 0%, black 85%, black 100%) !important;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 85%, black 100%);
	
	position: absolute;
	top: 0;
	z-index: -1;
}
.paywall .fl-row-content-wrap {
	background: linear-gradient(to bottom, transparent 0, var(--Soft-Blue) 200px, var(--Soft-Blue) 100%) !important;
}

/* =============================================================================
   CONTACT PAGE
============================================================================= */
.contact-form .nf-error-msg {
	font-size: 16px;
}

.contact .contact-form .nf-form-content .submit-wrap input:not([type=button]) {
	    background-color: var(--Pink) !important;
}

.contact .contact-form .nf-form-content .submit-wrap input:not([type=button]):hover {
	    background-color: var(--Cream) !important;
}

/* =============================================================================
   POLICY PAGES
============================================================================= */
.policy .policy_embed_div a {
	color: var(--text);
}

.policy .policy_embed_div .accordion-heading {
	font-size: 17px !important;
}

.policy .policy_embed_div .accordions {
	border: 1px solid var(--text) !important;
	border-radius: 0 !important;
}
.policy .policy_embed_div .accordion:not(:last-of-type) {
	border-bottom: 1px solid var(--text) !important;
}

.policy .policy_embed_div .accordion-summary {
	padding: 16px !important;
}

.policy .policy_embed_div .accordion-summary::marker {
	font-size: 15px;
}

.policy .policy_embed_div .accordion-summary:hover {
	background: transparent !important;
	color: var(--text) !important;
}

.policy .policy_embed_div .accordion-content {
	padding: 0 24px !important;
}

@media only screen and (max-width: 760px) {
	.policy .policy_embed_div .accordion-heading {
		font-size: 16px !important;
	}
	
	.policy .policy_embed_div .accordion-summary {
		padding: 12px !important
	}
	
	.policy .policy_embed_div .accordion-content {
		padding: 0 16px !important;
	}
}

:where(.fl-builder-content, .fl-page) :is(a[href], button, input, select, textarea, [tabindex]:not([tabindex="-1"])):focus {
    outline-style: dotted !important;
    outline-width: 1px !important;
    outline-offset: 1px !important;
	outline-color: transparent !important;
}