/**
 * DEAL HUB — styles.
 *
 * Written with logical properties throughout (inline-start rather than
 * left) so the same file serves the English board and the Arabic one at
 * /ar/ without a mirrored copy.
 *
 * !important appears only on the handful of properties a WordPress theme
 * reliably reaches into — list bullets, background, colour, text
 * transform. Astra styles every ul on the site, and a themed bullet
 * beside every discount card is the kind of thing that only shows up
 * after deployment.
 *
 * Changelog
 * 0.1.0  2026-09-11  Created.
 * 0.1.1  2026-09-11  Make [hidden] beat the component's own display rules.
 * 0.1.2  2026-09-11  Widen the strapline measure; balance the title.
 * 0.1.3  2026-09-11  Code strip shares the reveal button's slot.
 * 0.1.4  2026-09-11  Drop the strapline measure; it read as a fault, not type.
 */

.dh {
	--dh-hue: 178;
	--dh-ink: #1f2d30;
	--dh-soft: #5f7478;
	--dh-line: #e2e8e9;
	--dh-bg: #ffffff;
	--dh-tint: #f4f8f8;
	--dh-brand: hsl(var(--dh-hue) 42% 34%);
	--dh-brand-tint: hsl(var(--dh-hue) 44% 96%);
	--dh-radius: 14px;

	color: var(--dh-ink);
	font-size: 16px;
	line-height: 1.55;
	container-type: inline-size;
}

.dh *, .dh *::before, .dh *::after { box-sizing: border-box; }

/*
 * `hidden` has to win here.
 *
 * The attribute's own rule is `[hidden] { display: none }`, a single
 * attribute selector, so any class in this file that sets `display`
 * outbids it — .dh__code is display:flex, and the revealed-code panel
 * was therefore visible from the moment the page loaded, with a "Show
 * code" button beneath it that did nothing anyone could see. Same trap
 * waiting for the empty-state paragraph and the list itself.
 */
.dh [hidden] { display: none !important; }

/* ── Head ─────────────────────────────────────────────────────────── */

.dh__head { margin-block-end: 1rem; }

.dh__title {
	margin: 0 0 .25rem;
	font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2rem);
	line-height: 1.2;
	color: var(--dh-ink) !important;
	text-transform: none !important;
	text-wrap: balance;
}

/*
 * No measure at all on the strapline.
 *
 * It carried one, and twice it broke this single sentence into two
 * stubby lines while the search box, the chips and the cards beside it
 * all ran the full width. A reading measure is right in a column of
 * prose; under a heading, on a board this wide, it just looks broken.
 * `pretty` stays, so the last line is never one orphaned word.
 */
.dh__strap {
	margin: 0;
	color: var(--dh-soft);
	text-wrap: pretty;
}

.dh__disclosure {
	margin: 0 0 1.25rem;
	padding: .55rem .8rem;
	border-inline-start: 3px solid var(--dh-brand);
	background: var(--dh-tint) !important;
	color: var(--dh-soft) !important;
	font-size: .85rem;
	border-radius: 0 6px 6px 0;
}

/* ── Controls ─────────────────────────────────────────────────────── */

.dh__controls { display: grid; gap: .75rem; margin-block-end: .75rem; }

.dh__search {
	inline-size: 100%;
	padding: .7rem .9rem;
	border: 1px solid var(--dh-line);
	border-radius: 10px;
	background: var(--dh-bg) !important;
	color: var(--dh-ink) !important;
	font: inherit;
}

.dh__search:focus-visible {
	outline: 2px solid var(--dh-brand);
	outline-offset: 1px;
	border-color: var(--dh-brand);
}

.dh__shelves { display: flex; flex-wrap: wrap; gap: .4rem; }

.dh__chip {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	padding: .4rem .75rem;
	border: 1px solid var(--dh-line);
	border-radius: 999px;
	background: var(--dh-bg) !important;
	color: var(--dh-soft) !important;
	font: inherit;
	font-size: .85rem;
	cursor: pointer;
	text-transform: none !important;
}

.dh__chip:hover { border-color: var(--dh-brand); color: var(--dh-brand) !important; }

.dh__chip.is-on {
	background: var(--dh-brand) !important;
	border-color: var(--dh-brand);
	color: #fff !important;
	font-weight: 600;
}

.dh__chipn { opacity: .7; font-variant-numeric: tabular-nums; }

.dh__shopwrap { display: flex; align-items: center; gap: .5rem; font-size: .85rem; }
.dh__shoplabel { color: var(--dh-soft); }

.dh__shop {
	padding: .4rem .6rem;
	border: 1px solid var(--dh-line);
	border-radius: 8px;
	background: var(--dh-bg) !important;
	color: var(--dh-ink) !important;
	font: inherit;
	font-size: .85rem;
	max-inline-size: 18rem;
}

.dh__count { margin: 0 0 1rem; color: var(--dh-soft); font-size: .85rem; }

.dh__refresh {
	margin: 0 0 1rem;
	padding: .6rem .8rem;
	border-radius: 8px;
	background: hsl(42 90% 95%) !important;
	border: 1px solid hsl(42 60% 82%);
	font-size: .9rem;
}

.dh__link {
	border: 0;
	background: none !important;
	padding: 0;
	font: inherit;
	color: var(--dh-brand) !important;
	text-decoration: underline;
	cursor: pointer;
}

/* ── The list ─────────────────────────────────────────────────────── */

.dh__list {
	display: grid;
	gap: 1rem;
	grid-template-columns: 1fr;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

.dh__list > li::marker { content: none !important; }

@container (min-width: 44rem) {
	.dh__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@container (min-width: 72rem) {
	.dh__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Fallback for browsers with no container queries: the board is usually
   the full width of the content column, so the viewport is a fair proxy. */
@supports not (container-type: inline-size) {
	@media (min-width: 46rem) { .dh__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
	@media (min-width: 74rem) { .dh__list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
}

.dh__card {
	display: flex;
	flex-direction: column;
	gap: .6rem;
	padding: 1.1rem;
	border: 1px solid var(--dh-line);
	border-radius: var(--dh-radius);
	background: var(--dh-bg) !important;
	list-style: none !important;
	transition: border-color .18s ease, box-shadow .18s ease;
}

.dh__card:hover {
	border-color: hsl(var(--dh-hue) 30% 72%);
	box-shadow: 0 6px 20px -12px rgba(15, 40, 45, .4);
}

.dh__card.is-featured { border-color: var(--dh-brand); box-shadow: inset 0 2px 0 0 var(--dh-brand); }

.dh__cardtop { display: flex; align-items: flex-start; gap: .7rem; }

.dh__mark {
	flex: 0 0 auto;
	inline-size: 2.75rem;
	block-size: 2.75rem;
	display: grid;
	place-items: center;
	border-radius: 10px;
	background: var(--dh-brand) !important;
	color: #fff !important;
	font-weight: 700;
	font-size: .95rem;
	letter-spacing: .02em;
}

.dh__names { flex: 1 1 auto; min-inline-size: 0; }

.dh__merchant {
	margin: 0;
	font-size: .72rem;
	letter-spacing: .06em;
	text-transform: uppercase !important;
	color: var(--dh-soft) !important;
}

.dh__cardtitle {
	margin: .1rem 0 0;
	font-size: 1.02rem;
	line-height: 1.3;
	color: var(--dh-ink) !important;
	text-transform: none !important;
}

.dh__value {
	flex: 0 0 auto;
	padding: .2rem .5rem;
	border-radius: 6px;
	background: var(--dh-brand-tint) !important;
	color: var(--dh-brand) !important;
	font-weight: 700;
	font-size: .82rem;
	white-space: nowrap;
}

.dh__summary { margin: 0; color: var(--dh-soft); font-size: .92rem; }

.dh__terms {
	margin: 0;
	padding-inline-start: .65rem;
	border-inline-start: 2px solid var(--dh-line);
	color: var(--dh-soft);
	font-size: .8rem;
}

.dh__meta {
	margin: auto 0 0;
	padding-block-start: .55rem;
	border-block-start: 1px solid var(--dh-line);
	display: flex;
	flex-wrap: wrap;
	gap: .35rem;
	align-items: center;
	font-size: .78rem;
	color: var(--dh-soft) !important;
}

.dh__dot { opacity: .5; }

.is-ending .dh__ends { color: #9a5b00 !important; font-weight: 600; }

/* Nothing on this card claims to be verified. When it has not been
   looked at recently it says so, quietly rather than in a warning
   colour — it is a caveat, not an alarm. */
.is-stale .dh__checked { font-style: italic; }

/* ── Code and call to action ──────────────────────────────────────── */

.dh__act { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }

.dh__reveal,
.dh__copy,
.dh__go {
	font: inherit;
	font-size: .88rem;
	font-weight: 600;
	border-radius: 9px;
	padding: .55rem .9rem;
	cursor: pointer;
	border: 1px solid transparent;
	text-transform: none !important;
	text-decoration: none;
	line-height: 1.2;
}

.dh__reveal {
	flex: 1 1 auto;
	border: 1px dashed hsl(var(--dh-hue) 30% 62%);
	background: var(--dh-brand-tint) !important;
	color: var(--dh-brand) !important;
}

.dh__reveal:hover { border-style: solid; }

/* Same slot the "Show code" button occupied, so revealing a code
   changes what the row says rather than making the card taller. */
.dh__code {
	flex: 1 1 auto;
	min-inline-size: 0;
	display: flex;
	align-items: stretch;
	gap: .4rem;
	padding: .3rem;
	border: 1px dashed hsl(var(--dh-hue) 30% 62%);
	border-radius: 10px;
	background: var(--dh-tint) !important;
}

.dh__codetext {
	flex: 1 1 auto;
	display: grid;
	place-items: center;
	padding: .35rem .5rem;
	font-family: ui-monospace, "JetBrains Mono", Menlo, Consolas, monospace;
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: .06em;
	color: var(--dh-ink) !important;
	background: none !important;
	user-select: all;
	word-break: break-all;
}

.dh__copy { background: var(--dh-brand) !important; color: #fff !important; }
.dh__copy.is-done { background: #0f7b4f !important; }

.dh__nocode {
	flex: 1 1 auto;
	font-size: .85rem;
	color: var(--dh-soft);
}

.dh__go {
	background: var(--dh-ink) !important;
	color: #fff !important;
	border-color: var(--dh-ink);
}

.dh__go:hover { background: var(--dh-brand) !important; border-color: var(--dh-brand); }

.dh__reveal:focus-visible,
.dh__copy:focus-visible,
.dh__go:focus-visible,
.dh__chip:focus-visible,
.dh__link:focus-visible {
	outline: 2px solid var(--dh-brand);
	outline-offset: 2px;
}

/* ── Empty and footer ─────────────────────────────────────────────── */

.dh__none,
.dh__empty-static {
	margin: 1.5rem 0;
	padding: 1.5rem;
	border: 1px dashed var(--dh-line);
	border-radius: var(--dh-radius);
	text-align: center;
	color: var(--dh-soft);
	background: var(--dh-tint) !important;
}

.dh__foot {
	margin: 1.25rem 0 0;
	color: var(--dh-soft);
	font-size: .8rem;
}

/* Provided by WordPress on most themes, but not all, and the board
   leans on it for the link's merchant name. */
.dh .screen-reader-text {
	position: absolute !important;
	inline-size: 1px;
	block-size: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
	.dh__card { transition: none; }
}