/* ============================================================
   HACKSPRINT — reskin for WordPress-rendered routes
   Login, register, password reset, dashboard, courses, posts.
   The native templates and plugins stay in charge of behaviour;
   this file only changes how they look.
   ============================================================ */

body.hs-skin {
  background:
    radial-gradient(1100px 600px at 80% -10%, rgba(79, 140, 255, .14), transparent 60%),
    radial-gradient(900px 500px at -10% 10%, rgba(34, 211, 238, .07), transparent 55%),
    #060a12 !important;
  color: #c2cfe3;
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  scroll-behavior: auto;
}

html:has(body.hs-skin) {
  scroll-behavior: auto;
  background: #060a12;
}

/* hide the old Phlox/Elementor chrome — the new shell replaces it */
body.hs-skin #site-elementor-header,
body.hs-skin footer.aux-elementor-footer,
body.hs-skin #offmenu,
body.hs-skin #offcart,
body.hs-skin #fs-menu-search,
body.hs-skin #fs-search,
body.hs-skin .aux-offcanvas-menu,
body.hs-skin .aux-fs-popup,
body.hs-skin .aux-sidebar,
body.hs-skin .aux-sidebar-primary,
body.hs-skin .widget-area {
  display: none !important;
}

body.hs-skin #inner-body,
body.hs-skin .aux-wrapper,
body.hs-skin .aux-container,
body.hs-skin .aux-boxed-container,
body.hs-skin .aux-content,
body.hs-skin #main,
body.hs-skin .aux-main,
body.hs-skin #primary,
body.hs-skin .aux-primary {
  background: transparent !important;
}

body.hs-skin #main {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 8px 24px 72px;
  box-sizing: border-box;
}

/* page title band (Login, Register, course title, post title) */
body.hs-skin #site-title.page-title-section {
  background: #0a1120 !important;
  border-bottom: 1px solid rgba(148, 163, 184, .14);
  padding: 56px 24px 34px;
  margin: 0 0 40px;
}
body.hs-skin #site-title.page-title-section::before,
body.hs-skin #site-title.page-title-section::after {
  display: none !important;
}
body.hs-skin #site-title .page-title,
body.hs-skin #site-title .page-title-section h1,
body.hs-skin #site-title h1 {
  color: #eef4ff !important;
  font-size: clamp(30px, 3.4vw, 42px);
  font-weight: 700;
  letter-spacing: -.02em;
  margin: 0;
}
body.hs-skin #site-title .aux-breadcrumbs,
body.hs-skin #site-title .breadcrumb,
body.hs-skin #site-title nav {
  color: #8ea0bd !important;
  margin-top: 10px;
  font-size: 13px;
}
body.hs-skin #site-title .aux-breadcrumbs a,
body.hs-skin #site-title .breadcrumb a {
  color: #7fb0ff !important;
}

/* headings and body copy inside WordPress content */
body.hs-skin h1, body.hs-skin h2, body.hs-skin h3,
body.hs-skin h4, body.hs-skin h5, body.hs-skin h6,
body.hs-skin .entry-title,
body.hs-skin .elementor-heading-title,
body.hs-skin .tutor-course-details-title,
body.hs-skin .tutor-dashboard-content h1,
body.hs-skin .tutor-dashboard-content h2,
body.hs-skin .tutor-dashboard-content h3 {
  color: #eef4ff !important;
  letter-spacing: -.02em;
}

body.hs-skin p,
body.hs-skin li,
body.hs-skin .entry-content,
body.hs-skin .entry-summary,
body.hs-skin .elementor-widget-text-editor,
body.hs-skin .elementor-widget-text-editor p,
body.hs-skin .elementor-widget-text-editor li {
  color: #c2cfe3 !important;
}

body.hs-skin .entry-content a,
body.hs-skin .elementor-widget-text-editor a,
body.hs-skin .comment-content a {
  color: #7fb0ff !important;
  text-decoration: underline;
  text-underline-offset: 3px;
}
body.hs-skin .entry-content a:hover,
body.hs-skin .elementor-widget-text-editor a:hover {
  color: #a9c8ff !important;
}

body.hs-skin .entry-content img,
body.hs-skin .elementor-widget-image img,
body.hs-skin .wp-caption img {
  border-radius: 14px;
}

/* Elementor pages: kill the light section backgrounds, keep the layout */
body.hs-skin .elementor-section,
body.hs-skin .elementor-column,
body.hs-skin .elementor-element-populated,
body.hs-skin .elementor-widget-container,
body.hs-skin .elementor-widget-wrap {
  background-color: transparent !important;
  background-image: none !important;
}
body.hs-skin .elementor-section {
  border: 0 !important;
}
body.hs-skin .elementor-widget-divider .elementor-divider-separator {
  border-color: rgba(148, 163, 184, .18) !important;
}

/* tables (course curriculum, dashboard lists, post tables) */
body.hs-skin table,
body.hs-skin .tutor-table {
  background: transparent !important;
  color: #c2cfe3 !important;
  border-color: rgba(148, 163, 184, .18) !important;
}
body.hs-skin th,
body.hs-skin .tutor-table th {
  background: #101a2c !important;
  color: #eef4ff !important;
  border-color: rgba(148, 163, 184, .18) !important;
}
body.hs-skin td {
  border-color: rgba(148, 163, 184, .12) !important;
}

/* forms */
body.hs-skin input[type="text"],
body.hs-skin input[type="email"],
body.hs-skin input[type="password"],
body.hs-skin input[type="tel"],
body.hs-skin input[type="url"],
body.hs-skin input[type="number"],
body.hs-skin input[type="search"],
body.hs-skin select,
body.hs-skin textarea,
body.hs-skin .um-form-field,
body.hs-skin .tutor-form-control {
  background: #0b1322 !important;
  border: 1px solid #22304a !important;
  color: #e8eefb !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  min-height: 46px;
  padding: 11px 14px !important;
}
body.hs-skin input::placeholder,
body.hs-skin textarea::placeholder {
  color: #6d7f9c !important;
}
body.hs-skin input:focus,
body.hs-skin select:focus,
body.hs-skin textarea:focus,
body.hs-skin .um-form-field:focus {
  border-color: #4f8cff !important;
  outline: 0;
  box-shadow: 0 0 0 3px rgba(79, 140, 255, .18) !important;
}
body.hs-skin label,
body.hs-skin .um-field-label label {
  color: #9fb0c9 !important;
  font-weight: 600;
}

body.hs-skin .um-button,
body.hs-skin input[type="submit"],
body.hs-skin button[type="submit"],
body.hs-skin .tutor-btn,
body.hs-skin .tutor-btn-primary,
body.hs-skin .elementor-button {
  background: linear-gradient(180deg, #5b95ff, #3f7bf0) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 10px !important;
  font-weight: 600 !important;
  padding: 12px 20px !important;
  box-shadow: 0 10px 26px -14px rgba(79, 140, 255, .9) !important;
}
body.hs-skin .um-button:hover,
body.hs-skin input[type="submit"]:hover,
body.hs-skin .tutor-btn:hover {
  filter: brightness(1.08);
}

/* Ultimate Member forms */
body.hs-skin .um {
  max-width: 560px;
  margin: 0 auto;
}
body.hs-skin .um-form {
  background: #0e1728;
  border: 1px solid rgba(148, 163, 184, .16);
  border-radius: 18px;
  padding: 30px;
  box-shadow: 0 24px 60px -30px rgba(0, 0, 0, .9);
}
body.hs-skin .um-field {
  padding-bottom: 16px;
}
body.hs-skin .um-field-label {
  margin-bottom: 6px;
}
body.hs-skin .um-col-alt {
  margin: 6px 0 0;
}
body.hs-skin .um-field-checkbox label,
body.hs-skin .um-field-radio label,
body.hs-skin .um-field-label label {
  color: #9fb0c9 !important;
}
body.hs-skin .um-notice,
body.hs-skin .um-error,
body.hs-skin .um-message {
  border-radius: 10px;
}
body.hs-skin .um a {
  color: #7fb0ff !important;
}
body.hs-skin .um-field-description {
  color: #8ea0bd !important;
}

/* Tutor LMS: cards, dashboard, single course */
body.hs-skin .tutor-card,
body.hs-skin .tutor-card-body,
body.hs-skin .tutor-card-header,
body.hs-skin .tutor-card-footer,
body.hs-skin .tutor-dashboard-content-inner,
body.hs-skin .tutor-dashboard-content-inner > div,
body.hs-skin .tutor-dashboard-info-card,
body.hs-skin .tutor-accordion-item,
body.hs-skin .tutor-accordion-item-header,
body.hs-skin .tutor-course-details,
body.hs-skin .tutor-course-details-header,
body.hs-skin .tutor-course-details-instructors,
body.hs-skin .tutor-course-details-widget,
body.hs-skin .tutor-course-details-list,
body.hs-skin .tutor-single-course-sidebar,
body.hs-skin .tutor-single-course-segment,
body.hs-skin .tutor-course-topic,
body.hs-skin .tutor-course-loop,
body.hs-skin .tutor-course-loop-main,
body.hs-skin .tutor-course-list,
body.hs-skin .tutor-dashboard-menu,
body.hs-skin .tutor-dashboard-menu a,
body.hs-skin .tutor-wrap,
body.hs-skin .tutor-container {
  background-color: transparent !important;
  color: #c2cfe3 !important;
  border-color: rgba(148, 163, 184, .16) !important;
}
body.hs-skin .tutor-dashboard-menu a {
  color: #9fb0c9 !important;
  border-radius: 8px;
}
body.hs-skin .tutor-dashboard-menu a:hover,
body.hs-skin .tutor-dashboard-menu a.active {
  background: rgba(79, 140, 255, .14) !important;
  color: #eef4ff !important;
}
body.hs-skin .tutor-course-loop-title a,
body.hs-skin .tutor-course-details-title,
body.hs-skin .tutor-accordion-item-header,
body.hs-skin .tutor-accordion-item-header *,
body.hs-skin .tutor-lesson-title a {
  color: #eef4ff !important;
}
body.hs-skin .tutor-meta,
body.hs-skin .tutor-meta *,
body.hs-skin .tutor-course-loop-meta,
body.hs-skin .tutor-course-loop-meta *,
body.hs-skin .tutor-text-mute,
body.hs-skin .tutor-color-muted {
  color: #8ea0bd !important;
}

/* Tutor ships dark text utility classes that assume a white page */
body.hs-skin .tutor-color-black,
body.hs-skin [class*="tutor-color-black"],
body.hs-skin .tutor-h1,
body.hs-skin .tutor-h2,
body.hs-skin .tutor-h3,
body.hs-skin .tutor-h4,
body.hs-skin .tutor-h5,
body.hs-skin .tutor-h6,
body.hs-skin .tutor-dashboard h1,
body.hs-skin .tutor-dashboard h2,
body.hs-skin .tutor-dashboard h3,
body.hs-skin .tutor-dashboard h4,
body.hs-skin .tutor-dashboard h5,
body.hs-skin .tutor-dashboard h6,
body.hs-skin .tutor-dashboard .tutor-fs-4,
body.hs-skin .tutor-dashboard .tutor-fs-5 {
  color: #eef4ff !important;
}
body.hs-skin .tutor-color-secondary {
  color: #c2cfe3 !important;
}

/* course curriculum rows */
body.hs-skin .tutor-course-content-list-item,
body.hs-skin .tutor-course-content-list-item:nth-child(odd) {
  background: transparent !important;
  border-color: rgba(148, 163, 184, .12) !important;
}
body.hs-skin .tutor-course-content-list-item * {
  color: #c2cfe3 !important;
}
body.hs-skin .tutor-course-content-list-item:hover {
  background: rgba(79, 140, 255, .08) !important;
}
body.hs-skin .tutor-is-sticky {
  background: rgba(10, 17, 32, .94) !important;
  backdrop-filter: blur(8px);
}
body.hs-skin .tutor-accordion-item {
  border: 1px solid rgba(148, 163, 184, .16) !important;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 10px;
  background: #0e1728 !important;
}
body.hs-skin .tutor-accordion-item-header {
  background: #101a2c !important;
  border-bottom: 1px solid rgba(148, 163, 184, .14) !important;
}
body.hs-skin .tutor-course-details-tab,
body.hs-skin .tutor-nav,
body.hs-skin .tutor-nav-link {
  border-color: rgba(148, 163, 184, .16) !important;
  color: #9fb0c9 !important;
}
body.hs-skin .tutor-nav-link.active {
  color: #eef4ff !important;
  border-bottom-color: #4f8cff !important;
}
body.hs-skin .tutor-btn-outline-primary,
body.hs-skin .tutor-btn-ghost {
  background: rgba(255, 255, 255, .03) !important;
  border: 1px solid rgba(148, 163, 184, .28) !important;
  color: #c2cfe3 !important;
  box-shadow: none !important;
}
body.hs-skin .tutor-ratings-stars,
body.hs-skin .tutor-icon-star-line,
body.hs-skin .tutor-icon-star-bold {
  color: #f5b301 !important;
}
body.hs-skin .tutor-progress-bar,
body.hs-skin .tutor-progress-value {
  background-color: rgba(148, 163, 184, .18) !important;
}
body.hs-skin .tutor-progress-value {
  background-color: #4f8cff !important;
}

/* blog cards / archives */
body.hs-skin .post,
body.hs-skin .aux-blog,
body.hs-skin .aux-blog-post,
body.hs-skin article {
  background: transparent !important;
  color: #c2cfe3 !important;
}
body.hs-skin .entry-meta,
body.hs-skin .entry-meta a,
body.hs-skin .post-meta,
body.hs-skin .post-meta a {
  color: #8ea0bd !important;
}
body.hs-skin .entry-meta a:hover {
  color: #7fb0ff !important;
}
body.hs-skin blockquote {
  background: #0e1728 !important;
  border-left: 3px solid #4f8cff !important;
  color: #c2cfe3 !important;
  border-radius: 0 10px 10px 0;
  padding: 16px 20px;
}
body.hs-skin code,
body.hs-skin pre {
  background: #0b1322 !important;
  color: #d7e3f7 !important;
  border: 1px solid rgba(148, 163, 184, .16) !important;
  border-radius: 10px;
}
body.hs-skin pre {
  padding: 16px 18px;
  overflow: auto;
}

/* table of contents and other plugin boxes */
body.hs-skin #ez-toc-container,
body.hs-skin .ez-toc-container,
body.hs-skin .lwptoc,
body.hs-skin .lwptoc_item,
body.hs-skin .lwptoc_toggle,
body.hs-skin .sp-easy-accordion,
body.hs-skin .sp-ea-single {
  background: #0e1728 !important;
  color: #c2cfe3 !important;
  border-color: rgba(148, 163, 184, .16) !important;
  border-radius: 12px;
}
body.hs-skin #ez-toc-container a,
body.hs-skin .ez-toc-container a,
body.hs-skin .lwptoc a {
  color: #9fb0c9 !important;
}
body.hs-skin #ez-toc-container .ez-toc-title,
body.hs-skin .ez-toc-title {
  color: #eef4ff !important;
}

/* footer shell sits flush with the page */
body.hs-skin footer.hs-foot {
  margin-top: 40px;
}

@media (max-width: 780px) {
  body.hs-skin #main {
    padding: 4px 16px 48px;
  }
  body.hs-skin #site-title.page-title-section {
    padding: 36px 16px 24px;
    margin-bottom: 24px;
  }
  body.hs-skin .um-form {
    padding: 20px;
  }
}

/* Tutor prints a Wishlist button even when its Wishlist add-on is inactive,
   so the button just spins forever. Hide it until the add-on is enabled. */
body.hs-skin .tutor-course-wishlist-btn {
  display: none !important;
}

/* -------------------------------------------------------------------------
 * Blog posts that use the native WordPress template (no Elementor data).
 * Keep a readable measure, fluid headings and safe overflow. Scoped to
 * non-Elementor single posts so the legacy Elementor posts keep their layout.
 * ---------------------------------------------------------------------- */
body.single-post:not(.elementor-page) #main {
  padding-left: 16px;
  padding-right: 16px;
}

body.single-post:not(.elementor-page) .entry-main,
body.single-post:not(.elementor-page) .entry-media {
  /* Phlox makes <article> a column flex container, so these items are sized
     to their content (code blocks, figures) instead of the column. */
  width: 100%;
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
  min-width: 0;
}

body.single-post:not(.elementor-page) .entry-header,
body.single-post:not(.elementor-page) .entry-info,
body.single-post:not(.elementor-page) .entry-content {
  /* ~660px at 17px keeps the measure near 70 characters per line. */
  max-width: 660px;
  margin-left: auto;
  margin-right: auto;
}

body.single-post:not(.elementor-page) .entry-title {
  font-size: clamp(1.75rem, 1.15rem + 2.6vw, 3rem);
  line-height: 1.15;
  margin: 0 0 .35em;
}

body.single-post:not(.elementor-page) .entry-content {
  font-size: 1.0625rem;
  line-height: 1.72;
  overflow-wrap: anywhere;
}

/* Phlox sets a smaller size on paragraphs than on the content wrapper. */
body.single-post:not(.elementor-page) .entry-content p,
body.single-post:not(.elementor-page) .entry-content li,
body.single-post:not(.elementor-page) .entry-content ul,
body.single-post:not(.elementor-page) .entry-content ol {
  font-size: inherit;
  line-height: inherit;
}

body.single-post:not(.elementor-page) .entry-content h2 {
  font-size: clamp(1.35rem, 1.12rem + 1.05vw, 1.9rem);
  line-height: 1.25;
  margin: 2.1em 0 .65em;
}

body.single-post:not(.elementor-page) .entry-content h3 {
  font-size: clamp(1.15rem, 1.03rem + .55vw, 1.4rem);
  line-height: 1.3;
  margin: 1.8em 0 .55em;
}

body.single-post:not(.elementor-page) .entry-content p,
body.single-post:not(.elementor-page) .entry-content ul,
body.single-post:not(.elementor-page) .entry-content ol {
  margin: 0 0 1.15em;
}

body.single-post:not(.elementor-page) .entry-content ul,
body.single-post:not(.elementor-page) .entry-content ol {
  padding-left: 1.4em;
}

body.single-post:not(.elementor-page) .entry-content li {
  margin-bottom: .45em;
  padding-left: .15em;
}

body.single-post:not(.elementor-page) .entry-content a {
  overflow-wrap: anywhere;
}

body.single-post:not(.elementor-page) .entry-content img {
  max-width: 100%;
  height: auto;
}

body.single-post:not(.elementor-page) .entry-content pre {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

body.single-post:not(.elementor-page) .entry-content table {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

body.single-post:not(.elementor-page) .entry-content code {
  overflow-wrap: anywhere;
}

body.single-post:not(.elementor-page) .entry-content pre {
  font-size: .8125rem;
  line-height: 1.6;
  tab-size: 4;
}

body.single-post:not(.elementor-page) .entry-content figure {
  margin: 1.9em 0;
}

body.single-post:not(.elementor-page) .entry-content figure img {
  display: block;
  width: 100%;
  border-radius: 12px;
  border: 1px solid rgba(148, 163, 184, .18);
}

body.single-post:not(.elementor-page) .entry-content figcaption {
  margin-top: .75em;
  font-size: .875rem;
  line-height: 1.5;
  color: #8ea0bd;
  text-align: center;
}

@media (max-width: 600px) {
  body.single-post:not(.elementor-page) .entry-content {
    font-size: 1rem;
    line-height: 1.68;
  }
  body.single-post:not(.elementor-page) .entry-content h2 {
    margin-top: 1.8em;
  }
  /* Phlox adds 35px side padding here; keep 16px from #main instead. */
  body.single-post:not(.elementor-page) .aux-container.aux-fold {
    padding-left: 0;
    padding-right: 0;
  }
}

/* Comfortable touch targets for the shell controls on the post page. */
@media (pointer: coarse) {
  body.single-post:not(.elementor-page) .nav a,
  body.single-post:not(.elementor-page) .nav button,
  body.single-post:not(.elementor-page) .hs-foot a,
  body.single-post:not(.elementor-page) .ez-toc-toggle {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}