/**
 * Provider profile — [hw360_provider_profile]
 *
 * Loaded only on pages where the shortcode actually rendered. Colours come
 * from theme.json presets, never from literals, so a palette change in the
 * theme carries here without this file being touched.
 *
 * Status is never signalled by colour alone (WCAG 2.2 AA, SC 1.4.1): every
 * coloured state in this file sits beside an icon and a written word supplied
 * by the template.
 */

.hw-provider-profile {
	--hw-pp-rule: rgba(13, 16, 25, 0.12);
	margin: 0 0 2.5rem;
	color: var(--wp--preset--color--navy, #0D1019);
}

/* Digits that sit in columns, or that a reader compares between rows. */
.hw-provider-profile .hw-tabular {
	font-variant-numeric: tabular-nums;
}

/* ---------- Identity: who dispenses, and what the register says --------- */

/* The identity card carries a teal rule along its top edge. One accent, on the
   one card that answers "who is dispensing this" — the same device the theme
   uses for .hw-keyline, so a provider page reads as part of the same site
   rather than a bolted-on component. */
.hw-provider-identity {
	padding: 1.5rem 1.5rem 1.25rem;
	border: 1px solid var(--wp--preset--color--card-border, #E5E6E8);
	border-top: 3px solid var(--wp--preset--color--trust-teal, #1F4C5F);
	border-radius: 12px;
	background: var(--wp--preset--color--white, #FFFFFF);
	box-shadow: 0 1px 2px rgba(13, 16, 25, 0.05),
	            0 12px 28px -18px rgba(13, 16, 25, 0.18);
}

.hw-provider-identity__head {
	display: flex;
	align-items: center;
	gap: 0.875rem;
	margin: 0 0 1.25rem;
}

/* Initial-in-a-circle, matching the comparison table's provider column so the
   same provider looks like the same provider in both places. Decorative: the
   template marks it aria-hidden and the name sits beside it. */
.hw-provider-avatar {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--wp--preset--color--trust-teal-surface, #E8EDF0);
	color: var(--wp--preset--color--trust-teal, #1F4C5F);
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1;
}

/* Real logo swaps the initial for an actual mark once a brand has one on
   file (post featured image). Most provider logos are wordmarks, not square
   marks — clipping one into the 48px circle above cut the sides off (seen
   live on Happy Pharmacy, 5 Sep 2026). This variant drops the circle for a
   rounded rectangle.
   Fixed width AND height (5 Sep 2026) rather than the earlier auto-width
   box: with 65 different providers' logos in this one slot, a box that
   resized per logo made the row jump from card to card. object-fit: contain
   on the image below guarantees the whole mark still prints — never
   cropped — whatever its native aspect ratio, just letterboxed inside the
   fixed frame instead of stretched. */
/*
 * Square, not landscape. A chunk of these logos are app-icon-style — a
 * full-bleed square mark with no padding of its own (DoToR, Zava, Chequp,
 * Medino, Superdrug and others, sourced from favicons/apple-touch-icons) —
 * and a landscape box forced contain to shrink them to fit the width,
 * leaving bare white either side even though the logo itself has no
 * padding to blame (5 Sep 2026). Square lets those fill edge to edge.
 * A wordmark logo still prints whole here too — it just centers with a
 * little headroom top and bottom instead, rather than the lopsided
 * left-right gap a landscape box gave a square icon.
 */
.hw-provider-avatar--logo {
	width: 100px;
	height: 100px;
	border-radius: 10px;
	background: var(--wp--preset--color--white, #FFFFFF);
	border: 1px solid var(--wp--preset--color--grey-subtle, #82898F);
	padding: 8px 12px;
	box-sizing: border-box;
}

/*
 * contain, not cover. cover fills the box by cropping whatever doesn't
 * fit — that's what sliced "Happy Pharmacy" down to "ppy pharmac" once
 * this got changed to cover directly on the server (5 Sep 2026). contain
 * shrinks the whole logo to fit inside the box instead, so nothing is
 * ever cut off — the box can go any size without the logo losing an edge.
 */
.hw-provider-avatar--logo img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.hw-provider-identity__names {
	flex: 1 1 auto;
	min-width: 0;
}

.hw-provider-identity__brand {
	margin: 0;
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1.2;
}

.hw-provider-identity__meds {
	margin: 0.2rem 0 0;
	font-size: 0.875rem;
	color: var(--wp--preset--color--grey-muted, #6B7280);
}

/* Status chip. Colour is never alone: a glyph and a word ship with it. */
.hw-provider-badge {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	margin: 0;
	padding: 0.3rem 0.7rem;
	border-radius: 999px;
	font-size: 0.8125rem;
	font-weight: 700;
	white-space: nowrap;
}

.hw-provider-badge--verified {
	background: var(--wp--preset--color--success-surface, #DCFCE7);
	color: var(--wp--preset--color--success-text, #166534);
}

.hw-provider-badge--unchecked {
	background: var(--wp--preset--color--warning-amber-surface, #FFF3CD);
	color: var(--wp--preset--color--warning-amber, #8A4B00);
}

/* Three figures, divided rather than floated apart: they describe one record
   and should read as one object (same reasoning as .hw-statrow in the theme).
   Placed BELOW the dispensing identity and the register line, never above —
   spec §19 puts who dispenses before what it costs. */
.hw-provider-stats {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1rem;
	margin: 1.25rem 0 0;
	padding: 1rem 0 0;
	border-top: 1px solid var(--wp--preset--color--card-border, #E5E6E8);
	list-style: none;
}

.hw-provider-stats__item {
	margin: 0;
	padding-left: 1rem;
	border-left: 1px solid var(--wp--preset--color--card-border, #E5E6E8);
}

.hw-provider-stats__item:first-child {
	padding-left: 0;
	border-left: 0;
}

.hw-provider-stats__value {
	display: block;
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1.15;
	color: var(--wp--preset--color--trust-teal, #1F4C5F);
}

.hw-provider-stats__value--date {
	font-size: 1.125rem;
	line-height: 1.35;
}

.hw-provider-stats__label {
	display: block;
	margin-top: 0.2rem;
	font-size: 0.8125rem;
	line-height: 1.4;
	color: var(--wp--preset--color--grey-muted, #6B7280);
}

@media (max-width: 640px) {
	.hw-provider-identity__head {
		flex-wrap: wrap;
	}

	.hw-provider-stats {
		grid-template-columns: 1fr;
		gap: 0.75rem;
	}

	.hw-provider-stats__item {
		padding-left: 0;
		border-left: 0;
	}

	.hw-provider-stats__item + .hw-provider-stats__item {
		padding-top: 0.75rem;
		border-top: 1px solid var(--wp--preset--color--card-border, #E5E6E8);
	}
}

.hw-provider-identity__facts {
	display: grid;
	grid-template-columns: minmax(9rem, auto) 1fr;
	gap: 0.35rem 1rem;
	margin: 0 0 1rem;
}

.hw-provider-identity__facts dt {
	margin: 0;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--wp--preset--color--grey-muted, #6B7280);
}

.hw-provider-identity__facts dd {
	margin: 0;
	font-size: 0.9375rem;
}

/* "as named on the register" — marks the entity name as the regulator's own
   wording rather than ours. Quieter than the value it qualifies, but it still
   has to clear AA: grey-muted on white is 4.83:1. */
.hw-provider-identity__source {
	display: block;
	font-size: 0.75rem;
	color: var(--wp--preset--color--grey-muted, #6B7280);
}

/* Shown where no register check has confirmed a number. Amber 700 on white is
   7.06:1, and the word itself carries the meaning — colour is never the only
   signal (WCAG 2.2 AA, SC 1.4.1). */
.hw-provider-identity__unverified {
	color: var(--wp--preset--color--warning-amber, #8A4B00);
	font-weight: 600;
}

.hw-register-status {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.5rem;
	margin: 0 0 0.5rem;
	font-size: 0.9375rem;
	font-weight: 600;
}

.hw-register-status__icon {
	flex: 0 0 auto;
	font-weight: 700;
}

.hw-register-status--registered {
	color: var(--wp--preset--color--success-green, #0D893A);
}

/* Every other verification state, including an absent check. Deliberately
   one rule: "not currently confirmed" is a single message to a reader, and
   splitting it by internal status code would imply a precision the badge
   does not carry. */
.hw-register-status--not_on_register,
.hw-register-status--not_found,
.hw-register-status--disputed,
.hw-register-status--unchecked {
	color: var(--wp--preset--color--cta-orange-strong, #C0580F);
}

.hw-register-status__link {
	font-weight: 600;
	color: var(--wp--preset--color--link-blue, #005FCC);
	/* 24px minimum touch target (WCAG 2.2 SC 2.5.8). */
	display: inline-flex;
	align-items: center;
	min-height: 24px;
}

.hw-register-note,
.hw-register-disclaimer {
	margin: 0.5rem 0 0;
	font-size: 0.8125rem;
	line-height: 1.5;
	color: var(--wp--preset--color--grey-muted, #6B7280);
}

/* ---------- Price tables, one per medication --------------------------- */

.hw-provider-med {
	margin-top: 2.5rem;
}

/* Title left, the two figures a reader scans for on the right. They wrap onto
   their own line before either has to shrink. */
.hw-provider-med__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.35rem 1.5rem;
	margin: 0 0 0.875rem;
}

.hw-provider-med__title {
	margin: 0;
}


/* The table scrolls inside its own container so the page body never scrolls
   sideways on a narrow screen. */
.hw-provider-med__scroll {
	overflow-x: auto;
	border: 1px solid var(--wp--preset--color--card-border, #E5E6E8);
	border-radius: 12px;
	background: var(--wp--preset--color--white, #FFFFFF);
	box-shadow: 0 1px 2px rgba(13, 16, 25, 0.05);

	/* A flex/grid item defaults to min-width:auto and refuses to shrink below
	   its content, so without these the wrapper widens to the table and the
	   overflow never engages — the same trap documented in comparison-table.css. */
	min-width: 0;
	max-width: 100%;
}

.hw-provider-table {
	width: 100%;
	/* Three columns now, not five. 26rem is what the widest row needs before
	   the cost figure and its breakdown start wrapping badly; below that the
	   wrapper scrolls rather than the page. */
	min-width: 26rem;
	border-collapse: collapse;
	font-size: 0.9375rem;
}

.hw-provider-table th,
.hw-provider-table td {
	padding: 0.75rem 1rem;
	text-align: left;
	vertical-align: top;
	border-bottom: 1px solid var(--hw-pp-rule);
}

.hw-provider-table thead th {
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--wp--preset--color--grey-text-strong, #4B5563);
	background: var(--wp--preset--color--soft-grey, #F4F4F6);
	white-space: nowrap;
}

.hw-provider-table tbody tr:nth-child(even) {
	background: var(--wp--preset--color--warm-white, #F8F9FB);
}

.hw-provider-table tbody tr:last-child th,
.hw-provider-table tbody tr:last-child td {
	border-bottom: 0;
}

.hw-provider-table .hw-num {
	text-align: right;
}

/* The cost cell holds two lines: the figure, and the components beneath it.
   Type is set on those spans rather than here, so the breakdown does not have
   to fight an inherited 18px bold teal. */
.hw-provider-table__total {
	white-space: nowrap;
}

/* Dose as a chip rather than plain text: it is a label for the row, not a
   value to compare, and the chip stops it competing with the figures. */
.hw-dose-pill {
	display: inline-block;
	padding: 0.15rem 0.55rem;
	border-radius: 999px;
	background: var(--wp--preset--color--info-indigo-surface, #F0F6FF);
	color: var(--wp--preset--color--info-indigo, #3730A3);
	font-size: 0.8125rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* Cheapest row on the table. Green edge plus a written label — the edge alone
   would be a colour-only signal (SC 1.4.1), and the wording deliberately
   claims nothing beyond "lowest on this table": on a dose ladder the cheapest
   row is usually just the starting strength. */
.hw-provider-table tbody tr.is-lowest,
.hw-provider-table tbody tr.is-lowest:nth-child(even) {
	background: var(--wp--preset--color--success-surface, #DCFCE7);
}

.hw-provider-table tbody tr.is-lowest > th {
	box-shadow: inset 3px 0 0 0 var(--wp--preset--color--success-green, #0D893A);
}

.hw-lowest-tag {
	display: block;
	margin-top: 0.3rem;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var(--wp--preset--color--success-text, #166534);
}

/* ---------- Merged table: medicine column and cost breakdown ------------ */

/* ---------- Medicine tabs ----------------------------------------------- */

/* Rendered hidden and revealed by provider-profile.js — see that file for why.
   The underline marks the active tab, but the word "pressed" reaches assistive
   tech through aria-pressed, and the tab keeps its colour change too, so the
   state never rests on the rule alone (SC 1.4.1). */
.hw-med-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem;
	margin: 1.25rem 0 0;
	border-bottom: 1px solid var(--wp--preset--color--card-border, #E5E6E8);
}

.hw-med-tabs[hidden] {
	display: none;
}

/* Kadence styles every <button> inside content as one of its own buttons —
   solid palette2 (orange) with its own radius and padding. A tab therefore
   arrived as an orange pill with teal text on it, about 2:1, which is the one
   thing a tab must not be. `html:root` plus the component class beats
   Kadence's rule without !important, the same pattern the theme uses in its
   palette bridge.

   Contrast, all against what actually sits behind them:
     grey-text-strong on white   7.60:1  — resting tab
     trust-teal on white         8.60:1  — active tab
     trust-teal on soft-grey     8.20:1  — hover
*/
html:root .hw-provider-profile .hw-med-tab {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	/* 44px keeps the target comfortably past the 24px AA floor (SC 2.5.8). */
	min-height: 44px;
	padding: 0.5rem 1rem;
	border: 0;
	border-bottom: 3px solid transparent;
	border-radius: 0;
	margin-bottom: -1px;
	background: transparent;
	box-shadow: none;
	color: var(--wp--preset--color--grey-text-strong, #4B5563);
	font-family: inherit;
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.2;
	text-transform: none;
	letter-spacing: 0;
	cursor: pointer;
}

html:root .hw-provider-profile .hw-med-tab:hover {
	background: var(--wp--preset--color--soft-grey, #F4F4F6);
	color: var(--wp--preset--color--trust-teal, #1F4C5F);
	border-bottom-color: var(--wp--preset--color--grey-border, #CBD4DA);
}

html:root .hw-provider-profile .hw-med-tab:focus-visible {
	outline: 3px solid var(--wp--preset--color--link-blue, #005FCC);
	outline-offset: -3px;
	background: var(--wp--preset--color--soft-grey, #F4F4F6);
	color: var(--wp--preset--color--trust-teal, #1F4C5F);
}

/* Active: teal text and a teal rule. The rule is not the only signal — the
   colour shifts too, and aria-pressed carries the state to assistive tech. */
html:root .hw-provider-profile .hw-med-tab.is-active,
html:root .hw-provider-profile .hw-med-tab[aria-pressed="true"] {
	background: transparent;
	color: var(--wp--preset--color--trust-teal, #1F4C5F);
	border-bottom-color: var(--wp--preset--color--trust-teal, #1F4C5F);
}

/* Dose count. Quiet until its tab is active, then it picks up the tab colour. */
html:root .hw-provider-profile .hw-med-tab__count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.5rem;
	padding: 0.05rem 0.4rem;
	border-radius: 999px;
	background: var(--wp--preset--color--soft-grey, #F4F4F6);
	color: var(--wp--preset--color--grey-muted, #6B7280);
	font-size: 0.75rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

html:root .hw-provider-profile .hw-med-tab.is-active .hw-med-tab__count,
html:root .hw-provider-profile .hw-med-tab[aria-pressed="true"] .hw-med-tab__count {
	background: var(--wp--preset--color--trust-teal-surface, #E8EDF0);
	color: var(--wp--preset--color--trust-teal, #1F4C5F);
}

/* Only the script ever sets this, and only on a group whose prices are still
   in the document. */
.hw-provider-table tbody.is-hidden {
	display: none;
}

/* With one medicine on screen at a time its name is already on the active tab,
   so the group header would say it twice. It stays in the DOM for the
   no-JavaScript view and for screen readers, hidden visually only. */
.hw-med-tabs:not([hidden]) ~ .hw-provider-med__scroll .hw-med-group__row > th {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset( 50% );
	white-space: nowrap;
}

/* Medicine as a group header rather than a repeated column. It is a real
   th[scope=rowgroup] inside its own tbody, so a screen reader announces the
   medicine as the heading for every dose beneath it — and the name is written
   once instead of six times. */
.hw-med-group__row > th {
	padding: 0.6rem 1rem;
	background: var(--wp--preset--color--trust-teal-surface, #E8EDF0);
	border-bottom: 1px solid var(--wp--preset--color--card-border, #E5E6E8);
	text-align: left;
	vertical-align: baseline;
}

/* A heavier rule where one medicine ends and the next begins. */
.hw-provider-table--merged tbody + tbody .hw-med-group__row > th {
	border-top: 2px solid var(--wp--preset--color--grey-border, #CBD4DA);
}

.hw-med-group__name {
	font-size: 1rem;
	font-weight: 700;
	color: var(--wp--preset--color--navy, #0D1019);
}

.hw-med-group__meta {
	margin-left: 0.5rem;
	font-size: 0.8125rem;
	font-weight: 400;
	color: var(--wp--preset--color--grey-text-strong, #4B5563);
}

/* The complete cost keeps its emphasis; the components that built it sit
   underneath in small text. Spec §10 requires the calculation to be visible,
   so dropping the "listed price" and "compulsory fees" columns moved that
   detail here rather than deleting it. */
.hw-total-figure {
	display: block;
	font-size: 1.125rem;
	font-weight: 700;
	line-height: 1.2;
	color: var(--wp--preset--color--trust-teal, #1F4C5F);
}

.hw-total-breakdown {
	display: block;
	margin-top: 0.2rem;
	font-size: 0.75rem;
	line-height: 1.4;
	font-weight: 400;
	color: var(--wp--preset--color--grey-muted, #6B7280);
}

/* ---------- Per-medicine lowest chips ----------------------------------- */

/* Both figures stated above the table, because a merged table has no single
   "cheapest row" worth naming: Wegovy's starting dose undercuts every Mounjaro
   dose, and one marker would imply a comparison between two different
   medicines that nobody made. */
.hw-provider-lowest {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.hw-provider-lowest__item {
	display: inline-flex;
	align-items: baseline;
	gap: 0.4rem;
	padding: 0.35rem 0.75rem;
	border: 1px solid var(--wp--preset--color--card-border, #E5E6E8);
	border-radius: 999px;
	background: var(--wp--preset--color--white, #FFFFFF);
	font-size: 0.8125rem;
}

.hw-provider-lowest__med {
	font-weight: 700;
	color: var(--wp--preset--color--navy, #0D1019);
}

.hw-provider-lowest__value {
	font-weight: 700;
	color: var(--wp--preset--color--trust-teal, #1F4C5F);
}

.hw-provider-lowest__note {
	color: var(--wp--preset--color--grey-muted, #6B7280);
}

/* ---------- Freshness --------------------------------------------------- */

.hw-freshness {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	font-size: 0.8125rem;
	font-weight: 600;
	white-space: nowrap;
}

.hw-freshness--fresh {
	color: var(--wp--preset--color--success-green, #0D893A);
}

.hw-freshness--ageing,
.hw-freshness--stale {
	color: var(--wp--preset--color--cta-orange-strong, #C0580F);
}

.hw-freshness__date {
	display: block;
	margin-top: 0.15rem;
	font-size: 0.8125rem;
	font-variant-numeric: tabular-nums;
	color: var(--wp--preset--color--grey-muted, #6B7280);
}

.hw-provider-med__note {
	margin: 0.75rem 0 0;
	font-size: 0.8125rem;
	line-height: 1.5;
	color: var(--wp--preset--color--grey-muted, #6B7280);
}

/* ---------- Outbound ---------------------------------------------------- */

/* The outbound action sits in its own panel so the commercial step is visibly
   separate from the evidence above it, and so the disclosure travels with the
   button instead of drifting into the footer (spec §4.3). */
.hw-provider-cta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem 1.5rem;
	margin: 2.5rem 0 0;
	padding: 1.25rem 1.5rem;
	border: 1px solid var(--wp--preset--color--card-border, #E5E6E8);
	border-radius: 12px;
	background: var(--wp--preset--color--trust-teal-surface, #E8EDF0);
}

.hw-provider-cta__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	min-height: 44px;
	padding: 0.65rem 1.75rem;
	border-radius: 999px;
	background: var(--wp--preset--color--cta-orange-strong, #C0580F);
	color: var(--wp--preset--color--white, #FFFFFF);
	font-weight: 700;
	text-decoration: none;
}

.hw-provider-cta__link:hover,
.hw-provider-cta__link:focus-visible {
	background: var(--wp--preset--color--trust-teal, #1F4C5F);
	color: var(--wp--preset--color--white, #FFFFFF);
}

.hw-provider-cta__disclosure {
	flex: 1 1 18rem;
	max-width: 46rem;
	font-size: 0.8125rem;
	line-height: 1.5;
	/* grey-text-strong, not grey-muted: this sits on the teal surface, where
	   #6B7280 falls to 4.36:1 and misses AA. #4B5563 gives 6.9:1. */
	color: var(--wp--preset--color--grey-text-strong, #4B5563);
}

/* Placeholder state when no outbound link is usable (e.g. the provider's
   site is down and its source URL was cleared). Muted grey rather than the
   teal action surface above, so an empty panel does not read as a button
   that quietly failed. */
.hw-provider-cta--empty {
	background: var(--wp--preset--color--warm-white, #F8F9FB);
	border-color: var(--wp--preset--color--card-border, #E5E6E8);
}

.hw-provider-cta--empty .hw-no-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 0.9375rem;
	color: var(--wp--preset--color--grey-text-strong, #4B5563);
}

/* Dark sections invert the surfaces; see theme style.css section 21 for why
   .hw-surface-dark carries the rest. */
.hw-surface-dark .hw-provider-identity,
.hw-surface-dark .hw-provider-med__scroll {
	background: rgba(255, 255, 255, 0.06);
	border-color: rgba(255, 255, 255, 0.18);
}

@media (max-width: 600px) {
	.hw-provider-identity__facts {
		grid-template-columns: 1fr;
		gap: 0.15rem;
	}

	.hw-provider-identity__facts dd {
		margin-bottom: 0.5rem;
	}
}