/*
 * Mazari Captions — THE ONLY CAPTION SYSTEM ON THE SITE.
 *
 * Settings: Dashboard → Captions. Every size, colour and switch
 * below is a variable that page sets, Desktop and Mobile
 * separately. This file never needs editing to change the look.
 *
 * Captions arrive here already stripped to plain words by the
 * cleaner (inc/clean.php), so these rules are the only thing that
 * decides how a caption looks.
 *
 * The rules:
 * - A frame exists only to hold a caption. No caption, no frame.
 * - The frame is the opposite of what it sits on. On a black page:
 *   one light card with the caption on it. Inside a white tablet:
 *   a dark frame, with the caption on its own little white tablet.
 *
 * What counts as a caption — every shape that has turned up:
 * - [caption] from the Classic editor  (figure.wp-caption > figcaption)
 * - old captions saved as raw HTML      (div.wp-caption > p.wp-caption-text)
 * - very old WordPress captions         (dl.wp-caption > dd.wp-caption-dd)
 * - block-editor figures pasted in      (figure > figcaption)
 *
 * Left alone on purpose:
 * - galleries (each picture keeps its grid cell; captions get the
 *   font and size only)
 * - the homepage overlay, which strips everything to white text
 *
 * Why every selector starts "html body" and some lines say
 * !important: the theme's tablet forces font sizes onto <p> and
 * <div> with !important, and imported captions arrive with inline
 * widths. These rules must beat both, every time, or the caption
 * changes size depending on which template it's in. That was the
 * bug that kept coming back.
 */


/* Fallbacks only. The values actually used are printed straight
   after this file from the dashboard, and match these until
   something is changed there. */
:root {
	--mzc-cap-font:'Courier New', Courier, monospace;
	--mzc-cap-weight:400;
	--mzc-cap-ink:#6c757d;
	--mzc-cap-card:#ffffff;
	--mzc-cap-frame-t:#000000;
	--mzc-cap-tab:#ffffff;
	--mzc-cap-size:17.5px;
	--mzc-cap-line:1.1;
	--mzc-cap-align:center;
	--mzc-cap-w:fit-content;
	--mzc-cap-float-l:left;
	--mzc-cap-float-r:right;
	--mzc-cap-clear:none;
	--mzc-cap-m-l:0.3em 1.25em 1em var(--mzc-cap-side);
	--mzc-cap-m-r:0.3em var(--mzc-cap-side) 1em 1.25em;
	--mzc-cap-sliver:10px;
	--mzc-cap-gap:10px;
	--mzc-cap-space:36px;
	--mzc-cap-side:0px;
	--mzc-cap-radius:10px;
	--mzc-cap-radius-in:8px;
	--mzc-cap-pad:10px;
}

@media (max-width:768px) {
	:root {
		--mzc-cap-size:17.5px;
		--mzc-cap-line:1.1;
		--mzc-cap-align:center;
		--mzc-cap-w:fit-content;
		--mzc-cap-float-l:none;
		--mzc-cap-float-r:none;
		--mzc-cap-clear:both;
		--mzc-cap-m-l:var(--mzc-cap-space) auto;
		--mzc-cap-m-r:var(--mzc-cap-space) auto;
		--mzc-cap-sliver:10px;
		--mzc-cap-gap:10px;
		--mzc-cap-space:36px;
		--mzc-cap-side:0px;
		--mzc-cap-radius:10px;
		--mzc-cap-radius-in:8px;
		--mzc-cap-pad:10px;
	}
}


/* --------------------------------------------------------------
   The frame
   -------------------------------------------------------------- */

html body :is(.wp-caption, figure:has(> figcaption:not(:empty))):not(.gallery-item, .wp-block-gallery, .wp-block-gallery figure, .feed-overlay__inner *) {
	box-sizing: border-box;
	display: flex !important;
	flex-direction: column;
	align-items: stretch;
	gap: var(--mzc-cap-gap);

	width: var(--mzc-cap-w) !important;
	max-width: calc(100% - 2 * var(--mzc-cap-side)) !important;
	height: auto !important;
	margin: var(--mzc-cap-space) auto;
	padding: var(--mzc-cap-sliver);
	float: none;
	clear: both;

	background: var(--mzc-cap-card);
	border: 0;
	border-radius: var(--mzc-cap-radius);
	box-shadow: none;
}

/* Align left / Align right in the editor. Wrap or centre is set
   per device in the dashboard. */
html body :is(.wp-caption, figure:has(> figcaption:not(:empty))):not(.gallery-item, .wp-block-gallery, .wp-block-gallery figure, .feed-overlay__inner *).alignleft {
	float: var(--mzc-cap-float-l);
	clear: var(--mzc-cap-clear);
	margin: var(--mzc-cap-m-l);
}

html body :is(.wp-caption, figure:has(> figcaption:not(:empty))):not(.gallery-item, .wp-block-gallery, .wp-block-gallery figure, .feed-overlay__inner *).alignright {
	float: var(--mzc-cap-float-r);
	clear: var(--mzc-cap-clear);
	margin: var(--mzc-cap-m-r);
}


/* --------------------------------------------------------------
   The picture
   Never wider than the frame, otherwise left at its own size and
   centred. Alignment classes on the image itself are ignored: the
   caption's alignment is what counts.
   -------------------------------------------------------------- */

html body :is(.wp-caption, figure:has(> figcaption:not(:empty))):not(.gallery-item, .wp-block-gallery, .wp-block-gallery figure, .feed-overlay__inner *) > a,
html body :is(.wp-caption, figure:has(> figcaption:not(:empty))):not(.gallery-item, .wp-block-gallery, .wp-block-gallery figure, .feed-overlay__inner *) > p:not(.wp-caption-text),
html body :is(.wp-caption, figure:has(> figcaption:not(:empty))):not(.gallery-item, .wp-block-gallery, .wp-block-gallery figure, .feed-overlay__inner *) > .wp-caption-dt {
	display: block;
	margin: 0 !important;
	padding: 0;
	float: none;
}

html body :is(.wp-caption, figure:has(> figcaption:not(:empty))):not(.gallery-item, .wp-block-gallery, .wp-block-gallery figure, .feed-overlay__inner *) img {
	display: block;
	float: none;
	max-width: 100%;
	height: auto;
	margin: 0 auto;
}

/* Line breaks WordPress leaves between picture and caption in old
   imported captions. Only direct children — breaks inside the
   caption text are untouched. */
html body :is(.wp-caption, figure:has(> figcaption:not(:empty))):not(.gallery-item, .wp-block-gallery, .wp-block-gallery figure, .feed-overlay__inner *) > br {
	display: none;
}


/* --------------------------------------------------------------
   The caption text

   contain: inline-size takes the caption out of the frame's width
   calculation. Without it, a long caption stretched the frame to
   full width while a short one didn't, so identical pictures got
   different-sized frames depending on how many words were under
   them. The frame is sized by the picture alone; the caption then
   stretches across it and wraps to as many lines as it needs.
   -------------------------------------------------------------- */

html body :is(.wp-caption, figure:has(> figcaption:not(:empty))):not(.gallery-item, .wp-block-gallery, .wp-block-gallery figure, .feed-overlay__inner *) > :is(figcaption, .wp-caption-text, .wp-caption-dd) {
	contain: inline-size;
	align-self: stretch;
	display: block;
	width: auto !important;
	min-width: 0 !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 5px;

	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	opacity: 1;

	color: var(--mzc-cap-ink) !important;
	font-family: var(--mzc-cap-font) !important;
	font-size: var(--mzc-cap-size) !important;
	font-weight: var(--mzc-cap-weight) !important;
	font-style: normal;
	line-height: var(--mzc-cap-line) !important;
	letter-spacing: normal;
	text-align: var(--mzc-cap-align) !important;
	text-shadow: none;
	overflow-wrap: anywhere;
}

/* Last line of defence. The cleaner strips every tag out of a
   caption before the page is sent, so nothing should ever be in
   here — but if anything is, it takes the caption's look. */
html body :is(.wp-caption, figure:has(> figcaption:not(:empty))):not(.gallery-item, .wp-block-gallery, .wp-block-gallery figure, .feed-overlay__inner *) > :is(figcaption, .wp-caption-text, .wp-caption-dd) * {
	font: inherit !important;
	color: inherit !important;
	background: none !important;
	text-decoration: none !important;
	vertical-align: baseline !important;
}


/* --------------------------------------------------------------
   Inside a white tablet — the opposite
   -------------------------------------------------------------- */

html body :is(.tablet, .tablet-body) :is(.wp-caption, figure:has(> figcaption:not(:empty))):not(.gallery-item, .wp-block-gallery, .wp-block-gallery figure, .feed-overlay__inner *) {
	background: var(--mzc-cap-frame-t);
}

html body :is(.tablet, .tablet-body) :is(.wp-caption, figure:has(> figcaption:not(:empty))):not(.gallery-item, .wp-block-gallery, .wp-block-gallery figure, .feed-overlay__inner *) > :is(figcaption, .wp-caption-text, .wp-caption-dd) {
	background: var(--mzc-cap-tab);
	border-radius: var(--mzc-cap-radius-in);
	padding: var(--mzc-cap-pad) 5px;
}


/* --------------------------------------------------------------
   Galleries — text only, no frames
   -------------------------------------------------------------- */

html body :is(.gallery-caption, .wp-block-gallery figcaption) {
	font-family: var(--mzc-cap-font) !important;
	font-size: var(--mzc-cap-size) !important;
	font-weight: var(--mzc-cap-weight) !important;
	line-height: var(--mzc-cap-line) !important;
	text-align: var(--mzc-cap-align) !important;
}