/*
 * ILMA Blocks
 *
 * Every block is scoped under .ilma-block so nothing here can reach the rest of
 * ilma.org. Colours are declared once as custom properties below; the Style tab
 * on each widget overrides them per instance, and the child theme can override
 * them globally by redeclaring .ilma-block.
 *
 * Defaults are the values already in use on the live site (custom.css), not the
 * near-identical ones from the media kit mockup, so these blocks match the rest
 * of the site rather than sitting a shade off it.
 */

.ilma-block {
	--ilma-red: #cb1335;
	--ilma-red-dark: #a90f2c;
	--ilma-navy: #1b487b;
	--ilma-ink: #434343;
	--ilma-muted: #6d7278;
	--ilma-border: #dfe2e5;
	--ilma-surface: #ffffff;
	--ilma-surface-alt: #f5f6f7;
	--ilma-tint-navy: #e8f3f8;
	--ilma-tint-red: #fbe8ec;

	/*
	 * The gold of the oil-drop artwork on the ILMA.org home page, sampled from
	 * the brightest part of the drop. Too light for text or for a boundary that
	 * carries meaning on white (about 1.8:1), so it is used as a fill behind dark
	 * text and as decoration, never as the only signal.
	 */
	--ilma-gold: #f4b728;
	--ilma-tint-gold: #fef6e5;

	box-sizing: border-box;
	color: var(--ilma-ink);
}

.ilma-block *,
.ilma-block *::before,
.ilma-block *::after {
	box-sizing: inherit;
}

/* Visible to screen readers, not to the eye. */
.ilma-u-visually-hidden {
	clip-path: inset(50%);
	height: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

/* ----------------------------------------------------- Editor placeholder -- */

/*
 * An unconfigured widget still emits this one element rather than nothing.
 * A widget that renders nothing leaves an empty `.elementor-widget-container`,
 * and editor or addon scripts that walk the tree looking for a child node to
 * attach controls to then operate on null — repeatedly, because the editor
 * re-renders continually. The element is hidden on the front end, so visitors
 * see nothing either way.
 */
.ilma-placeholder {
	display: none;
}

.elementor-editor-active .ilma-placeholder,
.elementor-edit-mode .ilma-placeholder {
	background: var(--ilma-surface-alt);
	border: 1px dashed var(--ilma-border);
	color: var(--ilma-muted);
	display: block;
	font-size: 0.9rem;
	padding: 1.25rem;
	text-align: center;
}

/* ---------------------------------------------------------------- Badges -- */

.ilma-badge {
	background: var(--ilma-tint-navy);
	border-radius: 2px;
	color: var(--ilma-navy);
	display: inline-block;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	line-height: 1.3;
	padding: 0.28em 0.5em;
	text-transform: uppercase;
}

.ilma-badge--red {
	background: var(--ilma-tint-red);
	color: var(--ilma-red-dark);
}

.ilma-badge--navy {
	background: var(--ilma-tint-navy);
	color: var(--ilma-navy);
}

/* --------------------------------------------------------- Anchor menu -- */

.ilma-anchor-nav {
	--ilma-nav-bg: var(--ilma-surface);
	--ilma-nav-link: var(--ilma-ink);
	--ilma-nav-active: var(--ilma-red);

	background: var(--ilma-nav-bg);
	border-bottom: 1px solid var(--ilma-border);
	width: 100%;
}

/*
 * The pinning goes on the outermost builder wrapper around the menu, not on the
 * menu itself. `position: sticky` only travels within its containing block, and
 * a widget's containing block in Elementor is `.elementor-widget-container`,
 * which is exactly as tall as the widget — so a sticky <nav> gets zero travel
 * and never appears to pin. The script applies this class to the wrapper, whose
 * containing block is the page content and therefore has the whole document to
 * travel through.
 *
 * z-index sits below the site header's 11 so the header always wins if the two
 * ever overlap mid-transition.
 */
.ilma-anchor-nav-host {
	position: sticky;
	top: var(--ilma-header-offset, 0px);
	z-index: 10;
}

/*
 * An ancestor of the pinned wrapper with a non-visible overflow would become its
 * scroll container, confining it to that ancestor instead of the viewport.
 * `clip` clips identically but creates no scroll container. !important is
 * required because the theme's `.elementor-section { overflow: hidden }` in
 * custom.css is authored at the same specificity and cannot be reached
 * otherwise.
 */
.ilma-sticky-ancestor {
	overflow: clip !important;
}

.ilma-anchor-nav__list {
	display: flex;
	gap: 0.15rem;
	list-style: none;
	margin: 0;
	overflow-x: auto;
	padding: 0;
	scrollbar-width: thin;
}

.ilma-anchor-nav__item {
	flex: 0 0 auto;
	margin: 0;
}

.ilma-anchor-nav__link {
	border-bottom: 3px solid transparent;
	color: var(--ilma-nav-link);
	display: block;
	font-size: 0.9rem;
	font-weight: 700;
	line-height: 1.2;
	padding: 0.85rem 0.85rem 0.6rem;
	text-decoration: none;
	white-space: nowrap;
}

.ilma-anchor-nav__link:hover,
.ilma-anchor-nav__link:focus-visible {
	border-bottom-color: var(--ilma-nav-active);
	color: var(--ilma-nav-active);
}

/*
 * The active link is marked by colour, a weight change and an underline rule,
 * never by colour alone.
 */
.ilma-anchor-nav__link.is-active {
	border-bottom-color: var(--ilma-nav-active);
	color: var(--ilma-nav-active);
}

.ilma-anchor-nav__link:focus-visible {
	outline: 2px solid var(--ilma-nav-active);
	outline-offset: -2px;
}

/* -------------------------------------------------------------- Tables -- */

.ilma-table {
	--ilma-table-head-bg: var(--ilma-navy);
	--ilma-table-head-color: #ffffff;
	--ilma-table-link: var(--ilma-navy);

	width: 100%;
}

.ilma-table__table {
	background: var(--ilma-surface);
	border-collapse: collapse;
	font-size: 0.92rem;
	width: 100%;
}

.ilma-table__caption {
	caption-side: top;
	font-weight: 700;
	margin-bottom: 0.6rem;
	text-align: left;
}

.ilma-table__table th[scope="col"] {
	background: var(--ilma-table-head-bg);
	color: var(--ilma-table-head-color);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	padding: 0.85rem 0.75rem;
	text-align: left;
	text-transform: uppercase;
	vertical-align: bottom;
}

.ilma-table__cell {
	border-bottom: 1px solid var(--ilma-border);
	padding: 0.8rem 0.75rem;
	text-align: left;
	vertical-align: top;
}

.ilma-table__table th.ilma-table__cell {
	font-weight: 700;
}

.ilma-table__col--center { text-align: center; }
.ilma-table__col--right { text-align: right; }

.ilma-table--zebra tbody tr:nth-child(even) {
	background: var(--ilma-surface-alt);
}

.ilma-table__row--highlight {
	background: var(--ilma-tint-navy) !important; /* wins over the zebra shading above. */
}

.ilma-table__cell .ilma-badge {
	margin-top: 0.4rem;
}

.ilma-table__value {
	display: block;
}

/*
 * Cell links.
 *
 * Underlined, not coloured only: the underline is what identifies the link to
 * anyone who cannot pick it out from the surrounding text by hue (1.4.1). The
 * inline-block and vertical padding keep the target at least 24px tall (2.5.8),
 * which matters here because a linked cell is usually a link on its own rather
 * than one inside a sentence.
 */
.ilma-table__link {
	color: var(--ilma-table-link);
	display: inline-block;
	line-height: 1.5;
	padding: 0.15rem 0;
	text-decoration: underline;
}

.ilma-table__link:hover,
.ilma-table__link:focus {
	color: var(--ilma-red-dark);
}

.ilma-table__link:focus-visible {
	outline: 2px solid var(--ilma-navy);
	outline-offset: 2px;
}

/*
 * A cell's second link, on a line of its own. Each focus outline reaches 4px
 * beyond its link (2px offset, 2px width), so a gap over 8px keeps the pair's
 * outlines from touching and leaves no doubt which of the two has focus.
 */
.ilma-table__link-line {
	display: block;
	margin-top: 0.6rem;
}

/*
 * The file format and weight on a download link. It sits inside the anchor on
 * purpose: it belongs to the link's accessible name, so the link announces as
 * "2026 media kit (PDF, 2.4 MB)" and reads the same way in a screen reader's
 * list of links. It inherits the link colour rather than being greyed out —
 * muted grey would drop under 4.5:1 against a shaded zebra row at this size.
 */
.ilma-table__file-meta {
	font-size: 0.85em;
	white-space: nowrap;
}

/*
 * The column name inside each cell. Hidden — and therefore absent from the
 * accessibility tree — while the real <th scope="col"> is still associating
 * headers with cells. The card breakpoints below turn it back on.
 */
.ilma-table__label {
	display: none;
}

/*
 * Included / not-included marks in comparison tables. Colour is a secondary
 * signal only: the glyph differs, and a visually hidden text label sits beside
 * it for anyone not reading the symbol.
 */
.ilma-mark {
	font-weight: 700;
}

.ilma-mark--yes {
	color: var(--ilma-red);
}

.ilma-mark--no {
	color: var(--ilma-muted);
}

/* Space a mark from any qualifying text that follows it in the same cell. */
.ilma-mark + * {
	margin-left: 0.35em;
}

.ilma-table__note {
	color: var(--ilma-muted);
	font-size: 0.84rem;
	margin: 0.75rem 0 0;
}

/* Sideways-scroll mode. */
.ilma-table--scroll .ilma-table__scroll {
	border: 1px solid var(--ilma-border);
	overflow-x: auto;
}

.ilma-table--scroll .ilma-table__table {
	min-width: 46rem;
}

/* The scroll container is focusable, so it must show that focus. */
.ilma-table__scroll:focus-visible {
	outline: 2px solid var(--ilma-navy);
	outline-offset: 2px;
}

/*
 * Card layout.
 *
 * Switching the table elements to `display: block` is what drops the grid
 * semantics, which is why each cell carries its own visible label below this
 * breakpoint — read linearly, a row becomes "February / Ad close: Dec. 12,
 * 2025". Nothing scrolls sideways, so this reflows cleanly at 320px.
 *
 * The rules are written out once per breakpoint because plain CSS has no way
 * to share a block between two media queries without a build step, and client
 * sites here do not have one. Keep the two blocks in sync.
 */
@media (max-width: 1024px) {
	.ilma-table--cards-tablet .ilma-table__table,
	.ilma-table--cards-tablet .ilma-table__table tbody,
	.ilma-table--cards-tablet .ilma-table__table tr,
	.ilma-table--cards-tablet .ilma-table__cell {
		display: block;
		width: auto;
	}

	.ilma-table--cards-tablet .ilma-table__table thead {
		display: none;
	}

	.ilma-table--cards-tablet .ilma-table__table tr {
		background: var(--ilma-surface);
		border: 1px solid var(--ilma-border);
		border-top: 4px solid var(--ilma-navy);
		margin-bottom: 1rem;
		padding: 0.35rem 0.25rem;
	}

	.ilma-table--cards-tablet .ilma-table__cell {
		border-bottom: 0;
		padding: 0.5rem 0.85rem;
		text-align: left;
	}

	.ilma-table--cards-tablet .ilma-table__cell:not(:last-child) {
		border-bottom: 1px dotted var(--ilma-border);
	}

	.ilma-table--cards-tablet .ilma-table__cell--empty {
		display: none;
	}

	.ilma-table--cards-tablet .ilma-table__label {
		color: var(--ilma-muted);
		display: block;
		font-size: 0.72rem;
		font-weight: 700;
		letter-spacing: 0.06em;
		text-transform: uppercase;
	}

	.ilma-table--cards-tablet .ilma-table__value {
		margin-top: 0.15rem;
	}
}

@media (max-width: 767px) {
	.ilma-table--cards-phone .ilma-table__table,
	.ilma-table--cards-phone .ilma-table__table tbody,
	.ilma-table--cards-phone .ilma-table__table tr,
	.ilma-table--cards-phone .ilma-table__cell {
		display: block;
		width: auto;
	}

	.ilma-table--cards-phone .ilma-table__table thead {
		display: none;
	}

	.ilma-table--cards-phone .ilma-table__table tr {
		background: var(--ilma-surface);
		border: 1px solid var(--ilma-border);
		border-top: 4px solid var(--ilma-navy);
		margin-bottom: 1rem;
		padding: 0.35rem 0.25rem;
	}

	.ilma-table--cards-phone .ilma-table__cell {
		border-bottom: 0;
		padding: 0.5rem 0.85rem;
		text-align: left;
	}

	.ilma-table--cards-phone .ilma-table__cell:not(:last-child) {
		border-bottom: 1px dotted var(--ilma-border);
	}

	.ilma-table--cards-phone .ilma-table__cell--empty {
		display: none;
	}

	.ilma-table--cards-phone .ilma-table__label {
		color: var(--ilma-muted);
		display: block;
		font-size: 0.72rem;
		font-weight: 700;
		letter-spacing: 0.06em;
		text-transform: uppercase;
	}

	.ilma-table--cards-phone .ilma-table__value {
		margin-top: 0.15rem;
	}
}

/* ------------------------------------------------------- Pricing cards -- */

.ilma-cards {
	--ilma-cards-columns: 3;
	--ilma-card-accent: var(--ilma-navy);
	--ilma-card-price: var(--ilma-red);

	display: grid;
	gap: 1rem;
	grid-template-columns: repeat(var(--ilma-cards-columns), minmax(0, 1fr));
}

.ilma-card {
	background: var(--ilma-surface);
	border: 1px solid var(--ilma-border);
	border-top: 4px solid var(--ilma-card-accent);
	display: flex;
	flex-direction: column;
	min-width: 0;
	padding: 1.4rem;
}

/*
 * .ilma-card is a column flex container, so its children stretch to the full
 * card width by default. The badge should be only as wide as its own text.
 */
.ilma-card > .ilma-badge {
	align-self: flex-start;
}

.ilma-card__title {
	font-size: 1.4rem;
	line-height: 1.15;
	margin: 0.6rem 0 0;
}

.ilma-card .ilma-badge + .ilma-card__title {
	margin-top: 0.7rem;
}

.ilma-card__price {
	color: var(--ilma-card-price);
	font-size: 1.15rem;
	font-weight: 700;
	margin: 0.7rem 0 0.4rem;
}

.ilma-card__description {
	margin: 0;
}

.ilma-card__action {
	margin: 1rem 0 0;
}

.ilma-card__link {
	color: var(--ilma-red);
	font-weight: 700;
	text-underline-offset: 0.18em;
}

.ilma-card__link:hover,
.ilma-card__link:focus-visible {
	color: var(--ilma-red-dark);
	text-decoration: underline;
}

/* ------------------------------------------------------- Package cards -- */

.ilma-packages {
	--ilma-packages-columns: 4;
	--ilma-package-accent: var(--ilma-navy);
	--ilma-package-price: var(--ilma-red);
	--ilma-package-featured: var(--ilma-gold);
	--ilma-package-featured-text: var(--ilma-ink);

	display: grid;
	gap: 1rem;
	grid-template-columns: repeat(var(--ilma-packages-columns), minmax(0, 1fr));
}

.ilma-package {
	background: var(--ilma-surface);
	border: 1px solid var(--ilma-border);
	border-top: 4px solid var(--ilma-package-accent);
	display: flex;
	flex-direction: column;
	min-width: 0;
	padding: 1.4rem;
}

/*
 * The second background declaration tints with whatever featured colour the
 * Style tab sets. A browser without color-mix() discards it at parse time and
 * keeps the fixed gold tint above it.
 */
.ilma-package--featured {
	background: var(--ilma-tint-gold);
	background: color-mix(in srgb, var(--ilma-package-featured) 12%, var(--ilma-surface));
	border-color: var(--ilma-package-featured);
}

/*
 * The featured label follows the name in the source, so it is read after the
 * heading, and is moved to the top of the card here. In the aligned layout
 * below, grid-row does the same job.
 */
.ilma-package__flag {
	margin: 0 0 0.7rem;
	order: -1;
}

/*
 * Without this the theme's line height sizes the paragraph around the badge,
 * which in the aligned layout leaves that much empty space at the top of every
 * card on the row.
 */
.ilma-packages .ilma-package__flag {
	line-height: 1;
}

.ilma-badge--featured {
	background: var(--ilma-package-featured);
	color: var(--ilma-package-featured-text);
}

.ilma-package__name {
	font-size: 1.4rem;
	line-height: 1.15;
	margin: 0;
}

.ilma-package__price {
	color: var(--ilma-package-price);
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1.2;
	margin: 0.6rem 0 0;
}

.ilma-package__tagline {
	font-weight: 700;
	margin: 0.2rem 0 0;
}

.ilma-package__value {
	margin: 0.7rem 0 0;
}

.ilma-package__savings {
	color: var(--ilma-navy);
	font-weight: 700;
	margin: 0.1rem 0 0;
}

/*
 * Body text in the card is set tight on purpose. The site theme's line height
 * on paragraphs and list items (33.75px on 18px text on staging, about 1.9)
 * made every wrapped tagline and list item take double the height. 1.4 is
 * roughly what the pricing cards render at on the same page. Two classes so
 * it outranks the theme's own p and li rules.
 */
.ilma-packages .ilma-package__tagline,
.ilma-packages .ilma-package__value,
.ilma-packages .ilma-package__savings,
.ilma-packages .ilma-package__features li {
	line-height: 1.4;
}

.ilma-package__features {
	border-top: 1px solid var(--ilma-border);
	margin: 1rem 0 0;
	padding: 1rem 0 0 1.2rem;
}

/*
 * UiCore's uicore-global.css removes the markers from every list that has a
 * class: `ul[class]:not(.wp-block-list) { list-style-type: none }`, which has
 * a specificity of (0,2,1). This selector is (0,3,1), so it wins whichever
 * stylesheet loads first, without !important. The shorthand also resets
 * list-style-image and list-style-position in case the theme sets those too.
 */
.ilma-packages .ilma-package ul.ilma-package__features {
	list-style: disc outside;
}

.ilma-package--featured .ilma-package__features {
	border-top-color: var(--ilma-package-featured);
}

.ilma-package__features li {
	margin: 0;
	padding: 0;
}

.ilma-package__features li + li {
	margin-top: 0.35rem;
}

.ilma-package__features li::marker {
	color: var(--ilma-package-accent);
}

/*
 * Whole-card link ("stretched link").
 *
 * The package name is the only real link. Its ::after is stretched over the
 * card, so a click anywhere on the card follows it, while the link's
 * accessible name stays the package name alone. The card is the positioning
 * context for that pseudo-element.
 */
.ilma-package--linked {
	position: relative;
}

.ilma-package__link {
	color: inherit;
	text-decoration: none;
}

.ilma-package__link::after {
	content: "";
	inset: 0;
	position: absolute;
	z-index: 1;
}

.ilma-package--linked:hover {
	border-color: var(--ilma-package-accent);
	box-shadow: 0 6px 18px rgba(27, 72, 123, 0.16);
}

.ilma-package--featured.ilma-package--linked:hover {
	border-color: var(--ilma-package-featured);
}

.ilma-package--linked:hover .ilma-package__link,
.ilma-package__link:focus-visible {
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

/*
 * The focus ring moves from the name to the whole card, because the card is
 * what activates. It is drawn just inside the card's edge rather than outside
 * it: the site's custom.css sets overflow: hidden on Elementor sections, which
 * would clip a ring drawn outside a card sitting against the section edge.
 * An outline rather than a box-shadow, so it still shows in forced-colours
 * (Windows high contrast) mode.
 */
.ilma-package__link:focus-visible {
	outline: none;
}

.ilma-package__link:focus-visible::after {
	outline: 3px solid var(--ilma-navy);
	outline-offset: -3px;
}

/*
 * Aligned rows. Each card becomes a subgrid spanning seven of the parent's row
 * tracks, one per field, so every price, tagline and list on a grid row starts
 * at the same height. Each field is pinned to its own track, so a card that
 * leaves one empty keeps its other fields level with its neighbours. A
 * browser without subgrid keeps the flex layout above: equal-height cards,
 * fields not lined up, nothing broken.
 */
@supports (grid-template-rows: subgrid) {
	.ilma-packages--aligned .ilma-package {
		display: grid;
		grid-row: span 7;
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: subgrid;
		row-gap: 0;
	}

	.ilma-packages--aligned .ilma-package__flag {
		grid-row: 1;
	}

	.ilma-packages--aligned .ilma-package__name {
		grid-row: 2;
	}

	.ilma-packages--aligned .ilma-package__price {
		grid-row: 3;
	}

	.ilma-packages--aligned .ilma-package__tagline {
		grid-row: 4;
	}

	.ilma-packages--aligned .ilma-package__value {
		grid-row: 5;
	}

	.ilma-packages--aligned .ilma-package__savings {
		grid-row: 6;
	}

	.ilma-packages--aligned .ilma-package__features {
		grid-row: 7;
	}
}

/* ------------------------------------------------------------ Callouts -- */

.ilma-callout {
	--ilma-callout-tint: var(--ilma-tint-navy);
	--ilma-callout-rule: var(--ilma-navy);

	background: var(--ilma-callout-tint);
	border-left: 5px solid var(--ilma-callout-rule);
	padding: 1rem 1.15rem;
}

.ilma-callout--red {
	--ilma-callout-tint: var(--ilma-tint-red);
	--ilma-callout-rule: var(--ilma-red);
}

.ilma-callout--neutral {
	--ilma-callout-tint: var(--ilma-surface-alt);
	--ilma-callout-rule: var(--ilma-muted);
}

.ilma-callout__title {
	font-size: 1.15rem;
	margin: 0 0 0.4rem;
}

.ilma-callout__body > *:first-child { margin-top: 0; }
.ilma-callout__body > *:last-child { margin-bottom: 0; }

/* ------------------------------------------------------------- Motion -- */

@media (prefers-reduced-motion: reduce) {
	.ilma-block,
	.ilma-block *,
	.ilma-block *::before,
	.ilma-block *::after {
		transition: none !important;
	}
}

/* -------------------------------------------------------------- Print -- */

@media print {
	.ilma-anchor-nav {
		display: none;
	}

	.ilma-table__scroll {
		overflow: visible;
	}

	.ilma-table__table {
		min-width: 0;
	}

	.ilma-card,
	.ilma-package,
	.ilma-callout,
	.ilma-table__table tr {
		break-inside: avoid;
	}
}