/* Exhibit RSGDX plugin — custom-style.css — v13-plugin
   (adapted from the theme's v13: every previously bare/sitewide selector
   below is now scoped to #exhibitrsgdx-main and #exhibitrsgdx-announcement
   specifically. In the theme, this file owns the whole page, so a bare
   `*`/`body`/`h1` reset is correct. In this plugin, get_header()/
   get_footer() still render the live site's actual header/nav/footer
   around our content on this same page — an unscoped reset here would
   silently restyle that surrounding chrome too, not just our sections.) */

#exhibitrsgdx-main,
#exhibitrsgdx-announcement,
#exhibitrsgdx-main *,
#exhibitrsgdx-main *::before,
#exhibitrsgdx-main *::after,
#exhibitrsgdx-announcement *,
#exhibitrsgdx-announcement *::before,
#exhibitrsgdx-announcement *::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

/* Chrome/Safari/Edge — thin, primary-colored scrollbar. Left as a plain
   html-level rule intentionally: a scrollbar is a whole-page feature by
   nature, and applying it sitewide (matching the accent color used on
   our homepage) doesn't touch layout/spacing/typography anywhere, so
   there's no risk of it fighting Elementor the way the reset above
   would have. */
html {
	scroll-behavior: smooth;
	scrollbar-color: var(--exhibitrsgdx-color-primary) var(--exhibitrsgdx-color-surface);
	scrollbar-width: thin;
}

::-webkit-scrollbar {
	width: 8px;
	height: 8px;
}

::-webkit-scrollbar-track {
	background: var(--exhibitrsgdx-color-surface);
}

::-webkit-scrollbar-thumb {
	background: var(--exhibitrsgdx-color-primary);
	border-radius: var(--exhibitrsgdx-radius-full);
}

::-webkit-scrollbar-thumb:hover {
	background: var(--exhibitrsgdx-color-primary-hover);
}

#exhibitrsgdx-main {
	font-family: var(--exhibitrsgdx-font-sans);
	font-size: var(--exhibitrsgdx-text-base);
	line-height: 1.6;
	color: var(--exhibitrsgdx-color-text);
	background-color: var(--exhibitrsgdx-color-bg);
}

/* --- Full-bleed breakout ---
   The active theme (Astra) wraps page content in .ast-container, which
   has its own max-width. Since #exhibitrsgdx-main sits inside that
   container with no width of its own, it was just filling whatever
   width .ast-container allowed — meaning OUR --exhibitrsgdx-content-
   max-width (1400px) never actually applied; Astra's container width
   was the real limit. This breaks #exhibitrsgdx-main and the
   announcement bar out to the full viewport width regardless of
   whatever container the current theme wraps pages in, so our own
   inner __inner wrappers (max-width + margin:auto) are what actually
   controls visual width from here on, consistently regardless of theme. */
#exhibitrsgdx-main,
#exhibitrsgdx-announcement {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

#exhibitrsgdx-main h1,
#exhibitrsgdx-main h2,
#exhibitrsgdx-main h3,
#exhibitrsgdx-main h4,
#exhibitrsgdx-main h5,
#exhibitrsgdx-main h6 {
	font-weight: 600;
	line-height: 1.3;
	color: var(--exhibitrsgdx-color-text);
	margin-bottom: var(--exhibitrsgdx-space-4);
}

#exhibitrsgdx-main h1 { font-size: var(--exhibitrsgdx-text-3xl); }

/* Reusable in any title anywhere — wrap a word/phrase to make it orange,
   e.g. Where <span class="exhibitrsgdx-text-accent">Ideas</span> Come Alive */
#exhibitrsgdx-main .exhibitrsgdx-text-accent {
	color: var(--exhibitrsgdx-color-primary);
}
#exhibitrsgdx-main h2 { font-size: var(--exhibitrsgdx-text-2xl); }
#exhibitrsgdx-main h3 { font-size: var(--exhibitrsgdx-text-xl); }
#exhibitrsgdx-main h4 { font-size: var(--exhibitrsgdx-text-lg); }
#exhibitrsgdx-main h5 { font-size: var(--exhibitrsgdx-text-md); }
#exhibitrsgdx-main h6 { font-size: var(--exhibitrsgdx-text-base); }

#exhibitrsgdx-main p {
	margin-bottom: var(--exhibitrsgdx-space-4);
}

#exhibitrsgdx-main a,
#exhibitrsgdx-announcement a {
	color: var(--exhibitrsgdx-color-primary);
	text-decoration: none;
	transition: color var(--exhibitrsgdx-transition);
}

#exhibitrsgdx-main a:hover,
#exhibitrsgdx-main a:focus,
#exhibitrsgdx-announcement a:hover,
#exhibitrsgdx-announcement a:focus {
	color: var(--exhibitrsgdx-color-primary-hover);
}

#exhibitrsgdx-main img {
	max-width: 100%;
	display: block;
}

#exhibitrsgdx-main button {
	font-family: inherit;
	cursor: pointer;
}

/* ==========================================================================
   ANNOUNCEMENT BAR
   Sits above the logo row, part of the header's normal flow (not a
   fixed/floating overlay) — settings at Exhibit Settings → Announcement.
   ========================================================================== */

#exhibitrsgdx-announcement {
	background: var(--exhibitrsgdx-color-primary);
	color: #fff;
	text-align: center;
	padding: 6px var(--exhibitrsgdx-space-4);
	font-size: var(--exhibitrsgdx-text-sm);
}

#exhibitrsgdx-announcement .exhibitrsgdx-announcement__inner p {
	margin: 0;
}

#exhibitrsgdx-announcement a {
	color: #fff;
	text-decoration: underline;
}

@media (max-width: 500px) {
	#exhibitrsgdx-announcement {
		font-size: 12px;
	}
}

/* ==========================================================================
   HEADER — ROW 1 (logo / search / cart / account)
   ========================================================================== */

.exhibitrsgdx-header {
	background: var(--exhibitrsgdx-color-bg);
}

.exhibitrsgdx-header__top {
	background: var(--exhibitrsgdx-color-surface);
	border-bottom: 1px solid var(--exhibitrsgdx-color-border);
}

.exhibitrsgdx-header__top-inner {
	max-width: var(--exhibitrsgdx-content-max-width);
	margin: 0 auto;
	display: flex;
	align-items: center;
	gap: var(--exhibitrsgdx-space-5);
	padding: var(--exhibitrsgdx-space-4) var(--exhibitrsgdx-space-6);
}

.exhibitrsgdx-header__logo {
	flex-shrink: 0;
	font-size: var(--exhibitrsgdx-text-xl);
	font-weight: 700;
	color: var(--exhibitrsgdx-color-text);
}

.exhibitrsgdx-header__logo a {
	color: inherit;
}

.exhibitrsgdx-header__logo img {
	max-height: 44px;
	width: auto;
	transition: transform var(--exhibitrsgdx-transition);
}

.exhibitrsgdx-header__logo a:hover img {
	transform: scale(0.96);
}

.exhibitrsgdx-header__search {
	/* Pushes itself (and everything after it in the flex row) to the
	   right, so the layout reads: logo | (space) | search | cart | account
	   instead of search sitting immediately after the logo. */
	margin-left: auto;
	max-width: 400px;
	width: 100%;
}

.exhibitrsgdx-search-form {
	display: flex;
}

.exhibitrsgdx-search-form__input {
	flex: 1;
	background: var(--exhibitrsgdx-color-surface-high);
	border: 1px solid var(--exhibitrsgdx-color-border-light);
	border-radius: 0;
	color: var(--exhibitrsgdx-color-text);
	padding: 10px 14px;
	font-size: var(--exhibitrsgdx-text-sm);
	font-family: var(--exhibitrsgdx-font-sans);
	transition: border-color var(--exhibitrsgdx-transition);
}

.exhibitrsgdx-search-form__input::placeholder {
	color: var(--exhibitrsgdx-color-text-subtle);
	opacity: 1;
}

.exhibitrsgdx-search-form__input:focus {
	outline: none;
	/* Lighter than the default border, but deliberately not full white */
	border-color: var(--exhibitrsgdx-color-text-muted);
}

.exhibitrsgdx-search-form__submit {
	position: relative;
	background: var(--exhibitrsgdx-color-surface-alt);
	border: 1px solid var(--exhibitrsgdx-color-border-light);
	border-left: none;
	border-radius: 0;
	color: transparent;
	width: 46px;
	flex-shrink: 0;
	transition: background var(--exhibitrsgdx-transition), border-color var(--exhibitrsgdx-transition);
}

.exhibitrsgdx-search-form__submit i {
	color: var(--exhibitrsgdx-color-text-muted);
	transition: color var(--exhibitrsgdx-transition);
}

.exhibitrsgdx-search-form__submit:hover {
	background: var(--exhibitrsgdx-color-primary);
	border-color: var(--exhibitrsgdx-color-primary);
}

.exhibitrsgdx-search-form__submit:hover i {
	color: #fff;
}

.exhibitrsgdx-header__top-actions {
	display: flex;
	align-items: center;
	gap: var(--exhibitrsgdx-space-5);
	flex-shrink: 0;
}

/* --- Cart --- */

.exhibitrsgdx-cart {
	position: relative;
}

.exhibitrsgdx-cart__toggle {
	position: relative;
	background: none;
	border: none;
	color: var(--exhibitrsgdx-color-primary);
	font-size: var(--exhibitrsgdx-text-lg);
	padding: 4px;
}

.exhibitrsgdx-cart__count {
	position: absolute;
	top: -6px;
	right: -8px;
	background: var(--exhibitrsgdx-color-primary);
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	line-height: 1;
	border-radius: var(--exhibitrsgdx-radius-full);
	padding: 2px 6px;
	min-width: 16px;
	text-align: center;
}

.exhibitrsgdx-cart__panel {
	position: absolute;
	top: calc(100% + 12px);
	right: 0;
	width: 320px;
	background: var(--exhibitrsgdx-color-surface);
	border: 1px solid var(--exhibitrsgdx-color-border-light);
	border-radius: var(--exhibitrsgdx-radius-md);
	box-shadow: 0 8px 24px rgba(0,0,0,0.4);
	padding: var(--exhibitrsgdx-space-4);
	z-index: 100;
}

/* Same lesson learned on the wiki project — an element with an explicit
   display property needs an [hidden] override, or the hidden attribute
   never actually takes effect. Baking this in from day one here. */
.exhibitrsgdx-cart__panel[hidden] {
	display: none;
}

/* --- Account --- */

.exhibitrsgdx-header__account {
	display: flex;
	align-items: center;
	gap: 4px;
	color: var(--exhibitrsgdx-color-text);
	font-size: var(--exhibitrsgdx-text-sm);
	font-weight: 400;
	white-space: nowrap;
}

.exhibitrsgdx-header__account i {
	font-size: 22px;
	color: #fff;
}

/* ==========================================================================
   HEADER — ROW 2 (nav + call now)
   ========================================================================== */

.exhibitrsgdx-header__nav {
	background: var(--exhibitrsgdx-color-bg);
	border-bottom: 2px solid var(--exhibitrsgdx-color-primary);
	position: relative;
	z-index: 500;
	transition: box-shadow var(--exhibitrsgdx-transition);
}

/* JS-driven fixed positioning (see custom-script.js) rather than
   position:sticky — sticky silently breaks if ANY ancestor has overflow
   set to anything but visible, which is hard to guarantee on a site with
   legacy WooCommerce/Elementor CSS still in the mix. This sidesteps that
   entirely. */
.exhibitrsgdx-header__nav.is-fixed {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	/* position itself can't be transitioned, so this plays a one-time
	   slide+fade the moment .is-fixed is added, rather than an abrupt
	   instant snap into place */
	animation: exhibitrsgdx-nav-drop-in 0.25s ease;
}

@keyframes exhibitrsgdx-nav-drop-in {
	from {
		transform: translateY(-100%);
		opacity: 0;
	}
	to {
		transform: translateY(0);
		opacity: 1;
	}
}

.exhibitrsgdx-header__nav.is-stuck {
	box-shadow: 0 4px 16px rgba(0,0,0,0.35);
}

.exhibitrsgdx-header__nav-inner {
	max-width: var(--exhibitrsgdx-content-max-width);
	margin: 0 auto;
	display: flex;
	align-items: stretch;
	padding: 0 var(--exhibitrsgdx-space-6);
}

/* Mobile-only duplicate of search+account — hidden by default here,
   the mobile media query below is the ONLY place that shows it. This
   rule was missing entirely before, which is why it was showing on
   every screen size instead of just mobile. */
.exhibitrsgdx-header__mobile-row {
	display: none;
}

.exhibitrsgdx-header__nav-list {
	display: flex;
	align-items: stretch;
	justify-content: space-between;
	list-style: none;
	flex: 1;
}

.exhibitrsgdx-header__nav-list li {
	position: relative;
	display: flex;
	align-items: center;
}

.exhibitrsgdx-header__nav-list > li > a {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: var(--exhibitrsgdx-space-3) var(--exhibitrsgdx-space-4);
	color: var(--exhibitrsgdx-color-text);
	font-size: var(--exhibitrsgdx-text-sm);
	font-weight: 400;
	white-space: nowrap;
	transition: color var(--exhibitrsgdx-transition), background var(--exhibitrsgdx-transition);
}

/* Current/active page gets the same highlight as hover, not just hover
   alone — visitors should see where they are, not just where they're
   pointing. */
.exhibitrsgdx-header__nav-list > li.current-menu-item:not(:first-child) > a,
.exhibitrsgdx-header__nav-list > li.current-menu-ancestor:not(:first-child) > a,
.exhibitrsgdx-header__nav-list > li.current_page_item:not(:first-child) > a {
	color: var(--exhibitrsgdx-color-primary);
}

/* First nav item styled as the highlighted "Browse All Products" pill —
   matches the design by default. To highlight a DIFFERENT item instead,
   add the CSS class "exhibitrsgdx-nav-highlight" to that menu item in
   Appearance → Menus (enable "CSS Classes" under Screen Options first). */
.exhibitrsgdx-header__nav-list > li:first-child > a,
.exhibitrsgdx-header__nav-list > li.exhibitrsgdx-nav-highlight > a {
	background: var(--exhibitrsgdx-color-primary);
	color: #fff;
}

.exhibitrsgdx-header__nav-list > li:first-child > a:hover,
.exhibitrsgdx-header__nav-list > li.exhibitrsgdx-nav-highlight > a:hover {
	background: var(--exhibitrsgdx-color-primary-hover);
}

.exhibitrsgdx-header__nav-list > li:not(:first-child):not(.exhibitrsgdx-nav-highlight) > a:hover {
	color: var(--exhibitrsgdx-color-primary);
}

/* Dropdown caret + submenu for items with children */
.exhibitrsgdx-header__nav-list .menu-item-has-children > a::after {
	content: "\f0d7";
	font-family: "Font Awesome 6 Free";
	font-weight: 900;
	font-size: 11px;
	margin-left: 2px;
}

/* Nested (2nd+ level) items get a right-pointing caret instead, since
   those flyout to the side rather than dropping down */
.exhibitrsgdx-header__nav-list .sub-menu .menu-item-has-children > a::after {
	content: "\f0da";
	margin-left: auto;
	padding-left: 12px;
}

.exhibitrsgdx-header__nav-list .sub-menu {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 220px;
	background: var(--exhibitrsgdx-color-surface);
	border: 1px solid var(--exhibitrsgdx-color-border-light);
	border-top: 2px solid var(--exhibitrsgdx-color-primary);
	border-bottom: 2px solid var(--exhibitrsgdx-color-primary);
	box-shadow: 0 8px 20px rgba(0,0,0,0.4);
	list-style: none;
	z-index: 100;
	flex-direction: column;
}

.exhibitrsgdx-header__nav-list li:hover > .sub-menu {
	display: flex;
}

/* 3rd level (and deeper) — flyout to the RIGHT of its parent row instead
   of stacking below, matching a classic multi-level nav pattern */
.exhibitrsgdx-header__nav-list .sub-menu .sub-menu {
	top: -1px;
	left: 100%;
}

.exhibitrsgdx-header__nav-list .sub-menu a {
	display: flex;
	align-items: center;
	width: 100%;
	padding: 10px 16px;
	color: var(--exhibitrsgdx-color-text);
	font-size: var(--exhibitrsgdx-text-sm);
	font-weight: 400;
	white-space: nowrap;
	transition: background var(--exhibitrsgdx-transition), color var(--exhibitrsgdx-transition);
}

.exhibitrsgdx-header__nav-list .sub-menu a:hover {
	background: var(--exhibitrsgdx-color-surface-high);
	color: var(--exhibitrsgdx-color-primary);
}

/* A submenu row that itself opens a further flyout gets a full orange
   fill on hover instead of just a text-color change, so it reads clearly
   as "this leads somewhere else" */
.exhibitrsgdx-header__nav-list .sub-menu .menu-item-has-children:hover > a {
	background: var(--exhibitrsgdx-color-primary);
	color: #fff;
}

/* --- Image dropdown grid — auto-switches on for any dropdown whose
   items have a Featured Image set in the menu editor (see
   functions/nav-menu-image.php) --- */

.exhibitrsgdx-header__nav-list > li.has-image-children > .sub-menu {
	display: none;
	min-width: 480px;
	padding: var(--exhibitrsgdx-space-4);
}

.exhibitrsgdx-header__nav-list > li.has-image-children:hover > .sub-menu,
.exhibitrsgdx-header__nav-list > li.has-image-children.is-open > .sub-menu {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--exhibitrsgdx-space-4);
}

.exhibitrsgdx-header__nav-list > li.has-image-children > .sub-menu > li {
	display: block;
}

.exhibitrsgdx-header__nav-list > li.has-image-children > .sub-menu > li > a {
	display: flex;
	flex-direction: column;
	width: 100%;
	padding: 0;
	background: none !important;
}

.exhibitrsgdx-header__nav-list > li.has-image-children > .sub-menu > li > a:hover {
	background: none !important;
}

.exhibitrsgdx-menu-item-image {
	width: 100%;
	height: 140px;
	object-fit: cover;
	margin-bottom: var(--exhibitrsgdx-space-2);
	transition: transform var(--exhibitrsgdx-transition);
}

.exhibitrsgdx-header__nav-list > li.has-image-children > .sub-menu > li > a:hover .exhibitrsgdx-menu-item-image {
	transform: scale(0.96);
}

.exhibitrsgdx-menu-item-subtitle {
	display: block;
	font-size: var(--exhibitrsgdx-text-xs);
	font-weight: 400;
	color: var(--exhibitrsgdx-color-text-subtle);
	text-transform: uppercase;
	letter-spacing: 0.03em;
	margin-top: 2px;
}

/* The item's own title text renders bold/uppercase in grid mode, even
   though normal dropdown rows are regular weight */
.exhibitrsgdx-header__nav-list > li.has-image-children > .sub-menu > li > a {
	font-weight: 700;
	text-transform: uppercase;
	font-size: var(--exhibitrsgdx-text-sm);
}

/* --- Call now --- */

.exhibitrsgdx-header__call {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	justify-content: center;
	padding: 0 var(--exhibitrsgdx-space-4);
	color: var(--exhibitrsgdx-color-primary);
	line-height: 1.3;
}

.exhibitrsgdx-header__call-label {
	font-size: var(--exhibitrsgdx-text-xs);
	color: var(--exhibitrsgdx-color-text-muted);
}

.exhibitrsgdx-header__call-number {
	font-size: var(--exhibitrsgdx-text-sm);
	font-weight: 700;
}

/* --- Mobile nav toggle --- */

.exhibitrsgdx-header__mobile-toggle {
	display: none;
	background: none;
	border: none;
	color: var(--exhibitrsgdx-color-text);
	font-size: var(--exhibitrsgdx-text-lg);
	padding: var(--exhibitrsgdx-space-3);
}

@media (max-width: 1200px) {
	.exhibitrsgdx-header {
		position: relative;
	}

	.exhibitrsgdx-desktop-only {
		display: none !important;
	}

	.exhibitrsgdx-header__mobile-toggle {
		display: block;
	}

	/* Row 2 becomes a hidden dropdown panel, opened by the hamburger in
	   row 1 — logo | cart | hamburger is the only always-visible row now */
	.exhibitrsgdx-header__nav {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		z-index: 200;
		border-bottom: none;
	}

	.exhibitrsgdx-header__nav.is-mobile-open {
		display: block;
	}

	.exhibitrsgdx-header__nav-inner {
		flex-direction: column;
		align-items: stretch;
		padding: 0;
	}

	/* Stacked section 1: search + account */
	.exhibitrsgdx-header__mobile-row {
		display: none;
	}

	.exhibitrsgdx-header__nav.is-mobile-open .exhibitrsgdx-header__mobile-row {
		display: flex;
		align-items: center;
		gap: var(--exhibitrsgdx-space-3);
		padding: var(--exhibitrsgdx-space-4);
		border-bottom: 1px solid var(--exhibitrsgdx-color-border);
	}

	.exhibitrsgdx-header__mobile-row .exhibitrsgdx-search-form {
		flex: 1;
	}

	.exhibitrsgdx-header__mobile-row .exhibitrsgdx-header__account {
		flex-shrink: 0;
	}

	.exhibitrsgdx-header__mobile-row .exhibitrsgdx-header__account span {
		display: none; /* icon only here, to save space next to search */
	}

	/* Stacked section 2: nav links */
	.exhibitrsgdx-header__nav-list {
		display: none;
	}

	.exhibitrsgdx-header__nav.is-mobile-open .exhibitrsgdx-header__nav-list {
		display: flex;
		flex-direction: column;
		background: var(--exhibitrsgdx-color-bg);
	}

	/* Stacked section 3: call now */
	.exhibitrsgdx-header__call {
		display: none;
	}

	.exhibitrsgdx-header__nav.is-mobile-open .exhibitrsgdx-header__call {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		padding: var(--exhibitrsgdx-space-4);
		border-top: 1px solid var(--exhibitrsgdx-color-border);
	}

	/* Push cart/hamburger to the far right directly — don't rely on the
	   search element's auto-margin for this, since search gets hidden
	   entirely on mobile and would take that push mechanism with it */
	.exhibitrsgdx-header__top-actions {
		margin-left: auto;
	}

	/* Dropdown accordion — touch simulates :hover unreliably and gives no
	   way to close it again, so hover-triggered dropdowns are disabled
	   entirely here in favor of a JS click-toggle (.is-open class,
	   see custom-script.js). Submenus also stack inline instead of
	   flying out absolutely-positioned, since there's no room for that
	   on a narrow screen. */
	.exhibitrsgdx-header__nav-list li:hover > .sub-menu {
		display: none !important;
	}

	.exhibitrsgdx-header__nav-list li.is-open > .sub-menu {
		display: flex !important;
		position: relative;
		top: auto;
		left: auto;
		width: 100%;
		border: none;
		border-top: 1px solid var(--exhibitrsgdx-color-border);
		border-bottom: none;
		box-shadow: none;
		padding-left: var(--exhibitrsgdx-space-4);
	}

	/* The <li> itself is a row layout by default (link + caret side by
	   side) — when open, it needs to stack vertically instead, or the
	   dropdown just sits beside the link rather than below it */
	.exhibitrsgdx-header__nav-list li.is-open {
		flex-direction: column;
		align-items: stretch;
	}

	/* Long titles wrap onto multiple lines instead of overflowing off the
	   right edge of the screen — the desktop nowrap rule assumes a
	   flyout with room to grow, which isn't true here */
	.exhibitrsgdx-header__nav-list .sub-menu a,
	.exhibitrsgdx-header__nav-list > li > a {
		white-space: normal;
	}

	.exhibitrsgdx-header__nav-list > li.has-image-children.is-open > .sub-menu {
		display: grid !important;
		grid-template-columns: 1fr;
		min-width: 0;
		width: 100%;
	}

	/* Rotate the caret when a dropdown is open, standard accordion cue */
	.exhibitrsgdx-header__nav-list li.is-open > a::after {
		transform: rotate(180deg);
	}
}

/* ==========================================================================
   BUTTONS — global utility classes
   Radius, padding, and hover behavior are all defined once here rather
   than per-component, so every button site-wide stays consistent.
   ========================================================================== */

#exhibitrsgdx-main .exhibitrsgdx-btn {
	display: inline-block;
	font-family: var(--exhibitrsgdx-font-sans);
	font-weight: 700;
	font-size: 12px;
	padding: 6px 20px;
	border-radius: var(--exhibitrsgdx-radius-button);
	text-transform: uppercase;
	letter-spacing: 0.03em;
	border: 1px solid transparent;
	cursor: pointer;
	transition: background var(--exhibitrsgdx-transition), color var(--exhibitrsgdx-transition), border-color var(--exhibitrsgdx-transition);
}

/* Smaller variant — use inside cards/grids (product cards, etc.) */
#exhibitrsgdx-main .exhibitrsgdx-btn--sm {
	padding: 6px 14px;
	font-size: var(--exhibitrsgdx-text-xs);
}

/* Primary — orange fill, inverts to black on hover with an orange border */
#exhibitrsgdx-main .exhibitrsgdx-btn--primary {
	background: var(--exhibitrsgdx-btn-color, var(--exhibitrsgdx-color-primary));
	color: #fff;
	border-color: var(--exhibitrsgdx-btn-color, var(--exhibitrsgdx-color-primary));
}

#exhibitrsgdx-main .exhibitrsgdx-btn--primary:hover {
	background: #000;
	color: #fff;
	border-color: var(--exhibitrsgdx-btn-color, var(--exhibitrsgdx-color-primary));
}

/* Secondary — outline style, same invert-to-black hover behavior */
#exhibitrsgdx-main .exhibitrsgdx-btn--secondary {
	background: transparent;
	color: #fff;
	border-color: #fff;
}

#exhibitrsgdx-main .exhibitrsgdx-btn--secondary:hover {
	background: #000;
	color: #fff;
	border-color: #fff;
}

/* ==========================================================================
   FEATURES GRID
   Icon + title + subtext cards — currently used on the homepage (content
   comes from that page's own post meta) but the pattern itself is
   generic enough to reuse elsewhere later.
   ========================================================================== */

#exhibitrsgdx-main .exhibitrsgdx-features {
	padding: 60px 0;
}

#exhibitrsgdx-main .exhibitrsgdx-features__inner {
	max-width: var(--exhibitrsgdx-content-max-width);
	margin: 0 auto;
	padding: 0 var(--exhibitrsgdx-space-6);
}

#exhibitrsgdx-main .exhibitrsgdx-features__header {
	text-align: center;
	margin: 0 auto var(--exhibitrsgdx-space-6);
}

#exhibitrsgdx-main .exhibitrsgdx-features__title {
	font-size: var(--exhibitrsgdx-text-2xl);
	margin-bottom: var(--exhibitrsgdx-space-3);
}

#exhibitrsgdx-main .exhibitrsgdx-features__description {
	color: var(--exhibitrsgdx-color-text-muted);
	margin-bottom: 0;
}

#exhibitrsgdx-main .exhibitrsgdx-features__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--exhibitrsgdx-space-5);
}

#exhibitrsgdx-main .exhibitrsgdx-features__card {
	background: var(--exhibitrsgdx-color-surface);
	border: 1px solid var(--exhibitrsgdx-color-border);
	padding: var(--exhibitrsgdx-space-5);
	text-align: center;
	transition: transform var(--exhibitrsgdx-transition), border-color var(--exhibitrsgdx-transition);
}

#exhibitrsgdx-main .exhibitrsgdx-features__card:hover {
	transform: translateY(-4px);
	border-color: var(--exhibitrsgdx-color-primary);
}

#exhibitrsgdx-main .exhibitrsgdx-features__icon {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--exhibitrsgdx-color-primary);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
	margin: 0 auto var(--exhibitrsgdx-space-4);
}

#exhibitrsgdx-main .exhibitrsgdx-features__card-title {
	font-size: var(--exhibitrsgdx-text-md);
	margin-bottom: var(--exhibitrsgdx-space-2);
}

#exhibitrsgdx-main .exhibitrsgdx-features__card-subtext {
	color: var(--exhibitrsgdx-color-text-muted);
	font-size: var(--exhibitrsgdx-text-sm);
	margin-bottom: 0;
}

@media (max-width: 1200px) {
#exhibitrsgdx-main .exhibitrsgdx-features__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 500px) {
#exhibitrsgdx-main .exhibitrsgdx-features__grid {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   BRAND SINGLE / ARCHIVE — landing pages for the "brands" post type
   ========================================================================== */

#exhibitrsgdx-main .exhibitrsgdx-brand-single__hero {
	position: relative;
}

#exhibitrsgdx-main .exhibitrsgdx-brand-single__hero-image img {
	width: 100%;
	max-height: 480px;
	object-fit: cover;
}

#exhibitrsgdx-main .exhibitrsgdx-brand-single__hero-text {
	max-width: var(--exhibitrsgdx-content-max-width);
	margin: 0 auto;
	padding: var(--exhibitrsgdx-space-5) var(--exhibitrsgdx-space-6);
}

#exhibitrsgdx-main .exhibitrsgdx-brand-single__category {
	color: var(--exhibitrsgdx-color-primary);
	font-size: var(--exhibitrsgdx-text-sm);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	margin-bottom: var(--exhibitrsgdx-space-2);
}

#exhibitrsgdx-main .exhibitrsgdx-brand-single__title {
	font-size: var(--exhibitrsgdx-text-3xl);
	margin-bottom: 0;
}

#exhibitrsgdx-main .exhibitrsgdx-brand-single__content {
	max-width: var(--exhibitrsgdx-content-max-width);
	margin: 0 auto;
	padding: var(--exhibitrsgdx-space-5) var(--exhibitrsgdx-space-6) var(--exhibitrsgdx-space-6);
}

#exhibitrsgdx-main .exhibitrsgdx-brand-archive__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--exhibitrsgdx-space-5);
	max-width: var(--exhibitrsgdx-content-max-width);
	margin: 0 auto;
	padding: 0 var(--exhibitrsgdx-space-6) var(--exhibitrsgdx-space-6);
}

#exhibitrsgdx-main .exhibitrsgdx-brand-archive__card {
	display: block;
	background: var(--exhibitrsgdx-color-surface);
	border: 1px solid var(--exhibitrsgdx-color-border);
	overflow: hidden;
	transition: border-color var(--exhibitrsgdx-transition), transform var(--exhibitrsgdx-transition);
}

#exhibitrsgdx-main .exhibitrsgdx-brand-archive__card:hover {
	border-color: var(--exhibitrsgdx-color-primary);
	transform: translateY(-4px);
}

#exhibitrsgdx-main .exhibitrsgdx-brand-archive__card-image img {
	width: 100%;
	height: 220px;
	object-fit: cover;
}

#exhibitrsgdx-main .exhibitrsgdx-brand-archive__card-body {
	padding: var(--exhibitrsgdx-space-4);
}

#exhibitrsgdx-main .exhibitrsgdx-brand-archive__card-category {
	color: var(--exhibitrsgdx-color-primary);
	font-size: var(--exhibitrsgdx-text-xs);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	margin-bottom: var(--exhibitrsgdx-space-2);
}

#exhibitrsgdx-main .exhibitrsgdx-brand-archive__card-title {
	color: var(--exhibitrsgdx-color-text);
	margin-bottom: 0;
}

@media (max-width: 1200px) {
#exhibitrsgdx-main .exhibitrsgdx-brand-archive__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 500px) {
#exhibitrsgdx-main .exhibitrsgdx-brand-archive__grid {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 767px) {
#exhibitrsgdx-main .exhibitrsgdx-features {
		padding: var(--exhibitrsgdx-space-6) 0;
	}
}
/* ==========================================================================
   FOOTER
   Column 1 (brand) + any number of link columns (Settings -> Footer, a
   flexible repeater) + Artwork Submission column, then a copyright/socials
   row below. Flexbox with wrap rather than a fixed-count grid, since the
   number of link columns is settings-driven and can change.

   Every selector below is prefixed with #exhibitrsgdx-footer (an ID,
   matching the id="exhibitrsgdx-footer" already on the <footer> element)
   rather than relying on the class alone. This isn't about load order --
   the old rsgdx plugin's CSS uses selectors like `body.rsgdx-active h3`,
   which has higher specificity (1 class + 2 elements) than a bare class
   selector like `.exhibitrsgdx-footer__col-title` (1 class) ever could,
   regardless of which stylesheet loads last. An ID always outranks any
   number of classes/elements in CSS specificity, so this wins outright.
   ========================================================================== */

#exhibitrsgdx-footer {
	background: var(--exhibitrsgdx-color-bg);
	border-top: 1px solid var(--exhibitrsgdx-color-border);
	padding: var(--exhibitrsgdx-space-6) 0 var(--exhibitrsgdx-space-5);
	/* Same breakout as #exhibitrsgdx-main — harmless no-op if this is
	   already outside Astra's .ast-container by the time wp_footer()
	   fires, but safe to include either way. */
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

#exhibitrsgdx-footer .exhibitrsgdx-footer__inner {
	max-width: var(--exhibitrsgdx-content-max-width);
	margin: 0 auto;
	padding: 0 var(--exhibitrsgdx-space-6);
}

#exhibitrsgdx-footer .exhibitrsgdx-footer__grid {
	display: flex;
	flex-wrap: wrap;
	gap: var(--exhibitrsgdx-space-6);
	padding-bottom: var(--exhibitrsgdx-space-6);
}

#exhibitrsgdx-footer .exhibitrsgdx-footer__col--brand {
	flex: 1 1 260px;
}

#exhibitrsgdx-footer .exhibitrsgdx-footer__col--link {
	flex: 1 1 160px;
}

#exhibitrsgdx-footer .exhibitrsgdx-footer__col--artwork {
	flex: 1 1 240px;
}

#exhibitrsgdx-footer .exhibitrsgdx-footer__logo img {
	max-height: 40px;
	width: auto;
	margin-bottom: var(--exhibitrsgdx-space-4);
}

#exhibitrsgdx-footer .exhibitrsgdx-footer__logo--text {
	color: var(--exhibitrsgdx-color-text);
	font-size: var(--exhibitrsgdx-text-lg);
	font-weight: 700;
	margin-bottom: var(--exhibitrsgdx-space-4);
}

#exhibitrsgdx-footer .exhibitrsgdx-footer__desc,
#exhibitrsgdx-footer .exhibitrsgdx-footer__address {
	color: var(--exhibitrsgdx-color-text-muted);
	font-size: var(--exhibitrsgdx-text-sm);
	margin-bottom: var(--exhibitrsgdx-space-3);
}

#exhibitrsgdx-footer .exhibitrsgdx-footer__col-title {
	color: var(--exhibitrsgdx-color-text);
	font-size: var(--exhibitrsgdx-text-md);
	font-weight: 700;
	margin-bottom: var(--exhibitrsgdx-space-4);
}

#exhibitrsgdx-footer .exhibitrsgdx-footer__col-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--exhibitrsgdx-space-3);
}

#exhibitrsgdx-footer .exhibitrsgdx-footer__col-list a {
	color: var(--exhibitrsgdx-color-text-muted);
	font-size: var(--exhibitrsgdx-text-sm);
	text-decoration: none;
	transition: color var(--exhibitrsgdx-transition);
}

#exhibitrsgdx-footer .exhibitrsgdx-footer__col-list a:hover {
	color: var(--exhibitrsgdx-color-primary);
}

#exhibitrsgdx-footer .exhibitrsgdx-footer__artwork-desc {
	color: var(--exhibitrsgdx-color-text-muted);
	font-size: var(--exhibitrsgdx-text-sm);
	margin-bottom: var(--exhibitrsgdx-space-4);
}

#exhibitrsgdx-footer .exhibitrsgdx-footer__artwork-btn {
	display: inline-block;
}

/* Button base classes duplicated here, scoped to #exhibitrsgdx-footer —
   the main .exhibitrsgdx-btn rules only apply inside #exhibitrsgdx-main,
   and the footer renders as a separate subtree via wp_footer, not nested
   inside main, so those rules never reached it. */
#exhibitrsgdx-footer .exhibitrsgdx-btn {
	display: inline-block;
	font-family: var(--exhibitrsgdx-font-sans);
	font-weight: 700;
	font-size: 12px;
	padding: 6px 20px;
	border-radius: var(--exhibitrsgdx-radius-button);
	text-transform: uppercase;
	letter-spacing: 0.03em;
	border: 1px solid transparent;
	cursor: pointer;
	transition: background var(--exhibitrsgdx-transition), color var(--exhibitrsgdx-transition), border-color var(--exhibitrsgdx-transition);
}

#exhibitrsgdx-footer .exhibitrsgdx-btn--primary {
	background: var(--exhibitrsgdx-btn-color, var(--exhibitrsgdx-color-primary));
	color: #fff;
	border-color: var(--exhibitrsgdx-btn-color, var(--exhibitrsgdx-color-primary));
}

#exhibitrsgdx-footer .exhibitrsgdx-btn--primary:hover {
	background: #000;
	color: #fff;
	border-color: var(--exhibitrsgdx-btn-color, var(--exhibitrsgdx-color-primary));
}

#exhibitrsgdx-footer .exhibitrsgdx-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--exhibitrsgdx-space-4);
	padding-top: var(--exhibitrsgdx-space-5);
	border-top: 1px solid var(--exhibitrsgdx-color-border);
}

#exhibitrsgdx-footer .exhibitrsgdx-footer__copy {
	color: var(--exhibitrsgdx-color-text-subtle);
	font-size: var(--exhibitrsgdx-text-sm);
}

#exhibitrsgdx-footer .exhibitrsgdx-footer__socials {
	display: flex;
	gap: var(--exhibitrsgdx-space-3);
}

#exhibitrsgdx-footer .exhibitrsgdx-footer__social-link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--exhibitrsgdx-color-surface);
	color: var(--exhibitrsgdx-color-text);
	transition: background var(--exhibitrsgdx-transition), color var(--exhibitrsgdx-transition);
}

#exhibitrsgdx-footer .exhibitrsgdx-footer__social-link:hover {
	background: var(--exhibitrsgdx-color-primary);
	color: #fff;
}

@media (max-width: 767px) {
	#exhibitrsgdx-footer .exhibitrsgdx-footer__grid {
		flex-direction: column;
		gap: var(--exhibitrsgdx-space-5);
	}

	#exhibitrsgdx-footer .exhibitrsgdx-footer__bottom {
		flex-direction: column;
		align-items: flex-start;
	}
}