/**
 * AgentUp Help Desk — frontend styles.
 *
 * Mobile-first. All rules scoped under .aghd. Design tokens mirror the
 * agentupv2 theme palette (assets/scss/_variables.scss).
 */

.aghd {
	/* Design tokens — aligned with agentupv2 theme. */
	/* Interactive/link colour = purple, matching the site's article/body links
	   (e.g. blog posts render links in $purple_1). Green is reserved for CTA
	   buttons only. The plugin previously used blue, which isn't a brand colour. */
	--aghd-primary: #8955ff;       /* $purple_1 — site link colour */
	--aghd-primary-dark: #672bf0;  /* $purple_2 — link hover/active */
	--aghd-accent: #8955ff;        /* $purple_1 — secondary / decorative */
	--aghd-green: #00d57c;         /* $green_1 — CTA buttons */
	--aghd-text: #202020;          /* $dark_gray_1 */
	--aghd-text-muted: #707070;    /* $dark_gray_2 */
	--aghd-border: #eceef3;        /* $light_gray_2 */
	--aghd-surface: #ffffff;
	--aghd-surface-alt: #f0f1f8;   /* $light_gray_4 */
	--aghd-radius: 10px;
	--aghd-radius-pill: 25px;      /* theme .btn-rounded */
	--aghd-space-1: 8px;
	--aghd-space-2: 16px;
	--aghd-space-3: 24px;
	--aghd-space-4: 40px;
	--aghd-space-5: 64px;
	--aghd-shadow: 0 2px 12px rgba(32, 32, 32, 0.06);
	--aghd-shadow-hover: 0 6px 24px rgba(32, 32, 32, 0.12);

	color: var(--aghd-text);
	font-family: inherit; /* DM Sans / Work Sans loaded by the theme */
	line-height: 1.6;
}

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

/* ---------- Layout ---------- */

.aghd-container {
	width: 100%;
	max-width: 1140px;
	margin: 0 auto;
	padding: var(--aghd-space-3) var(--aghd-space-2) var(--aghd-space-5);
}

.aghd-container--narrow {
	max-width: 800px;
}

/* Help Center home: keep the hero, search and category grid on one centred,
   readable column so a small number of categories stays balanced under the
   centred search bar instead of hugging the container's left edge. */
.aghd-home {
	max-width: 920px;
	margin: 0 auto;
}

.aghd-section {
	margin-top: var(--aghd-space-3);
}

.aghd-section__title {
	margin: 0 0 var(--aghd-space-2);
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--aghd-text-muted);
	text-align: center;
}

/* ---------- Buttons ---------- */

/* Mirrors the theme's `.btn.btn-semirounded.btn-solid.btn-green` (the
   .footer-menu CTA): DM Sans 16/700, 5px radius, green solid, lift on hover. */
.aghd-btn {
	display: inline-block;
	padding: 15px 30px;
	border: 1px solid transparent;
	border-radius: 5px; /* theme .btn-semirounded */
	font-family: "DM Sans", sans-serif;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: 0;
	text-decoration: none;
	cursor: pointer;
	transition: all 250ms ease;
}

.aghd-btn--primary {
	background-color: var(--aghd-green);
	/* !important mirrors the theme's `.btn-solid { color:#fff !important }` and
	   beats the global `a:link { color:#00d57c }` (else green-on-green text). */
	color: #fff !important;
	box-shadow: 0 5px 15px 0 rgba(0, 213, 124, 0.25);
}

.aghd-btn--primary:hover,
.aghd-btn--primary:focus {
	background-color: var(--aghd-green);
	color: #fff !important;
	transform: translateY(-2px);
	box-shadow: 0 5px 15px 0 rgba(0, 213, 124, 0.25);
}

/* ---------- Hero ---------- */

.aghd-hero {
	padding: var(--aghd-space-4) var(--aghd-space-2);
	text-align: center;
	background: linear-gradient(180deg, var(--aghd-surface-alt) 0%, rgba(240, 241, 248, 0) 100%);
	border-radius: var(--aghd-radius);
}

.aghd-hero__logo img {
	max-height: 48px;
	width: auto;
	margin-bottom: var(--aghd-space-2);
}

.aghd-hero__title {
	margin: 0 0 var(--aghd-space-1);
	font-size: 28px;
	font-weight: 700;
	line-height: 1.25;
}

.aghd-hero__subtitle {
	margin: 0 auto var(--aghd-space-3);
	max-width: 560px;
	color: var(--aghd-text-muted);
	font-size: 16px;
}

/* ---------- Search ---------- */

.aghd-search {
	position: relative;
	max-width: 640px;
	margin: 0 auto;
}

.aghd-search__bar {
	display: flex;
	align-items: center;
	background: var(--aghd-surface);
	border: 1px solid var(--aghd-border);
	border-radius: var(--aghd-radius-pill);
	box-shadow: var(--aghd-shadow);
	padding: 4px 4px 4px 18px;
	transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.aghd-search__bar:focus-within {
	border-color: var(--aghd-primary);
	box-shadow: var(--aghd-shadow-hover);
}

.aghd-search__icon {
	display: inline-flex;
	color: var(--aghd-text-muted);
	margin-right: 10px;
}

.aghd-search__input {
	flex: 1;
	border: 0;
	outline: 0;
	background: transparent;
	padding: 12px 12px 12px 0;
	font-size: 16px;
	color: var(--aghd-text);
}

.aghd-search__input::-webkit-search-cancel-button {
	-webkit-appearance: none;
}

.aghd-search__results {
	position: absolute;
	z-index: 50;
	top: calc(100% + 8px);
	left: 0;
	right: 0;
	padding: 6px;
	background: var(--aghd-surface);
	border: 1px solid var(--aghd-border);
	border-radius: var(--aghd-radius);
	box-shadow: var(--aghd-shadow-hover);
	max-height: 420px;
	overflow-y: auto;
	text-align: left;
}

.aghd-search__result {
	display: block;
	/* !important: see .aghd-category-card — the theme `a:link` reset zeroes this. */
	padding: 12px 14px !important;
	border-radius: 8px;
	text-decoration: none;
	transition: background-color 0.15s ease;
}

/* Hairline divider between rows (not after the last), inset to match the
   rounded row padding. */
.aghd-search__result + .aghd-search__result {
	border-top: 1px solid var(--aghd-border);
}

.aghd-search__result:hover,
.aghd-search__result:focus,
.aghd-search__result.is-active {
	background: var(--aghd-surface-alt);
}

/* Hovered/active rows read as a contiguous card, so hide the divider above the
   active row and the one it would draw on the next sibling. */
.aghd-search__result:hover,
.aghd-search__result:focus,
.aghd-search__result.is-active,
.aghd-search__result:hover + .aghd-search__result,
.aghd-search__result:focus + .aghd-search__result,
.aghd-search__result.is-active + .aghd-search__result {
	border-top-color: transparent;
}

.aghd-search__result-title {
	display: block;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.35;
	color: var(--aghd-text);
}

.aghd-search__result-category {
	display: block;
	margin-bottom: 2px;
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--aghd-primary);
}

.aghd-search__result-excerpt {
	display: block;
	margin-top: 3px;
	font-size: 14px;
	line-height: 1.45;
	color: var(--aghd-text-muted);
	/* Keep rows uniform: one-line excerpt, ellipsis past the edge. */
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.aghd-search__status {
	padding: 16px 14px;
	font-size: 14px;
	color: var(--aghd-text-muted);
}

/* ---------- Category grid ---------- */

/* Fixed-width tracks (not 1fr) + centred justification: cards keep a consistent
   comfortable width and the whole group centres, so one category reads as an
   intentional single card rather than a lonely box pinned to the left. */
.aghd-category-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 300px));
	justify-content: center;
	gap: var(--aghd-space-3);
	margin-top: 0;
}

.aghd-category-card {
	display: flex;
	gap: 18px;
	align-items: center;
	/* !important defeats the theme's global Meyer reset, whose selector list
	   includes `a:link` (specificity 0,1,1) with `padding:0` — that beats this
	   class (0,1,0) and silently zeroes the card padding otherwise. */
	padding: 20px 22px !important;
	background: var(--aghd-surface);
	border: 1px solid var(--aghd-border);
	border-radius: var(--aghd-radius);
	box-shadow: var(--aghd-shadow);
	text-decoration: none;
	transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.aghd-category-card:hover,
.aghd-category-card:focus {
	transform: translateY(-3px);
	box-shadow: var(--aghd-shadow-hover);
	border-color: var(--aghd-primary);
}

.aghd-category-card__icon {
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 12px;
	background: rgba(137, 85, 255, 0.1); /* purple accent tint — decorative */
	color: var(--aghd-accent);
}

/* Let the text column take the free space so the arrow pins to the right. */
.aghd-category-card__body {
	flex: 1 1 auto;
	min-width: 0;
}

.aghd-category-card__title {
	display: block;
	font-size: 17px;
	font-weight: 700;
	color: var(--aghd-text);
	margin-bottom: 2px;
}

.aghd-category-card__description {
	display: block;
	font-size: 14px;
	line-height: 1.45;
	color: var(--aghd-text-muted);
	margin-bottom: 4px;
}

.aghd-category-card__count {
	display: block;
	font-size: 13px;
	font-weight: 600;
	color: var(--aghd-text-muted);
}

.aghd-category-card__arrow {
	flex-shrink: 0;
	font-size: 24px;
	line-height: 1;
	color: var(--aghd-border);
	transition: color 0.2s ease, transform 0.2s ease;
}

.aghd-category-card:hover .aghd-category-card__arrow,
.aghd-category-card:focus .aghd-category-card__arrow {
	color: var(--aghd-primary);
	transform: translateX(3px);
}

/* "Other" (uncategorized) bucket — neutral grey icon so it reads as a catch-all
   rather than a real, branded category. */
.aghd-category-card--other .aghd-category-card__icon {
	background: rgba(32, 32, 32, 0.06);
	color: var(--aghd-text-muted);
}

/* ---------- Article list ---------- */

.aghd-article-list {
	/* Mirrors the AJAX search dropdown (.aghd-search__results): padded container
	   with rounded, hairline-divided rows so both result presentations match. */
	list-style: none;
	margin: var(--aghd-space-3) 0 0;
	padding: 6px;
	border: 1px solid var(--aghd-border);
	border-radius: var(--aghd-radius);
	background: var(--aghd-surface);
}

/* Hairline divider between rows, inset to match the rounded row padding. */
.aghd-article-list__item + .aghd-article-list__item {
	border-top: 1px solid var(--aghd-border);
}

.aghd-article-list__link {
	position: relative;
	display: block;
	/* !important: see .aghd-category-card — the theme `a:link` reset zeroes this. */
	padding: 12px 40px 12px 14px !important;
	border-radius: 8px;
	text-decoration: none;
	transition: background-color 0.15s ease;
}

.aghd-article-list__link:hover,
.aghd-article-list__link:focus {
	background: var(--aghd-surface-alt);
}

/* Hovered row reads as a contiguous card — hide the divider on it and the next
   row (li:hover / focus-within fires from the link inside). */
.aghd-article-list__item:hover,
.aghd-article-list__item:focus-within,
.aghd-article-list__item:hover + .aghd-article-list__item,
.aghd-article-list__item:focus-within + .aghd-article-list__item {
	border-top-color: transparent;
}

.aghd-article-list__title {
	display: block;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.35;
	color: var(--aghd-text);
}

.aghd-article-list__link:hover .aghd-article-list__title {
	color: var(--aghd-primary);
}

.aghd-article-list__excerpt {
	display: block;
	margin-top: 3px;
	font-size: 14px;
	line-height: 1.45;
	color: var(--aghd-text-muted);
}

.aghd-article-list__arrow {
	position: absolute;
	top: 50%;
	right: 14px;
	transform: translateY(-50%);
	font-size: 22px;
	color: var(--aghd-border);
}

.aghd-article-list__link:hover .aghd-article-list__arrow,
.aghd-article-list__link:focus .aghd-article-list__arrow {
	color: var(--aghd-primary);
}

.aghd-empty {
	margin-top: var(--aghd-space-3);
	padding: var(--aghd-space-4) var(--aghd-space-3);
	text-align: center;
	color: var(--aghd-text-muted);
	background: var(--aghd-surface);
	border: 1px solid var(--aghd-border);
	border-radius: var(--aghd-radius);
}

.aghd-empty__title {
	margin: 0 0 var(--aghd-space-1);
	font-size: 18px;
	font-weight: 700;
	color: var(--aghd-text);
}

.aghd-empty__hint {
	margin: 0;
	font-size: 15px;
}

/* ---------- Search results page ---------- */

/* Constrain the whole view to a readable column so the title, search bar and
   result list share one aligned edge (the bare 1140px container left the bar
   floating mid-page above a full-width list). */
.aghd-search-page {
	max-width: 760px;
	margin: 0 auto;
}

.aghd-search-page__header {
	margin-bottom: var(--aghd-space-2);
}

.aghd-search-page__title {
	margin: 0 0 var(--aghd-space-1);
	font-family: "DM Serif Text", serif; /* matches the help article hero */
	font-size: 34px;
	font-weight: 400;
	line-height: 1.2;
}

.aghd-search-page__summary {
	margin: 0;
	font-size: 15px;
	color: var(--aghd-text-muted);
}

/* Full-width bar on this page so it aligns with the result list below it. */
.aghd-search-page .aghd-search {
	max-width: none;
	margin: var(--aghd-space-2) 0 0;
}

.aghd-article-list--search {
	margin-top: var(--aghd-space-3);
}

/* Matched search term highlight. */
.aghd-mark {
	padding: 0 2px;
	border-radius: 3px;
	background: rgba(137, 85, 255, 0.16); /* accent tint */
	color: inherit;
}

/* ---------- Breadcrumbs ---------- */

/* Follows the theme blog hero `.hero-sect .text-left .font-inter` (Inter, f18,
   o-7), while keeping links in the theme link colour. */
.aghd-breadcrumbs {
	margin-bottom: var(--aghd-space-3);
	font-family: "Inter", sans-serif;
	font-size: 18px;
	line-height: 1.66;
}

.aghd-breadcrumbs__list {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	margin: 0;
	padding: 0;
}

.aghd-breadcrumbs__item {
	color: rgba(32, 32, 32, 0.7); /* ~ theme .o-7 on plain text */
}

.aghd-breadcrumbs__item + .aghd-breadcrumbs__item::before {
	content: "›";
	margin: 0 8px;
	color: rgba(32, 32, 32, 0.7);
}

.aghd-breadcrumbs__item a {
	color: var(--aghd-primary); /* purple — site link colour */
	text-decoration: none;
}

.aghd-breadcrumbs__item a:hover {
	color: var(--aghd-primary-dark); /* darker purple on hover */
	text-decoration: underline;
}

/* ---------- Category header ---------- */

.aghd-category__header {
	margin-bottom: var(--aghd-space-3);
}

.aghd-category__title {
	margin: 0 0 var(--aghd-space-1);
	font-size: 26px;
	font-weight: 700;
}

.aghd-category__description {
	margin: 0 0 var(--aghd-space-1);
	color: var(--aghd-text-muted);
}

.aghd-category__count {
	margin: 0;
	font-size: 13px;
	font-weight: 600;
	color: var(--aghd-text-muted);
}

/* Category view: one centred column so the header, full-width search bar and
   article list share a single aligned edge (mirrors .aghd-search-page). */
.aghd-category {
	max-width: 760px;
	margin: 0 auto;
}

.aghd-category .aghd-search {
	max-width: none;
	margin: 0 0 var(--aghd-space-3);
}

/* ---------- Single article ---------- */

.aghd-single .aghd-article__title {
	margin: 0 0 var(--aghd-space-1);
	font-family: "DM Serif Text", serif; /* theme blog title font */
	font-size: 72px; /* matches blog .hero-banner .hero-sect h1 */
	font-weight: 400;
	line-height: 1;
}

.aghd-article__lead {
	margin: 0 0 var(--aghd-space-1);
	font-family: "Inter", sans-serif;
	font-size: 18px;
	color: var(--aghd-text-muted);
}

.aghd-article__meta {
	font-size: 13px;
	color: var(--aghd-text-muted);
	margin-bottom: var(--aghd-space-3);
}

.aghd-article__thumbnail {
	margin: 0 0 var(--aghd-space-3);
}

.aghd-article__thumbnail img {
	width: 100%;
	height: auto;
	border-radius: var(--aghd-radius);
}

/* Body typography mirrors the theme blog single `.body-content`: DM Serif Text
   display headings, Inter sub-headings, DM Sans body, 18px paragraphs. The `p`
   font-size needs !important to beat the theme's global
   `p { font-size:16px !important }`. */
.aghd-prose {
	font-family: "DM Sans", sans-serif;
	font-size: 16px;
	line-height: 1.78;
}

.aghd-prose h1,
.aghd-prose h2,
.aghd-prose h3,
.aghd-prose h4,
.aghd-prose h5,
.aghd-prose h6,
.aghd-prose p,
.aghd-prose ul,
.aghd-prose ol,
.aghd-prose img {
	margin-bottom: 20px;
}

.aghd-prose h1 {
	font-family: "DM Serif Text", serif;
	font-size: 60px;
	line-height: 1.167;
	margin-top: 1.95em;
}

.aghd-prose h2 {
	font-family: "DM Serif Text", serif;
	font-size: 48px;
	line-height: 1.167;
	margin-top: 1em;
}

.aghd-prose h3 {
	font-family: "DM Serif Text", serif;
	font-size: 36px;
	line-height: 1.167;
	margin-top: 1em;
}

.aghd-prose h4 {
	font-family: "Inter", sans-serif;
	font-weight: 700;
	font-size: 28px;
	line-height: 1.167;
	margin-top: 1em;
}

.aghd-prose h5 {
	font-family: "Inter", sans-serif;
	font-weight: 700;
	font-size: 24px;
	line-height: 1.167;
	margin-top: 1em;
}

.aghd-prose h6 {
	font-family: "Inter", sans-serif;
	font-weight: 700;
	font-size: 18px;
	line-height: 1.167;
	margin-top: 1em;
}

.aghd-prose p {
	font-size: 18px !important; /* beats global p { font-size:16px !important } */
	line-height: 1.78;
	margin-bottom: 25px;
}

.aghd-prose img {
	max-width: 100%;
	height: auto;
	border-radius: var(--aghd-radius);
}

.aghd-prose a {
	color: var(--aghd-accent); /* theme $purple_1 link */
}

.aghd-prose pre {
	padding: var(--aghd-space-2);
	background: var(--aghd-surface-alt);
	border-radius: var(--aghd-radius);
	overflow-x: auto;
}

/* ---------- Related articles ---------- */

.aghd-related-articles {
	margin-top: var(--aghd-space-5);
}

.aghd-related-articles__heading {
	margin: 0;
	font-size: 20px;
	font-weight: 700;
}

/* ---------- Contact support ---------- */

.aghd-contact-support {
	margin-top: var(--aghd-space-5);
	padding: var(--aghd-space-4) var(--aghd-space-3);
	text-align: center;
	background: var(--aghd-surface-alt);
	border-radius: var(--aghd-radius);
}

.aghd-contact-support__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	margin-bottom: var(--aghd-space-2);
	border-radius: 50%;
	background: rgba(137, 85, 255, 0.1); /* purple accent tint — decorative */
	color: var(--aghd-accent);
}

.aghd-contact-support__heading {
	margin: 0 0 var(--aghd-space-1);
	font-size: 20px;
	font-weight: 700;
}

.aghd-contact-support__text {
	margin: 0 0 var(--aghd-space-3);
	color: var(--aghd-text-muted);
}

/* ---------- Tablet & up ---------- */

@media (min-width: 600px) {
	.aghd-hero__title {
		font-size: 34px;
	}
}

@media (min-width: 900px) {
	.aghd-hero {
		padding: var(--aghd-space-5) var(--aghd-space-3);
	}

	.aghd-hero__title {
		font-size: 40px;
	}
}