/*
 * Beacon custom CSS
 * File: wp-content/themes/educrat-child/css/beacon-custom.css
 * Loaded on every page AFTER the Educrat theme styles (see functions.php snippet).
 * Edit in: Appearance → Theme File Editor → Educrat Child → css/beacon-custom.css
 *
 * Sections:
 *   1. Courses pagination ( ‹ Back  1  2  3  Next › )
 *   1b. Diagonal arrow on buttons (class "beacon-arrow-diag")
 *   2. Your own custom CSS (add below)
 */

/* ============================== 1. Courses pagination ============================== */
:is(body.post-type-archive-lp_course,body.tax-course_category,body.tax-course_tag,body.learnpress-page,body.page-template-courses) :is(nav,div):has(> .page-numbers:not(ul)),
:is(body.post-type-archive-lp_course,body.tax-course_category,body.tax-course_tag,body.learnpress-page,body.page-template-courses) ul.page-numbers{
	display:flex!important;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;
	width:auto!important;max-width:100%;height:auto!important;min-height:0!important;line-height:normal!important;border-radius:0!important;
	margin:32px 0 8px!important;padding:0!important;border:0!important;background:none!important;box-shadow:none!important;list-style:none!important;text-align:center
}
:is(body.post-type-archive-lp_course,body.tax-course_category,body.tax-course_tag,body.learnpress-page,body.page-template-courses) ul.page-numbers li{
	display:block!important;float:none!important;width:auto!important;height:auto!important;line-height:normal!important;margin:0!important;padding:0!important;border:0!important;background:none!important;list-style:none!important
}
:is(body.post-type-archive-lp_course,body.tax-course_category,body.tax-course_tag,body.learnpress-page,body.page-template-courses) ul.page-numbers li::before{display:none!important}

/* every box */
:is(body.post-type-archive-lp_course,body.tax-course_category,body.tax-course_tag,body.learnpress-page,body.page-template-courses) .page-numbers:not(ul){
	display:inline-flex!important;align-items:center;justify-content:center;gap:6px;float:none!important;box-sizing:border-box!important;
	width:auto!important;min-width:34px!important;height:34px!important;margin:0!important;padding:0 11px!important;
	border:1px solid #E5E7EB!important;border-radius:6px!important;background:#fff!important;
	box-shadow:0 1px 2px rgba(16,24,40,.04)!important;
	color:#233A46!important;font-family:Inter,sans-serif!important;font-size:13px!important;font-weight:500!important;
	line-height:1!important;text-decoration:none!important;transition:border-color .2s,color .2s,background-color .2s
}
:is(body.post-type-archive-lp_course,body.tax-course_category,body.tax-course_tag,body.learnpress-page,body.page-template-courses) a.page-numbers:hover{
	border-color:#018E95!important;color:#018E95!important;background:#fff!important
}
/* current page */
:is(body.post-type-archive-lp_course,body.tax-course_category,body.tax-course_tag,body.learnpress-page,body.page-template-courses) .page-numbers.current{
	border-color:#018E95!important;background:#018E95!important;color:#fff!important;font-weight:700!important
}
/* "..." */
:is(body.post-type-archive-lp_course,body.tax-course_category,body.tax-course_tag,body.learnpress-page,body.page-template-courses) .page-numbers.dots{
	min-width:20px!important;padding:0 2px!important;border-color:transparent!important;background:none!important;box-shadow:none!important
}
/* Back / Next */
:is(body.post-type-archive-lp_course,body.tax-course_category,body.tax-course_tag,body.learnpress-page,body.page-template-courses) .page-numbers:is(.prev,.next){padding:0 14px!important}
:is(body.post-type-archive-lp_course,body.tax-course_category,body.tax-course_tag,body.learnpress-page,body.page-template-courses) .page-numbers:is(.prev,.next) :is(i,svg){font-size:12px!important;width:auto;height:auto;line-height:1!important;color:inherit!important}
:is(body.post-type-archive-lp_course,body.tax-course_category,body.tax-course_tag,body.learnpress-page,body.page-template-courses) .page-numbers.prev:not(:has(span))::after{content:"Back";display:inline!important;position:static!important;font:inherit;color:inherit;background:none;border:0;width:auto;height:auto;transform:none}
:is(body.post-type-archive-lp_course,body.tax-course_category,body.tax-course_tag,body.learnpress-page,body.page-template-courses) .page-numbers.next:not(:has(span))::before{content:"Next";display:inline!important;position:static!important;font:inherit;color:inherit;background:none;border:0;width:auto;height:auto;transform:none}

@media (max-width:480px){
	:is(body.post-type-archive-lp_course,body.tax-course_category,body.tax-course_tag,body.learnpress-page,body.page-template-courses) ul.page-numbers,
	:is(body.post-type-archive-lp_course,body.tax-course_category,body.tax-course_tag,body.learnpress-page,body.page-template-courses) :is(nav,div):has(> .page-numbers:not(ul)){gap:4px}
	:is(body.post-type-archive-lp_course,body.tax-course_category,body.tax-course_tag,body.learnpress-page,body.page-template-courses) .page-numbers:not(ul){min-width:30px!important;height:32px!important;padding:0 7px!important;font-size:12.5px!important}
	:is(body.post-type-archive-lp_course,body.tax-course_category,body.tax-course_tag,body.learnpress-page,body.page-template-courses) .page-numbers:is(.prev,.next){padding:0 9px!important}
	:is(body.post-type-archive-lp_course,body.tax-course_category,body.tax-course_tag,body.learnpress-page,body.page-template-courses) .page-numbers.prev:not(:has(span))::after,
	:is(body.post-type-archive-lp_course,body.tax-course_category,body.tax-course_tag,body.learnpress-page,body.page-template-courses) .page-numbers.next:not(:has(span))::before,
	:is(body.post-type-archive-lp_course,body.tax-course_category,body.tax-course_tag,body.learnpress-page,body.page-template-courses) .page-numbers:is(.prev,.next) span{display:none!important}
}

/* ============================== 1b. Diagonal arrow on buttons ==============================
   Add the CSS class "beacon-arrow-diag" to any Elementor Button (Advanced → CSS Classes). */
.beacon-arrow-diag .elementor-button-icon :is(i,svg){transform:rotate(-45deg);transition:transform .2s}
.beacon-arrow-diag .elementor-button:hover .elementor-button-icon :is(i,svg){transform:rotate(-45deg) translateX(3px)}

/* ============================== 2. Your own custom CSS ============================== */
/* Add new rules below this line. */
/* Header (and its cart / menu / search drop-downs) always above the page content */
#apus-header,
.apus-header,
header.site-header,
#masthead {
	z-index: 1000 !important;
}
#apus-header :is(.dropdown-menu, .sub-menu, .mini-cart, .widget_shopping_cart, .cart-dropdown, [class*="dropdown"]),
.apus-header :is(.dropdown-menu, .sub-menu, .mini-cart, .widget_shopping_cart, .cart-dropdown, [class*="dropdown"]) {
	z-index: 1001 !important;
}

/* Header row was cutting off the cart / search drop-downs */
#apus-header .elementor-section,
#apus-header .elementor-container,
#apus-header .elementor-column,
#apus-header .elementor-widget-wrap {
	overflow: visible !important;
}