/* Deliberate additions and differences, loaded LAST.
 *
 * Everything else in assets/css/ is generated by migration/carry_css.py from the
 * live original and must not be hand-edited. Each rule here says why it exists.
 * ------------------------------------------------------------------------- */

/* THE CONTACT FORM'S ERROR STATE. Beaver Builder's form script adds `fl-error`
   to a field group when it fails validation. No capture could see these rules
   because no page load triggers an error, so they are copied verbatim from
   the original's layout CSS (35-layout.css). */
.fl-contact-form .fl-error textarea,
.fl-contact-form .fl-error input[type=text],
.fl-contact-form .fl-error input[type=tel],
.fl-contact-form .fl-error input[type=email] { border-color: #DD4420; }
.fl-contact-form .fl-error .fl-contact-error { display: inline-block; }

/* The back-to-top arrow comes from the itv-back-to-top must-use plugin. Recolour
   it here -- never by editing the plugin. The site's plum, #7b1e3f. */
.to-top {
	--to-top-ink: #ffffff;
	--to-top-surface: #7b1e3f;
	--to-top-border: #5e1730;
}


/* SCREEN-READER-ONLY TEXT. Used for the About page's H1 (the page has no visible
   title) -- read by screen readers and search engines, never drawn. WordPress's
   standard pattern; not in the carried CSS because the original has no such text. */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

/* PAGE TITLES PROMOTED TO H1 (migration/enhance-data.json) must look exactly as
   they did. Measured against the original at 1440, 992, 768 and 390:
   - A paragraph title (home, contact, heart alignment) keeps the paragraph's
     1.45 line-height; as an H1 it took the heading's 1.4 and came up 2-5px short.
   - The disclaimer and privacy titles keep the H2 grey they had; as H1s the
     theme's generic heading colour applied. Heart Alignment's terms heading,
     demoted from H1 to H2, keeps the H1 grey for the same reason. */
.fl-builder-content .fl-rich-text h1.ml-title { line-height: 1.45; }
.fl-builder-content h1.fl-node-odlzs63981r4,
.fl-builder-content h1.fl-node-ftaebwhn3vy2,
.fl-builder-content h2.fl-node-zp73l9x05cro { color: rgb(61, 61, 61); }
/* And no heading margins: the paragraph titles and Quantum Rhyme's nested
   dual-colour heading had none, measured 0/0 on the original; as H1s they took
   the theme's 20px/10px and each hero grew 30px. */
.fl-builder-content .fl-rich-text h1.ml-title,
.fl-builder-content .fl-node-61heul4qj235 .uabb-dual-color-heading h1 { margin-top: 0; margin-bottom: 0; }

/* BUTTON HOVER, DELIBERATELY NOT THE ORIGINAL'S (Gerek, 2026-09-23). On the live
   site the plum buttons' white text turned #2b0e2c on hover -- near-black on
   plum, 1.75:1, the label all but vanished. Two buttons (Emotion Code, Contact)
   showed no hover at all and the MailerLite buttons went charcoal.

   Every button on the site now does the same thing: the fill becomes the
   site's aubergine (#312448, already the footer-link colour), the text stays
   white (14:1), and the button lifts 3px with a soft shadow. Keyboard focus
   gets the same look. !important is needed to beat the carried per-node rules
   (.fl-builder-content .fl-node-x a.fl-button:hover *) and MailerLite's inline
   `#mlb2-<form id> ... .ml-form-embedSubmit button:hover { ... !important }`
   (and the same for .ml-form-horizontalRow), so that chain is repeated here
   with one more class and the two form IDs (Dignified Beauty, Quantum Rhyme).
   It is confined to the hover/focus state. */
.fl-builder-content a.fl-button,
.fl-contact-form input.fl-button,
:is(#mlb2-25357554, #mlb2-20295145).ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody :is(.ml-form-embedSubmit, .ml-form-horizontalRow) button.primary {
	transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.fl-builder-content a.fl-button:is(:hover, :focus-visible),
.fl-contact-form input.fl-button:is(:hover, :focus-visible),
:is(#mlb2-25357554, #mlb2-20295145).ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody :is(.ml-form-embedSubmit, .ml-form-horizontalRow) button.primary:is(:hover, :focus-visible) {
	background: #312448 !important;
	border-color: #312448 !important;
	color: #fff !important;
	transform: translateY(-3px);
	box-shadow: 0 8px 18px rgba(49, 36, 72, .35) !important;
}
.fl-builder-content a.fl-button:is(:hover, :focus-visible) * { color: #fff !important; }
@media (prefers-reduced-motion: reduce) {
	.fl-builder-content a.fl-button,
	.fl-contact-form input.fl-button,
	:is(#mlb2-25357554, #mlb2-20295145).ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody :is(.ml-form-embedSubmit, .ml-form-horizontalRow) button.primary { transition: none; }
	.fl-builder-content a.fl-button:is(:hover, :focus-visible),
	.fl-contact-form input.fl-button:is(:hover, :focus-visible),
	:is(#mlb2-25357554, #mlb2-20295145).ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody :is(.ml-form-embedSubmit, .ml-form-horizontalRow) button.primary:is(:hover, :focus-visible) { transform: none; }
}

/* THE ONE-ROW HEADER, EVERY SCREEN UP TO 992 (Gerek, 2026-09-23; decisions
   A8, then A9 for phones). The original stacks a centred logo over a centred
   menu button on phones and upright iPads (175px); from 769 to 992 it squeezes
   the full menu beside the logo onto two lines. Now one row everywhere below
   desktop: logo left, menu button right, and the list opening full width
   underneath, in the flow. Built on the PHONE header modules (logo
   vxpnorjaum4y, menu olupkfs9v5an), so the open menu behaves as on a phone;
   assets/js/menu.js treats up to 992 as toggle width to match.

   The menu column's wrappers become `display: contents`, so the button and the
   list sit directly in the header's grid: button beside the logo, list on a
   row of its own. The column group's clearfix pseudo-elements would be grid
   items, so they go. */
@media (max-width: 992px) {
	html .fl-node-myqt9poh0c56,
	html .fl-node-clqbip79gvj5 { display: none; }
	html .fl-node-vxpnorjaum4y.fl-visible-mobile,
	html .fl-node-olupkfs9v5an.fl-visible-mobile { display: block; }

	.fl-node-qwtrpi6ue7kc {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: center;
		column-gap: 16px;
		padding: 14px 20px;
	}
	.fl-node-qwtrpi6ue7kc::before,
	.fl-node-qwtrpi6ue7kc::after { display: none; }
	.fl-col.fl-node-foreq9ivt0gp { grid-column: 1; grid-row: 1; width: auto !important; max-width: none; margin: 0; }
	.fl-node-vxpnorjaum4y,
	.fl-node-vxpnorjaum4y .fl-photo-content { text-align: left; }
	.fl-node-vxpnorjaum4y.fl-module-photo { margin: 0; }
	.fl-col.fl-node-fw4b82t05vel,
	.fl-node-fw4b82t05vel > .fl-col-content,
	html .fl-node-olupkfs9v5an.fl-visible-mobile,
	.fl-node-olupkfs9v5an > .fl-module-content,
	.fl-node-olupkfs9v5an .fl-menu { display: contents; }
	.fl-node-olupkfs9v5an .fl-clear { display: none; }

	/* The button: flush right, the icon's edge on the 20px gutter, its padding
	   kept as the tap target. 22px type makes the three bars 31px. */
	.fl-node-olupkfs9v5an .fl-menu .fl-menu-mobile-toggle {
		display: block;
		grid-column: 2;
		grid-row: 1;
		margin: 0 -12px 0 0;
		padding: 12px;
		font-size: 22px;
	}
	.fl-node-olupkfs9v5an nav { grid-column: 1 / -1; grid-row: 2; }
}

/* Phones: the logo 200px wide, not 250, and it gives way further on the
   narrowest (it never pushes the button off the row). The header is 97px
   tall at 390, down from 175. */
@media (max-width: 599px) {
	.fl-node-qwtrpi6ue7kc { padding: 10px 20px; }
	/* The button a quarter smaller than on tablets (Gerek: the 31px bars were
	   too heavy beside a 200px logo): 17px type, 24px bars, still a 48px tap. */
	.fl-node-olupkfs9v5an .fl-menu .fl-menu-mobile-toggle { font-size: 17px; }
	.fl-node-vxpnorjaum4y img.fl-photo-img { width: 200px; max-width: 100%; height: auto; }
}


/* 769-992: the phone menu's own rules stop at 768, and its desktop rules start
   at 769. Carry the phone behaviour up to 992: list hidden until the button
   opens it, items stacked, submenus in the flow instead of hover dropdowns. */
@media (min-width: 769px) and (max-width: 992px) {
	.fl-node-olupkfs9v5an .fl-menu ul.menu { display: none; float: none; }
	.fl-node-olupkfs9v5an .fl-menu .menu > li { display: block; }
	.fl-node-olupkfs9v5an .menu li { border-left: 0; border-top: 1px solid transparent; }
	.fl-node-olupkfs9v5an .menu li:first-child { border-top: 0; }
	.fl-node-olupkfs9v5an .menu .fl-has-submenu .sub-menu {
		position: static;
		visibility: visible;
		opacity: 1;
		min-width: auto;
		padding: 0 0 0 15px;
		background-color: transparent;
		box-shadow: none;
		text-align: center;
	}
	.fl-node-olupkfs9v5an .fl-menu .fl-has-submenu:hover > .sub-menu,
	.fl-node-olupkfs9v5an .fl-menu .fl-has-submenu.focus > .sub-menu { display: none; }
}

/* TEXT COLUMNS FULL WIDTH ON AN UPRIGHT TABLET (Gerek, 2026-09-23; decisions
   A8). From 600 to 768 Beaver Builder caps every "small" column at 400px, so
   Home's "Hi I am Makayla" ran in a 360px strip down the middle while the band
   under it filled the row. The four columns that hold text now fill the row:
   Home's introduction, About's story, Contact's introduction and its form.
   Photographs keep their cap, and the footer stays a centred column. */
@media (min-width: 600px) and (max-width: 768px) {
	.fl-col.fl-node-opj1ny4bqtvx,
	.fl-col.fl-node-i7hv1jd320ao,
	.fl-col.fl-node-r8lkd7awy430,
	.fl-col.fl-node-60yj8sn7wlr5 { max-width: none; }
}

/* HOME'S BOOK BLURB STACKS ON EVERY TABLET. The blurb and the book cover are
   the two columns of a grid box (vasn964t8m7u) that the original makes one
   column only up to 768. From 769 to 992 they stayed side by side inside a
   column already half the row, and at 24px the blurb ran two words to a line
   with the button on three. Now the blurb, its button, then the cover, as on
   an upright iPad -- and the cover centred (sgfjmvi4oe9k is its grid item),
   not pushed against the right edge. */
@media (min-width: 769px) and (max-width: 992px) {
	.fl-builder-content-15 .fl-node-vasn964t8m7u { grid-template-columns: repeat(1, 1fr); place-items: start end; }
}
@media (min-width: 600px) and (max-width: 992px) {
	.fl-builder-content-15 .fl-node-sgfjmvi4oe9k { justify-self: center; }
	.fl-node-bn753p2lrghy.fl-photo-align-right { text-align: center; }
}

/* TABLET TYPE THE GENERATOR CANNOT REACH (decisions A8), 600-992.
   - The footer menu: menus are skipped by migration/responsive_type.py (the header
     is redesigned by hand), so the footer's links are set here, to the 18px
     of the footer's other two lines.
   - The two MailerLite sign-up forms (Dignified Beauty, Quantum Rhyme) carry
     their own CSS inline, ID-scoped and often !important, so no carried sheet
     sets their size. Body text 20px, fields 20px, the button 22px (as the
     site's 18px buttons become), the consent line 16px. `body.fl-builder`
     adds the one class these need to outrank MailerLite's own chains. */
@media (min-width: 600px) and (max-width: 992px) {
	.fl-node-apb81jgnvqrl .fl-menu .menu,
	.fl-node-apb81jgnvqrl .fl-menu .menu > li,
	.fl-node-ayiv306mz87j .fl-menu .menu,
	.fl-node-ayiv306mz87j .fl-menu .menu > li { font-size: 18px; }

	body.fl-builder :is(#mlb2-25357554, #mlb2-20295145).ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedContent p,
	body.fl-builder :is(#mlb2-25357554, #mlb2-20295145).ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody :is(.ml-form-fieldRow, .ml-form-horizontalRow) input { font-size: 20px !important; }
	body.fl-builder :is(#mlb2-25357554, #mlb2-20295145).ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody :is(.ml-form-embedSubmit, .ml-form-horizontalRow) button { font-size: 22px !important; }
	body.fl-builder :is(#mlb2-25357554, #mlb2-20295145).ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-checkboxRow :is(.label-description, label p) { font-size: 16px !important; }
}

/* HEART ALIGNMENT'S THREE STEPS STACK ON EVERY TABLET (decisions A8). The
   original stacks the "Part One / Two / 3" boxes (flex row 4l52foybudiz) only
   up to 768; from 769 to 992 they stayed three across, and at 24px each ran in
   a 220-290px strip. Now one under another, as on an upright iPad. */
@media (min-width: 769px) and (max-width: 992px) {
	.fl-builder-content-65 .fl-node-4l52foybudiz { flex-direction: column; }
}

/* THE TABLET FOOTER, 600-992 (Gerek, 2026-09-23; decisions A9). The original
   stacks everything down the middle up to 768 (logo, icons, badges, four
   links, two lines: 539px on an iPad mini), and from 769 to 992 squeezes three
   desktop columns until "Affiliate Disclosure" and the copyright wrap.
   Now, on every tablet, from the DESKTOP footer's modules:
       [ logo, 300px ]          [ social icons ]
                                [ badges       ]
       ------------------------------------------
       Affiliate Disclosure  Disclaimer  Privacy Policy  Legal
       Makayla Léone - Copyright 2026 · Website by iTech Valet
   The three columns become `display: contents`, so their modules are placed
   in one grid by name. The phone footer's group is hidden (up to 768 it is the
   one that shows). The footer menu's own mobile rules hide its list behind a
   button up to 768; here the list shows, in a row, and the button never does. */
@media (min-width: 600px) and (max-width: 992px) {
	html .fl-col-group.fl-node-dn2wv8x4e0zp { display: none; }
	.fl-col-group.fl-node-wmcydj4nq857 {
		display: grid;
		grid-template-columns: auto 1fr;
		grid-template-areas:
			"logo social"
			"logo badges"
			"menu menu"
			"copy copy";
		align-items: center;
		column-gap: 32px;
		padding: 32px 20px 26px;
	}
	.fl-col-group.fl-node-wmcydj4nq857::before,
	.fl-col-group.fl-node-wmcydj4nq857::after { display: none; }
	html .fl-col.fl-node-hw7jxi8u3sl1,
	html .fl-col.fl-node-6e7awzluo5dq,
	html .fl-col.fl-node-c46lh2gonm78,
	.fl-node-hw7jxi8u3sl1 > .fl-col-content,
	.fl-node-6e7awzluo5dq > .fl-col-content,
	.fl-node-c46lh2gonm78 > .fl-col-content { display: contents; }

	.fl-node-hvrx2faz8ue7 { grid-area: logo; text-align: left; }
	.fl-node-hvrx2faz8ue7.fl-module-photo { margin: 0; }
	.fl-node-hvrx2faz8ue7 .fl-photo-content,
	.fl-node-hvrx2faz8ue7 .fl-photo-img { width: 300px; }

	.fl-node-fzilnsmjkvq8 { grid-area: social; align-self: end; }
	.fl-node-fzilnsmjkvq8 > .fl-module-content { margin: 0 0 14px; }
	.fl-node-fzilnsmjkvq8 .fl-icon-group { justify-content: flex-end; gap: 14px; }
	.fl-node-fzilnsmjkvq8 .fl-icon i,
	.fl-node-fzilnsmjkvq8 .fl-icon i::before { font-size: 36px; }

	.fl-node-w1n2v3cyzrhu { grid-area: badges; align-self: start; text-align: right; }
	.fl-node-w1n2v3cyzrhu.fl-module-photo { margin: 0; }
	.fl-node-w1n2v3cyzrhu .fl-photo-content,
	.fl-node-w1n2v3cyzrhu .fl-photo-img { width: 180px; }

	.fl-node-apb81jgnvqrl { grid-area: menu; }
	.fl-node-apb81jgnvqrl > .fl-module-content {
		margin: 26px 0 0;
		padding-top: 18px;
		border-top: 1px solid rgba(49, 36, 72, .15);
	}
	.fl-node-apb81jgnvqrl .fl-menu .fl-menu-mobile-toggle { display: none; }
	.fl-node-apb81jgnvqrl .fl-menu ul.menu {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		column-gap: 24px;
	}
	.fl-node-apb81jgnvqrl .fl-menu li { border: 0; }

	.fl-node-crsaog6ibp7w { grid-area: copy; justify-self: center; }
	.fl-node-crsaog6ibp7w.fl-module-rich-text { margin-top: 16px; }
	.fl-node-crsaog6ibp7w p { display: inline; margin: 0; }
	/* The line break between the two paragraphs already gives one space. */
	.fl-node-crsaog6ibp7w p + p::before { content: "\00b7\00a0"; }
}

/* "HEART ALIGNMENT" GOES TO ITS PAGE; THE ARROW OPENS ITS DROPDOWN (Gerek,
   2026-09-23; decisions A11). On the original the first tap on the words only
   opened the dropdown. The arrow is a separate button (inc/menu.php,
   assets/js/menu.js); it turns when open, and takes the item's colour, so it
   goes teal with the words on hover and on the current page. */
.fl-menu .fl-has-submenu-container { display: flex; align-items: center; }
.fl-menu .ml-sub-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	cursor: pointer;
}
.fl-menu .ml-sub-toggle svg { display: block; transition: transform .2s ease; }
.fl-menu .ml-sub-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.fl-menu .ml-sub-toggle:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

/* Desktop row: the arrow sits in the link's right padding, so the item grows
   by the arrow alone (12px) and the row barely moves. */
@media (min-width: 993px) {
	.fl-menu .fl-has-submenu-container > a { padding-right: 6px; }
	.fl-menu .ml-sub-toggle { width: 22px; height: 44px; margin-right: 6px; }
}


/* Devices that cannot hover (an iPad held sideways shows the desktop menu):
   no dropdown on :hover, because iOS turns the first tap on the words into a
   hover and swallows the link -- the double tap again. There the arrow opens
   it. */
@media (min-width: 993px) and (hover: none) {
	.fl-node-clqbip79gvj5 .fl-menu .fl-has-submenu:not(.focus):hover > .sub-menu { visibility: hidden; opacity: 0; }
}

/* THE OPENED MENU ON TABLETS AND PHONES, as on Momma's Chiro (Gerek,
   2026-09-23; decisions A12). The original centres the items in small
   uppercase with nothing between them. Now:
   - items left-aligned on the page gutter, each row divided by a hairline,
     and the list starts under a line across the header;
   - bigger type: 22px on tablets and 19px on phones (was 21 and 16), the
     dropdown's items 20px and 17px;
   - "Heart Alignment" keeps its words on the left (a link to its page) and
     its arrow on the right edge, a 48px target; the arrow turns when open;
   - the dropdown is indented behind a plum line, like Momma's pink one;
   - the page you are on is plum and semi-bold instead of pale teal (teal on
     white is 1.9:1; plum is 10:1). */
@media (max-width: 992px) {
	.fl-node-olupkfs9v5an .fl-menu ul.menu {
		margin-top: 14px;
		border-top: 1px solid rgba(123, 30, 63, .18);
		text-align: left;
	}
	.fl-node-olupkfs9v5an .fl-menu .menu { justify-content: flex-start; }
	.fl-node-olupkfs9v5an .fl-menu .menu > li,
	.fl-node-olupkfs9v5an .fl-menu .menu > li:first-child { border: 0; border-bottom: 1px solid rgba(123, 30, 63, .12); }
	.fl-node-olupkfs9v5an .menu a { padding: 16px 0; letter-spacing: .03em; }

	.fl-menu .fl-has-submenu-container { justify-content: space-between; }
	.fl-menu .fl-has-submenu-container > a { flex: 1; }
	.fl-menu .ml-sub-toggle { width: 48px; height: 48px; flex: none; margin-right: -14px; }
	.fl-menu .ml-sub-toggle svg { width: 16px; height: 11px; }

	/* Six classes: the carried `.fl-menu .menu-item.fl-has-submenu .sub-menu
	   { padding: 0 }` (768 and under) has five. */
	.fl-node-olupkfs9v5an .fl-menu .menu li.menu-item.fl-has-submenu ul.sub-menu {
		margin: 0 0 14px 2px;
		padding-left: 18px;
		border-left: 2px solid #7b1e3f;
	}
	.fl-node-olupkfs9v5an .fl-menu .sub-menu li,
	.fl-node-olupkfs9v5an .fl-menu .sub-menu li:first-child { border: 0; }
	.fl-node-olupkfs9v5an .menu .sub-menu a { padding: 11px 0; }

	.fl-node-olupkfs9v5an .menu-item :is(:focus, a:hover, .fl-has-submenu-container:hover > *),
	.fl-node-olupkfs9v5an .current-menu-item > a,
	.fl-node-olupkfs9v5an .current-menu-item > .fl-has-submenu-container > * { color: #7b1e3f; }
	.fl-node-olupkfs9v5an .current-menu-item > a,
	.fl-node-olupkfs9v5an .current-menu-item > .fl-has-submenu-container > a { font-weight: 600; }
}
@media (min-width: 600px) and (max-width: 992px) {
	.fl-node-olupkfs9v5an .fl-menu .menu,
	.fl-node-olupkfs9v5an .fl-menu .menu > li { font-size: 22px; }
	.fl-node-olupkfs9v5an .fl-menu .menu .sub-menu > li { font-size: 20px; }
}
@media (max-width: 599px) {
	.fl-node-olupkfs9v5an .fl-menu .menu,
	.fl-node-olupkfs9v5an .fl-menu .menu > li { font-size: 19px; }
	.fl-node-olupkfs9v5an .fl-menu .menu .sub-menu > li { font-size: 17px; }
}