/*
Theme Name:  Kawah Buku Press
Theme URI:   https://press.kawahbuku.com
Author:      Kawah Buku
Description: Block theme for the Penerbitan Kawah Buku catalogue. Renders the book post type registered by the kb-press-core plugin. Header and footer reproduce Aurum's measurements so the two sites line up; palette and type tokens are shared with the main site's child theme.
Version:     0.42.0
Requires at least: 6.7
Tested up to: 7.1
Requires PHP: 8.1
License:     GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: kb-press
Tags:        block-patterns, full-site-editing, custom-colors, custom-menu
*/

/* ==========================================================================
   Tokens

   Names and values mirror the main site's child theme so both codebases can
   be maintained against one palette. Do not fork these; if a colour changes
   on kawahbuku.com it changes here too.

   Contrast against --kb-chrome (#ECE7DE):
     --kb-ink          14.9:1   any size
     --kb-body          5.9:1   any size
     --kb-primary-deep  6.9:1   any size
     --kb-muted         3.0:1   FAILS - never for text on chrome
     --kb-primary       2.0:1   FAILS - wordmark and rules only

   Against --kb-utility (#222):
     --kb-primary       6.6:1   passes, the one place the brand gold is text
   ========================================================================== */

:root {
	--kb-card:          #FFFFFF;
	--kb-surface:       #FBFAF8;
	--kb-chrome:        #ECE7DE;
	--kb-utility:       #222222;
	--kb-utility-text:  #AFAFAF;
	--kb-border:        #E4DFD6;
	--kb-border-hover:  #C9C2B6;
	--kb-ink:           #17140F;
	--kb-body:          #5C564C;
	--kb-muted:         #8C8576;
	--kb-primary:       #C69C6D;
	--kb-primary-deep:  #5C4A2E;
	--kb-action:        #1E1E1E;

	/* Aurum measurements, reproduced so both sites align.
	   The top bar figures come from the child theme's kb-header.css, which
	   overrides Aurum's 10px/14px: the taller strip claimed a band of the
	   page rather than sitting above it. */
	--kb-max:           1170px;   /* Bootstrap 3 container at >=1200px      */
	--kb-gutter:        15px;     /* .container padding-left/right          */
	--kb-topbar-pad:    5px;      /* .top-menu.top-menu padding: 5px 0      */
	--kb-topbar-size:   13px;     /* .top-menu.top-menu font-size           */
	--kb-topbar-min:    36px;     /* .top-menu.top-menu min-height          */
	--kb-nav-size:      16px;     /* header ul.nav > li > a font-size       */
	--kb-nav-pad-y:     25px;     /* header ul.nav > li > a padding         */
	--kb-nav-pad-x:     20px;
	--kb-logo-max:      38px;     /* the press wordmark is two lines where the
	                                 main site's is one, so it is capped to
	                                 keep both header bars the same height */
	--kb-menu-offset:   40px;     /* .header-menu .main-menu padding-left   */
	--kb-widget-gap:    20px;     /* .header-widgets li + li margin-left    */
	--kb-tools-gap:     28px;     /* Subjects to search. Aurum's 20px reads
	                                 tight when one side is a word and the
	                                 other a bare icon. */

	/* Variables, not literals, so the accessibility plugin's OpenDyslexic
	   switch can override them without !important. If a third family is ever
	   added to that plugin's override list, --kb-font-serif belongs in it. */
	--kb-font-body:     Poppins, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--kb-font-heading:  Overpass, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

	/* Book subtitles and the role after a name, both italic. The main site has
	   no serif, so this one is the press site's own: it appears where a book
	   is being described rather than in the chrome, which is why the two sites
	   still read as one organisation. */
	--kb-font-serif:    Lora, Georgia, "Times New Roman", serif;
}


/* ==========================================================================
   Base
   ========================================================================== */

html { -webkit-text-size-adjust: 100%; }

body {
	font-synthesis-weight: none;
	text-rendering: optimizeLegibility;
}

.kb-measure { max-width: 68ch; }

::selection { background: var(--kb-primary); color: var(--kb-ink); }

:where(a, button, input, select, summary):focus-visible {
	outline: 2px solid var(--kb-primary-deep);
	outline-offset: 3px;
	border-radius: 1px;
}

.kb-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 999;
	padding: 0.75rem 1.25rem;
	background: var(--kb-ink);
	color: #fff;
	font-family: var(--kb-font-heading);
	text-decoration: none;
}
.kb-skip-link:focus { left: 0; }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* Aurum's .container, reproduced. */
.kb-bar {
	display: flex;
	align-items: center;
	max-width: var(--kb-max);
	margin-inline: auto;
	padding-inline: var(--kb-gutter);
	width: 100%;
}
.kb-bar--between { justify-content: space-between; }

/* The footer stacks its rows rather than laying them side by side, but keeps
   the same container width so its columns line up with the header. */
.kb-bar--stack { display: block; }


/* ==========================================================================
   Header

   Aurum lays the main bar out as a table: logo at width 1%, menu in the next
   cell with 40px of left padding, widgets floated right. Flexbox gets to the
   same place, and the key point is that the nav sits hard against the logo
   rather than centred in the bar.
   ========================================================================== */

/* WordPress's flow layout puts margin-block-start on every child after the
   first, so theme.json's 1.5rem blockGap was opening a 24px chrome-coloured
   band between the dark utility bar and the logo. The bars set their own
   height; nothing between them should add to it. */
.kb-header > *,
.kb-footer > *,
.kb-header__main > *,
.kb-header__utility > * { margin-block: 0; }

.kb-header { background: var(--kb-chrome); }


/* --- Utility bar --------------------------------------------------------- */

.kb-header__utility {
	background: var(--kb-utility);
	padding-block: var(--kb-topbar-pad);
	min-height: var(--kb-topbar-min);
	font-family: var(--kb-font-heading);
	font-size: var(--kb-topbar-size);
	line-height: 1;
	color: var(--kb-utility-text);

	/* A column container reproduces block behaviour for the child while
	   justify-content does the vertical centring. A row container would let
	   the inner bar shrink-to-fit below the container breakpoints. */
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.kb-header__utility a {
	color: var(--kb-utility-text);
	text-decoration: none;
	transition: color 200ms ease-in-out;
}
.kb-header__utility a:hover,
.kb-header__utility a:focus-visible { color: #FAFAFA; }

.kb-header__utility :focus-visible { outline-color: var(--kb-primary); }

.kb-header__utility .wp-block-navigation {
	font-family: var(--kb-font-heading);
	font-size: var(--kb-topbar-size);
	font-weight: 400;
}
.kb-header__utility .wp-block-navigation-item {
	position: relative;
	margin-right: 30px;
}
.kb-header__utility .wp-block-navigation-item:last-child { margin-right: 0; }

/* Aurum divides top bar items with a hairline rather than spacing alone. */
.kb-header__utility .wp-block-navigation-item:not(:last-child)::before {
	position: absolute;
	content: "";
	width: 1px;
	height: 10px;
	background-color: rgba(255, 255, 255, 0.2);
	right: -16px;
	top: 50%;
	transform: translateY(-50%);
}
.kb-header__utility .wp-block-navigation-item__content {
	color: var(--kb-utility-text);
	text-decoration: none;
}
.kb-header__utility .wp-block-navigation-item__content:hover,
.kb-header__utility .wp-block-navigation-item__content:focus-visible {
	color: #FAFAFA;
	text-decoration: none;
}

/* The only outbound conversion on the site, and the only place the real
   brand gold clears contrast as text. Everywhere else it is a mark. */
.kb-utility-cta {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-weight: 600;
	color: var(--kb-primary) !important;
	white-space: nowrap;
}
.kb-utility-cta:hover,
.kb-utility-cta:focus-visible { color: #E0BC93 !important; }
.kb-utility-cta__icon { flex: none; opacity: 0.85; }


/* --- Main bar ------------------------------------------------------------ */

.kb-header__main { border-bottom: 1px solid var(--kb-border-hover); }

.kb-header__brand {
	display: flex;
	align-items: center;
	gap: var(--kb-menu-offset);
	min-width: 0;
}

.kb-header .wp-block-site-logo {
	margin: 0;
	display: flex;
	align-items: center;
	flex: none;
}
.kb-header .wp-block-site-logo a {
	display: block;
	line-height: 0;   /* an inline img sits on a text baseline; without this
	                     it inherits the body's 1.65 leading */
}
.kb-header .wp-block-site-logo img {
	display: block;
	height: auto;
	width: auto;
	max-height: var(--kb-logo-max);
	max-width: 100%;
}

/* Nothing inside the bars carries vertical margin; the nav anchor's padding
   is the only thing setting the bar's height, exactly as in Aurum. */
.kb-header__brand > *,
.kb-header__tools > * { margin-block: 0; }

/* Stretch, not centre. A centred nav item leaves a strip of bar above and
   below it, and the hover background then floats in the middle instead of
   filling the bar. */
.kb-header__main > .kb-bar,
.kb-header__brand { align-items: stretch; }

.kb-header__brand .wp-block-navigation,
.kb-header__brand .wp-block-navigation__container,
.kb-header__brand .wp-block-navigation-item {
	align-items: stretch;
	height: 100%;
}

.kb-header__brand .wp-block-navigation {
	font-family: var(--kb-font-heading);
	font-size: var(--kb-nav-size);
	font-weight: 400;
}

/* Aurum puts the padding on the anchor, which is what gives the bar its
   height and makes the hit area the full bar. It also uppercases the nav at
   weight 400 — that casing is most of what makes the two headers read as one
   site, so it is not a detail to drop. */
.kb-header__brand .wp-block-navigation-item__content {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: var(--kb-nav-pad-y) var(--kb-nav-pad-x);
	line-height: 1.25;
	font-weight: 400;
	text-transform: uppercase;
	color: var(--kb-ink);
	text-decoration: none;
	transition: background-color 180ms ease-in-out, color 180ms ease-in-out;
}

/* Colour shift only, no background wash. Aurum lightens the item behind the
   label, but the Subjects trigger beside it cannot do that without looking
   like a button, and two controls in one bar behaving differently reads as
   unfinished. Consistency across the bar wins over fidelity to Aurum here. */
.kb-header__brand .wp-block-navigation-item:hover > .wp-block-navigation-item__content,
.kb-header__brand .wp-block-navigation-item__content:hover,
.kb-header__brand .wp-block-navigation-item__content:focus-visible {
	color: var(--kb-primary-deep);
	background-color: transparent;
	text-decoration: none;
}

/* A 2px rule under the label, inset by the anchor's horizontal padding rather
   than spanning the full hit area — Aurum draws it with a hidden :after that
   is simply revealed on the current item. */
.kb-header__brand .wp-block-navigation-item__content::after {
	position: absolute;
	left: var(--kb-nav-pad-x);
	right: var(--kb-nav-pad-x);
	bottom: calc(var(--kb-nav-pad-y) - 8px);
	content: "";
	height: 2px;
	background: var(--kb-primary-deep);
	visibility: hidden;
}
.kb-header__brand .current-menu-item > .wp-block-navigation-item__content,
.kb-header__brand .current_page_item > .wp-block-navigation-item__content {
	color: var(--kb-primary-deep);
}
.kb-header__brand .current-menu-item > .wp-block-navigation-item__content::after,
.kb-header__brand .current_page_item > .wp-block-navigation-item__content::after {
	visibility: visible;
}
/* ==========================================================================
   The Books dropdown

   A full-bleed horizontal strip under the bar, not a floating box. Ported from
   the store's "MAIN MENU — FLAT HORIZONTAL DROPDOWN", technique and
   measurements both: 17px/34px padding, 6px/38px gaps, 15px links, sentence
   case.

   TWO BOXES, NOT ONE — and this is the part that is not obvious. The sheet has
   to align to the viewport; the links have to align to BOOKS. Those are
   different alignment systems and one box cannot satisfy both. So the <ul>
   stays anchored to its own item and hugs its content, and a pseudo-element
   paints the sheet behind it.

   The sheet overshoots by 100vw on each side rather than using width: 100vw.
   It is positioned against BOOKS, so it has no way to know where the viewport
   edges are, and 100vw centred on BOOKS still falls short on whichever side
   BOOKS is further from. The overshoot is trimmed by overflow-x: clip on the
   header.

   DO NOT set the item to position: static to reach the header instead. It
   works, and it centres the links on the viewport rather than on BOOKS, which
   is a different design — and the store's comment records that on that site it
   also lands the sheet on a Bootstrap column and comes out 1170px wide.

   Everything about showing and hiding it is core's: the item is a
   navigation-submenu block, and core handles hover, focus-within and the
   keyboard. What is here is the shape.

   ON SPECIFICITY, WHICH TOOK TWO ATTEMPTS. Core's base rule for the container
   is .wp-block-navigation .has-child .wp-block-navigation__submenu-container —
   three classes. But the rule that actually sizes an OPEN submenu is the hover
   one, and that is .wp-block-navigation .has-child:hover > .wp-block-
   navigation__submenu-container: three classes and a pseudo-class, which
   counts the same as four. It sets width: auto and min-width: 200px.

   A four-class selector therefore only ties with it, and core's stylesheet is
   printed after the theme's, so the tie goes to core: the strip came out at
   whatever width was available beside BOOKS and wrapped its four links onto
   two lines. The container class is repeated below to make five, which clears
   it. The rules nested inside are already deeper and need no help.
   ========================================================================== */

/* Trims the sheet's overshoot to the viewport. overflow-y: visible is explicit
   and load-bearing: it keeps the strip from being cut off at the header's
   bottom edge, and it is only legal alongside clip. The mobile drawer is
   unaffected — it spans the header's own width — and the search overlay and
   Subjects panel are rendered into the footer, so they are not descendants of
   this at all. */
.kb-header {
	overflow-x: clip;
	overflow-y: visible;
}

.kb-header__brand .wp-block-navigation .has-child
	> .wp-block-navigation__submenu-container.wp-block-navigation__submenu-container {
	left: 50%;
	transform: translateX( -50% );
	width: max-content;
	min-width: 0;
	max-width: none;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px 38px;
	/* Horizontal padding is hit area, not decoration: the box is only as wide
	   as its links, and a narrow target makes the pointer trip on its way down
	   from BOOKS. */
	padding: 17px 34px;
	background: none;
	border: 0;
	z-index: 998;
}

/* The sheet. Negative z-index keeps it behind the links but inside the strip's
   own stacking context, so it paints above the header's background and below
   its own content — no extra element in the markup. */
.kb-header__brand .wp-block-navigation .has-child
	> .wp-block-navigation__submenu-container.wp-block-navigation__submenu-container::before {
	content: "";
	position: absolute;
	z-index: -1;
	top: 0;
	bottom: 0;
	left: -100vw;
	right: -100vw;
	background: var(--kb-card);
	border-top: 1px solid var(--kb-chrome);
	border-bottom: 1px solid var(--kb-chrome);
	box-shadow: 0 12px 24px rgba( 23, 20, 15, 0.06 );
}

/* Static, so a row cannot open a stacking context of its own and paint over
   the sheet behind it. Also undoes the stretch height the bar above needs. */
.kb-header__brand .wp-block-navigation .has-child > .wp-block-navigation__submenu-container > .wp-block-navigation-item {
	position: static;
	height: auto;
	align-items: center;
}

/* Sentence case at a reading size. The bar above is uppercase because it is
   chrome; these are destinations, and four uppercase words under it would read
   as a second bar rather than as its contents. */
.kb-header__brand .wp-block-navigation .has-child > .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: 4px 0;
	font-size: 15px;
	font-weight: 400;
	line-height: 1.3;
	letter-spacing: 0;
	text-transform: none;
	color: var(--kb-ink);
	white-space: nowrap;
	background: none;
}

/* The store hovers these to the brand gold. Gold on white is 2.0:1 and fails,
   which is the same reason the drawer's bookstore link uses the deep tone, so
   it does here too. */
.kb-header__brand .wp-block-navigation .has-child > .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
.kb-header__brand .wp-block-navigation .has-child > .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus-visible {
	color: var(--kb-primary-deep);
	background: none;
	text-decoration: none;
}

/* The 2px rule belongs to the bar, not to the strip under it. */
.kb-header__brand .wp-block-navigation .has-child > .wp-block-navigation__submenu-container .wp-block-navigation-item__content::after {
	content: none;
}

/* No chevron on the parent. The store shows none, and core's indicator is a
   sibling of the anchor — it would sit outside the padding that gives the bar
   its height and land in the gap between two items. */
.kb-header__brand .wp-block-navigation__submenu-icon { display: none; }

/* The parent takes the bar's own underline while its strip is open, the way
   the store does it. */
.kb-header__brand .wp-block-navigation-item.has-child:hover > .wp-block-navigation-item__content::after,
.kb-header__brand .wp-block-navigation-item.has-child:focus-within > .wp-block-navigation-item__content::after {
	visibility: visible;
}

/* And keeps it on the pages its children point at. BOOKS can never be
   "current" itself — it points at "#" — so it borrows the state from whichever
   child is, which is why the rule shows on /books/ and /forthcoming/ alike. */
.kb-header__brand .wp-block-navigation-item.has-child:has( .current-menu-item )
	> .wp-block-navigation-item__content::after { visibility: visible; }

.kb-header__brand .wp-block-navigation-item.has-child:has( .current-menu-item )
	> .wp-block-navigation-item__content { color: var(--kb-primary-deep); }


/* Both controls sit on one 20px line box so the magnifier's optical centre
   lines up with the cap height of SUBJECTS beside it. Without a shared
   height the icon rides a few pixels high. */
.kb-header__tools {
	display: flex;
	align-items: center;
	gap: var(--kb-tools-gap);
	flex: none;
}

.custom-search-trigger-container { display: flex; align-items: center; }

.custom-search-trigger {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 20px;
	color: var(--kb-ink);
	line-height: 1;
	text-decoration: none;
	transition: color 190ms ease-in-out;
}
.custom-search-trigger:hover,
.custom-search-trigger:focus-visible { color: var(--kb-primary-deep); }
.custom-search-trigger svg { display: block; }

.kb-subjects-trigger {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	height: 20px;
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
	font-family: var(--kb-font-heading);
	font-size: var(--kb-nav-size);
	font-weight: 400;
	text-transform: uppercase;
	color: var(--kb-ink);
	text-decoration: none;
	line-height: 1;
	transition: color 190ms ease-in-out;
}
.kb-subjects-trigger__icon { display: block; }
.kb-subjects-trigger__label { line-height: 1; }
.kb-subjects-trigger:hover,
.kb-subjects-trigger:focus-visible,
.kb-subjects-trigger[aria-expanded="true"] { color: var(--kb-primary-deep); }
.kb-subjects-trigger__icon { color: var(--kb-primary-deep); flex: none; }

/* ==========================================================================
   Footer

   Aurum: padding 40px 0, three col-sm-4 widget columns each with 30px of
   bottom margin, then a bottom strip with a 1px top border, 40px of top
   padding and 20px of top margin.
   ========================================================================== */

.kb-footer {
	background: var(--kb-chrome);
	border-top: 1px solid var(--kb-border-hover);
	padding-block: 40px;
	font-size: 16px;
	color: var(--kb-body);
}

.kb-footer .wp-block-columns { margin-bottom: 0; }
.kb-footer .wp-block-column { margin-bottom: 30px; }

.kb-footer .kb-footer__heading {
	font-family: var(--kb-font-heading);
	font-size: 16px;
	font-weight: 500;
	letter-spacing: 0;
	color: var(--kb-ink);
	margin: 0 0 15px;
}

.kb-footer .kb-footer__nav {
	font-family: var(--kb-font-body);
	font-size: 15px;
	font-weight: 400;
}

/* Menus are Navigation blocks, so the colour has to be set on the block's
   own selector rather than a bare `a`. */
.kb-footer .wp-block-navigation-item__content {
	color: var(--kb-body);
	text-decoration: none;
	transition: color 190ms ease-in-out;
}
.kb-footer .wp-block-navigation-item__content:hover,
.kb-footer .wp-block-navigation-item__content:focus-visible {
	color: var(--kb-primary-deep);
	text-decoration: underline;
}

.kb-footer a { color: var(--kb-body); text-decoration: none; }
.kb-footer a:hover,
.kb-footer a:focus-visible { color: var(--kb-primary-deep); text-decoration: underline; }

.kb-footer .wp-block-social-links .wp-social-link { background: transparent; }
.kb-footer .wp-block-social-links .wp-social-link a { color: var(--kb-body); }
.kb-footer .wp-block-social-links .wp-social-link:hover a { color: var(--kb-primary-deep); }

.kb-footer__bottom {
	border-top: 1px solid var(--kb-border-hover);
	padding-top: 40px;
	margin-top: 20px;
	font-size: 14px;
}

.kb-footer__legal { max-width: 100%; }

/* theme.json's 1.5rem blockGap was pushing the legal links well clear of the
   copyright line; on the main site they sit directly beneath it. */
.kb-footer__legal > * { margin-block: 0; }
.kb-footer__legal p,
.kb-footer__copyright { margin: 0 0 4px; line-height: 1.5; }

/* Aurum separates the legal links with a 1px rule rather than a bullet. */
.kb-footer__nav--inline { font-size: 14px; }
.kb-footer__nav--inline .wp-block-navigation-item { position: relative; }
.kb-footer__nav--inline .wp-block-navigation-item:not(:last-child)::after {
	content: "";
	display: inline-block;
	height: 10px;
	width: 1px;
	margin: 0 10px;
	background: var(--kb-border-hover);
	vertical-align: middle;
}

.kb-footer__mark figure { margin: 0; }
.kb-footer__mark img { max-height: 25px; width: auto; opacity: 0.85; }


/* The page box.

   Reproduces .kb-bar so a page's content edge lines up with the header: a
   1170px outer with a 15px gutter, giving 1140px of content. It lived in
   kb-book.css until the front page needed it too — a second copy is how two
   pages end up 15px apart from each other. Vertical padding stays with
   whatever is using it, because a band and a book page want different
   amounts. */
.kb-shell {
	max-width: var(--kb-max);
	margin-inline: auto;
	padding-inline: var(--kb-gutter);
	width: 100%;
	box-sizing: border-box;
}


/* A label only a screen reader should read.

   It belongs here rather than in a feature stylesheet because three features
   need it: the mobile menu button, the cover downloads and the Buy link. It
   was in kb-book.css, which loads on book pages only — so the menu button
   read "Menu" in plain text beside its icon on every other page. */
.kb-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}


/* ==========================================================================
   Mobile
   ========================================================================== */

@media (max-width: 781px) {
	:root {
		--kb-nav-pad-y:   16px;
		--kb-nav-pad-x:   12px;
		--kb-logo-max:    34px;
		--kb-menu-offset: 16px;
	}

	/* The utility strip is hidden below this width by kb-mnav.css, and its
	   contents — the bookstore CTA and the two links opposite it — reappear
	   at the foot of the drawer. These rules are what it looked like when it
	   survived on mobile; kept because reverting is deleting one line there
	   and uncommenting these. */
	.kb-header__utility .wp-block-navigation { display: none; }
	.kb-header__utility .kb-bar { justify-content: center; }
	.kb-utility-cta { font-size: 12px; white-space: normal; text-align: center; }


	.kb-footer { padding-block: 30px; }
	.kb-footer__bottom { padding-top: 24px; }

	/* The motto drops under the legal links rather than sitting beside them.

	   It fits on one line at this width, which is why it never wrapped on its
	   own — but a wordmark tucked against the right edge of a phone reads as
	   something that got pushed there rather than placed, and the store stacks
	   it. It is also the one thing on the page sharing a corner with the
	   accessibility toggle, which is anchored bottom-right everywhere.

	   Two declarations, and they are two different problems. The row in
	   parts/footer.html already wraps, so a full-width flex item is enough to
	   put it on a line of its own. Getting it to the LEFT of that line is the
	   second: .kb-footer__mark is itself a flex group with justifyContent
	   "right", so nothing done to the image inside it could ever have moved
	   it — the container had to be told. Two classes clears the generated
	   .wp-container-* layout rule that sets it. */
	.kb-footer__bottom .kb-footer__mark {
		flex: 0 0 100%;
		justify-content: flex-start;
	}
}