/*
Theme Name: Teal Theme Base (Teal Framework)
Theme URI: https://katydwyerdesign.com/
Description: Custom Wordpress Theme by Katy Dwyer Design. Requires the Teal Framework
Author: Garrett Gardner
Author URI: http://garrett-gardner.com/
Modifications: John Scilipote / https://www.cultureshiftagency.com/
Version: 1.42.03 (2026-06-16)
*/

/* --------------------------------------------------------- SIMPLY GOURMET --------------------------------------------------------- */
/* ------------------------------------------ Variables - Colors & Fonts */
:root {
	--primary-color: #610300; /* Maroon */
	--secondary-color: #3D4A2E; /* Green */
	--tertiary-color: #7A576B; /* Mauve */
	/* uncomment extra ordinal level colors in TealFramework.php to activate & configure */
	--quaternary-color: #DBAD72; /* Gold */
	--quinary-color: #330D0A; /* Wine */
	--senary-color: #FAE8D6; /* Cream */
	--senary-color-25: #FFFAF4; /* Cream at 25% opacity #FAE8D640 over white */
	/*--septenary-color: #ffffff; /* NotSet */
	/*--octonary-color: #ffffff; /* NotSet */
	/*--nonary-color: #ffffff; /* NotSet */
	/*--denary-color: #ffffff; /* NotSet */
	--body-copy-color: var(--quinary-color); /* Wine */
	--body-link-color: var(--primary-color);
	--body-link-hover-color: var(--primary-color);
	--body-link-light-text-color: #fff;
	--body-link-hover-light-text-color:var(--body-link-light-text-color);
	--body-background-color: var(--senary-color-25);
	--primary-font: halyard-display, sans-serif;
	--secondary-font: mrs-eaves-xl-serif, serif;
}
/* ----------------------------------------------- Buttons */
.button,
a.button {
	background-color: var(--secondary-color);
	border: 1px solid var(--secondary-color);
	color: var(--senary-color);
	border-radius: 0.375rem;
}
.button:hover,
.button:focus,
a.button:hover,
a.button:focus {
	background-color: var(--primary-color);
	border: 1px solid var(--primary-color);
	color: var(--senary-color);
}
.button.button01,
a.button.button01 {

}
.button.button01:hover,
.button.button01:focus,
a.button.button01:hover,
a.button.button01:focus {

}
.button02,
a.button02,
.headerButtons .button {
	background-color: transparent;
	border-color: var(--primary-color);
	color: var(--primary-color);
}
.button02:hover,
.button02:focus,
a.button02:hover,
a.button02:focus,
.headerButtons .button:hover,
.headerButtons .button:focus {
	background-color: var(--primary-color);
	border-color: var(--primary-color);
	color: #fff;
}
.button03,
a.button03,
.home:not(.scrolled) .headerButtons .button,
#menu .headerButtons .button {
	background-color: transparent;
	border-color: #fff;
	color: #fff;
}
.button03:hover,
.button03:focus,
a.button03:hover,
a.button03:focus,
.home:not(.scrolled) .headerButtons .button:hover,
.home:not(.scrolled) .headerButtons .button:focus, 
#menu .headerButtons .button:hover,
#menu .headerButtons .button:focus  {
	background-color: #fff;
	border-color: #fff;
	color: var(--primary-color);
}
.button04,
a.button04,
.button04:hover,
.button04:focus,
a.button04:hover,
a.button04:focus {
	background-color: transparent;
	border-color: transparent;
	color: var(--primary-color);
	padding-left: 0;
	padding-right: 1.25rem;
	background-image: url("assets/images/Button-04-Arrow.svg");
	background-repeat: no-repeat;
	background-position: right center;
	background-size: 0.85rem;
}
.button04:hover,
.button04:focus,
a.button04:hover,
a.button04:focus {
	text-decoration: underline;
}
.button05,
a.button05,
.button05:hover,
.button05:focus,
a.button05:hover,
a.button05:focus {
	background-color: transparent;
	border-color: transparent;
	color: var(--senary-color);
	padding-left: 0;
	padding-right: 1.25rem;
	background-image: url("assets/images/Button-05-Arrow.svg");
	background-repeat: no-repeat;
	background-position: right center;
	background-size: 0.85rem;
}
.button05:hover,
.button05:focus,
a.button05:hover,
a.button05:focus {
	text-decoration: underline;
}
/* --------------------------------------------------------- Sitewide */
/* --------------------------------------- Teal Overrides */
/* standard breakpoint overrides */
.styles {
	font-size: 1rem; /* 0.875rem bump up 2px (0.125rem) */
}
.styles .textHeaderMD {
	font-size: 1.5rem; /*1.25rem;*/
}
#header .mainbar {
	margin-left: auto;
	margin-right: auto;
}
.button,
a.button,
.block .gform_wrapper .gform_footer button[type=submit],
.block .gform_wrapper .gform_body .button {
	font-size: 1rem !important; /* 0.875rem bump up 2px (0.125rem) */
}
.button04,
a.button04,
.button05,
a.button05 {
	background-position-y: calc(50% + 1px);
}
@media only screen and (min-width: 48rem) { /* 768px */
	.styles {
		font-size: 1.0625rem; /* 0.9375rem */
	}
	.styles .textHeaderMD {
		font-size: 1.75rem; /*1.5rem;*/
	}
	#header .mainbar {
		max-width: 728px;
	}
	.button,
	a.button,
	.block .gform_wrapper .gform_footer button[type=submit],
	.block .gform_wrapper .gform_body .button {
		font-size: 1.125rem !important; /* 1rem */
	}
	.button04,
	a.button04,
	.button05,
	a.button05 {
		background-position-y: calc(50% + 2px);
	}
}
@media only screen and (min-width: 62rem) { /* 992px */
	.styles {
		font-size: 1.125rem; /* 1rem */
	}
	.styles .textHeaderMD {
		font-size: 2rem; /*1.625rem;*/
	}
	#header .mainbar {
		max-width: 952px;
	}
	.button,
	a.button,
	.block .gform_wrapper .gform_footer button[type=submit],
	.block .gform_wrapper .gform_body .button {
		font-size: 1.25rem !important; /* 1.125rem */
	}
	.button04,
	a.button04,
	.button05,
	a.button05 {
		background-position-y: calc(50% + 2px);
	}
}
@media only screen and (min-width: 75rem) { /* 1200px */
	.styles {
		font-size: 1.1875rem; /* 1.0625rem */
	}
	#header .mainbar {
		max-width: 1160px;
	}
	.button04,
	a.button04,
	.button05,
	a.button05 {
		background-position-y: calc(50% + 1px);
	}
}
@media only screen and (min-width: 100rem) { /* 1600px */
	#header .mainbar {
		max-width: 1400px;
	}
}
.bg-top-shift::before {
	content: "";
	position: absolute;
	width: 100%;
	height: 30%;
	background-color: var(--body-background-color);
	top: 0;
}
.mask-wine-85 .mask-color {
	background-color: #330D0AD9 !important;
}
body:not(.home) .banner .grid>.row>.column>.content {
	aspect-ratio: 10 / 3;
}
.bullets-gold li::marker {
	color: var(--quaternary-color);

}
.bullets-mauve li::marker {
	color: var(--tertiary-color);

}
.block .gform_wrapper .gform_footer button[type=submit],
.block .gform_wrapper .gform_body .button {
	background-color: var(--secondary-color) !important;
	border: 2px solid var(--secondary-color) !important;
	color: var(--senary-color) !important;
	margin-bottom: 1rem !important;
	border-radius: 0.375rem !important;
	padding: 0.5rem 1.25rem !important;
}
.block .gform_wrapper .gform_footer button[type=submit]:hover,
.block .gform_wrapper .gform_body .button:hover {
	background-color: var(--primary-color) !important;
	border-color: var(--primary-color) !important;
	color: var(--senary-color) !important;
}
.hide-submit button {
	display: none !important;
}
.block .gform_wrapper .gfield_checkbox .gform-field-label,
.block .gform_wrapper .gfield_radio .gform-field-label {
	font-weight: normal !important;
}
.gform-theme--framework {
    --gf-ctrl-label-font-size-primary: 18px !important;
    --gf-ctrl-label-font-size-secondary: 18px !important;
    --gf-ctrl-label-font-size-tertiary: 16px !important;
    --gf-ctrl-desc-font-size: 16px !important;
}
/* --------------------------------------- shifted grid */
.shifted-grid.block {
	background-color: transparent;
}
.shifted-grid.block .items>.inner {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0;
	padding-bottom: 10rem;
}
.shifted-grid.block .items>.inner .item {
	width: 100%;
}
.shifted-grid.block .items>.inner .item>a {
	height: unset;
	padding-top: unset;
	aspect-ratio: 7 /10;
}
.shifted-grid.block .items>.inner .item:nth-child(4n + 2),
.shifted-grid.block .items>.inner .item:nth-child(4n + 4) {
	transform: translateY(5rem);
}
.shifted-grid::before {
	content: "";
	position: absolute;
	width: 100%;
	height: 80%;
	margin-top: -5rem;
	background-image: url("assets/images/SG-Color-Icon.png");
	background-size: contain;
	background-repeat: no-repeat;
	background-position-y: center;
	background-position-x: -15%;
	opacity: 0.06;
}
@media only screen and (max-width: 767px) { 
	.shifted-grid.block .items>.inner {
		grid-template-columns: repeat(2, 1fr);
		padding-bottom: 0;
	}
	.shifted-grid.block .items>.inner .item {
		transform: none !important;
	}
}
/* --------------------------------------- bg breakout */
.bg-breakout.block .grid>.row>.column>.content {
	border: 1px solid var(--quaternary-color);
	padding-left: 2rem;
	padding-right: 2rem;
}
@media only screen and (min-width: 62rem) {
	.bg-breakout.block .grid>.row>.column>.content {
		overflow: visible;
	}
	.bg-breakout.block .grid>.row>.column>.content>.inner {
		width: 60%;
	} 
	.bg-breakout .imagebg {
		width: unset;
		aspect-ratio: 7 / 10;
		height: 120%;
		top: -10%;
		left: unset;
		right: 3rem;
	}
	.bg-breakout .grid>.row.direction-reverse .imagebg {
		left: 3rem;
	}
	.bg-breakout.block .grid>.row.direction-reverse>.column>.content>.inner {
		left: 40%;
	}
}
@media only screen and (min-width: 75rem) { /* 1200px */
	.bg-breakout .imagebg {
		height: 130%;
		top: -15%;
		right: 5rem;
	}
	.bg-breakout .grid>.row.direction-reverse .imagebg {
		left: 5rem;
	}
}
@media only screen and (min-width: 100rem) { /* 1600px */
	.bg-breakout .imagebg {
		height: 140%;
		top: -20%;
		right: 7.5rem;
	}
	.bg-breakout .grid>.row.direction-reverse .imagebg {
		left: 7.5rem;
	}
}
@media only screen and (max-width: 991px) {
	.bg-breakout .mask.mask-disabled {
		background-color: rgba(0, 0, 0, 0.60);
	}
}
/* --------------------------------------- accordion */
.accordion .styles ul li {
	list-style-type: none;
}
.accordion .styles>ul>li {
	cursor: pointer;
	background-image: url("assets/images/FAQ-Dropdown-Arrow.svg");
	background-repeat: no-repeat;
	background-size: 1rem;
	background-position: right 0.5rem top 0.5rem;
	padding: 0.5rem 2.5rem 0.5rem 0.5rem;
	font-size: 1.25rem;
	color: var(--primary-color);
	padding-left: 1rem;
}
.accordion .styles>ul>li.active {
	background-image: url("assets/images/FAQ-Dropdown-Arrow-Flip.svg");
}
.accordion .styles>ul>li {
	border: 1px solid var(--primary-color);
}
.accordion .styles>ul>li>ul {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.5s ease;
	font-size: 1rem;
	color: var(--quinary-color);
	padding-left: 0;
}
.accordion .styles>ul>li.active>ul {
	max-height: unset;
}
/* --------------------------------------- Header */
#header {
	box-shadow: none;
	background-color: var(--body-background-color);
}
#header .socialButtons,
#menu .socialButtons  {
	display: none;
}
#menu {
	padding-top: 2.5rem;
}
.home #header {
	position: fixed;
	transition: background-color 0.3s ease; 
}
.home:not(.scrolled) #header {
	background-color: transparent;

}
#header .logo span {
	transition: padding-top 0.3s ease;
}
.home.scrolled #header .logo span,
body:not(.home) #header .logo span {
	background-image: url("assets/images/Simply-Gourmet-Logo-Icon-Color.png");
	padding-top: 30%;
	background-position-x: left;
}
#header .navigation.main>ul>li>a {
	color: var(--primary-color);
}
#header .navigation.main>ul>li.current-menu-ancestor>a {
	color: var(--tertiary-color);
}
/* flip arrow */
#header .navigation.main>ul>li.menu-item-has-children {
	padding-right: 1.25rem;
}
#header .navigation.main>ul>li.menu-item-has-children>a:after {
	content: "";
	background-image: url("assets/images/Nav-Dropdown.svg");
	background-position: center center;
	background-repeat: no-repeat;
	background-size: contain;
	position: absolute;
	height: 1rem;
	width: 0.85rem;
	top: 40%;
	right: 0;
	transition: transform 0.25s ease-in-out;
}
.home:not(.scrolled) #header .navigation.main>ul>li.menu-item-has-children>a:after {
	background-image: url("assets/images/Nav-Dropdown-White.svg");
}
#header .navigation.main>ul>li:hover.menu-item-has-children>a:after {
	transform: rotate(180deg);
}
#header .navigation>ul>li>.sub-menu {
	color: var(--primary-color);
	padding: 0;
}
#header .navigation>ul>li>.sub-menu li {
	margin: 0;
	padding: 0.5rem 1rem 0.5rem 1rem;
}
#header .navigation>ul>li>.sub-menu li a {
	color: var(--primary-color);
	font-size: 1rem;
}
#header .navigation>ul>li>.sub-menu li:hover {
	background-color: var(--tertiary-color);
}
#header .navigation>ul>li>.sub-menu li:hover a {
	color: #fff;
}
#header .navigation>ul>li>.sub-menu {
	border: none;
}
.home:not(.scrolled) #header .navigation>ul>li>a {
	color: #fff;
}
#header .navigation>ul>li>.sub-menu li:hover {
	background-color: var(--tertiary-color);
}
#header .navigation>ul>li>.sub-menu li:hover a {
	color: #fff;
}
/* --------------------------------------- Footer */
.fa-facebook::before {
	content: "";
	background-image: url("assets/images/Facebook_Logo_Secondary.png");
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
	width: 24px;
	height: 24px;
	display: inline-block;
}
.fa-instagram::before {
	content: "";
	background-image: url("assets/images/Instagram_Glyph_White.png");
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
	width: 24px;
	height: 24px;
	display: inline-block;
}
/* --------------------------------------------------------- Home */
.home .banner {
	padding-top: 8rem;
}
.home .banner .mask.mask-dark {
	background-color: rgba(0, 0, 0, 0.3);
}
@media only screen and (max-width: 991px) {
	.home .banner .styles .banner-logo {
		max-width: 150px;
	}
}
@media only screen and (max-width: 767px) {
	.home .banner .styles .banner-logo {
		max-width: 100px;
	}
}
/* --------------------------------------------- slider */
div#n2-ss-2 .n2-ss-slider-controls .nextend-arrow img {
	display: none;
}
div#n2-ss-2 .n2-ss-slider-controls .nextend-arrow {
	margin-bottom: 3rem;
	width: 2rem;
	height: 2rem;
}
div#n2-ss-2 .nextend-arrow-previous {
	background-image: url("assets/images/Testimonial-Slider-Left.svg");
	background-size: contain;
	background-repeat: no-repeat;	
}
div#n2-ss-2 .nextend-arrow-next {
	background-image: url("assets/images/Testimonial-Slider-Right.svg");
	background-size: contain;
	background-repeat: no-repeat;
}
.n2-ss-section-main-content .n2-ss-layer:first-child {
	background-image: url("assets/images/Large-Quote.svg");
	background-size: 1.5rem;
	background-repeat: no-repeat;
	background-position: left top;
}
.n2-ss-section-main-content .n2-ss-layer:first-child .n2-ss-item-content {
	padding-left: 1.25rem;
}
/* --------------------------------------------- image text boxes */
@media only screen and (max-width: 767px) { 
	.imgtxtbox .grid>.row>:first-child>.content {
		aspect-ratio: 5 / 3;
	}
}
.imgtxtbox .grid>.row>:nth-child(2)>.content {
	border: 1px solid var(--primary-color);
	padding-left: 1.5rem;
	padding-right: 1.5rem;
}
/* ------------------------- Custom Classes ------------------------- */
/*
Block Level Classes:
row-center - sets row justify-content to center
inner-padding - sets 1rem right & left padding on inner element
inner-padding-lg - sets 2.5rem right & left padding on inner element
inner-padding-xl - sets 4rem right & left padding on inner element
imgtxtbox - handles alternating bordered text boxes on home page
gallery - styles home page gallery link
shifted-grid - styles inner page gallery
banner - set banner styling
bg-top-shift - shifts background downward
mask-wine-85 - sets color mask to wine 85%
bg-breakout - sets boxed area with background overfloat

Column Level Classes:
accordion - sets ul/li to accordion style
bullets-gold - sets color of li bullet
bullets-mauve - sets color of li bullet

Block & Column Level Classes:
hide-on-mobile - sets display to none on mobile widths (<992px)
hide-on-desktop - sets display to none on desktop widths (>=992px)