/*
 * Reunionary Site — scoped marketing styles.
 *
 * Only for details the block controls and theme.json cannot express:
 * the sticky announcement bar, the layered hero preview stack, and the
 * foundation strip dividers. Everything else is handled by native blocks.
 */

/* ---------------------------------------------------------------
   Announcement bar
   --------------------------------------------------------------- */

.reun-announcement a {
	color: var(--wp--preset--color--soft-cream);
	text-decoration: none;
	font-weight: 500;
}

.reun-announcement a:hover,
.reun-announcement a:focus-visible {
	text-decoration: underline;
}

/* ---------------------------------------------------------------
   Site header
   --------------------------------------------------------------- */

.reun-header .wp-block-navigation {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
}

.reun-header .wp-block-navigation a {
	text-decoration: none;
}

.reun-header .wp-block-navigation a:hover,
.reun-header .wp-block-navigation a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 0.3em;
}

.reun-wordmark {
	font-family: var(--wp--preset--font-family--reunionary-display);
	font-size: 1.6rem;
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1;
	margin: 0;
}

.reun-wordmark a {
	color: inherit;
	text-decoration: none;
}

/* ---------------------------------------------------------------
   Hero
   --------------------------------------------------------------- */

.reun-hero__eyebrow {
	font-family: var(--wp--preset--font-family--reunionary-ui);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

/* Logo lockup. The artwork is trimmed to the disc, so the image box is the circle. */
.reun-brand .wp-block-image,
.reun-brand .reun-wordmark {
	margin: 0;
}

.reun-brand__mark img {
	border-radius: 0;
	display: block;
	height: auto;
	width: clamp(34px, 3.2vw, 42px);
}

.reun-hero__supporting {
	font-size: var(--wp--preset--font-size--small);
}

/*
 * Layered preview stack. The supplied assets are photographs only, so the
 * browser and phone frames and their captions are built here and in the
 * pattern markup, which keeps every word editable from the Site Editor.
 */
.reun-previews {
	position: relative;
	min-height: 420px;
}

.reun-preview {
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--border-light);
	border-radius: 12px;
	box-shadow: 0 18px 40px rgba(2, 27, 51, 0.16);
	overflow: hidden;
}

/* Browser chrome: a title bar with three dots, drawn rather than shipped as an image. */
.reun-preview--browser::before,
.reun-card__media::before {
	background:
		radial-gradient(circle, #E05B4A 50%, transparent 52%) 12px 50% / 8px 8px no-repeat,
		radial-gradient(circle, #E3B341 50%, transparent 52%) 26px 50% / 8px 8px no-repeat,
		radial-gradient(circle, #4CAF6A 50%, transparent 52%) 40px 50% / 8px 8px no-repeat,
		var(--wp--preset--color--cream-deep);
	border-bottom: 1px solid var(--wp--preset--color--border-light);
	content: "";
	display: block;
	height: 26px;
}

.reun-preview .wp-block-image {
	margin: 0;
}

.reun-preview img {
	aspect-ratio: 16 / 9;
	display: block;
	height: auto;
	object-fit: cover;
	width: 100%;
}

.reun-preview__caption {
	padding: 0.7rem 0.9rem 0.85rem;
}

.reun-preview__title {
	font-family: var(--wp--preset--font-family--reunionary-display);
	font-size: 1.05rem;
	font-weight: 700;
	line-height: 1.15;
	margin: 0;
}

.reun-preview__meta {
	font-size: 0.7rem;
	letter-spacing: 0.08em;
	margin: 0.2rem 0 0;
	text-transform: uppercase;
}

/* Phone frame: portrait crop, thicker bezel, no browser bar. */
.reun-preview--phone {
	background: var(--wp--preset--color--reunionary-navy);
	border: 0;
	border-radius: 20px;
	box-shadow: 0 16px 34px rgba(2, 27, 51, 0.28);
	padding: 5px;
}

.reun-preview--phone img {
	aspect-ratio: 1 / 2;
	border-radius: 16px;
}

@media (min-width: 783px) {
	.reun-previews__desktop {
		position: relative;
		width: 72%;
		z-index: 1;
	}

	.reun-previews__secondary {
		position: absolute;
		top: 6%;
		right: 5%;
		width: 44%;
		z-index: 2;
	}

	.reun-previews__mobile {
		bottom: 2%;
		position: absolute;
		right: 1%;
		width: 16%;
		z-index: 3;
	}
}

/* Stacked: no overlap, so nothing is hidden behind another preview. */
@media (max-width: 782px) {
	.reun-previews {
		align-items: start;
		display: grid;
		gap: var(--wp--preset--spacing--medium);
		grid-template-columns: 1fr 1fr;
		min-height: 0;
	}

	.reun-previews__desktop {
		grid-column: 1 / -1;
	}

	/* The phone frame is twice as tall as it is wide; a full column would dwarf the other two. */
	.reun-previews__mobile {
		justify-self: center;
		max-width: 150px;
	}
}

/* ---------------------------------------------------------------
   Foundation strip
   --------------------------------------------------------------- */

.reun-foundation__item {
	align-items: center;
	display: flex;
	gap: 0.75rem;
	justify-content: flex-start;
}

.reun-foundation__item p {
	margin: 0;
}

.reun-foundation__icon {
	flex: 0 0 auto;
	height: 24px;
	margin: 0;
	width: 24px;
}

.reun-foundation__icon img {
	display: block;
	height: 100%;
	width: 100%;
}

.reun-foundation__icon img,
.reun-foundation__icon svg {
	display: block;
	height: 100%;
	width: 100%;
}

/* 782px is where core unstacks the columns; below it, centering each row independently ragged the icons. */
@media (min-width: 782px) {
	.reun-foundation__item {
		justify-content: center;
	}

	/* Every item sits in its own .wp-block-column, so two items are never adjacent siblings. */
	.reun-foundation .wp-block-column + .wp-block-column .reun-foundation__item {
		border-inline-start: 1px solid var(--wp--preset--color--border-light);
	}
}

/* ---------------------------------------------------------------
   Section scaffolding
   --------------------------------------------------------------- */

/* Anchor targets clear the top edge when jumped to from the navigation. */
[id="showcase"],
[id="reunion-types"],
[id="free-theme"],
[id="pro"] {
	scroll-margin-top: var(--wp--preset--spacing--medium);
}

.reun-section h2,
.reun-section__head h2 {
	text-wrap: balance;
}

.reun-badge {
	font-weight: 600;
	letter-spacing: 0.08em;
	margin: 0;
	text-transform: uppercase;
}

.reun-badge--status::before {
	background: var(--wp--preset--color--reunionary-gold);
	border-radius: 50%;
	content: "";
	display: inline-block;
	height: 7px;
	margin-right: 0.5em;
	vertical-align: 0.1em;
	width: 7px;
}

/* ---------------------------------------------------------------
   Showcase — concept cards and reunion types
   --------------------------------------------------------------- */

.reun-card {
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--border-light);
	border-radius: 12px;
	box-shadow: 0 10px 28px rgba(2, 27, 51, 0.08);
	overflow: hidden;
}

.reun-card__media {
	margin: 0;
}

.reun-card__media img {
	aspect-ratio: 16 / 9;
	border-radius: 0;
	display: block;
	height: auto;
	object-fit: cover;
	width: 100%;
}

.reun-card__body {
	padding: var(--wp--preset--spacing--medium);
}

.reun-card__body h3,
.reun-card__body p {
	margin: 0;
}

.reun-type__media {
	margin: 0 0 0.6rem;
}

.reun-type__media img {
	aspect-ratio: 4 / 3;
	border-radius: 10px;
	display: block;
	height: auto;
	object-fit: cover;
	width: 100%;
}

.reun-type__label {
	font-weight: 600;
	margin: 0;
}

/* auto-fill would leave a sixth empty column at desktop, so pin the five. */
@media (min-width: 1100px) {
	.reun-types {
		grid-template-columns: repeat(5, 1fr);
	}
}

/* ---------------------------------------------------------------
   Free theme — icon features
   --------------------------------------------------------------- */

.reun-feature h3,
.reun-feature p {
	margin: 0;
}

.reun-feature__icon {
	margin: 0 0 0.4rem;
}

.reun-feature__icon img {
	border-radius: 0;
	display: block;
	height: auto;
	width: 44px;
}

/* ---------------------------------------------------------------
   Pro — honest placeholder in place of a screenshot
   --------------------------------------------------------------- */

.reun-pro .reun-list li {
	margin-bottom: 0.4rem;
}

.reun-shot img {
    border: 1px solid var(--wp--preset--color--navy-soft);
    border-radius: 12px;
    display: block;
    width: 100%;
}

/* ---------------------------------------------------------------
   Purpose
   --------------------------------------------------------------- */

.reun-figure {
	margin: 0;
}

.reun-figure img {
	aspect-ratio: 4 / 3;
	display: block;
	height: auto;
	object-fit: cover;
	width: 100%;
}

/* ---------------------------------------------------------------
   Getting Started page
   --------------------------------------------------------------- */

.reun-step__number {
	font-weight: 600;
	letter-spacing: 0.08em;
	margin: 0;
	text-transform: uppercase;
}

.reun-step h2,
.reun-step p {
	margin: 0;
}

.reun-callout {
	border-left: 3px solid var(--wp--preset--color--reunionary-gold);
	border-radius: 8px;
}

/* ---------------------------------------------------------------
   Free vs Pro comparison
   --------------------------------------------------------------- */

.reun-compare {
	margin-left: auto;
	margin-right: auto;
	max-width: 960px;
	overflow-x: auto;
}

.reun-compare table {
	background: var(--wp--preset--color--white);
	border-collapse: collapse;
	border-radius: 12px;
	overflow: hidden;
	width: 100%;
}

.reun-compare th,
.reun-compare td {
	border: 0;
	border-bottom: 1px solid #e6dfd2;
	font-size: var(--wp--preset--font-size--small);
	padding: 0.85rem 1rem;
	text-align: left;
	vertical-align: top;
}

.reun-compare thead th {
	background: var(--wp--preset--color--reunionary-navy);
	border-bottom: 0;
	color: var(--wp--preset--color--soft-cream);
	font-weight: 600;
}

.reun-compare tbody td:first-child {
	color: var(--wp--preset--color--ink);
	font-weight: 600;
	width: 34%;
}

.reun-compare tbody td:last-child {
	background: #fbf6ea;
}

.reun-compare tbody tr:last-child td {
	border-bottom: 0;
}

@media (max-width: 600px) {
	.reun-compare tr {
		display: grid;
		grid-template-columns: 1fr 1fr;
	}

	.reun-compare thead th:first-child {
		display: none;
	}

	.reun-compare tbody td:first-child {
		border-bottom: 0;
		grid-column: 1 / -1;
		padding-bottom: 0.2rem;
		width: auto;
	}

	.reun-compare th,
	.reun-compare td {
		padding: 0.65rem 0.75rem;
	}
}

/* ---------------------------------------------------------------
   Footer navigation
   --------------------------------------------------------------- */

.reun-footer__title {
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.reun-footer__list {
	list-style: none;
	padding-left: 0;
}

.reun-footer__list li {
	margin-bottom: 0.45rem;
}

.reun-footer__list a {
	color: var(--wp--preset--color--soft-cream);
	text-decoration: none;
}

.reun-footer__list a:hover,
.reun-footer__list a:focus-visible {
	text-decoration: underline;
}

.reun-footer__rule {
	border: 0;
	height: 1px;
	opacity: 1;
}

/* ---------------------------------------------------------------
   Focus visibility — gold ring reads on both navy and cream.
   --------------------------------------------------------------- */

a:focus-visible,
button:focus-visible,
.wp-block-button__link:focus-visible,
.wp-block-navigation-item__content:focus-visible {
	outline: 3px solid var(--wp--preset--color--reunionary-gold);
	outline-offset: 2px;
	border-radius: 4px;
}

/* ---------------------------------------------------------------
   "More about ..." links that carry a section through to its page.
   --------------------------------------------------------------- */

.reun-more a {
	font-weight: 600;
	text-decoration: none;
}

/* Skipped when the block already sets a link colour, as it does on navy. */
.reun-more:not(.has-link-color) a {
	color: var(--wp--preset--color--gold-deep);
}

.reun-more a:hover,
.reun-more a:focus-visible {
	text-decoration: underline;
}

/* The navigation link for the page being viewed. Core forces text-decoration
   on navigation links, so the rule is drawn as a bar instead of an underline.
   The bar carries the meaning for anyone who cannot see the weight change. */
.wp-block-navigation .reun-nav-current {
	position: relative;
	font-weight: 700;
}

.wp-block-navigation .reun-nav-current::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: -0.5em;
	left: 0;
	height: 2px;
	background-color: var(--wp--preset--color--reunionary-gold);
}

/* Counts on the Theme page, and step numbers on the Learn page. */
.reun-stat {
	padding: var(--wp--preset--spacing--medium);
	background-color: var(--wp--preset--color--soft-cream);
	border: 1px solid var(--wp--preset--color--border-light);
	border-radius: 12px;
}

.reun-stat__figure {
	font-family: var(--wp--preset--font-family--reunionary-display);
	font-size: clamp(2.4rem, 4vw, 3.2rem);
	line-height: 1;
	font-weight: 700;
}

.reun-stat__figure--small {
	font-size: 1.6rem;
}

/* Numbered install steps. */
.reun-steps {
	padding-left: 1.25em;
}

.reun-steps li {
	margin-bottom: var(--wp--preset--spacing--x-small);
}

/* The build-status line at the foot of a reunion-type card. */
.reun-status {
	margin-top: var(--wp--preset--spacing--x-small);
	padding-top: var(--wp--preset--spacing--x-small);
	border-top: 1px solid var(--wp--preset--color--border-light);
}

/* A single wide card, used for the Getting Started hand-off on Learn. */
.reun-card--feature {
	border-left: 4px solid var(--wp--preset--color--reunionary-gold);
}

/* Availability badges: gold rule for shipped, to separate them from
   the in-development badge, which keeps its dot. */
.reun-badge--ready::before {
	content: "";
	display: inline-block;
	width: 1.4em;
	height: 2px;
	margin-right: 0.5em;
	vertical-align: middle;
	background-color: currentColor;
}