:root {
  /* -----------------------
     1) ASTRA ANCHORS
     ----------------------- */
  --l2l-ast-primary:    var(--ast-global-color-0);
  --l2l-ast-secondary:  var(--ast-global-color-1);
  --l2l-ast-heading:    var(--ast-global-color-2);
  --l2l-ast-text:       var(--ast-global-color-3);
  --l2l-ast-bg:         var(--ast-global-color-4);

  /* Optional Astra slots if defined */
  --l2l-ast-muted:      var(--ast-global-color-5);
  --l2l-ast-border:     var(--ast-global-color-6);

  /* -----------------------
     2) SEMANTIC CORE
     ----------------------- */
  /* Text */
  --l2l-text:           var(--l2l-ast-text);
  --l2l-text-strong:    var(--l2l-ast-heading);
  --l2l-text-muted:     color-mix(in srgb, var(--l2l-text) 70%, var(--l2l-ast-bg));
  --l2l-text-subtle:    color-mix(in srgb, var(--l2l-text) 55%, var(--l2l-ast-bg));
  --l2l-text-disabled: color-mix(in srgb, var(--l2l-text) 40%, var(--l2l-ast-bg));
  --l2l-text-inverse:   color-mix(in srgb, var(--l2l-ast-bg) 10%, white 90%);

  /* Surfaces */
  --l2l-surface-0:      var(--l2l-ast-bg); /* page / canvas */
  --l2l-surface-1:      color-mix(in srgb, var(--l2l-surface-0) 96%, var(--l2l-text) 4%);
  --l2l-surface-2:      color-mix(in srgb, var(--l2l-surface-0) 92%, var(--l2l-text) 8%);
  --l2l-surface-3:      color-mix(in srgb, var(--l2l-surface-0) 88%, var(--l2l-text) 12%);

  /* Borders */
  --l2l-border:         color-mix(in srgb, var(--l2l-text) 20%, var(--l2l-surface-0));
  --l2l-border-subtle:  color-mix(in srgb, var(--l2l-text) 12%, var(--l2l-surface-0));
  --l2l-border-strong:  color-mix(in srgb, var(--l2l-text) 28%, var(--l2l-surface-0));

  /* -----------------------
     3) BRAND COLORS
     ----------------------- */
  --l2l-primary:        var(--l2l-ast-primary);
  --l2l-secondary:      var(--l2l-ast-secondary);

  /* -----------------------
     4) STATE VARIANTS
     ----------------------- */
  /* Primary */
  --l2l-primary-hover:    color-mix(in srgb, var(--l2l-primary) 90%, var(--l2l-text));
  --l2l-primary-active:   color-mix(in srgb, var(--l2l-primary) 80%, var(--l2l-text));
  --l2l-primary-selected: color-mix(in srgb, var(--l2l-primary) 70%, var(--l2l-text));
  --l2l-primary-disabled: color-mix(in srgb, var(--l2l-primary) 40%, var(--l2l-surface-0));

  /* Secondary */
  --l2l-secondary-hover:    color-mix(in srgb, var(--l2l-secondary) 90%, var(--l2l-text));
  --l2l-secondary-active:   color-mix(in srgb, var(--l2l-secondary) 80%, var(--l2l-text));
  --l2l-secondary-selected: color-mix(in srgb, var(--l2l-secondary) 70%, var(--l2l-text));
  --l2l-secondary-disabled: color-mix(in srgb, var(--l2l-secondary) 40%, var(--l2l-surface-0));

  /* Surfaces (interactive states) */
  --l2l-surface-hover:    color-mix(in srgb, var(--l2l-surface-1) 94%, var(--l2l-text) 6%);
  --l2l-surface-active:   color-mix(in srgb, var(--l2l-surface-1) 88%, var(--l2l-text) 12%);
  --l2l-surface-selected: color-mix(in srgb, var(--l2l-surface-1) 82%, var(--l2l-text) 18%);
  --l2l-surface-disabled: color-mix(in srgb, var(--l2l-surface-1) 96%, var(--l2l-surface-0));

  /* -----------------------
     5) OVERLAYS / UTILITY
     ----------------------- */
  --l2l-overlay-backdrop: rgba(0, 0, 0, 0.45);
  --l2l-tooltip-bg:       color-mix(in srgb, var(--l2l-text) 85%, black 15%);
  --l2l-tooltip-text:     var(--l2l-text-inverse);

  /* -----------------------
     6) SHADOWS
     ----------------------- */
  --l2l-shadow-sm:        0 0 1px rgba(0, 0, 0, 0.08);
  --l2l-shadow:           0 0 15px rgba(0, 0, 0, 0.1);
  --l2l-shadow-md:        0 0 16px color-mix(in srgb, var(--l2l-border) 50%, transparent);
  --l2l-text-shadow:      0 1px 2px rgba(0, 0, 0, 0.4);

  
  /* -----------------------
     7) TUTOR ORIGINALS
     ----------------------- */
  --tutor-text-size: 16px;
	--tutor-body-color: var(--l2l-text);
  --tutor-color-white: #fff;
  --tutor-color-success: #24a148;
  --tutor-color-success-rgb: 36, 161, 72;
  --tutor-color-warning: #ed9700;
  --tutor-color-warning-rgb: 237, 151, 0;
  --tutor-color-danger: #f44337;
  --tutor-color-danger-rgb: 244, 67, 55;
  --tutor-color-secondary: var(--l2l-text-muted);
  --tutor-color-subdued: var(--l2l-text-subtle);
  --tutor-color-hints: var(--l2l-text-subtle);
  --tutor-color-muted: var(--l2l-text-subtle);
  --tutor-color-gray: var(--l2l-text-inverse);
  --tutor-color-gray-10: var(--l2l-text-inverse);
}

/* sidebar */
/* Make Astra header sticky */
#masthead,
.site-header {
  position: sticky;
  top: 0;
  z-index: 9999;
}

/* Mobile breakpoint */
@media (min-width: 767px) {
	.ast-container {
/* 		margin: 0px; */
		margin-left: auto;
		margin-right: auto;
		margin-top: 0;
		margin-bottom: 0;
		padding: 0px;
	}
}

/* Astra sidebar container */
.ast-sticky-sidebar #secondary .sidebar-main {
  max-height: none !important;
  height: auto !important;
  overflow-y: visible !important;
  top: 100px !important;
}


@media (min-width: 922px) {
  body.ast-left-sidebar #secondary,
  body.ast-right-sidebar #secondary {
    background-color: var(--ast-global-color-4) !important;
    border-right: 1px solid var(--ast-global-color-2) !important;

    margin: 0 !important;
    z-index: 10 !important;

    padding: 20px !important;
    padding-left: 40px !important;

	  min-width: 0;
	  flex: 0 0 auto;
  }
}

@media (max-width: 921px) {
  /* Hide the sidebar column */
  #secondary,
  .sidebar-main {
    display: none !important;
	}
}

@media (min-width: 922px) {
    .ast-container {
        max-width: none;
    }
}

.site-main {
	max-width: 1500px;
	margin-left: auto;
	margin-right: auto;
}


@media (max-width: 921px) {
    .ast-builder-menu-mobile .main-navigation .main-header-menu, .ast-builder-menu-mobile .main-navigation .main-header-menu .menu-link, .ast-builder-menu-mobile .main-navigation .main-header-menu .sub-menu {
        border-bottom: 1px solid var(--l2l-border);
    }
}

@media (min-width: 922px) {
    #primary {
		flex: 1 1 auto;
		min-width: 0;
    }
}
@media (min-width: 993px) {
    .ast-left-sidebar #primary {
        padding-left: 60px;
		padding-right: 60px;
		border-left: none;
    }
}