/*
 * v1.8.52 (Susanne, 5 Nov 2026: "template should be in the template page.... this is the UI for article").
 * v1.8.52.1: template / tool share bar parity with articles (header row stays visible at desktop).
 * 1. Tool cards for real template / tool posts (homepage band and Templates page).
 * 2. Templates page: plain navy header (shared with Articles, v1848.css) and the card grid.
 * 3. Template / tool post: download-first header, then a calm body. McKinsey palette: deep navy,
 *    cyan / teal accents, lots of white space. No hero video, no reading time, no section rail.
 */
:root {
	--shf52-navy: #0B1A33;
	--shf52-navy-2: #0E3A5C;
	--shf52-teal: #0B6A85;
	--shf52-cyan: #22B8CF;
	--shf52-cyan-soft: #DFF4F8;
	--shf52-mist: #F5FAFB;
	--shf52-line: #D5E6EA;
	--shf52-slate: #3D4F66;
}

/* ---------- 1. Real template / tool cards ---------- */
.shf-tool-card--template { --type: var(--shf52-teal); --type-tint: #E3F3F7; }
.shf-tool-card--tool { --type: #1E5BA8; --type-tint: #E6EFFA; }
.shf-tool-card--live .shf-tool-card__photo { aspect-ratio: 16 / 9; background: var(--shf52-navy); }
.shf-tool-card--live .shf-tool-card__body { display: flex; flex-direction: column; flex: 1 1 auto; }
.shf-tool-card--live .shf-tool-card__title { font-size: 1.18rem !important; line-height: 1.32 !important; }
.shf-tool-card--live .shf-tool-card__name { color: var(--shf52-navy) !important; text-decoration: none; }
.shf-tool-card--live .shf-tool-card__name::after { content: ""; position: absolute; inset: 0; z-index: 1; } /* whole card opens the post */
.shf-tool-card--live:hover .shf-tool-card__name { text-decoration: underline; text-underline-offset: 4px; }
.shf-tool-card--live .shf-tool-card__name:focus-visible { outline: 3px solid #7CDCEC; outline-offset: 3px; }
.shf-tool-card--live .shf-tool-card__text { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.shf-tool-card__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin: auto 0 0 !important; padding-top: 4px; }
.shf-tool-card__view { color: var(--type, var(--shf52-teal)); font-weight: 700; font-size: 0.92rem; }
.shf-tool-card__dl {
	position: relative; z-index: 2; /* above the whole-card link */
	display: inline-flex; align-items: center; gap: 6px;
	padding: 7px 14px; border-radius: 999px;
	border: 1.5px solid var(--type, var(--shf52-teal)); color: var(--type, var(--shf52-teal)) !important;
	font-size: 0.86rem; font-weight: 700; text-decoration: none !important; background: #fff;
	transition: background-color .2s ease, color .2s ease;
}
.shf-tool-card__dl:hover, .shf-tool-card__dl:focus-visible { background: var(--type, var(--shf52-teal)); color: #fff !important; }
/* One or two real cards (plus "More templates") sit centred, not stranded on the left of a 3-column grid. */
@media (min-width: 901px) {
	.shf-tools-grid--live, .shf-tpl-grid { grid-template-columns: repeat(auto-fit, minmax(280px, 344px)) !important; justify-content: center; }
}
.shf-tools-all { margin: clamp(32px, 4vw, 48px) 0 0 !important; }
.shf-tools-all a { color: var(--shf52-teal); font-weight: 700; text-decoration: none; text-underline-offset: 5px; }
.shf-tools-all a:hover, .shf-tools-all a:focus-visible { text-decoration: underline; }

/* ---------- 2. Templates page ---------- */
.shf-tpl-hero .shf-ed-hero__inner { display: block !important; }
.shf-tpl-hero .shf-ed-hero__title { color: #fff !important; }
.shf-tpl-hero .shf-ed-hero__intro { max-width: 62ch; color: #D3E2E9 !important; }
.shf-tpl-list { background: #fff; padding-top: clamp(40px, 5vw, 72px) !important; padding-bottom: clamp(56px, 7vw, 96px) !important; }
.shf-tpl-showcase { max-width: 1120px; margin-left: auto !important; margin-right: auto !important; }
.shf-tpl-grid { margin-top: 0 !important; }
.shf-tpl-empty { margin: 0 0 28px !important; color: var(--shf52-slate); font-size: 1.05rem; }

/* ---------- 3. Template / tool post ---------- */
.shf-tpl-head {
	--type: var(--shf52-teal); --type-tint: #E3F3F7;
	background:
		radial-gradient(42% 70% at 100% 0%, rgba(34, 184, 207, 0.14) 0%, rgba(34, 184, 207, 0) 70%),
		linear-gradient(180deg, var(--shf52-mist) 0%, #fff 100%);
	border-bottom: 1px solid var(--shf52-line);
	padding-top: clamp(36px, 5vw, 72px) !important;
	padding-bottom: clamp(36px, 5vw, 64px) !important;
}
.shf-tpl-head__grid { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr); gap: clamp(28px, 4.5vw, 64px); align-items: center; max-width: 1120px; margin: 0 auto !important; }
.shf-tpl-head__grid > * { margin: 0 !important; }
.shf-tpl-head__main > * { margin-top: 0 !important; }
.shf-tpl-head__meta { gap: 6px 14px !important; margin-bottom: 18px !important; }
.shf-tpl-head__meta > * { margin: 0 !important; }
.shf-tpl-head__type:empty { display: none; }
.shf-tpl-head__date, .shf-tpl-head__date time { display: inline-block !important; text-align: left !important; margin: 0 !important; padding: 0 !important; border: 0 !important; color: var(--shf52-slate); font-size: 0.92rem; }
.shf-tpl-head__date::before { content: none !important; display: none !important; }
.shf-tpl-head__title { color: var(--shf52-navy) !important; font-size: clamp(1.9rem, 1.2rem + 2.2vw, 2.8rem) !important; line-height: 1.12 !important; letter-spacing: -0.02em; font-weight: 800; margin: 0 0 14px !important; max-width: 22ch; }
.shf-tpl-head__lead, .shf-tpl-head__lead p { color: var(--shf52-slate); font-size: clamp(1.02rem, 0.95rem + 0.3vw, 1.15rem); line-height: 1.55; margin: 0 0 26px !important; max-width: 52ch; }
.shf-tpl-head__lead .wp-block-post-excerpt__more-link { display: none; }
.shf-tpl-cta { margin: 0 !important; }
.shf-tpl-cta__button {
	display: inline-flex; align-items: center; gap: 10px;
	padding: 15px 26px; border-radius: 999px;
	background: var(--shf52-navy); color: #fff !important;
	font-family: var(--wp--preset--font-family--maven-pro, "Maven Pro", sans-serif);
	font-size: 1.04rem; font-weight: 700; text-decoration: none !important;
	box-shadow: 0 12px 26px -12px rgba(11, 26, 51, 0.55);
	transition: background-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.shf-tpl-cta__button svg { color: var(--shf52-cyan); flex: 0 0 auto; }
.shf-tpl-cta__button:hover, .shf-tpl-cta__button:focus-visible { background: var(--shf52-navy-2); transform: translateY(-2px); box-shadow: 0 16px 30px -12px rgba(11, 26, 51, 0.6); }
.shf-tpl-cta__button:focus-visible { outline: 3px solid #7CDCEC; outline-offset: 3px; }
.shf-tpl-cta__facts { display: flex; flex-wrap: wrap; gap: 8px 22px; list-style: none; margin: 16px 0 0 !important; padding: 0 !important; color: var(--shf52-slate); font-size: 0.92rem; }
.shf-tpl-cta__facts li { position: relative; padding-left: 22px; margin: 0; }
.shf-tpl-cta__facts li::before { content: ""; position: absolute; left: 0; top: 0.18em; width: 15px; height: 15px; border-radius: 50%; background: var(--shf52-cyan-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B6A85' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4L18 8'/%3E%3C/svg%3E") center / 11px no-repeat; }
.shf-tpl-head__image { margin: 0 !important; border-radius: 18px; overflow: hidden; box-shadow: 0 30px 60px -28px rgba(11, 26, 51, 0.45); background: var(--shf52-navy); }
.shf-tpl-head__image img { display: block; width: 100%; height: 100% !important; object-fit: cover; }

/* Body */
.shf-tpl-body { background: #fff; padding-top: clamp(32px, 4vw, 56px) !important; }
.shf-tpl-content > * + * { margin-top: 1.1em; }
.shf-tpl-content h2 { color: var(--shf52-navy); font-size: clamp(1.35rem, 1.1rem + 0.9vw, 1.7rem) !important; line-height: 1.25; margin-top: 2.4em !important; margin-bottom: 0.6em !important; }
.shf-tpl-content h3 { color: var(--shf52-navy); font-size: 1.15rem !important; margin-top: 2em !important; }
.shf-tpl-content p, .shf-tpl-content li { color: #24344A; line-height: 1.7; }
.shf-tpl-content a { color: var(--shf52-teal); text-underline-offset: 3px; }
.shf-tpl-content ol li + li, .shf-tpl-content ul li + li { margin-top: 0.5em; }
.shf-tpl-answer { margin-top: 0 !important; padding: 18px 22px !important; border-left: 4px solid var(--shf52-cyan); background: var(--shf52-mist); border-radius: 0 12px 12px 0; }
.shf-tpl-answer > p { margin: 0 !important; }
.shf-tpl-answer strong:first-child { color: var(--shf52-navy); }
.shf-tpl-inside { margin-top: 2.2em !important; padding: clamp(22px, 3vw, 32px) !important; border: 1px solid var(--shf52-line); border-radius: 16px; background: linear-gradient(180deg, #fff 0%, var(--shf52-mist) 100%); }
.shf-tpl-inside > h2 { margin-top: 0 !important; }
.shf-tpl-inside > *:last-child { margin-bottom: 0 !important; }
.shf-tpl-table { margin: 1rem 0 0.4rem !important; overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--shf52-line); border-radius: 12px; background: #fff; }
.shf-tpl-table table { width: 100%; margin: 0; border-collapse: collapse; font-size: 0.95rem; line-height: 1.45; }
.shf-tpl-table th, .shf-tpl-table td { padding: 0.7rem 0.85rem; border: 0; border-bottom: 1px solid var(--shf52-line); text-align: left; vertical-align: top; }
.shf-tpl-table thead th { background: var(--shf52-navy); color: #fff; font-family: var(--wp--preset--font-family--maven-pro, "Maven Pro", sans-serif); font-weight: 700; }
.shf-tpl-table tbody th { background: var(--shf52-cyan-soft); color: var(--shf52-navy); font-weight: 700; min-width: 8.5rem; }
.shf-tpl-table tbody tr:last-child th, .shf-tpl-table tbody tr:last-child td { border-bottom: 0; }
.shf-tpl-table--wide table { min-width: 640px; }
.shf-tpl-source { margin-top: 0.45rem !important; color: var(--shf52-slate) !important; font-size: 0.75rem !important; line-height: 1.4 !important; }
.shf-tpl-content .shf-insight__faq { margin-top: 2.4em !important; }
.shf-tpl-content .shf-insight__faq-item { border-top: 1px solid var(--shf52-line); padding: 14px 0; margin: 0 !important; }
.shf-tpl-content .shf-insight__faq-item:last-child { border-bottom: 1px solid var(--shf52-line); }
.shf-tpl-content .shf-insight__faq-item summary { cursor: pointer; color: var(--shf52-navy); font-weight: 700; }
.shf-tpl-content .shf-insight__faq-item[open] summary { margin-bottom: 8px; }
.shf-tpl-content .shf-insight__sources li { font-size: 0.88rem; line-height: 1.55; overflow-wrap: anywhere; }
.shf-tpl-content .shf-disclaimer { margin-top: 1.5rem !important; padding-top: 0.9rem; border-top: 1px solid var(--shf52-line); color: var(--shf52-slate); line-height: 1.5; }
.shf-tpl-content .shf-disclaimer small { font-size: 0.85em; }
.shf-tpl-more { margin: 48px 0 0 !important; padding-top: 22px; border-top: 1px solid var(--shf52-line); }
.shf-tpl-more a { color: var(--shf52-teal); font-weight: 700; text-decoration: none; }
.shf-tpl-more a:hover, .shf-tpl-more a:focus-visible { text-decoration: underline; text-underline-offset: 4px; }

@media (max-width: 900px) {
	.shf-tpl-head__grid { grid-template-columns: minmax(0, 1fr); }
	.shf-tpl-head__image { max-width: 640px; }
}
@media (max-width: 600px) {
	.shf-tpl-cta__button { display: flex; justify-content: center; width: 100%; box-sizing: border-box; padding: 15px 18px; }
	.shf-tpl-cta__facts { gap: 8px 16px; }
	.shf-tpl-table--wide table { min-width: 680px; font-size: 0.9rem; }
}
@media (prefers-reduced-motion: reduce) {
	.shf-tpl-cta__button, .shf-tool-card__dl { transition: none; }
	.shf-tpl-cta__button:hover { transform: none; }
}

/* ---------- 4. Share bar on template / tool posts (v1.8.52.1) ----------
 * Articles hide the inline row from 1100px and show the right-margin rail beside
 * .shf-article__content (assets/css/share.css + assets/js/share.js). On the template
 * layout that content block sits below the tall download header, so at desktop the
 * rail is easy to miss and the header itself has no share controls. Keep the same
 * five buttons (LinkedIn, Facebook, X, Instagram, copy link) in the header meta row
 * at every width, and hide the body rail so only one bar is shown. Static, not sticky.
 */
.shf-tpl-head__meta .shf-share--inline { flex-basis: 100%; margin-top: 10px !important; }
@media (min-width: 1100px) {
	.shf-share-js .shf-template-post .shf-share--inline { display: flex !important; }
	.shf-share-js .shf-template-post .shf-share--rail { display: none !important; }
}