/* ------------------------------------------------------------------
   Public help center (/hjalp) — hc-* classes.
   Follows the /info pages' design language (custom-info.css): same
   hero gradient, Montserrat headings, white CTA buttons, soft cards.

   Every colour goes through a token below so the whole page can be
   re-themed in one block. The pages render through
   RendererPagePortal, which stamps data-darkmode from the signed-in
   user's own setting — so a logged-in reader gets their preference
   here too, while an anonymous visitor always gets the light theme
   (the setting defaults to "off"). There is deliberately no toggle
   on these pages.
   ------------------------------------------------------------------ */

:root {
	--hc-gradient-hero: linear-gradient(135deg, #0a3d62 0%, #1e6091 50%, #3498db 100%);
	--hc-ink: #0a3d62;
	--hc-ink-hover: #1e6091;
	--hc-bg-alt: #f8f6f4;

	/* Cards and the article sheet */
	--hc-surface: #fff;
	--hc-surface-border: #eee;
	--hc-surface-shadow: 0 4px 20px rgba(0,0,0,0.06);
	--hc-surface-shadow-hover: 0 8px 28px rgba(0,0,0,0.10);
	--hc-rule: #f4f2f0;

	/* Text */
	--hc-text: #333;
	--hc-text-soft: #6c757d;
	--hc-text-faint: #8a97a8;

	/* Search field, which sits on the hero gradient */
	--hc-field: #fff;
	--hc-field-hover: #f5f5f5;
	--hc-field-text: #333;
	--hc-field-divider: #e8e8e8;

	/* Tinted plate behind a category icon, so the glyph is not read as part of the heading */
	--hc-plate: #eaf1f8;
	--hc-plate-ink: #1e6091;
}

html.dark {
	/* The gradient is the brand element and stays, but its light end is pulled
	   back — full #3498db reads as a lit band across an otherwise dark page. */
	--hc-gradient-hero: linear-gradient(135deg, #06263c 0%, #10405f 50%, #1d6a9b 100%);
	--hc-ink: #b7d5ee;
	--hc-ink-hover: #d8e8f6;
	--hc-bg-alt: #232b36;

	--hc-surface: #1f2630;
	--hc-surface-border: #333d4b;
	--hc-surface-shadow: 0 4px 20px rgba(0,0,0,0.45);
	--hc-surface-shadow-hover: 0 8px 28px rgba(0,0,0,0.60);
	--hc-rule: #2b3441;

	--hc-text: #d6dee8;
	--hc-text-soft: #9fb0c4;
	--hc-text-faint: #8494a8;

	--hc-plate: #223243;
	--hc-plate-ink: #8fbde3;

	--hc-field: #171d25;
	--hc-field-hover: #1e2530;
	--hc-field-text: #d6dee8;
	--hc-field-divider: #2f3947;
}

/* Same container recipe as the /info pages (memberapp.php), so the hero meets the
   header at exactly the same distance on every public page.

   Scoped to the body class, and it has to stay that way: this stylesheet is also
   loaded by the portal, which reads articles inside the help panel. Unscoped, this
   was the one rule in the file that reached outside .hc-* — and with !important it
   would rewrite the margins of every portal page. */
body.hc-page .page-container {
	margin: 40px 0 0 !important;
	padding: 0 !important;
}

/* --- Hero with search (mirrors .page-hero) --- */

.hc-hero {
	background: var(--hc-gradient-hero);
	padding: 60px 50px 70px;
	text-align: center;
	color: #fff;
	margin: -20px -20px 0 -20px;
}

.hc-hero-brand {
	display: inline-block;
	background: rgba(255,255,255,0.2);
	color: #fff;
	padding: 8px 20px;
	border-radius: 50px;
	font-size: 14px;
	font-weight: 600;
	margin-bottom: 20px;
	backdrop-filter: blur(10px);
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.hc-hero-brand i {
	margin-right: 8px;
}

.hc-hero-brand:hover {
	color: #fff;
	text-decoration: none;
	background: rgba(255,255,255,0.3);
}

.hc-hero h1 {
	font-family: 'Montserrat', sans-serif;
	font-size: 36px;
	font-weight: 700;
	margin: 0 0 26px;
	color: #fff;
	line-height: 1.2;
}

.hc-search-form {
	position: relative;
	max-width: 560px;
	margin: 0 auto;
	display: flex;
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 10px 30px rgba(0,0,0,0.18);
}

.hc-search-form .fa-search {
	position: absolute;
	left: 18px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--hc-text-faint);
	pointer-events: none;
}

/* Hard resets: the portal's generic input/button styles (radius, margins, borders,
   shadows) otherwise leak in and detach the button from the field. */
.hc-search-form input {
	flex: 1;
	padding: 15px 16px 15px 44px;
	border: none !important;
	border-radius: 0 !important;
	margin: 0 !important;
	box-shadow: none !important;
	font-size: 16px;
	outline: none;
	color: var(--hc-field-text);
	background: var(--hc-field);
	height: auto;
}

.hc-search-form button {
	padding: 15px 30px;
	border: none !important;
	border-left: 1px solid var(--hc-field-divider) !important;
	border-radius: 0 !important;
	margin: 0 !important;
	box-shadow: none !important;
	background: var(--hc-field);
	color: var(--hc-ink);
	font-size: 16px;
	font-weight: 700;
	cursor: pointer;
	transition: background 0.2s ease;
	height: auto;
}

.hc-search-form button:hover {
	background: var(--hc-field-hover);
}

/* --- Content container --- */

.hc-content {
	max-width: 1000px;
	margin: 0 auto;
	padding: 40px 24px 72px;
}

.hc-breadcrumbs {
	font-size: 14px;
	color: var(--hc-text-soft);
	margin-bottom: 24px;
}

.hc-breadcrumbs .fa {
	margin: 0 6px;
	font-size: 12px;
}

.hc-section-title {
	font-family: 'Montserrat', sans-serif;
	font-size: 26px;
	font-weight: 700;
	color: var(--hc-ink);
	margin: 0 0 20px;
}

/* --- Category cards (start page) — mirrors .gm-mode-card --- */

/*
 * Spotlight — one random article above the grid. Two columns on a wide screen, stacked below;
 * the image column collapses entirely when the drawn article has no picture wide enough.
 */
.hc-spotlight {
	display: grid;
	grid-template-columns: 1fr minmax(0, 44%);
	gap: 32px;
	align-items: center;
	background: var(--hc-surface);
	border: 1px solid var(--hc-surface-border);
	border-radius: 16px;
	box-shadow: var(--hc-surface-shadow);
	padding: 32px;
	margin: 0 0 32px;
	color: inherit;
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.hc-spotlight:hover {
	text-decoration: none;
	box-shadow: var(--hc-surface-shadow-hover);
	transform: translateY(-2px);
}

.hc-spotlight-textonly {
	grid-template-columns: 1fr;
}

.hc-spotlight-label {
	font-family: 'Montserrat', sans-serif;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--hc-text-faint);
	margin-bottom: 10px;
}

.hc-spotlight-text h2 {
	font-family: 'Montserrat', sans-serif;
	font-size: 24px;
	font-weight: 700;
	line-height: 1.25;
	text-wrap: balance;
	margin: 0 0 10px;
	color: var(--hc-ink);
}

.hc-spotlight:hover .hc-spotlight-text h2 {
	color: var(--hc-ink-hover);
}

.hc-spotlight-text p {
	font-size: 15px;
	line-height: 1.6;
	color: var(--hc-text-soft);
	margin: 0 0 14px;
}

.hc-spotlight-more {
	font-weight: 600;
	font-size: 15px;
	color: var(--hc-ink-hover);
}

/* The teaser is a screenshot, so it is shown whole rather than cropped to a fixed ratio. */
.hc-spotlight-image img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 10px;
	border: 1px solid var(--hc-surface-border);
}

@media (max-width: 700px) {
	.hc-spotlight {
		grid-template-columns: 1fr;
		gap: 20px;
		padding: 24px;
	}

	/* Text first on a narrow screen: the headline is what decides whether to tap. */
	.hc-spotlight-image {
		order: 2;
	}
}

.hc-categories {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
	gap: 24px;
}

.hc-category-card {
	background: var(--hc-surface);
	border: 1px solid var(--hc-surface-border);
	border-radius: 16px;
	padding: 28px;
	box-shadow: var(--hc-surface-shadow);
	display: flex;
	flex-direction: column;
}

.hc-category-card h2 {
	font-family: 'Montserrat', sans-serif;
	font-size: 18px;
	font-weight: 700;
	margin: 0 0 14px;
	color: var(--hc-ink);
}

/*
 * The icon sits on a tinted plate rather than loose next to the text. Bare and muted it ran
 * together with the heading — same baseline, same weight, no edge between them — so the plate is
 * what separates the label from the words, and the square keeps every card's heading on one line
 * regardless of how wide the glyph is.
 */
/* Both: the icon is inside the link on a real category, and a direct child on the "Övrigt" card. */
.hc-category-card h2,
.hc-category-card h2 a {
	display: flex;
	align-items: center;
	gap: 12px;
}

.hc-category-icon {
	flex: 0 0 auto;
	width: 38px;
	height: 38px;
	border-radius: 10px;
	background: var(--hc-plate);
	color: var(--hc-plate-ink);
	font-size: 17px;

	/* Centring the glyph itself, which is not reliably centred inside its own em box. */
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.hc-category-card h2 a {
	color: inherit;
}

.hc-category-card h2 a:hover {
	text-decoration: none;
	color: var(--hc-ink-hover);
}

.hc-category-description {
	font-size: 14px;
	color: var(--hc-text-soft);
	margin: 0 0 12px;
}

.hc-category-card ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.hc-category-card li {
	padding: 7px 0;
	font-size: 15px;
	line-height: 1.4;
	border-bottom: 1px solid var(--hc-rule);
}

.hc-category-card li:last-child {
	border-bottom: none;
}

.hc-category-more {
	margin-top: auto;
}

.hc-category-more a {
	font-weight: 600;
}

/* --- Article list (category page) & search results --- */

.hc-article-list,
.hc-search-results {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.hc-article-list-item,
.hc-search-result {
	display: block;
	background: var(--hc-surface);
	border: 1px solid var(--hc-surface-border);
	border-radius: 16px;
	padding: 20px 26px;
	color: inherit;
	box-shadow: var(--hc-surface-shadow);
	transition: box-shadow 0.2s ease;
}

.hc-article-list-item:hover,
.hc-search-result:hover {
	box-shadow: var(--hc-surface-shadow-hover);
	text-decoration: none;
	color: inherit;
}

.hc-article-list-title,
.hc-search-result-title {
	font-family: 'Montserrat', sans-serif;
	font-size: 16px;
	font-weight: 700;
	color: var(--hc-ink);
	margin-bottom: 4px;
}

.hc-article-list-snippet,
.hc-search-result-snippet {
	font-size: 14px;
	color: var(--hc-text-soft);
	line-height: 1.5;
}

.hc-empty {
	text-align: center;
	padding: 48px 0;
}

/* --- Article view --- */

.hc-article {
	background: var(--hc-surface);
	border: 1px solid var(--hc-surface-border);
	border-radius: 16px;
	padding: 44px 52px;
	box-shadow: var(--hc-surface-shadow);
}

.hc-article h1 {
	font-family: 'Montserrat', sans-serif;
	font-size: 28px;
	font-weight: 700;
	color: var(--hc-ink);
	margin: 0 0 6px;
}

.hc-article-meta {
	font-size: 13px;
	color: var(--hc-text-faint);
	margin-bottom: 28px;
}

.hc-article-body {
	font-size: 16px;
	line-height: 1.7;
	color: var(--hc-text);
}

.hc-article-body h1,
.hc-article-body h2 {
	font-family: 'Montserrat', sans-serif;
	font-size: 21px;
	font-weight: 600;
	color: var(--hc-ink);
	margin: 36px 0 12px;
}

.hc-article-body h3 {
	font-size: 17px;
	font-weight: 600;
	color: var(--hc-ink);
	margin: 26px 0 10px;
}

.hc-article-body p {
	margin: 0 0 14px;
}

.hc-article-body ul,
.hc-article-body ol {
	margin: 0 0 16px;
	padding-left: 24px;
}

.hc-article-body li {
	/* Match the paragraph line-height — the portal base styles tighten li otherwise */
	line-height: 1.7;
	margin-bottom: 10px;
}

.hc-article-body li:last-child {
	margin-bottom: 0;
}

.hc-article-body strong {
	font-weight: 600;
	color: var(--hc-ink);
}

.hc-article-body img {
	max-width: 100%;
	height: auto;
	border: 1px solid var(--hc-surface-border);
	border-radius: 8px;
	margin: 10px 0;
	box-shadow: 0 2px 12px rgba(0,0,0,0.05);
}

/* ----- Phone mockup ----------------------------------------------------------
   For a screenshot from the member app, marked "format: mobil" on its card. A
   phone screenshot is around 1200x2600, so laid out at the article's width a
   single app screen ends up taller than the window and the reader scrolls past
   one picture. The frame cuts it to a readable size and says what it is a
   picture of at the same time.

   Same recipe as .phone-mockup in custom-info.css, deliberately: the two are the
   same object seen by the same customer, on the marketing pages and in the help
   centre. Not shared as one class because that stylesheet carries the whole
   /info design and reaches outside .hc-*. ------------------------------------ */

.hc-phone {
	width: 270px;
	max-width: 100%;
	margin: 22px auto;
	padding: 5px;
	background: #2c2c2c;
	border-radius: 25px;
	box-shadow: 0 25px 60px rgba(0,0,0,0.3);
}

.hc-phone-screen {
	border-radius: 20px;
	overflow: hidden;
	background: #000;
	/* The anchor around the image is inline, so without this its line box leaves a
	   pale strip along the bottom of the frame. */
	line-height: 0;
}

/* The frame provides the rounding, the edge and the shadow, so the picture inside must give up
   its own — three nested radii otherwise read as a photograph of a phone in a frame. */
.hc-phone-screen img {
	display: block;
	width: 100%;
	margin: 0;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

/* Inside a figure the caption belongs under the phone rather than under the screen, and the
   figure's own margin replaces the mockup's. */
.hc-figure .hc-phone {
	margin-top: 0;
	margin-bottom: 0;
}

/* A picture that shows a worked example needs the example explained, and that explanation
   belongs under the picture rather than in the running text — the reader is looking at the
   numbers, not reading the paragraph above. */
.hc-figure {
	margin: 22px 0;
}

.hc-figure img {
	margin-bottom: 0;
}

.hc-figure figcaption {
	margin-top: 8px;
	padding-left: 12px;
	border-left: 2px solid var(--hc-surface-border);
	font-size: 14px;
	line-height: 1.55;
	color: var(--hc-text-soft);
}

/* Under a phone the caption is held to the phone's width, so it reads as belonging to the picture
   rather than running out from under it across the whole column. Where :has() does not apply the
   caption simply stays full width, which is untidy rather than broken. */
.hc-figure:has(.hc-phone) figcaption {
	max-width: 270px;
	margin-left: auto;
	margin-right: auto;
}

.hc-article-body em {
	color: var(--hc-text-soft);
}

/* Articles use a blockquote for the one thing a reader must not miss — the trap,
   the irreversible step. Without a rule of its own the portal base styles render
   it as an ordinary indented paragraph, which is exactly not the point. */
.hc-article-body blockquote {
	margin: 20px 0;
	padding: 14px 18px;
	border: none;
	border-left: 4px solid var(--hc-ink);
	border-radius: 0 8px 8px 0;
	background: var(--hc-bg-alt);
	font-size: 15px;
}

.hc-article-body blockquote p:last-child {
	margin-bottom: 0;
}

.hc-article-body table {
	border-collapse: collapse;
	margin: 16px 0;
	width: 100%;
}

.hc-article-body th,
.hc-article-body td {
	border: 1px solid var(--hc-surface-border);
	padding: 8px 12px;
	text-align: left;
}

.hc-article-body th {
	background: var(--hc-bg-alt);
}

.hc-article-body code {
	background: var(--hc-bg-alt);
	padding: 2px 6px;
	border-radius: 4px;
	font-size: 90%;
}

/* An indented block in the markdown becomes <pre><code>. Without a rule of its own the portal's
   base styles paint it light in both themes, which puts light text on a white bar in dark mode. */
.hc-article-body pre {
	background: var(--hc-bg-alt);
	color: var(--hc-text);
	border: 1px solid var(--hc-surface-border);
	border-radius: 8px;
	padding: 12px 16px;
	margin: 16px 0;
	font-size: 90%;
	line-height: 1.5;
	overflow-x: auto;
}

.hc-article-body pre code {
	background: none;
	padding: 0;
	border-radius: 0;
	font-size: inherit;
}

/* --- Category table of contents ---
   Where the finished article sits among its siblings.

   A card, on the same recipe as the article sheet and the contact card. The page's own ground is not
   a surface anything sits directly on here: "Var den här artikeln till hjälp?" gets away with it
   because it is one line that hangs off the sheet above, but a list of nine titles floating on the
   ground reads as content that lost its container. The earlier attempt used --hc-bg-alt, which is
   essentially the ground colour, so the block became an empty outline — the worst of both. */
.hc-toc {
	margin: 0;
	padding: 24px 30px 26px;
	background: var(--hc-surface);
	border: 1px solid var(--hc-surface-border);
	border-radius: 16px;
	box-shadow: var(--hc-surface-shadow);
}

/* Same heading as the card below it ("Hittade du inte svaret?"). Two cards in a row, both offering
   the reader a way onwards, so they are introduced the same way — a small uppercase label read as
   metadata about the list rather than as a heading over it. */
.hc-toc-title {
	font-family: 'Montserrat', sans-serif;
	font-size: 20px;
	font-weight: 700;
	margin: 0 0 6px;
	color: var(--hc-ink);
}

.hc-toc-intro {
	font-size: 15px;
	line-height: 1.6;
	margin: 0 0 16px;
	max-width: 620px;
	color: var(--hc-text-soft);
}

/* The flat shape, for a category that is a shelf rather than a route. An <ol> because the file order
   still decides, but the markers stay off — a number in front of "Videomöten" would claim it is step
   four of something. Columns rather than a grid, so the order reads downwards: a list broken across a
   row ("1 2 / 3 4") has to be reassembled by the reader. The column width decides how many columns
   there is room for, so a narrow screen gets one without a media query of its own. */
.hc-toc-list {
	list-style: none;
	margin: 0;
	padding: 0;
	columns: 260px 2;
	column-gap: 36px;
}

.hc-toc-item {
	break-inside: avoid;
	font-size: 15px;
	line-height: 1.4;
}

/* The chevron sits right after the title, not out at the column edge: pushed apart, every row became
   a gap with an arrow pointing at nothing, and nine of those read as a broken table. */
.hc-toc-item a,
.hc-toc-item > span {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 0;
	color: var(--hc-text);
}

.hc-toc-item a .fa {
	color: var(--hc-text-faint);
	font-size: 13px;
	transition: transform 0.15s ease;
}

.hc-toc-item a:hover {
	color: var(--hc-ink-hover);
	text-decoration: none;
}

.hc-toc-item a:hover .fa {
	color: var(--hc-ink-hover);
	transform: translateX(3px);
}

.hc-toc-item.hc-toc-current > span {
	font-weight: 700;
	color: var(--hc-ink);
}

/* --- The sequence shape: a numbered path ---
   Only rendered for a category whose articles declare a step (see HelpRenderCollectionToc). The
   number is the whole point of this variant, so it is a filled badge rather than a list marker. */

.hc-toc-steps {
	list-style: none;
	margin: 0;
	padding: 0;
}

.hc-toc-step {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 5px 0;
	font-size: 15px;
	line-height: 1.45;
}

.hc-toc-step-number {
	flex: 0 0 22px;
	height: 22px;
	margin-top: 1px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 11.5px;
	font-weight: 700;
	background: var(--hc-plate);
	color: var(--hc-plate-ink);
}

.hc-toc-step a.hc-toc-step-text {
	color: var(--hc-text);
}

.hc-toc-step a.hc-toc-step-text:hover {
	color: var(--hc-ink-hover);
}

/* The step being read: the badge inverts, and the position is spelled out. "Steg 4 av 5" is the
   answer to the question the flat list could not give — where in this am I, and how much is left. */
.hc-toc-step.hc-toc-current .hc-toc-step-number {
	background: var(--hc-ink);
	color: var(--hc-surface);
}

.hc-toc-step.hc-toc-current .hc-toc-step-text {
	font-weight: 700;
	color: var(--hc-ink);
}

.hc-toc-step-here {
	display: block;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--hc-text-faint);
}

/* The articles in the category that are not steps. A wrapped line rather than a second list: they
   are a shelf, and giving them their own column layout would make them look like a second path. */
.hc-toc-seealso {
	margin-top: 14px;
	padding-top: 13px;
	border-top: 1px solid var(--hc-rule);
	font-size: 14.5px;
	line-height: 1.9;
	color: var(--hc-text);
}

.hc-toc-seealso-label {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--hc-text-faint);
	margin-right: 10px;
}

.hc-toc-seealso a {
	color: var(--hc-text);
}

.hc-toc-seealso a:hover {
	color: var(--hc-ink-hover);
}

.hc-toc-seealso-sep {
	color: var(--hc-text-faint);
	margin: 0 8px;
}

.hc-toc-here {
	font-weight: 700;
	color: var(--hc-ink);
}

.hc-toc-more {
	display: inline-block;
	margin-top: 16px;
	font-size: 14px;
	font-weight: 600;
}

/* --- Ask-a-question footer ---
   The reader the article did not answer. The form is a RendererFields, which brings its own
   field styling and only needs a ground to sit on. */

/*
 * "Was this helpful?" — deliberately lighter than the contact card below it. A one-click question
 * that looks like a form gets treated like one and skipped.
 */
.hc-feedback {
	display: flex;
	flex-flow: row wrap;
	align-items: center;
	justify-content: center;
	gap: 18px;
	margin: 0;

	/* No plate. Between the article sheet and the contact card it read as a third, weaker card;
	   the question is an aside, not a section, so it gets space and a hairline instead of an edge. */
	padding: 26px 8px 30px;
	color: var(--hc-text-soft);
}

.hc-feedback-question {
	font-family: 'Montserrat', sans-serif;
	font-size: 16px;
	font-weight: 600;
	color: var(--hc-ink);
}

.hc-feedback-actions {
	display: flex;
	align-items: center;
	gap: 10px;
}

/* With the plate gone the buttons carry the block, so they are pills with a real outline. */
.hc-feedback button {
	font-family: inherit;
	font-size: 15px;
	font-weight: 600;
	padding: 9px 22px;
	border-radius: 999px;
	border: 1.5px solid var(--hc-plate-ink);
	background: transparent;
	color: var(--hc-plate-ink);
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease;
}

.hc-feedback button:hover {
	background: var(--hc-plate-ink);
	color: var(--hc-surface);
}

.hc-feedback button i {
	margin-right: 6px;
}

/*
 * The follow-up question does get a plate: here the reader is being asked to write, and a text area
 * floating on the page background has no field to sit in.
 */
.hc-feedback-explain {
	flex-direction: column;
	align-items: stretch;
	gap: 12px;
	max-width: 620px;
	margin: 0 auto;
	padding: 22px 24px 24px;
	background: var(--hc-surface);
	border: 1px solid var(--hc-surface-border);
	border-radius: 14px;
	box-shadow: var(--hc-surface-shadow);
}

.hc-feedback-explain .hc-feedback-actions {
	justify-content: flex-start;
}

.hc-feedback-note {
	font-size: 14px;
	line-height: 1.5;
	color: var(--hc-text-soft);
	margin: -4px 0 2px;
}

.hc-feedback-explain textarea {
	width: 100%;
	font-family: inherit;
	font-size: 15px;
	line-height: 1.5;
	padding: 12px 14px;
	border-radius: 10px;
	border: 1px solid var(--hc-field-divider);
	background: var(--hc-field);
	color: var(--hc-field-text);
	resize: vertical;
}

.hc-feedback-explain textarea:focus {
	outline: 2px solid var(--hc-ink-hover);
	outline-offset: 1px;
}

/* The one filled control in the block, because it is the one that completes the action. */
.hc-feedback .hc-feedback-send {
	background: var(--hc-ink);
	border-color: var(--hc-ink);
	color: var(--hc-surface);
}

.hc-feedback .hc-feedback-send:hover {
	background: var(--hc-ink-hover);
	border-color: var(--hc-ink-hover);
}

/* Skipping is a way out, not an option of equal weight — so no outline. */
.hc-feedback .hc-feedback-skip {
	font-size: 14px;
	font-weight: 400;
	padding: 9px 8px;
	border-color: transparent;
	color: var(--hc-text-faint);
}

.hc-feedback .hc-feedback-skip:hover {
	background: transparent;
	color: var(--hc-text-soft);
}

.hc-feedback-done {
	font-weight: 600;
	color: var(--hc-ink);
}

.hc-feedback-done i {
	margin-right: 8px;
	color: var(--hc-plate-ink);
}

.hc-article-footer {
	margin-top: 28px;
	padding: 30px 34px 12px;
	background: var(--hc-surface);
	border: 1px solid var(--hc-surface-border);
	border-radius: 16px;
	box-shadow: var(--hc-surface-shadow);
	color: var(--hc-text-soft);
}

.hc-article-footer h2 {
	font-family: 'Montserrat', sans-serif;
	font-size: 20px;
	font-weight: 700;
	margin: 0 0 8px;
	color: var(--hc-ink);
}

.hc-article-footer > p {
	font-size: 15px;
	line-height: 1.6;
	margin: 0;
	max-width: 620px;
}

/* The form carries the section header, so the card's own heading is enough introduction */
.hc-article-footer .rf-container {
	padding-left: 0;
	padding-right: 0;
}

.hc-sent {
	text-align: center;
	padding: 10px 0 20px;
}

.hc-sent .fa {
	font-size: 34px;
	color: var(--hc-ink);
	margin-bottom: 10px;
}

.hc-sent h2 {
	margin-bottom: 6px;
}

/* --- Closing pitch ---
   Full-bleed under the content, on the same ground as the hero. That ground is dark in both
   themes, so its text stays literal white. */

.hc-cta {
	background: var(--hc-gradient-hero);
	padding: 56px 24px;
	color: #fff;
}

.hc-cta-inner {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 40px;
	max-width: 900px;
	margin: 0 auto;
}

.hc-cta-illustration {
	width: 200px;
	height: auto;
	flex-shrink: 0;
}

.hc-cta-text h2 {
	font-family: 'Montserrat', sans-serif;
	font-size: 26px;
	font-weight: 700;
	margin: 0 0 14px;
	color: #fff;
}

.hc-cta-text p {
	font-size: 16px;
	line-height: 1.6;
	margin: 0 0 24px;
	opacity: 0.9;
}

.hc-cta-buttons {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
}

.hc-cta-primary {
	background: #fff;
	color: #0a3d62;
	padding: 14px 30px;
	border-radius: 8px;
	font-weight: 700;
	font-size: 16px;
	transition: all 0.3s ease;
}

.hc-cta-primary:hover {
	background: #f1f4f7;
	color: #0a3d62;
	text-decoration: none;
	transform: scale(1.02);
}

.hc-cta-secondary {
	color: #fff;
	opacity: 0.88;
	font-size: 15px;
	transition: opacity 0.2s;
}

.hc-cta-secondary:hover {
	color: #fff;
	opacity: 1;
	text-decoration: underline;
}

.hc-cta-primary .fa,
.hc-cta-secondary .fa {
	margin-right: 8px;
}

/* --- Responsive --- */

@media (max-width: 720px) {
	.hc-hero {
		padding: 40px 24px 50px;
	}

	.hc-hero h1 {
		font-size: 26px;
	}

	.hc-article {
		padding: 26px 22px;
	}

	.hc-article-footer {
		padding: 26px 22px 10px;
	}

	.hc-cta-inner {
		flex-direction: column;
		text-align: center;
	}

	.hc-cta-illustration {
		width: 150px;
	}

	.hc-cta-buttons {
		justify-content: center;
	}
}

/* ----- Screenshot order card -------------------------------------------------
   Shown in place of a picture the article is still waiting for. Only staff ever
   see these; HelpArticle::GetBodyForViewer() strips them for everyone else. The
   filename sits in a field of its own and selects in a single click, because it
   has to be copied exactly onto the delivered file. ------------------------- */

.hc-shot {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 8px;
	margin: 22px 0;
	padding: 22px 20px;
	border: 2px dashed var(--hc-shot-border, #cfd8e3);
	border-radius: 10px;
	background: var(--hc-shot-background, #f6f8fb);
	color: var(--hc-shot-text, #5b6b7f);
	line-height: 1.4;
}

.hc-shot-label {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 3px 10px;
	border-radius: 20px;
	background: var(--hc-shot-label-background, #5b6b7f);
	color: #fff;
}

.hc-shot-icon {
	font-size: 26px;
	opacity: 0.5;
}

.hc-shot-desc {
	font-size: 15px;
	font-weight: 600;
	max-width: 46em;
}

.hc-shot-note {
	font-size: 13px;
	font-style: italic;
	max-width: 46em;
}

/* The caption is the one line on the card written for the reader rather than for the
   photographer, so it is shown while the order is pending — it has to be proofread too. */
.hc-shot-caption {
	font-size: 13px;
	max-width: 46em;
	padding-top: 8px;
	border-top: 1px solid var(--hc-shot-border, #cfd8e3);
}

.hc-shot-file {
	/* One click selects the whole filename — double-click stops at the hyphens. */
	user-select: all;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 13px;
	padding: 4px 10px;
	border-radius: 5px;
	background: var(--hc-shot-file-background, #fff);
	border: 1px solid var(--hc-shot-border, #cfd8e3);
	color: var(--hc-shot-file-text, #2c3a4b);
}

html.dark .hc-shot {
	--hc-shot-border: #3a4657;
	--hc-shot-background: #232b36;
	--hc-shot-text: #9fb0c4;
	--hc-shot-label-background: #4a5a70;
	--hc-shot-file-background: #1b2129;
	--hc-shot-file-text: #d6e0ec;
}

/* ----- Action button ---------------------------------------------------------
   The section's one deep link into the portal. Solid where the cross-reference
   card is outlined, because this is "go do it" and that one is "read that
   first" — they must not read as the same offer. ---------------------------- */

.hc-action {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 2px 0 18px;
	padding: 11px 18px;
	border-radius: 8px;
	background: var(--hc-action-background, #1e6091);
	color: var(--hc-action-text, #fff);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
	text-decoration: none;
	box-shadow: 0 2px 8px rgba(10,61,98,0.18);
	transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.hc-action:hover,
.hc-action:focus {
	background: var(--hc-action-background-hover, #0a3d62);
	color: var(--hc-action-text, #fff);
	text-decoration: none;
	transform: translateY(-1px);
	box-shadow: 0 4px 14px rgba(10,61,98,0.24);
}

.hc-action-icon {
	font-size: 15px;
	opacity: 0.85;
}

.hc-action-arrow {
	font-size: 17px;
	opacity: 0.7;
}

html.dark .hc-action {
	--hc-action-background: #2f6fa0;
	--hc-action-background-hover: #3d86bd;
	--hc-action-text: #fff;
	box-shadow: none;
}

/* ----- Cross-reference card --------------------------------------------------
   For the case where another article is the one the reader actually needs. An
   inline link is easy to read past; this is not. --------------------------- */

.hc-xref {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 20px 0;
	padding: 14px 16px;
	border: 1px solid var(--hc-xref-border, #dbe3ec);
	border-left: 4px solid var(--hc-xref-accent, #4a7fb5);
	border-radius: 8px;
	background: var(--hc-xref-background, #f7fafd);
	text-decoration: none;
	color: inherit;
}

.hc-xref:hover {
	background: var(--hc-xref-background-hover, #eef4fa);
	border-left-color: var(--hc-xref-accent-hover, #35618f);
}

.hc-xref-icon {
	flex-shrink: 0;
	font-size: 20px;
	color: var(--hc-xref-accent, #4a7fb5);
}

.hc-xref-texts {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.hc-xref-title {
	font-weight: 600;
	font-size: 15px;
}

.hc-xref-reason {
	font-size: 13px;
	color: var(--hc-xref-reason-text, #62717f);
}

.hc-xref-arrow {
	flex-shrink: 0;
	margin-left: auto;
	color: var(--hc-xref-accent, #4a7fb5);
	font-size: 20px;
}

html.dark .hc-xref {
	--hc-xref-border: #384453;
	--hc-xref-accent: #6a9ed1;
	--hc-xref-accent-hover: #8fbbe6;
	--hc-xref-background: #222a35;
	--hc-xref-background-hover: #283242;
	--hc-xref-reason-text: #9fb0c4;
}