/**
 * Theme Name: Josh & Kayla Theme - By FarOffing
 * Template:   faroffing
 * ...other header fields
 */

:root {
	
	/* general */
	
	--std-link-color: var(--wp--preset--color--fo-color-2);
	--std-link-hover-color: var(--wp--preset--color--fo-color-6);
	
	--content-top-margin: 2.5rem;
	--content-bottom-margin: 4rem;
	
	/* .btn */
	
	--btn-ff: var(--wp--preset--font-family--fo-ff-0);
	--btn-font-color: var(--wp--preset--color--fo-color-2);
	--btn-font-hover-color: var(--wp--preset--color--fo-color-10);
	--btn-background-color: transparent;
	--btn-border-color: var(--wp--preset--color--fo-color-3);
	--btn-letter-spacing: 1px;
	--btn-border: solid 2px;
	--btn-border-radius: 100px;
	--btn-padding: .75rem 2rem;
	
	--btn-border-hover-color: var(--wp--preset--color--fo-color-4);
	
	/* HERO */
	
	--hero-top-padding: 200px;
	
}

/* theme */

.fo-bkg-vid-cont {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    overflow: hidden;
	z-index: -1;
}

.fo-bkg-vid-cont video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}

.fade-sm-light-b:after {
	content: '';
	position: absolute;
	top: unset;
	bottom: 0;
	left: 0;
	right: 0;
	height: 4rem;
	max-height: 50%;
	background: linear-gradient(0deg,var(--wp--preset--color--fo-color-1) 25%, transparent 100%);
}

.gfield_description {
    color: inherit !important;
    opacity: .5 !important;
}

.has-box-shadow {
	box-shadow: var(--wp--preset--shadow--natural)
}

body:not(.wp-admin):not(.block-editor-iframe__body) .remove-front-end-bkg {
    background: transparent !important;
}

.btn:not(.wp-block-button), #page .btn:not(.wp-block-button), #page .btn.wp-block-button a, .is-root-container .wp-block.fo-btn, #page .fo-btn.btn.gform_button, body:not(.page-template-default):not(:has(#page)) .is-root-container .fo-btn.btn.gform_button, #page .gform_next_button, body:not(.page-template-default):not(:has(#page)) .is-root-container .gform_next_button {
	position: relative;
	overflow: hidden;
	z-index: 0;
}

.btn:not(.wp-block-button):before, #page .btn:not(.wp-block-button):before, #page .btn.wp-block-button a:before, .is-root-container .wp-block.fo-btn:before, #page .fo-btn.btn.gform_button:before, body:not(.page-template-default):not(:has(#page)) .is-root-container .fo-btn.btn.gform_button:before, #page .gform_next_button:before, body:not(.page-template-default):not(:has(#page)) .is-root-container .gform_next_button:before {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background: var(--wp--preset--gradient--fo-gradient-0);
	z-index: -1;
	transition: var(--transition);
}

.btn:not(.wp-block-button):after, #page .btn:not(.wp-block-button):after, #page .btn.wp-block-button a:after, .is-root-container .wp-block.fo-btn:after, #page .fo-btn.btn.gform_button:after, body:not(.page-template-default):not(:has(#page)) .is-root-container .fo-btn.btn.gform_button:after, #page .gform_next_button:after, body:not(.page-template-default):not(:has(#page)) .is-root-container .gform_next_button:after {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background: var(--wp--preset--gradient--fo-gradient-1);
	z-index: -2;
	transition: var(--transition);
}

.btn:not(.wp-block-button):hover:before, #page .btn:not(.wp-block-button):hover:before, #page .btn.wp-block-button a:hover:before, .is-root-container .wp-block.fo-btn:hover:before, #page .fo-btn.btn.gform_button:hover:before, body:not(.page-template-default):not(:has(#page)) .is-root-container .fo-btn.btn.gform_button:hover:before, #page .gform_next_button:hover:before, body:not(.page-template-default):not(:has(#page)) .is-root-container .gform_next_button:hover:before {
	opacity: 0;
}

.btn:not(.wp-block-button).is-style-outline, #page .btn:not(.wp-block-button).is-style-outline, #page .btn.wp-block-button a.is-style-outline, .is-root-container .wp-block.fo-btn.is-style-outline, #page .fo-btn.btn.gform_button.is-style-outline, body:not(.page-template-default):not(:has(#page)) .is-root-container .fo-btn.btn.gform_button.is-style-outline, #page .gform_next_button.is-style-outline, body:not(.page-template-default):not(:has(#page)) .is-root-container .gform_next_button.is-style-outline {
	color: inherit;
	border-color: currentcolor;
}

.btn:not(.wp-block-button).is-style-outline:before, #page .btn:not(.wp-block-button).is-style-outline:before, #page .btn.wp-block-button a.is-style-outline:before, .is-root-container .wp-block.fo-btn.is-style-outline:before, #page .fo-btn.btn.gform_button.is-style-outline:before, body:not(.page-template-default):not(:has(#page)) .is-root-container .fo-btn.btn.gform_button.is-style-outline:before, #page .gform_next_button.is-style-outline:before, body:not(.page-template-default):not(:has(#page)) .is-root-container .gform_next_button.is-style-outline:before,
.btn:not(.wp-block-button).is-style-outline:after, #page .btn:not(.wp-block-button).is-style-outline:after, #page .btn.wp-block-button a.is-style-outline:after, .is-root-container .wp-block.fo-btn.is-style-outline:after, #page .fo-btn.btn.gform_button.is-style-outline:after, body:not(.page-template-default):not(:has(#page)) .is-root-container .fo-btn.btn.gform_button.is-style-outline:after, #page .gform_next_button.is-style-outline:after, body:not(.page-template-default):not(:has(#page)) .is-root-container .gform_next_button.is-style-outline:after {
	opacity: 0;
}

.btn:not(.wp-block-button).is-style-outline:hover, #page .btn:not(.wp-block-button).is-style-outline:hover, #page .btn.wp-block-button a.is-style-outline:hover, .is-root-container .wp-block.fo-btn.is-style-outline:hover, #page .fo-btn.btn.gform_button.is-style-outline:hover, body:not(.page-template-default):not(:has(#page)) .is-root-container .fo-btn.btn.gform_button.is-style-outline:hover, #page .gform_next_button.is-style-outline:hover, body:not(.page-template-default):not(:has(#page)) .is-root-container .gform_next_button.is-style-outline:hover {
	color: var(--wp--preset--color--fo-color-3);
}

.btn:not(.wp-block-button).is-style-outline:hover:before, #page .btn:not(.wp-block-button).is-style-outline:hover:before, #page .btn.wp-block-button a.is-style-outline:hover:before, .is-root-container .wp-block.fo-btn.is-style-outline:hover:before, #page .fo-btn.btn.gform_button.is-style-outline:hover:before, body:not(.page-template-default):not(:has(#page)) .is-root-container .fo-btn.btn.gform_button.is-style-outline:hover:before, #page .gform_next_button.is-style-outline:hover:before, body:not(.page-template-default):not(:has(#page)) .is-root-container .gform_next_button.is-style-outline:hover:before {
	opacity: 1;
}

blockquote {
    --bq-icon-spacing-x: 50px;
    --bq-icon-spacing-y: 30px;
	
	position: relative;
    padding: var(--bq-icon-spacing-y) 0 0 var(--bq-icon-spacing-x);
}

blockquote:before {
	content: '';
	position: absolute;
	top: 0;
	bottom: unset;
	left: 0;
	right: unset;
	width: 65px;
	height: 65px;
	background: url(/wp-content/uploads/2026/08/jandk-dark-quote.svg) no-repeat top left / contain;
}

.is-style-dark blockquote:before, .is-style-dark-gradient blockquote:before {
	background-image: url(/wp-content/uploads/2026/08/jandk-light-quote.svg);
}

/* #header */

#header {
	color: var(--wp--preset--color--fo-color-1);
	background: transparent;
}

#header:before {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
/* 	background: linear-gradient(0deg,transparent 0%, var(--wp--preset--color--fo-color-2) 80%); */
	background: var(--wp--preset--gradient--fo-gradient-1);
	z-index: -1;
	opacity: 0;
	transition: opacity 400ms;
}

#header.fo-scrolled-nav:before, #header.mobile-menu-open:before {
	opacity: .5;
}

select.gt_selector.notranslate {
    color: inherit;
    background: transparent;
    border: none;
    border-left: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
}

#header .gtranslate_wrapper {
	display: inline-block;
}

#header .navbar-nav a {
    color: inherit;
    font-weight: 600;
    text-decoration: none;
}

#header .navbar-nav .dropdown-menu {
	padding: 0;
	border-radius: 0;
}

#header .gtranslate_wrapper {
	min-height: 25px;
}

#header .gtranslate_wrapper option {
	color: var(--std-text);
	background: var(--std-background);
}

/* SEARCH */

#fo-search-banner {
	color: var(--wp--preset--color--fo-color-1);
	background: var(--wp--preset--gradient--fo-gradient-2);
}

#fo-search-close {
	color: inherit;
}

/* LOGIN */

body.login.login-action-login {
	color: var(--wp--preset--color--fo-color-6);
	background: var(--wp--preset--gradient--fo-gradient-4);
}

body.login.login-action-login .wp-login-logo {
	position: relative;
	min-height: 150px;
}

body.login.login-action-login .wp-login-logo:before {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background: url(/wp-content/uploads/2026/05/logo-26-1.webp) no-repeat center / contain;
}

body.login.login-action-login .wp-login-logo a {
	display: none !important;
}

/* GF Orbital Theme */

.gform-footer {
    justify-content: center;
}

#page .gform_wrapper.gform-theme.gform-theme--orbital[data-form-theme="orbital"], body:not(.page-template-default):not(:has(#page)) .is-root-container .wp-block-gravityforms-form .gform_wrapper.gform-theme.gform-theme--orbital[data-form-theme="orbital"] {
	
	--gf-field-gap-y: 22px;
	--gf-field-gap-x: 22px;

    /* =====================================================
       BRAND COLORS
       ===================================================== */

/*     --gf-color-primary: var(--std-link-color); */
/*     --gf-color-primary-darker: var(--std-highlight-color); */

/*     --gf-color-danger: var(--fo-admin-success); */
/*     --gf-color-success: var(--fo-admin-fail); */

    /* =====================================================
       FORM CONTAINER
       ===================================================== */

/*     --gf-form-background-color: var(--std-background); */
/*     --gf-form-border-color: var(--std-gray); */
/*     --gf-form-border-radius: var(--std-border-radius); */

    /* =====================================================
       TYPOGRAPHY
       ===================================================== */

/*     --gf-font-size: var(--std-font-size); */
/*     --gf-font-family: var(--std-ff); */

/*     --gf-line-height: var(--std-line-height); */

    /* =====================================================
       LABELS
       ===================================================== */

/*     --gf-label-color-primary: var(--std-black); */
/*     --gf-label-font-weight: var(--btn-font-weight); */

    --gf-ctrl-label-color-primary: inherit;
	--gf-color-out-ctrl-dark: inherit;
	--gf-ctrl-readonly-color: inherit;
	/* --gf-ctrl-label-color-secondary: inherit; */

    /* =====================================================
       DESCRIPTIONS / HELP TEXT
       ===================================================== */

/*     --gf-ctrl-desc-color: var(--std-gray); */

    /* =====================================================
       INPUTS / CONTROLS
       ===================================================== */

/*     --gf-ctrl-bg-color: var(--std-white); */
/*     --gf-ctrl-bg-color-hover: var(--std-white); */

/*     --gf-ctrl-color: var(--std-black); */

/*     --gf-ctrl-border-color: var(--std-gray); */
/*     --gf-ctrl-border-color-focus: var(--std-link-color); */

/*     --gf-ctrl-border-size: 1px; */

/*     --gf-ctrl-radius: var(--std-border-radius); */

/*     --gf-ctrl-placeholder-color: var(--std-gray); */

    /* =====================================================
       INPUT PADDING
       ===================================================== */

/*     --gf-ctrl-padding-inline: 15px; */
/*     --gf-ctrl-padding-block: 15px; */

    /* =====================================================
       FOCUS STATES
       ===================================================== */

/*     --gf-ctrl-outline-color-focus: var(--std-link-color); */

    /* =====================================================
       BUTTONS
       ===================================================== */

/*     --gf-btn-bg-color: var(--std-link-color); */
/*     --gf-btn-bg-color-hover: var(--std-highlight-color); */

/*     --gf-btn-color: var(--std-white); */

/*     --gf-btn-border-color: transparent; */
/*     --gf-btn-border-color-hover: transparent; */

/*     --gf-btn-border-radius: 12px; */

/*     --gf-btn-font-weight: 600; */

/*     --gf-btn-padding-inline: 24px; */
/*     --gf-btn-padding-block: 14px; */

    /* =====================================================
       CHECKBOXES / RADIO BUTTONS
       ===================================================== */

/*     --gf-ctrl-choice-size: 20px; */

/*     --gf-ctrl-choice-border-color: #9ca3af; */
/*     --gf-ctrl-choice-border-color-checked: var(--std-link-color); */

/*     --gf-ctrl-choice-bg-color: var(--std-white); */
/*     --gf-ctrl-choice-bg-color-checked: var(--std-link-color); */

    /* =====================================================
       SECTION SPACING
       ===================================================== */

/*     --gf-form-gap-y: 20px; */
/*     --gf-form-gap-x: 20px; */

/*     --gf-field-gap-y: 12px; */

    /* =====================================================
       FORM PADDING
       ===================================================== */

/*     --gf-padding-x: 24px; */
/*     --gf-padding-y: 24px; */

    /* =====================================================
       VALIDATION
       ===================================================== */

/*     --gf-validation-text-color: var(--fo-admin-success); */
/*     --gf-validation-border-color: var(--fo-admin-success); */

    /* =====================================================
       PROGRESS BAR (MULTI-PAGE FORMS)
       ===================================================== */

/*     --gf-progressbar-bg-color: var(--std-gray); */
/*     --gf-progressbar-progress-color: var(--std-link-color); */

    /* =====================================================
       DROPDOWNS
       ===================================================== */

/*     --gf-ctrl-select-bg-color: var(--std-white); */
/*     --gf-ctrl-select-border-color: #d1d5db; */

    /* =====================================================
       FILE UPLOAD
       ===================================================== */

/*     --gf-fileupload-border-color: #d1d5db; */
/*     --gf-fileupload-bg-color: #f9fafb; */

}


/* RELATIONAL */

a.fo-rel-wrapper-link {
	color: inherit;
	text-decoration: none;
}

a.fo-rel-wrapper-link:hover {
	color: inherit;
}

.fo-rel-prod-inner:hover div {
	color: inherit;
}

.prod-img, .post-img {
	background: url() no-repeat top center / cover;
	padding-top: 50%;
}

.post-img {
	background-position: center;
}

.doc-icon-inline {
    display: inline-block;
    width: 40px;
    height: 40px;
    margin-right: 10px;
}

.doc-icon-inline svg {
	fill: currentcolor;
}

.docu-icon {
    width: 75px;
    max-width: 100%;
    height: 75px;
}

/* Yoast */

.wp-block-yoast-faq-block {
	
}

.wp-block-yoast-faq-block .schema-faq-section {
	margin-bottom: var(--fo-font-size-6-mb);
}

.wp-block-yoast-faq-block .schema-faq-question {
	cursor: pointer;
	position: relative;
	color: var(--std-link-color);
	font-family: var(--wp--preset--font-family--fo-ff-1);
	font-size: var(--fo-font-size-6-size);
	line-height: var(--fo-font-size-6-line-height);
	font-weight: 900;
	text-decoration: underline;
	transition: var(--transition);
}

.wp-block-yoast-faq-block .schema-faq-question:hover {
	color: var(--std-link-hover-color);
}

.wp-block-yoast-faq-block .schema-faq-answer {
	color: var(--std-text);
	padding: 1.5rem;
	margin: 1.5rem 0;
	background: var(--wp--preset--gradient--fo-gradient-4);
	border-radius: var(--border-radius);
}

.wp-block-yoast-faq-block:not(.block-editor-block-list__block) .schema-faq-answer {
	display: none;
}

/* woo */

.wp-block-woocommerce-product-meta {
	display: none !important;
}

.custom-cart-icon, .wc-block-components-product-sale-badge {
    display: flex;
    flex-direction: row;
    font-size: var(--fo-font-size-6-size);
    font-weight: 900;
    color: var(--std-background);
    padding: .25rem 1rem;
    border-radius: var(
    --std-border-radius);
    background: var(
    --wp--preset--gradient--fo-gradient-0);
}

.cart-icon {
    width: 30px;
    margin-right: 10px;
}

.cart-icon path {
	fill: var(--std-background);
}

body.single-product .wp-block-woocommerce-single-product .wp-block-post-title {
    pointer-events: none !important;
    cursor: default !important;
}

.wc-block-product-gallery-dialog {
    z-index: 9999 !important;
}

#page .single_add_to_cart_button {
    color: var(--btn-font-color);
    background: var(--btn-background-color);
    padding: var(--btn-padding);
    border: var(--btn-border);
    border-color: var(--btn-border-color);
    border-radius: var(--btn-border-radius);
    transition: var(--transition);
}

#page .single_add_to_cart_button:hover {
    color: var(--btn-font-hover-color);
    background: var(--btn-background-hover-color);
    border-color: var(--btn-border-hover-color);
}

body.single-product .woocommerce-Price-amount {
    font-family: var(--wp--preset--font-family--fo-ff-1);
    font-size: var(--fo-font-size-5-size);
    line-height: var(--fo-font-size-6-line-height);
    margin-bottom: var(--fo-font-size-6-mb);
}

/* responsive */

@media(max-width:991px){
	#header .navbar-nav {
		text-align: center;
	}
}