/**
 * Monster HQ design tokens.
 *
 * THE @font-face BELOW IS LOAD-BEARING.
 * PAGKAKI is a custom font uploaded through Divi (wp-content/uploads/et-fonts).
 * Divi only emits its @font-face on pages where a Divi module explicitly picks
 * that font from its own font list — and Divi's list does not contain it in a
 * form our loop modules can select. So on the Cast page the family resolved
 * correctly in CSS and still rendered as Helvetica, because the face was never
 * declared. Declaring it here, once, everywhere, is what actually makes the
 * brand face appear. The URL is Divi's own upload path; if the font is ever
 * re-uploaded, update this src.
 *
 * One place for the type and colour every front-end surface shares — the
 * performer dashboard, the events list, the cast grid, the bookings block and
 * the public event page. Before this, each stylesheet made its own decisions
 * and the pages drifted apart; anything that wants to look like the rest of the
 * site now reads from here.
 *
 * Body copy was set at 14px in a mid grey on black, which measured fine and was
 * genuinely hard to read. It is now 16px/600 Poppins at a contrast that holds up
 * on a dark background.
 */

/* ROOT-RELATIVE ON PURPOSE.
 *
 * This used to point at https://monsterdragevents.com/... — the server's own
 * directory name, not the domain the site is served from. Fonts are subject to
 * CORS, so the browser fetched it, found no Access-Control-Allow-Origin, and
 * discarded it: document.fonts reported "PAGKAKI Regular: error" and every
 * heading fell back to Helvetica while LOOKING correct in the computed styles.
 * That is the whole reason the brand face kept not appearing.
 *
 * A root-relative URL is always same-origin, whatever domain is serving. */

@font-face {
	font-family: "PAGKAKI Regular";
	font-display: swap;
	src: url("/wp-content/uploads/et-fonts/PAGKAKI-Regular.woff2") format("woff2"),
	     url("/wp-content/uploads/et-fonts/PAGKAKI-Regular.woff") format("woff"),
	     url("/wp-content/uploads/et-fonts/PAGKAKI-Regular.otf") format("opentype");
}

/* Divi's own name for the same upload. Declared too, so a rule written against
   either spelling resolves to the same file rather than silently falling back. */
@font-face {
	font-family: "PAGKAKI";
	font-display: swap;
	src: url("/wp-content/uploads/et-fonts/PAGKAKI-Regular.woff2") format("woff2"),
	     url("/wp-content/uploads/et-fonts/PAGKAKI-Regular.woff") format("woff"),
	     url("/wp-content/uploads/et-fonts/PAGKAKI-Regular.otf") format("opentype");
}

:root {
	/* Type */
	--mpr-font-body: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

	/* The brand display face. Loaded by the theme as an @font-face named
	   exactly "PAGKAKI Regular" — the name has to match that declaration
	   character for character or the browser silently falls back to Helvetica. */
	--mpr-font-display: "PAGKAKI", "PAGKAKI Regular", Helvetica, Arial, Lucida, sans-serif;
	--mpr-font-size: 16px;
	--mpr-font-weight: 600;
	--mpr-line-height: 1.25;

	/* Colour — tuned for the dark theme these pages actually live on */
	--mpr-text: #F2F2F2;      /* body copy: near-white, not pure white */
	--mpr-text-muted: #C4C4C4; /* secondary: still comfortably readable */
	--mpr-accent: #ED2124;
	--mpr-surface: #000000;
	--mpr-line: rgba(255, 255, 255, .18);
}

/* Every Monster HQ front-end surface. Scoped to our own containers so the rest
   of the site is untouched. */
.mpr-dashboard,
.mpr-ev-list,
.mpr-cast-grid,
.mpr-bookings-block,
.mpr-event,
.mpr-claim {
	font-family: var(--mpr-font-body);
	font-size: var(--mpr-font-size);
	font-weight: var(--mpr-font-weight);
	line-height: var(--mpr-line-height);
	color: var(--mpr-text);
}

/* Paragraphs and secondary text inherit the same scale rather than shrinking
   away — the "faint and small" problem was these two rules disagreeing. */
.mpr-dashboard p,
.mpr-bookings-block p,
.mpr-event p {
	font-size: var(--mpr-font-size);
	font-weight: var(--mpr-font-weight);
	line-height: var(--mpr-line-height);
	color: var(--mpr-text);
}

.mpr-dashboard .description,
.mpr-section-intro,
.mpr-booking-meta,
.mpr-cast-tagline,
.mpr-ev-desc,
.mpr-ev-location,
.mpr-ev-datetime {
	color: var(--mpr-text-muted);
	opacity: 1; /* opacity was doing the fading; colour does it deliberately now */
}

/* Form controls should read as the same family, not the browser default. */
.mpr-dashboard input,
.mpr-dashboard select,
.mpr-dashboard textarea,
.mpr-claim input {
	font-family: var(--mpr-font-body);
	font-size: var(--mpr-font-size);
	line-height: var(--mpr-line-height);
}

.mpr-dashboard label {
	color: var(--mpr-text);
}


/* ─── Every H1 on the site ────────────────────────────────────────────────
   One rule rather than a list of page-by-page exceptions. A page title is a
   page title wherever it appears, and the brand face is the whole point of
   having one.

   Scoped away from the admin bar and the builder's own chrome — those are
   interface, not content, and a display face there is unreadable at 12px. */

body:not(.wp-admin) h1,
h1.entry-title,
.et_pb_title_container h1,
.et_pb_heading h1,
.et_pb_text h1,
.et_pb_module h1 {
	font-family: var(--mpr-font-display) !important;
	color: #FFFFFF !important;
	letter-spacing: .01em;
}

/* The Theme Builder's own title module wins the first round.
 *
 * Divi prints its per-module CSS AFTER plugin stylesheets and uses !important
 * on the colour, so an equally specific !important from us loses on source
 * order alone — which is why every Divi-rendered page title (the Gallery page,
 * Culture, Experiences) rendered in the accent red while our own templates were
 * correctly white. Two classes plus the element outrank it regardless of order. */

body:not(.wp-admin) .et_pb_title_container h1.entry-title,
body:not(.wp-admin) .et_pb_post_title h1.entry-title,
body:not(.wp-admin) .et_pb_title_container h1,
body:not(.wp-admin) article h1.entry-title,
body:not(.wp-admin) .et-l h1.entry-title {
	color: #FFFFFF !important;
	font-family: var(--mpr-font-display) !important;
}

/* Interface chrome keeps the system face. */
#wpadminbar h1,
.et-fb-settings-options h1,
.et-l--header h1 a,
#et-boc h1 img {
	font-family: inherit !important;
}

/* ─── Display type ────────────────────────────────────────────────────────
   Page titles and performer names carry the brand face, in white. Applied
   from one place so the Cast page, event pages and the dashboard cannot
   disagree about what a name looks like. */

.mpr-dashboard h1,
.mpr-ev-list h1,
.mpr-cast-grid h1,
.mpr-bookings-block h1,
.mpr-event h1,
.mpr-claim h1,
.mpr-event-title,
.mpr-section-title {
	font-family: var(--mpr-font-display);
	color: #FFFFFF;
}

/* Performer names, wherever they appear publicly: the cast grid, the cast
   block on an event page, and the Divi Event Cast module. */
.mpr-cast-title,
.mpr-cast-name,
.mpr-cast-member .mpr-cast-name,
/* The Cast page renders through Divi's Loop Builder, so the performer name is
   a divi/heading carrying this class rather than one of our own elements. Divi
   will not set the family itself: PAGKAKI is a theme @font-face, not a font in
   Divi's library, so its font picker never enqueues it and silently falls back.
   Setting it here is the reliable route. */
.mpr-cast-title h1, .mpr-cast-title h2, .mpr-cast-title h3,
.mpr-cast-title h4, .mpr-cast-title .et_pb_heading_container,
.mpr-page-title h1, .mpr-page-title .et_pb_heading_container {
	font-family: var(--mpr-font-display) !important;
	color: #FFFFFF !important;
	letter-spacing: .02em;
}

/* ─── Monster profile pages ───────────────────────────────────────────────
   The profile template is rendered by the profile plugin (.mpd-* markup), and
   its stylesheet loads AFTER this one and uses !important. Single-class
   selectors here therefore lost every colour argument while quietly winning
   the font-family one — which is exactly the half-applied look on the page:
   the right face in the wrong colour.

   So these are deliberately written against the .mpd-* classes at two-class
   specificity. Nothing subtler survives the cascade. */

.mpd-single-profile .mpd-intro h1,
.single-monster .et_pb_title_container h1 {
	font-family: var(--mpr-font-display) !important;
	color: #FFFFFF !important;
	font-weight: 400 !important;
	/* PAGKAKI's ascenders overshoot their line box. At a sub-1 line-height the
	   name literally printed through the tagline above it. */
	line-height: 1.06 !important;
	margin-top: 10px !important;
	letter-spacing: .01em;
}

/* The tagline: its own line, with clearance, and readable rather than hairline. */
.mpd-single-profile .mpd-eyebrow {
	font-family: var(--mpr-font-body) !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	line-height: 1.35 !important;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--mpr-text-muted) !important;
	margin: 0 0 14px !important;
}

.mpd-single-profile h2,
.mpd-single-profile h3,
.mpd-single-profile .mpd-creature-file h2,
.mpd-single-profile .mpd-creature-file h3 {
	font-family: var(--mpr-font-body) !important;
	color: var(--mpr-accent) !important;
	text-transform: uppercase;
	font-weight: 700 !important;
	letter-spacing: .06em;
}

/* Body copy was rendering at weight 100 — a hairline grey on black, which is
   the "cannot read" complaint. 600 at 16/1.25 is the site body setting. */
.mpd-single-profile .mpd-bio,
.mpd-single-profile .mpd-bio p,
.mpd-single-profile .mpd-bio li,
.mpd-single-profile .mpd-creature-file li,
.mpd-single-profile .mpd-creature-file p,
.single-monster .entry-content p,
.single-monster .et_pb_text_inner p {
	font-family: var(--mpr-font-body) !important;
	font-size: var(--mpr-font-size) !important;
	font-weight: var(--mpr-font-weight) !important;
	line-height: 1.6 !important;
	color: var(--mpr-text) !important;
}

/* 1.25 is right for headings and tight UI; at 16px across a full column of
   prose it sets the lines touching, so the bio gets the reading measure. */
.mpd-single-profile .mpd-bio p {
	margin: 0 0 20px !important;
}

.mpd-single-profile .mpd-bio p:last-child {
	margin-bottom: 0 !important;
}

/* The hero left a hand's width of nothing between the name and the bio. */
.mpd-single-profile .mpd-hero {
	margin-bottom: 40px !important;
}

/* "CREATURE FILE" was set at 49px inside a 240px column, so the word ran out
   through the side of its own panel. */
.mpd-single-profile .mpd-creature-file h2,
.mpd-single-profile .mpd-creature-file h3 {
	font-size: 28px !important;
	line-height: 1.1 !important;
	margin: 0 0 20px !important;
	overflow-wrap: anywhere;
}

/* ─── Roster archives ─────────────────────────────────────────────────────
   /monsters/, /sideshows/ and every roster after them share one page shell,
   so the archive and any page built from the shortcode are indistinguishable. */

.mpr-roster-archive {
	background: var(--mpr-surface);
	padding: 70px 0 90px;
}

.mpr-roster-inner {
	max-width: 1180px;
	margin: 0 auto;
	padding: 0 24px;
}

.mpr-roster-archive .mpr-page-title {
	font-family: var(--mpr-font-display);
	color: #FFFFFF;
	font-size: 60px;
	line-height: 1.05;
	text-align: center;
	margin: 0 0 48px;
}

@media (max-width: 640px) {
	.mpr-roster-archive .mpr-page-title { font-size: 38px; }
}