/* ==========================================================================
   Travel Hub - Visual Foundation: shared components   (Redesign Phase 1B)

   The button system and small shared primitives. Templates use these classes
   instead of restating a height, radius or padding. Loaded after layout.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Buttons
   One height per size, one radius, one weight, one icon gap. Every size is at
   least 48px tall except --sm, which is for dense desktop UI only.
   -------------------------------------------------------------------------- */
.th-btn {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--th-icon-gap);
	min-block-size: var(--th-control-h);
	padding-block: 0;
	padding-inline: var(--th-control-pad-x);
	border: 1px solid transparent;
	border-radius: var(--th-radius-control);
	font-family: var(--th-font);
	font-size: var(--th-control-fs);
	font-weight: var(--th-control-fw);
	line-height: var(--th-lh-ui);
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color var(--th-dur) var(--th-ease), border-color var(--th-dur) var(--th-ease), color var(--th-dur) var(--th-ease);
}
.th-btn[hidden] { display: none; }
.th-btn:focus-visible { outline: none; box-shadow: var(--th-focus-ring); }
.th-btn[disabled],
.th-btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; pointer-events: none; }

.th-btn--primary { background: var(--th-color-action); color: #fff; }
.th-btn--primary:hover { background: var(--th-color-action-hover); color: #fff; }

.th-btn--secondary { background: var(--th-color-surface); border-color: var(--th-border-color-strong); color: var(--th-color-ink); }
.th-btn--secondary:hover { border-color: var(--th-color-ink); color: var(--th-color-ink); }

.th-btn--ghost { background: transparent; color: var(--th-color-action); padding-inline: var(--th-space-3); }
.th-btn--ghost:hover { background: var(--th-color-action-soft); color: var(--th-color-action-hover); }

.th-btn--on-dark { background: transparent; border-color: rgba(255, 255, 255, 0.45); color: #fff; }
.th-btn--on-dark:hover { border-color: #fff; color: #fff; }

.th-btn--lg { min-block-size: var(--th-control-h-lg); }
.th-btn--sm { min-block-size: var(--th-control-h-sm); padding-inline: var(--th-space-4); font-size: var(--th-fs-small); }
.th-btn--block { display: flex; inline-size: 100%; }

.th-btn-row { display: flex; flex-wrap: wrap; gap: var(--th-control-gap); }

/* Icons inside buttons follow the reading direction. */
.th-btn svg { inline-size: 20px; block-size: 20px; flex: 0 0 auto; }
[dir="rtl"] .th-btn .th-icon--directional { transform: scaleX(-1); }

/* --------------------------------------------------------------------------
   Chip - a short label (category, destination). Not interactive unless it is
   an <a>, in which case it gets a 44px hit area.
   -------------------------------------------------------------------------- */
.th-chip {
	display: inline-flex;
	align-items: center;
	gap: var(--th-space-1);
	min-block-size: 28px;
	padding-inline: var(--th-space-3);
	border-radius: var(--th-radius-pill);
	background: var(--th-color-action-soft);
	color: var(--th-color-action-hover);
	font-size: var(--th-fs-micro);
	font-weight: var(--th-fw-heading);
	line-height: 1;
	white-space: nowrap;
}

/* Screen-reader-only text: the standard WordPress pattern, including the
   visible state a focusable one takes on focus. */
.screen-reader-text {
	position: absolute !important;
	inline-size: 1px;
	block-size: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	border: 0;
	white-space: nowrap;
	word-wrap: normal !important;
}
.screen-reader-text:focus {
	inset-block-start: var(--th-space-2);
	inset-inline-start: var(--th-space-2);
	z-index: 100000;
	display: block;
	inline-size: auto;
	block-size: auto;
	padding: var(--th-space-3) var(--th-space-4);
	clip: auto;
	clip-path: none;
	border-radius: var(--th-radius-sm);
	background: var(--th-color-surface);
	color: var(--th-color-ink);
	font-size: var(--th-fs-small);
	font-weight: var(--th-fw-heading);
	box-shadow: var(--th-shadow-overlay);
}