/* OrthoConnect — site search: header field, instant results, results page. */

:root {
	--oc-search-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='m20 20-4.2-4.2'/%3E%3C/svg%3E");
	--oc-search-x: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E");
}
.oc-icon-search { --oc-mask: var(--oc-search-svg); }

.oc-search .screen-reader-text,
.oc-search-page-form .screen-reader-text {
	position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
	clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ---------- Header ---------- */
.oc-header .oc-search { position: relative; flex: 0 0 auto; margin: 0; }

/* Icon button (shown below 1280px, where there is no room for the field) */
.oc-header .oc-search__toggle {
	display: none; align-items: center; justify-content: center; flex: none;
	width: var(--wp--custom--tap-size); height: var(--wp--custom--tap-size); margin: 0; padding: 0;
	color: var(--wp--preset--color--navy); background: transparent; border: 0; border-radius: var(--wp--custom--radius--small); cursor: pointer;
	transition: background-color 160ms ease, color 160ms ease;
}
.oc-header .oc-search__toggle:hover { background: var(--wp--preset--color--surface); color: var(--wp--preset--color--teal); }
.oc-header .oc-search__toggle .oc-icon { --icon-size: 1.375rem; }
.oc-header .oc-search.is-open .oc-search__toggle { color: var(--wp--preset--color--teal); background: var(--wp--preset--color--teal-light); }
.oc-header .oc-search.is-open .oc-search__toggle .oc-icon { --oc-mask: var(--oc-search-x); }
html:not(.oc-js) .oc-header .oc-search__toggle { display: none !important; }

/* The form: a single bordered pill with the button inside */
.oc-header .oc-search__form { margin: 0; width: 100%; }
.oc-header .oc-search__form .wp-block-search__inside-wrapper {
	display: flex; align-items: center; width: 100%; min-width: 0; margin: 0; padding: 0;
	min-height: var(--wp--custom--tap-size); background: var(--wp--preset--color--base);
	border: var(--wp--custom--border-width) solid var(--wp--preset--color--line); border-radius: var(--wp--custom--radius--small);
	transition: border-color 160ms ease, box-shadow 160ms ease;
}
.oc-header .oc-search__form .wp-block-search__inside-wrapper:hover { border-color: var(--wp--preset--color--teal-line); }
.oc-header .oc-search__form .wp-block-search__inside-wrapper:focus-within {
	border-color: var(--wp--preset--color--teal); box-shadow: 0 0 0 3px var(--wp--preset--color--teal-light);
}
body .oc-header .oc-search__form input.wp-block-search__input {
	flex: 1 1 auto; width: 100%; min-width: 0; min-height: 0; height: calc(var(--wp--custom--tap-size) - 2px); margin: 0;
	padding: 0 0 0 var(--wp--preset--spacing--30); border: 0; border-radius: 0; background: transparent; box-shadow: none; outline: 0;
	color: var(--wp--preset--color--navy); font-size: var(--wp--preset--font-size--note); text-overflow: ellipsis;
	-webkit-appearance: none; appearance: none;
}
body .oc-header .oc-search__form input.wp-block-search__input::placeholder { color: var(--wp--preset--color--muted); opacity: 1; }
body .oc-header .oc-search__form input.wp-block-search__input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
body .oc-header .oc-search__form .wp-block-search__button {
	flex: none; display: inline-grid; place-items: center; width: 2.5rem; height: calc(var(--wp--custom--tap-size) - 2px); min-height: 0;
	margin: 0; padding: 0; border: 0; border-radius: 0 var(--wp--custom--radius--small) var(--wp--custom--radius--small) 0;
	color: var(--wp--preset--color--teal); background: transparent; cursor: pointer; transition: background-color 160ms ease, color 160ms ease;
}
body .oc-header .oc-search__form .wp-block-search__button:hover { color: var(--wp--preset--color--base); background: var(--wp--preset--color--teal); }
body .oc-header .oc-search__form .wp-block-search__button svg { width: 1.25rem; height: 1.25rem; fill: currentColor; }

/* Results dropdown */
.oc-header .oc-search__results[hidden] { display: none; }
.oc-header .oc-search__results {
	max-height: min(70vh, 34rem); overflow-y: auto; overscroll-behavior: contain; padding: var(--wp--preset--spacing--20);
	background: var(--wp--preset--color--base); border: var(--wp--custom--border-width) solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--card); box-shadow: var(--wp--custom--shadow--raised); text-align: left;
}

/* ≥1280px: always-visible field. It widens on focus and floats over the menu items. */
@media (min-width: 1280px) {
	.oc-header .oc-search { width: 8.75rem; height: var(--wp--custom--tap-size); }
	.oc-header .oc-search__panel {
		position: absolute; top: 0; right: 0; z-index: 25; width: 100%; transition: width 220ms ease;
	}
	.oc-header .oc-search.is-active .oc-search__panel,
	.oc-header .oc-search:focus-within .oc-search__panel { width: 22rem; }
	.oc-header .oc-search__results { position: absolute; top: calc(100% + 0.5rem); right: 0; width: min(31rem, calc(100vw - 2rem)); }
}

/* <1280px: icon button opens a full-width bar under the header */
@media (max-width: 1279px) {
	.oc-header .oc-search { position: static; }
	.oc-header .oc-search__toggle { display: inline-flex; }
	.oc-header .oc-search__panel {
		display: none; position: absolute; inset: 100% 0 auto 0; z-index: 31;
		padding: var(--wp--preset--spacing--40) max(var(--wp--custom--gutter), calc((100% - 75rem) / 2));
		background: var(--wp--preset--color--base); border-bottom: var(--wp--custom--border-width) solid var(--wp--preset--color--line);
		box-shadow: var(--wp--custom--shadow--raised); max-height: calc(100dvh - var(--wp--custom--header-height)); overflow-y: auto;
	}
	.oc-header .oc-search.is-open .oc-search__panel { display: block; animation: oc-menu-in 180ms ease-out; }
	.oc-header .oc-search__results { margin-top: var(--wp--preset--spacing--30); max-height: none; overflow: visible; box-shadow: none; }
}
@media (max-width: 1190px) {
	.oc-header .oc-search { order: 1; margin-left: auto; }
	.oc-header .oc-header__actions { margin-left: 0; }
}
@media (max-width: 760px) {
	.oc-header .oc-search__panel { max-height: calc(100dvh - 5.75rem - env(safe-area-inset-bottom)); padding-block: var(--wp--preset--spacing--30); overscroll-behavior: contain; }
}
@media (max-width: 359px) {
	.oc-header .oc-header__inner { gap: 0.25rem; }
}

/* ---------- Result rows (dropdown) ---------- */
.oc-sr-msg { margin: 0; padding: var(--wp--preset--spacing--30); color: var(--wp--preset--color--muted); font-size: var(--wp--preset--font-size--note); }
.oc-sr-group + .oc-sr-group { margin-top: var(--wp--preset--spacing--20); padding-top: var(--wp--preset--spacing--20); border-top: var(--wp--custom--border-width) solid var(--wp--preset--color--line); }
.oc-sr-group__head {
	padding: var(--wp--preset--spacing--10) var(--wp--preset--spacing--30);
	color: var(--wp--preset--color--muted); font-size: var(--wp--preset--font-size--caption); font-weight: 600;
	letter-spacing: var(--wp--custom--tracking--label); text-transform: uppercase;
}
.oc-sr-group__head:lang(si), .oc-search [lang="si"] { letter-spacing: 0; text-transform: none; }
.oc-sr-opt {
	display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--wp--preset--spacing--30);
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30); min-height: var(--wp--custom--tap-size);
	color: var(--wp--preset--color--navy); text-decoration: none; border-radius: var(--wp--custom--radius--small);
}
.oc-sr-opt:hover, .oc-sr-opt.is-active { background: var(--wp--preset--color--teal-light); }
.oc-sr-opt:focus-visible { outline: var(--wp--custom--focus-width) solid var(--wp--preset--color--teal); outline-offset: -3px; }
.oc-sr-ico, .oc-result__icon {
	display: inline-grid; place-items: center; flex: none; width: 2.25rem; height: 2.25rem;
	color: var(--wp--preset--color--teal); background: var(--wp--preset--color--teal-light); border-radius: var(--wp--custom--radius--small);
}
.oc-sr-ico .oc-icon, .oc-result__icon .oc-icon { --icon-size: 1.25rem; }
.oc-sr-main { display: grid; min-width: 0; gap: 0.125rem; }
.oc-sr-title { overflow: hidden; color: var(--wp--preset--color--navy); font-size: var(--wp--preset--font-size--note); font-weight: 600; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.oc-sr-sub { overflow: hidden; color: var(--wp--preset--color--muted); font-size: var(--wp--preset--font-size--caption); line-height: 1.4; text-overflow: ellipsis; white-space: nowrap; }
.oc-sr-go { --icon-size: 1rem; color: var(--wp--preset--color--muted); opacity: 0; transition: opacity 120ms ease, transform 120ms ease; }
.oc-sr-opt:hover .oc-sr-go, .oc-sr-opt.is-active .oc-sr-go { opacity: 1; color: var(--wp--preset--color--teal); transform: translateX(2px); }
.oc-sr-all {
	display: flex; align-items: center; justify-content: space-between; gap: var(--wp--preset--spacing--30);
	margin-top: var(--wp--preset--spacing--20); padding: var(--wp--preset--spacing--30);
	min-height: var(--wp--custom--tap-size); color: var(--wp--preset--color--teal); font-size: var(--wp--preset--font-size--note); font-weight: 600;
	text-decoration: none; border-top: var(--wp--custom--border-width) solid var(--wp--preset--color--line); border-radius: 0 0 var(--wp--custom--radius--small) var(--wp--custom--radius--small);
}
.oc-sr-all:hover { background: var(--wp--preset--color--teal-light); }
.oc-sr-all .oc-icon { --icon-size: 1rem; }
.oc-sr-all:focus-visible { outline: var(--wp--custom--focus-width) solid var(--wp--preset--color--teal); outline-offset: -3px; }

/* Highlight */
mark.oc-hl { padding: 0 0.0625rem; color: inherit; background: rgb(0 117 117 / 15%); border-radius: 0.125rem; }

/* Popular searches / chips */
.oc-search-pop { padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--20) var(--wp--preset--spacing--10); }
.oc-search-pop__label { margin: 0 0 var(--wp--preset--spacing--20); color: var(--wp--preset--color--muted); font-size: var(--wp--preset--font-size--caption); font-weight: 600; letter-spacing: var(--wp--custom--tracking--label); text-transform: uppercase; }
.oc-search-pop__label:lang(si) { letter-spacing: 0; text-transform: none; }
.oc-search-pop__row { display: flex; flex-wrap: wrap; gap: var(--wp--preset--spacing--20); }
.oc-chip {
	display: inline-flex; align-items: center; min-height: 2.5rem; margin: 0; padding: 0.25rem var(--wp--preset--spacing--40);
	color: var(--wp--preset--color--navy); font: inherit; font-size: var(--wp--preset--font-size--note); line-height: 1.3; text-align: left;
	background: var(--wp--preset--color--base); border: var(--wp--custom--border-width) solid var(--wp--preset--color--line); border-radius: var(--wp--custom--radius--pill);
	cursor: pointer; transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease;
}
.oc-chip:hover { color: var(--wp--preset--color--teal-dark); background: var(--wp--preset--color--teal-light); border-color: var(--wp--preset--color--teal); }
.oc-chip:focus-visible { outline: var(--wp--custom--focus-width) solid var(--wp--preset--color--teal); outline-offset: 2px; }

/* Nothing found */
.oc-search-empty { padding: var(--wp--preset--spacing--30); }
.oc-search-empty__title { margin: 0; color: var(--wp--preset--color--navy); font-size: var(--wp--preset--font-size--body); font-weight: 600; overflow-wrap: anywhere; }
.oc-search-empty__did { display: flex; flex-wrap: wrap; align-items: center; gap: var(--wp--preset--spacing--20); margin: var(--wp--preset--spacing--30) 0 0; color: var(--wp--preset--color--text); font-size: var(--wp--preset--font-size--note); }
.oc-search-empty__hint { margin: var(--wp--preset--spacing--30) 0 0; color: var(--wp--preset--color--text); font-size: var(--wp--preset--font-size--note); line-height: 1.6; }
.oc-search-empty__actions { display: flex; flex-wrap: wrap; gap: var(--wp--preset--spacing--20); margin-top: var(--wp--preset--spacing--40); }
.oc-search-link {
	display: inline-flex; align-items: center; justify-content: center; min-height: var(--wp--custom--tap-size); padding: 0 var(--wp--preset--spacing--50);
	color: var(--wp--preset--color--base); font-size: var(--wp--preset--font-size--note); font-weight: 600; text-decoration: none;
	background: var(--wp--preset--color--teal); border: var(--wp--custom--border-width) solid var(--wp--preset--color--teal); border-radius: var(--wp--custom--radius--small);
	transition: background-color 160ms ease, border-color 160ms ease;
}
.oc-search-link:hover { background: var(--wp--preset--color--teal-dark); border-color: var(--wp--preset--color--teal-dark); color: var(--wp--preset--color--base); }
.oc-search-link--ghost { color: var(--wp--preset--color--navy); background: var(--wp--preset--color--base); border-color: var(--wp--preset--color--line); }
.oc-search-link--ghost:hover { color: var(--wp--preset--color--navy); background: var(--wp--preset--color--teal-light); border-color: var(--wp--preset--color--teal); }

/* ---------- Results page ---------- */
.oc-search-page-form { max-width: 40rem; margin: var(--wp--preset--spacing--60) 0 0; }
.oc-search-page-form .wp-block-search__inside-wrapper { display: flex; gap: var(--wp--preset--spacing--20); align-items: stretch; width: 100%; }
body .oc-search-page-form input.wp-block-search__input { flex: 1 1 auto; min-width: 0; min-height: var(--wp--custom--control-height); margin: 0; font-size: var(--wp--preset--font-size--body); }
body .oc-search-page-form input.wp-block-search__input:focus { border-color: var(--wp--preset--color--teal); box-shadow: 0 0 0 3px var(--wp--preset--color--teal-light); outline: 0; }
body .oc-search-page-form .wp-block-search__button {
	flex: none; min-height: var(--wp--custom--control-height); margin: 0; padding: 0 var(--wp--preset--spacing--60);
	color: var(--wp--preset--color--base); font-size: var(--wp--preset--font-size--note); font-weight: 600;
	background: var(--wp--preset--color--teal); border: 0; border-radius: var(--wp--custom--radius--small); cursor: pointer; transition: background-color 160ms ease;
}
body .oc-search-page-form .wp-block-search__button:hover { background: var(--wp--preset--color--teal-dark); }
.oc-search-page-title { overflow-wrap: anywhere; }

.oc-search-results { padding-block: var(--wp--preset--spacing--80) var(--wp--preset--spacing--120); }
.oc-search-page:empty { display: none; }
html:not(.oc-js) .oc-search-fallback { display: block; }
.oc-js .oc-search-fallback { display: none; }
.oc-search-fallback .wp-block-post-title { font-size: var(--wp--preset--font-size--card); margin-top: var(--wp--preset--spacing--50); }
.oc-search-fallback .wp-block-post-title a { color: var(--wp--preset--color--navy); text-decoration: none; }
.oc-search-fallback .wp-block-post-title a:hover { color: var(--wp--preset--color--teal); text-decoration: underline; }

.oc-search-tabs { display: flex; flex-wrap: wrap; gap: var(--wp--preset--spacing--20); margin: 0 0 var(--wp--preset--spacing--50); }
.oc-search-tabs:empty { display: none; }
.oc-tab {
	display: inline-flex; align-items: center; gap: var(--wp--preset--spacing--20); min-height: 2.5rem; margin: 0; padding: 0 var(--wp--preset--spacing--40);
	color: var(--wp--preset--color--navy); font: inherit; font-size: var(--wp--preset--font-size--note); font-weight: 600; line-height: 1;
	background: var(--wp--preset--color--base); border: var(--wp--custom--border-width) solid var(--wp--preset--color--line); border-radius: var(--wp--custom--radius--pill);
	cursor: pointer; transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease;
}
.oc-tab:hover { background: var(--wp--preset--color--teal-light); border-color: var(--wp--preset--color--teal); }
.oc-tab[aria-pressed="true"] { color: var(--wp--preset--color--base); background: var(--wp--preset--color--teal); border-color: var(--wp--preset--color--teal); }
.oc-tab:focus-visible { outline: var(--wp--custom--focus-width) solid var(--wp--preset--color--teal); outline-offset: 2px; }
.oc-tab__n { min-width: 1.5rem; padding: 0.1875rem 0.4375rem; color: var(--wp--preset--color--teal-dark); font-size: var(--wp--preset--font-size--caption); text-align: center; background: var(--wp--preset--color--teal-light); border-radius: var(--wp--custom--radius--pill); }
.oc-tab[aria-pressed="true"] .oc-tab__n { color: var(--wp--preset--color--teal-dark); background: var(--wp--preset--color--base); }

.oc-results-count { margin: 0 0 var(--wp--preset--spacing--40); color: var(--wp--preset--color--muted); font-size: var(--wp--preset--font-size--note); }
.oc-results-count:empty { display: none; }
.oc-results-count.is-none { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.oc-result-list { display: grid; gap: var(--wp--preset--spacing--30); margin: 0; padding: 0; list-style: none; }
.oc-result { margin: 0; padding: 0; }
.oc-result__link {
	display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: var(--wp--preset--spacing--40);
	padding: var(--wp--preset--spacing--50); color: var(--wp--preset--color--text); text-decoration: none;
	background: var(--wp--preset--color--base); border: var(--wp--custom--border-width) solid var(--wp--preset--color--line); border-radius: var(--wp--custom--radius--card);
	transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}
.oc-result__link:hover { border-color: var(--wp--preset--color--teal); box-shadow: var(--wp--custom--shadow--card); }
.oc-result__link:focus-visible { outline: var(--wp--custom--focus-width) solid var(--wp--preset--color--teal); outline-offset: 3px; }
.oc-result__icon { width: 2.75rem; height: 2.75rem; }
.oc-result__body { display: grid; min-width: 0; gap: var(--wp--preset--spacing--10); }
.oc-result__meta { color: var(--wp--preset--color--teal); font-size: var(--wp--preset--font-size--caption); font-weight: 600; letter-spacing: var(--wp--custom--tracking--label); text-transform: uppercase; }
.oc-result__meta:lang(si) { letter-spacing: 0; text-transform: none; }
.oc-result__title { color: var(--wp--preset--color--navy); font-size: var(--wp--preset--font-size--lead); font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
.oc-result__snippet {
	color: var(--wp--preset--color--text); font-size: var(--wp--preset--font-size--note); line-height: 1.65; overflow-wrap: anywhere;
	display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden;
}
.oc-result__snippet:lang(si), .oc-result__title:lang(si) { line-height: 1.8; }
.oc-result__go { --icon-size: 1.125rem; align-self: center; color: var(--wp--preset--color--muted); transition: transform 160ms ease, color 160ms ease; }
.oc-result__link:hover .oc-result__go { color: var(--wp--preset--color--teal); transform: translateX(3px); }
.oc-result-more { display: flex; justify-content: center; margin-top: var(--wp--preset--spacing--60); }
.oc-result-more:empty { display: none; }
.oc-search-more {
	min-height: var(--wp--custom--control-height); padding: 0 var(--wp--preset--spacing--70); color: var(--wp--preset--color--navy); font: inherit; font-size: var(--wp--preset--font-size--note); font-weight: 600;
	background: var(--wp--preset--color--base); border: var(--wp--custom--border-width) solid var(--wp--preset--color--line); border-radius: var(--wp--custom--radius--small); cursor: pointer;
	transition: border-color 160ms ease, background-color 160ms ease;
}
.oc-search-more:hover { background: var(--wp--preset--color--teal-light); border-color: var(--wp--preset--color--teal); }
.oc-search-more:focus-visible { outline: var(--wp--custom--focus-width) solid var(--wp--preset--color--teal); outline-offset: 3px; }
.oc-result-empty { max-width: 40rem; }
.oc-result-empty:empty { display: none; }
.oc-result-empty .oc-search-empty { padding: 0; }
.oc-result-empty .oc-search-pop { margin-top: var(--wp--preset--spacing--60); padding: 0; }
.oc-result-empty > .oc-search-empty__hint { margin: 0; font-size: var(--wp--preset--font-size--body); }
.oc-result-empty .oc-search-empty__title { font-size: var(--wp--preset--font-size--lead); }

@media (max-width: 600px) {
	.oc-search-page-form .wp-block-search__inside-wrapper { flex-wrap: wrap; }
	body .oc-search-page-form .wp-block-search__button { flex: 1 1 100%; }
	.oc-result__link { grid-template-columns: auto minmax(0, 1fr); gap: var(--wp--preset--spacing--30); padding: var(--wp--preset--spacing--40); }
	.oc-result__go { display: none; }
	.oc-result__icon { width: 2.25rem; height: 2.25rem; }
	.oc-search-tabs { flex-wrap: nowrap; margin-inline: calc(var(--wp--custom--gutter) * -1); padding-inline: var(--wp--custom--gutter); overflow-x: auto; scrollbar-width: none; }
	.oc-search-tabs::-webkit-scrollbar { display: none; }
	.oc-tab { flex: none; }
}

/* ---------- Deep-linked cards (condition + clinic) ---------- */
.oc-topic-card[id], .oc-clinic-card[id] { scroll-margin-top: 9rem; }
@media (max-width: 760px) { .oc-topic-card[id], .oc-clinic-card[id] { scroll-margin-top: 7.5rem; } }
.oc-topic-card.is-target, .oc-clinic-card.is-target { animation: oc-target 3.2s ease-out; }
@keyframes oc-target {
	0%, 55% { box-shadow: 0 0 0 3px var(--wp--preset--color--teal), 0 0.75rem 2.25rem rgb(0 117 117 / 20%); }
	100% { box-shadow: 0 0 0 3px transparent, 0 0 0 transparent; }
}
@media (prefers-reduced-motion: reduce) {
	.oc-header .oc-search__panel, .oc-sr-go, .oc-result__link, .oc-result__go { transition: none; }
	.oc-header .oc-search.is-open .oc-search__panel { animation: none; }
	.oc-topic-card.is-target, .oc-clinic-card.is-target { animation: none; box-shadow: 0 0 0 3px var(--wp--preset--color--teal); }
}