/* ==========================================================================
   Liquicity Astronauts

   This file belongs to the plugin, not to liquicity.css.

   That reverses an earlier decision, and the reason it changed is that the
   scope changed. When this was a handful of rules for a members page, keeping
   one stylesheet on the site was worth more than colocation. It is now the
   whole visual language of a product area whose markup nothing else on the site
   uses, and every selector below starts with .liq-astro. Splitting the markup
   from the styling across two repositories buys nothing and costs a step every
   time either changes.

   IF YOU ALREADY PASTED THE §8 ASTRONAUTS BLOCK INTO liquicity.css, DELETE IT.
   Two copies fighting is worse than either one alone.

   Everything is a Blocksy palette variable with a fallback, so a Customizer
   change carries through instead of being fought. Square corners throughout,
   per the design spec.

   Loaded only on the account page. See includes/assets.php.
   ========================================================================== */

.liq-astro {
	display: flex;
	flex-direction: column;
	gap: 2.5rem;
}

/* --------------------------------------------------------------------------
   Sections

   A rule and a lot of air between sections rather than cards. This page sits
   inside Blocksy's own account content area, which already has a surface, and
   a second one stacked on top reads as a mistake.

   The gap above is larger than a paragraph gap on purpose. The first version
   ran six headings together with no separation and the whole page read as one
   undifferentiated column of text.
   -------------------------------------------------------------------------- */

.liq-astro-block + .liq-astro-block {
	padding-top: 2.5rem;
	border-top: 1px solid var(--theme-border-color, var(--theme-palette-color-6, #e6e6e6));
}

.liq-astro-block__title {
	margin: 0 0 1rem;
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--theme-palette-color-4, #6b6b6b);
}

.liq-astro-block > p:first-of-type {
	margin-top: 0;
}

/* --------------------------------------------------------------------------
   Attention banner

   Only rendered when something is wrong, so it can afford to be loud. A banner
   that is always present is furniture and stops being read.
   -------------------------------------------------------------------------- */

.liq-astro-alert {
	margin: 0;
}

/* One flex child, so the space before the link survives. Removing this brings
   back "2030.Start it again". */

.liq-astro-alert__text {
	display: block;
}

/* --------------------------------------------------------------------------
   Wallpapers

   An accordion of drops, five at a time, newest open.

   Rewritten from scratch in 3.7.0. This section had changed shape three times
   and a rename left one class name meaning two different things, which is how
   a rule ends up matching nothing while a comment above it claims otherwise.
   -------------------------------------------------------------------------- */

.liq-astro-walls__hint {
	margin: 0 0 1rem;
	font-size: 0.875rem;
	color: var(--theme-palette-color-4, #6b6b6b);
}

/* A rule above the first row, so a fully closed accordion still reads as a
   stack of things rather than as loose lines of text. */

.liq-astro-walls__list {
	border-top: 1px solid var(--theme-border-color, var(--theme-palette-color-6, #e6e6e6));
}

.liq-astro-walls__drop {
	border-bottom: 1px solid var(--theme-border-color, var(--theme-palette-color-6, #e6e6e6));
}

.liq-astro-walls__summary {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1rem;
	padding: 0.9rem 0;
	cursor: pointer;
	font-weight: 600;
}

.liq-astro-walls__title {
	display: flex;
	align-items: center;
	gap: 0.6rem;
}

.liq-astro-walls__badge {
	padding: 0.15rem 0.5rem;
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #fff;
	background: var(--theme-palette-color-1, #111);
}

.liq-astro-walls__count {
	font-weight: 400;
	font-size: 0.875rem;
	white-space: nowrap;
	color: var(--theme-palette-color-4, #6b6b6b);
}

.liq-astro-walls__more {
	margin: 1rem 0 0;
	font-weight: 600;
}

.liq-astro-walls__more a {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* Only the dashboard prints a drop title as a heading. On the account page the
   title lives in the summary row. */

.liq-astro-walls__heading {
	margin: 0 0 0.75rem;
	font-size: 1rem;
}

/* auto-fill rather than a fixed column count: one column on a narrow phone
   through to five on a desktop, with no breakpoints to maintain and no
   assumption about how many images a drop contains. */

.liq-astro-walls__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: 12px;
	margin: 0 0 1.5rem;
	padding: 0;
	list-style: none;
}

.liq-astro-walls__link {
	display: block;
	position: relative;
	text-decoration: none;
}

/* 16:10 holds a desktop wallpaper and a portrait phone one in the same tile
   without either being cropped to something unrecognisable. */

.liq-astro-walls__image {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	background: var(--theme-palette-color-7, #f4f4f4);
	transition: opacity 0.15s ease;
}

.liq-astro-walls__link:hover .liq-astro-walls__image {
	opacity: 0.85;
}

.liq-astro-walls__meta {
	position: absolute;
	right: 6px;
	bottom: 6px;
	padding: 2px 6px;
	font-size: 0.7rem;
	line-height: 1.4;
	color: #fff;
	background: rgba(0, 0, 0, 0.6);
}

/* The tile is the download control, so it says so on hover rather than relying
   on somebody guessing that an image is a button. Touch never sees this and
   does not need to: tapping an image to get it is the obvious gesture there. */

@media (hover: hover) {

	.liq-astro-walls__link::after {
		content: attr(title);
		position: absolute;
		inset: auto 0 0 0;
		padding: 0.4rem;
		font-size: 0.75rem;
		font-weight: 600;
		text-align: center;
		color: #fff;
		background: rgba(0, 0, 0, 0.75);
		opacity: 0;
		transition: opacity 0.15s ease;
	}

	.liq-astro-walls__link:hover::after {
		opacity: 1;
	}

	.liq-astro-walls__link:hover .liq-astro-walls__meta {
		opacity: 0;
	}
}

/* --------------------------------------------------------------------------
   Credits

   THE CODE IS THE HEADLINE, NOT THE BALANCE

   The first version set the balance at 1.5rem, which made it the largest piece
   of text on the page outside the headings, and gave the codes a monospace
   face. That was three type treatments inside one short block, and the
   monospace was the only one on the whole page, so it read as pasted in from
   somewhere else.

   The balance is a sentence now. It is a fact, and the heading above it already
   says what kind of fact. The code gets the emphasis instead, because it is the
   only thing on this block anybody has to do something with: select it, copy
   it, carry it to checkout.

   Letter spacing rather than a monospace face. It does the one job monospace
   was there for, keeping a generated string legible character by character,
   without importing a fourth font into a page built on two.
   -------------------------------------------------------------------------- */

.liq-astro-credits__balance {
	margin: 0 0 1.25rem;
	font-size: 1rem;
}

.liq-astro-credits__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.liq-astro-credits__item {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
	padding: 0.5rem 0;
}

/* No rule under a single code. A divider between one thing and nothing is a
   line for its own sake. */
.liq-astro-credits__item + .liq-astro-credits__item {
	border-top: 1px solid var(--theme-border-color, var(--theme-palette-color-6, #e6e6e6));
}

.liq-astro-credits__code {
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	padding: 0.35rem 0.7rem;
	background: var(--theme-palette-color-7, #f4f4f4);
	border: 1px solid var(--theme-border-color, var(--theme-palette-color-6, #e6e6e6));

	/* One click selects the whole code. Half a coupon code in the clipboard is
	   worse than none, because checkout rejects it without saying why. */
	user-select: all;
	cursor: text;
}

.liq-astro-credits__amount {
	font-weight: 600;
}

.liq-astro-credits__expiry {
	font-size: 0.85em;
	color: var(--theme-palette-color-4, #6b6b6b);
}

/* --------------------------------------------------------------------------
   Disclosures

   Used by the claim-free form and by the benefits list. Styled as a button
   because that is what it does; the rest of <details> is left to the browser.
   -------------------------------------------------------------------------- */

.liq-astro-claimfree__summary {
	display: inline-block;
	padding: 0.6rem 1.2rem;
	cursor: pointer;
	font-weight: 600;
	border: 1px solid var(--theme-border-color, var(--theme-palette-color-6, #e6e6e6));
}

.liq-astro-claimfree__disclosure[open] .liq-astro-claimfree__summary {
	margin-bottom: 1rem;
}

.liq-astro-claimfree__heading {
	margin: 0 0 0.5rem;
	font-size: 1.0625rem;
}

.liq-astro-claimfree__note {
	font-size: 0.875rem;
	color: var(--theme-palette-color-4, #6b6b6b);
}

.liq-astro-claimfree__form {
	margin-top: 1rem;
}

.liq-astro-claimfree__form iframe {
	display: block;
	width: 100%;
	max-width: 100%;
	border: 0;
}

/* --------------------------------------------------------------------------
   Cards

   Discord and the wristband: one sentence and one link each. Side by side on a
   pointer, stacked on a phone. Giving each a full width section pushed the
   membership details off the bottom of the screen for no reason.
   -------------------------------------------------------------------------- */

/* Two columns, never four. auto-fit would put all four tiles in a row on a wide
   screen and squeeze each sentence into a column too narrow to read. Four tiles
   want a 2x2, and one column on a phone. */

.liq-astro-cards {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
	align-items: start;
}

@media (min-width: 600px) {

	.liq-astro-cards {
		grid-template-columns: repeat(2, 1fr);
	}
}

.liq-astro-card {
	padding: 1.25rem;
	border: 1px solid var(--theme-border-color, var(--theme-palette-color-6, #e6e6e6));
}

.liq-astro-card__title {
	margin: 0 0 0.5rem;
	font-size: 1rem;
	font-weight: 600;
}

.liq-astro-card p {
	margin: 0 0 0.75rem;
}

/* A tile with nothing to click, like the raffle, ends on a paragraph. Without
   this it carries a trailing gap the others do not. */

.liq-astro-card > :last-child {
	margin-bottom: 0;
}

.liq-astro-card__action {
	margin: 1rem 0 0.75rem;
}

.liq-astro-card__aside {
	margin: 0;
	font-size: 0.875rem;
	color: var(--theme-palette-color-4, #6b6b6b);
}

/* --------------------------------------------------------------------------
   Membership facts

   Two columns on a pointer, one on touch. A label and a value side by side
   below 480px leaves the value about nine characters of room.
   -------------------------------------------------------------------------- */

.liq-astro-facts {
	margin: 0;
	padding: 0;
	list-style: none;
}

.liq-astro-facts__item {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.6rem 0;
	border-bottom: 1px solid var(--theme-border-color, var(--theme-palette-color-6, #e6e6e6));
}

.liq-astro-facts__item:last-child {
	border-bottom: 0;
}

.liq-astro-facts__label {
	color: var(--theme-palette-color-4, #6b6b6b);
}

.liq-astro-facts__value {
	font-weight: 600;
	text-align: right;
}

/* --------------------------------------------------------------------------
   Benefits list

   Reference, not navigation. Carries no links.
   -------------------------------------------------------------------------- */

.liq-astro-perks__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.liq-astro-perks__item {
	padding: 0.5rem 0;
}

.liq-astro-perks__item strong {
	display: block;
}

/* --------------------------------------------------------------------------
   Actions

   One real button, everything else a link. Two buttons of equal weight next to
   each other make somebody stop and choose, and only one of them is the thing
   they came for.
   -------------------------------------------------------------------------- */

.liq-astro-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem;
	margin: 1.25rem 0 0;
}

.liq-astro-actions__link {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* --------------------------------------------------------------------------
   Rejoin page and dashboard summary
   -------------------------------------------------------------------------- */

.liq-astro-rejoin__price {
	font-size: 1.25rem;
	font-weight: 600;
	margin: 0 0 1rem;
}

.liq-astro--rejoin .liq-astro-perks {
	margin: 1.5rem 0;
}

/* The dashboard summary sits under WooCommerce's own greeting, so it needs a
   rule above it to stop reading as a continuation of that paragraph. Its
   sections then space themselves with the normal .liq-astro-block rules. */

.liq-astro-summary {
	margin-top: 1.5rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--theme-border-color, var(--theme-palette-color-6, #e6e6e6));
}

/* Four tiles is a preview, not a gallery, so it stays narrow instead of
   stretching to fill a desktop content column. */

.liq-astro-summary .liq-astro-walls__grid {
	grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
	max-width: 620px;
}

/* --------------------------------------------------------------------------
   Grouped downloads, off by default
   -------------------------------------------------------------------------- */

.liq-astro-downloads__release + .liq-astro-downloads__release {
	margin-top: 1.25rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--theme-border-color, var(--theme-palette-color-6, #e6e6e6));
}

.liq-astro-downloads__title {
	margin: 0 0 0.5rem;
	font-size: 1rem;
}

.liq-astro-downloads__files {
	margin: 0;
	padding: 0;
	list-style: none;
}

.liq-astro-downloads__file {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.75rem;
	padding: 0.35rem 0;
}

.liq-astro-downloads__remaining,
.liq-astro-downloads__expires {
	font-size: 0.85em;
	color: var(--theme-palette-color-4, #6b6b6b);
}

/* --------------------------------------------------------------------------
   Touch
   -------------------------------------------------------------------------- */

@media (max-width: 480px) {

	.liq-astro {
		gap: 2rem;
	}

	.liq-astro-block + .liq-astro-block {
		padding-top: 2rem;
	}

	.liq-astro-facts__item {
		flex-direction: column;
		gap: 0.1rem;
	}

	.liq-astro-facts__value {
		text-align: left;
	}
}

/* --------------------------------------------------------------------------
   Addresses

   Reuses the card grid from the More tiles, because it is the same shape of
   content: a short block with one link out. A second grid that looked almost
   like the first would be the kind of near-miss that reads as a mistake.
   -------------------------------------------------------------------------- */

.liq-astro-addresses__intro {
	margin: 0 0 1.25rem;
}

.liq-astro-addresses address {
	font-style: normal;
	line-height: 1.7;
}