/* /styles/myprofile/layoutmyprofile.css */
/* Layout rules for My Profile; loaded after shared layout.css */

/* Align the dashboard ribbon with the main container */
#dashboardSidebar {
  max-width: var(--content-max-width);
  margin-inline: auto;
  padding-inline: var(--page-gutter);
  display: flex;
  gap: var(--gap-3);
  flex-wrap: wrap;
}
/* Force horizontal sliding on My Profile */
#dashboardSidebar {
  flex-wrap: nowrap;          /* override wrap -> keep one row */
  overflow-x: auto;           /* ensure the bar appears when needed */
  -webkit-overflow-scrolling: touch;
}
#dashboardSidebar > * { flex: 0 0 auto; }


/* Main area: nav + content share the same container width & gutters */
#hubMain {
  max-width: var(--content-max-width);
  margin-inline: auto;
  padding-inline: var(--page-gutter);
}

/* Top nav */
#hubNav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-3);
  align-items: center;
  padding-block: var(--gap-4);
  border-bottom: 1px solid var(--color-border-subtle);
}
.brand-marketing {
  display: block;
  height: var(--header-height); /* driven by token, keeps aspect ratio */
  width: auto;
  max-width: 100%;                /* prevent clipping on narrow viewports */
  object-fit: contain;
  image-rendering: -webkit-optimize-contrast; /* crispness for vector-like logos */
  image-rendering: crisp-edges;
  border: none;
  background: transparent;
}

/* Use real dark logo asset instead of filter inversion */
.brand-marketing--dark { display: none; }   /* default: show light, hide dark */

:root[data-theme="dark"] .brand-marketing--light { display: none; }
:root[data-theme="dark"] .brand-marketing--dark  { display: block; }


/* Submenus stay within the same gutters */
.submenu { width: 100%; display: none; }
.submenu.is-open { display: block; }
.submenu__row {
  margin-top: var(--gap-2);
  display: flex;
  gap: var(--gap-3);
  flex-wrap: wrap;
}

/* Two-column content area */
#mainContainer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: var(--gap-5);
  align-items: flex-start;
  padding-block: var(--gap-5);
}
#leftColumn  { min-width: 0; }
#rightColumn { min-width: 0; display: flex; flex-direction: column; gap: var(--gap-3); }

/* Stack columns on small screens */
@media (max-width: 900px) {
  #mainContainer {
    grid-template-columns: 1fr;
  }
}

/* Right-rail helpers (existing IDs/classes retained) */
.rail { display: grid; gap: var(--gap-2); }
.rail--hidden { display: none; }
.rail__heading { margin: 0 0 var(--gap-2); font-weight: 600; }