/*!
Theme Name: Sauce.vc
Theme URI: https://decodedigital.com
Description: WordPress Theme
Author: Decode Digital
Author URI: https://decodedigital.com
Template: outgrid
Version: 1.0.0
Text Domain: outgrid
*/

/* =====================================================================
   Sauce.vc design system
   Palette (also set in Elementor global colors):
     Forest      #1B3E38
     Hot Sauce   #FF5338  (primary)
     Light Green #326F64
     Mustard     #966311
     Pale Blue   #4E7B99
     Plum        #440E26  (secondary)
     Sage Green  #AABCA2
     Sky         #D9E6ED
   ===================================================================== */

:root {
	--sauce-forest: #1B3E38;
	--sauce-hot-sauce: #FF5338;
	--sauce-light-green: #326F64;
	--sauce-mustard: #966311;
	--sauce-pale-blue: #4E7B99;
	--sauce-plum: #440E26;
	--sauce-sage-green: #AABCA2;
	--sauce-sky: #D9E6ED;

	--sauce-black: #111111;
	--sauce-white: #FFFFFF;

	--sauce-btn-pad-y: 18px;
	--sauce-btn-pad-x: 40px;
	--sauce-btn-pad-y-sm: 12px;
	--sauce-btn-pad-x-sm: 28px;
	--sauce-btn-border: 2px;
}

/* ---------------------------------------------------------------------
   Buttons
   Apply these as CSS Classes on an Elementor Button widget.
   Base class is .sauce-btn, then add one variant class.
   Replace font-family below if the brand font differs from the
   Elementor global font.
   --------------------------------------------------------------------- */

.sauce-btn,
.elementor-button.sauce-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: inherit;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	line-height: 1;
	text-decoration: none;
	border-style: solid;
	border-width: var(--sauce-btn-border);
	border-radius: 0;
	padding: var(--sauce-btn-pad-y) var(--sauce-btn-pad-x);
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
	cursor: pointer;
}

/* Small modifier */
.sauce-btn--small,
.elementor-button.sauce-btn--small {
	padding: var(--sauce-btn-pad-y-sm) var(--sauce-btn-pad-x-sm);
	letter-spacing: 0.04em;
	font-size: 0.875em;
}

/* Primary set, for use on dark backgrounds ------------------------- */

/* Filled: Hot Sauce background, white text */
.sauce-btn--primary,
.elementor-button.sauce-btn--primary {
	background-color: var(--sauce-hot-sauce);
	color: var(--sauce-white);
	border-color: var(--sauce-hot-sauce);
}
.sauce-btn--primary:hover,
.sauce-btn--primary:focus,
.elementor-button.sauce-btn--primary:hover,
.elementor-button.sauce-btn--primary:focus {
	background-color: var(--sauce-white);
	color: var(--sauce-hot-sauce);
	border-color: var(--sauce-white);
}

/* Outline: transparent, white border and text */
.sauce-btn--outline,
.elementor-button.sauce-btn--outline {
	background-color: transparent;
	color: var(--sauce-white);
	border-color: var(--sauce-white);
}
.sauce-btn--outline:hover,
.sauce-btn--outline:focus,
.elementor-button.sauce-btn--outline:hover,
.elementor-button.sauce-btn--outline:focus {
	background-color: var(--sauce-white);
	color: var(--sauce-black);
	border-color: var(--sauce-white);
}

/* Black set, for use on light backgrounds ------------------------- */

/* Filled: Hot Sauce background, black text */
.sauce-btn--primary-black,
.elementor-button.sauce-btn--primary-black {
	background-color: var(--sauce-hot-sauce);
	color: var(--sauce-black);
	border-color: var(--sauce-hot-sauce);
}
.sauce-btn--primary-black:hover,
.sauce-btn--primary-black:focus,
.elementor-button.sauce-btn--primary-black:hover,
.elementor-button.sauce-btn--primary-black:focus {
	background-color: var(--sauce-black);
	color: var(--sauce-hot-sauce);
	border-color: var(--sauce-black);
}

/* Outline: transparent, black border and text */
.sauce-btn--outline-black,
.elementor-button.sauce-btn--outline-black {
	background-color: transparent;
	color: var(--sauce-black);
	border-color: var(--sauce-black);
}
.sauce-btn--outline-black:hover,
.sauce-btn--outline-black:focus,
.elementor-button.sauce-btn--outline-black:hover,
.elementor-button.sauce-btn--outline-black:focus {
	background-color: var(--sauce-black);
	color: var(--sauce-white);
	border-color: var(--sauce-black);
}

/* ---------------------------------------------------------------------
   Scroll to explore link
   Apply .sauce-scroll-link plus a colour variant on a text/link widget.
   --------------------------------------------------------------------- */

.sauce-scroll-link {
	display: inline-block;
	font-family: inherit;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	line-height: 1.2;
	text-decoration: underline;
	text-underline-offset: 4px;
	text-decoration-thickness: 2px;
	transition: color 0.2s ease, opacity 0.2s ease;
}
.sauce-scroll-link--white {
	color: var(--sauce-white);
}
.sauce-scroll-link--accent {
	color: var(--sauce-hot-sauce);
}
.sauce-scroll-link:hover,
.sauce-scroll-link:focus {
	opacity: 0.8;
}