/**
 * Jahopp LMS — Course Viewer Styles
 * Replaces LearnDash Focus Mode with custom layout
 */

:root {
    --jhp-primary: var(--jhp-primary-600, #1B5E4B);
    --jhp-primary-light: var(--jhp-primary-50, #e8f5f0);
    --jhp-secondary: var(--jhp-text, #1e293b);
    --jhp-border: var(--jhp-border, #e2e8f0);
    --jhp-surface: var(--jhp-bg, #f8fafc);
    --jhp-sidebar-width: 280px;
    --jhp-topbar-height: 56px;
}

/* Hide common theme headers when Builder header slot is active. */
body.jhp-builder-has-header .site-header,
body.jhp-builder-has-header #header,
body.jhp-builder-has-header #masthead,
body.jhp-builder-has-header #site-header,
body.jhp-builder-has-header .elementor-location-header,
body.jhp-builder-has-header header.entry-header,
body.jhp-builder-has-header .wp-site-blocks > header,
body.jhp-builder-has-header header.wp-block-template-part,
body.jhp-builder-has-header .wp-block-template-part[aria-label*="header" i] {
    display: none !important;
}

/* Hide common theme footers when Builder footer slot is active. */
body.jhp-builder-has-footer .site-footer,
body.jhp-builder-has-footer #footer,
body.jhp-builder-has-footer #colophon,
body.jhp-builder-has-footer #site-footer,
body.jhp-builder-has-footer .elementor-location-footer,
body.jhp-builder-has-footer .site-info,
body.jhp-builder-has-footer .wp-block-site-info,
body.jhp-builder-has-footer footer.entry-footer,
body.jhp-builder-has-footer .wp-site-blocks > footer,
body.jhp-builder-has-footer footer.wp-block-template-part,
body.jhp-builder-has-footer .wp-block-template-part[aria-label*="footer" i] {
    display: none !important;
}

/* Classic themes often emit separator <hr> around #header/#footer. */
body.jhp-builder-has-header #page > hr,
body.jhp-builder-has-footer #page > hr {
    display: none !important;
}

/* Additional block-theme cleanup for Builder pages (mobile-safe). */
body.jhp-builder-page-active .jhp-builder-theme-artifact,
body.jhp-builder-page-active .wp-block-navigation__responsive-container,
body.jhp-builder-page-active .wp-block-navigation__responsive-container-open {
    display: none !important;
}

/* Kill block-theme root gutters on Builder-driven pages. */
html.jhp-builder-front-active {
    --wp--style--root--padding-left: 0px !important;
    --wp--style--root--padding-right: 0px !important;
}

body.jhp-builder-page-active {
    --wp--style--root--padding-left: 0px !important;
    --wp--style--root--padding-right: 0px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

body.jhp-builder-page-active .wp-site-blocks,
body.jhp-builder-page-active .wp-site-blocks.has-global-padding,
body.jhp-builder-page-active .wp-site-blocks .has-global-padding {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

body.jhp-builder-page-active .wp-site-blocks.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)),
body.jhp-builder-page-active .wp-site-blocks .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

body.jhp-builder-page-active .wp-site-blocks .alignfull {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

body.jhp-builder-page-active .jhp-builder-theme-main,
body.jhp-builder-page-active .jhp-builder-theme-content,
body.jhp-builder-page-active .wp-site-blocks .wp-block-post-content {
    margin-top: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-top: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    min-height: 0 !important;
    width: 100% !important;
    max-width: none !important;
}

/* Block themes add global inline padding + constrained widths on smaller breakpoints.
   Disable that on Builder-driven pages to avoid left/right gaps near ~900px. */
body.jhp-builder-page-active .jhp-builder-theme-main.has-global-padding,
body.jhp-builder-page-active .jhp-builder-theme-content.has-global-padding,
body.jhp-builder-page-active .jhp-builder-theme-main .has-global-padding,
body.jhp-builder-page-active .jhp-builder-theme-content .has-global-padding {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

body.jhp-builder-page-active .jhp-builder-theme-main.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)),
body.jhp-builder-page-active .jhp-builder-theme-content.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)),
body.jhp-builder-page-active .jhp-builder-theme-main .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)),
body.jhp-builder-page-active .jhp-builder-theme-content .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Reset */
.jhp-course-viewer-body {
    margin: 0;
    padding: 0;
    font-family: var(--jhp-font-body, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif);
    font-size: 15px;
    line-height: 1.6;
    color: var(--jhp-secondary);
    background: var(--jhp-surface);
    -webkit-font-smoothing: antialiased;
}

.jhp-course-viewer-body * {
    box-sizing: border-box;
}

/* ── Top Bar ────────────────────────────────────────────── */

.jhp-viewer-topbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--jhp-topbar-height);
    background: var(--jhp-topbar-bg, #fff);
    border-bottom: 1px solid var(--jhp-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
    z-index: 1000;
}

.jhp-viewer-topbar-left {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 160px;
}

.jhp-viewer-logo {
    height: 32px;
    width: auto;
}

.jhp-viewer-logo-text {
    font-size: 18px;
    font-weight: 700;
    color: var(--jhp-topbar-text, var(--jhp-primary));
    letter-spacing: -0.5px;
}

.jhp-viewer-topbar-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    flex: 1;
    max-width: 400px;
}

.jhp-viewer-progress-bar {
    width: 100%;
    height: 6px;
    background: #e5e7eb;
    border-radius: 3px;
    overflow: hidden;
}

.jhp-viewer-progress-fill {
    height: 100%;
    background: var(--jhp-primary);
    border-radius: 3px;
    transition: width 0.3s ease;
}

.jhp-viewer-progress-text {
    font-size: 11px;
    color: #64748b;
    font-weight: 500;
}

.jhp-viewer-topbar-right {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 160px;
    justify-content: flex-end;
}

.jhp-viewer-user {
    font-size: 13px;
    color: #64748b;
}

.jhp-viewer-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
}

/* ── Layout ─────────────────────────────────────────────── */

.jhp-viewer-layout {
    display: flex;
    margin-top: var(--jhp-topbar-height);
    min-height: calc(100vh - var(--jhp-topbar-height));
}

/* ── Sidebar ──────────────────────────────────────────────── */

.jhp-viewer-sidebar {
    position: fixed;
    top: calc(var(--jhp-topbar-height) - 1px);
    left: 0;
    bottom: 0;
    width: var(--jhp-sidebar-width);
    background: var(--jhp-sidebar-bg, #fff);
    border-right: 1px solid var(--jhp-sidebar-border, var(--jhp-border));
    overflow-y: auto;
    z-index: 900;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease;
    box-shadow: 2px 0 8px rgba(0,0,0,0.04);
}

.jhp-viewer-sidebar.jhp-sidebar-collapsed {
    transform: translateX(-100%);
    box-shadow: none;
}

/* Sidebar toggle — circular button at sidebar edge */
.jhp-sidebar-toggle-btn {
    position: fixed;
    top: calc(var(--jhp-topbar-height) + 14px);
    left: calc(var(--jhp-sidebar-width) - 14px);
    z-index: 1300;
    width: 28px;
    height: 28px;
    background: #fff;
    border: 1px solid var(--jhp-border);
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
    transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1), background 0.15s, color 0.15s, opacity 0.15s, box-shadow 0.15s;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
    padding: 0;
    opacity: 0;
    pointer-events: auto !important;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.jhp-sidebar-toggle-btn:hover {
    opacity: 1 !important;
    background: var(--jhp-surface);
    color: var(--jhp-primary);
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}

/* Show on sidebar hover */
.jhp-viewer-sidebar:hover ~ .jhp-sidebar-toggle-btn,
.jhp-sidebar-toggle-btn:hover {
    opacity: 1;
}

/* When sidebar is collapsed, pin to left edge */
.jhp-sidebar-toggle-btn.jhp-sidebar-btn-collapsed {
    left: 0;
    border-radius: 0 50% 50% 0;
    opacity: 0.8;
    background: var(--jhp-primary);
    color: #fff;
    border-color: var(--jhp-primary);
}

.jhp-sidebar-toggle-btn.jhp-sidebar-btn-collapsed:hover {
    opacity: 1;
    background: var(--jhp-primary);
    color: #fff;
}

.jhp-sidebar-toggle-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
}

.jhp-sidebar-toggle-btn.jhp-sidebar-btn-collapsed .jhp-sidebar-toggle-icon {
    transform: rotate(180deg);
}

/* Mobile hamburger in topbar — hidden on desktop */
.jhp-topbar-menu-btn {
    display: none;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: none;
    border: 1px solid var(--jhp-border);
    border-radius: 8px;
    cursor: pointer;
    color: var(--jhp-topbar-text, var(--jhp-secondary));
    padding: 0;
    transition: background 0.15s;
}

.jhp-topbar-menu-btn:hover {
    background: var(--jhp-surface);
}

.jhp-viewer-sidebar-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--jhp-sidebar-border, var(--jhp-border));
    background: var(--jhp-sidebar-heading-bg, linear-gradient(135deg, var(--jhp-primary), color-mix(in srgb, var(--jhp-primary), black 15%)));
    color: var(--jhp-sidebar-heading-text, #fff);
}

.jhp-viewer-sidebar-icon {
    font-size: 18px;
}

.jhp-viewer-course-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--jhp-sidebar-heading-text, #fff);
    text-decoration: none;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    letter-spacing: -0.2px;
}

.jhp-viewer-course-title:hover {
    text-decoration: underline;
}


/* Progress summary inside sidebar */
.jhp-sidebar-progress {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: var(--jhp-surface);
    border-bottom: 1px solid var(--jhp-sidebar-border, var(--jhp-border));
}

.jhp-sidebar-progress-bar {
    flex: 1;
    height: 4px;
    background: #e5e7eb;
    border-radius: 2px;
    overflow: hidden;
}

.jhp-sidebar-progress-fill {
    height: 100%;
    background: var(--jhp-sidebar-progress, var(--jhp-primary));
    border-radius: 2px;
    transition: width 0.4s ease;
}

.jhp-sidebar-progress-label {
    font-size: 11px;
    color: #64748b;
    font-weight: 600;
    white-space: nowrap;
}

/* ── Navigation ───────────────────────────────────────────── */

.jhp-viewer-nav {
    padding: 8px 0;
}

.jhp-viewer-nav-section-label {
    font-size: 10px;
    font-weight: 700;
    color: var(--jhp-sidebar-label, #94a3b8);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    padding: 12px 16px 4px;
}

.jhp-viewer-nav-item {
    border-bottom: none;
}

.jhp-viewer-nav-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    margin: 1px 8px;
    border-radius: 8px;
    text-decoration: none;
    color: var(--jhp-sidebar-text, var(--jhp-secondary));
    font-size: 13px;
    font-weight: 500;
    transition: background 0.15s, color 0.15s;
}

.jhp-viewer-nav-link:hover {
    background: var(--jhp-sidebar-hover-bg, var(--jhp-primary-light));
    color: var(--jhp-sidebar-active-text, var(--jhp-primary));
}

.jhp-viewer-nav-active > .jhp-viewer-nav-link,
.jhp-viewer-nav-active.jhp-viewer-nav-child {
    background: var(--jhp-sidebar-active-bg, var(--jhp-primary-light));
    color: var(--jhp-sidebar-active-text, var(--jhp-primary));
    font-weight: 600;
}

.jhp-viewer-nav-status {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
}

.jhp-viewer-nav-circle {
    display: block;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid #cbd5e1;
    transition: border-color 0.15s;
}

.jhp-viewer-nav-link:hover .jhp-viewer-nav-circle {
    border-color: var(--jhp-primary);
}

.jhp-viewer-nav-circle-sm {
    width: 10px;
    height: 10px;
}

/* Completed checkmark — green circle with white check */
.jhp-viewer-nav-check {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--jhp-sidebar-check, #16a34a);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
}

.jhp-viewer-nav-check-sm {
    width: 14px;
    height: 14px;
    font-size: 9px;
}

.jhp-viewer-nav-title {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.4;
}

.jhp-viewer-nav-badge {
    font-size: 9px;
    background: var(--jhp-primary-light);
    color: var(--jhp-primary);
    padding: 2px 8px;
    border-radius: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    flex-shrink: 0;
}

.jhp-viewer-nav-badge-quiz {
    background: #fef3c7;
    color: #b45309;
}

/* Quiz icon (question mark circle) */
.jhp-viewer-nav-quiz-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #d97706;
    flex-shrink: 0;
}

.jhp-viewer-nav-quiz-icon-sm {
    color: #d97706;
}

.jhp-viewer-nav-children {
    padding-left: 24px;
    margin-left: 0;
    background: transparent;
}

.jhp-viewer-nav-child {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    margin: 1px 8px 1px 0;
    border-radius: 6px;
    text-decoration: none;
    color: var(--jhp-sidebar-text, #475569);
    font-size: 12px;
    font-weight: 400;
    transition: background 0.15s, color 0.15s;
}

.jhp-viewer-nav-child:hover {
    background: var(--jhp-sidebar-hover-bg, var(--jhp-primary-light));
    color: var(--jhp-sidebar-active-text, var(--jhp-primary));
}

/* ── Main Content ───────────────────────────────────────── */

.jhp-viewer-main {
    flex: 1;
    margin-left: var(--jhp-sidebar-width);
    padding: 24px 48px 60px;
    min-height: calc(100vh - var(--jhp-topbar-height));
    transition: margin-left 0.3s ease;
}

.jhp-viewer-sidebar.jhp-sidebar-collapsed ~ .jhp-viewer-main {
    margin-left: 0;
}

/* ── Breadcrumb bar ─────────────────────────────────────── */

.jhp-viewer-breadcrumb-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin: -24px -48px 24px -48px;
    padding: 12px 48px;
    background: var(--jhp-breadcrumb-bg, linear-gradient(to right, var(--jhp-surface), #fff));
    border-bottom: 1px solid var(--jhp-border);
}

.jhp-viewer-breadcrumbs {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--jhp-breadcrumb-text, #64748b);
    flex-wrap: wrap;
}

.jhp-viewer-breadcrumb-home {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: var(--jhp-primary-light);
    color: var(--jhp-primary);
    transition: background 0.15s, color 0.15s;
}

.jhp-viewer-breadcrumb-home:hover {
    background: var(--jhp-primary);
    color: #fff;
}

.jhp-viewer-breadcrumb-link {
    color: var(--jhp-breadcrumb-text, #64748b);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.15s;
}

.jhp-viewer-breadcrumb-link:hover {
    color: var(--jhp-accent, var(--jhp-primary));
    text-decoration: underline;
}

.jhp-viewer-breadcrumb-sep {
    color: var(--jhp-breadcrumb-text, #94a3b8);
    opacity: 0.5;
    display: inline-flex;
    align-items: center;
}

.jhp-viewer-breadcrumb-current {
    font-weight: 600;
    color: var(--jhp-secondary);
}

.jhp-viewer-content-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.jhp-viewer-status-badge {
    font-size: 11px;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.jhp-viewer-status-progress {
    background: #fef3c7;
    color: #92400e;
}

.jhp-viewer-status-complete {
    background: var(--jhp-primary-light);
    color: var(--jhp-primary);
}

.jhp-viewer-mark-complete {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--jhp-primary);
    color: #fff;
    border: none;
    padding: 10px 28px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}

.jhp-viewer-mark-complete:hover {
    background: #164a3c;
}

.jhp-viewer-mark-complete:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ── Content Styles ─────────────────────────────────────── */

.jhp-viewer-title {
    font-size: 28px;
    font-weight: 700;
    color: var(--jhp-secondary);
    margin: 0 0 24px;
    line-height: 1.3;
}

.jhp-viewer-content {
    background: #fff;
    border-radius: 12px;
    border: 1px solid var(--jhp-border);
    padding: 32px 40px;
    margin-bottom: 24px;
}

/* Theme template wrapper — prevent horizontal overflow */
.jhp-builder-theme-template {
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
}

/* Slot wrappers should render consistently across theme contexts. */
body .jhp-builder-slot-header,
body .jhp-builder-slot-footer {
    width: 100%;
    max-width: 100vw;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    box-sizing: border-box !important;
}

body .jhp-builder-slot-header .jhp-block,
body .jhp-builder-slot-footer .jhp-block {
    box-sizing: border-box !important;
    margin-top: 0;
    margin-bottom: 0;
    border-radius: 0 !important;
}

/* ── Elementor global-kit CSS isolation ───────────────── */
/* Elementor's .elementor-kit-* applies font, color, size, weight, */
/* line-height, and border-radius to the <body> and to all <a> tags. */
/* We must override these for builder content with high specificity. */
/* The wildcard uses :where() so any class-based border-radius       */
/* (e.g. shortcode CSS, branding tokens) naturally wins.             */
.jhp-builder-theme-template,
.jhp-builder-content {
    border-radius: revert;
}

:where(.jhp-builder-theme-template) *,
:where(.jhp-builder-content) * {
    border-radius: revert;
}

.jhp-builder-theme-template .jhp-block,
.jhp-builder-content .jhp-block {
    border-radius: 0;
}

.jhp-builder-theme-template .jhp-section,
.jhp-builder-content .jhp-section {
    border-radius: 0 !important;
    margin-top: 0;
    margin-bottom: 0;
}

/* Reset Elementor's aggressive font inheritance on builder content */
body .jhp-builder-theme-template,
body .jhp-builder-content {
    font-family: var(--jhp-font-body, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.6;
}

/* Gap between header and content — ensure zero spacing */
.jhp-builder-theme-template + *,
.jhp-builder-theme-template + .site-content,
.jhp-builder-theme-template + .site-main,
.jhp-builder-theme-template + main,
.jhp-builder-theme-template + #content,
.jhp-builder-theme-template + .content-area {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Builder content blocks */
.jhp-builder-content .jhp-block {
    margin-bottom: 20px;
}

.jhp-builder-content .jhp-block:last-child {
    margin-bottom: 0;
}

/* Keep container width symmetric when padding is applied.
   Without border-box, width + horizontal padding can overflow and appear off-center in viewer. */
.jhp-builder-content .jhp-block-container,
.jhp-builder-theme-template .jhp-block-container {
    box-sizing: border-box !important;
    margin-left: auto;
    margin-right: auto;
}

/* Keep builder image sizing stable even when theme/Elementor sets img { width:100% }. */
.jhp-builder-content .jhp-block-image img,
.jhp-builder-theme-template .jhp-block-image img {
    width: var(--jhp-image-width, auto) !important;
    max-width: var(--jhp-image-max-width, 100%) !important;
    height: var(--jhp-image-height, auto);
}

/* Responsive per-device values from block props (tablet/mobile). */
@media (max-width: 1024px) {
    .jhp-builder-content .jhp-block[style*="--jhp-margin-"],
    .jhp-builder-theme-template .jhp-block[style*="--jhp-margin-"] {
        margin-top: var(--jhp-margin-top-tablet, var(--jhp-margin-top)) !important;
        margin-bottom: var(--jhp-margin-bottom-tablet, var(--jhp-margin-bottom)) !important;
    }

    .jhp-builder-content .jhp-block[style*="--jhp-padding-"],
    .jhp-builder-theme-template .jhp-block[style*="--jhp-padding-"] {
        padding-top: var(--jhp-padding-top-tablet, var(--jhp-padding-top)) !important;
        padding-bottom: var(--jhp-padding-bottom-tablet, var(--jhp-padding-bottom)) !important;
        padding-left: var(--jhp-padding-left-tablet, var(--jhp-padding-left)) !important;
        padding-right: var(--jhp-padding-right-tablet, var(--jhp-padding-right)) !important;
    }

    .jhp-builder-content .jhp-block-heading,
    .jhp-builder-theme-template .jhp-block-heading {
        font-size: var(--jhp-heading-size-tablet, var(--jhp-heading-size)) !important;
    }

    .jhp-builder-content .jhp-block-text,
    .jhp-builder-theme-template .jhp-block-text {
        font-size: var(--jhp-text-size-tablet, var(--jhp-text-size)) !important;
    }

    .jhp-builder-content .jhp-block-container,
    .jhp-builder-theme-template .jhp-block-container {
        padding: var(--jhp-container-padding-tablet, var(--jhp-container-padding)) !important;
    }

    .jhp-builder-content .jhp-block-image img,
    .jhp-builder-theme-template .jhp-block-image img {
        width: var(--jhp-image-width-tablet, var(--jhp-image-width, auto)) !important;
        max-width: var(--jhp-image-max-width-tablet, var(--jhp-image-max-width, 100%)) !important;
        height: var(--jhp-image-height-tablet, var(--jhp-image-height, auto));
    }

    .jhp-builder-content .jhp-block-section,
    .jhp-builder-theme-template .jhp-block-section {
        min-height: var(--jhp-section-min-height-tablet, var(--jhp-section-min-height, auto)) !important;
        max-height: var(--jhp-section-max-height-tablet, var(--jhp-section-max-height, none)) !important;
    }
}

@media (max-width: 767px) {
    .jhp-builder-content .jhp-block[style*="--jhp-margin-"],
    .jhp-builder-theme-template .jhp-block[style*="--jhp-margin-"] {
        margin-top: var(--jhp-margin-top-mobile, var(--jhp-margin-top-tablet, var(--jhp-margin-top))) !important;
        margin-bottom: var(--jhp-margin-bottom-mobile, var(--jhp-margin-bottom-tablet, var(--jhp-margin-bottom))) !important;
    }

    .jhp-builder-content .jhp-block[style*="--jhp-padding-"],
    .jhp-builder-theme-template .jhp-block[style*="--jhp-padding-"] {
        padding-top: var(--jhp-padding-top-mobile, var(--jhp-padding-top-tablet, var(--jhp-padding-top))) !important;
        padding-bottom: var(--jhp-padding-bottom-mobile, var(--jhp-padding-bottom-tablet, var(--jhp-padding-bottom))) !important;
        padding-left: var(--jhp-padding-left-mobile, var(--jhp-padding-left-tablet, var(--jhp-padding-left))) !important;
        padding-right: var(--jhp-padding-right-mobile, var(--jhp-padding-right-tablet, var(--jhp-padding-right))) !important;
    }

    .jhp-builder-content .jhp-block-heading,
    .jhp-builder-theme-template .jhp-block-heading {
        font-size: var(--jhp-heading-size-mobile, var(--jhp-heading-size-tablet, var(--jhp-heading-size))) !important;
    }

    .jhp-builder-content .jhp-block-text,
    .jhp-builder-theme-template .jhp-block-text {
        font-size: var(--jhp-text-size-mobile, var(--jhp-text-size-tablet, var(--jhp-text-size))) !important;
    }

    .jhp-builder-content .jhp-block-container,
    .jhp-builder-theme-template .jhp-block-container {
        padding: var(--jhp-container-padding-mobile, var(--jhp-container-padding-tablet, var(--jhp-container-padding))) !important;
    }

    .jhp-builder-content .jhp-block-image img,
    .jhp-builder-theme-template .jhp-block-image img {
        width: var(--jhp-image-width-mobile, var(--jhp-image-width-tablet, var(--jhp-image-width, auto))) !important;
        max-width: var(--jhp-image-max-width-mobile, var(--jhp-image-max-width-tablet, var(--jhp-image-max-width, 100%))) !important;
        height: var(--jhp-image-height-mobile, var(--jhp-image-height-tablet, var(--jhp-image-height, auto)));
    }

    .jhp-builder-content .jhp-block-section,
    .jhp-builder-theme-template .jhp-block-section {
        min-height: var(--jhp-section-min-height-mobile, var(--jhp-section-min-height-tablet, var(--jhp-section-min-height, auto))) !important;
        max-height: var(--jhp-section-max-height-mobile, var(--jhp-section-max-height-tablet, var(--jhp-section-max-height, none))) !important;
    }

    /* Match Builder mobile preview: avoid stretched stacked columns adding extra vertical whitespace. */
    .jhp-builder-content .jhp-block-section .jhp-section-col,
    .jhp-builder-theme-template .jhp-block-section .jhp-section-col {
        min-height: 0 !important;
        height: 100%;
    }

    /* Guardrails for compact mobile headers (theme slots). */
    .jhp-builder-slot-header .jhp-block-section {
        padding-top: var(--jhp-padding-top-mobile, 12px) !important;
        padding-bottom: var(--jhp-padding-bottom-mobile, 12px) !important;
        padding-left: var(--jhp-padding-left-mobile, 16px) !important;
        padding-right: var(--jhp-padding-right-mobile, 16px) !important;
        min-height: 0 !important;
        max-height: var(--jhp-section-max-height-mobile, var(--jhp-section-max-height-tablet, var(--jhp-section-max-height, none))) !important;
    }

    .jhp-builder-slot-header .jhp-block-section.jhp-cols-2 {
        grid-template-columns: minmax(0, 1fr) auto !important;
        column-gap: 12px !important;
        align-items: center;
    }

    .jhp-builder-slot-header .jhp-block-section.jhp-cols-2 .jhp-section-col {
        min-height: 0 !important;
        justify-content: center !important;
    }

    .jhp-builder-slot-header .jhp-block-section.jhp-cols-2 .jhp-section-col > .jhp-block {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    .jhp-builder-slot-header .jhp-block-section.jhp-cols-2 .jhp-section-col:last-child {
        align-items: flex-end;
    }

    .jhp-builder-slot-header .jhp-block-wp-menu {
        width: auto !important;
    }

    .jhp-builder-slot-header .jhp-block-image img {
        width: var(--jhp-image-width-mobile, var(--jhp-image-width-tablet, auto)) !important;
        max-width: var(--jhp-image-max-width-mobile, var(--jhp-image-max-width-tablet, var(--jhp-image-max-width, 100%))) !important;
        height: var(--jhp-image-height-mobile, var(--jhp-image-height-tablet, auto)) !important;
        max-height: 56px !important;
    }
}

/* Heading defaults — explicit sizes so they render identically to builder */
.jhp-builder-content .jhp-block-heading,
.jhp-builder-theme-template .jhp-block-heading {
    font-family: var(--jhp-font-heading, var(--jhp-font-body, inherit));
    line-height: 1.3;
    margin-top: 0;
    margin-bottom: 0;
}

.jhp-builder-content h1.jhp-block-heading { font-size: 2.25rem; font-weight: 800; }
.jhp-builder-content h2.jhp-block-heading { font-size: 1.875rem; font-weight: 700; }
.jhp-builder-content h3.jhp-block-heading { font-size: 1.5rem; font-weight: 700; }
.jhp-builder-content h4.jhp-block-heading { font-size: 1.25rem; font-weight: 600; }
.jhp-builder-content h5.jhp-block-heading { font-size: 1.125rem; font-weight: 600; }
.jhp-builder-content h6.jhp-block-heading { font-size: 1rem; font-weight: 600; }

.jhp-builder-content .jhp-block-text,
.jhp-builder-theme-template .jhp-block-text {
    font-family: var(--jhp-font-body, inherit);
    line-height: 1.7;
    font-size: 0.95rem;
    color: var(--jhp-text-secondary, #374151);
}

.jhp-builder-content .jhp-block-heading-paragraph > h1,
.jhp-builder-content .jhp-block-heading-paragraph > h2,
.jhp-builder-content .jhp-block-heading-paragraph > h3,
.jhp-builder-content .jhp-block-heading-paragraph > h4,
.jhp-builder-content .jhp-block-heading-paragraph > h5,
.jhp-builder-content .jhp-block-heading-paragraph > h6,
.jhp-builder-theme-template .jhp-block-heading-paragraph > h1,
.jhp-builder-theme-template .jhp-block-heading-paragraph > h2,
.jhp-builder-theme-template .jhp-block-heading-paragraph > h3,
.jhp-builder-theme-template .jhp-block-heading-paragraph > h4,
.jhp-builder-theme-template .jhp-block-heading-paragraph > h5,
.jhp-builder-theme-template .jhp-block-heading-paragraph > h6 {
    font-family: var(--jhp-font-heading, var(--jhp-font-body, inherit));
}

.jhp-builder-content .jhp-block-heading-paragraph .jhp-hp-body,
.jhp-builder-theme-template .jhp-block-heading-paragraph .jhp-hp-body,
.jhp-builder-content .jhp-it-content,
.jhp-builder-theme-template .jhp-it-content,
.jhp-builder-content .jhp-block-numbered-list,
.jhp-builder-theme-template .jhp-block-numbered-list,
.jhp-builder-content .jhp-block-table,
.jhp-builder-theme-template .jhp-block-table {
    font-family: var(--jhp-font-body, inherit);
}

.jhp-builder-content .jhp-block-text p {
    margin: 0 0 12px;
}

.jhp-builder-content .jhp-block-text h1,
.jhp-builder-content .jhp-block-text h2,
.jhp-builder-content .jhp-block-text h3,
.jhp-builder-content .jhp-block-text h4,
.jhp-builder-content .jhp-block-text h5,
.jhp-builder-content .jhp-block-text h6,
.jhp-builder-theme-template .jhp-block-text h1,
.jhp-builder-theme-template .jhp-block-text h2,
.jhp-builder-theme-template .jhp-block-text h3,
.jhp-builder-theme-template .jhp-block-text h4,
.jhp-builder-theme-template .jhp-block-text h5,
.jhp-builder-theme-template .jhp-block-text h6 {
    font-family: var(--jhp-font-heading, var(--jhp-font-body, inherit));
}

.jhp-builder-content .jhp-block-text p:last-child {
    margin-bottom: 0;
}

.jhp-builder-content .jhp-block-text ul,
.jhp-builder-content .jhp-block-text ol {
    margin: 0 0 12px;
    padding-left: 20px;
}

.jhp-builder-content .jhp-block-text li {
    margin-bottom: 4px;
}

.jhp-builder-content .jhp-block-image img {
    border-radius: 8px;
    display: inline-block;
}

.jhp-builder-content .jhp-block-image-hotspot .jhp-hotspot-wrapper {
    position: relative;
    display: inline-block;
    width: 100%;
}

.jhp-builder-content .jhp-block-image-hotspot .jhp-hotspot-image {
    width: 100%;
    border-radius: 8px;
}

.jhp-builder-content .jhp-hotspot-item {
    position: absolute;
    transform: translate(-50%, -50%);
}

.jhp-builder-content .jhp-hotspot-trigger {
    width: 34px;
    height: 34px;
    border-radius: 999px;
    border: 2px solid rgba(255, 255, 255, 0.85);
    box-shadow: 0 8px 16px rgba(15, 23, 42, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    list-style: none;
}

.jhp-builder-content .jhp-hotspot-trigger::-webkit-details-marker {
    display: none;
}

.jhp-builder-content .jhp-hotspot-panel {
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    min-width: 180px;
    max-width: 260px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.18);
    padding: 10px 12px;
    z-index: 10;
}

.jhp-builder-content .jhp-hotspot-title {
    font-size: 0.8125rem;
    font-weight: 700;
    margin: 0 0 4px;
}

.jhp-builder-content .jhp-hotspot-content {
    font-size: 0.8125rem;
    line-height: 1.45;
}

.jhp-builder-content .jhp-block-video .jhp-video-responsive {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    border-radius: 8px;
}

.jhp-builder-content .jhp-block-video .jhp-video-responsive iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.jhp-builder-content .jhp-block-audio audio {
    width: 100%;
}

.jhp-builder-content .jhp-block-flipcards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 16px;
}

.jhp-builder-content .jhp-flipcard {
    min-height: 120px;
    perspective: 1000px;
    cursor: pointer;
    overflow: hidden;
    border-radius: 8px;
}

.jhp-builder-content .jhp-flipcard-inner {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: inherit;
    transition: transform 0.6s;
    transform-style: preserve-3d;
}

.jhp-builder-content .jhp-flipcard:hover .jhp-flipcard-inner {
    transform: rotateY(180deg);
}

.jhp-builder-content .jhp-flipcard-front,
.jhp-builder-content .jhp-flipcard-back {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    border-radius: 8px;
    backface-visibility: hidden;
    font-size: 14px;
    font-weight: 500;
    text-align: center;
    word-break: break-word;
    overflow: hidden;
}

.jhp-builder-content .jhp-flipcard-front {
    min-height: inherit;
    background: #f8fafc;
    color: #334155;
    border: 1px solid #e2e8f0;
}

.jhp-builder-content .jhp-flipcard-back {
    position: absolute;
    inset: 0;
    overflow-y: auto;
    background: #334155;
    color: #fff;
    transform: rotateY(180deg);
    font-size: 13px;
}

.jhp-builder-content .jhp-block-section {
    position: relative;
    display: grid;
    gap: 20px;
}

.jhp-builder-content .jhp-cols-1 { grid-template-columns: 1fr; }
.jhp-builder-content .jhp-cols-2 { grid-template-columns: repeat(2, 1fr); }
.jhp-builder-content .jhp-cols-3 { grid-template-columns: repeat(3, 1fr); }
.jhp-builder-content .jhp-cols-4 { grid-template-columns: repeat(4, 1fr); }

.jhp-builder-content .jhp-block-section .jhp-section-bg-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

.jhp-builder-content .jhp-block-section .jhp-section-col {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

/* Optional section setting: align first button to bottom of each column. */
.jhp-builder-content .jhp-block-section.jhp-align-buttons-bottom .jhp-section-col > .jhp-block-button:first-of-type,
.jhp-builder-content .jhp-block-section.jhp-align-buttons-bottom .jhp-section-col > .jhp-block-embed-continue:first-of-type,
.jhp-builder-theme-template .jhp-block-section.jhp-align-buttons-bottom .jhp-section-col > .jhp-block-button:first-of-type {
    margin-top: auto;
}

.jhp-builder-content .jhp-block-section.jhp-section-full-width {
    width: 100vw !important;
    width: 100dvw !important;
    max-width: 100vw !important;
    max-width: 100dvw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-left: calc(50% - 50dvw) !important;
    margin-right: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50dvw) !important;
    border-radius: 0 !important;
}

@media (max-width: 900px) {
    .jhp-builder-content .jhp-block-section.jhp-section-full-width,
    .jhp-builder-theme-template .jhp-block-section.jhp-section-full-width {
        width: 100vw !important;
        width: 100dvw !important;
        max-width: 100vw !important;
        max-width: 100dvw !important;
        margin-left: calc(50% - 50vw) !important;
        margin-left: calc(50% - 50dvw) !important;
        margin-right: calc(50% - 50vw) !important;
        margin-right: calc(50% - 50dvw) !important;
        border-radius: 0 !important;
    }
}

/* On narrow phone viewports, dvw-based centering can produce subpixel drift in some browsers.
   Use a strict 100% box to keep sections perfectly symmetric. */
@media (max-width: 767px) {
    .jhp-builder-content .jhp-block-section.jhp-section-full-width,
    .jhp-builder-theme-template .jhp-block-section.jhp-section-full-width {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

/* Extra safety on mobile: never allow builder wrappers to create page-level horizontal scroll. */
@media (max-width: 900px) {
    html.jhp-builder-front-active,
    body.jhp-builder-front-active {
        max-width: 100%;
        overflow-x: hidden;
        overflow-x: clip;
    }
}

/* ── Image + Text block (class-based layout) ──────────── */
.jhp-builder-content .jhp-block-image-text {
    display: flex;
    gap: 24px;
    flex-direction: row;
    align-items: flex-start;
}

.jhp-builder-content .jhp-block-image-text.jhp-it-reverse {
    flex-direction: row-reverse;
}

.jhp-builder-content .jhp-it-image {
    flex-shrink: 0;
}

.jhp-builder-content .jhp-it-content {
    flex: 1;
    min-width: 0;
}

/* ── Image Gallery (class-based columns) ──────────────── */
.jhp-builder-content .jhp-block-image-gallery {
    display: grid;
}

.jhp-builder-content .jhp-gallery-cols-1 { grid-template-columns: 1fr; }
.jhp-builder-content .jhp-gallery-cols-2 { grid-template-columns: repeat(2, 1fr); }
.jhp-builder-content .jhp-gallery-cols-3 { grid-template-columns: repeat(3, 1fr); }
.jhp-builder-content .jhp-gallery-cols-4 { grid-template-columns: repeat(4, 1fr); }

/* ── Table horizontal scroll ──────────────────────────── */
.jhp-builder-content .jhp-table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.jhp-builder-content .jhp-block-tabs {
    border: 1px solid var(--jhp-tabs-border, #e2e8f0);
    border-radius: 10px;
    overflow: hidden;
}

.jhp-builder-content .jhp-tabs-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px;
    border-bottom: 1px solid var(--jhp-tabs-border, #e2e8f0);
}

.jhp-builder-content .jhp-tabs-tab {
    border: none;
    border-radius: 8px;
    padding: 8px 14px;
    font-size: 0.8125rem;
    font-weight: 600;
    background: var(--jhp-tabs-inactive-bg, #f1f5f9);
    color: var(--jhp-tabs-inactive-text, #475569);
    cursor: pointer;
    transition: all 0.2s ease;
}

.jhp-builder-content .jhp-tabs-tab.is-active {
    background: var(--jhp-tabs-active-bg, var(--jhp-btn-primary-bg, #2563eb));
    color: var(--jhp-tabs-active-text, #ffffff);
}

.jhp-builder-content .jhp-tabs-panel {
    display: none;
    padding: 14px 16px;
}

.jhp-builder-content .jhp-tabs-panel.is-active {
    display: block;
}

.jhp-builder-content .jhp-block-matching {
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 16px;
    background: #ffffff;
}

.jhp-builder-content .jhp-matching-title {
    margin: 0 0 4px;
    font-size: 1rem;
    font-weight: 700;
    color: #334155;
}

.jhp-builder-content .jhp-matching-instructions {
    margin: 0 0 14px;
    font-size: 0.8125rem;
    color: #64748b;
}

.jhp-builder-content .jhp-matching-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(180px, 240px);
    gap: 16px;
}

.jhp-builder-content .jhp-matching-left {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.jhp-builder-content .jhp-matching-row {
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 8px;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

.jhp-builder-content .jhp-matching-row-main {
    display: flex;
    align-items: center;
    gap: 8px;
}

.jhp-builder-content .jhp-matching-index {
    width: 20px;
    height: 20px;
    border-radius: 999px;
    background: #f1f5f9;
    color: #64748b;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.625rem;
    font-weight: 700;
    flex-shrink: 0;
}

.jhp-builder-content .jhp-matching-left-label {
    flex: 1;
    min-width: 0;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #334155;
    word-break: break-word;
    overflow-wrap: break-word;
}

.jhp-builder-content .jhp-matching-dropzone {
    width: 170px;
    max-width: 100%;
    flex-shrink: 0;
    text-align: left;
    border: 1px solid #d9e2ef;
    border-radius: 8px;
    background: #ffffff;
    padding: 8px 10px;
    font-size: 0.75rem;
    color: #94a3b8;
    cursor: pointer;
    transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
    word-break: break-word;
    overflow-wrap: break-word;
}

.jhp-builder-content .jhp-matching-dropzone.is-filled {
    border-style: solid;
    color: #475569;
    background: #f8fafc;
}

.jhp-builder-content .jhp-matching-dropzone.is-over {
    border-color: #64748b;
    background: #f1f5f9;
}

.jhp-builder-content .jhp-matching-feedback-text {
    margin: 5px 0 0;
    font-size: 0.75rem;
    line-height: 1.45;
}

.jhp-builder-content .jhp-matching-row.is-correct {
    border-color: var(--jhp-match-correct, #16a34a);
    background: #f0fdf4;
}

.jhp-builder-content .jhp-matching-row.is-correct .jhp-matching-feedback-text {
    color: var(--jhp-match-correct, #16a34a);
}

.jhp-builder-content .jhp-matching-row.is-correct .jhp-matching-dropzone {
    border-color: var(--jhp-match-correct, #16a34a);
    color: var(--jhp-match-correct, #16a34a);
    background: #f0fdf4;
}

.jhp-builder-content .jhp-matching-row.is-incorrect {
    border-color: var(--jhp-match-incorrect, #dc2626);
    background: #fef2f2;
}

.jhp-builder-content .jhp-matching-row.is-incorrect .jhp-matching-feedback-text {
    color: var(--jhp-match-incorrect, #dc2626);
}

.jhp-builder-content .jhp-matching-row.is-incorrect .jhp-matching-dropzone {
    border-color: var(--jhp-match-incorrect, #dc2626);
    color: var(--jhp-match-incorrect, #dc2626);
    background: #fef2f2;
}

.jhp-builder-content .jhp-matching-right {
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 10px;
    background: #f8fafc;
}

.jhp-builder-content .jhp-matching-options-title {
    margin: 0 0 8px;
    font-size: 0.6875rem;
    color: #94a3b8;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.jhp-builder-content .jhp-matching-options {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.jhp-builder-content .jhp-matching-option {
    width: 100%;
    text-align: left;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    background: #ffffff;
    color: #334155;
    font-size: 0.75rem;
    padding: 8px 10px;
    cursor: grab;
    transition: border-color 0.2s ease, background-color 0.2s ease, opacity 0.2s ease;
    word-break: break-word;
    overflow-wrap: break-word;
}

.jhp-builder-content .jhp-matching-option:hover {
    border-color: #94a3b8;
}

.jhp-builder-content .jhp-matching-option.is-selected {
    border-color: var(--jhp-match-accent, #334155);
    background: #f1f5f9;
    color: var(--jhp-match-accent, #1e293b);
}

.jhp-builder-content .jhp-matching-option.is-assigned {
    opacity: 0.6;
}

.jhp-builder-content .jhp-matching-option.is-dragging {
    opacity: 0.45;
}

.jhp-builder-content .jhp-matching-actions {
    margin-top: 12px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.jhp-builder-content .jhp-matching-check,
.jhp-builder-content .jhp-matching-reset {
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 8px 12px;
    border: 1px solid transparent;
    cursor: pointer;
}

.jhp-builder-content .jhp-matching-check {
    background: var(--jhp-match-accent, #334155);
    color: #ffffff;
}

.jhp-builder-content .jhp-matching-reset {
    background: #ffffff;
    border-color: #cbd5e1;
    color: #475569;
}

.jhp-builder-content .jhp-matching-status {
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--jhp-match-incorrect, #dc2626);
}

.jhp-builder-content .jhp-matching-status.is-perfect {
    color: var(--jhp-match-correct, #16a34a);
}

.jhp-builder-content .jhp-block-before-after {
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 12px;
    background: #fff;
}

.jhp-builder-content .jhp-before-after-stage {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid #e2e8f0;
}

.jhp-builder-content .jhp-before-after-image {
    display: block;
    width: 100%;
    height: 280px;
    object-fit: cover;
}

.jhp-builder-content .jhp-before-after-overlay {
    position: absolute;
    inset: 0 auto 0 0;
    overflow: hidden;
}

.jhp-builder-content .jhp-before-after-before {
    min-width: 100%;
}

.jhp-builder-content .jhp-before-after-divider {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    background: #fff;
    box-shadow: 0 0 10px rgba(15, 23, 42, 0.25);
    z-index: 2;
}

.jhp-builder-content .jhp-before-after-label {
    position: absolute;
    top: 8px;
    font-size: 0.6875rem;
    font-weight: 700;
    line-height: 1;
    padding: 6px 8px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.65);
    color: #fff;
    z-index: 3;
}

.jhp-builder-content .jhp-before-after-label-before {
    left: 8px;
}

.jhp-builder-content .jhp-before-after-label-after {
    right: 8px;
}

.jhp-builder-content .jhp-before-after-range {
    width: 100%;
    margin-top: 10px;
}

.jhp-builder-content .jhp-block-knowledge-check {
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 14px;
    background: #fff;
}

.jhp-builder-content .jhp-kc-title {
    margin: 0 0 4px;
    font-size: 1rem;
    font-weight: 700;
    color: #334155;
}

.jhp-builder-content .jhp-kc-question {
    margin: 0 0 12px;
    font-size: 0.875rem;
    color: #475569;
}

.jhp-builder-content .jhp-kc-options {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.jhp-builder-content .jhp-kc-option {
    width: 100%;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    background: #fff;
    color: #334155;
    text-align: left;
    padding: 10px 12px;
    font-size: 0.8125rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.jhp-builder-content .jhp-kc-option:hover {
    border-color: #94a3b8;
    background: #f8fafc;
}

.jhp-builder-content .jhp-kc-option.is-selected {
    border-color: var(--jhp-kc-accent, #334155);
    background: #f1f5f9;
    color: var(--jhp-kc-accent, #1e293b);
}

.jhp-builder-content .jhp-kc-option.is-correct {
    border-color: #16a34a;
    background: #f0fdf4;
    color: #166534;
}

.jhp-builder-content .jhp-kc-option.is-incorrect {
    border-color: #dc2626;
    background: #fef2f2;
    color: #991b1b;
}

.jhp-builder-content .jhp-kc-actions {
    margin-top: 12px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.jhp-builder-content .jhp-kc-check,
.jhp-builder-content .jhp-kc-reset {
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 8px 12px;
    border: 1px solid transparent;
    cursor: pointer;
}

.jhp-builder-content .jhp-kc-check {
    background: var(--jhp-kc-accent, #334155);
    color: #fff;
}

.jhp-builder-content .jhp-kc-reset {
    background: #fff;
    border-color: #cbd5e1;
    color: #475569;
}

.jhp-builder-content .jhp-kc-result {
    margin: 10px 0 0;
    font-size: 0.8125rem;
    font-weight: 600;
}

.jhp-builder-content .jhp-kc-result.is-correct {
    color: #16a34a;
}

.jhp-builder-content .jhp-kc-result.is-incorrect {
    color: #dc2626;
}

.jhp-builder-content .jhp-kc-result.is-neutral {
    color: #64748b;
}

.jhp-builder-content .jhp-kc-explanations {
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.jhp-builder-content .jhp-kc-explanation {
    margin: 0;
    font-size: 0.75rem;
    line-height: 1.45;
    color: #64748b;
}

.jhp-builder-content .jhp-block-reveal {
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 14px;
    background: #fff;
}

.jhp-builder-content .jhp-reveal-title {
    margin: 0 0 4px;
    font-size: 1rem;
    font-weight: 700;
    color: #334155;
}

.jhp-builder-content .jhp-reveal-instructions {
    margin: 0 0 10px;
    font-size: 0.8125rem;
    color: #64748b;
}

.jhp-builder-content .jhp-reveal-grid {
    display: grid;
    gap: 10px;
}

.jhp-builder-content .jhp-reveal-cols-1 { grid-template-columns: 1fr; }
.jhp-builder-content .jhp-reveal-cols-2 { grid-template-columns: repeat(2, 1fr); }
.jhp-builder-content .jhp-reveal-cols-3 { grid-template-columns: repeat(3, 1fr); }
.jhp-builder-content .jhp-reveal-cols-4 { grid-template-columns: repeat(4, 1fr); }

.jhp-builder-content .jhp-reveal-item {
    border: 1px solid #dbe3ee;
    border-radius: 8px;
    overflow: hidden;
    background: #f8fafc;
}

.jhp-builder-content .jhp-reveal-front {
    list-style: none;
    cursor: pointer;
    padding: 10px 12px;
    font-size: 0.8125rem;
    font-weight: 700;
    color: #334155;
}

.jhp-builder-content .jhp-reveal-front::-webkit-details-marker {
    display: none;
}

.jhp-builder-content .jhp-reveal-back {
    padding: 10px 12px;
    border-top: 1px solid #dbe3ee;
    font-size: 0.8125rem;
    color: #475569;
    background: #fff;
}

.jhp-builder-content .jhp-block-embed {
    padding: 10px;
    overflow-x: auto;
}

.jhp-builder-content .jhp-block-embed iframe,
.jhp-builder-content .jhp-block-embed video,
.jhp-builder-content .jhp-block-embed img {
    max-width: 100%;
    height: auto;
}

/* Continue-learning shortcode rendered via Embed block should look/behave like a native button block. */
.jhp-builder-content .jhp-block-embed-continue,
.jhp-builder-theme-template .jhp-block-embed-continue {
    overflow: visible;
}

.jhp-builder-content .jhp-block-embed-continue .jhp-cg-continue-wrapper,
.jhp-builder-theme-template .jhp-block-embed-continue .jhp-cg-continue-wrapper {
    margin: 0;
    max-width: none !important;
}

.jhp-builder-content .jhp-block-embed-continue .jhp-cg-continue-btn,
.jhp-builder-theme-template .jhp-block-embed-continue .jhp-cg-continue-btn {
    min-height: 0;
    padding: 12px 28px;
    border-radius: var(--jhp-btn-radius, 8px);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
    box-shadow: none;
}

.jhp-builder-content .jhp-block-embed-continue .jhp-cg-continue-btn:hover,
.jhp-builder-theme-template .jhp-block-embed-continue .jhp-cg-continue-btn:hover {
    transform: none;
}

.jhp-builder-content .jhp-chart-title {
    margin: 0 0 12px;
    text-align: center;
    font-size: 1rem;
    font-weight: 700;
    color: #334155;
}

.jhp-builder-content .jhp-bar-chart {
    display: flex;
    align-items: flex-end;
    gap: 14px;
    min-height: 170px;
}

.jhp-builder-content .jhp-bar-item {
    flex: 1 1 0;
    min-width: 70px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.jhp-builder-content .jhp-bar-track {
    width: 100%;
    height: 120px;
    background: #f8fafc;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    padding: 6px;
    display: flex;
    align-items: flex-end;
}

.jhp-builder-content .jhp-bar-fill {
    width: 100%;
    border-radius: 5px 5px 3px 3px;
    transition: height 0.25s ease;
}

.jhp-builder-content .jhp-bar-label {
    font-size: 0.75rem;
    color: #475569;
    text-align: center;
    line-height: 1.25;
}

.jhp-builder-content .jhp-bar-value {
    font-size: 0.75rem;
    color: #334155;
    font-weight: 600;
}

.jhp-builder-content .jhp-pie-chart-layout {
    display: flex;
    align-items: center;
    gap: 18px;
}

.jhp-builder-content .jhp-pie-chart-circle {
    width: 180px;
    height: 180px;
    border-radius: 999px;
    border: 1px solid #e2e8f0;
    flex-shrink: 0;
}

.jhp-builder-content .jhp-pie-legend {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.jhp-builder-content .jhp-pie-legend-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-size: 0.8125rem;
}

.jhp-builder-content .jhp-pie-legend-left {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.jhp-builder-content .jhp-pie-swatch {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    flex-shrink: 0;
}

.jhp-builder-content .jhp-pie-label {
    color: #475569;
}

.jhp-builder-content .jhp-pie-percent {
    color: #64748b;
    font-weight: 600;
}

/* ── Width-driven responsive rules (frontend viewer) ───── */
.jhp-viewer-content.jhp-viewer-content-compact {
    padding: 24px 28px;
}

.jhp-viewer-content.jhp-viewer-content-narrow {
    padding: 16px;
    border-radius: 8px;
}

.jhp-builder-content.jhp-content-compact .jhp-cols-3,
.jhp-builder-content.jhp-content-compact .jhp-cols-4 {
    grid-template-columns: repeat(2, 1fr);
}

.jhp-builder-content.jhp-content-compact .jhp-cols-2 {
    grid-template-columns: 1fr;
}

.jhp-builder-theme-template.jhp-content-compact .jhp-cols-2 {
    grid-template-columns: 1fr auto;
}

.jhp-builder-content.jhp-content-compact .jhp-block-image-text,
.jhp-builder-content.jhp-content-compact .jhp-block-image-text.jhp-it-reverse {
    flex-direction: column;
}

.jhp-builder-content.jhp-content-compact .jhp-it-image {
    width: 100% !important;
}

.jhp-builder-content.jhp-content-compact .jhp-gallery-cols-3,
.jhp-builder-content.jhp-content-compact .jhp-gallery-cols-4 {
    grid-template-columns: repeat(2, 1fr);
}

.jhp-builder-content.jhp-content-compact .jhp-flipcard {
    min-height: 100px;
}

.jhp-builder-content.jhp-content-compact .jhp-block-flipcards {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
}

.jhp-builder-content.jhp-content-compact .jhp-table-scroll table {
    min-width: 500px;
}

.jhp-builder-content.jhp-content-compact .jhp-tabs-nav {
    flex-direction: column;
}

.jhp-builder-content.jhp-content-compact .jhp-kc-actions {
    flex-direction: column;
    align-items: stretch;
}

.jhp-builder-content.jhp-content-compact .jhp-kc-check,
.jhp-builder-content.jhp-content-compact .jhp-kc-reset {
    width: 100%;
    text-align: center;
}

.jhp-builder-content.jhp-content-compact .jhp-pie-chart-layout {
    flex-direction: column;
    align-items: flex-start;
}

.jhp-builder-content.jhp-content-compact .jhp-pie-chart-circle {
    width: 150px;
    height: 150px;
}

.jhp-builder-content.jhp-content-compact .jhp-matching-grid {
    grid-template-columns: 1fr;
}

.jhp-builder-content.jhp-content-compact .jhp-matching-right {
    order: -1;
}

.jhp-builder-content.jhp-content-compact .jhp-matching-row-main {
    flex-wrap: wrap;
}

.jhp-builder-content.jhp-content-compact .jhp-matching-dropzone {
    width: 100%;
}

.jhp-builder-content.jhp-content-compact .jhp-matching-options {
    gap: 8px;
}

.jhp-builder-content.jhp-content-compact .jhp-before-after-image {
    height: 220px;
}

.jhp-builder-content.jhp-content-compact .jhp-before-after-label {
    font-size: 0.625rem;
    padding: 5px 7px;
}

.jhp-builder-content.jhp-content-compact .jhp-reveal-cols-3,
.jhp-builder-content.jhp-content-compact .jhp-reveal-cols-4 {
    grid-template-columns: repeat(2, 1fr);
}

.jhp-builder-content.jhp-content-compact .jhp-bar-chart {
    gap: 10px;
    overflow-x: auto;
    padding-bottom: 4px;
}

.jhp-builder-content.jhp-content-compact .jhp-bar-item {
    min-width: 76px;
    flex: 1 0 76px;
}

.jhp-builder-content.jhp-content-compact .jhp-bar-track {
    height: 100px;
}

.jhp-builder-content.jhp-content-narrow .jhp-tabs-tab {
    width: 100%;
    text-align: left;
}

.jhp-builder-content.jhp-content-narrow .jhp-before-after-image {
    height: 180px;
}

.jhp-builder-content.jhp-content-narrow .jhp-before-after-label {
    top: 6px;
}

.jhp-builder-content.jhp-content-narrow .jhp-matching-actions,
.jhp-builder-content.jhp-content-narrow .jhp-kc-actions {
    flex-direction: column;
    align-items: stretch;
}

.jhp-builder-content.jhp-content-narrow .jhp-matching-check,
.jhp-builder-content.jhp-content-narrow .jhp-matching-reset,
.jhp-builder-content.jhp-content-narrow .jhp-kc-check,
.jhp-builder-content.jhp-content-narrow .jhp-kc-reset {
    width: 100%;
    text-align: center;
}

.jhp-builder-content.jhp-content-narrow .jhp-reveal-cols-2,
.jhp-builder-content.jhp-content-narrow .jhp-reveal-cols-3,
.jhp-builder-content.jhp-content-narrow .jhp-reveal-cols-4 {
    grid-template-columns: 1fr;
}

.jhp-builder-content.jhp-content-xs .jhp-cols-3,
.jhp-builder-content.jhp-content-xs .jhp-cols-4 {
    grid-template-columns: 1fr;
}

.jhp-builder-theme-template.jhp-content-xs .jhp-cols-2 {
    grid-template-columns: 1fr auto;
}

.jhp-builder-content.jhp-content-xs .jhp-gallery-cols-2,
.jhp-builder-content.jhp-content-xs .jhp-gallery-cols-3,
.jhp-builder-content.jhp-content-xs .jhp-gallery-cols-4 {
    grid-template-columns: 1fr;
}

.jhp-builder-content.jhp-content-xs .jhp-reveal-cols-2,
.jhp-builder-content.jhp-content-xs .jhp-reveal-cols-3,
.jhp-builder-content.jhp-content-xs .jhp-reveal-cols-4 {
    grid-template-columns: 1fr;
}

.jhp-builder-content.jhp-content-xs .jhp-before-after-image {
    height: 150px;
}

.jhp-builder-content.jhp-content-xs h1.jhp-block-heading { font-size: 1.75rem; }
.jhp-builder-content.jhp-content-xs h2.jhp-block-heading { font-size: 1.5rem; }
.jhp-builder-content.jhp-content-xs h3.jhp-block-heading { font-size: 1.25rem; }

/* ── Course Landing Page (template-based) ─────────────── */

.jhp-landing-page {
    background: #fff;
}

/* Landing topbar — simplified, no progress bar */
.jhp-landing-topbar {
    position: sticky;
    top: 0;
    z-index: 100;
}

.jhp-landing-progress-pill {
    display: inline-flex;
    align-items: center;
    background: var(--jhp-primary-light);
    color: var(--jhp-primary);
    font-size: 12px;
    font-weight: 600;
    padding: 4px 14px;
    border-radius: 20px;
}

/* Hero section with overlay */
.jhp-landing-hero {
    position: relative;
    width: 100%;
    min-height: 300px;
    background-color: #2d3748;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: flex-end;
}

.jhp-landing-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, color-mix(in srgb, var(--jhp-hero-overlay, #000) 25%, transparent) 0%, color-mix(in srgb, var(--jhp-hero-overlay, #000) 60%, transparent) 100%);
}

.jhp-landing-hero-content {
    position: relative;
    z-index: 1;
    padding: 40px 48px;
    max-width: var(--jhp-landing-container, 1100px);
    width: 100%;
    margin: 0 auto;
}

.jhp-landing-hero-title {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--jhp-hero-title, #fff);
    margin: 0 0 6px;
    line-height: 1.15;
    text-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

.jhp-landing-hero-subtitle {
    font-size: 0.9rem;
    color: var(--jhp-hero-subtitle, rgba(255,255,255,0.85));
    margin: 0;
    font-weight: 500;
}

/* Breadcrumbs */
.jhp-landing-breadcrumbs {
    background: #fff;
    border-bottom: 1px solid var(--jhp-border);
    padding: 12px 0;
}

.jhp-landing-container {
    max-width: var(--jhp-landing-container, 1100px);
    margin: 0 auto;
    padding: 0 48px;
}

.jhp-landing-breadcrumbs .jhp-landing-container {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
}

.jhp-landing-bc-home {
    color: #64748b;
    display: flex;
}

.jhp-landing-bc-home:hover {
    color: var(--jhp-primary);
}

.jhp-landing-bc-sep {
    color: #cbd5e1;
}

.jhp-landing-bc-link {
    color: #64748b;
    text-decoration: none;
    font-weight: 500;
}

.jhp-landing-bc-link:hover {
    color: var(--jhp-primary);
    text-decoration: underline;
}

.jhp-landing-bc-current {
    color: var(--jhp-secondary);
    font-weight: 600;
}

/* Two-column body */
.jhp-landing-body {
    padding: 40px 0 60px;
}

.jhp-landing-grid {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 48px;
    align-items: start;
}

/* Left column — description */
.jhp-landing-section-title {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--jhp-section-title, var(--jhp-secondary));
    margin: 0 0 16px;
}

.jhp-landing-desc-content {
    line-height: 1.8;
    color: var(--jhp-text-secondary, #374151);
    font-size: 0.95rem;
}

.jhp-landing-desc-content p {
    margin: 0 0 14px;
}

.jhp-landing-desc-content ul,
.jhp-landing-desc-content ol {
    margin: 0 0 14px;
    padding-left: 20px;
}

.jhp-landing-desc-content li {
    margin-bottom: 4px;
}

.jhp-landing-summary {
    margin-top: 24px;
    line-height: 1.8;
    color: var(--jhp-text-secondary, #374151);
    font-size: 0.95rem;
}

.jhp-landing-summary p { margin: 0 0 12px; }
.jhp-landing-summary ul,
.jhp-landing-summary ol { margin: 0 0 12px; padding-left: 20px; }
.jhp-landing-summary li { margin-bottom: 4px; }

/* Right column — curriculum sidebar */
.jhp-landing-sidebar {
    position: sticky;
    top: calc(var(--jhp-topbar-height) + 24px);
}

.jhp-landing-curriculum {
    background: var(--jhp-nav-bg, #fff);
    border: 1px solid var(--jhp-nav-border, var(--jhp-border));
    border-radius: 12px;
    padding: 24px;
}

.jhp-landing-curriculum .jhp-landing-section-title {
    margin-bottom: 20px;
}

.jhp-landing-curriculum-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.jhp-landing-curriculum-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 8px;
    text-decoration: none;
    color: var(--jhp-nav-item, var(--jhp-secondary));
    font-size: 14px;
    font-weight: 500;
    transition: background 0.15s;
    border: 1px solid var(--jhp-nav-border, var(--jhp-border));
}

.jhp-landing-curriculum-item:hover {
    background: var(--jhp-surface);
    border-color: #cbd5e1;
}

.jhp-lci-completed {
    border-color: var(--jhp-primary-light);
}

.jhp-lci-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    flex-shrink: 0;
}

.jhp-lci-circle {
    display: block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid #cbd5e1;
}

.jhp-lci-completed .jhp-lci-icon {
    background: var(--jhp-primary-light);
}

.jhp-lci-check {
    color: var(--jhp-nav-check, var(--jhp-primary));
}

.jhp-lci-title {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.jhp-lci-badge {
    font-size: 10px;
    background: var(--jhp-nav-badge-bg, #f1f5f9);
    color: var(--jhp-nav-badge-color, #64748b);
    padding: 2px 8px;
    border-radius: 4px;
    font-weight: 600;
    text-transform: uppercase;
    flex-shrink: 0;
}

.jhp-lci-group {
    margin-bottom: 2px;
}

.jhp-lci-children {
    padding-left: 16px;
    border-left: 2px solid #e2e8f0;
    margin-left: 14px;
    margin-bottom: 4px;
}

.jhp-landing-curriculum-item.jhp-lci-child {
    padding-left: 12px;
    font-size: 13px;
    color: #475569;
    border-color: #f1f5f9;
    border-radius: 6px;
}

.jhp-lci-type {
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #94a3b8;
    flex-shrink: 0;
}

.jhp-lci-type-lesson {
    color: #3b82f6;
}

.jhp-lci-type-topic {
    color: #14b8a6;
}

.jhp-lci-quiz-icon {
    color: #94a3b8;
}

.jhp-lci-completed .jhp-lci-quiz-icon {
    color: var(--jhp-primary);
}

.jhp-landing-no-content {
    color: #94a3b8;
    font-size: 14px;
    text-align: center;
    padding: 16px 0;
}

.jhp-landing-start-btn {
    display: block;
    text-align: center;
    margin-top: 20px;
    background: var(--jhp-landing-btn-bg, var(--jhp-primary));
    color: var(--jhp-landing-btn-color, #fff);
    padding: 14px 24px;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    transition: background 0.2s;
}

.jhp-landing-start-btn:hover {
    background: #164a3c;
    color: #fff;
}

/* ── Bottom Navigation ──────────────────────────────────── */

.jhp-viewer-bottom-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0;
    border-top: 1px solid var(--jhp-border);
    margin-top: 24px;
}

.jhp-viewer-nav-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: #fff;
    border: 1px solid var(--jhp-border);
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--jhp-secondary);
    text-decoration: none;
    transition: all 0.2s;
}

.jhp-viewer-nav-btn:hover {
    background: var(--jhp-primary-light);
    border-color: var(--jhp-primary);
    color: var(--jhp-primary);
}

/* ── Responsive ─────────────────────────────────────────── */

@media (max-width: 900px) {
    .jhp-landing-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .jhp-landing-sidebar {
        position: static;
    }

    .jhp-landing-container {
        padding: 0 20px;
    }

    .jhp-landing-hero-content {
        padding: 28px 20px;
    }

    .jhp-landing-hero-title {
        font-size: 1.75rem;
    }
}

/* Quiz container — suppress LD's own breadcrumbs and style quiz output */
.jhp-quiz-container .ld-breadcrumbs,
.jhp-quiz-container .learndash-wrapper .ld-breadcrumbs,
.jhp-quiz-container .learndash_navigation_lesson_topics_list,
.jhp-quiz-container > .learndash-wrapper > .ld-focus-header {
    display: none !important;
}

.jhp-quiz-container .learndash-wrapper {
    max-width: 100%;
}

.jhp-quiz-container .wpProQuiz_content {
    margin: 0;
    padding: 0;
}

/* Nav item type labels */
.jhp-viewer-nav-type {
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #94a3b8;
    flex-shrink: 0;
}

.jhp-viewer-nav-type-lesson {
    color: #3b82f6;
}

.jhp-viewer-nav-type-topic {
    color: #14b8a6;
}

/* ── Diploma / Certificate section ──────────────────────── */

.jhp-landing-complete-msg {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 20px;
    padding: 14px 24px;
    background: #f0fdf4;
    color: #16a34a;
    border: 1px solid #bbf7d0;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
}

.jhp-landing-diploma {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--jhp-border);
}

.jhp-landing-diploma-heading {
    font-size: 14px;
    font-weight: 700;
    color: var(--jhp-text, #1e293b);
    margin: 0 0 12px;
}

.jhp-diploma-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
    border-radius: 12px;
    border: 1px solid var(--jhp-border);
    background: var(--jhp-bg-surface, #fff);
}

.jhp-diploma-earned {
    border-color: var(--jhp-diploma-border, #16a34a);
    background: linear-gradient(135deg, var(--jhp-diploma-bg, #f0fdf4) 0%, #fff 100%);
}

.jhp-diploma-locked {
    background: #f8fafc;
}

.jhp-diploma-icon {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--jhp-diploma-icon-bg, #dcfce7);
    color: var(--jhp-diploma-icon-color, #16a34a);
}

.jhp-diploma-icon-locked {
    background: #f1f5f9;
    color: #94a3b8;
}

.jhp-diploma-info {
    flex: 1;
    min-width: 0;
}

.jhp-diploma-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--jhp-text, #1e293b);
    margin: 0 0 4px;
}

.jhp-diploma-desc {
    font-size: 13px;
    color: var(--jhp-text-muted, #64748b);
    margin: 0;
}

.jhp-diploma-download-btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: var(--jhp-diploma-btn-bg, #16a34a);
    color: var(--jhp-diploma-btn-color, #fff);
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.15s;
}

.jhp-diploma-download-btn:hover {
    background: #15803d;
    color: #fff;
}

/* ── Finish / back-to-course button ─────────────────────── */

.jhp-viewer-nav-finish {
    background: var(--jhp-accent, #16a34a);
    color: #fff !important;
    border-color: var(--jhp-accent, #16a34a);
    font-weight: 600;
}

.jhp-viewer-nav-finish:hover {
    filter: brightness(0.9);
    color: #fff !important;
}

@media (max-width: 768px) {
    .jhp-viewer-sidebar {
        transform: translateX(-100%);
        width: 280px;
        box-shadow: none;
    }

    .jhp-viewer-sidebar.jhp-sidebar-mobile-open {
        transform: translateX(0);
        box-shadow: 4px 0 24px rgba(0,0,0,0.15);
    }

    /* Hide desktop toggle on mobile */
    .jhp-sidebar-toggle-btn {
        display: none !important;
    }

    /* Show hamburger in topbar */
    .jhp-topbar-menu-btn {
        display: flex;
    }

    .jhp-viewer-main {
        margin-left: 0;
        padding: 16px;
    }

    .jhp-viewer-breadcrumb-bar {
        margin: -16px -16px 16px -16px;
        padding: 10px 16px;
    }

    .jhp-viewer-content {
        padding: 20px;
    }

    .jhp-viewer-topbar {
        padding: 0 12px;
    }

    .jhp-viewer-topbar-center {
        display: none;
    }

    /* Backdrop overlay when sidebar is open */
    .jhp-sidebar-backdrop {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.3);
        z-index: 899;
    }

    .jhp-sidebar-backdrop.jhp-backdrop-visible {
        display: block;
    }

    /* Sections: 3/4 cols → 2, 2 cols → 1 */
    .jhp-builder-content .jhp-cols-3,
    .jhp-builder-content .jhp-cols-4 {
        grid-template-columns: repeat(2, 1fr);
    }

    .jhp-builder-content .jhp-cols-2 {
        grid-template-columns: 1fr;
    }

    /* Theme template headers/footers: preserve grid on mobile */
    .jhp-builder-theme-template .jhp-cols-2 {
        grid-template-columns: 1fr auto;
    }

    .jhp-builder-theme-template .jhp-cols-3,
    .jhp-builder-theme-template .jhp-cols-4 {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Image + Text: stack vertically */
    .jhp-builder-content .jhp-block-image-text,
    .jhp-builder-content .jhp-block-image-text.jhp-it-reverse {
        flex-direction: column;
    }

    .jhp-builder-content .jhp-it-image {
        width: 100% !important;
    }

    /* Image Gallery: max 2 cols */
    .jhp-builder-content .jhp-gallery-cols-3,
    .jhp-builder-content .jhp-gallery-cols-4 {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Flipcards: responsive grid, shorter */
    .jhp-builder-content .jhp-block-flipcards {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    }
    .jhp-builder-content .jhp-flipcard {
        min-height: 100px;
    }

    .jhp-builder-content .jhp-before-after-image {
        height: 220px;
    }

    /* Table: scrollable */
    .jhp-builder-content .jhp-table-scroll table {
        min-width: 500px;
    }

    .jhp-builder-content .jhp-pie-chart-layout {
        flex-direction: column;
        align-items: flex-start;
    }

    .jhp-builder-content .jhp-pie-chart-circle {
        width: 150px;
        height: 150px;
    }

    .jhp-builder-content .jhp-matching-grid {
        grid-template-columns: 1fr;
    }

    .jhp-builder-content .jhp-matching-right {
        order: -1;
    }

    /* Viewer title smaller */
    .jhp-viewer-title {
        font-size: 22px;
    }

    /* Breadcrumb bar: match reduced padding */
    .jhp-viewer-breadcrumb-bar {
        margin: -16px -16px 16px -16px;
        padding: 10px 16px;
    }

    .jhp-diploma-card {
        flex-direction: column;
        text-align: center;
    }

    .jhp-diploma-download-btn {
        width: 100%;
        justify-content: center;
    }
}

/* ═══════════════════════════════════════════════════════════
   IN-THEME LANDING — renders within WP theme (get_header/footer)
   Nuclear CSS isolation to prevent Elementor / theme globals
   from bleeding through. Uses --jhp-font-family CSS variable
   set in course-landing.php / package-viewer.php.
   ═══════════════════════════════════════════════════════════ */

/* ── 1. Nuclear reset: kill ALL inherited/cascaded styles ── */
.jhp-landing-in-theme,
.jhp-landing-in-theme *,
.jhp-landing-in-theme *::before,
.jhp-landing-in-theme *::after {
    box-sizing: border-box !important;
    font-family: var(--jhp-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif) !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    -webkit-text-stroke: 0 !important;
    word-spacing: normal !important;
}

.jhp-landing-in-theme {
    color: var(--jhp-text, #1e293b) !important;
    line-height: 1.6 !important;
    font-size: 16px !important;
    -webkit-font-smoothing: antialiased;
}

/* ── 2. Element-level resets (Elementor targets these) ───── */
.jhp-landing-in-theme a,
.jhp-landing-in-theme span,
.jhp-landing-in-theme p,
.jhp-landing-in-theme li,
.jhp-landing-in-theme label,
.jhp-landing-in-theme div,
.jhp-landing-in-theme strong,
.jhp-landing-in-theme em {
    font-family: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    line-height: inherit !important;
    color: inherit !important;
    letter-spacing: inherit !important;
    text-transform: inherit !important;
}

.jhp-landing-in-theme a {
    text-decoration: none !important;
    color: inherit !important;
}

.jhp-landing-in-theme button,
.jhp-landing-in-theme input,
.jhp-landing-in-theme select,
.jhp-landing-in-theme textarea {
    font-family: inherit !important;
    font-size: inherit !important;
    letter-spacing: inherit !important;
}

.jhp-landing-in-theme img {
    max-width: 100% !important;
    height: auto !important;
}

.jhp-landing-in-theme svg {
    vertical-align: middle !important;
}

/* ── 3. Heading hierarchy ─────────────────────────────────── */
.jhp-landing-in-theme h1,
.jhp-landing-in-theme h2,
.jhp-landing-in-theme h3,
.jhp-landing-in-theme h4,
.jhp-landing-in-theme h5,
.jhp-landing-in-theme h6 {
    font-family: var(--jhp-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif) !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    -webkit-text-stroke: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

.jhp-landing-in-theme .jhp-landing-hero-title {
    font-size: 2.5rem !important;
    font-weight: 800 !important;
    color: var(--jhp-hero-title, #fff) !important;
    margin: 0 0 8px !important;
    line-height: 1.2 !important;
    text-shadow: 0 2px 8px rgba(0,0,0,0.3) !important;
}

.jhp-landing-in-theme .jhp-landing-hero-subtitle {
    color: var(--jhp-hero-subtitle, rgba(255,255,255,0.85)) !important;
    font-size: 0.9rem !important;
    text-shadow: 0 1px 4px rgba(0,0,0,0.3) !important;
}

.jhp-landing-in-theme .jhp-landing-section-title {
    font-size: 1.2rem !important;
    font-weight: 700 !important;
    color: var(--jhp-section-title, var(--jhp-secondary)) !important;
    margin: 0 0 16px !important;
    line-height: 1.4 !important;
}

/* ── 4. Paragraph reset ───────────────────────────────────── */
.jhp-landing-in-theme p {
    font-size: 15px !important;
    line-height: 1.6 !important;
    color: #475569 !important;
    margin: 0 0 12px !important;
}

/* ── 5. Grid layout protection ────────────────────────────── */
.jhp-landing-in-theme .jhp-landing-grid {
    display: grid !important;
    grid-template-columns: 1fr 380px !important;
    gap: 48px !important;
    width: 100% !important;
    max-width: none !important;
}

@media (max-width: 900px) {
    .jhp-landing-in-theme .jhp-landing-grid {
        grid-template-columns: 1fr !important;
        gap: 32px !important;
    }
}

/* ── 6. Curriculum items ──────────────────────────────────── */
.jhp-landing-in-theme .jhp-landing-curriculum-item {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    font-size: 14px !important;
    color: #334155 !important;
}

.jhp-landing-in-theme .jhp-landing-curriculum-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
}

/* ── 7. Breadcrumbs ───────────────────────────────────────── */
.jhp-landing-in-theme .jhp-landing-breadcrumbs .jhp-landing-container {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 13px !important;
    color: #94a3b8 !important;
}

.jhp-landing-in-theme .jhp-landing-bc-link {
    color: #64748b !important;
    font-weight: 500 !important;
    font-size: 13px !important;
}

.jhp-landing-in-theme .jhp-landing-bc-link:hover {
    color: var(--jhp-primary) !important;
}

.jhp-landing-in-theme .jhp-landing-bc-sep {
    color: #cbd5e1 !important;
    font-size: 13px !important;
}

.jhp-landing-in-theme .jhp-landing-bc-home {
    color: #94a3b8 !important;
}

/* ── 8. Start / CTA button ────────────────────────────────── */
.jhp-landing-in-theme .jhp-landing-start-btn {
    display: block !important;
    text-align: center !important;
    background: var(--jhp-primary) !important;
    color: #fff !important;
    padding: 14px 32px !important;
    border-radius: 10px !important;
    font-weight: 600 !important;
    font-size: 0.95rem !important;
    text-decoration: none !important;
    border: none !important;
    cursor: pointer !important;
    line-height: 1.4 !important;
}

.jhp-landing-in-theme .jhp-landing-start-btn:hover {
    opacity: 0.9 !important;
    color: #fff !important;
}

/* ── 9. Diploma section ───────────────────────────────────── */
.jhp-landing-in-theme .jhp-landing-diploma {
    margin-top: 20px !important;
    padding-top: 20px !important;
    border-top: 1px solid var(--jhp-border) !important;
}

.jhp-landing-in-theme .jhp-landing-diploma-heading {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: var(--jhp-text, #1e293b) !important;
    margin: 0 0 12px !important;
    line-height: 1.4 !important;
}

.jhp-landing-in-theme .jhp-diploma-card {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    padding: 20px !important;
    border-radius: 12px !important;
    border: 1px solid var(--jhp-border) !important;
    background: #fff !important;
}

.jhp-landing-in-theme .jhp-diploma-earned {
    border-color: #16a34a !important;
    background: linear-gradient(135deg, #f0fdf4 0%, #fff 100%) !important;
}

.jhp-landing-in-theme .jhp-diploma-icon {
    flex-shrink: 0 !important;
    width: 56px !important;
    height: 56px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    background: #dcfce7 !important;
    color: #16a34a !important;
}

.jhp-landing-in-theme .jhp-diploma-info {
    flex: 1 !important;
    min-width: 0 !important;
}

.jhp-landing-in-theme .jhp-diploma-title {
    font-size: 15px !important;
    font-weight: 600 !important;
    color: var(--jhp-text, #1e293b) !important;
    margin: 0 0 4px !important;
    line-height: 1.3 !important;
}

.jhp-landing-in-theme .jhp-diploma-desc {
    font-size: 13px !important;
    color: var(--jhp-text-muted, #64748b) !important;
    margin: 0 !important;
    line-height: 1.4 !important;
}

.jhp-landing-in-theme .jhp-diploma-download-btn {
    flex-shrink: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 10px 20px !important;
    background: #16a34a !important;
    color: #fff !important;
    border-radius: 8px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    border: none !important;
    white-space: nowrap !important;
    line-height: 1.4 !important;
    cursor: pointer !important;
}

.jhp-landing-in-theme .jhp-diploma-download-btn:hover {
    background: #15803d !important;
    color: #fff !important;
}

/* ── 10. Course complete message ──────────────────────────── */
.jhp-landing-in-theme .jhp-landing-complete-msg {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    margin-top: 20px !important;
    padding: 14px 24px !important;
    background: #f0fdf4 !important;
    color: #16a34a !important;
    border: 1px solid #bbf7d0 !important;
    border-radius: 8px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
}

/* ── 11. Materials panel ──────────────────────────────────── */
.jhp-landing-in-theme .jhp-landing-materials {
    margin-top: 24px !important;
    border: 1px solid var(--jhp-border) !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    background: #fff !important;
}

.jhp-landing-in-theme .jhp-landing-materials-toggle {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    padding: 16px 20px !important;
    background: var(--jhp-surface) !important;
    border: none !important;
    border-radius: 0 !important;
    cursor: pointer !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--jhp-secondary) !important;
    line-height: 1.4 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    box-shadow: none !important;
    outline: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}

.jhp-landing-in-theme .jhp-landing-materials-toggle:hover {
    background: #f1f5f9 !important;
}

.jhp-landing-in-theme .jhp-landing-materials-toggle-left {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

.jhp-landing-in-theme .jhp-landing-materials-content {
    padding: 16px 20px !important;
    font-size: 14px !important;
    line-height: 1.7 !important;
    color: #475569 !important;
    border-top: 1px solid var(--jhp-border) !important;
}

/* ── 12. Container & responsive ───────────────────────────── */
.jhp-landing-in-theme .jhp-landing-container {
    max-width: 1100px !important;
    margin: 0 auto !important;
    padding: 0 48px !important;
}

@media (max-width: 900px) {
    .jhp-landing-in-theme .jhp-landing-container {
        padding: 0 20px !important;
    }
    .jhp-landing-in-theme .jhp-landing-hero-title {
        font-size: 1.75rem !important;
    }
}

@media (max-width: 480px) {
    .jhp-landing-in-theme .jhp-landing-container {
        padding: 0 12px !important;
    }
    .jhp-landing-in-theme .jhp-landing-hero-title {
        font-size: 1.4rem !important;
    }
}

/* Prevent Elementor from collapsing hero */
.jhp-landing-in-theme .jhp-landing-hero {
    margin-top: 0 !important;
    min-height: 300px !important;
    position: relative !important;
    width: 100% !important;
}

.jhp-landing-in-theme .jhp-landing-body {
    padding-bottom: 60px;
}

/* Description content isolation */
.jhp-landing-in-theme .jhp-landing-desc-content {
    line-height: 1.8 !important;
    color: var(--jhp-text-secondary, #374151) !important;
    font-size: 0.95rem !important;
}

.jhp-landing-in-theme .jhp-landing-desc-content p {
    margin: 0 0 14px !important;
}

/* Curriculum sidebar isolation */
.jhp-landing-in-theme .jhp-landing-curriculum {
    background: #fff !important;
    border: 1px solid var(--jhp-border) !important;
    border-radius: 12px !important;
    padding: 24px !important;
}

/* ── Extra small screens (phones in portrait) ──────────── */
@media (max-width: 480px) {
    /* Sections: all to single column */
    .jhp-builder-content .jhp-cols-3,
    .jhp-builder-content .jhp-cols-4 {
        grid-template-columns: 1fr;
    }

    /* Theme template headers/footers: preserve grid on mobile */
    .jhp-builder-theme-template .jhp-cols-2 {
        grid-template-columns: 1fr auto;
    }

    .jhp-builder-theme-template .jhp-cols-3,
    .jhp-builder-theme-template .jhp-cols-4 {
        grid-template-columns: 1fr 1fr;
    }

    /* Image Gallery: single column */
    .jhp-builder-content .jhp-gallery-cols-2,
    .jhp-builder-content .jhp-gallery-cols-3,
    .jhp-builder-content .jhp-gallery-cols-4 {
        grid-template-columns: 1fr;
    }

    .jhp-builder-content .jhp-reveal-cols-2,
    .jhp-builder-content .jhp-reveal-cols-3,
    .jhp-builder-content .jhp-reveal-cols-4 {
        grid-template-columns: 1fr;
    }

    .jhp-builder-content .jhp-tabs-nav {
        flex-direction: column;
    }

    .jhp-builder-content .jhp-bar-chart {
        gap: 8px;
    }

    .jhp-builder-content .jhp-bar-track {
        height: 100px;
    }

    .jhp-builder-content .jhp-matching-row-main {
        flex-wrap: wrap;
    }

    .jhp-builder-content .jhp-matching-dropzone {
        width: 100%;
    }

    .jhp-builder-content .jhp-matching-options {
        gap: 8px;
    }

    /* Headings: scale down */
    .jhp-builder-content h1.jhp-block-heading { font-size: 1.75rem; }
    .jhp-builder-content h2.jhp-block-heading { font-size: 1.5rem; }
    .jhp-builder-content h3.jhp-block-heading { font-size: 1.25rem; }

    /* Landing page hero */
    .jhp-landing-hero-title {
        font-size: 1.4rem;
    }

    .jhp-landing-hero-content {
        padding: 20px 16px;
    }

    .jhp-landing-hero {
        min-height: 200px;
    }

    .jhp-landing-container {
        padding: 0 12px;
    }

    /* Viewer content tighter */
    .jhp-viewer-content {
        padding: 16px;
        border-radius: 8px;
    }

    /* Bottom nav stack */
    .jhp-viewer-bottom-nav {
        flex-direction: column;
        gap: 10px;
    }

    .jhp-viewer-nav-btn {
        width: 100%;
        justify-content: center;
    }
}

/* ═══════════════════════════════════════════════════════════
   KURSMATERIAL — Sidebar panel
   ═══════════════════════════════════════════════════════════ */

.jhp-sidebar-materials {
    border-top: 1px solid var(--jhp-border);
    margin-top: auto;
}

.jhp-sidebar-materials-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 12px 16px;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    color: var(--jhp-primary);
    transition: background 0.15s ease;
}

.jhp-sidebar-materials-toggle:hover {
    background: var(--jhp-primary-light);
}

.jhp-sidebar-materials-toggle-left {
    display: flex;
    align-items: center;
    gap: 8px;
}

.jhp-sidebar-materials-toggle-left svg {
    opacity: 0.7;
}

.jhp-sidebar-materials-chevron {
    transition: transform 0.2s ease;
    opacity: 0.5;
}

.jhp-sidebar-materials-content {
    padding: 0 16px 16px;
    font-size: 13px;
    line-height: 1.65;
    color: #475569;
}

.jhp-sidebar-materials-content a {
    color: var(--jhp-primary);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.jhp-sidebar-materials-content a:hover {
    opacity: 0.8;
}

.jhp-sidebar-materials-content p {
    margin: 0 0 8px;
}

.jhp-sidebar-materials-content ul,
.jhp-sidebar-materials-content ol {
    margin: 0 0 8px;
    padding-left: 18px;
}

.jhp-sidebar-materials-content li {
    margin-bottom: 4px;
}

/* ═══════════════════════════════════════════════════════════
   KURSMATERIAL — Landing page panel
   ═══════════════════════════════════════════════════════════ */

.jhp-landing-materials {
    margin-top: 24px;
    border: 1px solid var(--jhp-border);
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
}

.jhp-landing-materials-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 16px 20px;
    background: var(--jhp-surface);
    border: none;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    color: var(--jhp-secondary);
    transition: background 0.15s ease;
}

.jhp-landing-materials-toggle:hover {
    background: #f1f5f9;
}

.jhp-landing-materials-toggle-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.jhp-landing-materials-toggle-left svg {
    color: var(--jhp-primary);
}

.jhp-landing-materials-chevron {
    transition: transform 0.2s ease;
    opacity: 0.4;
}

.jhp-landing-materials-content {
    padding: 16px 20px;
    font-size: 14px;
    line-height: 1.7;
    color: #475569;
    border-top: 1px solid var(--jhp-border);
}

.jhp-landing-materials-content a {
    color: var(--jhp-primary);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.jhp-landing-materials-content a:hover {
    opacity: 0.8;
}

.jhp-landing-materials-content p {
    margin: 0 0 10px;
}

.jhp-landing-materials-content ul,
.jhp-landing-materials-content ol {
    margin: 0 0 10px;
    padding-left: 20px;
}

.jhp-landing-materials-content li {
    margin-bottom: 4px;
}

/* ═══════════════════════════════════════════════════════════
   WP MENU WIDGET
   ═══════════════════════════════════════════════════════════ */

.jhp-block-wp-menu {
    width: 100%;
}

/* ── WP Menu: Desktop ──────────────────────────────────── */
.jhp-block-wp-menu .jhp-wp-menu-toggle {
    display: none;
}

/* Drawer & backdrop are portaled to <body> by JS.
   They start hidden via inline style="display:none" in PHP.
   The [data-jhp-menu-drawer] rules below show them when active. */

.jhp-block-wp-menu .jhp-wp-menu-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--jhp-menu-gap, 20px);
    font-size: var(--jhp-menu-font-size, 15px) !important;
    font-weight: var(--jhp-menu-font-weight, 400) !important;
    font-family: var(--jhp-menu-font-family, inherit) !important;
    text-transform: var(--jhp-menu-text-transform, none) !important;
}

.jhp-block-wp-menu.jhp-wp-menu-orientation-vertical .jhp-wp-menu-list {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
}

.jhp-block-wp-menu .jhp-wp-menu-list li {
    margin: 0;
    padding: 0;
}

.jhp-block-wp-menu .jhp-wp-menu-list a {
    color: var(--jhp-menu-text, #334155) !important;
    text-decoration: var(--jhp-menu-text-decoration, none) !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    font-family: inherit !important;
    line-height: 1.35;
    transition: color 0.15s ease, text-decoration 0.15s ease;
}

.jhp-block-wp-menu .jhp-wp-menu-list a:hover {
    color: var(--jhp-menu-hover, var(--jhp-menu-active, #1B5E4B)) !important;
    text-decoration: var(--jhp-menu-hover-decoration, none) !important;
}

.jhp-block-wp-menu .jhp-wp-menu-list .current-menu-item > a,
.jhp-block-wp-menu .jhp-wp-menu-list .current-menu-ancestor > a,
.jhp-block-wp-menu .jhp-wp-menu-list .current_page_item > a {
    color: var(--jhp-menu-active, #1B5E4B) !important;
}

/* Sub-menus (dropdowns) */
.jhp-block-wp-menu .jhp-wp-menu-list .sub-menu {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* ── WP Menu: Mobile — Collapse mode ──────────────────── */
.jhp-block-wp-menu.jhp-mobile-mode-collapse.is-mobile > .jhp-wp-menu-list {
    display: none !important;
}

.jhp-block-wp-menu.jhp-mobile-mode-collapse.is-mobile .jhp-wp-menu-toggle {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    background: var(--jhp-menu-hamburger-bg, transparent);
    color: var(--jhp-menu-hamburger-color, var(--jhp-menu-text, #334155));
    border: none;
    padding: 8px;
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1;
    border-radius: 6px;
    transition: background 0.15s ease;
}

.jhp-block-wp-menu .jhp-wp-menu-toggle:hover {
    opacity: 0.8;
}

.jhp-block-wp-menu .jhp-wp-menu-toggle svg {
    display: block;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

/* ── Mobile drawer (off-canvas right panel) ───────────── */
/* Drawer is portaled to <body> by JS, so we target it directly. */
.jhp-wp-menu-drawer[data-jhp-menu-drawer] {
    display: block !important;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(320px, 85vw);
    background: var(--jhp-menu-mobile-bg, #ffffff);
    z-index: 2147483647;
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.12);
}

.jhp-wp-menu-drawer[data-jhp-menu-drawer].is-open {
    transform: translateX(0);
}

.jhp-wp-menu-drawer-header {
    display: flex;
    justify-content: flex-end;
    padding: 16px 20px 8px;
}

.jhp-wp-menu-drawer-close {
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: var(--jhp-menu-mobile-text, var(--jhp-menu-text, #334155));
    cursor: pointer;
    padding: 8px;
    line-height: 1;
    border-radius: 6px;
    transition: background 0.15s ease;
}

.jhp-wp-menu-drawer-close:hover {
    background: rgba(0, 0, 0, 0.06);
}

.jhp-wp-menu-drawer-close svg {
    display: block;
    width: 24px;
    height: 24px;
}

/* Drawer nav list */
.jhp-wp-menu-drawer .jhp-wp-menu-drawer-nav {
    display: flex !important;
    flex-direction: column;
    list-style: none;
    margin: 0;
    padding: 8px 24px 40px;
    gap: 0;
}

.jhp-wp-menu-drawer .jhp-wp-menu-drawer-nav li {
    margin: 0;
    padding: 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.07);
}

.jhp-wp-menu-drawer .jhp-wp-menu-drawer-nav li:last-child {
    border-bottom: none;
}

.jhp-wp-menu-drawer .jhp-wp-menu-drawer-nav a {
    display: block;
    padding: 14px 0;
    color: var(--jhp-menu-mobile-text, var(--jhp-menu-text, #334155)) !important;
    font-size: var(--jhp-menu-mobile-font-size, 16px) !important;
    font-weight: var(--jhp-menu-mobile-font-weight, 500) !important;
    font-family: var(--jhp-menu-font-family, inherit) !important;
    text-decoration: none !important;
    line-height: 1.4;
    transition: color 0.15s ease;
}

.jhp-wp-menu-drawer .jhp-wp-menu-drawer-nav a:hover {
    color: var(--jhp-menu-active, #1B5E4B) !important;
}

.jhp-wp-menu-drawer .jhp-wp-menu-drawer-nav .current-menu-item > a,
.jhp-wp-menu-drawer .jhp-wp-menu-drawer-nav .current_page_item > a {
    color: var(--jhp-menu-active, #1B5E4B) !important;
    font-weight: 600 !important;
}

/* Sub-menus inside drawer */
.jhp-wp-menu-drawer .jhp-wp-menu-drawer-nav .sub-menu {
    list-style: none;
    margin: 0;
    padding: 0 0 0 16px;
}

.jhp-wp-menu-drawer .jhp-wp-menu-drawer-nav .sub-menu a {
    font-size: 15px;
    padding: 10px 0;
}

/* ── Mobile backdrop overlay ──────────────────────────── */
/* Backdrop is portaled to <body> by JS. */
.jhp-wp-menu-backdrop[data-jhp-menu-backdrop] {
    display: block !important;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 2147483646;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.jhp-wp-menu-backdrop[data-jhp-menu-backdrop].is-open {
    opacity: 1;
    pointer-events: auto;
}

/* Body scroll lock when drawer is open */
body.jhp-menu-drawer-open {
    overflow: hidden !important;
}

/* ── WP Menu: Mobile — Stack mode ─────────────────────── */
.jhp-block-wp-menu.jhp-mobile-mode-stack.is-mobile .jhp-wp-menu-list {
    display: flex;
    width: 100%;
    flex-direction: column;
}

.jhp-block-wp-menu.is-mobile[data-jhp-mobile-align="left"] .jhp-wp-menu-list {
    align-items: flex-start;
}

.jhp-block-wp-menu.is-mobile[data-jhp-mobile-align="center"] .jhp-wp-menu-list {
    align-items: center;
}

.jhp-block-wp-menu.is-mobile[data-jhp-mobile-align="right"] .jhp-wp-menu-list {
    align-items: flex-end;
}

/* Accordion — hide native disclosure triangle */
.jhp-accordion-item summary { list-style: none; }
.jhp-accordion-item summary::marker { display: none; content: ''; }
.jhp-accordion-item summary::-webkit-details-marker { display: none; }

/* Learning metrics should stay flat by default. */
.jhp-builder-content .jhp-learning-metric-card,
.jhp-builder-theme-template .jhp-learning-metric-card {
    box-shadow: none !important;
}