/*
 * Option C — Fresh Garden
 * Homepage section colors and light-theme typography.
 */

:root {
	--bakery-text: #1f2d28;
	--bakery-text-muted: rgba(31, 45, 40, 0.65);
	--bakery-link: #1f523f;
	--bakery-link-hover: #163d2f;
	--bakery-border: rgba(31, 45, 40, 0.18);
	--bakery-btn: #2d6a54;
	--bakery-btn-hover: #358063;
	--bakery-btn-active: #255a47;

	--color-celebration: #e8f7f1;
	--color-wedding: #d4f0e4;
	--color-bouquet: #c0e9d7;
	--color-cupcake: #acdcca;
	--color-mini: #98cfbd;
	--color-cookies: #84c2b0;
	--color-about: #70b5a3;
	--color-footer: #62a899;
}

/* Force solid mint — overrides cached or legacy main.css bg.jpg rules */
body,
#banner,
#footer {
	background-color: #cdeedf;
	background-image: none !important;
}

#banner {
	background-attachment: scroll !important;
}

/* Typography on light backgrounds */
body,
input,
select,
textarea {
	color: var(--bakery-text);
}

#page-wrapper h1,
#page-wrapper h2,
#page-wrapper h3,
#page-wrapper h4,
#page-wrapper h5,
#page-wrapper h6,
#page-wrapper strong,
#page-wrapper b {
	color: var(--bakery-text);
}

#page-wrapper a {
	border-bottom-color: var(--bakery-border);
	color: var(--bakery-link);
}

#page-wrapper a:hover {
	color: var(--bakery-link-hover) !important;
}

#page-wrapper h1.major,
#page-wrapper h2.major,
#page-wrapper h3.major,
#page-wrapper h4.major,
#page-wrapper h5.major,
#page-wrapper h6.major {
	border-bottom-color: var(--bakery-border);
}

#page-wrapper a.special:not(.button):before {
	border-color: var(--bakery-border);
	color: var(--bakery-link);
}

#page-wrapper a.special:not(.button):hover:before {
	background-color: rgba(31, 45, 40, 0.06);
}

#page-wrapper a.special:not(.button):active:before {
	background-color: rgba(31, 45, 40, 0.1);
}

#page-wrapper ul.contact li:before {
	border-color: var(--bakery-border);
	color: var(--bakery-link);
}

/* Header & slide-out menu */
#header {
	background-color: rgba(172, 220, 202, 0.97);
	box-shadow: 0 1px 0 var(--bakery-border);
}

#header,
#header a {
	color: var(--bakery-text);
	border-bottom-color: transparent;
}

#header a:hover {
	color: var(--bakery-link-hover) !important;
}

#header.alt {
	background-color: transparent;
	box-shadow: none;
}

#header nav .section-indicator {
	display: block;
	padding: 0;
	background: none;
	border: 0;
	box-shadow: none;
	line-height: 1.25;
	text-align: right;
	transition: opacity 0.2s ease;
}

#header nav .section-indicator__label {
	font-family: Raleway, Helvetica, sans-serif;
	font-size: 0.82em;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--bakery-text);
	max-width: 15em;
	line-height: 1.3;
}

@media screen and (min-width: 737px) {
	#header nav {
		position: absolute;
		top: 50%;
		right: 0;
		height: auto;
		line-height: normal;
		padding-right: 1.5em;
		transform: translateY(-50%);
		display: flex;
		align-items: center;
	}
}

@media screen and (max-width: 736px) {
	#header {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		height: auto !important;
		min-height: 2.75em;
		padding: 0.45em 1em 0.5em !important;
		line-height: normal !important;
	}

	#header h1 {
		position: relative;
		width: 100%;
		order: 1;
		margin: 0;
		padding: 0;
		text-align: center;
		line-height: 1.35 !important;
	}

	#header.alt h1 {
		display: none;
		height: 0;
		margin: 0;
		padding: 0;
	}

	#header nav {
		position: static !important;
		top: auto !important;
		right: auto !important;
		left: auto !important;
		transform: none !important;
		order: 2;
		width: 100%;
		height: auto !important;
		line-height: normal !important;
		padding: 0.2em 0 0 !important;
		text-align: center;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	#header.alt nav {
		padding-top: 0 !important;
	}

	#header nav .section-indicator {
		text-align: center;
		width: 100%;
	}

	#header nav .section-indicator__label {
		max-width: 100%;
		text-align: center;
		font-size: 0.78em;
	}
}

@media screen and (max-width: 480px) {
	#header nav .section-indicator__label {
		font-size: 0.72em;
		letter-spacing: 0.04em;
	}
}

/* Buttons */
#page-wrapper .button {
	box-shadow: inset 0 0 0 2px var(--bakery-border);
	color: var(--bakery-text) !important;
}

#page-wrapper .button:hover {
	background-color: rgba(31, 45, 40, 0.06);
}

#page-wrapper .button.primary {
	background-color: var(--bakery-btn);
	box-shadow: none;
	color: #ffffff !important;
}

#page-wrapper .button.primary:hover {
	background-color: var(--bakery-btn-hover);
}

#page-wrapper .button.primary:active {
	background-color: var(--bakery-btn-active);
}

#page-wrapper .button.primary a {
	color: #ffffff !important;
	border-bottom: 0;
}

/* Neutralize old dark/purple spotlight defaults from main.css */
#gallery .wrapper.spotlight {
	background-image: none;
}
#one.wrapper {
	background-color: var(--color-celebration);
}

#one.wrapper:before,
#one.wrapper:after {
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='0,100 100,0 100,100' style='fill:%23e8f7f1%3B' /%3E%3C/svg%3E");
	box-shadow: inset 0 -1px 0 0 #e8f7f1, 0 1px 0 0 #e8f7f1;
}

#two.wrapper {
	background-color: var(--color-wedding);
}

#two.wrapper:before,
#two.wrapper:after {
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='0,100 100,0 100,100' style='fill:%23d4f0e4%3B' /%3E%3C/svg%3E");
	box-shadow: inset 0 -1px 0 0 #d4f0e4, 0 1px 0 0 #d4f0e4;
}

#three.wrapper {
	background-color: var(--color-bouquet);
}

#three.wrapper:before,
#three.wrapper:after {
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='0,100 100,0 100,100' style='fill:%23c0e9d7%3B' /%3E%3C/svg%3E");
	box-shadow: inset 0 -1px 0 0 #c0e9d7, 0 1px 0 0 #c0e9d7;
}

#four.wrapper {
	background-color: var(--color-cupcake);
}

#four.wrapper:before,
#four.wrapper:after {
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='0,100 100,0 100,100' style='fill:%23acdcca%3B' /%3E%3C/svg%3E");
	box-shadow: inset 0 -1px 0 0 #acdcca, 0 1px 0 0 #acdcca;
}

#five.wrapper {
	background-color: var(--color-mini);
}

#five.wrapper:before,
#five.wrapper:after {
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='0,100 100,0 100,100' style='fill:%2398cfbd%3B' /%3E%3C/svg%3E");
	box-shadow: inset 0 -1px 0 0 #98cfbd, 0 1px 0 0 #98cfbd;
}

#six.wrapper {
	background-color: var(--color-cookies);
}

#six.wrapper:before,
#six.wrapper:after {
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='0,100 100,0 100,100' style='fill:%2384c2b0%3B' /%3E%3C/svg%3E");
	box-shadow: inset 0 -1px 0 0 #84c2b0, 0 1px 0 0 #84c2b0;
}

#seven.wrapper {
	background-color: var(--color-about);
}

#seven.wrapper:before,
#seven.wrapper:after {
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='0,100 100,0 100,100' style='fill:%2370b5a3%3B' /%3E%3C/svg%3E");
	box-shadow: inset 0 -1px 0 0 #70b5a3, 0 1px 0 0 #70b5a3;
}

#banner h2 {
	border-bottom-color: var(--bakery-border);
}

#footer {
	background-color: var(--color-footer);
}

#footer .inner .copyright {
	border-top-color: var(--bakery-border);
}

#footer .inner .copyright li {
	border-left-color: var(--bakery-border);
	color: var(--bakery-text-muted);
}
