/* ==========================================================================
   Horizontal Traders - Helpful Information Section
   --------------------------------------------------------------------------
   Shared presentation for /helpful-information/ and every policy, requirement
   and local-area page beneath it. Colours reference the theme's custom
   properties only, so this section always tracks the rest of the site.

   Contents
     1.  Tokens
     2.  Hero
     3.  Two-column layout + sticky "On This Page"
     4.  Article typography
     5.  Callouts (block styles + programmatic)
     6.  Hub card grid
     7.  Related Information
     8.  FAQ accordion
     9.  Final CTA
     10. Responsive  (1260 / 1024 / 768 / 480)
     11. Motion & print
   ========================================================================== */

/* ==========================================================================
   1. Tokens
   ========================================================================== */

:root {
	/* Overwritten at runtime with the measured sticky-header height. */
	--ht-info-sticky-offset: 88px;
}

/* ==========================================================================
   2. Hero
   ========================================================================== */

.ht-info-hero {
	position: relative;
	background: linear-gradient(135deg, var(--ht-navy-950) 0%, var(--ht-navy-800) 100%);
	color: var(--ht-white);
	padding: clamp(24px, 3vw, 38px) 0 clamp(28px, 3.4vw, 44px);
	overflow: hidden;
}

.ht-info-hero .ht-breadcrumbs {
	margin-bottom: clamp(14px, 2vw, 22px);
}

.ht-info-hero__inner {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
	gap: clamp(28px, 4vw, 56px);
	align-items: center;
	min-height: clamp(238px, 26vw, 336px); /* + padding lands the hero at 360-440px */
}

.ht-info-hero__content {
	max-width: 620px;
	min-width: 0;
}

.ht-info-hero .ht-eyebrow {
	color: var(--ht-teal-400);
	display: inline-block;
	margin-bottom: 12px;
}

.ht-info-hero__heading {
	font-family: var(--ht-font-heading);
	font-size: clamp(30px, 3.4vw, 46px);
	font-weight: 800;
	line-height: 1.14;
	letter-spacing: -0.025em;
	color: var(--ht-white);
	margin: 0 0 14px;
	overflow-wrap: break-word;
}

.ht-info-hero__highlight {
	color: var(--ht-teal-400);
}

.ht-info-hero__desc {
	font-size: clamp(15.5px, 1.15vw, 17.5px);
	line-height: 1.65;
	color: #d4e1ea;
	margin: 0;
	max-width: 54ch;
}

.ht-info-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 22px;
}

.ht-info-hero__actions .ht-btn-secondary {
	color: var(--ht-white);
	border-color: rgba(255, 255, 255, 0.55);
	background: rgba(255, 255, 255, 0.06);
}

.ht-info-hero__actions .ht-btn-secondary:hover,
.ht-info-hero__actions .ht-btn-secondary:focus-visible {
	background: rgba(255, 255, 255, 0.16);
	border-color: var(--ht-white);
	color: var(--ht-white);
}

.ht-info-hero__media {
	position: relative;
	border-radius: var(--ht-radius-md);
	overflow: hidden;
	box-shadow: var(--ht-shadow-md);
	aspect-ratio: 16 / 10;
}

.ht-info-hero__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Very light navy wash so the image reads as part of the hero, not a sticker. */
.ht-info-hero__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(120deg, rgba(0, 21, 46, 0.35) 0%, rgba(0, 21, 46, 0.05) 60%);
	pointer-events: none;
}

/* ==========================================================================
   3. Two-column layout + sticky "On This Page"
   ========================================================================== */

.ht-info-body {
	padding: var(--section-md) 0;
	background: var(--ht-white);
}

.ht-info-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(32px, 4vw, 64px);
	align-items: start;
}

.ht-info-layout--has-toc,
.ht-info-layout:has(.ht-info-toc) {
	grid-template-columns: minmax(240px, 280px) minmax(0, 1fr);
}

.ht-info-toc {
	background: var(--ht-surface);
	border: 1px solid var(--ht-border);
	border-radius: var(--ht-radius-md);
	padding: 22px;
	min-width: 0;
}

.ht-info-toc__summary {
	display: none;
}

.ht-info-toc__title {
	font-family: var(--ht-font-heading);
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ht-teal-700);
	margin: 0 0 14px;
}

.ht-info-toc__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ht-info-toc__link {
	display: flex;
	align-items: center;
	min-height: 44px;
	padding: 8px 0 8px 14px;
	border-left: 2px solid var(--ht-border);
	font-size: 14px;
	line-height: 1.45;
	color: var(--ht-text-muted);
	text-decoration: none;
	overflow-wrap: anywhere;
	transition: color var(--ht-transition-fast), border-color var(--ht-transition-fast);
}

.ht-info-toc__link:hover {
	color: var(--ht-teal-700);
	border-left-color: var(--ht-teal-400);
}

.ht-info-toc__link.is-active {
	color: var(--ht-navy-950);
	font-weight: 600;
	border-left-color: var(--ht-teal-500);
}

.ht-info-toc__link:focus-visible {
	outline: 2px solid var(--ht-teal-500);
	outline-offset: 2px;
	border-radius: var(--ht-radius-xs);
}

.ht-info-toc__item--h3 .ht-info-toc__link {
	padding-left: 26px;
	font-size: 13.5px;
}

/* ==========================================================================
   4. Article typography
   ========================================================================== */

.ht-info-article {
	max-width: 900px;
	/* Load-bearing: without it a wide child (table, pre) forces the grid track
	   wider than the viewport. */
	min-width: 0;
	font-size: clamp(16px, 1.05vw, 17.5px);
	line-height: var(--ht-line-height-loose);
	color: var(--ht-text);
}

/* theme.json sets a 1380px content size; scope it back to this column. */
.ht-info-article > * {
	max-width: 100%;
}

.ht-info-article .alignwide,
.ht-info-article .alignfull {
	width: auto;
	max-width: 100%;
	margin-inline: 0;
}

.ht-info-article h2,
.ht-info-article h3 {
	scroll-margin-top: calc(var(--ht-info-sticky-offset) + 24px);
	overflow-wrap: break-word;
}

/* The headings carry tabindex="-1" so anchor jumps move focus; suppress the
   resulting outline for mouse users but keep it for keyboard users. */
.ht-info-article h2:focus,
.ht-info-article h3:focus {
	outline: none;
}

.ht-info-article h2:focus-visible,
.ht-info-article h3:focus-visible {
	outline: 2px solid var(--ht-teal-500);
	outline-offset: 6px;
	border-radius: var(--ht-radius-xs);
}

.ht-info-article h2 {
	font-size: clamp(23px, 2.1vw, 29px);
	margin: 2em 0 0.65em;
	padding-top: 0.4em;
	border-top: 1px solid var(--ht-border);
}

.ht-info-article > h2:first-child {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}

.ht-info-article h3 {
	font-size: clamp(18px, 1.5vw, 21px);
	margin: 1.7em 0 0.55em;
}

.ht-info-article h4 {
	font-size: clamp(16px, 1.2vw, 18px);
	margin: 1.5em 0 0.5em;
}

.ht-info-article p {
	margin: 0 0 1.35em;
	font-size: inherit;
	line-height: inherit;
}

.ht-info-article ul,
.ht-info-article ol {
	margin: 0 0 1.4em 1.3em;
	padding: 0;
}

.ht-info-article li {
	margin-bottom: 0.55em;
}

.ht-info-article li::marker {
	color: var(--ht-teal-700);
}

.ht-info-article a {
	color: var(--ht-teal-700);
	text-decoration: underline;
	text-underline-offset: 3px;
	overflow-wrap: anywhere;
}

.ht-info-article a:hover {
	color: var(--ht-navy-950);
}

.ht-info-article a:focus-visible {
	outline: 2px solid var(--ht-teal-500);
	outline-offset: 2px;
	border-radius: var(--ht-radius-xs);
}

.ht-info-article strong {
	color: var(--ht-navy-950);
	font-weight: 600;
}

.ht-info-article .wp-block-table {
	overflow-x: auto;
	margin: 0 0 1.6em;
}

.ht-info-article table {
	border-collapse: collapse;
	width: 100%;
	font-size: 0.95em;
}

.ht-info-article th,
.ht-info-article td {
	border: 1px solid var(--ht-border);
	padding: 10px 12px;
	text-align: left;
}

.ht-info-article th {
	background: var(--ht-surface);
	font-weight: 600;
	color: var(--ht-navy-950);
}

.ht-info-article img,
.ht-info-article iframe,
.ht-info-article video,
.ht-info-article pre {
	max-width: 100%;
}

.ht-info-article hr,
.ht-info-article .wp-block-separator {
	border: 0;
	border-top: 1px solid var(--ht-border);
	margin: 2.2em 0;
}

.ht-info-intro {
	font-size: clamp(17px, 1.35vw, 20px);
	line-height: 1.7;
	color: var(--ht-text-muted);
	margin: 0 0 1.6em;
	padding-bottom: 1.4em;
	border-bottom: 1px solid var(--ht-border);
}

.ht-info-intro--hub {
	max-width: 780px;
	border-bottom: 0;
	padding-bottom: 0;
	margin-bottom: clamp(28px, 4vw, 48px);
}

.ht-info-dates {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 20px;
	margin: 0 0 1.4em;
	font-size: 13.5px;
	color: var(--ht-text-muted);
}

.ht-info-dates__item time {
	color: var(--ht-navy-950);
	font-weight: 600;
}

/* ==========================================================================
   5. Callouts
   --------------------------------------------------------------------------
   Two routes, one look:
     - in content: core/group blocks with a registered block style, so editors
       insert and edit them with the normal block sidebar
     - in PHP: template-parts/information/callout.php for the hub and CTA
   Both match `[class*="is-style-ht-callout-"]`.
   ========================================================================== */

.ht-info-article [class*="is-style-ht-callout-"],
.ht-info-callout {
	position: relative;
	margin: 2em 0;
	padding: 22px 24px;
	border: 1px solid var(--ht-border);
	border-left: 4px solid var(--ht-teal-500);
	border-radius: var(--ht-radius-md);
	background: var(--ht-surface);
	overflow-wrap: anywhere;
}

.ht-info-article [class*="is-style-ht-callout-"] > *:first-child,
.ht-info-callout > *:first-child {
	margin-top: 0;
}

.ht-info-article [class*="is-style-ht-callout-"] > *:last-child,
.ht-info-callout > *:last-child {
	margin-bottom: 0;
}

.ht-info-article [class*="is-style-ht-callout-"] h3,
.ht-info-article [class*="is-style-ht-callout-"] h4,
.ht-info-callout__title {
	font-family: var(--ht-font-heading);
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	margin: 0 0 10px;
	padding: 0;
	border: 0;
	scroll-margin-top: 0;
}

.ht-info-article [class*="is-style-ht-callout-"] p,
.ht-info-callout__body p {
	font-size: 0.96em;
	line-height: 1.65;
	margin-bottom: 0.9em;
}

.ht-info-callout__icon {
	display: inline-flex;
	margin-bottom: 8px;
}

/* --- Important ---------------------------------------------------------- */
.ht-info-article .is-style-ht-callout-important,
.ht-info-callout.is-style-ht-callout-important {
	background: var(--ht-blue-50);
	border-color: var(--ht-border);
	border-left-color: var(--ht-navy-800);
}

.ht-info-article .is-style-ht-callout-important h3,
.ht-info-article .is-style-ht-callout-important h4,
.is-style-ht-callout-important .ht-info-callout__title {
	color: var(--ht-navy-800);
}

/* --- Good to Know ------------------------------------------------------- */
.ht-info-article .is-style-ht-callout-good-to-know,
.ht-info-callout.is-style-ht-callout-good-to-know {
	background: var(--ht-teal-100);
	border-color: var(--ht-teal-100);
	border-left-color: var(--ht-teal-500);
}

.ht-info-article .is-style-ht-callout-good-to-know h3,
.ht-info-article .is-style-ht-callout-good-to-know h4,
.is-style-ht-callout-good-to-know .ht-info-callout__title {
	color: var(--ht-teal-700);
}

/* --- Before You Drive --------------------------------------------------- */
.ht-info-article .is-style-ht-callout-before-you-drive,
.ht-info-callout.is-style-ht-callout-before-you-drive {
	background: var(--ht-white);
	border-color: var(--ht-teal-500);
	border-left-width: 4px;
	box-shadow: var(--ht-shadow-xs);
}

.ht-info-article .is-style-ht-callout-before-you-drive h3,
.ht-info-article .is-style-ht-callout-before-you-drive h4,
.is-style-ht-callout-before-you-drive .ht-info-callout__title {
	color: var(--ht-teal-700);
}

/* --- Need Help? --------------------------------------------------------- */
.ht-info-article .is-style-ht-callout-need-help,
.ht-info-callout.is-style-ht-callout-need-help {
	background: linear-gradient(135deg, var(--ht-navy-950) 0%, var(--ht-navy-800) 100%);
	border-color: transparent;
	border-left-color: var(--ht-teal-400);
	color: var(--ht-white);
}

.ht-info-article .is-style-ht-callout-need-help h3,
.ht-info-article .is-style-ht-callout-need-help h4,
.is-style-ht-callout-need-help .ht-info-callout__title {
	color: var(--ht-teal-400);
}

.ht-info-article .is-style-ht-callout-need-help p,
.is-style-ht-callout-need-help .ht-info-callout__body p {
	color: #d4e1ea;
}

.ht-info-article .is-style-ht-callout-need-help a,
.is-style-ht-callout-need-help .ht-info-callout__body a {
	color: var(--ht-white);
}

.is-style-ht-callout-need-help .ht-info-callout__icon {
	color: var(--ht-teal-400);
}

/* --- Client Confirmation Required (editors only) ------------------------
   Rendered only for users who can edit posts. The markup is removed
   server-side for everyone else, so these notes never reach page source. */
.ht-info-article .is-style-ht-callout-confirm,
.ht-info-callout.is-style-ht-callout-confirm {
	background: repeating-linear-gradient(
		135deg,
		#fff8e6,
		#fff8e6 12px,
		#fffdf5 12px,
		#fffdf5 24px
	);
	border: 2px dashed #c2872a;
	border-left: 2px dashed #c2872a;
	padding-top: 34px;
}

.ht-info-article .is-style-ht-callout-confirm::before,
.ht-info-callout.is-style-ht-callout-confirm::before {
	content: "ADMIN ONLY \2014 NOT VISIBLE TO VISITORS";
	position: absolute;
	top: 0;
	left: 0;
	background: #c2872a;
	color: #fff;
	font-family: var(--ht-font-heading);
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.08em;
	padding: 4px 10px;
	border-radius: 0 0 var(--ht-radius-xs) 0;
}

.ht-info-article .is-style-ht-callout-confirm h3,
.ht-info-article .is-style-ht-callout-confirm h4,
.is-style-ht-callout-confirm .ht-info-callout__title {
	color: #8a5d10;
}

/* ==========================================================================
   6. Hub card grid
   ========================================================================== */

.ht-info-cards {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
	gap: clamp(16px, 2vw, 24px);
}

.ht-info-card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--ht-white);
	border: 1px solid var(--ht-border);
	border-radius: var(--ht-radius-md);
	padding: clamp(22px, 2.4vw, 30px);
	transition: border-color var(--ht-transition-base), box-shadow var(--ht-transition-base), transform var(--ht-transition-base);
}

.ht-info-card:hover,
.ht-info-card:focus-within {
	border-color: var(--ht-teal-400);
	box-shadow: var(--ht-shadow-sm);
	transform: translateY(-2px);
}

.ht-info-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: var(--ht-radius-sm);
	background: var(--ht-teal-100);
	color: var(--ht-teal-700);
	margin-bottom: 16px;
	transition: background var(--ht-transition-base), color var(--ht-transition-base);
}

.ht-info-card:hover .ht-info-card__icon {
	background: var(--ht-teal-700);
	color: var(--ht-white);
}

.ht-info-card__title {
	font-size: clamp(17px, 1.4vw, 19.5px);
	font-weight: 700;
	margin: 0 0 8px;
	line-height: 1.3;
}

.ht-info-card__link {
	color: var(--ht-navy-950);
	text-decoration: none;
}

/* Whole card is the hit area, but the accessible name stays on the real link. */
.ht-info-card__link::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: var(--ht-radius-md);
}

.ht-info-card__link:focus-visible {
	outline: none;
}

.ht-info-card__link:focus-visible::after {
	outline: 2px solid var(--ht-teal-500);
	outline-offset: 3px;
}

.ht-info-card__desc {
	font-size: 14.5px;
	line-height: 1.6;
	color: var(--ht-text-muted);
	margin: 0 0 18px;
	flex: 1 1 auto;
}

.ht-info-card__more {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--ht-teal-700);
	margin-top: auto;
}

.ht-info-card:hover .ht-info-card__more svg {
	transform: translateX(3px);
}

.ht-info-card__more svg {
	transition: transform var(--ht-transition-fast);
}

.ht-info-article--hub {
	max-width: 820px;
	margin-top: clamp(36px, 5vw, 60px);
}

/* ==========================================================================
   7. Related Information
   ========================================================================== */

.ht-info-related {
	background: var(--ht-surface);
	border-top: 1px solid var(--ht-border);
	padding: var(--section-sm) 0;
}

.ht-info-related__heading {
	font-size: clamp(20px, 1.8vw, 25px);
	margin: 0 0 clamp(18px, 2.4vw, 28px);
}

.ht-info-related__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
	gap: 16px;
}

.ht-info-related__link {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	height: 100%;
	min-height: 44px;
	padding: 20px;
	background: var(--ht-white);
	border: 1px solid var(--ht-border);
	border-radius: var(--ht-radius-md);
	text-decoration: none;
	color: inherit;
	transition: border-color var(--ht-transition-base), box-shadow var(--ht-transition-base);
}

.ht-info-related__link:hover {
	border-color: var(--ht-teal-400);
	box-shadow: var(--ht-shadow-xs);
}

.ht-info-related__link:focus-visible {
	outline: 2px solid var(--ht-teal-500);
	outline-offset: 2px;
}

.ht-info-related__icon {
	flex: 0 0 auto;
	display: inline-flex;
	color: var(--ht-teal-700);
	margin-top: 2px;
}

.ht-info-related__text {
	flex: 1 1 auto;
	min-width: 0;
}

.ht-info-related__title {
	display: block;
	font-family: var(--ht-font-heading);
	font-weight: 700;
	font-size: 15.5px;
	color: var(--ht-navy-950);
	margin-bottom: 5px;
}

.ht-info-related__desc {
	display: block;
	font-size: 13.5px;
	line-height: 1.55;
	color: var(--ht-text-muted);
}

.ht-info-related__arrow {
	flex: 0 0 auto;
	color: var(--ht-teal-700);
	margin-top: 3px;
	transition: transform var(--ht-transition-fast);
}

.ht-info-related__link:hover .ht-info-related__arrow {
	transform: translateX(3px);
}

/* ==========================================================================
   8. FAQ accordion
   --------------------------------------------------------------------------
   Markup matches template-parts/sections/faq.php so the global controller in
   assets/js/theme.js drives it. Styles are duplicated here rather than loading
   faq.css, which is front-page only and also carries homepage grid rules.
   ========================================================================== */

.ht-info-faq {
	padding: var(--section-sm) 0;
	background: var(--ht-white);
}

.ht-info-faq__inner {
	max-width: 900px;
}

.ht-info-faq__heading {
	font-size: clamp(22px, 2vw, 28px);
	margin: 0 0 clamp(18px, 2.4vw, 26px);
}

.ht-info-faq .ht-faq-accordion {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.ht-info-faq .ht-faq-item {
	border: 1px solid var(--ht-border);
	border-radius: var(--ht-radius-sm);
	background: var(--ht-white);
	transition: border-color var(--ht-transition-base), box-shadow var(--ht-transition-base);
}

.ht-info-faq .ht-faq-item:hover,
.ht-info-faq .ht-faq-item.is-active {
	border-color: var(--ht-teal-400);
	box-shadow: var(--ht-shadow-xs);
}

.ht-info-faq .ht-faq-item.is-active {
	background: var(--ht-blue-50);
}

.ht-info-faq .ht-faq-question {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	width: 100%;
	min-height: 56px;
	padding: 16px 20px;
	background: none;
	border: 0;
	cursor: pointer;
	text-align: left;
	font-family: var(--ht-font-heading);
	font-size: 15.5px;
	font-weight: 600;
	line-height: 1.45;
	color: var(--ht-navy-950);
}

.ht-info-faq .ht-faq-question:focus-visible {
	outline: 2px solid var(--ht-teal-500);
	outline-offset: -2px;
	border-radius: var(--ht-radius-sm);
}

.ht-info-faq .ht-faq-question__text {
	flex: 1 1 auto;
	min-width: 0;
}

.ht-info-faq .ht-faq-icon {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--ht-teal-100);
	color: var(--ht-teal-700);
	transition: background var(--ht-transition-fast), color var(--ht-transition-fast), transform var(--ht-transition-fast);
}

.ht-info-faq .ht-faq-item.is-active .ht-faq-icon {
	background: var(--ht-teal-700);
	color: var(--ht-white);
	transform: rotate(45deg);
}

.ht-info-faq .ht-faq-answer {
	padding: 0 20px 18px;
}

.ht-info-faq .ht-faq-answer p {
	margin: 0;
	font-size: 15px;
	line-height: 1.7;
	color: var(--ht-text-muted);
}

/* ==========================================================================
   9. Final CTA
   ========================================================================== */

.ht-info-cta {
	padding: 0 0 clamp(40px, 5vw, 64px);
	background: var(--ht-white);
}

.ht-info-cta__card {
	position: relative;
	border-radius: var(--ht-radius-lg);
	overflow: hidden;
	background-color: var(--ht-navy-950);
	background-size: cover;
	background-position: center right;
	padding: clamp(32px, 4.5vw, 56px) clamp(24px, 4vw, 48px);
	box-shadow: var(--ht-shadow-md);
}

.ht-info-cta__overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(
		90deg,
		rgba(0, 21, 46, 0.96) 0%,
		rgba(0, 21, 46, 0.88) 45%,
		rgba(0, 21, 46, 0.5) 100%
	);
}

.ht-info-cta__inner {
	position: relative;
	z-index: 2;
	max-width: 640px;
}

.ht-info-cta__title {
	font-size: clamp(24px, 3vw, 36px);
	font-weight: 800;
	letter-spacing: -0.025em;
	color: var(--ht-white);
	margin: 0 0 12px;
}

.ht-info-cta__desc {
	font-size: clamp(15px, 1.15vw, 17px);
	line-height: 1.65;
	color: #d4e1ea;
	margin: 0 0 24px;
}

.ht-info-cta__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

/* .ht-btn-cta-primary / --secondary are defined in footer.css, which loads on
   every page; only the icon nudge needs restating for this context. */
.ht-info-cta__actions a svg {
	transition: transform var(--ht-transition-fast);
}

.ht-info-cta__actions a:hover svg {
	transform: translateX(3px);
}

/* ==========================================================================
   10. Responsive
   ========================================================================== */

@media (max-width: 1260px) {
	.ht-info-layout--has-toc,
	.ht-info-layout:has(.ht-info-toc) {
		grid-template-columns: 240px minmax(0, 1fr);
		gap: 36px;
	}
}

/* --- Tablet and below: single column, TOC becomes a disclosure ----------- */
@media (max-width: 1024px) {
	:root {
		--ht-info-sticky-offset: 78px;
	}

	.ht-info-hero__inner {
		grid-template-columns: minmax(0, 1fr);
		min-height: clamp(190px, 30vw, 250px); /* + padding = 300-360px */
		gap: 24px;
	}

	.ht-info-hero__media {
		max-width: 420px;
		aspect-ratio: 16 / 9;
	}

	.ht-info-layout {
		grid-template-columns: minmax(0, 1fr);
		gap: 26px;
	}

	.ht-info-toc {
		position: static;
		max-height: none;
		overflow: visible;
		padding: 0;
		background: var(--ht-white);
		border-radius: var(--ht-radius-sm);
	}

	.ht-info-toc__summary {
		display: flex;
		align-items: center;
		gap: 12px;
		min-height: 52px;
		padding: 14px 18px;
		cursor: pointer;
		list-style: none;
		font-family: var(--ht-font-heading);
		font-size: 15px;
		font-weight: 700;
		color: var(--ht-navy-950);
	}

	.ht-info-toc__summary::-webkit-details-marker {
		display: none;
	}

	.ht-info-toc__summary:focus-visible {
		outline: 2px solid var(--ht-teal-500);
		outline-offset: -2px;
		border-radius: var(--ht-radius-sm);
	}

	.ht-info-toc__summary-label {
		flex: 0 0 auto;
	}

	.ht-info-toc__current {
		flex: 1 1 auto;
		min-width: 0;
		font-weight: 500;
		font-size: 13px;
		color: var(--ht-text-muted);
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		text-align: right;
	}

	.ht-info-toc__chevron {
		flex: 0 0 auto;
		color: var(--ht-teal-700);
		transition: transform var(--ht-transition-fast);
	}

	.ht-info-toc[open] .ht-info-toc__chevron {
		transform: rotate(180deg);
	}

	.ht-info-toc__panel {
		padding: 4px 18px 14px;
		border-top: 1px solid var(--ht-border);
	}

	.ht-info-toc__title {
		display: none;
	}

	.ht-info-article h2,
	.ht-info-article h3 {
		scroll-margin-top: 96px;
	}
}

/* Desktop: the disclosure is always open and becomes the sticky sidebar. */
@media (min-width: 1025px) {
	.ht-info-toc {
		position: sticky;
		top: calc(var(--ht-info-sticky-offset) + 24px);
		max-height: calc(100vh - var(--ht-info-sticky-offset) - 48px);
		overflow-y: auto;
		overscroll-behavior: contain;
	}

	.ht-info-toc__panel {
		display: block !important; /* overrides the <details> collapse */
	}
}

@media (max-width: 768px) {
	.ht-info-hero {
		padding: 20px 0 26px;
	}

	.ht-info-hero__inner {
		min-height: clamp(160px, 42vw, 220px); /* + padding = 260-330px */
	}

	.ht-info-hero__media {
		display: none; /* keeps the mobile hero compact, per the brief */
	}

	.ht-info-body {
		padding: var(--section-sm) 0;
	}

	.ht-info-article {
		font-size: 16px;
	}

	.ht-info-related__grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 480px) {
	.ht-info-hero__actions {
		flex-direction: column;
		align-items: stretch;
	}

	.ht-info-hero__actions .ht-btn {
		width: 100%;
		justify-content: center;
	}

	.ht-info-toc__summary {
		padding: 12px 14px;
		font-size: 14px;
	}

	.ht-info-toc__panel {
		padding: 4px 14px 12px;
	}

	.ht-info-article [class*="is-style-ht-callout-"],
	.ht-info-callout {
		padding: 18px 16px;
	}

	.ht-info-article .is-style-ht-callout-confirm,
	.ht-info-callout.is-style-ht-callout-confirm {
		padding-top: 32px;
	}

	.ht-info-cta__actions {
		flex-direction: column;
		align-items: stretch;
	}

	.ht-info-cta__actions a {
		width: 100%;
		justify-content: center;
	}
}

/* ==========================================================================
   11. Motion & print
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	/* main.css sets `scroll-behavior: smooth` on html with no motion guard;
	   anchor navigation from the table of contents would amplify that. */
	html {
		scroll-behavior: auto;
	}

	.ht-info-card,
	.ht-info-card__icon,
	.ht-info-card__more svg,
	.ht-info-related__link,
	.ht-info-related__arrow,
	.ht-info-toc__link,
	.ht-info-toc__chevron,
	.ht-info-faq .ht-faq-item,
	.ht-info-faq .ht-faq-icon,
	.ht-info-cta__actions a svg {
		transition: none !important;
	}

	.ht-info-card:hover {
		transform: none;
	}
}

@media print {
	.ht-info-toc,
	.ht-info-cta,
	.ht-info-hero__media {
		display: none;
	}

	.ht-info-layout {
		display: block;
	}

	.ht-info-article {
		max-width: none;
	}
}