/* dnbmentors website — global styles */

html, body {
  margin: 0;
  padding: 0;
  background: #FAFAF7;
  color: #0A0A09;
  font-family: 'Geist', -apple-system, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01", "cv11";
}
body.dark { background: #0B0B0A; color: #FAFAF7; }

* { box-sizing: border-box; }

/* mobile overflow guard — never let the page scroll horizontally */
html, body { max-width: 100%; overflow-x: hidden; }
@media (max-width: 640px) {
  /* any explicit-width media/embeds shrink to fit */
  img, svg, video, table { max-width: 100%; }
  /* tables become contained internal scrollers, never page-level */
  .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  /* collapse marketing/about/pricing multi-column grids to a single column */
  .marketing-stats, .how-grid, .testimonials-grid, .institutions-grid,
  .about-mission-grid, .about-contact-grid, .pricing-grid, .inst-cta,
  .checkout-grid, .ck-2col, .profile-grid, .profile-id-row, .enr-2col,
  .ops-grid, .instr-grid, .instr-2col, .cohort-row, .community-grid,
  .group-about, .member-grid, .lib-row, .course-detail-body, .course-hero-grid,
  .cart-grid, .mat-grid, .notes-split, .forum-split, .topic-grid,
  .msg-grid, .invite-grid, .sched-row, .streak-hero, .lb-hero, .lb-body,
  .done-stats, .auth-grid, .prog-aside, .lesson-grid, .lesson-meta,
  .dash-body, .dash-greeting { grid-template-columns: 1fr !important; }
  /* fixed-width rails/sidebars and media placeholders fit the viewport */
  .lesson-grid > *, .topic-grid > *, .profile-grid > *, .forum-split > *,
  .msg-grid > *, .instr-grid > *, .ops-grid > * { min-width: 0 !important; max-width: 100% !important; }
  .lesson-video, .radiograph-placeholder { max-width: 100% !important; }
  /* horizontal tab/segment rows scroll inside their own box, never widen the page */
  .mobile-scroll-row { overflow-x: auto; flex-wrap: nowrap; max-width: 100%; min-width: 0; -webkit-overflow-scrolling: touch; }
  /* responsive nav (global, so it applies to marketing/pricing/about which mount their own nav) */
  .topnav-tabs { display: none !important; }
  .topnav-search { display: none !important; }
  .mkt-signin { display: none !important; }
  /* footer/action button rows wrap instead of pushing buttons off-screen */
  .action-row { flex-wrap: wrap !important; }
  .action-row > span { display: none !important; }
  .action-row > button, .action-row > a { max-width: 100%; }
  .compose-row { min-width: 0 !important; }
  .compose-tools { flex-wrap: wrap !important; min-width: 0 !important; }
  .score-field { flex: 1 1 240px !important; min-width: 0 !important; max-width: 100% !important; }
  .score-row { width: 100% !important; }
  .continue-card { width: 100% !important; max-width: 100% !important; min-width: 0 !important; grid-template-columns: 1fr !important; }
  .continue-card > * { min-width: 0 !important; max-width: 100% !important; }
  .continue-card .radiograph-placeholder { width: 100% !important; max-width: 100% !important; }
  .continue-actions { flex-wrap: wrap !important; }
  .dash-streak-footer { flex-wrap: wrap !important; justify-content: flex-start !important; }
  .dash-streak-footer > * { min-width: 0 !important; max-width: 100% !important; }
  .community-tabs {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
    overflow: visible !important;
    border-bottom: 0 !important;
  }
  .community-tab-btn {
    width: 100% !important;
    min-width: 0 !important;
    padding: 10px 8px !important;
    justify-content: center !important;
    border-radius: 9px !important;
    background: rgba(0, 0, 0, 0.03) !important;
  }
  .community-tab-btn > span[style*="bottom"] { display: none !important; }
  .community-member-link { min-width: 0 !important; max-width: 100% !important; }
  .community-member-link * { min-width: 0 !important; }
  .community-feed-header { flex-wrap: wrap !important; }
  .community-feed-author {
    flex: 1 1 calc(100% - 56px) !important;
    min-width: 0 !important;
    max-width: calc(100% - 56px) !important;
  }
  .community-feed-author-row { flex-wrap: nowrap !important; min-width: 0 !important; }
  .community-author-link {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  .community-feed-menu { flex: 0 0 auto !important; margin-left: auto !important; order: 2; }
  .community-feed-tag {
    display: flex !important;
    min-width: 0 !important;
    max-width: 100% !important;
    flex: 1 1 100% !important;
    order: 3;
    padding-left: 44px;
  }
  .community-feed-tag > * { max-width: 100% !important; }
  .instr-nav-tabs { flex: 1 1 auto !important; min-width: 0 !important; margin-left: 0 !important; }
  .instr-nav-tabs ~ span, .instr-nav-tabs ~ div { display: none !important; }
  /* main content columns never force the page wider */
  main, .page-main { min-width: 0; max-width: 100%; }
  /* reset desktop sticky/fixed sidebars to flow */
  .profile-sidebar, .checkout-summary > div, .cart-summary > div,
  .mat-aside, .prog-aside { position: static !important; width: auto !important; }
  /* large desktop section paddings → tighter on mobile */
  .mkt-section { padding-left: 20px !important; padding-right: 20px !important; }
}

/* hide scrollbars on aux scrollers */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { scrollbar-width: none; }

/* focus */
*:focus { outline: none; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid #FF3B1F;
  outline-offset: 3px;
  border-radius: 8px;
}

/* interactive feedback — inline-styled elements get a universal subtle hover/active */
a[href], button, select, [role="button"] { transition: opacity .12s ease, filter .12s ease; }
@media (hover: hover) {
  a[href]:hover, button:hover, [role="button"]:hover { opacity: 0.82; }
}
a[href]:active, button:active, [role="button"]:active { opacity: 0.6; }
button:disabled, a[aria-disabled="true"] { opacity: 0.4 !important; cursor: not-allowed; }

/* anchors */
a { color: inherit; text-decoration: none; }

/* V2 parity hygiene: no clipped identity/meta rows, no card-level horizontal creep */
.identity-row, .avatar-row, .member-row, .notification-row, .forum-row,
.message-row, .post-header, .profile-id-row, .inst-list-row, .lib-row,
.sched-row, .cohort-row, .order-row, .cart-row {
  min-width: 0;
}
.identity-row *, .avatar-row *, .member-row *, .notification-row *,
.forum-row *, .message-row *, .post-header *, .profile-id-row *,
.inst-list-row *, .lib-row *, .sched-row *, .cohort-row *, .order-row *,
.cart-row * {
  min-width: 0;
}
.meta-nowrap, .mono-nowrap, .nowrap, .inst-list-title,
.account-name, .profile-field-value, .order-id, .payment-meta {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.message-bubble, .sent-bubble, .received-bubble {
  overflow: visible;
  white-space: normal;
  overflow-wrap: anywhere;
}
.chip-row, .pill-row, .badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}
.chip-row > *, .pill-row > *, .badge-row > * {
  min-width: 0;
  max-width: 100%;
}
input, textarea, select, button, a {
  min-width: 0;
}

/* numerals */
.tnum { font-variant-numeric: tabular-nums; }

/* a button reset */
button { font-family: inherit; cursor: pointer; }

/* animations */
@keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } }
@keyframes fadeSlideUp { from { opacity: 0; transform: translateY(6px) } to { opacity: 1; transform: translateY(0) } }
@keyframes pulseAccent { 0%, 100% { box-shadow: 0 0 0 0 rgba(255,59,31,0.0) } 50% { box-shadow: 0 0 0 8px rgba(255,59,31,0.12) } }
@keyframes shimmer { 0% { background-position: -400px 0; } 100% { background-position: 400px 0; } }
@keyframes dnbViewTransitionOut {
  from { opacity: 1; filter: none; }
  to { opacity: 0.985; filter: saturate(0.98); }
}
@keyframes dnbViewTransitionIn {
  from { opacity: 0.94; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

@supports (view-transition-name: root) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: 160ms;
    animation-timing-function: cubic-bezier(0.2, 0, 0.2, 1);
    animation-fill-mode: both;
  }
  ::view-transition-old(root) { animation-name: dnbViewTransitionOut; }
  ::view-transition-new(root) { animation-name: dnbViewTransitionIn; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: 0.01ms !important;
    transform: none !important;
  }
}

/* page enter (disabled — screenshot tool snapshots before animation completes) */
.page-enter { /* no-op */ }

/* radiograph placeholder pattern — diagonal hatch on a near-black bg */
.radiograph-placeholder {
  background-color: #0F1012;
  background-image:
    repeating-linear-gradient(
      45deg,
      rgba(255,255,255,0.04) 0,
      rgba(255,255,255,0.04) 1px,
      transparent 1px,
      transparent 14px
    );
  color: rgba(255,255,255,0.34);
}
.radiograph-placeholder .label {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* Card with a subtle warm shadow */
.warm-shadow {
  box-shadow: 0 1px 0 rgba(10,10,9,0.02), 0 12px 24px -8px rgba(10,10,9,0.08);
}
body.dark .warm-shadow { box-shadow: none; }

/* a thin top-of-card accent bar utility */
.accent-bar { background: #FF3B1F; height: 2px; width: 32px; border-radius: 2px; }

/* shimmer used on the video placeholder */
.video-shimmer::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(110deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.04) 50%, rgba(255,255,255,0) 100%);
  background-size: 400px 100%;
  animation: shimmer 6s linear infinite;
  pointer-events: none;
}