/*
 * Member Portal — layout/spacing only. Deliberately does NOT set font-family or the base
 * text/background color: those are inherited from the theme's own `body`/heading rules
 * (style.css: `body { font-family: 'Archivo'; color: rgba(var(--color1),1); background:
 * rgba(var(--color2),1); }`, `h1..h6 { font-family: inherit }`), which is how this page ends
 * up matching the rest of copperandkings.com automatically rather than by copying values that
 * could drift out of sync later. --color1/--color2 are the theme's own custom properties
 * (defined in style.css :root) — reused here rather than re-declared so a brand palette change
 * updates this page too. The one addition, --kbcp-accent-warn, has no theme equivalent to
 * borrow (the theme has no notice/alert component — confirmed, not assumed) so it's a small
 * locally-scoped value instead.
 */

.kbcp-portal-section {
	padding: calc((80 / 1728) * 100vw) calc((60 / 1728) * 100vw);
	padding-top: calc((160 / 1728) * 100vw);
	max-width: 1100px;
	margin: 0 auto;
}

.kbcp-portal-section h1 {
	margin-bottom: 0.3em;
}

/*
 * Name + "Member since" under the page title. No color of its own — the name inherits the
 * theme's body color, and the date just leans on opacity so it reads as secondary without
 * introducing a second color value that would need maintaining alongside the palette.
 */
.kbcp-portal-section .kbcp-member-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.15em 0.9em;
	margin-bottom: 1.6em;
}

.kbcp-portal-section .kbcp-member-name {
	font-size: 1.5em;
}

.kbcp-portal-section .kbcp-member-since {
	opacity: 0.7;
	font-size: 1.15em;
}

@media (max-width: 749px) {
	.kbcp-portal-section .kbcp-member-meta {
		/* Stacked on phones — side by side these two wrap mid-phrase at narrow widths. */
		flex-direction: column;
		gap: 0.2em;
		margin-bottom: 1.2em;
	}
}

.kbcp-portal-section h2 {
	margin-top: 2.2em;
	margin-bottom: 0.6em;
	font-size: 1.4em;
}

.kbcp-portal-section .kbcp-hint {
	opacity: 0.75;
	margin-top: -0.4em;
}

.kbcp-portal-section .kbcp-notice {
	border: 1px solid rgba(var(--color1), 0.4);
	background: rgba(var(--color1), 0.08);
	border-radius: 6px;
	padding: 14px 18px;
	margin: 1em 0;
}

.kbcp-portal-section .kbcp-notice--success {
	border-color: rgba(70, 160, 90, 0.6);
	background: rgba(70, 160, 90, 0.12);
}

.kbcp-portal-section .kbcp-notice--error {
	border-color: rgba(200, 80, 70, 0.6);
	background: rgba(200, 80, 70, 0.12);
}

.kbcp-portal-section .kbcp-products {
	margin: 1.2em 0;
}

/* Scoped to .kbcp-products only — the theme's .shopify-grid text sizing elsewhere (Our
   Spirits, home carousel) is untouched. Images stay at the theme's normal grid size; only
   the title/price/checkbox text shrinks. */
.kbcp-portal-section .kbcp-products .shopify-grid__title,
.kbcp-portal-section .kbcp-products .shopify-grid__price,
.kbcp-portal-section .kbcp-products .shopify-grid__actions label {
	font-size: 0.5em;
}

.kbcp-portal-section .kbcp-products .shopify-grid__info {
	padding-top: 6px;
}

/* Separator between panels — was `form + h2` before the jump-nav refactor wrapped each
   section in its own .kbcp-portal-panel div; the heading is no longer form's sibling, so
   this targets the panel boundary directly instead. */
.kbcp-portal-panel + .kbcp-portal-panel {
	border-top: 1px solid rgba(var(--color1), 0.25);
	padding-top: 1.4em;
	margin-top: 1.4em;
}

.kbcp-portal-section .kbcp-field {
	display: block;
	max-width: 420px;
	margin-bottom: 14px;
	font-size: 0.9em;
}

.kbcp-portal-section .kbcp-field input[type="text"] {
	display: block;
	width: 100%;
	margin-top: 6px;
	padding: calc((10 / 1728) * 100vw) calc((14 / 1728) * 100vw);
	background: rgba(var(--color1), 0.06);
	border: var(--th-border-form, 1px solid rgba(var(--color1), 0.4));
	border-radius: 4px;
	color: inherit;
	font: inherit;
}

.kbcp-portal-section .kbcp-field input[type="text"]:focus {
	outline: 2px solid rgba(var(--color1), 0.6);
}

.kbcp-portal-section .kbcp-signout {
	margin-top: 3em;
	opacity: 0.75;
}

.kbcp-portal-section .kbcp-signout a {
	color: inherit;
}

/*
 * Jump nav — left column on desktop, sticky so it stays reachable while scrolling through
 * a long member area; top row on mobile since there's no room for a sidebar. The theme's
 * header is `position: fixed` (style.css), so anchor targets need scroll-margin-top or the
 * fixed header covers the first line of whichever section gets jumped to — same reason the
 * sticky nav itself needs a `top` offset instead of `top: 0`. The 130px offset is an estimate
 * of the fixed header's real height; nudge it if the header's own height changes later.
 */
.kbcp-portal-layout {
	display: flex;
	align-items: flex-start;
	gap: calc((50 / 1728) * 100vw);
}

.kbcp-portal-nav {
	flex: 0 0 200px;
	position: sticky;
	top: 130px;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.kbcp-portal-nav a {
	display: block;
	padding: 8px 0;
	color: inherit;
	text-decoration: none;
	opacity: 0.75;
	border-left: 2px solid transparent;
	padding-left: 12px;
	font-size: 0.85em;
}

.kbcp-portal-nav a:hover {
	opacity: 1;
	border-left-color: rgba(var(--color1), 0.6);
}

.kbcp-portal-main {
	flex: 1 1 auto;
	min-width: 0;
}

.kbcp-portal-panel {
	scroll-margin-top: 130px;
}

@media (max-width: 749px) {
	/*
	 * The theme's own header padding is a desktop-scale `calc(Npx / 1728 * 100vw)` value that
	 * was never given a mobile override (confirmed in style.css — only the logo/menu-icon
	 * widths get a mobile-scale (/440) rule), so at phone widths it shrinks to a few px and
	 * this section's matching desktop-scale padding-top shrank right along with it, tucking
	 * "Member Area" under the fixed header. Fixed px here instead of another vw-based value,
	 * since the thing it needs to clear (the header) isn't scaling with viewport width either.
	 */
	.kbcp-portal-section {
		padding-top: 130px;
	}

	.kbcp-portal-layout {
		flex-direction: column;
		gap: 1em;
	}

	.kbcp-portal-nav {
		/* Overriding flex-basis, not just adding flex-direction: row — the desktop rule's
		   `flex: 0 0 200px` becomes a forced 200px *height* once the layout switches to a
		   column, which is what was leaving all that empty space under the links. */
		flex: 0 0 auto;
		position: static;
		flex-direction: row;
		flex-wrap: wrap;
		width: 100%;
		gap: 0 18px;
		border-bottom: 1px solid rgba(var(--color1), 0.25);
		padding-bottom: 10px;
	}

	.kbcp-portal-nav a {
		padding: 4px 0;
		border-left: none;
	}

	.kbcp-portal-panel {
		scroll-margin-top: 110px;
	}

	/* Smaller, tighter tiles on mobile — more columns of less content rather than a couple
	   of oversized cards, since there's no room to browse otherwise. */
	.kbcp-portal-section .kbcp-products {
		grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
		gap: 10px;
	}

	.kbcp-portal-section .kbcp-products .shopify-grid__card {
		padding: 8px;
	}

	.kbcp-portal-section .kbcp-products .shopify-grid__title,
	.kbcp-portal-section .kbcp-products .shopify-grid__price,
	.kbcp-portal-section .kbcp-products .shopify-grid__actions label {
		font-size: 0.42em;
	}

	.kbcp-portal-section .kbcp-products .shopify-grid__info {
		padding-top: 4px;
	}
}