/* Skin for Google PSE results on /search-results (en) + /ch/search-results (zh); linked AFTER the theme bundles.
   !important on colours: Google injects its own sheet later at runtime. Never hide .gcsc-branding (ToS). */

: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;
	/* Results card is the navy band itself, so every ink token is white/translucent white. */
	--wp-search-panel: #1f3c56;
}

/* --- the card: centred, padded inside the navy band --- */
.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;
}

/* Fallback for browsers without :has(). */
.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; }

/* Refinement tabs: used only to scope each language tree; the tabs are noise. */
.gsc-tabsArea,
.gsc-refinementsArea { display: none !important; }

/* Per-result refinement label ("English"). */
.gcse-searchresults-only .gs-per-result-labels,
.gcse-searchresults-only .gs-label { display: none !important; }

/* Sort-by control: relevance is the only useful order. */
.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;
	/* Hairline between hits; 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 default blue / visited purple. */
.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;
}

.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: visible on purpose, only spaced --- */
.gcse-searchresults-only .gcsc-more-maybe-branding-root { padding-top: 1.25rem; }

/* "Search on Google" link: a SIBLING of the control, so the blanket rule misses it.
   Its SVG path has no fill attribute (defaults black), so `color` alone does nothing. */
.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;
}

/* Google's 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 (did-you-mean, clear x, promotions, table cells) --- */
.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 white backgrounds inside the control. */
.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;
}

.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 white: wanted hairlines + the current page chip. */
.gcse-searchresults-only .gsc-cursor-current-page { color: var(--wp-search-navy) !important; }

/* Every class in a real result row, bare as well as scoped. .gs-bidi-start-align is on every visibleUrl div;
   breadcrumb parts are SPANs that need their own colour. */

.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, plus the breadcrumb 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;
}

/* Bare titles/snippet, in case the control mounts 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;
}

/* Sort-by LABEL sits outside .gsc-orderby-container, so it shows; kept visible and white by request. */
.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;
}