/*
 * Magic Memory Books - THE SITE STANDARD.
 *
 * Owner, 2026-10-24: "create a standard criteria that we can add to every page. Font style, size for
 * different sections, colors, padding, top spacing ... all in a css file". This is that one file: the
 * lettering, sizes, colors and spacing for every page. Change a value in Part 1 and every page that uses
 * it follows - nothing else needs to be touched. Owner's one change after review (same day): "make the
 * smallest font 18 for any 17px" - so 18px is the smallest text anywhere.
 *
 * Part 1 - the values, each with a plain name. Our own code uses them directly, always with the value
 *          as a fallback, e.g.  font-size: var(--mmb-size-text, 18px);
 * Part 2 - the parts every page is built from, in the same order as the Style Sample page
 *          (magicmemorybooks.com/style-sample/). Their class names all start "mmb-s-" (s = standard) so
 *          they can never clash with an older page's own class of the same name.
 *
 * Where Part 2 applies: under the class "mmb-std" (put on <body> by type-look.php). Plain elements -
 * a heading, paragraph, link, label, typing box - inside a page's content (.entry-content) or inside an
 * "mmb-s-page" get the standard look at the lowest strength (:where), so a part that already has its
 * own designed look keeps it; the mmb-s- classes are stronger. WordPress's own admin screens never get
 * Part 2 (no mmb-std there) - they only read the Part 1 values.
 *
 * Fonts: Fraunces (only the brand name), Lora (titles and field titles), Karla (everything else).
 * type-look.php loads them; this file never downloads anything itself.
 */

/* ===== Part 1 - the values =================================================================== */
:root {
	/* Lettering */
	--mmb-font-brand: "Fraunces", Georgia, serif;
	--mmb-font-title: "Lora", Georgia, serif;
	--mmb-font-text: "Karla", Arial, sans-serif;

	/* Sizes - computer and tablet (phone sizes are just below) */
	--mmb-size-brand: 30px;          /* "Magic Memory Books" inside a page */
	--mmb-size-page-title: 40px;     /* one per page, at the top */
	--mmb-size-section-title: 28px;  /* starts each part of a page */
	--mmb-size-box-title: 24px;      /* the title of a card or box */
	--mmb-size-small-title: 20px;    /* a small title inside a section */
	--mmb-size-text: 18px;           /* all ordinary words - the smallest size anywhere */
	--mmb-size-note: 18px;           /* notes and help - softer color, never smaller */
	--mmb-size-field-title: 20px;    /* the title above a box you fill in */
	--mmb-size-typing: 18px;         /* the words you type, and the hint inside an empty box */
	--mmb-size-button: 20px;         /* button words */
	--mmb-size-message: 18px;        /* error / done / please-note messages */
	--mmb-line: 1.6;                 /* space between lines of words */
	--mmb-line-title: 1.25;          /* space between lines of a title */

	/* Colors */
	--mmb-color-text: #2E2621;        /* Dark brown - all words */
	--mmb-color-note: #5C5344;        /* Soft brown - notes and help */
	--mmb-color-hint: #6B6058;        /* Gray brown - the hint inside an empty typing box, menu links */
	--mmb-color-maroon: #7A3540;      /* Maroon - page titles, box titles, buttons, links, box edges */
	--mmb-color-maroon-dark: #5E2830; /* Dark maroon - a button or link when the pointer is on it */
	--mmb-color-gold: #B8935A;        /* Gold - the ring around the box you are typing in */
	--mmb-color-page: #FAF6F1;        /* Cream - the page background */
	--mmb-color-box: #FFFFFF;         /* White - the standard box, typing boxes */
	--mmb-color-card: #FBF8F3;        /* Warm white - cards, tip panels, quotes */
	--mmb-color-highlight: #F1EAE1;   /* Beige - highlights, tags, table headings */
	--mmb-color-line: #C9B8A8;        /* Tan - thin lines and the edges of typing boxes */
	--mmb-color-error: #C62828;       /* Red - something went wrong */
	--mmb-color-error-bg: #FDECEA;
	--mmb-color-ok: #1A7A1A;          /* Green - it worked */
	--mmb-color-ok-bg: #EDF7ED;

	/* Spacing */
	--mmb-space-page-top: 32px;       /* from the top menu down to the standard box */
	--mmb-space-box: 40px;            /* inside edge of the standard box */
	--mmb-space-section: 40px;        /* above each section title */
	--mmb-space-title-below: 14px;    /* below any title */
	--mmb-space-paragraph: 16px;      /* between paragraphs */
	--mmb-space-field: 28px;          /* between one fill-in field and the next */
	--mmb-space-label: 8px;           /* from a field title down to its box */
	--mmb-space-buttons: 12px;        /* between buttons side by side */

	/* The standard box */
	--mmb-box-edge: 2px solid #7A3540;
	--mmb-box-round: 10px;
	--mmb-box-shadow: 6px 6px 14px rgba(46, 38, 33, 0.25);

	/* Cards (several side by side inside the box) */
	--mmb-card-round: 12px;
	--mmb-card-shadow: 6px 6px 16px rgba(46, 38, 33, 0.2);

	/* Buttons */
	--mmb-btn-height: 56px;
	--mmb-btn-pad-y: 14px;           /* above and below the words */
	--mmb-btn-pad-x: 28px;           /* left and right of the words */
	--mmb-btn-pad: var(--mmb-btn-pad-y) var(--mmb-btn-pad-x);
	--mmb-btn-round: 10px;

	/* Typing boxes and dropdowns */
	--mmb-input-edge: 2px solid #C9B8A8;
	--mmb-input-round: 8px;
	--mmb-input-pad: 12px 14px;
	--mmb-focus-ring: 3px solid #B8935A;

	/* Touch: the smallest a button or typing box may be, so older fingers can hit it */
	--mmb-tap: 52px;
}

/* Phones */
@media (max-width: 600px) {
	:root {
		--mmb-size-brand: 25px;
		--mmb-size-page-title: 32px;
		--mmb-size-section-title: 24px;
		--mmb-size-box-title: 22px;
		--mmb-space-page-top: 16px;
		--mmb-space-box: 22px;
		--mmb-space-section: 32px;
	}
}

/* ===== Part 2 - the parts ==================================================================== */

/* The page */
body.mmb-std {
	background-color: var(--mmb-color-page);
	color: var(--mmb-color-text);
	font-family: var(--mmb-font-text);
	font-size: var(--mmb-size-text);
	line-height: var(--mmb-line);
}

/* Brand name */
:is(.mmb-std, .mmb-std-parts) .mmb-s-brand {
	margin: 0 0 var(--mmb-space-title-below);
	font-family: var(--mmb-font-brand);
	font-style: italic;
	font-weight: 700;
	font-size: var(--mmb-size-brand);
	line-height: 1.2;
	color: var(--mmb-color-text);
}

/* Titles */
:where(.mmb-std :is(.entry-content, .mmb-s-page)) h1,
:is(.mmb-std, .mmb-std-parts) .mmb-s-page-title {
	margin: 0 0 var(--mmb-space-title-below);
	font-family: var(--mmb-font-title);
	font-style: normal;
	font-weight: 700;
	font-size: var(--mmb-size-page-title);
	line-height: var(--mmb-line-title);
	color: var(--mmb-color-maroon);
	text-align: center;
}
:where(.mmb-std :is(.entry-content, .mmb-s-page)) h2,
:is(.mmb-std, .mmb-std-parts) .mmb-s-section-title {
	margin: var(--mmb-space-section) 0 var(--mmb-space-title-below);
	font-family: var(--mmb-font-title);
	font-style: normal;
	font-weight: 700;
	font-size: var(--mmb-size-section-title);
	line-height: var(--mmb-line-title);
	color: var(--mmb-color-text);
}
:where(.mmb-std :is(.entry-content, .mmb-s-page)) h3,
:is(.mmb-std, .mmb-std-parts) .mmb-s-box-title {
	margin: 28px 0 10px;
	font-family: var(--mmb-font-title);
	font-style: normal;
	font-weight: 700;
	font-size: var(--mmb-size-box-title);
	line-height: var(--mmb-line-title);
	color: var(--mmb-color-maroon);
}
/* (Heading 5 and 6 are not used on the site; if one appears it looks like a Small title.) */
:where(.mmb-std :is(.entry-content, .mmb-s-page)) :is(h4, h5, h6),
:is(.mmb-std, .mmb-std-parts) .mmb-s-small-title {
	margin: 24px 0 8px;
	font-family: var(--mmb-font-title);
	font-style: normal;
	font-weight: 700;
	font-size: var(--mmb-size-small-title);
	line-height: var(--mmb-line-title);
	color: var(--mmb-color-text);
}
/* No extra space above whatever comes first in a page, box, card or panel */
:where(.mmb-std :is(.entry-content, .mmb-s-page, .mmb-s-box, .mmb-s-card, .mmb-s-panel)) > :first-child {
	margin-top: 0;
}

/* Words */
:where(.mmb-std :is(.entry-content, .mmb-s-page)) :is(p, li, td, dd, dt, blockquote) {
	font-family: var(--mmb-font-text);
	font-size: var(--mmb-size-text);
	line-height: var(--mmb-line);
	color: var(--mmb-color-text);
}
:where(.mmb-std :is(.entry-content, .mmb-s-page)) p {
	margin: 0 0 var(--mmb-space-paragraph);
}
:where(.mmb-std :is(.entry-content, .mmb-s-page)) strong {
	font-weight: 700;
}

/* Notes and help */
:is(.mmb-std, .mmb-std-parts) .mmb-s-note {
	font-family: var(--mmb-font-text);
	font-size: var(--mmb-size-note);
	line-height: var(--mmb-line);
	color: var(--mmb-color-note);
}

/* Links - plain links in words only (a link with a class of its own, like a button, keeps its look) */
:where(.mmb-std :is(.entry-content, .mmb-s-page)) a:not([class]) {
	color: var(--mmb-color-maroon);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
}
:where(.mmb-std :is(.entry-content, .mmb-s-page)) a:not([class]):hover {
	color: var(--mmb-color-maroon-dark);
}

/* Lists */
:where(.mmb-std :is(.entry-content, .mmb-s-page)) :is(ul, ol) {
	margin: 0 0 var(--mmb-space-paragraph);
	padding-left: 1.4em;
}
:where(.mmb-std :is(.entry-content, .mmb-s-page)) li {
	margin: 0 0 8px;
}

/* Quote - words someone said, set apart */
:where(.mmb-std :is(.entry-content, .mmb-s-page)) blockquote {
	margin: 0 0 var(--mmb-space-paragraph);
	padding: 14px 22px;
	background: var(--mmb-color-card);
	border: 0;
	border-left: 5px solid var(--mmb-color-maroon);
	border-radius: 0 8px 8px 0;
	font-style: italic;
	font-size: var(--mmb-size-typing);
}
:where(.mmb-std :is(.entry-content, .mmb-s-page)) blockquote p {
	font-size: inherit;
	font-style: inherit;
}
:where(.mmb-std :is(.entry-content, .mmb-s-page)) blockquote p:last-child {
	margin-bottom: 0;
}

/* Tag - a short word on a rounded label (a person's role, "Private", a place) */
:is(.mmb-std, .mmb-std-parts) .mmb-s-tag {
	display: inline-block;
	margin: 0 6px 6px 0;
	padding: 4px 14px;
	background: var(--mmb-color-highlight);
	border-radius: 999px;
	font-family: var(--mmb-font-text);
	font-weight: 700;
	font-size: var(--mmb-size-text);
	line-height: 1.4;
	color: var(--mmb-color-maroon);
}

/* Fill-in fields: one field = a title, an optional help line, and the box */
:is(.mmb-std, .mmb-std-parts) .mmb-s-field {
	margin: 0 0 var(--mmb-space-field);
}
:where(.mmb-std :is(.entry-content, .mmb-s-page)) label,
:is(.mmb-std, .mmb-std-parts) .mmb-s-field-title {
	display: block;
	margin: 0 0 var(--mmb-space-label);
	font-family: var(--mmb-font-title);
	font-weight: 600;
	font-size: var(--mmb-size-field-title);
	line-height: 1.3;
	color: var(--mmb-color-text);
}
:is(.mmb-std, .mmb-std-parts) .mmb-s-help {
	margin: -2px 0 var(--mmb-space-label);
	font-family: var(--mmb-font-text);
	font-size: var(--mmb-size-note);
	line-height: 1.5;
	color: var(--mmb-color-note);
}

/* Typing boxes and dropdowns */
:where(.mmb-std :is(.entry-content, .mmb-s-page)) :is(input[type="text"], input[type="email"], input[type="url"], input[type="tel"], input[type="number"], input[type="password"], input[type="search"], input[type="date"], select, textarea) {
	display: block;
	width: 100%;
	max-width: 560px;
	min-height: var(--mmb-tap);
	margin: 0;
	padding: var(--mmb-input-pad);
	box-sizing: border-box;
	background-color: var(--mmb-color-box);
	border: var(--mmb-input-edge);
	border-radius: var(--mmb-input-round);
	box-shadow: none;
	font-family: var(--mmb-font-text);
	font-size: var(--mmb-size-typing);
	line-height: 1.4;
	color: var(--mmb-color-text);
}
:where(.mmb-std :is(.entry-content, .mmb-s-page)) textarea {
	min-height: 150px;
	line-height: 1.5;
}
:where(.mmb-std :is(.entry-content, .mmb-s-page)) select {
	padding-right: 48px;
	background: #fff url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2718%27 height=%2711%27 viewBox=%270 0 18 11%27%3E%3Cpath d=%27M1.5 1.5l7.5 7.5 7.5-7.5%27 fill=%27none%27 stroke=%27%237A3540%27 stroke-width=%273%27/%3E%3C/svg%3E") no-repeat right 16px center;
	background-size: 18px 11px;
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
}
:where(.mmb-std :is(.entry-content, .mmb-s-page)) :is(input, textarea)::placeholder {
	color: var(--mmb-color-hint);
	font-style: italic;
	opacity: 1;
}
:where(.mmb-std :is(.entry-content, .mmb-s-page)) :is(input, select, textarea):focus {
	outline: var(--mmb-focus-ring);
	outline-offset: 2px;
	border-color: var(--mmb-color-maroon);
}
/* The same typing box as a named part, for boxes outside a page's content - e.g. on our wp-admin
   screens, where WordPress's own boxes are 14px and 30px tall. */
:is(.mmb-std, .mmb-std-parts) .mmb-s-input {
	min-height: var(--mmb-tap);
	max-width: 100%;
	padding: var(--mmb-input-pad);
	box-sizing: border-box;
	background-color: var(--mmb-color-box);
	border: var(--mmb-input-edge);
	border-radius: var(--mmb-input-round);
	box-shadow: none;
	font-family: var(--mmb-font-text);
	font-size: var(--mmb-size-typing);
	line-height: 1.4;
	color: var(--mmb-color-text);
}
:is(.mmb-std, .mmb-std-parts) .mmb-s-input:focus {
	outline: var(--mmb-focus-ring);
	outline-offset: 2px;
	border-color: var(--mmb-color-maroon);
	box-shadow: none;
}

/* Story box with formatting buttons (the WordPress editor): one row of buttons, a tan edge */
.mmb-std .wp-editor-container {
	max-width: 760px;
	border: var(--mmb-input-edge);
	border-radius: var(--mmb-input-round);
	overflow: hidden;
}
.mmb-std div.mce-toolbar-grp {
	background: var(--mmb-color-highlight);
	border-bottom: 1px solid var(--mmb-color-line);
}
/* Its "Visual" / "Text" tabs */
.mmb-std .wp-switch-editor {
	font-family: var(--mmb-font-text);
	font-size: var(--mmb-size-text);
}
/* The theme paints every <button> maroon; the editor's own little buttons must stay plain icons */
.mmb-std .mce-toolbar .mce-btn button,
.mmb-std .mce-toolbar .mce-btn button:hover,
.mmb-std .mce-toolbar .mce-btn button:focus {
	min-height: 0;
	padding: 4px 6px;
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	color: var(--mmb-color-text);
}
.mmb-std .mce-toolbar .mce-btn:hover,
.mmb-std .mce-toolbar .mce-btn.mce-active {
	background: var(--mmb-color-box);
	border-color: var(--mmb-color-line);
}

/* The site's fill-in forms (Add a Memory, Add a Person, the family's edit forms) are drawn by ACF,
   whose own look is 12-14px. Its field titles, help lines, typing boxes and Save button follow the
   standard instead. (A form's own file can still set more, e.g. which titles get a number.) */
.mmb-std .acf-form .acf-field > .acf-label > label {
	font-family: var(--mmb-font-title);
	font-weight: 600;
	font-size: var(--mmb-size-field-title);
	line-height: 1.3;
	color: var(--mmb-color-text);
}
.mmb-std .acf-form .acf-field :is(.acf-label p.description, .acf-input > p.description, p.description) {
	font-family: var(--mmb-font-text);
	font-size: var(--mmb-size-note);
	line-height: 1.5;
	color: var(--mmb-color-note);
}
.mmb-std .acf-form .acf-field :is(input[type="text"], input[type="email"], input[type="url"], input[type="number"], input[type="search"], input[type="password"], select, textarea):not([type="hidden"]) {
	min-height: var(--mmb-tap);
	padding: var(--mmb-input-pad);
	box-sizing: border-box;
	border: var(--mmb-input-edge);
	border-radius: var(--mmb-input-round);
	font-family: var(--mmb-font-text);
	font-size: var(--mmb-size-typing);
	line-height: 1.4;
	color: var(--mmb-color-text);
}
.mmb-std .acf-form .acf-field :is(input, select, textarea):focus {
	outline: var(--mmb-focus-ring);
	outline-offset: 2px;
	border-color: var(--mmb-color-maroon);
}
.mmb-std .acf-form .acf-field :is(.acf-checkbox-list, .acf-radio-list) label {
	font-family: var(--mmb-font-text);
	font-size: var(--mmb-size-typing);
}
.mmb-std .acf-form .select2-container .select2-selection {
	min-height: var(--mmb-tap);
	border: var(--mmb-input-edge);
	border-radius: var(--mmb-input-round);
	font-family: var(--mmb-font-text);
	font-size: var(--mmb-size-typing);
}
.mmb-std .select2-container .select2-selection__rendered,
.mmb-std .select2-results__option,
.mmb-std .select2-search__field {
	font-family: var(--mmb-font-text);
	font-size: var(--mmb-size-typing);
}
.mmb-std .acf-form .acf-switch :is(.acf-switch-on, .acf-switch-off) {
	font-family: var(--mmb-font-text);
	font-size: var(--mmb-size-text);
	line-height: 1.6;
}
.mmb-std .acf-form .acf-form-submit :is(.acf-button, input[type="submit"]) {
	min-height: var(--mmb-btn-height);
	padding: var(--mmb-btn-pad);
	border-radius: var(--mmb-btn-round);
	font-family: var(--mmb-font-text);
	font-weight: 700;
	font-size: var(--mmb-size-button);
	line-height: 1.2;
}

/* Our own wp-admin screens - those whose page name starts "mmb-" (Photo Browser, Family Password,
   Photo AI, Close My Family Site ...) and the screens of Memories, People, Families and Books: their
   words at the standard sizes instead of WordPress's 13-14px. At the lowest strength (:where), so any
   size a screen sets on purpose for one of its own parts still wins; WordPress's other screens are
   untouched. */
:is(body[class*="_page_mmb-"], body[class*="post-type-mmb_"]) #wpbody-content {
	font-family: var(--mmb-font-text);
	font-size: var(--mmb-size-text);
}
:where(:is(body[class*="_page_mmb-"], body[class*="post-type-mmb_"]) #wpbody-content) :is(p, li, label, dd, dt, td, th) {
	font-size: var(--mmb-size-text);
	line-height: 1.5;
}
:where(:is(body[class*="_page_mmb-"], body[class*="post-type-mmb_"]) #wpbody-content) .form-table :is(th, td, td p),
:where(:is(body[class*="_page_mmb-"], body[class*="post-type-mmb_"]) #wpbody-content) .form-table td fieldset label {
	font-size: var(--mmb-size-text);
}
:where(:is(body[class*="_page_mmb-"], body[class*="post-type-mmb_"]) #wpbody-content) :is(.description, p.description) {
	font-size: var(--mmb-size-note);
	line-height: 1.5;
}
:where(:is(body[class*="_page_mmb-"], body[class*="post-type-mmb_"]) #wpbody-content) .postbox .hndle {
	font-family: var(--mmb-font-title);
	font-size: var(--mmb-size-small-title);
}
:where(:is(body[class*="_page_mmb-"], body[class*="post-type-mmb_"]) #wpbody-content) .acf-field > .acf-label > label {
	font-family: var(--mmb-font-title);
	font-weight: 600;
	font-size: var(--mmb-size-field-title);
}
:where(:is(body[class*="_page_mmb-"], body[class*="post-type-mmb_"]) #wpbody-content) .acf-field .acf-input :is(input[type="text"], input[type="email"], input[type="url"], input[type="number"], select, textarea) {
	font-family: var(--mmb-font-text);
	font-size: var(--mmb-size-typing);
}
:where(:is(body[class*="_page_mmb-"], body[class*="post-type-mmb_"]) #wpbody-content) .acf-switch :is(.acf-switch-on, .acf-switch-off) {
	font-size: var(--mmb-size-text);
	line-height: 1.6;
}

/* A field that needs fixing: red edge on its box, a red line under it saying what to do */
:is(.mmb-std, .mmb-std-parts) .mmb-s-field-error :is(input, select, textarea) {
	border-color: var(--mmb-color-error);
}
:is(.mmb-std, .mmb-std-parts) .mmb-s-field-msg {
	margin: 8px 0 0;
	font-family: var(--mmb-font-text);
	font-weight: 700;
	font-size: var(--mmb-size-message);
	color: var(--mmb-color-error);
}

/* Slider (photo brightness and the like) */
:where(.mmb-std :is(.entry-content, .mmb-s-page)) input[type="range"] {
	display: block;
	width: 100%;
	max-width: 560px;
	height: 36px;
	margin: 0;
	accent-color: var(--mmb-color-maroon);
	cursor: pointer;
}

/* Choosing files: the browser's own control is hidden inside a Second button */
:is(.mmb-std, .mmb-std-parts) .mmb-s-file input[type="file"] {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
}

/* Check boxes and round choices: big enough to tap, words beside them */
:is(.mmb-std, .mmb-std-parts) label.mmb-s-check {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: var(--mmb-tap);
	margin: 0;
	font-family: var(--mmb-font-text);
	font-weight: 400;
	font-size: var(--mmb-size-typing);
	cursor: pointer;
}
:where(.mmb-std :is(.entry-content, .mmb-s-page)) :is(input[type="checkbox"], input[type="radio"]) {
	flex-shrink: 0;
	width: 26px;
	height: 26px;
	margin: 0;
	accent-color: var(--mmb-color-maroon);
	cursor: pointer;
}

/* Buttons */
:is(.mmb-std, .mmb-std-parts) :is(.mmb-s-btn, .mmb-s-btn-2, .mmb-s-btn-delete),
:where(.mmb-std :is(.entry-content, .mmb-s-page)) :is(button[type="submit"], input[type="submit"]) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: var(--mmb-btn-height);
	margin: 0;
	padding: var(--mmb-btn-pad);
	box-sizing: border-box;
	background: var(--mmb-color-maroon);
	border: 2px solid var(--mmb-color-maroon);
	border-radius: var(--mmb-btn-round);
	font-family: var(--mmb-font-text);
	font-weight: 700;
	font-size: var(--mmb-size-button);
	line-height: 1.2;
	color: #FFFFFF;
	text-decoration: none;
	text-shadow: none;
	box-shadow: none; /* the theme adds a grey shadow to buttons when pointed at */
	cursor: pointer;
}
/* Pointed at, pressed, or chosen with the keyboard: darker - never WordPress's blue or the theme's shadow
   (a button may also carry WordPress's own "button" class, whose pressed/focus colors are just as strong). */
:is(.mmb-std, .mmb-std-parts) .mmb-s-btn:is(:hover, :focus, :active),
:where(.mmb-std :is(.entry-content, .mmb-s-page)) :is(button[type="submit"], input[type="submit"]):is(:hover, :focus, :active) {
	background: var(--mmb-color-maroon-dark);
	border-color: var(--mmb-color-maroon-dark);
	color: #FFFFFF;
	box-shadow: none;
}
/* Second button: for the other choice next to a main button */
:is(.mmb-std, .mmb-std-parts) .mmb-s-btn-2 {
	background: var(--mmb-color-box);
	border-color: var(--mmb-color-maroon);
	color: var(--mmb-color-maroon);
}
:is(.mmb-std, .mmb-std-parts) .mmb-s-btn-2:is(:hover, :focus, :active) {
	background: var(--mmb-color-highlight);
	border-color: var(--mmb-color-maroon-dark);
	color: var(--mmb-color-maroon-dark);
	box-shadow: none;
}
/* Delete button: only for removing something */
:is(.mmb-std, .mmb-std-parts) .mmb-s-btn-delete {
	background: var(--mmb-color-box);
	border-color: var(--mmb-color-error);
	color: var(--mmb-color-error);
}
:is(.mmb-std, .mmb-std-parts) .mmb-s-btn-delete:is(:hover, :focus, :active) {
	background: var(--mmb-color-error-bg);
	border-color: var(--mmb-color-error);
	color: var(--mmb-color-error);
	box-shadow: none;
}
/* A button made from a label (Choose photos) keeps the button look, not the field-title look */
:is(.mmb-std, .mmb-std-parts) label:is(.mmb-s-btn, .mmb-s-btn-2, .mmb-s-btn-delete) {
	display: inline-flex;
	margin: 0;
	font-family: var(--mmb-font-text);
	font-weight: 700;
	font-size: var(--mmb-size-button);
	line-height: 1.2;
}
/* A button that can't be used yet (e.g. Save before anything is filled in) */
:is(.mmb-std, .mmb-std-parts) :is(.mmb-s-btn, .mmb-s-btn-2, .mmb-s-btn-delete):disabled,
:is(.mmb-std, .mmb-std-parts) :is(.mmb-s-btn, .mmb-s-btn-2, .mmb-s-btn-delete).is-disabled {
	opacity: 0.5;
	cursor: not-allowed;
}
:is(.mmb-std, .mmb-std-parts) :is(.mmb-s-btn, .mmb-s-btn-2, .mmb-s-btn-delete):focus-visible {
	outline: var(--mmb-focus-ring);
	outline-offset: 2px;
}
:is(.mmb-std, .mmb-std-parts) .mmb-s-buttons {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--mmb-space-buttons);
	margin: 0 0 var(--mmb-space-paragraph);
}

/* Messages */
:is(.mmb-std, .mmb-std-parts) .mmb-s-msg {
	margin: 0 0 var(--mmb-space-paragraph);
	padding: 14px 18px;
	border-radius: 8px;
	font-family: var(--mmb-font-text);
	font-size: var(--mmb-size-message);
	line-height: 1.5;
}
:is(.mmb-std, .mmb-std-parts) .mmb-s-msg-error {
	background: var(--mmb-color-error-bg);
	border: 2px solid var(--mmb-color-error);
	color: var(--mmb-color-error);
}
:is(.mmb-std, .mmb-std-parts) .mmb-s-msg-ok {
	background: var(--mmb-color-ok-bg);
	border: 2px solid var(--mmb-color-ok);
	color: var(--mmb-color-ok);
}
:is(.mmb-std, .mmb-std-parts) .mmb-s-msg-info {
	background: var(--mmb-color-highlight);
	border-left: 6px solid var(--mmb-color-maroon);
	color: var(--mmb-color-text);
}

/* The standard box - one per page, holding the page's content */
:is(.mmb-std, .mmb-std-parts) .mmb-s-box {
	margin: var(--mmb-space-page-top) auto;
	padding: var(--mmb-space-box);
	box-sizing: border-box;
	background: var(--mmb-color-box);
	border: var(--mmb-box-edge);
	border-radius: var(--mmb-box-round);
	box-shadow: var(--mmb-box-shadow);
}
/* The theme's own page box (Kadence's article) is the standard box too: exactly the standard's inside
   space - the theme adds 32px more of its own inside it, which is taken away here. */
.mmb-std article.entry.content-bg {
	padding: var(--mmb-space-box);
}
.mmb-std article.entry.content-bg .entry-content-wrap {
	padding: 0;
}

/* Cards - several side by side inside the standard box (plans, people, memories) */
:is(.mmb-std, .mmb-std-parts) .mmb-s-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 24px;
	margin: 0 0 var(--mmb-space-paragraph);
}
:is(.mmb-std, .mmb-std-parts) .mmb-s-card {
	padding: 28px 24px;
	box-sizing: border-box;
	background: var(--mmb-color-card);
	border: var(--mmb-box-edge);
	border-radius: var(--mmb-card-round);
	box-shadow: var(--mmb-card-shadow);
}

/* Tip panel - a short note set apart from the words around it */
:is(.mmb-std, .mmb-std-parts) .mmb-s-panel {
	margin: 0 0 var(--mmb-space-paragraph);
	padding: 16px 20px;
	box-sizing: border-box;
	background: var(--mmb-color-card);
	border: 1px solid var(--mmb-color-line);
	border-radius: 8px;
}

/* Photos - always the whole photo, never cut off */
:is(.mmb-std, .mmb-std-parts) .mmb-s-photo {
	margin: 0 0 var(--mmb-space-paragraph);
}
:is(.mmb-std, .mmb-std-parts) .mmb-s-photo img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 8px;
}
:is(.mmb-std, .mmb-std-parts) .mmb-s-caption {
	margin: 8px 0 0;
	font-family: var(--mmb-font-text);
	font-size: var(--mmb-size-note);
	line-height: 1.5;
	color: var(--mmb-color-note);
}

/* Tables */
:where(.mmb-std :is(.entry-content, .mmb-s-page)) table {
	width: 100%;
	margin: 0 0 var(--mmb-space-paragraph);
	border-collapse: collapse;
}
:where(.mmb-std :is(.entry-content, .mmb-s-page)) th {
	padding: 12px 14px;
	background: var(--mmb-color-highlight);
	border-bottom: 2px solid var(--mmb-color-line);
	font-family: var(--mmb-font-text);
	font-weight: 700;
	font-size: var(--mmb-size-text);
	color: var(--mmb-color-text);
	text-align: left;
}
:where(.mmb-std :is(.entry-content, .mmb-s-page)) td {
	padding: 12px 14px;
	border-bottom: 1px solid var(--mmb-color-line);
	vertical-align: top;
}

/* A line between parts of a page */
:where(.mmb-std :is(.entry-content, .mmb-s-page)) hr {
	margin: var(--mmb-space-section) 0;
	border: 0;
	border-top: 1px solid var(--mmb-color-line);
}