/**
 * Help Center — plugin-specific frontend overrides.
 *
 * The main help-theme stylesheets (libs/common/home/client_default/
 * article/category) are loaded via <link> tags in templates/header-help.php.
 * This file is enqueued afterwards (via HelpCenter\Frontend on Help Center
 * pages) and holds plugin-only tweaks — notably the native search form which
 * replaces the AJAX Search Lite widget used by the source theme, and the
 * typography base layer that puts the old system's sizes and spacing on the
 * bare Gutenberg block markup (colors stay neutral; no !important, so
 * author and core block styles always win).
 *
 * @package HelpCenter
 */

/* ---------- Header search form (native, replaces AJAX Search Lite) ---------- */
.csh-search-form {
	position: relative;
	display: flex;
	align-items: stretch;
	width: 100%;
	max-width: 640px;
	border: 1px solid #e6e9ee;
	border-radius: 10px;
	overflow: hidden;
	background: #fff;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .06);
}

.csh-search-form-icon {
	position: absolute;
	top: 50%;
	right: 14px;
	transform: translateY(-50%);
	width: 18px;
	height: 18px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239aa3b2' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5L20.5 20.5'/%3E%3C/svg%3E") center / contain no-repeat;
	pointer-events: none;
}

/* The ported common.min.css ships a bare `input` rule (height:46px,
 * line-height:28px, text-align:center) that leaks onto this input and parks
 * the placeholder in the middle of the box. Both controls get an explicit
 * height + matching line-height instead, so the input text and the button
 * label share one optical line no matter what vertical metrics the active
 * font carries (Peyda's tall ascent/descent otherwise drops the button label
 * a few pixels below the input text). Height matches what the global rule
 * already produced, so the box size does not change.
 *
 * The same bare rule also sets width:200px, which becomes this input's flex
 * basis; a flex item's automatic minimum kept it at ~200px (padding
 * included) on narrow screens, so the row overflowed its hidden clip edge
 * and chopped the submit button — 37px of it at 390px viewports, none at
 * all at 320px. min-width:0 lets the input shrink and the button keep its
 * full size. */
.csh-search-form-input {
	flex: 1 1 auto;
	min-width: 0;
	border: 0;
	height: 46px;
	box-sizing: border-box;
	padding: 0 42px 0 16px;
	line-height: 46px;
	text-align: start;
	font-size: 14px;
	background: transparent;
	outline: none;
	color: #1a1f36;
}

.csh-search-form-submit {
	flex: 0 0 auto;
	border: 0;
	height: 46px;
	box-sizing: border-box;
	line-height: 46px;
	cursor: pointer;
	padding: 0 22px;
	font-size: 14px;
	color: #fff;
	background-color: #000080; /* matches the navy header band */
	transition: background-color .2s ease;
}

.csh-search-form-submit:hover {
	background-color: #000060;
}

/* Category badges ship #476DA5 in the ported common.min.css; the landing
 * palette fills chips with the button blue instead. */
.csh-category-badge {
	background-color: #0000ff;
}

.csh-search-form-input::placeholder {
	color: #9aa3b2;
}

/* ---------- Live search results dropdown ---------- */
.csh-search-results {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	right: 0;
	margin: 0 auto;
	max-width: 640px;
	background: #fff;
	border: 1px solid #e6e9ee;
	border-radius: 10px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
	overflow: hidden;
	z-index: 50;
}

.csh-search-results[hidden] {
	display: none;
}

.csh-search-results-list {
	list-style: none;
	margin: 0;
	padding: 6px;
	max-height: 360px;
	overflow-y: auto;
}

.csh-search-result {
	display: block;
	padding: 10px 12px;
	border-radius: 8px;
	text-decoration: none;
	color: #1a1f36;
	transition: background-color .15s ease;
}

.csh-search-result:hover,
.csh-search-result:focus {
	background-color: #f2f6fa;
}

.csh-search-result-title {
	display: block;
	font-weight: 600;
	line-height: 1.5;
}

.csh-search-result-excerpt {
	display: block;
	margin-top: 2px;
	font-size: 12px;
	color: #6b7280;
	line-height: 1.5;
}

.csh-search-results-empty {
	padding: 14px 16px;
	color: #6b7280;
	text-align: center;
}

.csh-search-results-more {
	display: block;
	padding: 10px 12px;
	text-align: center;
	text-decoration: none;
	color: #000080; /* landing navy */
	border-top: 1px solid #f0f2f5;
	background: #fafbfc;
}

.csh-search-results-more:hover {
	background: #f2f6fa;
}

/* ---------- Header: logo beside the search box ----------
 * The shell puts the logo in its own row (.csh-header-main, removed) above
 * the centered title and search. Per the 2026-10-07 decision the logo now
 * sits at the row's start edge with the search box right beside it, at
 * every width. These rules carry the header .csh-wrapper prefix on purpose:
 * the ported theme styles .csh-header-search at that specificity (display/
 * width/margins), so tying it and printing later is what makes the row
 * ours. The logo anchor keeps its .csh-header-main-logo class but the old
 * sizing rules needed the removed .csh-header-main ancestor, so image
 * sizing lives here now (45px desktop, 26px narrow screens — the source
 * design's mobile logo size; the PNG is ~4.7:1, so 45px is ~213px wide and
 * would squeeze the form on phones).
 *
 * The results dropdown is absolutely positioned with left:0;right:0, so it
 * centers inside its nearest positioned ancestor. That used to be the
 * search row; .csh-header-search-box now wraps form + dropdown and takes
 * that role, keeping the dropdown exactly under the form instead of under
 * the wider row. */
header .csh-wrapper .csh-header-search {
	display: flex;
	align-items: center;
	gap: 20px;
	width: 100%;
	margin: 0 auto;
	/* The ported rule fades the whole row (logo included) to .75 and only
	 * brightens it on hover. With the logo living in this row now, pin the
	 * opacity so nothing shifts under the cursor. */
	opacity: 1;
}

header .csh-wrapper .csh-header-search .csh-header-main-logo {
	flex: 0 0 auto;
	display: block;
}

header .csh-wrapper .csh-header-search .csh-header-main-logo img {
	display: block;
	height: 45px;
	width: auto;
}

.csh-header-search-box {
	position: relative;
	flex: 1 1 auto;
	min-width: 0;
	max-width: 640px;
}

@media screen and (max-width:600px) {
	header .csh-wrapper .csh-header-search {
		gap: 12px;
	}

	header .csh-wrapper .csh-header-search .csh-header-main-logo img {
		height: 26px;
	}
}

/* ---------- Category card titles: single line ----------
 * The source theme clamps these to 2 lines (-webkit-line-clamp:2 via
 * .csh-text-ellipsis-multiline-lines-2), which makes short titles look
 * broken across two lines. Clamp to one line instead. */
.csh-category-item h6.csh-text-ellipsis-multiline {
	-webkit-line-clamp: 1;
	line-clamp: 1;
}

/* ---------- Category list (wp_list_categories sidebar) ----------
 * Spacing between list items (Bootstrap list styling is no longer present once
 * the active theme's assets are stripped from Help Center pages). */
.cat-item {
	margin-bottom: 10px;
}


/* ---------- Search-results pagination ----------
 * Self-contained prev/status/next nav for the help search-results page: the
 * help asset bundle ships neither Bootstrap (.pagination) nor the FontAwesome
 * chevrons that pp_pagination_nav() relies on. */
.csh-search-pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	margin: 28px 0 8px;
}

.csh-search-pagination a,
.csh-search-pagination-status {
	display: inline-block;
	padding: 8px 18px;
	border: 1px solid #e6e9ee;
	border-radius: 10px;
	background: #fff;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .06);
}

.csh-search-pagination a {
	color: #000080; /* landing navy */
	text-decoration: none;
}

.csh-search-pagination a:hover,
.csh-search-pagination a:focus {
	border-color: #000080;
}

/* ---------- Code blocks (wp-block-code) in help articles ----------
 * Scoped to the article-content wrapper so nothing outside the Help
 * Center is affected. frontend.js wraps each block in .help-code (the
 * non-scrolling anchor for the chip + copy button), splits the code into
 * .help-code-line spans and sets data-help-code. The block itself is
 * forced LTR (code reads left-to-right even on the RTL help pages) and
 * scrolls horizontally instead of wrapping, so lines stay intact. Line
 * numbers live on each line's ::before and are position:sticky — they
 * stay pinned at the left edge while the code scrolls under them. */
.csh-article-content-text .help-code {
	position: relative;
	margin: 20px 0;
}

.csh-article-content-text pre.wp-block-code {
	direction: ltr;
	text-align: left;
	background: #f6f8fa;
	border: 1px solid #e6e9ee;
	border-radius: 8px;
	margin: 0;
	/* top padding reserves the strip the floating chip + copy button sit in */
	padding: 42px 14px 14px 14px;
	overflow-x: auto;
	overflow-y: hidden;
	font-size: 13px;
	line-height: 1.75;
	color: #263238;
	tab-size: 4;
	counter-reset: helpcodeline;
	-webkit-overflow-scrolling: touch;
}

/* no-JS fallback: block not enhanced yet needs no reserved top strip */
.csh-article-content-text pre.wp-block-code:not( [data-help-code] ) {
	padding-top: 14px;
}

.csh-article-content-text pre.wp-block-code code {
	display: block;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	font: inherit;
	color: inherit;
	white-space: pre;
}

.help-code-line {
	display: block;
}

.help-code-line::before {
	counter-increment: helpcodeline;
	content: counter( helpcodeline );
	display: inline-block;
	/* fixed width keeps the code edge aligned for any count up to 999 */
	min-width: 2em;
	/* the gutter: pinned at the left edge, number right-aligned, then
	 * breathing room before the code — all opaque to hide scrolled text */
	padding-left: 14px;
	padding-right: 1.5em;
	text-align: right;
	color: #9aa3b2;
	user-select: none;
	position: sticky;
	left: 0;
	background: #f6f8fa;
}

/* single-line blocks carry no line number */
.help-code-single .help-code-line::before {
	content: none;
}

/* language chip (from the code element's language- class / lang attr) */
.help-code-lang {
	position: absolute;
	top: 13px;
	left: 15px;
	font-size: 11px;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: #9aa3b2;
	user-select: none;
}

/* copy button */
.help-code-copy {
	position: absolute;
	top: 7px;
	right: 8px;
	padding: 5px 14px;
	border: 1px solid #e6e9ee;
	border-radius: 6px;
	background: #fff;
	color: #5f6b7a;
	font-family: inherit;
	font-size: 12px;
	line-height: 1.5;
	cursor: pointer;
	box-shadow: 0 1px 2px rgba( 0, 0, 0, .05 );
	transition: color .15s ease, border-color .15s ease;
}

.help-code-copy:hover,
.help-code-copy:focus-visible {
	color: #0000ff; /* landing button blue */
	border-color: #0000ff;
}

.help-code-copy:focus-visible {
	outline: none;
	box-shadow: 0 0 0 2px rgba( 0, 0, 255, .25 );
}

.help-code-copy.is-copied {
	color: #1a7f37;
	border-color: #1a7f37;
}

/* inline code inside help paragraphs (not part of a code block) */
.csh-article-content-text :not( pre ) > code {
	background: #f2f4f7;
	border: 1px solid #e6e9ee;
	border-radius: 4px;
	padding: 1px 6px;
	font-size: .9em;
	color: #263238;
}

/* ---------- Block alignment classes ----------
 * The Help Center strips global styles from its pages, which leaves the
 * has-text-align-* classes without any CSS — an alignment picked on a
 * paragraph or heading block never rendered on the site. Restore just
 * those; the block editor canvas already previews them. */
.csh-article-content-text .has-text-align-right {
	text-align: right;
}

.csh-article-content-text .has-text-align-center {
	text-align: center;
}

.csh-article-content-text .has-text-align-left {
	text-align: left;
}

.csh-article-content-text .has-text-align-justify {
	text-align: justify;
}

/* ---------- Back-link arrow: optical alignment ----------
 * The theme draws the arrow as an inline-block ::before with
 * vertical-align:text-top and no margin-top; nudge it down 5px so it
 * centers against the label. The theme's -item variant (category badge)
 * has higher specificity and keeps its own -5px offset. */
nav .csh-navigation-back:before {
	margin-top: 5px;
}

/* ---------- Header search icon ----------
 * The theme's ::before icon is pinned to the search ROW's edge; with the
 * logo sitting in that row it would land on the logo, so it is switched
 * off and .csh-search-form-icon (absolutely positioned inside the form
 * itself) carries a self-contained magnifier instead. Help pages are
 * always RTL (header-help.php hardcodes dir="rtl"). */
html[dir=rtl] header .csh-wrapper .csh-header-search:before {
	content: none;
}

/* ---------- Typography base layer ----------
 * The block markup an author writes is the markup that ships: nothing is
 * class-injected or rewritten at render time anymore. Instead the old
 * help system's effective typography — the desktop values its article
 * stylesheet computes for .csh-markdown-* elements — sits here as a base
 * layer on the bare Gutenberg elements, scoped to the article text.
 *
 * Two rules of the layer, per the 2026-10-07 decision:
 *  - Neutral colors: text takes the body color (#141414 via article.
 *    body), no gray h2 tint, no blue h1 stripe, no blue blockquote edge.
 *    Markers keep the user-agent look, like the stock editor.
 *  - Author control: no !important on size or spacing. Inline styles,
 *    preset classes and core-block-supports rules (core's block assets
 *    are whitelisted in Frontend::strip_non_help_assets) all outrank
 *    these defaults, so what the author picks in Gutenberg is what
 *    publishes.
 *
 * Base rhythm notes: the wrapper already carries 15.3px / line-height 2
 * (article.min.css + the header template), which is the whole vertical
 * rhythm — the old system gave paragraphs no margins of their own, so
 * none are added here. Values below mirror article.min.css's per-level
 * title rules (sizes, line-heights, margins), blockquote and separator
 * boxes. */
.csh-article .csh-article-content article .csh-article-content-text h1,
.csh-article .csh-article-content article .csh-article-content-text h2,
.csh-article .csh-article-content article .csh-article-content-text h3,
.csh-article .csh-article-content article .csh-article-content-text h4,
.csh-article .csh-article-content article .csh-article-content-text h5,
.csh-article .csh-article-content article .csh-article-content-text h6 {
	font-weight: 500;
}

.csh-article .csh-article-content article .csh-article-content-text h1 strong,
.csh-article .csh-article-content article .csh-article-content-text h2 strong,
.csh-article .csh-article-content article .csh-article-content-text h3 strong,
.csh-article .csh-article-content article .csh-article-content-text h4 strong,
.csh-article .csh-article-content article .csh-article-content-text h5 strong,
.csh-article .csh-article-content article .csh-article-content-text h6 strong {
	font-weight: inherit;
}

.csh-article .csh-article-content article .csh-article-content-text h1 {
	font-size: 27px;
	line-height: 29px;
	margin: 16px 0 4px;
}

.csh-article .csh-article-content article .csh-article-content-text h2 {
	font-size: 25.2px;
	line-height: 28px;
	margin: 12px 0 2px;
}

.csh-article .csh-article-content article .csh-article-content-text h3 {
	font-size: 23.4px;
	line-height: 26px;
	margin: 8px 0 2px;
}

.csh-article .csh-article-content article .csh-article-content-text h4 {
	font-size: 22.5px;
	line-height: 25px;
	margin: 6px 0 0;
}

.csh-article .csh-article-content article .csh-article-content-text h5 {
	font-size: 21.6px;
	line-height: 24px;
	margin: 4px 0 0;
}

.csh-article .csh-article-content article .csh-article-content-text h6 {
	font-size: 19.8px;
	line-height: 22px;
	margin: 2px 0 0;
}

/* Lists: the theme reset in libs.min.css (ol,ul{list-style:none} plus the
 * universal margin/padding reset) strips markers, so restore the
 * user-agent look — list-style-type: revert resolves each list, nested
 * ones included, back to its browser value — with the old system's indent
 * (35px) and list margins (3px). :not(.csh-markdown-list) keeps the
 * theme's own marker-drawing lists, should one ever appear, from getting
 * a second marker. */
.csh-article .csh-article-content article .csh-article-content-text ul:not( .csh-markdown-list ),
.csh-article .csh-article-content article .csh-article-content-text ol:not( .csh-markdown-list ) {
	list-style-type: revert;
	padding-inline-start: 35px;
	margin-block-start: 3px;
	margin-block-end: 3px;
}

/* Blockquote: the old system's box (article.min.css), colorless — light
 * gray surface, neutral edge on the start side, the old text metrics.
 * Logical properties carry the RTL flip the old rtl rules did by hand. */
.csh-article .csh-article-content article .csh-article-content-text blockquote {
	border: 0;
	border-inline-start: 8px solid #ddd;
	background: #F6F8FA;
	font-size: 14.4px;
	line-height: 20px;
	letter-spacing: -.2px;
	text-align: justify;
	margin: 2px 0;
	padding-block-start: 13px;
	padding-block-end: 18px;
	padding-inline-start: 20px;
	padding-inline-end: 26px;
}

/* Separator: the old system's .csh-markdown-line box. */
.csh-article .csh-article-content article .csh-article-content-text hr {
	border: 0;
	background: #D9E1E8;
	height: 1px;
	width: 80%;
	margin: 36px auto 2px;
}

/* ---------- Typeface: Peyda, the main site's font ----------
 * The main site sets PeydaWeb as its typeface (payping theme variables), so
 * the Help Center follows it. The nine woff2 weights are self-hosted under
 * assets/fonts/peyda/ (copied from the theme's Peyda standard set) — the
 * plugin does not depend on the active theme's internal paths, and browsers
 * fetch only the weights a page actually uses.
 *
 * This is the only font rule on Help Center pages: the old IRANSans set
 * (fontiran.css + the shell's inline force rule) was removed on 2026-10-07.
 * The :not(#wpadminbar) excludes keep the WP admin bar on dashicons. Code
 * blocks and inline code need their mono stack back, which cannot outrank
 * the two-ID universal below with classes alone; the same double
 * :not(#wpadminbar) idiom carries them past it. */
@font-face {
	font-family: PeydaWeb;
	font-style: normal;
	font-weight: 100;
	src: url('../fonts/peyda/PeydaWeb-Thin.woff2') format('woff2');
	font-display: swap;
}

@font-face {
	font-family: PeydaWeb;
	font-style: normal;
	font-weight: 200;
	src: url('../fonts/peyda/PeydaWeb-ExtraLight.woff2') format('woff2');
	font-display: swap;
}

@font-face {
	font-family: PeydaWeb;
	font-style: normal;
	font-weight: 300;
	src: url('../fonts/peyda/PeydaWeb-Light.woff2') format('woff2');
	font-display: swap;
}

@font-face {
	font-family: PeydaWeb;
	font-style: normal;
	font-weight: 400;
	src: url('../fonts/peyda/PeydaWeb-Regular.woff2') format('woff2');
	font-display: swap;
}

@font-face {
	font-family: PeydaWeb;
	font-style: normal;
	font-weight: 500;
	src: url('../fonts/peyda/PeydaWeb-Medium.woff2') format('woff2');
	font-display: swap;
}

@font-face {
	font-family: PeydaWeb;
	font-style: normal;
	font-weight: 600;
	src: url('../fonts/peyda/PeydaWeb-Semibold.woff2') format('woff2');
	font-display: swap;
}

@font-face {
	font-family: PeydaWeb;
	font-style: normal;
	font-weight: 700;
	src: url('../fonts/peyda/PeydaWeb-Bold.woff2') format('woff2');
	font-display: swap;
}

@font-face {
	font-family: PeydaWeb;
	font-style: normal;
	font-weight: 800;
	src: url('../fonts/peyda/PeydaWeb-ExtraBold.woff2') format('woff2');
	font-display: swap;
}

@font-face {
	font-family: PeydaWeb;
	font-style: normal;
	font-weight: 900;
	src: url('../fonts/peyda/PeydaWeb-Black.woff2') format('woff2');
	font-display: swap;
}

*:not(#wpadminbar):not(#wpadminbar *) {
	font-family: PeydaWeb, sans-serif !important;
}

.csh-article-content-text pre.wp-block-code:not(#wpadminbar):not(#wpadminbar),
.csh-article-content-text pre.wp-block-code code:not(#wpadminbar):not(#wpadminbar),
.csh-article-content-text :not( pre ) > code:not(#wpadminbar):not(#wpadminbar) {
	font-family: "SF Mono", ui-monospace, Menlo, Consolas, "Liberation Mono", "Courier New", monospace !important;
}