@charset "UTF-8";
/* ==========================================================================
   River Arts -- Craft Fair vendor spaces
   Bump RA_VENDOR_VER in functions.php on edit.

   Everything is namespaced ra-vs-* on purpose. This theme declares a lot of
   colour rules !important, so an unnamespaced override would silently lose and
   the answer to that is NOT more !important -- it is not colliding at all.

   NOTE: no bare `body` or `html` rules in this file, ever. It is enqueued via
   wp_head(), and the Webhelper Tools back office calls wp_head() too -- a bare
   body offset here would shove the CRM top bar out of place. That is exactly
   the bug fixed in nav.css on 2026-07-31.

   Contrast (WCAG 2.1 AA, palette from the 2026-07-26 ADA pass):
     #ffffff on #38607f    6.67:1   Outside FRONT badge
     #ffffff on #5f7412    5.26:1   Outside BACK badge
     #ffd35b on #281d17   11.5 :1   INSIDE badge
     #ffffff on #6e6231    6.08:1   CABANA badge
     #281d17 on #ffffff   16.4 :1   card body text
     #ffffff on #38607f    6.67:1   solid button
   ========================================================================== */

/* ==========================================================================
   Notices -- logged out / not approved
   ========================================================================== */
.ra-vs-notice {
	max-width: 720px;
	margin: 0 auto 40px auto;
	padding: 28px 32px;
	border: 1px solid #d8d2c6;
	border-left: 6px solid #38607f;
	background: #fbf9f4;
	text-align: left;
	color: #281d17;
}

.ra-vs-notice p {
	color: #281d17;
}

/* Links inside the client-editable contentholder copy.
   Underlined on purpose: WCAG 1.4.1 -- a link must not be distinguishable from
   surrounding text by colour alone. #456e91 is the text-safe blue from the
   2026-07-26 ADA pass (5.40:1 on white); the decorative #698fb0 fails.
   :not(.ra-vs-btn) keeps the Log In button out of it -- underlining a solid
   button looks broken, and denial notices should not inherit prose link styling
   (the lesson from the Mpower portal guard). No !important needed: the theme's
   text-decoration:none !important rules are all on specific classes
   (a.wh-service-link, li.wh-product a, a.wh-caplink, .wh-button-solid), none of
   which reach in here. Verified 2026-07-31. */
.ra-vs-notice a:not(.ra-vs-btn),
.ra-vs-notice a:not(.ra-vs-btn):link,
.ra-vs-notice a:not(.ra-vs-btn):visited {
	color: #456e91;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.ra-vs-notice a:not(.ra-vs-btn):hover,
.ra-vs-notice a:not(.ra-vs-btn):focus {
	color: #281d17;
	text-decoration: underline;
}

.ra-vs-notice a:not(.ra-vs-btn):focus-visible {
	outline: 3px solid #38607f;
	outline-offset: 2px;
}

/* Denial notices must not inherit prose link styling -- same lesson as the
   Mpower portal guard, where .mpl-post-content a turned the LOG IN button into
   a blue underlined link. */
.ra-vs-notice-action {
	margin: 20px 0 0 0;
}

/* ==========================================================================
   Login-only popup heading
   Stands in for the tab strip when the Register tab is dropped (vendor gate).
   Lives here rather than in the theme's inline CSS because it only ever renders
   where this stylesheet is already loaded.
   ========================================================================== */
.wh-login-heading {
	margin: 0 0 18px 0;
	padding: 0 0 12px 0;
	border-bottom: 1px solid #d8d2c6;
	font-size: 20px;
	font-weight: 700;
	text-align: center;
	color: #281d17;
}

/* ==========================================================================
   Card grid
   Grid, not flex -- flex min-width:auto plus flex:0 0 caused nearly every
   layout bug on the Jack London build.
   ========================================================================== */
/* Explicit column counts rather than auto-fit minmax(). The archive sits inside
   .col-md-9, so the usable width is well under the viewport -- auto-fit was
   resolving to 3 across on a 1320px screen. Explicit means 4-across is 4-across. */
.ra-vs-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
	max-width: 1240px;
	margin: 0 auto;
	padding: 0;
	list-style: none;
	text-align: left;
}

/* Breakpoints follow Bootstrap 3's container widths, because that is what
   actually governs the available room -- 750px / 970px / 1170px. The vendor
   archive drops the empty sidebar, so the cards get the whole container:
     >=768  ->  2 cols  (~355px each)
     >=992  ->  3 cols  (~310px each)
     >=1200 ->  4 cols  (~277px each)
   Guessing at viewport numbers instead of these gave 4 crushed 200px cards. */
@media screen and (min-width: 768px) {
	.ra-vs-grid { grid-template-columns: repeat(2, 1fr); }
}

@media screen and (min-width: 992px) {
	.ra-vs-grid { grid-template-columns: repeat(3, 1fr); }
}

@media screen and (min-width: 1200px) {
	.ra-vs-grid { grid-template-columns: repeat(4, 1fr); }
}

.ra-vs-card {
	display: grid;
	grid-template-rows: auto 1fr;
	border: 1px solid #d8d2c6;
	background: #ffffff;
	overflow: hidden;
}

/* ==========================================================================
   Badge -- stands in for a photo.
   The space type is spelled out in text inside the badge, so type is never
   signalled by colour alone (WCAG 1.4.1).
   ========================================================================== */
.ra-vs-badge {
	display: grid;
	align-content: center;
	justify-items: center;
	gap: 6px;
	min-height: 168px;
	padding: 22px 14px;
	text-align: center;
	background: #38607f;
}

.ra-vs-badge-icon {
	display: block;
	margin-bottom: 2px;
	color: #ffffff;
	opacity: 0.92;
}

.ra-vs-badge-icon svg {
	display: block;   /* kills the inline-baseline gap under the icon */
}

.ra-vs-badge-kicker {
	font-size: 11px;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: #ffffff;
	opacity: 0.85;
}

.ra-vs-badge-type {
	font-size: 21px;
	line-height: 1.15;
	font-weight: 700;
	text-transform: uppercase;
	color: #ffffff;
}

.ra-vs-card--front  .ra-vs-badge { background: #38607f; }
.ra-vs-card--back   .ra-vs-badge { background: #5f7412; }
.ra-vs-card--cabana .ra-vs-badge { background: #6e6231; }

.ra-vs-card--inside .ra-vs-badge            { background: #281d17; }
.ra-vs-card--inside .ra-vs-badge-kicker,
.ra-vs-card--inside .ra-vs-badge-type       { color: #ffd35b; }

/* ==========================================================================
   Card body
   ========================================================================== */
.ra-vs-body {
	display: grid;
	align-content: start;
	gap: 10px;
	padding: 20px 22px 24px 22px;
}

.ra-vs-title {
	margin: 0;
	font-size: 17px;
	line-height: 1.3;
	color: #281d17;
}

.ra-vs-price {
	margin: 0;
	font-size: 24px;
	font-weight: 700;
	color: #281d17;
}

.ra-vs-soldout {
	margin: 6px 0 0 0;
	padding: 10px 14px;
	background: #efece5;
	font-weight: 700;
	text-align: center;
	color: #635a53;
}

/* ==========================================================================
   Buy row
   ========================================================================== */
/* Qty on its own row, button full-width beneath. The old single-row
   `auto 72px 1fr` handed the button a 1fr column, which at 4-across wrapped
   "Add to Cart" onto two lines and made it tower over the card. */
.ra-vs-buy {
	display: grid;
	gap: 10px;
	margin-top: 4px;
}

/* ==========================================================================
   In-cart state toggle

   Both the Add controls and the "In your cart" block are in the markup at all
   times; this decides which is visible, keyed off data-incart on the card. The
   JS in archive-product.twig only sets or removes that attribute, so a card can
   be flipped back and forth as many times as the visitor likes without anything
   having to rebuild the Add button, its quantity box or its add-to-cart nonce.

   The [data-solo="1"] on the hide rules is deliberate belt and braces: only a
   sold-individually space should ever lose its Add button, so even if data-incart
   landed on the wrong card the visitor could still buy.
   ========================================================================== */
.ra-vs-buy--incart {
	display: none;
}

.ra-vs-card[data-incart="1"] .ra-vs-buy--incart {
	display: grid;
}

.ra-vs-card[data-incart="1"][data-solo="1"] .ra-vs-buy--add {
	display: none;
}

.ra-vs-qty-row {
	display: grid;
	grid-template-columns: auto 68px;
	justify-content: start;
	align-items: center;
	gap: 8px;
}

.ra-vs-qty-label {
	margin: 0;
	font-size: 14px;
	font-weight: 700;
	color: #281d17;
}

.ra-vs-qty {
	width: 100%;
	padding: 7px 6px;
	border: 1px solid #8d8578;
	background: #ffffff;
	font-size: 16px;   /* 16px stops iOS zooming the page on focus */
	text-align: center;
	color: #281d17;
}

.ra-vs-btn {
	display: block;
	width: 100%;
	padding: 10px 12px;
	border: 2px solid #38607f;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;   /* never let the label wrap to two lines */
	cursor: pointer;
}

/* "In your cart" state for sold-individually spaces.
   Dark text on a pale tint rather than green-on-green: the green border carries the
   status cue, the label stays 15:1. Colour is never the only signal (WCAG 1.4.1) --
   the words say it too. */
.ra-vs-incart {
	margin: 0;
	padding: 9px 12px;
	border: 1px solid #5f7412;
	background: #f0f3ea;
	font-weight: 700;
	text-align: center;
	color: #281d17;
}

.ra-vs-btn-ghost,
.ra-vs-btn-ghost:link,
.ra-vs-btn-ghost:visited {
	background: #ffffff;
	border-color: #38607f;
	color: #38607f;       /* 6.67:1 on white */
	text-decoration: none;
}

.ra-vs-btn-ghost:hover,
.ra-vs-btn-ghost:focus {
	background: #38607f;
	color: #ffffff;
	text-decoration: none;
}

.ra-vs-btn-solid,
.ra-vs-btn-solid:link,
.ra-vs-btn-solid:visited {
	background: #38607f;
	color: #ffffff;
	text-decoration: none;
}

.ra-vs-btn-solid:hover,
.ra-vs-btn-solid:focus {
	background: #281d17;
	border-color: #281d17;
	color: #ffffff;
	text-decoration: none;
}

/* Visible keyboard focus -- the ADA pass added these sitewide and new controls
   have to carry them too. */
.ra-vs-btn:focus-visible,
.ra-vs-qty:focus-visible {
	outline: 3px solid #38607f;
	outline-offset: 2px;
}

.ra-vs-card--inside .ra-vs-btn:focus-visible {
	outline-color: #281d17;
}

/* WooCommerce marks the button while the AJAX add is in flight. */
.ra-vs-btn.loading {
	opacity: 0.75;
}

.ra-vs-btn.added {
	background: #5f7412;
	border-color: #5f7412;
}

/* ==========================================================================
   Footer copy below the cards -- Content Holder "vendor-payments-footer"

   max-width matches .ra-vs-grid exactly (1240px) so the rule and the copy line
   up with the left and right edges of the cards above. Horizontal padding is 0
   for the same reason -- any padding here would inset the text from the rule and
   break that alignment.

   This was capped at 820px on the first pass, because prose at the full
   four-column width runs to ~150 characters a line, about twice a comfortable
   measure. Widened to the container at David's request 2026-08-17 -- a knowing
   trade of reading measure for alignment with the grid, not an oversight. If the
   copy ever grows past a couple of short paragraphs, revisit it.
   ========================================================================== */
.ra-vs-footer {
	max-width: 1240px;
	margin: 44px auto 0 auto;
	padding: 28px 0 0 0;
	border-top: 1px solid #d8d2c6;
	text-align: left;
	color: #281d17;
}

.ra-vs-footer p,
.ra-vs-footer li {
	color: #281d17;
	line-height: 1.6;
}

.ra-vs-footer p {
	margin: 0 0 16px 0;
}

/* Restore natural list behaviour.

   A bare <ul> inside an arbitrary div on this site renders with no marker and
   no indent, which is why EVERY content container in html-header.twig declares
   this for itself -- div.wh-post-content ul, ul.list, .wh-tab-header ul all
   carry the identical "Restore natural list behavior" block. These are the same
   values, so a list in the client's footer copy matches a list anywhere else on
   the site rather than inventing a third convention. */
.ra-vs-footer ul,
.ra-vs-footer ol {
	padding-left: 1.5rem;
	margin: 0 0 16px 0;
	list-style: initial;
}

.ra-vs-footer ul {
	list-style-type: disc;
}

.ra-vs-footer ol {
	list-style-type: decimal;
}

.ra-vs-footer li {
	margin-bottom: 8px;
}

.ra-vs-footer li:last-child {
	margin-bottom: 0;
}

/* Nested lists need a distinguishable marker, or two levels read as one. */
.ra-vs-footer ul ul {
	list-style-type: circle;
}

.ra-vs-footer ol ol {
	list-style-type: lower-alpha;
}

.ra-vs-footer ul ul,
.ra-vs-footer ul ol,
.ra-vs-footer ol ol,
.ra-vs-footer ol ul {
	margin: 8px 0 0 0;
}

/* Headings: spacing only, NO font-size or font-family on purpose. Sizing them
   here would make this block the one place on the site where an h2 is not the
   site's h2 -- the client asked for copy that matches everything else, so the
   headings must inherit the global scale (h1 30px / h2 24px from
   html-header.twig, h3-h6 from Bootstrap) and pick up any future change to it. */
.ra-vs-footer h1,
.ra-vs-footer h2,
.ra-vs-footer h3,
.ra-vs-footer h4,
.ra-vs-footer h5,
.ra-vs-footer h6 {
	margin: 28px 0 12px 0;
	color: #281d17;
}

/* wpautop and TinyMCE both emit a leading/trailing element with its own margin;
   collapsing them keeps the gap under the hairline rule even whether the copy
   opens with a heading, a paragraph or a list. */
.ra-vs-footer > *:first-child {
	margin-top: 0;
}

.ra-vs-footer > *:last-child {
	margin-bottom: 0;
}

/* Same link treatment as .ra-vs-notice, and for the same reason: the copy is
   client-editable, so any link they paste in must be underlined (WCAG 1.4.1)
   without relying on the theme's prose styling reaching this far. #456e91 is
   the text-safe blue from the 2026-07-26 ADA pass (5.40:1 on white). */
.ra-vs-footer a,
.ra-vs-footer a:link,
.ra-vs-footer a:visited {
	color: #456e91;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.ra-vs-footer a:hover,
.ra-vs-footer a:focus {
	color: #281d17;
	text-decoration: underline;
}

.ra-vs-footer a:focus-visible {
	outline: 3px solid #38607f;
	outline-offset: 2px;
}

/* ==========================================================================
   Narrow screens
   ========================================================================== */
@media screen and (max-width: 619px) {

	.ra-vs-notice {
		padding: 20px;
	}

	.ra-vs-badge {
		min-height: 148px;
	}

	.ra-vs-footer {
		margin-top: 32px;
		padding: 24px 0 0 0;
	}
}