/* ==========================================================================
   Rotary Events
   --------------------------------------------------------------------------
   Colours are Rotary's published palette ("Your Logos at a Glance", April
   2025), exact and unadjusted:

     Rotary Royal Blue  #17458F   PMS 286C
     Azure              #0067C8   PMS 2175C
     Rotary Gold        #F7A81B   PMS 130C

   Gold carries no text on a light background — at 1.9:1 it cannot be read.
   Where gold needs to be a word rather than a shape, --rev-gold-text is used.
   Everything is scoped under .rev, so a form rendered outside that wrapper
   loses every colour on this list.
   ========================================================================== */
/*
 * Declared at root AND on .rev.
 *
 * Scoping the tokens to .rev alone was elegant and kept breaking: any template
 * that renders part of this plugin outside that wrapper loses every colour,
 * and the failure is silent — a button with no background rather than an
 * error. Declaring them at root costs nothing and makes the styling
 * independent of where the markup ends up.
 */
:root,
.rev {
	--rev-royal: #17458F;
	--rev-azure: #0067C8;
	--rev-gold: #F7A81B;
	--rev-gold-text: #9A6100;
	--rev-ink: #16202C;
	--rev-body: #414D5C;
	--rev-muted: #7A8798;
	--rev-rule: #DFD8CE;
	--rev-paper: #FBF9F6;
}

/* ==========================================================================
   Buttons and links
   --------------------------------------------------------------------------
   These were lost when the event list layout was rewritten — the replacement
   spanned further than intended and took the button definition with it. Every
   later edit to "the button" then matched nothing and changed nothing, which
   is why the Register button rendered as a browser default for four releases.

   Gold surface, ink text, royal blue on hover. Gold is never a letter here:
   Rotary Gold on a light page is 1.9:1 and cannot be read.

   Declared for <a>, <button> and <input type=submit>, with literal hex
   alongside every token, so neither a missing wrapper nor a theme's own
   button styling can strip the colour.
   ========================================================================== */
.rev-btn,
a.rev-btn,
button.rev-btn,
input[type="submit"].rev-btn,
form.rev-form button.rev-btn {
	display: inline-block;
	font-family: inherit;
	font-size: .95rem;
	font-weight: 700;
	line-height: 1.2;
	padding: .7rem 1.4rem;
	background: #F7A81B;
	background: var(--rev-gold, #F7A81B);
	color: #16202C !important;
	color: var(--rev-ink, #16202C) !important;
	border: 2px solid #F7A81B;
	border-color: var(--rev-gold, #F7A81B);
	border-radius: 4px;
	text-decoration: none !important;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color .16s, border-color .16s, color .16s;
}
.rev-btn:hover,
a.rev-btn:hover,
button.rev-btn:hover,
form.rev-form button.rev-btn:hover {
	background: #17458F;
	background: var(--rev-royal, #17458F);
	border-color: #17458F;
	border-color: var(--rev-royal, #17458F);
	color: #fff !important;
}
.rev-btn:focus-visible {
	outline: 3px solid #17458F;
	outline: 3px solid var(--rev-royal, #17458F);
	outline-offset: 3px;
}
.rev-btn--lg { font-size: 1.05rem; padding: .9rem 2rem; }

.rev-more {
	font-size: .88rem;
	font-weight: 600;
	white-space: nowrap;
	color: #0067C8;
	color: var(--rev-azure, #0067C8);
}
.rev-closed {
	font-size: .9rem;
	color: #7A8798;
	color: var(--rev-muted, #7A8798);
}

/* ==========================================================================
   Key facts panel, single event
   ========================================================================== */
.rev-key {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 1.5rem 2rem;
	padding: 1.5rem;
	background: var(--rev-paper, #FBF9F6);
	border: 1px solid var(--rev-rule, #DFD8CE);
	border-radius: 10px;
	margin-bottom: 2rem;
}
.rev-key__l {
	display: block;
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .11em;
	text-transform: uppercase;
	color: var(--rev-muted, #7A8798);
	margin-bottom: .3rem;
}
.rev-key__v { display: block; font-weight: 600; color: var(--rev-ink, #16202C); line-height: 1.5; }
.rev-key__sub { font-weight: 400; color: var(--rev-muted, #7A8798); font-size: .92rem; }

.rev__heading { text-align: left; margin: 0 0 1.5rem; }

/*
 * Event list rows.
 *
 * Rewritten because the columns overlapped: the thumbnail, the date and the
 * body were each given a track, but nothing stopped the body from being wider
 * than its track. A grid child defaults to min-width:auto, so long text pushes
 * out of its column and slides under its neighbour instead of wrapping.
 * min-width: 0 on the text column is the whole fix.
 */
.rev-list {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--rev-rule);
	border-radius: 10px;
	overflow: hidden;
}

.rev-item {
	display: grid;
	grid-template-columns: 64px minmax(0, 1fr) auto;
	gap: 1.2rem;
	align-items: center;
	padding: 1.2rem 1.4rem;
	border-bottom: 1px solid var(--rev-rule);
}
.rev-item:last-child { border-bottom: 0; }
.rev-item.has-thumb { grid-template-columns: 74px 64px minmax(0, 1fr) auto; }

.rev-item__thumb {
	display: block;
	border-radius: 6px;
	overflow: hidden;
	border: 1px solid var(--rev-rule);
	align-self: start;
}
.rev-item__thumb img { width: 100%; height: auto; display: block; }

.rev-item__date {
	text-align: center;
	align-self: start;
	padding-top: .15rem;
}
.rev-item__d {
	display: block;
	font-size: 1.8rem;
	font-weight: 800;
	color: var(--rev-royal);
	line-height: 1;
	font-variant-numeric: lining-nums tabular-nums;
}
.rev-item__m {
	display: block;
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--rev-muted);
	margin-top: .25rem;
}

/* The text column. Everything here must be free to wrap. */
.rev-item__body { min-width: 0; }
.rev-item__body h3 { font-size: 1.08rem; margin: 0 0 .3rem; line-height: 1.3; }
.rev-item__body h3 a { color: var(--rev-ink); text-decoration: none; }
.rev-item__body h3 a:hover { color: var(--rev-royal); }
.rev-item__when { font-size: .9rem; color: var(--rev-ink); margin: 0 0 .1rem; font-weight: 600; }
.rev-item__where, .rev-item__fee { font-size: .88rem; color: var(--rev-muted); margin: 0; }
.rev-item__excerpt { font-size: .9rem; color: var(--rev-muted); margin: .45rem 0 0; line-height: 1.55; }

.rev-item__act {
	display: flex;
	flex-direction: column;
	gap: .5rem;
	align-items: flex-end;
	align-self: center;
	white-space: nowrap;
}

@media (max-width: 780px) {
	.rev-item,
	.rev-item.has-thumb { grid-template-columns: 56px minmax(0, 1fr); row-gap: .8rem; }
	.rev-item.has-thumb .rev-item__thumb { display: none; }
	.rev-item__act {
		grid-column: 1 / -1;
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;
		gap: 1.2rem;
	}
}

/* ==========================================================================
   Event page
   --------------------------------------------------------------------------
   Flyer on the left, the facts that decide whether someone comes on the right,
   and the button under them. Everything a reader needs before scrolling.
   ========================================================================== */
/*
 * The event centres itself.
 *
 * Left-aligning a 640px card inside a 1240px container leaves half the screen
 * empty and the page looking like it failed to load. Content that does not
 * fill the width should sit in the middle of it.
 */
.rev-event {
	margin-block: 0 2rem;
	max-width: 1060px;
	margin-inline: auto;
}

.rev-head {
	display: grid;
	grid-template-columns: minmax(0, 400px) minmax(0, 1fr);
	gap: 2.5rem;
	align-items: start;
	margin-bottom: 3rem;
}
/* No flyer: one centred column rather than a card stranded on the left. */
.rev-head--noflyer { grid-template-columns: 1fr; max-width: 680px; margin-inline: auto; }

@media (max-width: 860px) {
	.rev-head { grid-template-columns: 1fr; gap: 1.8rem; }
	.rev-head__flyer { max-width: 420px; margin-inline: auto; }
}

.rev-head__flyer img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: 12px;
	border: 1px solid var(--rev-rule);
	box-shadow: 0 14px 34px rgba(22, 32, 44, .10);
}
.rev-head__tap { font-size: .8rem; color: var(--rev-muted); text-align: center; margin: .7rem 0 0; }

.rev-head__card {
	background: #fff;
	border: 1px solid var(--rev-rule);
	border-radius: 12px;
	padding: 1.8rem;
}

/* The date, given the weight it deserves — it is the fact people are looking
   for, and a numeral reads faster than a sentence. */
.rev-date {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding-bottom: 1.4rem;
	margin-bottom: 1.4rem;
	border-bottom: 1px solid var(--rev-rule);
}
.rev-date__day {
	font-size: 3.4rem;
	font-weight: 800;
	line-height: 1;
	color: var(--rev-royal);
	letter-spacing: -.04em;
	font-variant-numeric: tabular-nums;
}
.rev-date__rest { display: flex; flex-direction: column; }
.rev-date__mon { font-size: 1.05rem; font-weight: 700; color: var(--rev-ink); line-height: 1.2; }
.rev-date__dow { font-size: .9rem; color: var(--rev-muted); }

.rev-facts { margin: 0; display: grid; gap: 1.1rem; }
.rev-facts > div { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 1rem; align-items: start; }
.rev-facts dt {
	font-size: .72rem;
	font-weight: 800;
	letter-spacing: .11em;
	text-transform: uppercase;
	color: var(--rev-muted);
	padding-top: .2rem;
}
.rev-facts dd { margin: 0; color: var(--rev-ink); line-height: 1.5; }
.rev-facts__sub { color: var(--rev-muted); font-size: .92rem; }

@media (max-width: 480px) {
	.rev-facts > div { grid-template-columns: 1fr; gap: .2rem; }
}

.rev-cta { margin-top: 1.6rem; padding-top: 1.4rem; border-top: 1px solid var(--rev-rule); }
.rev-cta__note { font-size: .85rem; color: var(--rev-muted); margin: .6rem 0 0; }

/* ---------- Below the fold ---------- */
.rev-below { max-width: 720px; margin-inline: auto; }
.rev-body { font-size: 1.05rem; line-height: 1.7; }
.rev-body > * + * { margin-top: 1.1rem; }
.rev-body .lead { font-size: 1.15rem; color: var(--rev-ink); }

.rev-prog { margin-top: 2.8rem; }
.rev-prog h2, .rev-contact h2 { font-size: 1.35rem; margin: 0 0 1.2rem; }
.rev-prog ol { list-style: none; padding: 0 0 0 2.2rem; margin: 0; border-left: 2px solid var(--rev-rule); }
.rev-prog li { position: relative; padding-bottom: 1.4rem; display: flex; flex-direction: column; }
.rev-prog li:last-child { padding-bottom: 0; }
.rev-prog li::before {
	content: "";
	position: absolute;
	left: -2.75rem;
	top: .4rem;
	width: 11px; height: 11px;
	border-radius: 50%;
	background: var(--rev-gold);
	box-shadow: 0 0 0 3px var(--rev-paper);
}
.rev-prog__t { font-weight: 800; color: var(--rev-royal); font-size: .95rem; }
.rev-prog__w { color: var(--rev-ink); }

.rev-contact { margin-top: 2.8rem; padding-top: 1.6rem; border-top: 1px solid var(--rev-rule); }
.rev-contact p { margin: 0 0 .3rem; }

.rev-empty {
	background: #FFF6E0;
	border: 1px dashed #C97D00;
	color: #7A5200;
	padding: 1rem 1.2rem;
	border-radius: 6px;
	font-size: .9rem;
}

/* Images an editor pasted into the body anyway — never a floated postage
   stamp in the middle of a paragraph. */
.rev-body img {
	max-width: 100%;
	width: auto;
	height: auto;
	border-radius: 8px;
	display: block;
	margin-inline: auto;
}
/* Never a floated thumbnail mid-paragraph. If an image is worth including it
   is worth its own line. */
.rev-body .alignleft,
.rev-body .alignright,
.rev-body .aligncenter { float: none; margin: 1.6rem auto; display: block; }
.rev-body figure { margin: 1.6rem auto; max-width: 480px; }
.rev-body img.size-thumbnail,
.rev-body img.size-medium { min-width: min(360px, 100%); }

/* ==========================================================================
   Registration form
   ========================================================================== */
.rev-reg-block { margin-top: 2.8rem; padding-top: 1.6rem; border-top: 1px solid var(--rev-rule); }
.rev-reg-block h2 { font-size: 1.35rem; margin: 0 0 1rem; }

.rev-form__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: 1rem 1.2rem;
	align-items: stretch;
}
.rev-form__wide { grid-column: 1 / -1; }
.rev-form__wide > span { min-height: 0; }
/*
 * Inputs line up regardless of how long their labels are.
 *
 * The grid gives every field its own cell and stacks label over input inside
 * it. A label that wraps to two lines therefore pushes its own input a line
 * lower than the ones beside it — which is what "How many of you altogether?"
 * was doing to the whole second row.
 *
 * Each field is a column that pushes its input to the bottom, so the inputs
 * share a baseline whether the label above them is one line or two.
 */
.rev-form label {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	height: 100%;
}
.rev-form label > span {
	display: block;
	font-size: .8rem;
	font-weight: 700;
	letter-spacing: .04em;
	color: var(--rev-ink, #16202C);
	margin-bottom: .35rem;
	/* Two lines' worth, so a one-line label reserves the same space. */
	min-height: 2.4em;
	display: flex;
	align-items: flex-end;
}
.rev-form label em { color: #C0392B; font-style: normal; }
.rev-form input,
.rev-form textarea {
	width: 100%;
	font: inherit;
	font-size: 1rem;
	padding: .7rem .85rem;
	border: 1px solid var(--rev-rule);
	border-radius: 6px;
	background: #fff;
	color: var(--rev-ink);
}
.rev-form input:focus,
.rev-form textarea:focus {
	border-color: var(--rev-royal);
	outline: 2px solid rgba(23,69,143,.15);
}
.rev-form__left { font-weight: 700; color: #C0392B; margin: 0 0 1rem; }
.rev-form__privacy { font-size: .85rem; color: var(--rev-muted); margin: 1.1rem 0 0; }

/* Off-screen rather than display:none — some bots skip hidden fields. */
.rev-form__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.rev-done {
	background: #EDF7EE;
	border: 1px solid #C3E3C6;
	border-radius: 10px;
	padding: 1.5rem;
}
.rev-done__lead { font-size: 1.2rem; font-weight: 800; color: #1E5C25; margin: 0 0 .5rem; }
.rev-done p + p { margin-top: .6rem; }

.rev-alt {
	margin-top: 1.2rem;
	padding-top: 1rem;
	border-top: 1px solid var(--rev-rule);
	font-size: .9rem;
	color: var(--rev-muted);
}
.rev-alt a { font-weight: 600; }

/* ---------- Payment, above the form ---------- */
.rev-pay {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 1.5rem;
	align-items: start;
	background: #fff;
	border: 1px solid var(--rev-rule);
	border-left: 4px solid var(--rev-gold);
	border-radius: 8px;
	padding: 1.3rem 1.5rem;
	margin-bottom: 1.8rem;
}
@media (max-width: 620px) { .rev-pay { grid-template-columns: 1fr; } }
.rev-pay__fee { font-size: 1.25rem; font-weight: 800; color: var(--rev-ink); margin: 0 0 .5rem; }
.rev-pay__text p { margin: 0 0 .5rem; font-size: .95rem; }
.rev-pay__qr { text-align: center; }
.rev-pay__qr img { width: 150px; height: auto; border: 1px solid var(--rev-rule); border-radius: 6px; }
.rev-pay__qr p { font-size: .78rem; color: var(--rev-muted); margin: .4rem 0 0; }
