/*!
 * Hospital Network page - modern UI
 *
 * Loaded only on templates/tpl-hospital-network-new.php, after
 * css/hospital-network.css. Kept as a separate file from that one on purpose:
 * hospital-network.css is the responsive bug fix and should survive, this file
 * is presentation and can be dropped wholesale if the restyle is reverted.
 *
 * The hero rules in section 2 are the part that will be discarded when
 * feat/hospital-network-elementor-hero lands, since that branch removes the PHP
 * hero entirely. They are grouped together so they can be deleted in one go.
 *
 * The results markup comes from the remote API
 * (lumaportal-api.lumahealth.com .. get_hospitals.php?action=matches_table),
 * which is a different codebase, so its HTML cannot be changed here. Everything
 * below is either CSS or a class added at runtime by js/hospital-network-ui.js.
 */

/* ---------------------------------------------------------------------------
 * 1. Tokens
 *
 * Brand values are taken from the existing bundles rather than invented:
 * #30b0e0 is the theme blue used on table headers and buttons, #fcb316 the
 * hero orange, #40444b and #8b8f96 the body and muted greys.
 * ------------------------------------------------------------------------- */

.personal-insurance {
	--hn-blue: #30b0e0;
	/* --hn-blue-dark is only safe as a border or a fill behind white text:
	 * 3.69:1 on white, which clears the 3:1 needed for a UI boundary but not
	 * the 4.5:1 needed for text. --hn-blue-ink is the text-safe blue at
	 * 6.42:1 on white and 5.96:1 on --hn-blue-050. */
	--hn-blue-dark: #1f8fba;
	--hn-blue-ink: #146685;
	--hn-blue-050: #eef8fd;
	--hn-amber: #fcb316;
	--hn-navy: #123a5a;
	--hn-ink: #1c2530;
	--hn-body: #40444b;
	--hn-muted: #666e79;
	--hn-line: #e4e9ee;
	--hn-line-soft: #eef1f5;
	--hn-surface: #ffffff;
	--hn-surface-alt: #f7f9fb;
	--hn-radius: 12px;
	--hn-radius-sm: 8px;
	--hn-shadow: 0 1px 2px rgba(18, 58, 90, .06), 0 8px 24px rgba(18, 58, 90, .07);
	--hn-shadow-sm: 0 1px 2px rgba(18, 58, 90, .07), 0 2px 8px rgba(18, 58, 90, .06);
	--hn-focus: 0 0 0 3px rgba(48, 176, 224, .32);
}

/* ---------------------------------------------------------------------------
 * 2. Hero
 *
 * DELETE THIS SECTION when feat/hospital-network-elementor-hero lands.
 * ------------------------------------------------------------------------- */

/* The caption sits over a photograph with no scrim, so contrast depends
 * entirely on which part of the image is behind it. A left-to-right wash gives
 * the text a consistent surface without hiding the photo. */
@media (min-width: 768px) {
	.personal-insurance .banner #banner-slider .item::after {
		content: "";
		position: absolute;
		inset: 0;
		pointer-events: none;
		background: linear-gradient(
			100deg,
			rgba(255, 255, 255, .94) 0%,
			rgba(255, 255, 255, .82) 34%,
			rgba(255, 255, 255, .35) 56%,
			rgba(255, 255, 255, 0) 74%
		);
	}

	.personal-insurance .banner #banner-slider .banner-caption {
		z-index: 2;
	}
}

.personal-insurance .banner #banner-slider .banner-caption h1 {
	letter-spacing: -0.01em;
}

.personal-insurance .banner #banner-slider .banner-caption p {
	color: var(--hn-body);
}

/* On phones the caption is a plain white band butted against the image.
 * Softening the divider stops it reading as a seam. */
@media (max-width: 767px) {
	.personal-insurance .banner #banner-slider .banner-caption {
		border-top: 0;
		border-bottom: 1px solid var(--hn-line);
		padding: 20px 18px 24px;
	}
}

/* ---------------------------------------------------------------------------
 * 3. Country and city form
 * ------------------------------------------------------------------------- */

.find_hospitals .find_form {
	gap: 16px;
}

.find_hospitals .find_form_field {
	position: relative;
}

/* The theme select has appearance:none but leans on a background image for the
 * chevron. Drawing it here keeps it aligned with the new padding and lets it
 * pick up the focus and disabled states. */
.find_hospitals .find_form select {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	height: 54px;
	padding: 0 46px 0 16px;
	border: 1px solid var(--hn-line);
	border-radius: var(--hn-radius-sm);
	background-color: var(--hn-surface);
	background-image: linear-gradient(45deg, transparent 50%, var(--hn-muted) 50%),
		linear-gradient(135deg, var(--hn-muted) 50%, transparent 50%);
	background-position: calc(100% - 22px) 24px, calc(100% - 16px) 24px;
	background-size: 6px 6px, 6px 6px;
	background-repeat: no-repeat;
	color: var(--hn-ink);
	box-shadow: var(--hn-shadow-sm);
	transition: border-color .15s ease, box-shadow .15s ease;
}

.find_hospitals .find_form select:hover:not(:disabled) {
	border-color: #cbd4dd;
}

.find_hospitals .find_form select:focus {
	outline: none;
	border-color: var(--hn-blue);
	box-shadow: var(--hn-focus);
}

.find_hospitals .find_form select:disabled {
	background-color: var(--hn-surface-alt);
	color: var(--hn-muted);
	box-shadow: none;
	cursor: not-allowed;
}

/* ---------------------------------------------------------------------------
 * 4. Map
 * ------------------------------------------------------------------------- */

.map_sec_box #map_network {
	border-top: 1px solid var(--hn-line);
	border-bottom: 1px solid var(--hn-line);
}

/* The legend was a pale blue box with a 2px black border, which is the single
 * most dated element on the page. Same information, card treatment. */
.map_sec_box #legend {
	background: var(--hn-surface);
	border: 1px solid var(--hn-line);
	border-radius: var(--hn-radius-sm);
	box-shadow: var(--hn-shadow-sm);
	padding: 12px 14px;
	margin: 12px;
	font-family: inherit;
	color: var(--hn-ink);
}

.map_sec_box #legend h3 {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--hn-muted);
	margin: 0 0 8px;
}

.map_sec_box #legend > div {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	margin-bottom: 6px;
}

.map_sec_box #legend > div:last-child {
	margin-bottom: 0;
}

/* ---------------------------------------------------------------------------
 * 5. Results: search bar
 *
 * Markup lives in the template above #results, so it survives the API
 * replacing #results innerHTML on every country or city change.
 * ------------------------------------------------------------------------- */

.hn-resultbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 16px;
	margin: 0 0 18px;
}

.hn-search {
	position: relative;
	flex: 1 1 320px;
	min-width: 0;
}

.hn-search__icon {
	position: absolute;
	top: 50%;
	left: 16px;
	width: 18px;
	height: 18px;
	transform: translateY(-50%);
	pointer-events: none;
	color: var(--hn-muted);
}

.hn-search__input {
	width: 100%;
	height: 54px;
	padding: 0 44px 0 46px;
	border: 1px solid var(--hn-line);
	border-radius: var(--hn-radius-sm);
	background: var(--hn-surface);
	/* 16px keeps iOS Safari from zooming the page on focus */
	font-size: 16px;
	color: var(--hn-ink);
	box-shadow: var(--hn-shadow-sm);
	transition: border-color .15s ease, box-shadow .15s ease;
}

.hn-search__input::placeholder {
	color: var(--hn-muted);
}

.hn-search__input:focus {
	outline: none;
	border-color: var(--hn-blue);
	box-shadow: var(--hn-focus);
}

.hn-search__clear {
	position: absolute;
	top: 50%;
	right: 10px;
	display: none;
	width: 28px;
	height: 28px;
	padding: 0;
	transform: translateY(-50%);
	border: 0;
	border-radius: 50%;
	background: var(--hn-surface-alt);
	color: var(--hn-muted);
	font-size: 17px;
	line-height: 26px;
	cursor: pointer;
}

.hn-search__clear:hover {
	background: #e9eef3;
	color: var(--hn-ink);
}

.hn-search__clear:focus-visible {
	outline: none;
	box-shadow: var(--hn-focus);
}

.hn-search.is-filled .hn-search__clear {
	display: block;
}

.hn-count {
	flex: 0 0 auto;
	font-size: 15px;
	color: var(--hn-muted);
	white-space: nowrap;
}

.hn-count b {
	color: var(--hn-ink);
	font-weight: 700;
}

/* Shown by the script when a query matches nothing. */
.hn-empty {
	display: none;
	padding: 44px 20px;
	border: 1px dashed var(--hn-line);
	border-radius: var(--hn-radius);
	background: var(--hn-surface-alt);
	text-align: center;
	color: var(--hn-muted);
	font-size: 16px;
}

.hn-empty b {
	color: var(--hn-ink);
}

.is-empty .hn-empty {
	display: block;
}

.is-empty .table_content,
.is-empty .formobile_table {
	display: none !important;
}

/* ---------------------------------------------------------------------------
 * 6. Results: desktop table
 * ------------------------------------------------------------------------- */

.matching_results .table_content {
	border: 1px solid var(--hn-line);
	border-radius: var(--hn-radius);
	background: var(--hn-surface);
	box-shadow: var(--hn-shadow);
	/* the sticky header needs a scroll container that is not the page */
	max-height: 70vh;
	overflow: auto;
}

.matching_results .table_content table {
	margin: 0;
	border: 0;
	border-collapse: separate;
	border-spacing: 0;
}

.matching_results .table_content table th {
	position: sticky;
	top: 0;
	z-index: 2;
	background: var(--hn-surface);
	border: 0;
	border-bottom: 1px solid var(--hn-line);
	padding: 15px 18px;
	color: var(--hn-muted);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	text-align: left;
}

.matching_results .table_content table td {
	border: 0;
	border-bottom: 1px solid var(--hn-line-soft);
	padding: 15px 18px;
	color: var(--hn-body);
	font-size: 16px;
	vertical-align: middle;
	text-align: left;
}

.matching_results .table_content table tr:last-child td {
	border-bottom: 0;
}

.matching_results .table_content table tbody tr:hover td,
.matching_results .table_content table tr:hover td {
	background: var(--hn-blue-050);
}

/* Facility name is the column people scan, so it carries the weight. */
.matching_results .table_content table td:first-child {
	color: var(--hn-ink);
	font-weight: 600;
}

/* ---------------------------------------------------------------------------
 * 7. Results: shared enhancements
 *
 * .hn-type and .hn-link are added at runtime by js/hospital-network-ui.js.
 * ------------------------------------------------------------------------- */

/* The theme ships .matching_results .table_content table td span
 * {display:block;text-align:center}, specificity (0,2,3). Any span added in
 * here has to out-specify that or it becomes a full width centred block: the
 * type pill stretched across its cell and the search highlight pushed the
 * facility name onto a second line. Hence the long selectors below. */
.matching_results .table_content table td span.hn-type {
	display: inline-block;
	text-align: center;
}

.matching_results .table_content table td span.hn-mark,
.matching_results .table_content table td span.hn-na {
	display: inline;
	text-align: inherit;
}

.hn-type {
	display: inline-block;
	padding: 4px 11px;
	border-radius: 999px;
	background: var(--hn-blue-050);
	color: var(--hn-blue-ink);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.5;
	white-space: nowrap;
}

.hn-type--clinic {
	background: #eef7f0;
	color: #2a7147;
}

.hn-type--dental {
	background: #fdf3e3;
	color: #7d550d;
}

.hn-type--other {
	background: var(--hn-surface-alt);
	color: var(--hn-muted);
}

/* Raw hrefs were printed in full and broke mid-word across three lines. The
 * script keeps the href and shows the host instead. */
.matching_results .hn-link {
	display: inline-block;
	max-width: 100%;
	color: var(--hn-blue-ink);
	font-weight: 500;
	text-decoration: none;
	overflow-wrap: anywhere;
}

.matching_results .hn-link:hover {
	color: var(--hn-blue);
	text-decoration: underline;
}

.matching_results .hn-tel {
	display: inline-block;
	margin-top: 3px;
	color: var(--hn-body);
	text-decoration: none;
}

/* The API emits <a href="https://Not Available"> when a facility has no
 * website, and href="tel:" when it has no phone. Both are rendered as plain
 * muted text rather than dead links. */
.matching_results .hn-na {
	color: var(--hn-muted);
	font-style: italic;
}

.matching_results .hn-tel:hover {
	color: var(--hn-blue-ink);
}

/* ---------------------------------------------------------------------------
 * Map info window
 *
 * hospital-network.js builds the bubble content as
 *   <div><strong>name</strong><br>address<br>phone<br><a class="hn-viewmap">
 * and Google renders it inside .gm-style-iw within #map_network, so these are
 * scoped to the map and cannot leak into the page.
 *
 * "View Map" stays an <a> because it navigates to Google Maps in a new tab.
 * Only its appearance changes.
 * ------------------------------------------------------------------------- */

#map_network .gm-style-iw {
	font-family: inherit;
}

#map_network .gm-style-iw strong {
	display: block;
	margin-bottom: 4px;
	color: var(--hn-ink);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.35;
}

/* Outline rather than solid, for two reasons.
 *
 * Hierarchy: the visitor is already looking at a map, so opening Google Maps is
 * a secondary action and a filled brand button over-weighted it inside a small
 * bubble.
 *
 * Contrast: the solid version was white on --hn-blue, which measures 2.50:1 and
 * fails WCAG AA for text. Even white on --hn-blue-dark is only 3.69:1. The
 * outline puts --hn-blue-ink on white at 6.42:1, with the border at 3.69:1,
 * which clears the 3:1 required for a UI boundary. */
#map_network .hn-viewmap,
#map_network .hn-viewmap:link,
#map_network .hn-viewmap:visited {
	display: inline-block;
	margin-top: 10px;
	padding: 7px 15px;
	border: 1.5px solid var(--hn-blue-dark);
	border-radius: var(--hn-radius-sm);
	background: transparent;
	color: var(--hn-blue-ink);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}

/* :hover only, deliberately not :focus. Google Maps moves focus into the info
 * window content when it opens, so a :focus rule here rendered the button in
 * its hover colour the moment the bubble appeared. Keyboard users still get a
 * ring from :focus-visible below. */
/* Fills on hover, which is where the solid treatment belongs. White on
 * --hn-blue-ink is 6.42:1, so the hover state passes AA too.
 *
 * There is deliberately no :focus colour rule here. An earlier revision had
 * one, to stop the theme's a:focus recolouring the button, and it made the
 * label vanish on hover: Google Maps moves focus into the info window when it
 * opens, so :hover and :focus both matched, they carry identical specificity
 * (1,2,0), and :focus came later in the file and won. The result was
 * #146685 text on a #146685 fill.
 *
 * It is not needed anyway. The base rule above is #id .class at (1,1,0), which
 * already outranks the theme's a:hover,a:focus at (0,1,1), so a focused button
 * keeps its outline colours with no extra rule. */
#map_network .hn-viewmap:hover {
	background: var(--hn-blue-ink);
	border-color: var(--hn-blue-ink);
	color: #fff;
	text-decoration: none;
}

#map_network .hn-viewmap:focus-visible {
	outline: none;
	box-shadow: var(--hn-focus);
}

/* ---------------------------------------------------------------------------
 * Facility name as a map-focus button
 *
 * A real <button>, so the browser's button styling is stripped back to plain
 * text before it can sit in a table cell without looking like a control. Only
 * names that actually have a marker get .is-mappable: of the 324 Thailand
 * records, 27 have no coordinates in the XML feed and stay inert.
 * ------------------------------------------------------------------------- */

.matching_results .hn-name,
.formobile_table .hn-name {
	display: inline;
	padding: 0;
	border: 0;
	margin: 0;
	background: none;
	font: inherit;
	color: inherit;
	text-align: left;
	cursor: default;
}

.matching_results .hn-name.is-mappable,
.formobile_table .hn-name.is-mappable {
	cursor: pointer;
	/* dotted rather than solid, so it does not read as a link to another page */
	text-decoration: underline dotted;
	text-decoration-color: #b9c6d1;
	text-underline-offset: 3px;
	transition: color .12s ease;
}

.matching_results .hn-name.is-mappable:hover,
.formobile_table .hn-name.is-mappable:hover {
	color: var(--hn-blue-ink);
	text-decoration-color: var(--hn-blue);
}

.matching_results .hn-name:focus-visible,
.formobile_table .hn-name:focus-visible {
	outline: none;
	border-radius: 3px;
	box-shadow: var(--hn-focus);
}

/* A facility with no coordinates cannot be shown, so say so briefly rather
 * than let the click look broken. */
.matching_results .hn-name.is-nomap::after,
.formobile_table .hn-name.is-nomap::after {
	content: " (not on the map)";
	color: var(--hn-muted);
	font-style: italic;
	font-weight: 400;
	white-space: nowrap;
}

/* Highlight for the matched part of a facility name. */
.hn-mark {
	background: #fff2cc;
	border-radius: 3px;
	padding: 0 2px;
	color: inherit;
}

/* ---------------------------------------------------------------------------
 * 8. Results: phone cards
 * ------------------------------------------------------------------------- */

@media (max-width: 767px) {
	.formobile_table .table_for_mobile {
		border: 1px solid var(--hn-line);
		border-radius: var(--hn-radius);
		background: var(--hn-surface);
		box-shadow: var(--hn-shadow-sm);
		padding: 14px 16px;
		margin-bottom: 10px;
	}

	.formobile_table .table_for_mobile table,
	.formobile_table .table_for_mobile tbody,
	.formobile_table .table_for_mobile tr,
	.formobile_table .table_for_mobile td {
		display: block;
		width: 100%;
	}

	/* .matching_results table in the bundle carries border-bottom and
	 * border-left, which drew a stray rule across the bottom of every card
	 * once the card itself became the visible frame. */
	.formobile_table .table_for_mobile table {
		border: 0;
		margin: 0;
	}

	/* Every field was a full height table row with its own separator and a
	 * label stacked above the value, which made a three field card 291px tall.
	 * At 324 records that is a 99,000px page. The separators go, the rows
	 * become tight blocks, and the labels below are hidden. */
	.formobile_table .table_for_mobile table td {
		border: 0;
		padding: 0;
		margin: 0 0 6px;
		font-size: 15px;
		text-align: left;
	}

	.formobile_table .table_for_mobile table tr:last-child td {
		margin-bottom: 0;
	}

	/* The API prints "Name:" and "Type:" labels in a span before each value.
	 * Both are redundant once the name is the card heading and the type is a
	 * pill, so they are hidden rather than given a row of their own. */
	.formobile_table .table_for_mobile table tr:nth-child(1) td span,
	.formobile_table .table_for_mobile table tr:nth-child(2) td span:not(.hn-type),
	.formobile_table .table_for_mobile table tr:nth-child(3) td span:not(.hn-type):not(.hn-na) {
		display: none;
	}

	/* The contact cell is <span>Contact Information:</span><br><a>..</a><br><a>
	 * so hiding the label alone left its line break behind as a blank line
	 * above the website. Only the first break goes; the second still separates
	 * the website from the phone. */
	.formobile_table .table_for_mobile table tr:nth-child(3) td br:first-of-type {
		display: none;
	}

	/* Facility name is the card heading. */
	.formobile_table .table_for_mobile table tr:first-child td {
		color: var(--hn-ink);
		font-size: 16px;
		font-weight: 700;
		line-height: 1.35;
	}

	/* text-align is restated because the theme's .table_for_mobile table td
	 * span rule centres it and inheriting from the td does not undo that. The
	 * same rule carries font-weight:600px, invalid CSS, which is why these
	 * were never bold. */
	.formobile_table .table_for_mobile table td span.hn-type {
		display: inline-block;
		text-align: center;
		font-size: 12px;
	}

	.formobile_table .table_for_mobile table td span.hn-na {
		display: inline;
		text-align: left;
	}

	.formobile_table .table_for_mobile .hn-link,
	.formobile_table .table_for_mobile .hn-tel {
		display: inline-block;
		margin-top: 2px;
		font-size: 15px;
	}

	/* The card list has no scrolling container, unlike the desktop table, so
	 * it is capped and extended on demand instead. A nested scroll area is
	 * awkward on a touch screen. */
	.hn-more {
		display: block;
		width: 100%;
		margin: 4px 0 8px;
		padding: 14px 18px;
		border: 1px solid var(--hn-line);
		border-radius: var(--hn-radius-sm);
		background: var(--hn-surface);
		box-shadow: var(--hn-shadow-sm);
		color: var(--hn-blue-dark);
		font-size: 15px;
		font-weight: 600;
		cursor: pointer;
	}

	.hn-more:hover {
		background: var(--hn-blue-050);
	}

	.hn-more:focus-visible {
		outline: none;
		box-shadow: var(--hn-focus);
	}
}

/* Desktop keeps every row: the table is inside its own scrolling container. */
@media (min-width: 768px) {
	.hn-more {
		display: none !important;
	}
}