/* ==========================================================================
   MK Academy — Design System (Dark / Light)
   ========================================================================== */

@font-face {
    font-family: "Ravi";
    src:
        url("../Webfonts/RaviFaNum-VF.woff2") format("woff2-variations"),
        url("../Webfonts/RaviFaNum-VF.woff2") format("woff2"),
        url("../Webfonts/RaviFaNum-VF.woff") format("woff");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

html {
    --mk-font: "Ravi", Tahoma, system-ui, sans-serif;
    --mk-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --mk-duration: 0.38s;
    --mk-radius: 20px;
    --mk-radius-sm: 14px;
    --mk-radius-xs: 10px;
    --mk-container: min(1600px, calc(100% - 2.5rem));
    --mk-header-height: 72px;
    --mk-top-banner-height: 0px;
    --mk-section-title-size: 1.3125rem;
    --mk-section-subtitle-size: 0.9375rem;
    --mk-article-thumb-ratio: 3 / 2;
}

html,
body,
button,
input,
select,
textarea {
    font-family: var(--mk-font);
}

@media (max-width: 1024px) {
    html {
        --mk-container: calc(100% - 2rem);
    }
}

@media (max-width: 640px) {
    html {
        --mk-container: calc(100% - 1.25rem);
        --mk-section-title-size: 1.125rem;
        --mk-section-subtitle-size: 0.8125rem;
    }
}

/* Hello Elementor caps .site-main at 1140px — MK inner containers handle width */
body:not([class*="elementor-page-"]) .site-main {
    max-width: none !important;
    width: 100% !important;
    padding-inline: 0 !important;
    margin-inline: auto;
}

/* Shared site container — header, footer, blog, single post */
.mk-site-header__inner,
.mk-site-footer__inner,
.mk-article-stage__inner,
.mk-article-related__inner,
.mk-blog-archive__bar-inner,
.mk-blog-archive__wrap {
    box-sizing: border-box;
    width: var(--mk-container);
    max-width: 100%;
    margin-inline: auto;
}

/* Article card thumbnails — matches academy featured image template (3:2) */
.mk-mag-card__media,
.mk-article-card__media,
.mk-apost__media,
.mk-tcard--content .mk-tcard__media,
.mk-blog-picks__mini-media {
    position: relative;
    aspect-ratio: var(--mk-article-thumb-ratio, 3 / 2);
    overflow: hidden;
    background: var(--mk-surface-2);
    padding: 0;
    min-height: 0;
}

.mk-mag-card__media img,
.mk-article-card__media img,
.mk-apost__img,
.mk-tcard--content .mk-tcard__img,
.mk-blog-picks__mini-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.mk-mag-row__media {
    position: relative;
    overflow: hidden;
    background: var(--mk-surface-2);
    aspect-ratio: var(--mk-article-thumb-ratio, 3 / 2);
}

.mk-mag-row__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.mk-mag-card__placeholder,
.mk-mag-row__placeholder,
.mk-article-card__placeholder,
.mk-apost__media-ph {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Elementor boxed layout — sync with MK container */
.elementor-section.elementor-section-boxed > .elementor-container {
    max-width: var(--mk-container) !important;
    width: 100%;
}

.e-con {
    --container-max-width: var(--mk-container);
}

.elementor-section.elementor-section-boxed > .e-con {
    --container-max-width: var(--mk-container);
}

html[data-mk-theme="dark"] {
    color-scheme: dark;
    --mk-page-bg: #171414;
    --mk-page-bg-alt: #1f1b1c;
    --mk-bg: #231f20;
    --mk-bg-elevated: rgba(35, 31, 32, 0.86);
    --mk-surface: #2b2728;
    --mk-surface-2: #332f30;
    --mk-card: rgba(43, 39, 40, 0.9);
    --mk-card-hover: rgba(53, 49, 50, 0.96);
    --mk-text: #ffffff;
    --mk-text-muted: #d1d3d4;
    --mk-text-faint: #808080;
    --mk-accent: #438bff;
    --mk-accent-2: #2b6fe6;
    --mk-accent-strong: #438bff;
    --mk-accent-soft: rgba(67, 139, 255, 0.15);
    --mk-accent-glow: rgba(67, 139, 255, 0.28);
    --mk-gold: #ffb400;
    --mk-gold-soft: rgba(255, 180, 0, 0.14);
    --mk-gold-glow: rgba(255, 180, 0, 0.22);
    --mk-success: #438bff;
    --mk-border: rgba(209, 211, 212, 0.14);
    --mk-border-strong: rgba(67, 139, 255, 0.28);
    --mk-shadow: 0 24px 64px rgba(0, 0, 0, 0.46);
    --mk-shadow-soft: 0 12px 40px rgba(0, 0, 0, 0.26);
    --mk-glass: rgba(35, 31, 32, 0.72);
    --mk-overlay: linear-gradient(
        115deg,
        rgba(35, 31, 32, 0.95) 0%,
        rgba(35, 31, 32, 0.76) 42%,
        rgba(35, 31, 32, 0.32) 100%
    );
    --mk-gradient-hero: linear-gradient(
        135deg,
        rgba(67, 139, 255, 0.14),
        rgba(209, 211, 212, 0.06)
    );
    --mk-gradient-brand: linear-gradient(135deg, #438bff, #2b6fe6 58%, #9bb8ff);
    --mk-btn-text: #231f20;
    --mk-grid-line: rgba(209, 211, 212, 0.06);
    --mk-theme-toggle-bg: rgba(209, 211, 212, 0.1);
    --mk-section-more: #a1a1aa;
    --mk-section-more-hover: #d4d4d8;
    --mk-section-subtitle: rgba(255, 255, 255, 0.62);
}

html[data-mk-theme="light"] {
    color-scheme: light;
    --mk-page-bg: #ffffff;
    --mk-page-bg-alt: #ffffff;
    --mk-bg: #ffffff;
    --mk-bg-elevated: rgba(255, 255, 255, 0.88);
    --mk-surface: #ffffff;
    --mk-surface-2: #f5f6f6;
    --mk-card: rgba(255, 255, 255, 0.92);
    --mk-card-hover: #231f20;
    --mk-text: #231f20;
    --mk-text-muted: #808080;
    --mk-text-faint: #a0a0a0;
    --mk-accent: #438bff;
    --mk-accent-2: #2b6fe6;
    --mk-accent-strong: #1f57d4;
    --mk-accent-soft: rgba(67, 139, 255, 0.14);
    --mk-accent-glow: rgba(67, 139, 255, 0.24);
    --mk-gold: #ffb400;
    --mk-gold-soft: rgba(255, 180, 0, 0.12);
    --mk-gold-glow: rgba(255, 180, 0, 0.18);
    --mk-success: #1f57d4;
    --mk-border: rgba(35, 31, 32, 0.1);
    --mk-border-strong: rgba(67, 139, 255, 0.34);
    --mk-shadow: 0 22px 50px rgba(35, 31, 32, 0.1);
    --mk-shadow-soft: 0 10px 30px rgba(35, 31, 32, 0.06);
    --mk-glass: rgba(255, 255, 255, 0.78);
    --mk-overlay: linear-gradient(
        115deg,
        rgba(255, 255, 255, 0.95) 0%,
        rgba(255, 255, 255, 0.84) 42%,
        rgba(255, 255, 255, 0.48) 100%
    );
    --mk-gradient-hero: linear-gradient(
        135deg,
        rgba(67, 139, 255, 0.12),
        rgba(209, 211, 212, 0.18)
    );
    --mk-gradient-brand: linear-gradient(135deg, #438bff, #2b6fe6 58%, #9bb8ff);
    --mk-btn-text: #231f20;
    --mk-grid-line: rgba(35, 31, 32, 0.05);
    --mk-theme-toggle-bg: rgba(35, 31, 32, 0.05);
    --mk-section-more: #9ca3af;
    --mk-section-more-hover: #6b7280;
    --mk-section-subtitle: #231f20;
}

html[data-mk-theme] body {
    font-family: var(--mk-font);
    background-color: var(--mk-page-bg);
    color: var(--mk-text);
    transition:
        background-color 0.35s ease,
        color 0.35s ease;
}

html[data-mk-theme] .elementor,
html[data-mk-theme] .e-con {
    color: inherit;
}

/* Theme toggle icons */
.mk-theme-toggle {
    position: relative;
    overflow: hidden;
}

.mk-theme-toggle__icon {
    position: absolute;
    inset: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    margin: auto;
    transition:
        opacity 0.35s ease,
        transform 0.45s var(--mk-ease);
}

.mk-theme-toggle__icon--sun {
    opacity: 0;
    transform: rotate(-90deg) scale(0.5);
}
.mk-theme-toggle__icon--moon {
    opacity: 1;
    transform: rotate(0) scale(1);
}

html[data-mk-theme="light"] .mk-theme-toggle__icon--sun {
    opacity: 1;
    transform: rotate(0) scale(1);
}
html[data-mk-theme="light"] .mk-theme-toggle__icon--moon {
    opacity: 0;
    transform: rotate(90deg) scale(0.5);
}

/* Hello Elementor reset.css paints every button on hover — neutralize inside MK UI. */
:where(
	[data-mk-header],
	[data-mk-footer],
	[data-mk-single-post],
	[data-mk-blog-archive],
	.mk-single-post-shell,
	.mk-mobile-menu,
	.mk-edublog,
	.mk-courses,
	.mk-aposts,
	.mk-hero-showcase,
	.mk-achievements,
	.mk-lpath,
	.mk-video-section,
	.mk-site-header,
	.mk-site-footer,
	.mk-contact-page,
	.mk-about-page,
	.mk-articles,
	.mk-blog-archive,
	.mk-comments--social,
	.mk-back-to-top,
	.mk-course,
	.mk-checkout
) :is(button, [type="button"], [type="submit"]):not(.mk-btn):not(.mk-comments__rate-star):not(.mk-comments__submit):not(.mk-video-section__play):not(.mk-edublog__tag):not(.mk-accordion__head):not(.mk-article-reactions__fab):not(.button):not(.elementor-button) {
	width: auto;
	border: 0;
	border-radius: 0;
	background: transparent;
	background-color: transparent;
	padding: 0;
	text-align: inherit;
	text-transform: none;
	white-space: normal;
	box-shadow: none;
}

:where(
	[data-mk-header],
	[data-mk-footer],
	[data-mk-single-post],
	[data-mk-blog-archive],
	.mk-single-post-shell,
	.mk-mobile-menu,
	.mk-edublog,
	.mk-courses,
	.mk-aposts,
	.mk-hero-showcase,
	.mk-achievements,
	.mk-lpath,
	.mk-video-section,
	.mk-site-header,
	.mk-site-footer,
	.mk-contact-page,
	.mk-about-page,
	.mk-articles,
	.mk-blog-archive,
	.mk-comments--social,
	.mk-back-to-top,
	.mk-course,
	.mk-checkout
) :is(button, [type="button"], [type="submit"]):not(.mk-btn):not(.mk-comments__rate-star):not(.mk-comments__submit):not(.mk-video-section__play):not(.mk-edublog__tag):not(.mk-accordion__head):not(.mk-article-reactions__fab):not(.button):not(.elementor-button):hover,
:where(
	[data-mk-header],
	[data-mk-footer],
	[data-mk-single-post],
	[data-mk-blog-archive],
	.mk-single-post-shell,
	.mk-mobile-menu,
	.mk-edublog,
	.mk-courses,
	.mk-aposts,
	.mk-hero-showcase,
	.mk-achievements,
	.mk-lpath,
	.mk-video-section,
	.mk-site-header,
	.mk-site-footer,
	.mk-contact-page,
	.mk-about-page,
	.mk-articles,
	.mk-blog-archive,
	.mk-comments--social,
	.mk-back-to-top,
	.mk-course,
	.mk-checkout
) :is(button, [type="button"], [type="submit"]):not(.mk-btn):not(.mk-comments__rate-star):not(.mk-comments__submit):not(.mk-video-section__play):not(.mk-edublog__tag):not(.mk-accordion__head):not(.mk-article-reactions__fab):not(.button):not(.elementor-button):focus,
:where(
	[data-mk-header],
	[data-mk-footer],
	[data-mk-single-post],
	[data-mk-blog-archive],
	.mk-single-post-shell,
	.mk-mobile-menu,
	.mk-edublog,
	.mk-courses,
	.mk-aposts,
	.mk-hero-showcase,
	.mk-achievements,
	.mk-lpath,
	.mk-video-section,
	.mk-site-header,
	.mk-site-footer,
	.mk-contact-page,
	.mk-about-page,
	.mk-articles,
	.mk-blog-archive,
	.mk-comments--social,
	.mk-back-to-top,
	.mk-course,
	.mk-checkout
) :is(button, [type="button"], [type="submit"]):not(.mk-btn):not(.mk-comments__rate-star):not(.mk-comments__submit):not(.mk-video-section__play):not(.mk-edublog__tag):not(.mk-accordion__head):not(.mk-article-reactions__fab):not(.button):not(.elementor-button):focus-visible,
:where(
	[data-mk-header],
	[data-mk-footer],
	[data-mk-single-post],
	[data-mk-blog-archive],
	.mk-single-post-shell,
	.mk-mobile-menu,
	.mk-edublog,
	.mk-courses,
	.mk-aposts,
	.mk-hero-showcase,
	.mk-achievements,
	.mk-lpath,
	.mk-video-section,
	.mk-site-header,
	.mk-site-footer,
	.mk-contact-page,
	.mk-about-page,
	.mk-articles,
	.mk-blog-archive,
	.mk-comments--social,
	.mk-back-to-top,
	.mk-course,
	.mk-checkout
) :is(button, [type="button"], [type="submit"]):not(.mk-btn):not(.mk-comments__rate-star):not(.mk-comments__submit):not(.mk-video-section__play):not(.mk-edublog__tag):not(.mk-accordion__head):not(.mk-article-reactions__fab):not(.button):not(.elementor-button):active {
	background: transparent;
	background-color: transparent;
	border-color: transparent;
	box-shadow: none;
	text-decoration: none;
	color: inherit;
}

/* Shared premium primitives */
.mk-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    padding: 0.85rem 1.45rem;
    border: 0;
    border-radius: 999px;
    font-family: var(--mk-font);
    font-weight: 700;
    font-size: 0.92rem;
    text-decoration: none;
    overflow: hidden;
    cursor: pointer;
    transition:
        transform var(--mk-duration) var(--mk-ease),
        box-shadow var(--mk-duration) var(--mk-ease);
}

.mk-btn--primary {
    background: var(--mk-gradient-brand);
    color: var(--mk-btn-text);
    box-shadow:
        0 14px 36px var(--mk-accent-glow),
        inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

.mk-btn--primary::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        105deg,
        transparent 40%,
        rgba(255, 255, 255, 0.32) 50%,
        transparent 60%
    );
    transform: translateX(-120%);
    transition: transform 0.75s var(--mk-ease);
}

.mk-btn--primary:hover::before {
    transform: translateX(120%);
}
.mk-btn--primary:hover {
    transform: translateY(-2px);
}

.mk-btn--ghost {
    background: transparent;
    color: var(--mk-text);
    border: 1px solid var(--mk-border-strong);
    box-shadow: none;
}

.mk-btn--ghost:hover {
    background: var(--mk-accent-soft);
    border-color: var(--mk-border-strong);
}

.mk-btn--accent {
    background: var(--mk-gradient-brand);
    color: var(--mk-btn-text);
    box-shadow:
        0 12px 32px var(--mk-gold-glow),
        inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.mk-btn--accent:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 38px var(--mk-gold-glow);
    color: var(--mk-btn-text);
}

html[data-mk-theme="light"] .mk-btn--accent {
    color: var(--mk-btn-text);
}

.mk-icon-btn,
.mk-theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--mk-border);
    border-radius: 14px;
    background: var(--mk-theme-toggle-bg);
    color: var(--mk-text);
    cursor: pointer;
    transition:
        border-color var(--mk-duration) var(--mk-ease),
        background var(--mk-duration) var(--mk-ease),
        transform var(--mk-duration) var(--mk-ease),
        color var(--mk-duration) var(--mk-ease);
}

.mk-icon-btn:hover,
.mk-theme-toggle:hover {
    border-color: var(--mk-border-strong);
    background: var(--mk-accent-soft);
    color: var(--mk-accent);
    transform: translateY(-1px);
}

.mk-btn--lg {
    padding: 1rem 1.65rem;
    font-size: 1rem;
}

.mk-btn__icon {
    flex-shrink: 0;
}
[dir="rtl"] .mk-btn__icon {
    transform: scaleX(-1);
}

.mk-glass {
    background: var(--mk-glass);
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    border: 1px solid var(--mk-border);
}

.mk-reveal {
    opacity: 0;
    transform: translateY(28px);
    transition:
        opacity 0.7s var(--mk-ease),
        transform 0.7s var(--mk-ease);
}

.mk-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.mk-section-head {
    margin-bottom: 2.25rem;
    text-align: center;
}
.mk-section-head--row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.25rem;
    text-align: right;
}

.mk-section-head__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin-bottom: 0.7rem;
    padding: 0.38rem 0.9rem;
    border-radius: 999px;
    background: var(--mk-gold-soft);
    border: 1px solid rgba(251, 191, 36, 0.18);
    color: var(--mk-gold);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.02em;
}

.mk-section-head__title {
    margin: 0 0 0.7rem;
    font-size: var(--mk-section-title-size);
    font-weight: 700;
    color: var(--mk-text);
    line-height: 1.35;
    letter-spacing: -0.02em;
}

.mk-section-head__desc {
    margin: 0 auto;
    max-width: 60ch;
    color: var(--mk-section-subtitle);
    line-height: 1.75;
    font-size: var(--mk-section-subtitle-size);
    font-weight: 400;
}

.mk-link-arrow {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--mk-section-more, #9ca3af);
    text-decoration: none;
    font-weight: 800;
    white-space: nowrap;
    transition:
        color var(--mk-duration) var(--mk-ease),
        gap var(--mk-duration) var(--mk-ease);
}

.mk-link-arrow:hover,
.mk-link-arrow:focus-visible {
    color: var(--mk-section-more-hover, #6b7280);
    gap: 0.55rem;
}

.mk-view-all-icon {
    display: block;
    flex-shrink: 0;
}

/* Custom user avatars (no Gravatar) */
.mk-user-avatar {
    display: inline-block;
    vertical-align: middle;
    object-fit: cover;
    border-radius: 50%;
}
.mk-user-avatar--glyph {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--mk-surface-2, #f3f4f6);
    color: var(--mk-text-muted, #6b7280);
    font-weight: 700;
    line-height: 1;
}

/* WooCommerce single products — non-course fallback */
.single-product .site-main > .product {
    box-sizing: border-box;
    width: var(--mk-container);
    max-width: 100%;
    margin: 2rem auto 4rem;
    padding: 1.25rem;
    border: 1px solid var(--mk-border);
    border-radius: calc(var(--mk-radius) + 4px);
    background: var(--mk-card);
    color: var(--mk-text);
    box-shadow: var(--mk-shadow-soft);
}

.single-product .product .summary.entry-summary {
    color: var(--mk-text);
}

.single-product .product .product_title {
    margin: 0 0 0.75rem;
    color: var(--mk-text);
    font-family: var(--mk-font);
    font-weight: 900;
    letter-spacing: -0.02em;
}

.single-product .product .price,
.single-product .product .price .amount {
    color: var(--mk-accent);
    font-weight: 900;
}

.single-product .product del,
.single-product .product .woocommerce-product-details__short-description,
.single-product .product .woocommerce-product-details__short-description p,
.single-product .product .product_meta {
    color: var(--mk-text-muted);
}

.single-product .product .woocommerce-product-gallery,
.single-product .product .woocommerce-tabs,
.single-product .product .related.products,
.single-product .product .upsells.products {
    color: var(--mk-text);
}

.single-product .product .woocommerce-product-gallery__wrapper,
.single-product .product .woocommerce-tabs .panel,
.single-product .product .woocommerce-Tabs-panel {
    border-color: var(--mk-border);
    background: var(--mk-surface);
}

.single-product .product .woocommerce-tabs ul.tabs {
    border-color: var(--mk-border);
}

.single-product .product .woocommerce-tabs ul.tabs li {
    border-color: var(--mk-border);
    background: var(--mk-surface-2);
}

.single-product .product .woocommerce-tabs ul.tabs li.active {
    background: var(--mk-card);
    border-color: var(--mk-border-strong);
}

.single-product .product .woocommerce-tabs ul.tabs li a {
    color: var(--mk-text-muted);
    font-weight: 800;
}

.single-product .product .woocommerce-tabs ul.tabs li.active a,
.single-product .product .woocommerce-tabs ul.tabs li a:hover {
    color: var(--mk-accent-strong);
}

.single-product .product button.button,
.single-product .product a.button,
.single-product .product .single_add_to_cart_button {
    border: 0;
    border-radius: var(--mk-radius-sm);
    background: var(--mk-gradient-brand);
    color: var(--mk-btn-text);
    font-family: var(--mk-font);
    font-weight: 900;
    box-shadow: 0 12px 28px var(--mk-accent-glow);
    transition:
        transform 0.25s var(--mk-ease),
        box-shadow 0.25s var(--mk-ease);
}

.single-product .product button.button:hover,
.single-product .product a.button:hover,
.single-product .product .single_add_to_cart_button:hover {
    background: var(--mk-gradient-brand);
    color: var(--mk-btn-text);
    transform: translateY(-1px);
    box-shadow: 0 16px 34px var(--mk-accent-glow);
}

.single-product .product input.qty,
.single-product .product input,
.single-product .product select,
.single-product .product textarea {
    border: 1px solid var(--mk-border);
    border-radius: var(--mk-radius-sm);
    background: var(--mk-surface);
    color: var(--mk-text);
    font-family: var(--mk-font);
}

.single-product .product input:focus,
.single-product .product select:focus,
.single-product .product textarea:focus {
    outline: none;
    border-color: var(--mk-accent);
    box-shadow: 0 0 0 3px var(--mk-accent-soft);
}

.single-product .woocommerce-message,
.single-product .woocommerce-info,
.single-product .woocommerce-error {
    border-color: var(--mk-border-strong);
    background: var(--mk-surface);
    color: var(--mk-text);
}

.single-product .woocommerce-message::before,
.single-product .woocommerce-info::before {
    color: var(--mk-accent);
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
    .mk-reveal {
        opacity: 1;
        transform: none;
    }
}