/**
 * JMAA Brand Kit - styling for the pages the Site Migrator built.
 *
 * Written against the markup Elementor 4 actually renders, checked in a
 * browser against the staging site rather than assumed:
 *
 *   .elementor > .e-con                     a top level section
 *   .e-con.e-atomic-element.e-flexbox-base  every container, nested or not
 *   .elementor-widget-heading .elementor-heading-title
 *   .elementor-widget-text-editor
 *   .elementor-widget-image img
 *   .elementor-widget-button .elementor-button
 *   .jmaa-hero / .jmaa-sec                  classes the migrator writes, which
 *                                           do survive into the rendered page
 *
 * Elementor prints its own per-element rules from uploads/elementor/css, and
 * those load after this file, so the layout declarations here carry
 * !important. Colour and type rules do not need it.
 */

/* ---------- Section rhythm ---------------------------------------------- */

.elementor > .e-con {
	padding-block: clamp(18px, 2.4vw, 30px) !important;
	padding-inline: max(20px, calc((100% - 1080px) / 2)) !important;
	text-align: center;
	align-items: center;
}

/* The original site is white throughout, with thin rules where the author
   placed them. Match that first; colour bands can come later as a choice. */
.elementor > .e-con { background-color: var(--jmaa-white, #fff); }

/* Nested containers are columns inside a section; the section already holds
   the page gutter, so they must not add their own. */
.elementor .e-con .e-con {
	padding-inline: 0 !important;
	padding-block: 0 !important;
}

/* A section whose direct children are containers is a row. 1.10.1: the
   columns shrink to fit beside the gap rather than wrapping, so a row built
   in the editor with two 50% columns stays two columns; phones stack it
   (see the narrow-screen rules below). */
.elementor > .e-con:has(> .e-con) {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: flex-start;
	gap: clamp(20px, 3.4vw, 46px);
}
.elementor > .e-con:has(> .e-con) > .e-con { min-width: 0; flex-shrink: 1; }

/* Elementor 4 containers space their children with a gap that defaults to
   nothing, so a heading sits hard against the photograph above it. */
.elementor .e-con { row-gap: 18px !important; }

/* Spacers came from the original page's gutters and only add dead height. */
.elementor-widget-spacer { display: none; }

/* ---------- Banner ------------------------------------------------------- */
/*
 * The migrator writes the banner as an image widget inside a .jmaa-hero
 * container. Left alone that renders as a thin letterboxed strip, because the
 * source photographs are very wide. These rules lay the image across the whole
 * container and float the title over it, which is how the previous site read.
 */

.elementor > .e-con.jmaa-hero {
	position: relative;
	display: flex !important;
	flex-direction: column !important;
	justify-content: center;
	align-items: center;
	min-height: clamp(320px, 40vw, 560px);
	padding-block: clamp(40px, 6vw, 90px) !important;
	background-color: var(--jmaa-black, #000);
	overflow: hidden;
	text-align: center;
}

.jmaa-hero > .elementor-widget-image {
	position: absolute;
	inset: 0;
	width: 100% !important;
	height: 100%;
	margin: 0;
	z-index: 0;
}

.jmaa-hero > .elementor-widget-image img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: center;
	border-radius: 0;
}

/* A scrim, so white type stays readable over a bright photograph. */
.jmaa-hero::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(180deg, rgba(0,0,0,.30) 0%, rgba(0,0,0,.18) 45%, rgba(0,0,0,.48) 100%);
	pointer-events: none;
}

.jmaa-hero > .elementor-widget-heading {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: 900px;
}

.elementor .e-con.jmaa-hero .elementor-widget-heading .elementor-heading-title {
	/* More specific than the general heading rule below, which also carries
	   !important; without this the banner title went black over the photo. */
	color: #fff !important;
	text-shadow: 0 2px 18px rgba(0, 0, 0, .46);
}

.elementor .e-con.jmaa-hero .elementor-widget-heading h1.elementor-heading-title {
	font-size: clamp(1.9rem, 3.4vw, 2.9rem);
	font-weight: 400;
	line-height: 1.15;
	letter-spacing: 0;
	margin: 0 0 14px;
}

.elementor .e-con.jmaa-hero .elementor-widget-heading h2.elementor-heading-title {
	font-size: clamp(.8rem, 1.2vw, 1.05rem);
	font-weight: 700;
	letter-spacing: .32em;
	text-transform: uppercase;
	color: #fff !important;
	margin: 0;
}

/* ---------- Headings ----------------------------------------------------- */

.elementor .elementor-widget-heading .elementor-heading-title {
	/* Elementor's kit paints headings with its "primary" global colour, which
	   on the staging site is gold. The original's headings are black. */
	color: var(--jmaa-ink, #121212) !important;
	font-family: var(--jmaa-font-head, system-ui, sans-serif);
}

.elementor > .e-con > .elementor-widget-heading h1.elementor-heading-title,
.elementor .e-con .elementor-widget-heading h1.elementor-heading-title {
	font-size: clamp(1.6rem, 2.8vw, 2.4rem);
	font-weight: 700;
	line-height: 1.18;
	margin-bottom: .4em;
}

.elementor .elementor-widget-heading h2.elementor-heading-title {
	font-size: clamp(.86rem, 1.2vw, 1.02rem);
	font-weight: 600;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--jmaa-ink, #121212);
	margin-bottom: .9em;
}

.elementor .elementor-widget-heading h3.elementor-heading-title {
	font-size: clamp(1.02rem, 1.5vw, 1.24rem);
	font-weight: 700;
	letter-spacing: .01em;
}

/* ---------- Body copy ---------------------------------------------------- */

.elementor-widget-text-editor {
	/* Elementor sets max-width:100% on every widget, so this needs the flag.
	   The original site held body copy to about 700px. */
	max-width: min(100%, 76ch) !important;
	margin-inline: auto;
	color: var(--jmaa-ink, #121212);
	font-size: clamp(.98rem, 1.05vw, 1.06rem);
	line-height: 1.72;
}

.elementor-widget-text-editor p { margin-block: 0 1.05em; }
.elementor-widget-text-editor p:last-child { margin-bottom: 0; }

.elementor-widget-text-editor a {
	color: var(--jmaa-gold-dark, #D99F00);
	text-decoration: underline;
	text-underline-offset: 2px;
}
.elementor-widget-text-editor a:hover { color: var(--jmaa-ink, #121212); }

/* Inside a column the copy is already narrow, so let it fill. */
.elementor .e-con .e-con .elementor-widget-text-editor { max-width: 100% !important; }

/* ---------- Images ------------------------------------------------------- */
/*
 * Without a cap a 400px crest renders at the full column width. The original
 * site sized images to their column, so hold them to something sensible and
 * let the column decide the rest.
 */

.elementor-widget-image {
	text-align: center;
	margin-bottom: 18px;
}

.elementor-widget-image img {
	max-width: min(100%, 560px);
	height: auto;
	border-radius: 2px;
}

/* A photograph inside a column, and a captioned card, were sized to their
   column on the original rather than stretched across it. */
.elementor .e-con .e-con .elementor-widget-image img { max-width: min(100%, 420px); }

/* A photograph that carries a title and story beneath it was a modest float
   on the original, not a full-width picture. */
.elementor-widget-image:has(+ .elementor-widget-heading + .elementor-widget-text-editor) img { max-width: min(100%, 340px); }

/* A crest or badge is a mark, not a photograph. Written to outrank the
   column-photo cap above, which otherwise wins once columns stack on a phone. */
.elementor .e-con .elementor-widget-image img[src*="seal"],
.elementor .e-con .elementor-widget-image img[src*="crest"],
.elementor .e-con .elementor-widget-image img[src*="logo"] {
	max-width: min(100%, 200px) !important;
}

/* Captions carry real content on these pages - class years on Reunions, the
   honouree lists on The Wall - so they need to read as text, not a footnote. */
.elementor-widget-image figcaption,
.elementor-image-caption,
.widget-image-caption {
	margin-top: 12px;
	color: var(--jmaa-ink, #121212);
	font-size: .88rem;
	line-height: 1.55;
	text-align: center;
	max-width: 62ch;
	margin-inline: auto;
}

/* ---------- Buttons ------------------------------------------------------ */

.elementor-widget-button .elementor-button {
	display: inline-block;
	padding: 16px 30px;
	background-color: var(--jmaa-black, #000);
	color: #fff;
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	text-decoration: none;
	border: 0;
	border-radius: 3px;
	transition: background-color .18s ease, transform .18s ease;
}

.elementor-widget-button .elementor-button:hover,
.elementor-widget-button .elementor-button:focus-visible {
	background-color: var(--jmaa-gold, #FFC20E);
	color: #111;
	transform: translateY(-1px);
}

.jmaa-hero .elementor-widget-button .elementor-button {
	background-color: var(--jmaa-gold, #FFC20E);
	color: #111;
}

/* ---------- Dividers ----------------------------------------------------- */

.elementor-widget-divider {
	max-width: 1080px;
	margin-inline: auto;
	width: 100%;
}

.elementor-widget-divider .elementor-divider-separator {
	border-top: 1px solid var(--jmaa-grey-light, #E4E5E7);
}

/* ---------- Galleries ---------------------------------------------------- */

.elementor-widget-image-gallery .gallery { gap: 14px; }

.elementor-widget-image-gallery .gallery-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 3px;
	transition: transform .22s ease;
}

.elementor-widget-image-gallery .gallery-item img:hover { transform: scale(1.02); }

/* ---------- Narrow screens ----------------------------------------------- */

@media (max-width: 880px) {
	.elementor > .e-con:has(> .e-con) { flex-direction: column; flex-wrap: wrap; }
	.elementor .e-con .e-con { width: 100% !important; }
}

@media (prefers-reduced-motion: reduce) {
	.elementor-widget-button .elementor-button,
	.elementor-widget-image-gallery .gallery-item img { transition: none; }
}