/**
 * ATH Provider Directory — Stylesheet
 * Red & White brand identity. Theme-aware CSS variables. Mobile-first.
 *
 * Breakpoints:
 *   Mobile  : < 768px   (default)
 *   Tablet  : 768–1023px
 *   Desktop : ≥ 1024px
 *
 * @version 2.0.0
 */

/* ============================================================
   1. DESIGN TOKENS (CSS Variables)
   ============================================================ */
:root {
	/* Brand colours */
	--ath-primary:        #C8102E;   /* ATH Red */
	--ath-primary-dark:   #a00d24;   /* Red on hover / pressed */
	--ath-primary-light:  #fbeaec;   /* Tinted red backgrounds */

	/* Surface & background */
	--ath-bg:             #ffffff;   /* Solid white background */
	--ath-surface:        #ffffff;   /* Card background */
	--ath-surface-hover:  #fafafa;   /* Card hover background */

	/* Text */
	--ath-text:           #1a1a1a;   /* Body text */
	--ath-text-muted:     #595959;   /* Secondary / meta text (darkened for contrast) */
	--ath-text-inverse:   #ffffff;   /* Text on primary backgrounds */

	/* Border */
	--ath-border:         #e0e0e0;   /* Default borders */
	--ath-border-focus:   #C8102E;   /* Focus ring */

	/* Shadows */
	--ath-shadow-sm:      0 1px 3px rgba(0,0,0,.08);
	--ath-shadow-md:      0 4px 12px rgba(0,0,0,.10);
	--ath-shadow-hover:   0 6px 20px rgba(0,0,0,.13);

	/* Radius */
	--ath-radius-sm:      6px;
	--ath-radius-md:      10px;
	--ath-radius-lg:      16px;
	--ath-radius-pill:    999px;

	/* Spacing */
	--ath-space-xs:       4px;
	--ath-space-sm:       8px;
	--ath-space-md:       16px;
	--ath-space-lg:       24px;
	--ath-space-xl:       32px;

	/* Typography */
	--ath-font:           system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	--ath-font-size-sm:   0.8125rem;  /* 13px */
	--ath-font-size-base: 0.9375rem;  /* 15px */
	--ath-font-size-lg:   1.0625rem;  /* 17px */
	--ath-font-size-xl:   1.25rem;    /* 20px */

	/* Animation */
	--ath-ease:           cubic-bezier(.25,.8,.25,1);
	--ath-dur-fast:       150ms;
	--ath-dur-base:       200ms;
	--ath-dur-card:       180ms;
}

/* ============================================================
   2. UTILITY
   ============================================================ */
.ath-sr-only {
	position: absolute;
	width:    1px;
	height:   1px;
	padding:  0;
	margin:   -1px;
	overflow: hidden;
	clip:     rect(0,0,0,0);
	white-space: nowrap;
	border:   0;
}

/* ============================================================
   3. ROOT LAYOUT — Mobile First (stacked)
   ============================================================ */
.ath-pds {
	display:        flex;
	flex-direction: column;
	gap:            var(--ath-space-lg);
	font-family:    var(--ath-font);
	font-size:      var(--ath-font-size-base);
	color:          var(--ath-text);
	background:     var(--ath-bg);
	padding:        var(--ath-space-lg) 0 var(--ath-space-xl) 0;
	box-sizing:     border-box;
}

/* Tablet: sidebar on top, 2-col grid */
@media (min-width: 768px) {
	.ath-pds {
		flex-direction: column;
	}
}

/* Desktop: side-by-side */
@media (min-width: 1024px) {
	.ath-pds {
		flex-direction: row;
		align-items:    flex-start;
		gap:            var(--ath-space-xl);
	}
}

/* ============================================================
   4. SIDEBAR & FORM
   ============================================================ */
.ath-pds__sidebar {
	width: 100%;
	flex-shrink: 0;
}

@media (min-width: 1024px) {
	.ath-pds__sidebar {
		width:      300px;
		position:   sticky;
		top:        100px;
		max-height: calc(100vh - 140px);
		overflow-y: auto;
	}
}

.ath-pds__form {
	background:    var(--ath-surface);
	border:        1px solid var(--ath-border);
	border-radius: var(--ath-radius-md);
	padding:       var(--ath-space-md); /* Match card padding for consistent gaps */
	box-shadow:    var(--ath-shadow-sm);
}

.ath-pds__form-title {
	font-size:     var(--ath-font-size-xl);
	font-weight:   700;
	color:         var(--ath-primary);
	margin:        0 0 var(--ath-space-lg) 0;
	padding-bottom: var(--ath-space-sm);
	border-bottom: 2px solid var(--ath-primary-light);
}

.ath-pds__field {
	margin-bottom: var(--ath-space-md);
}

.ath-pds__label {
	display:       block;
	font-size:     var(--ath-font-size-sm);
	font-weight:   600;
	color:         var(--ath-text);
	margin-bottom: var(--ath-space-xs);
	text-transform: uppercase;
	letter-spacing: .04em;
	cursor:        default;
}

.ath-pds__input-wrap {
	position: relative;
}

.ath-pds__field-icon {
	position:  absolute;
	left:      12px;
	top:       50%;
	transform: translateY(-50%);
	color:     var(--ath-text-muted);
	pointer-events: none;
}

.ath-pds__input,
.ath-pds__select {
	width:         100%;
	box-sizing:    border-box;
	height:        44px;
	padding:       0 var(--ath-space-md);
	border:        1.5px solid var(--ath-border);
	border-radius: var(--ath-radius-sm);
	font-family:   var(--ath-font);
	font-size:     var(--ath-font-size-base);
	color:         var(--ath-text);
	background:    var(--ath-surface);
	transition:    border-color var(--ath-dur-fast) var(--ath-ease),
	               box-shadow   var(--ath-dur-fast) var(--ath-ease);
	-webkit-appearance: none;
	appearance:    none;
}

/* Keyword input has left padding for the icon */
.ath-pds__input {
	padding-left: 38px;
}

.ath-pds__input:focus,
.ath-pds__select:focus {
	outline:      none;
	border-color: var(--ath-border-focus);
	box-shadow:   0 0 0 3px rgba(200,16,46,.15);
}

.ath-pds__input:focus-visible,
.ath-pds__select:focus-visible {
	outline:      2px solid var(--ath-border-focus);
	outline-offset: 2px;
}

/* Custom select arrow */
.ath-pds__select {
	background-image:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b6b6b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
	background-repeat:   no-repeat;
	background-position: right 12px center;
	padding-right:       36px;
}

.ath-pds__form-actions {
	display:   flex;
	flex-direction: column;
	gap:       var(--ath-space-sm);
	margin-top: var(--ath-space-md);
}

/* ============================================================
   5. BUTTONS
   ============================================================ */
.ath-pds__btn {
	display:       inline-flex;
	align-items:   center;
	justify-content: center;
	gap:           var(--ath-space-xs);
	height:        44px;
	padding:       0 var(--ath-space-lg);
	border:        none;
	border-radius: var(--ath-radius-sm);
	font-family:   var(--ath-font);
	font-size:     var(--ath-font-size-base);
	font-weight:   600;
	cursor:        pointer;
	transition:    background-color var(--ath-dur-fast) var(--ath-ease),
	               box-shadow       var(--ath-dur-fast) var(--ath-ease),
	               transform        var(--ath-dur-fast) var(--ath-ease);
	text-decoration: none;
	width:         100%;
}

.ath-pds__btn:focus-visible {
	outline:       2px solid var(--ath-border-focus);
	outline-offset: 2px;
}

.ath-pds__btn--primary {
	background: var(--ath-primary);
	color:      var(--ath-text-inverse);
}

.ath-pds__btn--primary:hover {
	background:  var(--ath-primary-dark);
	box-shadow:  var(--ath-shadow-md);
	transform:   translateY(-1px);
}

.ath-pds__btn--primary:active {
	transform:   translateY(0);
	box-shadow:  none;
}

.ath-pds__btn--ghost {
	background:  transparent;
	color:       var(--ath-text-muted);
	border:      1.5px solid var(--ath-border);
}

.ath-pds__btn--ghost:hover {
	background: var(--ath-primary-light);
	border-color: var(--ath-primary);
	color:       var(--ath-primary);
}

/* ============================================================
   6. RESULTS AREA
   ============================================================ */
.ath-pds__results {
	flex: 1;
	min-width: 0;
}

@media (min-width: 1024px) {
	.ath-pds__results {
		position:   sticky;
		top:        140px;
		max-height: calc(200vh);
		overflow-y: auto;
	}
}

.ath-pds__results-header {
	display:       flex;
	align-items:   center;
	justify-content: space-between;
	gap:           var(--ath-space-md);
	margin-bottom: var(--ath-space-md);
	flex-wrap:     wrap;
}

.ath-pds__count {
	font-size:  var(--ath-font-size-sm);
	color:      var(--ath-text-muted);
	margin:     0;
	font-weight: 500;
}

.ath-pds__sort-wrap {
	display: flex;
	align-items: center;
}

.ath-pds__sort-select {
	height:    38px;
	font-size: var(--ath-font-size-sm);
	padding:   0 32px 0 12px;
	width:     auto;
}

/* ============================================================
   7. ACTIVE FILTER CHIPS
   ============================================================ */
.ath-pds__chips {
	display:   flex;
	flex-wrap: wrap;
	gap:       var(--ath-space-xs);
	margin-bottom: var(--ath-space-md);
}

.ath-pds__chip {
	display:       inline-flex;
	align-items:   center;
	gap:           var(--ath-space-xs);
	height:        36px;
	padding:       0 var(--ath-space-md);
	background:    var(--ath-primary-light);
	color:         var(--ath-primary-dark);
	border:        1px solid rgba(200,16,46,.3);
	border-radius: var(--ath-radius-pill);
	font-size:     var(--ath-font-size-sm);
	font-weight:   600;
	cursor:        pointer;
	transition:    background var(--ath-dur-fast) var(--ath-ease);
}

.ath-pds__chip:hover {
	background: rgba(200,16,46,.15);
}

.ath-pds__chip:focus-visible {
	outline:       2px solid var(--ath-border-focus);
	outline-offset: 2px;
}

.ath-pds__chip--clear {
	background:  #f0f0f0;
	color:       var(--ath-text-muted);
	border-color: var(--ath-border);
}

.ath-pds__chip--clear:hover {
	background: #e0e0e0;
	color:      var(--ath-text);
}

/* ============================================================
   8. PROVIDER GRID
   ============================================================ */
.ath-pds__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap:     var(--ath-space-md);
	margin:  0;
	padding: 0;
	list-style: none;
}

@media (min-width: 640px) {
	.ath-pds__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	.ath-pds__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1280px) {
	.ath-pds__grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* Fade-in on AJAX update */
.ath-fade-in {
	animation: athFadeIn var(--ath-dur-base) var(--ath-ease);
}

@keyframes athFadeIn {
	from { opacity: 0; transform: translateY(8px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* Ensure grid listitem wrappers stretch to full row height */
.ath-pds__grid > li {
	display: flex;
	flex-direction: column;
}

/* ============================================================
   9. PROVIDER CARD
   ============================================================ */
.ath-card {
	display:        flex;
	flex-direction: column;
	background:     var(--ath-surface);
	border:         1px solid var(--ath-border);
	border-radius:  var(--ath-radius-md);
	box-shadow:     var(--ath-shadow-sm);
	overflow:       hidden;
	transition:     box-shadow  var(--ath-dur-card) var(--ath-ease),
	                transform   var(--ath-dur-card) var(--ath-ease),
	                border-color var(--ath-dur-card) var(--ath-ease);
	/* min-height ensures short-content cards don't look tiny.
	   CSS Grid stretch makes all cards in a row equal height. */
	min-height:     300px;
	height:         100%;
}

.ath-card:focus-visible {
	outline:       2px solid var(--ath-border-focus);
	outline-offset: 2px;
}

/* ── Card Header ── */
.ath-card__header {
	display:    flex;
	gap:        var(--ath-space-md);
	padding:    var(--ath-space-md);
	align-items: flex-start;
	border-bottom: 1px solid var(--ath-border);
}

/* Avatar: reserved 64x64 to prevent CLS */
.ath-card__avatar {
	width:         64px;
	height:        64px;
	border-radius: var(--ath-radius-pill);
	flex-shrink:   0;
	overflow:      hidden;
	background:    var(--ath-primary-light);
	display:       flex;
	align-items:   center;
	justify-content: center;
}

.ath-card__avatar-img {
	width:      64px;
	height:     64px;
	object-fit: cover;
	display:    block;
}

.ath-card__avatar-initials {
	font-size:   1.25rem;
	font-weight: 700;
	color:       var(--ath-primary);
	line-height: 1;
}

.ath-card__avatar-generic {
	color: var(--ath-primary);
	opacity: .7;
}

.ath-card__header-info {
	flex: 1;
	min-width: 0;
}

.ath-card__name {
	font-size:   var(--ath-font-size-lg);
	font-weight: 700;
	margin:      0 0 var(--ath-space-xs) 0;
	line-height: 1.3;
}

.ath-card__name-link {
	color:          var(--ath-primary);
	text-decoration: none;
}

.ath-card__name-link:hover {
	text-decoration: underline;
}

.ath-card__credentials {
	display:     inline-block;
	font-size:   var(--ath-font-size-sm);
	color:       var(--ath-text-muted);
	font-weight: 400;
	margin-left: 4px;
}

.ath-card__type {
	font-size:   var(--ath-font-size-sm);
	color:       var(--ath-text-muted);
	margin:      0 0 var(--ath-space-xs) 0;
}

/* ── Card Body ── */
.ath-card__body {
	padding: var(--ath-space-md);
	flex:    1;      /* Grows to fill remaining height */
	min-height: 60px; /* Ensure body always has some presence even if empty */
}

.ath-card__detail {
	display:     flex;
	align-items: flex-start;
	gap:         var(--ath-space-xs);
	font-size:   var(--ath-font-size-sm);
	color:       var(--ath-text-muted);
	margin:      0 0 var(--ath-space-sm) 0;
	line-height: 1.5;
}

.ath-card__detail-icon {
	flex-shrink: 0;
	margin-top:  2px;
	color:       var(--ath-primary);
}

.ath-card__website-link {
	color:          var(--ath-primary);
	text-decoration: none;
	font-weight:    500;
}

.ath-card__website-link:hover {
	text-decoration: underline;
}

/* ── Card Footer: Taxonomy tags ── */
.ath-card__footer {
	padding:     0 var(--ath-space-md) var(--ath-space-sm);
	border-top:  1px solid var(--ath-border);
	padding-top: var(--ath-space-sm);
	/* min-height reserves space so cards without tags don't collapse */
	min-height:  48px;
}

.ath-card__tags {
	display:   flex;
	flex-wrap: wrap;
	gap:       var(--ath-space-xs);
	margin-bottom: var(--ath-space-xs);
}

.ath-card__tag {
	display:       inline-block;
	padding:       2px 10px;
	border-radius: var(--ath-radius-pill);
	font-size:     0.75rem;
	font-weight:   500;
	/* Reserve height to prevent CLS */
	min-height:    22px;
	line-height:   18px;
}

.ath-card__tag--specialty {
	background: #f3e5f5;
	color:      #6a1b9a;
}

.ath-card__tag--zone {
	background: #e3f2fd;
	color:      #1565c0;
}

.ath-card__languages {
	display:     flex;
	align-items: center;
	gap:         var(--ath-space-xs);
	font-size:   var(--ath-font-size-sm);
	color:       var(--ath-text-muted);
	margin:      var(--ath-space-xs) 0 0 0;
}

/* ── Quick Actions ── */
.ath-card__actions {
	display:     flex;
	flex-wrap:   wrap;
	gap:         var(--ath-space-xs);
	padding:     var(--ath-space-sm) var(--ath-space-md) var(--ath-space-md);
	border-top:  1px solid var(--ath-border);
	/* Push actions to the bottom of the card regardless of content length */
	margin-top:  auto;
	align-items: center;
}

.ath-card__action-btn {
	display:       inline-flex;
	align-items:   center;
	gap:           6px;
	height:        44px; /* Accessible touch target size */
	padding:       0 16px;
	border:        1.5px solid var(--ath-border);
	border-radius: var(--ath-radius-sm);
	font-size:     var(--ath-font-size-sm);
	font-weight:   600;
	color:         var(--ath-text-muted);
	background:    transparent;
	text-decoration: none;
	cursor:        pointer;
	transition:    background var(--ath-dur-fast) var(--ath-ease),
	               color      var(--ath-dur-fast) var(--ath-ease),
	               border-color var(--ath-dur-fast) var(--ath-ease);
}

.ath-card__action-btn:hover {
	background:   var(--ath-primary-light);
	color:        var(--ath-primary-dark);
	border-color: var(--ath-primary);
}

.ath-card__action-btn:focus-visible {
	outline:       2px solid var(--ath-border-focus);
	outline-offset: 2px;
}

/* ============================================================
   10. SKELETON LOADERS
   ============================================================ */
@keyframes athShimmer {
	0%   { background-position: -200px 0; }
	100% { background-position: calc(200px + 100%) 0; }
}

.ath-skeleton {
	border-radius:    var(--ath-radius-sm);
	background-color: #e8e8e8;
	background-image: linear-gradient(
		90deg,
		#e8e8e8 0px,
		#f5f5f5 40px,
		#e8e8e8 80px
	);
	background-size:    200px 100%;
	background-repeat:  no-repeat;
	animation:          athShimmer 1.4s infinite linear;
}

.ath-skeleton--avatar {
	width:    64px;
	height:   64px;
	border-radius: 50%;
	flex-shrink: 0;
}

.ath-skeleton--title {
	height:   20px;
	width:    70%;
	margin-bottom: var(--ath-space-xs);
}

.ath-skeleton--subtitle {
	height:  14px;
	width:   45%;
}

.ath-skeleton--line {
	height: 13px;
	width:  85%;
	margin-bottom: var(--ath-space-sm);
}

.ath-skeleton--line-short {
	width: 55%;
}

.ath-skeleton--tag {
	height:        22px;
	width:         64px;
	border-radius: var(--ath-radius-pill);
	display:       inline-block;
}

.ath-skeleton--btn {
	height:        32px;
	width:         72px;
	border-radius: var(--ath-radius-sm);
}

.ath-card--skeleton {
	pointer-events: none;
	cursor:         default;
}

/* ============================================================
   11. EMPTY STATE
   ============================================================ */
.ath-empty-state {
	display:        flex;
	flex-direction: column;
	align-items:    center;
	text-align:     center;
	padding:        var(--ath-space-xl) var(--ath-space-lg);
	background:     var(--ath-surface);
	border:         1px solid var(--ath-border);
	border-radius:  var(--ath-radius-md);
	grid-column:    1 / -1;
}

.ath-empty-state__icon {
	color:         var(--ath-text-muted);
	margin-bottom: var(--ath-space-md);
	opacity:       .5;
}

.ath-empty-state__title {
	font-size:     var(--ath-font-size-xl);
	font-weight:   700;
	color:         var(--ath-text);
	margin:        0 0 var(--ath-space-sm) 0;
}

.ath-empty-state__message {
	color:         var(--ath-text-muted);
	margin:        0 0 var(--ath-space-md) 0;
	max-width:     380px;
}

.ath-empty-state__suggestions {
	text-align:    left;
	color:         var(--ath-text-muted);
	font-size:     var(--ath-font-size-sm);
	margin:        0 0 var(--ath-space-lg) 0;
	padding-left:  var(--ath-space-lg);
}

.ath-empty-state__suggestions li {
	margin-bottom: var(--ath-space-xs);
}

/* ============================================================
   12. ERROR STATE
   ============================================================ */
.ath-error-state {
	display:        flex;
	flex-direction: column;
	align-items:    center;
	text-align:     center;
	padding:        var(--ath-space-xl) var(--ath-space-lg);
	background:     var(--ath-surface);
	border:         1px solid #f5c6cb;
	border-radius:  var(--ath-radius-md);
	background:     #fff8f8;
}

.ath-error-state__icon {
	color:         var(--ath-primary);
	margin-bottom: var(--ath-space-md);
}

.ath-error-state__title {
	font-size:  var(--ath-font-size-xl);
	font-weight: 700;
	color:      var(--ath-primary);
	margin:     0 0 var(--ath-space-sm) 0;
}

.ath-error-state__message {
	color:      var(--ath-text-muted);
	margin:     0 0 var(--ath-space-lg) 0;
	max-width:  380px;
}

/* ============================================================
   13. PAGINATION
   ============================================================ */
.ath-pds__pagination {
	margin-top: var(--ath-space-lg);
}

.ath-pds__pagination-list {
	display:        flex;
	flex-wrap:      wrap;
	gap:            var(--ath-space-xs);
	list-style:     none;
	margin:         0;
	padding:        0;
	justify-content: center;
}

.ath-pds__page-link {
	display:       inline-flex;
	align-items:   center;
	gap:           4px;
	min-width:     44px; /* Accessible touch target size */
	height:        44px; /* Accessible touch target size */
	padding:       0 var(--ath-space-sm);
	border:        1.5px solid var(--ath-border);
	border-radius: var(--ath-radius-sm);
	font-size:     var(--ath-font-size-base);
	font-weight:   600;
	color:         var(--ath-text);
	background:    var(--ath-surface);
	text-decoration: none;
	cursor:        pointer;
	justify-content: center;
	transition:    background var(--ath-dur-fast) var(--ath-ease),
	               border-color var(--ath-dur-fast) var(--ath-ease),
	               color var(--ath-dur-fast) var(--ath-ease);
}

.ath-pds__page-link:hover {
	background:   var(--ath-primary-light);
	border-color: var(--ath-primary);
	color:        var(--ath-primary);
}

.ath-pds__page-link:focus-visible {
	outline:       2px solid var(--ath-border-focus);
	outline-offset: 2px;
}

.ath-pds__page-link--current {
	background:   var(--ath-primary);
	border-color: var(--ath-primary);
	color:        var(--ath-text-inverse);
	cursor:       default;
}

.ath-pds__page-ellipsis {
	display:     flex;
	align-items: center;
	justify-content: center;
	height:      44px;
	min-width:   32px;
	color:       var(--ath-text-muted);
	padding:     0 4px;
}

/* ============================================================
   14. REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
	*,
	::before,
	::after {
		animation-duration:        1ms !important;
		animation-iteration-count: 1  !important;
		transition-duration:       1ms !important;
	}
}