/* SkillSip accessibility/readability scale.
   Loaded last so it can normalize the ported SkillGro theme without editing
   vendor CSS. Keep the type system intentionally small:
   caption, body, h3, h2, h1, display/icon. */
:root {
  --sip-font-caption: 0.875rem; /* 14px */
  --sip-font-body: 1rem; /* 16px */
  --sip-font-h3-mobile: 1.1rem; /* 17.6px */
  --sip-font-h3-desktop: 1.1rem; /* 17.6px */
  --sip-font-h2-mobile: 1rem; /* 16px */
  --sip-font-h2-desktop: 1rem; /* 16px */
  --sip-font-h1-mobile: 1.5rem; /* 24px */
  --sip-font-h1-desktop: 2rem; /* 32px */
  --sip-line-body: 1.5;
  --sip-line-heading: 1.1;
  --sip-line-caption: 1.3;
  --tg-body-font-size: var(--sip-font-body);
  --tg-body-line-height: var(--sip-line-body);
  --tg-heading-line-height: var(--sip-line-heading);
}

html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  font-size: var(--sip-font-body) !important;
  line-height: var(--sip-line-body) !important;
}

p,
li,
label,
td,
th,
input,
select,
textarea,
.form-control,
.form-select {
  font-size: max(var(--sip-font-body), 1em) !important;
  line-height: var(--sip-line-body) !important;
}

.sub-title,
small,
.small,
.caption,
.blog__post-meta,
.courses__item-meta,
.event__meta,
.item-meta,
.avatar-name,
.sip-inline-meta,
.sip-inline-meta li,
.sip-certificate-sheet__meta,
.sip-course-skeleton-meta,
.sip-my-course-card__meta-row,
.sip-order-course-meta,
.sip-payment-card__meta,
.sip-progress-note,
.sip-attachment-note,
.latest-course-card__meta,
.latest-course-card__status,
.sip-cookie-modal__helper,
.sip-count-badge {
  font-size: 0.8125rem !important;
  line-height: var(--sip-line-caption) !important;
}

.navigation > li > a,
.sip-header .navigation > li > a,
.sip-mobile-menu__links .navigation li > a,
.account-sidebar__item,
.sip-profile-menu__item {
  font-size: 0.9375rem !important;
  line-height: 1.35 !important;
}

.btn,
.sip-btn,
.header-logout,
.submit-btn,
.cart-btn,
.load-more-btn,
.link-btn,
.sip-auth-btn,
.sip-cookie__btn,
.sip-survey-btn,
.sip-pay-button,
.sip-save-profile-btn,
.sip-not-enrolled-btn,
.sip-mobile-menu__logout,
.profile-dashboard__edit {
  min-height: 44px !important;
  font-size: 0.9375rem !important;
  line-height: 1.35 !important;
}

button,
[role="button"],
.sip-icon-btn,
.sip-menu-btn,
.sip-mobile-search__back,
.scroll__top,
.courses-button-next,
.courses-button-prev,
.testimonial-button-next,
.testimonial-button-prev,
.wishlist-btn,
.close-btn {
  min-width: 44px !important;
  min-height: 44px !important;
}

.sip-icon-btn,
.sip-menu-btn,
.scroll__top,
.courses-button-next,
.courses-button-prev,
.testimonial-button-next,
.testimonial-button-prev,
.sip-mobile-search__back {
  width: 44px !important;
  height: 44px !important;
}

.btn i,
.sip-btn i,
.profile-dashboard__edit i,
.navigation i,
.sip-icon-btn i,
.sip-menu-btn i,
.scroll__top i,
.account-sidebar__item i,
.sip-profile-menu__item i,
.sip-mobile-menu__links i,
.courses-button-next i,
.courses-button-prev i,
.testimonial-button-next i,
.testimonial-button-prev i {
  font-size: max(0.9375rem, 1em) !important;
  line-height: 1 !important;
}

.sip-logo img,
.nav-logo img {
  width: clamp(7.5rem, 8.8vw, 8.875rem) !important;
  max-height: 3rem !important;
}

img,
svg,
video,
canvas {
  max-width: 100%;
}

img,
video {
  height: auto;
}

.courses__item-thumb img,
.courses__item-thumb-two img,
.blog__post-thumb img,
.event__item-thumb img,
.instructor__thumb img,
.instructor__details-thumb img,
.shop-thumb img,
.rc-post-thumb img,
.latest-course-card__thumb img,
.sip-my-course-card__thumb img,
.sip-order-course-card__thumb img,
.sip-payment-card__thumb img,
.sip-certificate-course-card__thumb img,
.sip-wishlist-thumb img,
.skillgro-avatar img,
.comments-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sip-logo img,
.sip-footer__logo img,
.nav-logo img,
.sip-mobile-menu__logo img,
.loader-icon img,
.sip-error-state__image,
.sip-certificate-preview__image,
.sip-lesson-side-panel__image,
img.injectable,
img[src$=".svg"] {
  object-fit: contain;
}

@media (max-width: 575.98px) {
  h1,
  .h1,
  .main-title,
  .sip-page-title,
  .breadcrumb__content .title,
  .banner__content .title,
  .sip-error-state h1,
  .sip-not-enrolled-card h1 {
    font-size: clamp(1.75rem, 7vw, var(--sip-font-h1-mobile)) !important;
  }

  h2,
  .h2,
  .section__title .title,
  .dashboard__content-title,
  .sip-section-heading,
  .sip-curriculum__heading h2,
  .sip-empty-state h2 {
    font-size: clamp(1.375rem, 5.8vw, var(--sip-font-h2-mobile)) !important;
  }

  h3,
  .h3,
  .inner-title,
  .tag-title,
  .latest-course-card h3,
  .courses__item-content .title,
  .blog__post-content .title,
  .sip-payment-card__title,
  .sip-package-title,
  .sip-qr-title,
  .sip-survey-title {
    font-size: clamp(1.125rem, 5vw, var(--sip-font-h3-mobile)) !important;
  }

  .container,
  .custom-container {
    padding-right: max(16px, env(safe-area-inset-right)) !important;
    padding-left: max(16px, env(safe-area-inset-left)) !important;
  }

  .sip-header__bar,
  .sip-nav {
    min-height: 58px !important;
  }

  .sip-header__container {
    padding-right: 12px !important;
    padding-left: 12px !important;
  }

  .sip-header .sip-logo img {
    width: 76px !important;
    max-height: 28px !important;
  }

  .sip-header .sip-header-actions {
    gap: 4px !important;
  }

  .sip-header .sip-auth-btn {
    min-width: 76px !important;
    min-height: 40px !important;
    padding-right: 8px !important;
    padding-left: 8px !important;
    border-radius: 11px !important;
    font-size: 0.8125rem !important;
    line-height: 1.25 !important;
  }

  .sip-header .sip-icon-btn,
  .sip-header .sip-menu-btn {
    width: 40px !important;
    min-width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    border-radius: 11px !important;
  }

  .sip-header .sip-icon-btn i,
  .sip-header .sip-menu-btn i {
    font-size: 0.9375rem !important;
  }

  .sip-header .sip-auth-btn.sip-btn--primary {
    display: none !important;
  }
}