/* ===========================================================================
 * wp-search.css                      $build: 20260827d   (SUR)
 * ---------------------------------------------------------------------------
 * Skin for the Google Programmable Search results on
 *   /search-results        (en)
 *   /ch/search-results     (zh)
 *
 * WHY A FILE AND NOT A <style> BLOCK IN common.js
 * The first cut injected all of this from load.cseCss(). That was fine while it
 * was six rules; it is not fine now. A stylesheet is cacheable, editable without
 * touching JS, visible in devtools with real line numbers, and can be overridden
 * by a later theme bundle in the normal way. common.js now injects ONLY
 * `.wp-cse-hidden`, because that one rule is load-bearing (it hides the crawl's
 * own count + pager) and must survive even if this file 404s.
 *
 * LOAD ORDER: the shells link it AFTER the four theme bundles, so it wins over
 * THEM without !important.
 *
 * WHY !important IS ON EVERY COLOUR/BACKGROUND/BORDER  ($build 20260827b)
 * The theme bundles are not the only rival. The PSE element injects Google's OWN
 * stylesheet from cse.google.com at RUNTIME, which lands in <head> AFTER our
 * link and therefore wins every tie on equal specificity - that is what paints
 * `.gsc-control-cse` and `.gsc-webResult.gsc-result` white again. Load order
 * cannot fix a sheet that arrives later, so every colour, background, border and
 * text-decoration declaration on a Google class (.gsc-* / .gs-* / .gcse-* /
 * .gcsc-*) carries !important - and `fill`, for the inline SVG glyphs. LAYOUT declarations (padding, margin, max-width,
 * font-size, border-radius) deliberately do NOT - those never fought us, and
 * leaving them plain keeps the file overridable in the normal cascade.
 *
 * GOOGLE'S CLASS NAMES are the PSE v2 element's own (.gsc-*, .gs-*). They are
 * not ours and Google can change them; every rule here is cosmetic, so the worst
 * case of a rename is Google's default look, never a broken page.
 *
 * DO NOT HIDE THE BRANDING. `.gcsc-branding` / `.gcsc-more-maybe-branding-root`
 * carry the "Google" attribution the free tier requires. Hiding it breaks the
 * terms of service, which is why there is no rule for it below.
 *
 * PALETTE - read off the SUR theme bundle, not invented:
 *   navy   #1f3c56   surBlue / surBlueShade2 (the band these results sit on)
 *   teal   #447073   surGreen / surBlueShade1
 *   sage   #9fb09b   the SEARCH button
 *   grey   #7f7f7e   surGrey
 * =========================================================================== */

:root {
	--wp-search-navy: #1f3c56;
	--wp-search-teal: #447073;
	--wp-search-sage: #9fb09b;
	--wp-search-grey: #7f7f7e;
	--wp-search-rule: rgba(255, 255, 255, .22);
	--wp-search-ink: #ffffff;
	/* 20260827a - the results card is now the navy band itself, not a white
	 * card on it, so every ink token above is white and every rule is a
	 * translucent white. Revert these four values to go back to the light skin. */
	--wp-search-panel: #1f3c56;
}

/* --- the card -------------------------------------------------------------
 * The results land inside `.component.search-results.horizontal`, which sits in
 * the navy full-width band under the search box. Untouched, Google's control
 * paints a white rectangle the width of its own content, hard against the band
 * and against the footer. This makes it a centred card with real padding. */
.component.search-results.horizontal:has(.gcse-searchresults-only),
.component.search-results.horizontal .gcse-searchresults-only {
	max-width: 1140px;
	margin-left: auto;
	margin-right: auto;
}

.gcse-searchresults-only {
	background: var(--wp-search-panel) !important;
	border: none !important;
	border-radius: 4px;
	padding: 2rem 2.25rem 2.5rem;
	margin: 2.5rem auto 3.5rem;
	box-shadow: 0 2px 18px rgba(0, 0, 0, .12);
	color: var(--wp-search-ink) !important;
}

/* :has() is unsupported on older Safari/Firefox ESR - this is the fallback that
 * keeps the card centred there. Harmless where :has() already worked. */
.component.search-results.horizontal > .component-content {
	max-width: 1140px;
	margin-left: auto;
	margin-right: auto;
}

@media (max-width: 767px) {
	.gcse-searchresults-only { padding: 1.25rem 1rem 1.75rem; margin: 1.5rem 0 2rem; border-radius: 0; }
}

/* --- reset Google's own chrome -------------------------------------------- */
.gcse-searchresults-only .gsc-control-cse,
.gsc-control-cse {
	padding: 0;
	background-color: var(--wp-search-panel) !important;
	border: none !important;
	font-family: inherit;
}
.gcse-searchresults-only .gsc-above-wrapper-area { border: 0 !important; padding: 0; }
.gcse-searchresults-only .gsc-adBlock,
.gcse-searchresults-only .gsc-adBlockNoHeight { margin: 0; }
.gcse-searchresults-only table,
.gcse-searchresults-only td { border: 0 !important; background: none !important; }

/* THE REFINEMENT TAB BAR. We use refinements only to scope each language tree to
 * its own pages (English / Chinese); the tabs themselves would be noise. */
.gsc-tabsArea,
.gsc-refinementsArea { display: none !important; }

/* The per-result refinement label - the literal word "English" that printed
 * under every hit on 2026-08-26. Same reasoning as the tab bar. */
.gcse-searchresults-only .gs-per-result-labels,
.gcse-searchresults-only .gs-label { display: none !important; }

/* Google's "Sort by" control. Relevance is the only order that means anything
 * on a 60-page site; delete this block if a date sort is ever wanted. */
.gcse-searchresults-only .gsc-orderby-container { display: none !important; }

/* --- the result count line ------------------------------------------------ */
.gcse-searchresults-only .gsc-result-info {
	padding: 0 0 1.25rem 0;
	margin: 0 0 1.25rem 0;
	border-bottom: 1px solid var(--wp-search-rule) !important;
	font-size: .875rem;
	color: rgba(255, 255, 255, .78) !important;
	letter-spacing: .01em;
}

/* --- one result ----------------------------------------------------------- */
.gcse-searchresults-only .gsc-webResult.gsc-result,
.gsc-webResult.gsc-result {
	padding: 1.35rem 0;
	border: none !important;
	background-color: var(--wp-search-panel) !important;
	/* the one hairline that stays: without it the hits run together on a flat
	 * navy panel. It is a translucent white, never #fff. */
	border-bottom: 1px solid var(--wp-search-rule) !important;
}
.gcse-searchresults-only .gsc-webResult.gsc-result:last-child { border-bottom: 0 !important; }
.gcse-searchresults-only .gsc-webResult.gsc-result:hover {
	background-color: var(--wp-search-panel) !important;
	border-color: var(--wp-search-rule) !important;
}

/* TITLE. Google ships its links in browser-default blue, and VISITED ones in
 * purple - which is what the 2026-08-26 screenshot showed. Both are pinned to
 * the brand navy here. */
.gcse-searchresults-only .gs-title,
.gcse-searchresults-only .gs-title b,
.gcse-searchresults-only a.gs-title:link,
.gcse-searchresults-only a.gs-title:visited,
.gcse-searchresults-only a.gs-title:link b,
.gcse-searchresults-only a.gs-title:visited b {
	font-size: 1.1875rem;
	line-height: 1.35;
	font-weight: 500;
	color: #ffffff !important;
	text-decoration: none !important;
}
.gcse-searchresults-only a.gs-title:hover,
.gcse-searchresults-only a.gs-title:hover b {
	color: var(--wp-search-sage) !important;
	text-decoration: underline !important;
}
.gcse-searchresults-only .gs-title { height: auto; overflow: visible; }

.gcse-searchresults-only .gs-snippet,
.gcse-searchresults-only .gs-webResult .gs-snippet,
.gcse-searchresults-only .gs-fileFormatType,
.gs-webResult .gs-snippet,
.gs-fileFormatType {
	font-size: .9375rem;
	line-height: 1.65;
	padding-top: .4rem;
	color: var(--wp-search-ink) !important;
}
.gcse-searchresults-only .gs-snippet b { font-weight: 600; }

.gcse-searchresults-only .gs-visibleUrl,
.gcse-searchresults-only .gs-visibleUrl-short,
.gcse-searchresults-only .gs-visibleUrl-long {
	font-size: .8125rem;
	color: rgba(255, 255, 255, .72) !important;
	padding-top: .25rem;
}

/* Thumbnails, when a page has an og:image in the index. */
.gcse-searchresults-only .gs-image-box { padding-right: 1rem; }
.gcse-searchresults-only .gs-image-box img.gs-image { max-width: 108px; border-radius: 3px; }

/* --- no results ----------------------------------------------------------- */
.gcse-searchresults-only .gs-no-results-result .gs-snippet,
.gcse-searchresults-only .gs-error-result .gs-snippet {
	background: none !important;
	border: 0 !important;
	padding: 1.5rem 0;
	font-size: 1rem;
	color: var(--wp-search-ink) !important;
}

/* --- pagination ----------------------------------------------------------- */
.gcse-searchresults-only .gsc-cursor-box {
	padding-top: 1.75rem;
	margin-top: .5rem;
	border-top: 1px solid var(--wp-search-rule) !important;
	text-align: center;
}
.gcse-searchresults-only .gsc-cursor-page {
	display: inline-block;
	min-width: 2.15rem;
	padding: .4rem .6rem;
	margin: 0 .15rem;
	border-radius: 3px;
	color: #ffffff !important;
	text-decoration: none !important;
	font-size: .9375rem;
}
.gcse-searchresults-only .gsc-cursor-page:hover { background: rgba(255, 255, 255, .14) !important; }
.gcse-searchresults-only .gsc-cursor-current-page {
	font-weight: 700;
	color: var(--wp-search-navy) !important;
	background: #ffffff !important;
}
.gcse-searchresults-only .gsc-cursor-current-page:hover { background: #ffffff !important; }

/* --- attribution ----------------------------------------------------------
 * Left visible on purpose (see the header note). Only spaced, never hidden. */
.gcse-searchresults-only .gcsc-more-maybe-branding-root { padding-top: 1.25rem; }

/* THE "Search \"...\" on Google" LINK  ($build 20260827c)
 * `.gcsc-find-more-on-google` is NOT the attribution - it is Google's offer to
 * repeat the query on google.com, and it sits in the same branding root. It
 * escaped the blanket `.gsc-control-cse *` rule because it is a SIBLING of the
 * control, not a descendant of it. Its three text spans need the colour and its
 * inline SVG needs `fill`: the <path> ships with NO fill attribute, so it
 * defaults to black and is invisible on navy - `color` alone does nothing to it. */
.gcse-searchresults-only .gcsc-find-more-on-google,
.gcse-searchresults-only .gcsc-find-more-on-google-text,
.gcse-searchresults-only .gcsc-find-more-on-google-query,
.gcse-searchresults-only .gcsc-find-more-on-google a,
.gcse-searchresults-only .gcsc-find-more-on-google-root,
.gcsc-find-more-on-google,
.gcsc-find-more-on-google-text,
.gcsc-find-more-on-google-query {
	color: #ffffff !important;
}

/* The magnifier glyph. `fill: currentColor` would inherit the white above, but
 * Google's own sheet sets an explicit fill on some builds, so name it. */
.gcse-searchresults-only .gcsc-find-more-on-google-magnifier,
.gcse-searchresults-only .gcsc-find-more-on-google-magnifier path,
.gcse-searchresults-only .gcsc-find-more-on-google svg,
.gcse-searchresults-only .gcsc-find-more-on-google svg path,
.gcsc-find-more-on-google-magnifier,
.gcsc-find-more-on-google-magnifier path {
	fill: #ffffff !important;
	color: #ffffff !important;
}

/* --- nothing may push the page sideways ----------------------------------- */
.gcse-searchresults-only,
.gcse-searchresults-only .gsc-control-cse { max-width: 100%; box-sizing: border-box; }
.gcse-searchresults-only .gs-title,
.gcse-searchresults-only .gs-snippet,
.gcse-searchresults-only .gs-visibleUrl { overflow-wrap: anywhere; }

/* --- the rest of Google's ink, forced white  $build: 20260827a --------------
 * Everything above names one element at a time. These are the leftovers the
 * 2026-08-27 pass caught on the navy panel: the "did you mean" line, the
 * clear-results "x", the spelling suggestion, the promotion block and the
 * table cells the control still paints white from its own stylesheet. All of
 * them are cosmetic; a Google class rename gives their default look back. */
.gcse-searchresults-only .gsc-control-cse,
.gcse-searchresults-only .gsc-control-cse *,
.gcse-searchresults-only .gs-spelling,
.gcse-searchresults-only .gs-spelling a,
.gcse-searchresults-only .gsc-results .gsc-cursor-box,
.gcse-searchresults-only .gsc-result-info-container,
.gcse-searchresults-only .gs-promotion .gs-snippet,
.gcse-searchresults-only .gs-promotion .gs-title,
.gcse-searchresults-only .gs-promotion .gs-visibleUrl,
.gcse-searchresults-only .gsc-table-result,
.gcse-searchresults-only .gsc-thumbnail-inside,
.gcse-searchresults-only .gsc-url-top,
.gcse-searchresults-only .gsc-url-bottom {
	color: #ffffff !important;
}

/* Google's own backgrounds inside the control - the white rectangles that show
 * through the navy panel if we leave them alone. */
.gcse-searchresults-only .gsc-results,
.gcse-searchresults-only .gsc-result,
.gcse-searchresults-only .gsc-results .gsc-imageResult,
.gcse-searchresults-only .gsc-webResult,
.gcse-searchresults-only .gs-promotion,
.gcse-searchresults-only .gsc-expansionArea,
.gcse-searchresults-only .gsc-wrapper {
	background-color: var(--wp-search-panel) !important;
	border-color: transparent !important;
}

/* The bordered blocks Google draws with a real border. None of them get one. */
.gcse-searchresults-only .gsc-control-cse,
.gcse-searchresults-only .gsc-above-wrapper-area,
.gcse-searchresults-only .gsc-result-info-container,
.gcse-searchresults-only .gs-promotion,
.gcse-searchresults-only .gsc-table-result {
	border: none !important;
}

/* Exceptions to the blanket `* { color:#fff }` above: the hairline dividers we
 * do want, and the current page chip, which is white-on-navy by design. */
.gcse-searchresults-only .gsc-cursor-current-page { color: var(--wp-search-navy) !important; }

/* ===========================================================================
 * EVERY CLASS IN A REAL RESULT ROW  ($build 20260827d)
 * ---------------------------------------------------------------------------
 * Read off the live markup of one `.gsc-webResult.gsc-result`, not guessed. The
 * rules above named the pieces we KNEW about; these are the wrappers and the
 * bidi/breadcrumb variants Google actually ships, listed BARE as well as scoped
 * so nothing depends on the mount's own class being an ancestor.
 *
 * `.gs-bidi-start-align` is the one that matters most: it is on EVERY visibleUrl
 * div, and Google's sheet colours it. `.gs-visibleUrl-breadcrumb` was missed
 * entirely - we had only the -short and -long variants - and its three parts are
 * SPANs, which do not inherit through a rule that names the div when Google sets
 * a span colour of its own.
 * =========================================================================== */

.gcse-searchresults-only .gs-webResult,
.gcse-searchresults-only .gs-result,
.gcse-searchresults-only .gsc-thumbnail-inside,
.gcse-searchresults-only .gsc-url-top,
.gcse-searchresults-only .gsc-url-bottom,
.gcse-searchresults-only .gsc-table-result,
.gcse-searchresults-only .gsc-table-cell-snippet-close,
.gcse-searchresults-only .gsc-table-cell-thumbnail,
.gcse-searchresults-only .gsc-thumbnail-left,
.gcse-searchresults-only .gs-richsnippet-box,
.gs-webResult,
.gs-result,
.gsc-thumbnail-inside,
.gsc-url-top,
.gsc-url-bottom,
.gsc-table-result,
.gsc-table-cell-snippet-close,
.gsc-table-cell-thumbnail,
.gsc-thumbnail-left {
	background-color: var(--wp-search-panel) !important;
	border-color: transparent !important;
	color: #ffffff !important;
}

/* The URL line in all FOUR shapes Google ships, plus the breadcrumb's spans. */
.gcse-searchresults-only .gs-bidi-start-align,
.gcse-searchresults-only .gs-visibleUrl-breadcrumb,
.gcse-searchresults-only .gs-visibleUrl-breadcrumb span,
.gcse-searchresults-only .gs-visibleUrl-breadcrumb a,
.gs-bidi-start-align,
.gs-visibleUrl-breadcrumb,
.gs-visibleUrl-breadcrumb span,
.gs-visibleUrl-breadcrumb a,
.gs-visibleUrl-short,
.gs-visibleUrl-long {
	color: rgba(255, 255, 255, .72) !important;
	background-color: transparent !important;
}

/* Titles and snippet, BARE - the scoped rules above stay, this is the belt to
 * their braces if the control is ever mounted outside .gcse-searchresults-only. */
a.gs-title,
a.gs-title:link,
a.gs-title:visited,
a.gs-title b,
.gs-title,
.gs-title b {
	color: #ffffff !important;
}
a.gs-title:hover,
a.gs-title:hover b {
	color: var(--wp-search-sage) !important;
}
.gs-snippet,
.gs-snippet b,
.gsc-result-info {
	color: #ffffff !important;
}
.gsc-result-info {
	background-color: transparent !important;
}

/* THE "Sort by" LABEL. `.gsc-orderby-container` is hidden further up, but the
 * LABEL rides outside that container on this build, which is why it printed.
 * Hong Vui asked for it WHITE, so it is white and still visible. To remove it
 * instead, uncomment the display rule below - relevance is the only order that
 * means anything on a ~60-page site.
 *   .gsc-orderby-label, .gsc-orderby { display: none !important; }
 */
.gcse-searchresults-only .gsc-orderby-label,
.gcse-searchresults-only .gsc-inline-block,
.gcse-searchresults-only .gsc-selected-option,
.gcse-searchresults-only .gsc-option-menu-item,
.gsc-orderby-label,
.gsc-selected-option,
.gsc-option-menu-item {
	color: #ffffff !important;
	background-color: transparent !important;
}
.gs-webResult .gs-per-result-labels .gs-label {
    padding: 3px 3px 3px 6px !important;
    color: #ffffff !important;
}

main .search-box input {
    min-width: 340px !important;
    margin-right: 16px !important;
}