/* ─────────────────────────────────────────────────────────────────────────────────────────────
 * THE TAB BAR ON PHONES (v0.3.1314) -- see includes/tab-bar.php. Its own pair, per her sitewide rule.
 *
 * Nothing here applies until the script has started on a phone-width screen and put `jcp-tabbar-active` on <html>: a
 * computer, a larger tablet or a page whose script failed keeps the theme's header and menu button exactly as today.
 * `em` against her 20px body, never a bare rem. The two colours arrive on the bar from Settings -> Colors.
 * ───────────────────────────────────────────────────────────────────────────────────────────── */
.jcp-tabbar,
.jcp-tabbar-sheet { display: none; }

html.jcp-tabbar-active .jcp-tabbar {
	display: flex;
	position: fixed;
	left: 0;
	right: 0;
	top: var( --jcp-tabbar-top, 0px );
	height: 3.1em;                 /* 62px at her 20px body */
	z-index: 99990;                /* under Raptive's sticky video (99998) and every popup, over the page */
	background: #fff;
	border-bottom: 1px solid #dededf;
	box-shadow: 0 2px 6px rgba( 0, 0, 0, 0.06 );
	font-family: inherit;
	transition: transform 0.25s ease-out, opacity 0.25s ease-out;
}
html.jcp-tabbar-active .jcp-tabbar.is-away {
	transform: translateY( -110% );
	opacity: 0;
	pointer-events: none;
}
/* The room at the top of the page, under the logo bar, where the bar sits before the reader scrolls. */
html.jcp-tabbar-active .jcp-tabbar-space { height: 3.1em; }
.jcp-tabbar-space { height: 0; }

/* Menu is a tab now: the theme's own menu button steps back, and the tab presses it. */
html.jcp-tabbar-active #mobile-header .menu-toggle { visibility: hidden; }

.jcp-tabbar .jcp-tab {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.15em;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: var( --jcp-tabbar-icon, #555557 );
	font: inherit;
	font-size: 0.575em;            /* 11.5px */
	line-height: 1.2;
	letter-spacing: -0.01em;
	text-decoration: none;
	text-transform: none;
	white-space: nowrap;
	box-shadow: none;
	cursor: pointer;
}
.jcp-tabbar .jcp-tab[hidden] { display: none; }
.jcp-tabbar .jcp-tab .jcp-tab-icon { width: 2.78em; height: 2.78em; flex: 0 0 auto; }   /* 32px */
.jcp-tabbar .jcp-tab.is-on,
.jcp-tabbar .jcp-tab[aria-pressed="true"] { color: var( --jcp-tabbar-active, #ff8d69 ); }
.jcp-tabbar .jcp-tab.is-on .jcp-tab-label,
.jcp-tabbar .jcp-tab[aria-pressed="true"] .jcp-tab-label { font-weight: bold; }
.jcp-tabbar .jcp-tab[aria-expanded="true"] { background: #fff4ef; }
.jcp-tabbar .jcp-tab:focus-visible { outline: 2px solid currentColor; outline-offset: -4px; }
.jcp-tabbar .jcp-tab-label { overflow: hidden; text-overflow: ellipsis; max-width: 100%; }

/* JUMP TO: the pattern's main headings, the one she is in marked. */
html.jcp-tabbar-active .jcp-tabbar-sheet:not([hidden]) {
	display: block;
	position: fixed;
	left: 0;
	right: 0;
	top: var( --jcp-tabbar-bottom, 3.1em );
	max-height: calc( 100vh - var( --jcp-tabbar-bottom, 3.1em ) - 2em );
	overflow-y: auto;
	z-index: 99989;
	background: #fff;
	border-top: 1px solid #dededf;
	box-shadow: 0 10px 24px rgba( 0, 0, 0, 0.18 );
	padding: 0.3em 0 0.5em;
	color: var( --jcp-tabbar-icon, #555557 );
}
.jcp-tabbar-sheet-hd {
	margin: 0;
	padding: 0.5em 1em 0.2em;
	font-size: 0.6em;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #9b9b9d;
}
.jcp-tabbar-sheet-list { list-style: none; margin: 0; padding: 0; }
.jcp-tabbar-sheet-list li { margin: 0; padding: 0; }
.jcp-tabbar-sheet-list a {
	display: flex;
	align-items: center;
	gap: 0.6em;
	padding: 0.45em 1em;
	color: inherit;
	font-size: 0.85em;
	text-decoration: none;
}
.jcp-tabbar-sheet-list a::before {
	content: "";
	width: 0.5em;
	height: 0.5em;
	border: 1.5px solid #bad7d2;
	border-radius: 50%;
	flex: 0 0 auto;
}
.jcp-tabbar-sheet-list a.is-here { background: #fff4ef; font-weight: bold; }
.jcp-tabbar-sheet-list a.is-here::before { background: var( --jcp-tabbar-active, #ff8d69 ); border-color: var( --jcp-tabbar-active, #ff8d69 ); }

/* PRINT AND PATTERN ONLY LIVE IN THE BAR on a phone that shows those tabs: the pill keeps only the sizes. The pill's own
   buttons stay in the page, hidden, and the tabs press them -- one print, never a second copy. */
@media ( max-width: 768px ) {
	html.jcp-tabbar-active.jcp-tabs-print .jcp-controls-sticky .jcp-print-button,
	html.jcp-tabbar-active.jcp-tabs-print .jcp-controls-sticky .jcp-menu-print,
	html.jcp-tabbar-active.jcp-tabs-only .jcp-controls-sticky .jcp-pattern-only-btn { display: none !important; }
}

@media ( prefers-reduced-motion: reduce ) {
	html.jcp-tabbar-active .jcp-tabbar { transition: none; }
}
@media print {
	.jcp-tabbar, .jcp-tabbar-sheet, .jcp-tabbar-space { display: none !important; }
}

/* TEXT MODE (v0.3.1349, her audit: "do all 8"): the lit tab black and bold instead of coral. The bar carries its color as an
   inline variable, so it is set on the bar itself. */
body.jcp-text-mode .jcp-tabbar,
body.jcp-text-mode .jcp-tabbar-sheet { --jcp-tabbar-active: #1a1a1a !important; }
body.jcp-text-mode .jcp-tabbar .jcp-tab[aria-expanded="true"] { background: #f0f0f0; }