/* ==========================================================
   Help Desk — all /help/* pages.
   Loaded via hhd_is_help_subtree() in functions.php.
   ========================================================== */

/* ── Shared inner containers ────────────────────────────── */
.hd-hero-inner,
.hd-section-hero-inner,
.hd-section-articles-inner,
.hd-popular-inner,
.hd-more-inner,
.hd-article-topbar-inner,
.hd-article-layout-inner {
	max-width: 1185px;
	margin-inline: auto;
	padding-inline: 24px;
}

/* ── Hero (main /help/ page) ────────────────────────────── */
.hd-hero {
	background-color: #1b2c56;
	background-image: url('../images/help-hero-bg.webp');
	background-size: cover;
	background-position: center;
	padding-block: 48px 56px;
	overflow: hidden;
}

.hd-hero-inner {
	display: flex;
	align-items: center;
}

.hd-hero-text { flex: 1; min-width: 0; }

.hd-breadcrumb {
	font-size: 0.8rem;
	color: rgba(255,255,255,0.6);
	margin-block-end: 14px;
}
.hd-breadcrumb a { color: rgba(255,255,255,0.7); text-decoration: none; }
.hd-breadcrumb a:hover { color: #fff; }
.hd-breadcrumb span { margin-inline: 4px; }

.hd-hero-heading {
	font-size: clamp(2rem, 4.5vw, 3rem);
	font-weight: 700;
	color: #fff;
	margin: 0 0 12px;
	line-height: 1.1;
}
.hd-hero-hl { color: #ffc72c; }

.hd-hero-sub {
	color: rgba(255,255,255,0.82);
	font-size: 0.97rem;
	margin: 0 0 24px;
	max-width: 460px;
	line-height: 1.55;
}

.hd-search {
	display: flex;
	max-width: 520px;
}
.hd-search-field {
	flex: 1;
	display: flex;
	align-items: center;
	gap: 8px;
	background: #fff;
	border: 1px solid #ccc;
	border-right: none;
	border-radius: 4px 0 0 4px;
	padding-inline: 12px;
}
.hd-search-icon { color: #999; flex-shrink: 0; }
.hd-search-input {
	flex: 1;
	border: none;
	outline: none;
	font-size: 0.88rem;
	padding-block: 13px;
	background: transparent;
	min-width: 0;
	color: #111;
}
.hd .hd-search-submit {
	background: #ffd100;
	color: #00205c;
	border: none;
	padding: 13px 22px;
	font-size: 0.9rem;
	font-weight: 700;
	border-radius: 0 4px 4px 0;
	cursor: pointer;
	white-space: nowrap;
	line-height: 1;
}
.hd .hd-search-submit:hover { background: #e6bc00; }

/* ── Categories ─────────────────────────────────────────── */
.hd-cats {
	padding-block: 44px;
	padding-inline: 24px;
	max-width: 1185px;
	margin-inline: auto;
}

.hd-cats-inner {
	/* Override the shared padding-inline: the grid uses a bg colour for dividers.
	   Gutters are handled by .hd-cats instead. */
	padding-inline: 0;
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 1px;
	background: #e2e5ea;   /* gap colour — creates divider lines */
	border: 1px solid #e2e5ea;
	border-radius: 8px;
	overflow: hidden;
}

.hd-cat {
	background: #fff;
	padding: 28px 18px 22px;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.hd-cat-icon {
	display: block;
	margin-block-end: 14px;
	line-height: 0;
}
.hd-cat-icon img { display: block; }

.hd-cat-title {
	font-size: 0.88rem;
	font-weight: 700;
	text-align: center;
	margin: 0 0 14px;
	color: #1b2c56;
}
.hd-cat-title a { color: inherit; text-decoration: none; }
.hd-cat-title a:hover { color: #c8102e; }

.hd-cat-links {
	list-style: none;
	margin: 0;
	padding: 0;
	width: 100%;
	flex: 1;
	border-top: 1px solid #e9eaec;
	padding-top: 10px;
}
.hd-cat-links li a {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 4px;
	color: #374151;
	text-decoration: none;
	font-size: 0.8rem;
	padding-block: 5px;
	border-bottom: 1px solid #f3f4f6;
	line-height: 1.35;
}
.hd-cat-links li:last-child a { border-bottom: none; }
.hd-cat-links li a:hover { color: #c8102e; }
.hd-cat-links li a span { flex: 1; }

.hd-chev { color: #aaa; flex-shrink: 0; }

.hd-cat-all {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin-top: 12px;
	color: #c8102e;
	font-size: 0.8rem;
	font-weight: 600;
	text-decoration: none;
}
.hd-cat-all:hover { text-decoration: underline; }
.hd-cat-all .hd-chev { color: #c8102e; }

/* ── Popular Topics ─────────────────────────────────────── */
.hd-popular {
	background: #f6f7f9;
	border-block: 1px solid #e2e5ea;
	padding-block: 32px;
}

.hd-popular-heading {
	font-size: 1rem;
	font-weight: 700;
	color: #1b2c56;
	margin: 0 0 16px;
}

.hd-topics {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.hd-topic {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: #fff;
	border: 1px solid #d0d4db;
	border-radius: 4px;
	padding: 9px 15px;
	font-size: 0.85rem;
	font-weight: 500;
	color: #1b2c56;
	text-decoration: none;
	white-space: nowrap;
}
.hd-topic:hover { border-color: #1b2c56; background: #edf0f6; }
.hd-topic svg { color: #6b7280; }

/* ── Need More Help (shared across all help templates) ───── */
.hd-more { padding-block: 44px; }

.hd-more-heading {
	font-size: 1.05rem;
	font-weight: 700;
	color: #1b2c56;
	margin: 0 0 20px;
}

.hd-more-cards {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
}
.hd-more-card {
	display: flex;
	align-items: flex-start;
	gap: 20px;
	background: #edf1f8;
	border-radius: 8px;
	padding: 28px 24px;
}
.hd-more-card-icon { flex-shrink: 0; }
.hd-more-card-body h3 {
	font-size: 0.97rem;
	font-weight: 700;
	color: #1b2c56;
	margin: 0 0 8px;
}
.hd-more-card-body p {
	font-size: 0.85rem;
	color: #4b5563;
	margin: 0 0 16px;
	line-height: 1.55;
}
.hd-more-card-btns {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
}

.hd-btn-primary {
	display: inline-block;
	background: #c8102e;
	color: #fff;
	font-size: 0.85rem;
	font-weight: 600;
	padding: 9px 18px;
	border-radius: 4px;
	text-decoration: none;
}
.hd-btn-primary:hover { background: #a60d25; }

.hd-btn-text {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	color: #1b2c56;
	font-size: 0.85rem;
	font-weight: 500;
	text-decoration: none;
}
.hd-btn-text:hover { color: #c8102e; }
.hd-btn-text .hd-chev { color: inherit; }

/* ── Section hero (e.g. /help/returns-refunds/) ─────────── */
.hd-section-hero {
	background-color: #00205c;
	padding-block: 36px 40px;
}

.hd-return-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: rgba(255,255,255,0.7);
	font-size: 0.82rem;
	text-decoration: none;
	margin-block-end: 14px;
}
.hd-return-link:hover { color: #fff; }
.hd-return-link .hd-chev,
.hd-return-link svg { color: inherit; }

.hd-section-hero .hd-breadcrumb { margin-block-end: 20px; }

.hd-section-hero-content {
	display: flex;
	align-items: center;
	gap: 20px;
}

.hd-section-icon { flex-shrink: 0; }

.hd-section-title {
	font-size: clamp(1.5rem, 3vw, 2.1rem);
	font-weight: 700;
	color: #fff;
	margin: 0 0 6px;
	line-height: 1.15;
}

.hd-section-sub {
	color: rgba(255,255,255,0.78);
	font-size: 0.93rem;
	margin: 0;
	line-height: 1.5;
}

/* ── Section article cards ──────────────────────────────── */
.hd-section-articles {
	padding-block: 36px;
	padding-inline: 24px;
	max-width: 1185px;
	margin-inline: auto;
}

.hd-section-articles-inner {
	/* Override shared padding-inline: grid uses bg colour for dividers */
	padding-inline: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1px;
	background: #e2e5ea;
	border: 1px solid #e2e5ea;
	border-radius: 8px;
	overflow: hidden;
}

.hd-article-card {
	background: #fff;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 22px 24px;
	color: #1b2c56;
	text-decoration: none;
	font-size: 0.92rem;
	font-weight: 500;
	line-height: 1.35;
	transition: background 0.1s;
	min-height: 64px;
}
.hd-article-card:hover {
	background: #f5f7fb;
	color: #c8102e;
}
.hd-article-card .hd-chev { flex-shrink: 0; color: #aaa; }
.hd-article-card:hover .hd-chev { color: #c8102e; }

/* ── Article page layout ────────────────────────────────── */
.hd-article-topbar {
	background: #f6f7f9;
	border-bottom: 1px solid #e2e5ea;
	padding-block: 14px;
}

/* Breadcrumb on light bg — override colours from hero variant */
.hd-article-topbar .hd-breadcrumb {
	color: #6b7280;
	margin: 0;
}
.hd-article-topbar .hd-breadcrumb a { color: #374151; }
.hd-article-topbar .hd-breadcrumb a:hover { color: #c8102e; }
.hd-article-topbar .hd-breadcrumb span:last-child { color: #1b2c56; font-weight: 500; }

.hd-article-layout { padding-block: 44px; }

.hd-article-layout-inner {
	display: grid;
	grid-template-columns: 240px 1fr;
	gap: 48px;
	align-items: start;
}

/* Sidebar */
.hd-sidebar {
	position: sticky;
	top: 104px; /* Blocksy sticky header (80px) + 24px gap */
}

/* When WP admin bar is visible, add 32px */
.admin-bar .hd-sidebar {
	top: 136px;
}

.hd-sidebar-heading {
	font-size: 0.82rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: #6b7280;
	margin: 0 0 10px;
	padding-bottom: 10px;
	border-bottom: 2px solid #e2e5ea;
}
.hd-sidebar-heading a { color: inherit; text-decoration: none; }
.hd-sidebar-heading a:hover { color: #1b2c56; }

.hd-sidebar-nav {
	display: flex;
	flex-direction: column;
}

.hd-sidebar-link {
	display: block;
	padding: 9px 12px;
	font-size: 0.87rem;
	color: #374151;
	text-decoration: none;
	border-radius: 4px;
	line-height: 1.35;
}
.hd-sidebar-link:hover { background: #f0f3f9; color: #1b2c56; }
.hd-sidebar-link--current {
	background: #edf1f8;
	color: #1b2c56;
	font-weight: 600;
}

/* Article content */
.hd-article-title {
	font-size: clamp(1.4rem, 2.5vw, 1.9rem);
	font-weight: 700;
	color: #1b2c56;
	margin: 0 0 24px;
	line-height: 1.2;
}

.hd-article-body {
	font-size: 0.95rem;
	color: #374151;
	line-height: 1.7;
	max-width: 72ch;
}
.hd-article-body h2 { font-size: 1.15rem; font-weight: 700; color: #1b2c56; margin: 28px 0 10px; }
.hd-article-body h3 { font-size: 1rem; font-weight: 700; color: #1b2c56; margin: 20px 0 8px; }
.hd-article-body p  { margin: 0 0 14px; }
.hd-article-body ul,
.hd-article-body ol { padding-left: 1.4em; margin: 0 0 14px; }
.hd-article-body li { margin-block-end: 4px; }
.hd-article-body a  { color: #c8102e; }
.hd-article-body a:hover { text-decoration: underline; }

.hd-article-footer {
	margin-top: 40px;
	padding-top: 24px;
	border-top: 1px solid #e2e5ea;
}

.hd-back-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 0.87rem;
	font-weight: 500;
	color: #1b2c56;
	text-decoration: none;
}
.hd-back-link:hover { color: #c8102e; }

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 1100px) {
	.hd-cats-inner { grid-template-columns: repeat(3, 1fr); }
	.hd-section-articles-inner { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
	.hd-hero-sub { max-width: 100%; }
	.hd-article-layout-inner {
		grid-template-columns: 1fr;
		gap: 0;
	}
	.hd-sidebar {
		position: static;
		border: 1px solid #e2e5ea;
		border-radius: 8px;
		padding: 16px;
		margin-block-end: 32px;
	}
	.hd-sidebar-nav { flex-direction: row; flex-wrap: wrap; gap: 4px; }
	.hd-sidebar-link { padding: 6px 10px; font-size: 0.82rem; }
}

@media (max-width: 720px) {
	.hd-cats-inner { grid-template-columns: repeat(2, 1fr); }
	.hd-more-cards  { grid-template-columns: 1fr; }
	.hd-section-articles-inner { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
	.hd-cats { padding-inline: 16px; }
	.hd-cats-inner { grid-template-columns: 1fr; }
	.hd-search { flex-direction: column; }
	.hd-search-field { border-right: 1px solid #ccc; border-radius: 4px 4px 0 0; }
	.hd-search-submit { border-radius: 0 0 4px 4px; text-align: center; }
	.hd-more-card { flex-direction: column; }
}