/* ==========================================================================
   Encore Gradient 1.5.9-gradient

   Selector policy: work WITH Encore's cascade. Element selectors carry no
   colour so .background-dark / .background-light keep control.

   Every rule below was verified against the theme's actual markup. Encore
   uses two button base classes (.btn and .form-btn), four search widgets,
   and its own panel class names. All are covered here.
   ========================================================================== */

:root {
  --mg-stage:            #f7fafc;
  --mg-panel:            #ffffff;
  --mg-hairline:         #e4eaf0;
  --mg-ink:              #102033;
  --mg-body:             #3e4c5b;
  --mg-muted:            #5f6d80;
  --mg-placeholder:      #657386;
  --mg-primary:          #1f6ceb;
  --mg-primary-hover:    #1557c7;
  --mg-tint:             #f1f6fb;

  --mg-radius-card:      12px;
  --mg-radius-btn:       8px;
  --mg-radius-pill:      9999px;
  --mg-radius-input:     6px;

  --mg-gradient:         linear-gradient(135deg, #1f6ceb 0%, #1a63de 55%, #1557c7 100%);
  --mg-gradient-hover:   linear-gradient(135deg, #1557c7 0%, #114aa8 55%, #0e3f92 100%);

  --mg-elev-1:           0 2px 8px rgba(0, 0, 0, 0.08);
  --mg-elev-2:           0 4px 16px rgba(0, 0, 0, 0.12);

  --mg-font:             'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mg-ease:             200ms ease;
}

/* --------------------------------------------------------------------------
   1. Stage and typography
   -------------------------------------------------------------------------- */

body#encore-theme {
  background-color: var(--mg-stage);
  font-family: var(--mg-font);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--mg-font);
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 1.2;
  text-wrap: pretty;
}

p, li, span, label, input, textarea, select, button { font-family: var(--mg-font); }

.product__title, .products__title, figcaption { text-wrap: pretty; }

a { transition: color var(--mg-ease), text-decoration-color var(--mg-ease); }
a:hover { text-decoration: underline; }

/* --------------------------------------------------------------------------
   2. Header
   -------------------------------------------------------------------------- */

.header__content--desktop,
.header__content--mobile {
  background-color: var(--mg-panel);
  border-bottom: 1px solid var(--mg-hairline);
}
.header__wrap .header__container { min-height: 64px; }

/* --------------------------------------------------------------------------
   3. Library
   Plain heading, no panel. The Start Course block is switched off in the
   section settings, so the page is just the heading and the course cards.
   -------------------------------------------------------------------------- */

.section.products { background-color: transparent; }

.products__header { margin-bottom: 28px; }

.products__title {
  margin: 0;
  font-size: 30px;
  font-weight: 500;
  letter-spacing: -0.02em;
}

.product {
  background: var(--mg-panel);
  border: 1px solid var(--mg-hairline);
  border-radius: var(--mg-radius-card);
  box-shadow: var(--mg-elev-1);
  overflow: hidden;
  transition: box-shadow var(--mg-ease), border-color var(--mg-ease);
}
.product:hover {
  box-shadow: var(--mg-elev-2);
  border-color: rgba(31, 108, 235, 0.35);
}

.product__title {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.3;
  margin-bottom: 10px;
}
.product__body,
.product__info,
.product__content {
  font-size: 15px;
  font-weight: 400;
  line-height: 1.6;
}

.progress, .progress__outer {
  background-color: var(--mg-tint);
  border-radius: var(--mg-radius-pill);
  overflow: hidden;
}
.progress__inner {
  background-color: var(--mg-primary);
  border-radius: var(--mg-radius-pill);
}

/* Start Course card.
   The card sits on the OUTER wrapper, which already carries the 30px padding
   and 12px radius injected by the section settings, so the card and the
   padding are one box instead of nested. Encore's own flex row on
   .resume-course__content is left untouched, which keeps the thumbnail
   beside the text. Specificity is .products-scoped to beat the snippet's
   inline <style> without resorting to !important on layout properties. */
.products .resume-course {
  background: var(--mg-panel);
  border: 1px solid var(--mg-hairline);
  border-radius: var(--mg-radius-card);
  box-shadow: var(--mg-elev-1);
  overflow: hidden;
  transition: box-shadow var(--mg-ease), border-color var(--mg-ease);
}
.products .resume-course:hover {
  box-shadow: var(--mg-elev-2);
  border-color: rgba(31, 108, 235, 0.4);
}

/* Whole card is the click target, without changing the link's display mode. */
.products .resume-course__content { position: static; }
.products .resume-course__content::after {
  content: "";
  position: absolute;
  inset: 0;
}
.products .resume-course__content:hover { text-decoration: none; }
.products .resume-course__content:focus-visible {
  outline: 2px solid var(--mg-primary);
  outline-offset: 2px;
}

.resume-course__status {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.products .resume-course__status { color: var(--mg-muted) !important; }
.resume-course__title {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
}
.resume-course__image img { border-radius: 8px; }

/* --------------------------------------------------------------------------
   4. Buttons
   Encore ships TWO base classes. .btn covers section CTAs and search submits;
   .form-btn covers login, opt-in forms and newsletter forms. Both are styled.
   Padding is deliberately omitted so Kajabi's size setting keeps working.
   -------------------------------------------------------------------------- */

.btn, .form-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  border: 1px solid transparent;
  border-radius: var(--mg-radius-btn);
  background: var(--mg-gradient);
  background-color: var(--mg-primary);
  color: #ffffff;
  font-family: var(--mg-font);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  box-shadow: var(--mg-elev-1);
  transition: background-color var(--mg-ease), box-shadow var(--mg-ease), transform 100ms ease;
}
.btn:hover, .form-btn:hover {
  background: var(--mg-gradient-hover);
  background-color: var(--mg-primary-hover);
  box-shadow: var(--mg-elev-2);
  color: #ffffff;
  text-decoration: none;
}
.btn:active, .form-btn:active {
  transform: scale(0.97);
  box-shadow: var(--mg-elev-1);
}

.products .btn { font-size: 17px; }

.btn--outline {
  background: transparent;
  background-image: none;
  border: 1px solid var(--mg-primary);
  color: var(--mg-primary);
  box-shadow: none;
}
.btn--outline:hover {
  background: var(--mg-tint);
  background-image: none;
  color: var(--mg-primary-hover);
}

/* --------------------------------------------------------------------------
   5. Form controls
   -------------------------------------------------------------------------- */

.form-control,
input[type="text"], input[type="email"],
input[type="password"], input[type="search"],
textarea, select {
  border: 1px solid var(--mg-hairline);
  border-radius: var(--mg-radius-input);
  font-family: var(--mg-font);
  font-weight: 400;
  min-height: 44px;
  transition: border-color var(--mg-ease), box-shadow var(--mg-ease);
}
.form-control::placeholder,
input::placeholder, textarea::placeholder { color: var(--mg-placeholder); }

.form-control:focus,
input:focus, textarea:focus, select:focus {
  border-color: var(--mg-primary);
  box-shadow: 0 0 0 3px rgba(31, 108, 235, 0.18);
  outline: none;
}

/* --------------------------------------------------------------------------
   6. Search and filter widgets — ALL FOUR instances in the theme
   Member Directory and Announcements pair a dropdown with a search field.
   Newsletter and the blog sidebar use a single field.
   -------------------------------------------------------------------------- */

.member-search,
.announcement-search {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.filter {
  width: auto;
  min-width: 190px;
  margin-bottom: 0;
}
.filter__field {
  min-height: 44px;
  padding: 10px 40px 10px 14px;
  border-radius: var(--mg-radius-input);
  border-color: var(--mg-hairline);
}
.filter__icon {
  top: 50%;
  right: 14px;
  padding: 0;
  line-height: 1;
  transform: translateY(-50%);
  pointer-events: none;
}

.search {
  width: auto;
  flex: 1 1 220px;
  min-width: 200px;
  margin-bottom: 0;
}
.search__control {
  min-height: 44px;
  padding: 10px 14px;
  border-radius: var(--mg-radius-input);
}

.sidebar-search__form {
  display: flex;
  align-items: center;
  gap: 10px;
}
.sidebar-search__icon { margin-right: 0; line-height: 1; }
.sidebar-search__input,
.newsletter-search__input,
.sidebar-categories__select {
  min-height: 44px;
  padding: 10px 14px;
  border-radius: var(--mg-radius-input);
}

@media (max-width: 767px) {
  .member-search,
  .announcement-search { flex-direction: column; align-items: stretch; }
  .filter, .search { width: 100%; min-width: 0; }
}

/* --------------------------------------------------------------------------
   7. Panels — using Encore's real class names
   -------------------------------------------------------------------------- */

.announcement,
.blog-listing,
.member,
.auth__content,
.sidebar {
  background: var(--mg-panel);
  border: 1px solid var(--mg-hairline);
  border-radius: var(--mg-radius-card);
  box-shadow: var(--mg-elev-1);
}

.auth__content { padding: 32px; }
.auth__title { margin-bottom: 20px; }
.auth__label { font-weight: 500; }
.auth__field { margin-bottom: 4px; }
.sidebar { padding: 24px; }
.member { padding: 20px; }
.member__name { font-size: 16px; font-weight: 500; }
.member__location { font-size: 14px; }

/* --------------------------------------------------------------------------
   8. Accessibility
   -------------------------------------------------------------------------- */

a:focus-visible, .btn:focus-visible, .form-btn:focus-visible,
button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--mg-primary);
  outline-offset: 2px;
}
:focus:not(:focus-visible) { outline: none; }

@media (prefers-reduced-motion: reduce) {
  body#encore-theme *,
  body#encore-theme *::before,
  body#encore-theme *::after {
    transition-duration: 0ms !important;
    animation-duration: 0ms !important;
    scroll-behavior: auto !important;
  }
  .btn:active, .form-btn:active { transform: none; }
}

/* --------------------------------------------------------------------------
   9. Responsive
   -------------------------------------------------------------------------- */

@media screen and (max-width: 767px) {
  .btn, .form-btn, .products .btn { width: 100%; }
  .products__title { font-size: 24px; }
  .auth__content { padding: 24px; }
  .products .resume-course { margin-top: 20px; }
}

@media screen and (max-width: 360px) {
  .products .container { padding-left: 16px; padding-right: 16px; }
}