/*
 * 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 was the smallest text anywhere. Raised 2026-11-02 (owner: "make
 * smallest font words 20"): 20px is now the smallest text anywhere - words, notes, typing and messages.
 *
 * 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, 20px);
 * 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. Since 2026-11-02 every title in the
 * theme's main area (between the top menu and the bottom line) and every typing box on a page also gets
 * the standard's lettering and sizes, wherever it is - see "The theme's own titles" below.
 *
 * 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: 20px;           /* all ordinary words - the smallest size anywhere */
	--mmb-size-note: 20px;           /* notes and help - softer color, never smaller */
	--mmb-size-field-title: 20px;    /* the title above a box you fill in */
	--mmb-size-typing: 20px;         /* the words you type, and the hint inside an empty box */
	--mmb-size-button: 20px;         /* button words */
	--mmb-size-message: 20px;        /* 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. A title that takes two or more lines splits them evenly ("Every Memory. / Kept forever."), never
   one word alone on the last line - text-wrap: balance (phone fit, 2026-11-02). */
: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;
	text-wrap: balance;
}
: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);
	text-wrap: balance;
}
: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);
	text-wrap: balance;
}
/* (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);
	text-wrap: balance;
}

/* The theme's own titles (owner, 2026-11-02: "Please add our standard font setup to All Pages Now").
   The theme prints some titles itself, outside a page's content - the title at the top of a membership
   page, an archive's or a search's title - and our Memory, Person, Book, family home and fill-in form
   pages print theirs straight into the theme's main area. There the theme's own sizes showed (a page
   title 32px). So every title in the theme's main area (#inner-wrap: between the top menu and the bottom
   line, never in them) gets the standard's lettering and size too - only those: colors, spacing and
   centering stay as each page has them. At the lowest strength (:where), so a part with its own designed
   look keeps it; the theme's own h1 - h6 sizes come before this file, so these win over them. A title that
   wraps splits its lines evenly, as above (phone fit, 2026-11-02). */
:where(.mmb-std #inner-wrap) h1 {
	font-family: var(--mmb-font-title);
	font-weight: 700;
	font-size: var(--mmb-size-page-title);
	text-wrap: balance;
}
:where(.mmb-std #inner-wrap) h2 {
	font-family: var(--mmb-font-title);
	font-weight: 700;
	font-size: var(--mmb-size-section-title);
	text-wrap: balance;
}
:where(.mmb-std #inner-wrap) h3 {
	font-family: var(--mmb-font-title);
	font-weight: 700;
	font-size: var(--mmb-size-box-title);
	text-wrap: balance;
}
:where(.mmb-std #inner-wrap) :is(h4, h5, h6) {
	font-family: var(--mmb-font-title);
	font-weight: 700;
	font-size: var(--mmb-size-small-title);
	text-wrap: balance;
}
/* A search's list of results: the theme draws each result as a card, so its title is a Box title. */
:where(.mmb-std #inner-wrap .loop-entry) .entry-title {
	font-size: var(--mmb-size-box-title);
}
/* The theme's small lines in that area - the date and author under a result's title, its "Read more"
   link, its labels, the trail of links above a title - are smaller than the words around them. Nothing
   is under 18px (owner, 2026-10-24), so they are ordinary words. */
:where(.mmb-std #inner-wrap) :is(.entry-meta, .entry-taxonomies, .kadence-breadcrumbs, .post-more-link) {
	font-family: var(--mmb-font-text);
	font-size: var(--mmb-size-text);
}
/* Typing boxes and dropdowns anywhere on a page: the theme sets their words to its own 17px, so outside
   a page's content (our Memory, Person and form pages, a box that opens over the page) they were smaller
   than every other word. Only the lettering and size - each box keeps its own look. */
:where(.mmb-std) :is(input, select, textarea, optgroup) {
	font-family: var(--mmb-font-text);
	font-size: var(--mmb-size-typing);
}

/* 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;
}
/* Phone polish (owner, 2026-11-02): ordinary paragraphs, list items, quotes, notes, help lines, messages
   and captions never end with one word alone on the last line ("...just choose who to send it / to.") -
   the browser moves a word down so the last line has at least two. Browsers that can't do this simply wrap
   as before. Only how the lines break (text-wrap-style, the "pretty" half of text-wrap: pretty), never
   whether they wrap: a part that keeps its words on one line (white-space: nowrap) still does, and a part
   that balances its own lines keeps that (:where adds no strength). */
:where(.mmb-std :is(.entry-content, .mmb-s-page)) :is(p, li, dd, blockquote, figcaption),
:where(:is(.mmb-std, .mmb-std-parts) :is(.mmb-s-note, .mmb-s-help, .mmb-s-msg, .mmb-s-caption)) {
	text-wrap-style: pretty;
}

/* 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-text); /* a quote is words (2026-11-02; was the typing size - the same 18px) */
}
: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. (Not the little typing spot inside a pick-from-a-list box - see "Pick-from-a-list
   boxes" below; :where adds no strength.) */
: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):where(:not(.select2-search__field)) {
	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. The 760px limit is
   on the whole editor, so its "Visual" / "Text" tabs sit at the box's own right corner instead of far off at
   the edge of the page (2026-11-02). */
.mmb-std .wp-editor-wrap {
	max-width: 760px;
}
.mmb-std .wp-editor-container {
	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 "Paragraph" chooser at the start of its button row: 20px words like the rest of the page (2026-11-02; it
   was the editor's own 13px). */
.mmb-std .mce-toolbar .mce-listbox .mce-txt {
	width: auto;
	font-family: var(--mmb-font-text);
	font-size: var(--mmb-size-note);
	line-height: 1.2;
}
/* ...and the chooser grows to fit the bigger word, with room for its little arrow (the editor sets its own width). */
.mmb-std .mce-toolbar .mce-listbox {
	width: auto !important;
}
.mmb-std .mce-toolbar .mce-listbox button {
	padding-right: 34px !important;
}
/* 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"], .select2-search__field) {
	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-text); /* the words beside a choice are words (2026-11-02; was the typing size - the same 18px) */
}
.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);
}
/* Pick-from-a-list boxes (People, Occasion, Location Name, Tags on Add a Memory): the box itself is the
   typing box above. The little typing spot inside it is part of that box - no second edge, padding or
   height of its own - so its hint ("Tap to choose people") gets the box's whole width and no empty
   little box shows beside a chosen name. (Phone fit, owner, 2026-11-02: 'check the phone pages to see if
   everything fits attractively'.) */
.mmb-std .select2-container .select2-search--inline .select2-search__field {
	min-height: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	background: transparent;
	line-height: 1.4;
	text-overflow: ellipsis; /* on the narrowest phones a hint that still can't fit ends in "..." rather than mid-letter */
}
/* When it is tapped, the gold ring goes round the whole box, as on every typing box - not round the little
   typing spot inside it, which would draw the box inside a box again (2026-11-02). */
.mmb-std .select2-container .select2-search--inline .select2-search__field:focus {
	outline: none;
}
.mmb-std .acf-form .select2-container--focus .select2-selection {
	outline: var(--mmb-focus-ring);
	outline-offset: 2px;
	border-color: var(--mmb-color-maroon);
}
.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;
}
/* An on/off switch grows to fit its 20px words: ACF draws it a fixed 30px tall, so the hidden word ("Yes")
   showed below the sliding knob. Now the knob covers it whole. (Phone fit, 2026-11-02.) */
.mmb-std .acf-form .acf-switch {
	height: auto;
}
.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;
}
/* ...and its switch grows to fit them, as on the fill-in forms (2026-11-02) - named with #wpbody-content,
   strong enough to beat ACF's own fixed height. */
:where(:is(body[class*="_page_mmb-"], body[class*="post-type-mmb_"])) #wpbody-content .acf-switch {
	height: auto;
}

/* 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-text); /* words, as the Style Sample says (2026-11-02; was the typing size - the same 18px) */
	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;
	/* Words that need two lines on a phone stay centred and split evenly ("Start a Family / Memory Book"),
	   never one word alone on the second line (phone fit, 2026-11-02). */
	text-align: center;
	text-wrap: balance;
	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;
}
/* The page behind the boxes is the standard's cream on every page. On a family site the theme painted
   the page white behind its "unboxed" pages (Welcome, Find a Memory, Timeline, Scenes, the fill-in forms,
   the family password page) but cream behind the lists and memory pages, so the site changed colour from
   page to page. The theme's box on those pages is see-through, so it shows the cream too. (The main site's
   Customizer CSS keeps its own look there: its white page box, and the beige around it.) */
.mmb-std.content-style-unboxed .site,
.mmb-std.content-style-unboxed article.entry.content-bg:not(.loop-entry) {
	background: transparent;
}
/* Phone fit (owner, 2026-11-02: 'check the phone pages to see if everything fits attractively'): on a
   phone every page's box sits 16px from each screen edge, with the standard's inside space (22px) inside
   it - the same on every page, never 46px in and never edge to edge. */
@media (max-width: 600px) {
	/* The theme's side space - beside the page, the top bar and the bottom line - 16px instead of 24px
	   (named again on the page's own column, so it holds whatever the theme does; a full-width page such
	   as the Baby Book landing page keeps none). */
	.mmb-std {
		--global-content-edge-padding: 16px;
	}
	.mmb-std:not(.content-width-fullwidth) .content-container.site-container {
		padding-left: var(--global-content-edge-padding);
		padding-right: var(--global-content-edge-padding);
	}
	/* An "unboxed" page's theme box draws nothing on a family site - each page's own card (the dashboard,
	   the password card, the Find a Memory box, the visitor's form) is the page box - so its inside space
	   was only width lost: the card sat 24px + 22px = 46px from the screen edge. No side space here now,
	   so the page's own card sits 16px in. The space above and below stays: on these pages it is the only
	   gap between the top bar and the card (the theme adds none above), so without it the card would touch
	   the top bar. The main site, whose theme box IS the white page box, gives it back its 22px at the sides
	   in its Customizer CSS. */
	.mmb-std.content-style-unboxed article.entry.content-bg:not(.loop-entry) {
		padding-left: 0;
		padding-right: 0;
	}
	/* A "boxed" page (the membership checkout): the theme pulls its box 16px outward on phones, to 8px
	   from the screen edge. It stays 16px in, like every other page. */
	.mmb-std.content-style-boxed article.entry.content-bg:not(.loop-entry) {
		margin-left: 0;
		margin-right: 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);
}

/* The logo: the owner's heart of diamonds with "MAGIC MEMORY BOOKS" and a stack of books (owner, 2026-11-03:
   "Please use this logo in place of the rainbow"; from 2026-11-02 until then it was Logo 21 "Covenant
   Rainbow"). Beside the name in the theme's top bar, on the main site and every family site. A picture
   only - the name beside it stays the words people and screen readers read. Its own file, so a later
   change of logo is one file: assets/images/mmb-heart-mark.png (the owner's picture with its grey taken
   off, about 3 times the size shown on a phone so it stays sharp). */
.mmb-std-parts .site-branding a.brand {
	gap: 12px;
}
.mmb-std-parts .site-branding a.brand::before {
	content: "";
	flex: 0 0 auto;
	width: 68px;
	height: 64px;
	background: url("images/mmb-heart-mark.png") center / contain no-repeat;
}
/* The sign-in page (login-look.php) has the same heart before the name (the rainbow was there from 2026-11-02). */
.mmb-std-parts.login .wp-login-logo a {
	display: inline-flex !important;
	align-items: center;
	gap: 12px;
}
.mmb-std-parts.login .wp-login-logo a::before {
	content: "";
	flex: 0 0 auto;
	width: 68px;
	height: 64px;
	background: url("images/mmb-heart-mark.png") center / contain no-repeat;
}
/* On a phone: a smaller heart, and the name at 21px as in the picture the owner approved, so the name
   and the heart fit beside the menu button (and a family site's Add a Memory button). */
@media (max-width: 600px) {
	.mmb-std-parts .site-branding a.brand::before {
		width: 47px;
		height: 44px;
	}
	.mmb-std-parts .site-branding .site-title {
		font-size: 21px;
	}
	/* Phone fit (owner, 2026-11-02: 'check the phone pages to see if everything fits attractively'): a long
	   family name that needs two lines splits them evenly ("Form Bug Test / Family"), and a very long word
	   breaks rather than pushing the menu button off the screen. (On a narrow phone a family site's green
	   Add a Memory button moves to its own row under the name - nav-menu.php.) */
	.mmb-std-parts .site-branding a.brand,
	.mmb-std-parts .site-branding .site-title-wrap {
		min-width: 0;
	}
	.mmb-std-parts .site-branding .site-title {
		text-wrap: balance;
		overflow-wrap: break-word;
	}
}

/* The bottom line on a family site (Phone fit, owner, 2026-11-02: 'check the phone pages to see if
   everything fits attractively'). On a phone the copyright, "Using someone else's device? Forget the family
   password" and "Family member? Sign in" ran together in one centred paragraph, so it was hard to tell
   where one link ended and the next began. Each link now has its own line under the copyright, and a
   finger-sized tap area. (!important only for the side space: each link carries margin-left:12px in its
   own style attribute - levels-screens.php - for the computer, where they share one line.) */
@media (max-width: 600px) {
	.mmb-std .site-footer :is(a.mmb-lv-footer-link, a.mmb-lv-footer-signin) {
		display: block;
		width: fit-content;
		max-width: 100%;
		margin: 6px auto 0 !important;
		padding: 10px 6px;
		box-sizing: border-box;
		text-wrap: balance;
	}
}
/* The two family-site footer links are maroon like every other link (owner, 2026-11-02) - they were the
   theme's blue. */
.mmb-std .site-footer :is(a.mmb-lv-footer-link, a.mmb-lv-footer-signin) {
	color: var(--mmb-color-maroon);
}
.mmb-std .site-footer :is(a.mmb-lv-footer-link, a.mmb-lv-footer-signin):is(:hover, :focus) {
	color: var(--mmb-color-maroon-dark);
}
/* Phone polish (owner, 2026-11-02): the copyright line at the bottom of every page, main site and family
   sites, splits its two lines evenly when it needs two, instead of leaving "All" at the end of the first
   line and "rights reserved." alone below it. The words and year are unchanged. */
.mmb-std .site-footer .footer-html-inner p {
	text-wrap: balance;
}