/* Full-width course page wrapper — sits inside base.twig's main block.
   Header is position: absolute on desktop (z-index: 40), so we need padding-top
   to push the iframe down past it. Tune --articulate-course-header-offset per
   site if the header height differs from the 100px default. */
.page-course {
	width: 100%;
	margin: 0;
	padding: 0;
	background: #000;
}

@media (min-width: 768px) {
	.page-course {
		padding-top: var(--articulate-course-header-offset, 100px);
	}
}

/* Block wrapper — fills its parent. line-height: 0 kills the inline-element
   whitespace gap that browsers render below iframes. */
.articulate-course-block {
	width: 100%;
	margin: 0;
	padding: 0;
	line-height: 0;
}

/* Iframe — fills the viewport. min-height keeps Rise readable on very short
   windows. No sandbox / no inline width-height: Rise needs full JS, sizing
   stays CSS-only so iframeResizer can be added later if needed. */
.articulate-course-iframe {
	display: block;
	width: 100%;
	height: 100vh;
	min-height: 600px;
	border: 0;
	margin: 0;
	padding: 0;
}

/* Empty state — when the ACF course_slug field is unset (editor preview only
   in practice; field is required at save time). line-height restored from the
   parent's 0 so the message is legible. */
.articulate-course-block__empty {
	padding: 2rem;
	text-align: center;
	color: #666;
	font-style: italic;
	line-height: 1.5;
}

/* ============================================================
   Course-template overrides
   Scoped to .page-template-page-course (the body class WP applies
   for page-course.php) so nothing leaks to pages where the block
   is dropped onto the default template.
   ============================================================ */

/* Header brand colour. Honeycom3's header is transparent by default —
   it expects a hero/coloured backdrop behind it. The full-width course
   template has no hero, so the body shows through as solid black.
   Paint header + subnav directly. */
.page-template-page-course .header,
.page-template-page-course .header-subnav-outer {
	background-color: #59396B !important;
}

/* Header pulled into normal document flow at the very top of the page.
   Theme default is position: absolute (and on some templates margin-top
   shifts it), neither of which makes sense here: the course template
   locks the viewport so nothing scrolls, the iframe owns the remaining
   viewport, and we want zero gap between header and iframe. */
.page-template-page-course .header {
	position: static !important;
	top: auto !important;
	margin-top: 0 !important;
}

/* Belt-and-braces: neutralise any body padding-top compensation that
   future header changes might introduce. */
.page-template-page-course,
.page-template-page-course body {
	padding-top: 0 !important;
}

/* Page wrapper sits naturally below the now-static header — no margin
   needed since the header occupies real vertical space. */
.page-template-page-course .page-course {
	padding-top: 0 !important;
	margin-top: 0;
}

/* Iframe fills the viewport minus the static header's height. Default
   80px matches the rendered header height; tune via
   --articulate-course-header-offset if the header design changes. */
.page-template-page-course .articulate-course-iframe {
	height: calc(100vh - var(--articulate-course-header-offset, 80px)) !important;
	min-height: 0 !important;
}

/* ============================================================
   Reveal flow
     Default (locked) — viewport locked at 100vh, iframe fills it,
                        footer hidden, floating reveal button bottom-right.
     Revealed         — body.post-course-revealed; lock lifted, iframe
                        + button hidden inline, resources section shown,
                        footer restored. Restart button reloads.
   State lives in JS only; reload returns to default.
   ============================================================ */

/* Locked viewport — no page scroll while the course is visible. */
.page-template-page-course {
	overflow: hidden !important;
	height: 100vh !important;
}
.page-template-page-course body {
	overflow: hidden !important;
	height: 100vh !important;
}

/* Hide footer while course is locked. */
.page-template-page-course .footer {
	display: none !important;
}

/* Floating reveal button — visible from page load until clicked. */
.page-template-page-course .post-course-reveal-btn {
	position: fixed;
	bottom: 20px;
	right: 20px;
	z-index: 100;
	background: #59396B;
	color: #fff;
	border: 0;
	padding: 12px 22px;
	border-radius: 4px;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
	transition: background 150ms;
}
.page-template-page-course .post-course-reveal-btn:hover,
.page-template-page-course .post-course-reveal-btn:focus {
	background: #8F0425;
}

/* Revealed state — lift the lock, restore the footer, expose resources. */
.page-template-page-course.post-course-revealed {
	overflow: visible !important;
	height: auto !important;
}
.page-template-page-course.post-course-revealed body {
	overflow: visible !important;
	height: auto !important;
}
.page-template-page-course.post-course-revealed .footer {
	display: block !important;
}
.page-template-page-course.post-course-revealed .post-course-content {
	display: block;
	padding: 40px 0;
	background: #fff;
}

/* Restart button at the top of the resources section — outline style so
   it reads as secondary to the (now-removed) primary reveal CTA. */
.page-template-page-course .post-course-actions {
	max-width: 960px;
	margin: 0 auto 24px;
	padding: 0 20px;
}

.page-template-page-course .post-course-restart-btn {
	background: transparent;
	color: #59396B;
	border: 2px solid #59396B;
	padding: 10px 20px;
	border-radius: 4px;
	font: inherit;
	cursor: pointer;
	transition: background 150ms, color 150ms;
}
.page-template-page-course .post-course-restart-btn:hover,
.page-template-page-course .post-course-restart-btn:focus {
	background: #59396B;
	color: #fff;
}

.page-template-page-course .post-course-content__inner {
	max-width: 960px;
	margin: 0 auto;
	padding: 0 20px;
}

/* ============================================================
   Featured Promo CTA — post-course content only
   Featured Promo card buttons normally print the linked article's
   full title (see @wp/partials/card.twig), which blows out button
   width on long titles. Inside the post-course resources section we
   swap it for a uniform "Read more". The CTA text is a direct text
   node of the <a>, so we zero the anchor's font-size and inject the
   label via ::before. Scoped to .post-course-content so every other
   Featured Promo on the site keeps the article-title button.
   The <a>'s aria-label ("Read <title>") is untouched — screen
   readers still announce the destination article.
   ============================================================ */
.page-template-page-course .post-course-content .card-button-outer a.card-link.button {
	font-size: 0;
}
.page-template-page-course .post-course-content .card-button-outer a.card-link.button::before {
	content: 'Read more';
	font-size: 1rem;
	line-height: 1.2;
	display: inline-block;
}

/* Temporarily hide the post-course reveal button on all course-template pages.
   To restore: delete this rule. Section and JS remain in place. */
.page-template-page-course .post-course-reveal-btn {
	display: none !important;
}