/**
 * RNN Horoscope - front end styles.
 *
 * Everything is scoped under .rnnh-* and driven by two custom properties
 * (--rnnh-columns and --rnnh-sign-color) so a theme can restyle it cheaply.
 */

/*
 * The class is doubled on purpose. Themes commonly style widget and sidebar
 * lists with rules like `.widget ul { display: block }`, which has a higher
 * specificity than a single class and would collapse the grid into one column.
 * `.rnnh-grid.rnnh-grid` outranks those without needing !important, so the
 * Elementor controls (which generate a more specific selector still) keep working.
 */
.rnnh-grid.rnnh-grid {
	/*
	 * --rnnh-columns is deliberately NOT set here. Declaring it would outrank the
	 * single-class .rnnh-grid--cols-N rules below and pin every grid to one count.
	 * The fallback inside var() covers the case where no class is present.
	 */
	--rnnh-gap: 1.25rem;
	--rnnh-tile-size: clamp(64px, 9vw, 104px);

	/*
	 * !important on the two structural properties only. Themes style widget and
	 * sidebar lists aggressively, sometimes from an ID selector that no amount of
	 * class stacking can beat. The column count still comes from a custom
	 * property, so Elementor's controls and site CSS can change it freely.
	 */
	display: grid !important;
	grid-template-columns: repeat(var(--rnnh-columns, 6), minmax(0, 1fr)) !important;
	columns: auto !important;
	/* Items align to the top so a long headline never stretches its neighbours.
	   Columns must stay stretched, or the tile's width:100% has nothing to fill. */
	align-items: start !important;
	gap: var(--rnnh-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * Column count comes from a class, not only from the inline custom property,
 * so it survives themes and security plugins that filter style attributes.
 */
.rnnh-grid--cols-2 { --rnnh-columns: 2; }
.rnnh-grid--cols-3 { --rnnh-columns: 3; }
.rnnh-grid--cols-4 { --rnnh-columns: 4; }
.rnnh-grid--cols-5 { --rnnh-columns: 5; }
.rnnh-grid--cols-6 { --rnnh-columns: 6; }
.rnnh-grid--cols-7 { --rnnh-columns: 7; }
.rnnh-grid--cols-8 { --rnnh-columns: 8; }
.rnnh-grid--cols-9 { --rnnh-columns: 9; }
.rnnh-grid--cols-10 { --rnnh-columns: 10; }
.rnnh-grid--cols-11 { --rnnh-columns: 11; }
.rnnh-grid--cols-12 { --rnnh-columns: 12; }

/*
 * Narrow screens step down, but only from counts that would not fit. A grid
 * explicitly set to 3 columns stays at 3 all the way down.
 */
@media (max-width: 960px) {
	.rnnh-grid--cols-5,
	.rnnh-grid--cols-6,
	.rnnh-grid--cols-7,
	.rnnh-grid--cols-8,
	.rnnh-grid--cols-9,
	.rnnh-grid--cols-10,
	.rnnh-grid--cols-11,
	.rnnh-grid--cols-12 {
		--rnnh-columns: 4;
	}
}

@media (max-width: 600px) {
	.rnnh-grid.rnnh-grid {
		--rnnh-gap: 0.9rem;
	}

	.rnnh-grid--cols-4,
	.rnnh-grid--cols-5,
	.rnnh-grid--cols-6,
	.rnnh-grid--cols-7,
	.rnnh-grid--cols-8,
	.rnnh-grid--cols-9,
	.rnnh-grid--cols-10,
	.rnnh-grid--cols-11,
	.rnnh-grid--cols-12 {
		--rnnh-columns: 3;
	}
}

.rnnh-grid.rnnh-grid > .rnnh-grid__item {
	/* Themes give widget list items widths, floats and columns of their own. */
	display: block !important;
	width: auto !important;
	max-width: none !important;
	float: none !important;
	margin: 0;
	padding: 0;
	/* Without this a long word can force the column wider than its share. */
	min-width: 0;
	text-align: center;
	list-style: none;
}

/* Text blocks fill the column so their intrinsic width never sizes it. */
.rnnh-sign__name,
.rnnh-sign__dates,
.rnnh-sign__headline {
	width: 100%;
	min-width: 0;
}

.rnnh-grid.rnnh-grid > .rnnh-grid__item::before,
.rnnh-grid.rnnh-grid > .rnnh-grid__item::marker {
	content: none;
}

/*
 * Themes restyle anchors inside widgets heavily, commonly forcing them to
 * block or inline-block. Losing flex here left the tile stuck to the left of
 * its column while the label stayed centred, so the layout is forced.
 */
.rnnh-grid.rnnh-grid .rnnh-sign__link {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	width: 100% !important;
	gap: 0.5rem;
	color: inherit;
	text-decoration: none;
}

/*
 * The tile fills its column and only then honours the maximum size. Sizing it
 * from the viewport instead made tiles wider than their column at high column
 * counts, so neighbouring circles overlapped.
 */
.rnnh-sign__art {
	display: grid;
	place-items: center;
	/*
	 * flex:0 0 auto stops the tile from being squeezed when a sibling adds
	 * height, which is why the one tile carrying a headline came out smaller
	 * than the other eleven.
	 */
	flex: 0 0 auto;
	width: 100%;
	max-width: var(--rnnh-tile-size);
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: color-mix(in srgb, var(--rnnh-sign-color, #6d597a) 12%, transparent);
	color: var(--rnnh-sign-color, #6d597a);
	transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.rnnh-grid--circle .rnnh-sign__art {
	border-radius: 50%;
}

.rnnh-grid--square .rnnh-sign__art {
	border-radius: 18%;
}

.rnnh-grid--outline .rnnh-sign__art {
	background: transparent;
	border: 2px solid var(--rnnh-sign-color, #6d597a);
}

.rnnh-grid--solid .rnnh-sign__art {
	background: var(--rnnh-sign-color, #6d597a);
	color: #fff;
}

.rnnh-sign__icon {
	width: 52%;
	height: 52%;
	color: inherit;
}

.rnnh-sign__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.rnnh-sign__link:hover .rnnh-sign__art {
	transform: translateY(-2px);
	background: color-mix(in srgb, var(--rnnh-sign-color, #6d597a) 22%, transparent);
	box-shadow: 0 6px 16px color-mix(in srgb, var(--rnnh-sign-color, #6d597a) 22%, transparent);
}

.rnnh-grid--solid .rnnh-sign__link:hover .rnnh-sign__art {
	background: color-mix(in srgb, var(--rnnh-sign-color, #6d597a) 85%, #000);
}

.rnnh-grid--outline .rnnh-sign__link:hover .rnnh-sign__art {
	background: color-mix(in srgb, var(--rnnh-sign-color, #6d597a) 10%, transparent);
}

.rnnh-sign__link:hover .rnnh-sign__name {
	color: var(--rnnh-sign-color, #6d597a);
}

/*
 * No frame on hover or on a mouse click. A ring is kept for keyboard users
 * only, and it hugs the tile instead of boxing in the whole link.
 */
.rnnh-sign__link,
.rnnh-sign__link:hover,
.rnnh-sign__link:focus,
.rnnh-sign__link:active {
	outline: none;
	border: 0;
	box-shadow: none;
	text-decoration: none;
}

.rnnh-sign__link:focus-visible .rnnh-sign__art {
	outline: 2px solid var(--rnnh-sign-color, #6d597a);
	outline-offset: 3px;
}

.rnnh-sign__name {
	font-weight: 600;
	font-size: 0.95rem;
	line-height: 1.3;
	transition: color 0.2s ease;
	overflow-wrap: anywhere;
}

.rnnh-sign__dates,
.rnnh-sign__headline {
	font-size: 0.78rem;
	opacity: 0.72;
	line-height: 1.35;
	overflow-wrap: anywhere;
}

/* Keep rows even: a long headline is clamped instead of stretching the row. */
.rnnh-sign__headline {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
}

/* Single reading card. */

.rnnh-card {
	border: 1px solid color-mix(in srgb, var(--rnnh-sign-color, #6d597a) 25%, transparent);
	border-radius: 14px;
	padding: 1.5rem;
	background: color-mix(in srgb, var(--rnnh-sign-color, #6d597a) 4%, transparent);
}

.rnnh-card__header {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-bottom: 1rem;
}

.rnnh-card__art {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	width: 72px;
	height: 72px;
	border-radius: 50%;
	overflow: hidden;
	background: color-mix(in srgb, var(--rnnh-sign-color, #6d597a) 15%, transparent);
	color: var(--rnnh-sign-color, #6d597a);
}

.rnnh-card__art .rnnh-sign__icon {
	width: 38px;
	height: 38px;
}

.rnnh-card__heading p {
	margin: 0;
	font-size: 0.85rem;
	opacity: 0.72;
}

.rnnh-card__sign {
	margin: 0 0 0.15rem;
	font-size: 1.4rem;
}

.rnnh-card__headline {
	margin: 0 0 0.75rem;
	font-weight: 600;
	font-size: 1.05rem;
}

.rnnh-card__sections {
	display: grid;
	gap: 1rem;
	margin-top: 1.25rem;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.rnnh-card__section h3 {
	margin: 0 0 0.25rem;
	font-size: 0.95rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	opacity: 0.8;
}

.rnnh-card__section p {
	margin: 0.35rem 0 0;
}

/*
 * The lucky-details strip. auto-fit keeps it responsive without media queries:
 * five tiles on a wide screen, two on a phone, no breakpoints to maintain.
 */
.rnnh-meta {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 0.75rem;
	margin: 2rem 0 0;
	padding: 0;
	list-style: none;
}

.rnnh-meta__item {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	margin: 0;
	padding: 0.85rem 1rem;
	min-width: 0;
	border: 1px solid color-mix(in srgb, var(--rnnh-sign-color, #6d597a) 22%, transparent);
	border-radius: 12px;
	background: color-mix(in srgb, var(--rnnh-sign-color, #6d597a) 5%, transparent);
	list-style: none;
}

.rnnh-meta__label {
	font-size: 0.7rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	opacity: 0.6;
}

.rnnh-meta__value {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	min-height: 1.6rem;
	font-weight: 600;
	font-size: 1rem;
	line-height: 1.25;
}

.rnnh-meta__text {
	overflow-wrap: anywhere;
}

.rnnh-meta__number {
	font-size: 1.35rem;
	font-variant-numeric: tabular-nums;
	color: var(--rnnh-sign-color, #6d597a);
}

.rnnh-meta__swatch {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	border: 1px solid rgba(0, 0, 0, 0.15);
	box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.45);
}

.rnnh-meta__icon {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	color: var(--rnnh-sign-color, #6d597a);
}

.rnnh-meta__item--overall .rnnh-stars {
	gap: 3px;
}

.rnnh-meta__item--overall .rnnh-star {
	width: 15px;
	height: 15px;
}

.rnnh-single__grid {
	margin-top: 2.5rem;
}

.rnnh-card--empty {
	opacity: 0.75;
}

/* Star ratings. */

.rnnh-stars {
	display: inline-flex;
	gap: 2px;
	vertical-align: middle;
}

.rnnh-star {
	width: 12px;
	height: 12px;
	background: currentColor;
	opacity: 0.22;
	clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

.rnnh-star.is-filled {
	opacity: 1;
	color: var(--rnnh-sign-color, #6d597a);
}

.rnnh-disclaimer {
	font-size: 0.82rem;
	opacity: 0.7;
}

@media (prefers-reduced-motion: reduce) {
	.rnnh-sign__art {
		transition: none;
	}

	.rnnh-sign__link:hover .rnnh-sign__art {
		transform: none;
	}
}