/**
 * EdTech design tokens — mirror these in Elementor → Site Settings → Design System.
 * Loaded after the main bundle; use var(--edtech-*) in custom CSS where helpful.
 */
:root {
  --edtech-primary:        #1E40AF;
  --edtech-primary-dark:   #1E3A8A;
  --edtech-primary-soft:   #F3F6FC;
  --edtech-bg-primary: #ffffff;
  --edtech-bg-secondary: #f5f5f5;
  --edtech-accent-primary: #0B1220;
  --edtech-accent-secondary: #0F1A2E;
  --edtech-accent-gold: #D4AF37;
  --edtech-text-primary: #1a1a1a;
  --edtech-text-secondary: #6b6b6b;
  --edtech-radius-md: 12px;
  --edtech-radius-lg: 16px;
  --edtech-shadow-soft: 0 12px 40px rgba(31, 41, 55, 0.08);
  /* Typography — fonts enqueued with Udemy homepage bundle */
  --edtech-font-heading: "Poppins", system-ui, -apple-system, sans-serif;
  --edtech-font-body: "Inter", system-ui, -apple-system, sans-serif;
}

.edtech-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 24px;
  border: 0;
  border-radius: var(--edtech-radius-md);
  background: var(--edtech-accent-primary);
  color: #fff;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}

.edtech-btn-primary:hover {
  background: var(--edtech-accent-secondary);
  color: #fff;
}

.edtech-btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 24px;
  border-radius: var(--edtech-radius-md);
  background: transparent;
  color: var(--edtech-accent-primary);
  border: 1px solid var(--edtech-accent-primary);
  font-weight: 700;
  cursor: pointer;
}

/* Main content shell (Elementor / Woo / Tutor) */
.edtech-main,
.edtech-woocommerce-main {
  width: 100%;
  max-width: 100%;
  padding: 24px 0 48px;
  background: var(--edtech-bg-primary);
  color: var(--edtech-text-primary);
}

.woocommerce-active .edtech-woocommerce-main .woocommerce-breadcrumb,
.woocommerce-active .edtech-woocommerce-main .woocommerce-result-count {
  color: var(--edtech-text-secondary);
}

.woocommerce-active .edtech-woocommerce-main .woocommerce ul.products li.product {
  border-radius: var(--edtech-radius-md);
  box-shadow: var(--edtech-shadow-soft);
  border: 1px solid #e5e5e5;
}