/**
 * The Pantry Look — the site's shared design kit.
 *
 * The palette, fonts, buttons, and hand-drawn ornaments from the style
 * board (see CLAUDE.md for the link), loaded on every page. Any Elementor
 * element can wear these by typing a class name into
 * Advanced → Layout → CSS Classes:
 *
 *   lcp-zigzag          full-width red zigzag rule (put on a section/divider)
 *   lcp-zigzag--seam    same, when it sits between a deep-cream band and a
 *                       cream one — the color change runs through its middle
 *   lcp-zigzag--short   a hand's-width centered zigzag for paragraph breaks
 *   lcp-goldbar         wobbly gold banner with red display type
 *   lcp-oval-chip       outlined oval eyebrow ("The Idea")
 *   lcp-eyebrow         letterspaced red caps eyebrow
 *   lcp-frame           navy double-keyline "crate label" frame
 *   lcp-btn / lcp-btn--solid / lcp-btn--ghost   the site's buttons
 */

:root {
	--lcp-cream:      #f5ead9;
	--lcp-cream-deep: #eee0c6;
	--lcp-paper-line: #e3d2b4;
	--lcp-red:        #d42e29;
	--lcp-red-dark:   #b02420;
	--lcp-gold:       #e5ba25;
	--lcp-navy:       #19326c;
	--lcp-navy-soft:  #3a4f85;

	--lcp-disp: "RD Goodflies Extended", "Arial Black", sans-serif;
	--lcp-cond: "RD Goodflies Condensed", "Arial Narrow", sans-serif;
	--lcp-body: "Jost", Futura, "Century Gothic", "Trebuchet MS", sans-serif;

	/* The zigzag: straight flanks, rounded points, round-capped tile edges
	   (the caps overlap at every repeat, so the line never shows seams). */
	--lcp-zig: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='9' viewBox='0 0 18 9'%3E%3Cpath d='M0 7 L4.5 2 L9 7 L13.5 2 L18 7' fill='none' stroke='%23d42e29' stroke-width='3' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* ---- Ornaments --------------------------------------------------------- */

/* Doubled class on purpose: Elementor containers set height/padding at
   the same specificity, and an "empty" zigzag container must never
   collapse. The custom properties speak Elementor's own language too. */
.lcp-zigzag.lcp-zigzag {
	height: 9px;
	min-height: 9px;
	--height: 9px;
	--min-height: 9px;
	--padding-top: 0px;
	--padding-bottom: 0px;
	padding-top: 0;
	padding-bottom: 0;
	background-image: var(--lcp-zig);
	background-repeat: repeat-x;
	background-position: center;
}

/* Between two different section colors: the seam passes through the middle
   of the zigzag, so it gets equal breathing room on both sides. */
.lcp-zigzag--seam {
	background-image: var(--lcp-zig), linear-gradient(var(--lcp-cream-deep) 50%, var(--lcp-cream) 50%);
	background-repeat: repeat-x, no-repeat;
	background-size: auto, 100% 100%;
}

/* Same seam, other direction: cream above, deep cream below. */
.lcp-zigzag--seam-down {
	background-image: var(--lcp-zig), linear-gradient(var(--lcp-cream) 50%, var(--lcp-cream-deep) 50%);
	background-repeat: repeat-x, no-repeat;
	background-size: auto, 100% 100%;
}

.lcp-zigzag--short {
	width: 144px; /* exactly eight peaks — ends cleanly on both sides */
	max-width: 100%;
	margin-left: auto;
	margin-right: auto;
}

.lcp-goldbar {
	background: var(--lcp-gold);
	color: var(--lcp-red);
	font-family: var(--lcp-disp);
	font-weight: 400;
	text-transform: uppercase;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	text-wrap: balance;
	line-height: 1.15;
	/* the display face rides .098em high in its line box (measured from the
	   font file) — this padding shifts the caps to true optical center */
	padding: calc(0.72em + 0.098em) 1.4em calc(0.72em - 0.098em);
	transform: rotate(-1.4deg);
	border-radius: 255px 18px 225px 18px / 18px 225px 18px 255px;
}

.lcp-oval-chip {
	display: inline-block;
	transform: rotate(1.2deg);
	border: 2.5px solid var(--lcp-navy);
	border-radius: 50%;
	padding: 7px 26px 6px;
	font-family: var(--lcp-body);
	font-weight: 600;
	font-size: 12px;
	letter-spacing: .3em;
	text-indent: .3em;
	text-transform: uppercase;
	color: var(--lcp-red);
	background: var(--lcp-cream);
}

.lcp-eyebrow {
	font-family: var(--lcp-body);
	font-weight: 600;
	font-size: 13px;
	letter-spacing: .32em;
	text-transform: uppercase;
	color: var(--lcp-red);
}

/* The "crate label" frame: navy border with an inner pinstripe. Wrap
   anything in it — a photo, the pantry map, a card. */
.lcp-frame {
	position: relative;
	border: 2.5px solid var(--lcp-navy);
	background: var(--lcp-cream);
	padding: 9px;
}

.lcp-frame::after {
	content: "";
	position: absolute;
	inset: 4px;
	border: 1.5px solid var(--lcp-navy);
	pointer-events: none;
	z-index: 2; /* stays visible over framed content (e.g. map tiles) */
}

/* ---- Buttons ----------------------------------------------------------- */
/* Outlined navy (default), solid red (the loud one), and a quiet ghost.
   Used by the Pantry Map widget; add the classes to any Elementor button
   for the same look. */

/* Every selector below doubles the class (.lcp-btn.lcp-btn) on purpose:
   Elementor's global "Buttons" settings style every bare <button> with a
   slightly stronger selector than a single class, and these buttons must
   never inherit that look. The doubled class outranks the global kit. */
.lcp-btn.lcp-btn {
	display: inline-block;
	box-sizing: border-box;
	appearance: none;
	-webkit-appearance: none;
	font-family: var(--lcp-body);
	font-weight: 600;
	font-size: 12px;
	letter-spacing: .22em;
	text-transform: uppercase;
	line-height: 1.2;
	text-align: center;
	padding: 10px 18px;
	border: 2.5px solid var(--lcp-navy);
	color: var(--lcp-navy) !important; /* beat theme link colors inside map popups */
	background: transparent;
	border-radius: 0 !important;
	box-shadow: none !important;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

/* The little arrow that rides along in outlined buttons ("Find on map →") */
.lcp-btn .lcp-btn-arrow {
	display: inline-block;
	margin-left: 6px;
	letter-spacing: 0;
	transition: transform .2s ease;
}

.lcp-btn:hover .lcp-btn-arrow {
	transform: translateX(4px);
}

@media (prefers-reduced-motion: reduce) {
	.lcp-btn .lcp-btn-arrow { transition: none; }
	.lcp-btn:hover .lcp-btn-arrow { transform: none; }
}

/* The !importants below are deliberate: Elementor's Site Settings can
   restyle bare <button>s (background, border, hover) from generated CSS
   we don't control, and these five properties must never lose to it. */
.lcp-btn.lcp-btn:hover {
	background: var(--lcp-navy) !important;
	border-color: var(--lcp-navy) !important;
	border-radius: 0 !important;
	color: var(--lcp-cream) !important;
	filter: none;
}

.lcp-btn.lcp-btn--solid {
	background: var(--lcp-red) !important;
	border-color: var(--lcp-red) !important;
	color: var(--lcp-cream) !important;
}

.lcp-btn.lcp-btn--solid:hover {
	background: var(--lcp-red-dark) !important;
	border-color: var(--lcp-red-dark) !important;
	color: var(--lcp-cream) !important;
}

.lcp-btn.lcp-btn--ghost {
	border-color: var(--lcp-navy) !important;
	color: var(--lcp-navy) !important;
	background: transparent !important;
	/* thinner keyline than the solid button; padding grows by the
	   difference so both card buttons stay exactly the same size */
	border-width: 1.5px;
	padding: 11px 19px;
}

.lcp-btn.lcp-btn--ghost:hover {
	background: var(--lcp-navy) !important;
	border-color: var(--lcp-navy) !important;
	color: var(--lcp-cream) !important;
}

.lcp-btn.lcp-btn:focus-visible {
	outline: 3px solid var(--lcp-red);
	outline-offset: 2px;
}

/* ==========================================================================
 * One-pager helpers (v1.5.0)
 * ========================================================================== */

/* Anchor links glide, and land clear of the sticky header. */
html {
	scroll-behavior: smooth;
	scroll-padding-top: 200px;
}

/* The hero's signature: gold letters with the red dimensional shadow.
   Wrap any words of an Elementor heading in <span class="lcp-goldline">.
   Built purely from layered shadows (no text-stroke): the first eight
   form the outline ring, the staircase forms the 3D slab. Stroke+shadow
   combos render artifacts in Safari; this way is identical everywhere,
   and em units keep the depth proportional at any heading size. */
.lcp-goldline {
	color: var(--lcp-gold);
	text-shadow:
		0.015em 0.015em 0 var(--lcp-red), 0.03em 0.03em 0 var(--lcp-red),
		0.045em 0.045em 0 var(--lcp-red), 0.06em 0.06em 0 var(--lcp-red),
		0.075em 0.075em 0 var(--lcp-red);
}

/* Put these classes on an Elementor BUTTON widget (Advanced → CSS Classes)
   and the real button inside takes the site's button look. */
.lcp-btn-ghost .elementor-button,
.lcp-btn-solid .elementor-button,
.lcp-btn-navy .elementor-button,
.lcp-btn-gold .elementor-button {
	font-family: var(--lcp-body) !important;
	font-weight: 600 !important;
	font-size: 13px !important;
	letter-spacing: .22em !important;
	text-transform: uppercase !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	padding: 16px 30px !important;
	transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.lcp-btn-ghost .elementor-button {
	background: transparent !important;
	border: 2.5px solid var(--lcp-navy) !important;
	color: var(--lcp-navy) !important;
}

.lcp-btn-ghost .elementor-button:hover {
	background: var(--lcp-navy) !important;
	color: var(--lcp-cream) !important;
}

.lcp-btn-solid .elementor-button {
	background: var(--lcp-red) !important;
	border: 2.5px solid var(--lcp-red) !important;
	color: var(--lcp-cream) !important;
}

.lcp-btn-solid .elementor-button:hover {
	background: var(--lcp-red-dark) !important;
	border-color: var(--lcp-red-dark) !important;
	color: var(--lcp-cream) !important;
}

/* Solid variants in the other two cans: navy and gold. */
.lcp-btn-navy .elementor-button {
	background: var(--lcp-navy) !important;
	border: 2.5px solid var(--lcp-navy) !important;
	color: var(--lcp-cream) !important;
}

.lcp-btn-navy .elementor-button:hover {
	background: #122550 !important;
	border-color: #122550 !important;
	color: var(--lcp-cream) !important;
}

.lcp-btn-gold .elementor-button {
	background: var(--lcp-gold) !important;
	border: 2.5px solid var(--lcp-gold) !important;
	color: var(--lcp-navy) !important;
}

.lcp-btn-gold .elementor-button:hover {
	background: #caa31d !important;
	border-color: #caa31d !important;
	color: var(--lcp-navy) !important;
}

/* The Tagline Oval widget's badge (also usable by hand via these classes). */
.lcp-tag-oval-wrap { text-align: center; }

.lcp-tag-oval {
	display: inline-block;
	border: 3px solid var(--lcp-navy);
	border-radius: 50%;
	padding: 16px 44px;
	transform: rotate(-1.2deg);
}

.lcp-tag-oval span {
	display: block;
	font-family: var(--lcp-body);
	font-weight: 600;
	font-size: 14px;
	letter-spacing: .26em;
	text-indent: .26em;
	text-transform: uppercase;
}

.lcp-tag-oval .l1 { color: var(--lcp-red); }
.lcp-tag-oval .l2 { color: var(--lcp-navy); }

/* Put on an Elementor HEADING widget to turn it into the oval chip
   eyebrow / the wobbly gold banner (the class styles the inner title). */
.lcp-el-chip { text-align: center; }
.lcp-el-chip .elementor-heading-title {
	display: inline-block;
	transform: rotate(1.2deg);
	border: 2.5px solid var(--lcp-navy);
	border-radius: 50%;
	padding: 7px 26px 6px;
	font-family: var(--lcp-body) !important;
	font-weight: 600 !important;
	font-size: 12px !important;
	letter-spacing: .3em;
	text-indent: .3em;
	text-transform: uppercase;
	color: var(--lcp-red) !important;
	background: var(--lcp-cream);
}

.lcp-el-goldbar { display: flex; justify-content: center; }
.lcp-el-goldbar .elementor-heading-title {
	background: var(--lcp-gold);
	color: var(--lcp-red) !important;
	font-family: var(--lcp-disp) !important;
	font-weight: 400 !important;
	text-transform: uppercase;
	text-align: center;
	text-wrap: balance;
	line-height: 1.15;
	padding: calc(0.72em + 0.098em) 1.4em calc(0.72em - 0.098em);
	transform: rotate(-1.4deg);
	border-radius: 255px 18px 225px 18px / 18px 225px 18px 255px;
}

/* FAQ: works on our <details> markup AND on Elementor's Accordion widget
   (which also renders <details>) — just add the class lcp-faq. */
.lcp-faq summary {
	cursor: pointer;
	list-style: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 16px 20px;
	font-family: var(--lcp-disp);
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: .02em;
	font-size: 17px;
	line-height: 1.2;
	color: var(--lcp-navy);
}

.lcp-faq summary::-webkit-details-marker { display: none; }

/* Elementor's Accordion widget brings its own chevron icon — hide it,
   the red + / − from the rules below does the job. */
.lcp-faq .e-n-accordion-item-title-icon { display: none; }

.lcp-faq summary::after {
	content: "+";
	margin-top: -6px;
	font-family: var(--lcp-body);
	font-weight: 600;
	font-size: 22px;
	line-height: 1;
	color: var(--lcp-red);
	flex-shrink: 0;
}

.lcp-faq details[open] summary::after { content: "−"; }

.lcp-faq details p { margin: 0 0 10px; }
.lcp-faq details p:last-child { margin-bottom: 0; }

/* Contact form skin: put class lcp-form on an Elementor Pro Form widget.
   Labels become letterspaced navy caps; fields get the crate-label look
   (white paper, navy keyline, square corners, red focus); the submit
   button matches the site's solid red button. */
.lcp-form .elementor-field-label {
	font-family: var(--lcp-body);
	font-weight: 600;
	font-size: 12px;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--lcp-navy);
}

.lcp-form.lcp-form .elementor-field-textual {
	background: #fffdf6 !important;
	border: 2px solid var(--lcp-navy);
	border-radius: 0;
	font-family: var(--lcp-body) !important;
	font-size: 15.5px;
	color: var(--lcp-navy) !important;
	padding: 11px 14px;
}

.lcp-form.lcp-form .elementor-field-textual::placeholder {
	color: var(--lcp-navy-soft);
	opacity: .7;
}

.lcp-form.lcp-form .elementor-field-textual:focus {
	border-color: var(--lcp-red);
	outline: none;
	box-shadow: none;
}

/* Doubled class + !important for the same reason as .lcp-btn: the global
   kit styles buttons with rules we must always win against. */
.lcp-form.lcp-form .elementor-button {
	font-family: var(--lcp-body);
	font-weight: 600;
	font-size: 12px;
	letter-spacing: .22em;
	text-transform: uppercase;
	background: var(--lcp-red) !important;
	border: 2.5px solid var(--lcp-red) !important;
	border-radius: 0 !important;
	color: #f5ead9 !important;
	padding: 12px 22px;
	box-shadow: none !important;
	transition: background-color .15s ease, border-color .15s ease;
}

.lcp-form.lcp-form .elementor-button:hover {
	background: var(--lcp-red-dark) !important;
	border-color: var(--lcp-red-dark) !important;
}

.lcp-form .elementor-message {
	font-family: var(--lcp-body);
	font-size: 15px;
	color: var(--lcp-navy);
}

.lcp-form .elementor-message.elementor-message-danger {
	color: var(--lcp-red);
}

/* Grocery List widget: structure only — every visual choice (fonts,
   icon, colors, spacing, paper, ruled lines) is an Elementor control. */
.lcp-grocery-item { --lcp-rule-color: transparent; --lcp-rule-width: 1.5px; }
.lcp-grocery-list { list-style: none; margin: 0; padding: 0; }
.lcp-grocery-item { display: flex; align-items: baseline; break-inside: avoid; }
.lcp-grocery-icon { flex-shrink: 0; line-height: 1; }

/* Stocking list: a plain <ul class="lcp-checklist"> in a Text Editor
   widget becomes a two-column list with little gold-and-red dots. */
ul.lcp-checklist {
	list-style: none;
	margin: 0;
	padding: 0;
	columns: 2;
	column-gap: 40px;
}

ul.lcp-checklist li {
	break-inside: avoid;
	position: relative;
	padding: 5px 0 5px 26px;
	font-size: 16px;
	color: var(--lcp-navy);
}

ul.lcp-checklist li::before {
	content: "";
	position: absolute;
	left: 2px;
	top: 13px;
	width: 10px;
	height: 10px;
	background: var(--lcp-gold);
	border: 2px solid var(--lcp-red);
	border-radius: 50%;
}

@media (max-width: 640px) {
	ul.lcp-checklist { columns: 1; }
}

/* The red compartment contact card (from the style board's footer demo). */
.lcp-footcard {
	background: var(--lcp-red);
	color: var(--lcp-cream);
	border: 2.5px solid var(--lcp-red-dark);
}

.lcp-footcard a { color: var(--lcp-cream); text-decoration: none; }
.lcp-footcard a:hover { text-decoration: underline; }

.lcp-footcard .lcp-foot-grid { display: grid; grid-template-columns: 1fr 1fr; }
.lcp-footcard .lcp-foot-cell { padding: 28px 28px 30px; }
.lcp-footcard .lcp-foot-cell:first-child { border-right: 2px solid var(--lcp-cream); }

.lcp-footcard .lcp-foot-kicker {
	font-weight: 600;
	font-size: 12px;
	letter-spacing: .28em;
	text-transform: uppercase;
	opacity: .92;
}

.lcp-footcard .lcp-foot-name {
	font-family: var(--lcp-disp);
	text-transform: uppercase;
	font-size: 24px;
	line-height: 1.15;
	margin-top: 10px;
}

.lcp-footcard .lcp-foot-tag { margin-top: 8px; font-weight: 500; font-size: 15px; letter-spacing: .06em; }

.lcp-footcard .lcp-foot-row {
	padding: 13px 4px;
	border-bottom: 2px solid var(--lcp-cream);
	font-weight: 600;
	font-size: 13px;
	letter-spacing: .22em;
	text-transform: uppercase;
	display: flex;
	gap: 14px;
}

.lcp-footcard .lcp-foot-row:last-child { border-bottom: none; }
.lcp-footcard .lcp-foot-row .k { opacity: .85; }

.lcp-footcard .lcp-foot-addr {
	border-top: 2px solid var(--lcp-cream);
	padding: 20px 28px 24px;
	text-align: center;
}

.lcp-footcard .lcp-foot-addr .big {
	font-family: var(--lcp-disp);
	text-transform: uppercase;
	font-size: clamp(18px, 3vw, 24px);
}

.lcp-footcard .lcp-foot-addr .small {
	font-weight: 600;
	font-size: 12px;
	letter-spacing: .3em;
	text-transform: uppercase;
	margin-top: 6px;
}

@media (max-width: 680px) {
	.lcp-footcard .lcp-foot-grid { grid-template-columns: 1fr; }
	.lcp-footcard .lcp-foot-cell:first-child { border-right: none; border-bottom: 2px solid var(--lcp-cream); }
}

/* The last paragraph or list in a section must not push extra space onto
   the divider below it — this keeps zigzag rules truly centered between
   sections regardless of what each section ends with. */
.e-con > .e-con-inner > .elementor-element:last-child p:last-child,
.e-con > .e-con-inner > .elementor-element:last-child ul:last-child,
.lcp-faq details:last-child {
	margin-bottom: 0;
}

/* The header's text logo. */
.lcp-nav-brand .elementor-heading-title,
.lcp-nav-brand .elementor-heading-title a {
	font-family: var(--lcp-disp) !important;
	font-weight: 400 !important;
	font-size: 17px !important;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--lcp-navy) !important;
}

/* The Donate button rides smaller inside the nav bar. */
.lcp-nav .lcp-btn-solid .elementor-button {
	padding: 10px 20px !important;
	font-size: 12px !important;
}

/* The slim theme footer's one-line signoff. */
.lcp-foot-line { text-align: center; }
.lcp-foot-line p {
	margin: 0;
	font-weight: 600;
	font-size: 12.5px;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--lcp-navy);
}
.lcp-foot-line a { color: var(--lcp-red); text-decoration: none; }
.lcp-foot-line a:hover { text-decoration: underline; }

/* Sticky header helpers: put lcp-nav on the Theme Builder header container. */
.lcp-nav {
	background: var(--lcp-cream);
	border-bottom: 2.5px solid var(--lcp-navy);
}

.lcp-nav .elementor-nav-menu a,
.lcp-nav .elementor-nav-menu--main .elementor-item {
	font-family: var(--lcp-body) !important;
	font-weight: 600 !important;
	font-size: 12.5px !important;
	letter-spacing: .2em !important;
	text-transform: uppercase !important;
	color: var(--lcp-navy) !important;
}

.lcp-nav .elementor-nav-menu a:hover,
.lcp-nav .elementor-nav-menu--main .elementor-item:hover {
	color: var(--lcp-red) !important;
}