/**
 * HR Resource Detail (V2) — front-end styles.
 * Scoped to .single-download so nothing leaks to other templates.
 * Colours/spacing follow the Pencil "HR Resource - Detail — V2" design.
 * Font-family is inherited from the theme (Geologica) on purpose.
 */

/* Palette + type mapped to the site's Elementor global tokens (kit 947) so
   these elements always track the rest of the site. Hex values are fallbacks. */
.single-download {
	--eb-navy: var(--e-global-color-text, #1B2441);        /* eb/900   */
	--eb-ink: var(--e-global-color-a6463a2, #60677A);      /* eb/600   */
	--eb-grey: var(--e-global-color-d92dadb, #7A8090);     /* eb/500   */
	--eb-orange: var(--e-global-color-primary, #FF6C26);   /* eb/orange*/
	--eb-border: var(--e-global-color-7f7c9d7, #E2E4E6);   /* eb/100   */
	--eb-pink: var(--e-global-color-b82c9dd, #F8E8F2);     /* lavenderblush */
	--eb-soft: var(--e-global-color-9521129, #E7EDEB);     /* antiflashwhite */
	--eb-radius: 12px;
	--eb-font: var(--e-global-typography-text-font-family, "Geologica"), sans-serif;
}

/* Match the site font on every new section */
.single-download .eb-wtif,
.single-download .eb-htu,
.single-download .eb-reviewed,
.single-download .eb-faqs,
.single-download .eb-oneoff,
.single-download .eb-membership-box { font-family: var(--eb-font); }

/* Match the site's native H2 (hello-elementor: 2rem / 500 / 1.2, Geologica) so
   these section headings are consistent with content headings across the site. */
.single-download .eb-section-heading {
	color: var(--eb-navy);
	font-family: var(--eb-font);
	font-size: 2rem;
	font-weight: 500;
	line-height: 1.2;
	margin: 0 0 20px;
}

.single-download .eb-icon { fill: currentColor; display: block; }

/* ------------------------------------------------------------------ *
 * Who this is for
 * ------------------------------------------------------------------ */
.single-download .eb-wtif { margin: 40px 0; }
.single-download .eb-wtif__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
}
.single-download .eb-wtif__box {
	border: 1px solid var(--eb-border);
	border-radius: 10px;
	padding: 20px;
	background: #fff;
}
.single-download .eb-wtif__icon { color: var(--eb-orange); margin-bottom: 12px; }
.single-download .eb-wtif__icon .eb-icon { width: 26px; height: 26px; }
.single-download .eb-wtif__title {
	color: var(--eb-navy);
	font-size: 16px;
	font-weight: 600;
	margin: 0 0 6px;
}
.single-download .eb-wtif__text {
	color: var(--eb-grey);
	font-size: 14px;
	line-height: 1.5;
	margin: 0;
}

/* ------------------------------------------------------------------ *
 * How to use it
 * ------------------------------------------------------------------ */
.single-download .eb-htu { margin: 40px 0; }
.single-download .eb-htu__list { list-style: none; margin: 0; padding: 0; }
.single-download .eb-htu__step {
	display: flex;
	gap: 16px;
	padding: 0 0 20px;
}
.single-download .eb-htu__step:last-child { padding-bottom: 0; }
.single-download .eb-htu__num {
	flex: 0 0 auto;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--eb-orange);
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
}
.single-download .eb-htu__body { display: block; }
.single-download .eb-htu__title {
	display: block;
	color: var(--eb-navy);
	font-size: 16px;
	font-weight: 600;
	margin-bottom: 2px;
}
.single-download .eb-htu__text {
	display: block;
	color: var(--eb-grey);
	font-size: 14px;
	line-height: 1.55;
}

/* ------------------------------------------------------------------ *
 * Reviewed by (trust box)
 * ------------------------------------------------------------------ */
.single-download .eb-reviewed {
	display: flex;
	gap: 14px;
	background: var(--eb-soft);
	border-radius: 10px;
	padding: 20px 24px;
	margin: 32px 0;
}
.single-download .eb-reviewed__icon { color: var(--eb-orange); flex: 0 0 auto; }
.single-download .eb-reviewed__heading {
	color: var(--eb-navy);
	font-size: 15px;
	font-weight: 600;
	margin: 0 0 4px;
}
.single-download .eb-reviewed__text {
	color: var(--eb-grey);
	font-size: 13px;
	line-height: 1.5;
	margin: 0;
}

/* ------------------------------------------------------------------ *
 * FAQs (native <details> accordion)
 * ------------------------------------------------------------------ */
.single-download .eb-faqs { margin: 48px 0 0; }
.single-download .eb-faq {
	border-top: 1px solid var(--eb-border);
	padding: 4px 0;
}
.single-download .eb-faq:last-child { border-bottom: 1px solid var(--eb-border); }
.single-download .eb-faq__q {
	list-style: none;
	cursor: pointer;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	color: var(--eb-navy);
	font-size: 16px;
	font-weight: 500;
	padding: 18px 0;
}
.single-download .eb-faq__q::-webkit-details-marker { display: none; }
.single-download .eb-faq__chevron {
	flex: 0 0 auto;
	width: 10px;
	height: 10px;
	border-right: 2px solid var(--eb-orange);
	border-bottom: 2px solid var(--eb-orange);
	transform: rotate(45deg);
	transition: transform .2s ease;
	margin-right: 4px;
}
.single-download .eb-faq[open] .eb-faq__chevron { transform: rotate(-135deg); }
.single-download .eb-faq__a {
	color: var(--eb-grey);
	font-size: 14px;
	line-height: 1.6;
	padding: 0 0 20px;
}
.single-download .eb-faq__a p:last-child { margin-bottom: 0; }

/* ------------------------------------------------------------------ *
 * Membership push box (sidebar)
 * ------------------------------------------------------------------ */
.single-download .eb-membership-box {
	background: var(--eb-pink);
	border-radius: 0 0 var(--eb-radius) var(--eb-radius);
	padding: 28px 32px 32px;
	text-align: center;
}
.single-download .eb-membership-box__heading {
	color: var(--eb-navy);
	font-size: 16px;
	font-weight: 600;
	margin: 0 0 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
}
.single-download .eb-membership-box__crown { color: var(--eb-orange); }
.single-download .eb-membership-box__crown .eb-icon { width: 20px; height: 20px; }
.single-download .eb-membership-box__price {
	color: var(--eb-navy);
	font-size: 30px;
	font-weight: 700;
	margin: 0 0 20px;
}
.single-download .eb-membership-box__vat {
	font-size: 14px;
	font-weight: 400;
	color: var(--eb-grey);
}
.single-download .eb-membership-box__benefits {
	list-style: none;
	margin: 0 0 24px;
	padding: 0;
	text-align: left;
}
.single-download .eb-membership-box__benefit {
	display: flex;
	gap: 12px;
	color: var(--eb-navy);
	font-size: 15px;
	line-height: 1.5;
	margin-bottom: 16px;
}
.single-download .eb-tick { color: var(--eb-navy); flex: 0 0 auto; margin-top: 2px; }
.single-download .eb-membership-box__benefit a { color: var(--eb-navy); text-decoration: underline; }
.single-download .eb-membership-box__subitems {
	list-style-type: circle;
	margin: 10px 0 0 22px;
	padding: 0;
	color: var(--eb-navy);
	font-size: 15px;
}
.single-download .eb-membership-box__subitems li { margin-bottom: 6px; padding-left: 4px; }
.single-download .eb-membership-box__join .eb-btn-join {
	display: block;
	width: 100%;
	background: var(--eb-orange);
	color: #fff;
	border: none;
	border-radius: 50px;
	padding: 15px 20px;
	font-size: 16px;
	font-weight: 600;
	text-align: center;
	text-decoration: none;
	transition: background .15s ease;
}
.single-download .eb-membership-box__join .eb-btn-join:hover { filter: brightness(0.93); }

/* ------------------------------------------------------------------ *
 * One-off purchase card (sidebar top)
 * ------------------------------------------------------------------ */
.single-download .eb-oneoff { text-align: center; }
.single-download .eb-oneoff__label {
	text-transform: uppercase;
	letter-spacing: .08em;
	font-size: 12px;
	font-weight: 600;
	color: var(--eb-grey);
	margin: 0 0 10px;
}
.single-download .eb-oneoff__price {
	color: var(--eb-navy);
	font-size: 34px;
	font-weight: 700;
	line-height: 1;
	margin: 0 0 22px;
}
.single-download .eb-oneoff__vat { font-size: 15px; font-weight: 400; color: var(--eb-grey); }

/* Add-to-basket / Download button (EDD form rendered by [cutstom_purchase_link]) */
.single-download .eb-oneoff__action .edd_purchase_submit_wrapper,
.single-download .eb-oneoff__action form { margin: 0; }
.single-download .eb-oneoff__action .edd-submit.button,
.single-download .eb-oneoff__action .edd-submit,
.single-download .eb-oneoff__action a.edd-submit {
	display: block;
	width: 100%;
	background: var(--eb-orange);
	color: #fff;
	border: none;
	border-radius: 50px;
	padding: 15px 20px;
	font-size: 16px;
	font-weight: 600;
	text-align: center;
	text-decoration: none;
	box-sizing: border-box;
}
.single-download .eb-oneoff__action .edd-submit.button:hover,
.single-download .eb-oneoff__action a.edd-submit:hover { filter: brightness(0.93); }
/* EDD outputs a JS <button> plus a no-JS <input> fallback; the theme is missing
   EDD's rule to hide the fallback when JS runs, so both show. Hide it here. */
body.edd-js .eb-oneoff__action .edd-no-js { display: none !important; }

.single-download .eb-oneoff__reassure {
	list-style: none;
	margin: 18px 0 0;
	padding: 0;
}
.single-download .eb-oneoff__reassure li {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	color: var(--eb-ink);
	font-size: 14px;
	margin-bottom: 8px;
}
.single-download .eb-oneoff__ricon { color: var(--eb-orange); display: inline-flex; }

.single-download .eb-oneoff__or {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 24px 0;
	color: var(--eb-grey);
	font-size: 14px;
}
.single-download .eb-oneoff__or::before,
.single-download .eb-oneoff__or::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--eb-border);
}

.single-download .eb-oneoff__login-note {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	color: var(--eb-grey);
	font-size: 14px;
	margin: 0 0 14px;
}
.single-download .eb-oneoff__login-note .eb-oneoff__ricon { color: var(--eb-grey); }
.single-download .eb-oneoff__login-btn {
	display: block;
	width: 100%;
	background: #fff;
	color: var(--eb-navy);
	border: 1px solid var(--eb-border);
	border-radius: 50px;
	padding: 14px 20px;
	font-size: 15px;
	font-weight: 600;
	text-align: center;
	text-decoration: none;
	box-sizing: border-box;
}
.single-download .eb-oneoff__login-btn:hover { border-color: var(--eb-navy); }

/* ------------------------------------------------------------------ *
 * Sidebar state machine (body-class driven — replaces the old jQuery
 * that targeted hardcoded Elementor element IDs). Mirrors the previous
 * [check_user_or_free_download] logic: when logged-in OR free, only the
 * action button shows; membership box hides for active members.
 * ------------------------------------------------------------------ */
.single-download.eb-logged-in .eb-oneoff__buy,
.single-download.eb-logged-in .eb-oneoff__reassure,
.single-download.eb-logged-in .eb-oneoff__or,
.single-download.eb-logged-in .eb-oneoff__login,
.single-download.eb-free .eb-oneoff__buy,
.single-download.eb-free .eb-oneoff__reassure,
.single-download.eb-free .eb-oneoff__or,
.single-download.eb-free .eb-oneoff__login { display: none; }

.single-download.eb-member .eb-membership-box { display: none; }   /* already a member */
.single-download.eb-member form.edd_download_purchase_form { margin-bottom: 0; }

/* ------------------------------------------------------------------ *
 * Responsive
 * ------------------------------------------------------------------ */
@media (max-width: 1024px) {
	.single-download .eb-wtif__grid { grid-template-columns: 1fr; }
}